@charset "UTF-8";
/* =====================================================================
   Unfallzeitung.de — Oberfläche der öffentlichen Seite
   Handgeschrieben, ohne Gerüst und ohne Übersetzungsschritt.

   Aufbau
     1  Farben und Masse
     2  Grundlagen
     3  Bausteine (Knöpfe, Marken, Bilder, Platzhalter)
     4  Kopf und Fuss
     5  Aufmacher
     6  Artikelkarten und Listen
     7  Seitenleiste
     8  Artikelseite
     9  Weitere Seiten
    10  Blätterung, Formulare, Meldungen
    11  Rücksichten: Bewegung, Touch, Druck
   ===================================================================== */

/* ── 0  Schriften ────────────────────────────────────────────────────
   Poppins und Source Serif 4 liegen unter assets/schriften/ und kommen
   damit von derselben Adresse wie alles andere. Vorher lud die Seite sie
   über fonts.googleapis.com — das waren zwei zusätzliche Verbindungen und
   ein zweites Stylesheet, das den Aufbau der Seite aufhielt.

   font-display: swap  — der Text steht sofort, in der Ersatzschrift.
   unicode-range       — die Datei für latin-ext holt der Browser nur,
                         wenn auf der Seite wirklich ein Zeichen daraus
                         vorkommt. Deutsch braucht sie so gut wie nie.
   Source Serif 4 ist eine veränderliche Schrift: eine Datei für 400 bis
   600, deshalb steht dort eine Spanne.
   =================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../schriften/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../schriften/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../schriften/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../schriften/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../schriften/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../schriften/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1  Farben und Masse ─────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --bg: #f1f1f4;
  --flaeche: #ffffff;
  --flaeche-2: #f7f7f9;
  --text: #14141a;
  --text-2: #3f3f4a;
  --gedaempft: #6b6b77;
  --linie: #e1e1e7;
  --linie-2: #cbcbd4;
  --akzent: #1d4e7c;
  --akzent-2: #2a6ba8;

  /* Abgeleitet: gefüllte Marke, zarte Füllung, Fussfläche. */
  --akzent-flaeche: #1d4e7c;
  --akzent-fuellung: color-mix(in oklab, var(--akzent) 9%, transparent);
  --akzent-kante: color-mix(in oklab, var(--akzent) 18%, transparent);
  --fuss-bg: #0d131a;
  --fuss-text: rgba(255, 255, 255, .62);
  --fuss-linie: rgba(255, 255, 255, .09);

  /* Grund unter den Aufmacherkacheln — in beiden Themen dunkel. */
  --kachel-grund: #101a24;
  --kachel-akzent: #9fc8ea;

  --hebung: 0 1px 2px rgba(20, 20, 30, .06);
  --hebung-2: 0 1px 3px rgba(20, 20, 30, .09), 0 8px 20px -14px rgba(20, 20, 30, .3);

  --radius: 6px;
  --radius-klein: 4px;
  --rand-breite: 1280px;
  --rand-luft: clamp(16px, 4vw, 32px);

  --schrift: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-lesen: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* Dunkel, wenn das System es will — ausser die Wahl steht ausdrücklich auf hell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --bg: #0f0f13;
    --flaeche: #17171d;
    --flaeche-2: #1e1e26;
    --text: #eeeef2;
    --text-2: #c2c2cc;
    --gedaempft: #878794;
    --linie: #26262f;
    --linie-2: #35353f;
    --akzent: #7fb6e8;
    --akzent-2: #4e93cf;

    --akzent-flaeche: #2a6398;
    --akzent-fuellung: color-mix(in oklab, var(--akzent) 12%, transparent);
    --akzent-kante: color-mix(in oklab, var(--akzent) 22%, transparent);
    --fuss-bg: #060a0f;
    --fuss-text: rgba(255, 255, 255, .56);

    --hebung: 0 1px 2px rgba(0, 0, 0, .5);
    --hebung-2: 0 1px 3px rgba(0, 0, 0, .6), 0 10px 24px -16px rgba(0, 0, 0, .9);
  }
}

/* Ausdrücklich gewähltes dunkles Thema — gilt unabhängig vom System. */
:root[data-thema="dunkel"] {
  --bg: #0f0f13;
  --flaeche: #17171d;
  --flaeche-2: #1e1e26;
  --text: #eeeef2;
  --text-2: #c2c2cc;
  --gedaempft: #878794;
  --linie: #26262f;
  --linie-2: #35353f;
  --akzent: #7fb6e8;
  --akzent-2: #4e93cf;

  --akzent-flaeche: #2a6398;
  --akzent-fuellung: color-mix(in oklab, var(--akzent) 12%, transparent);
  --akzent-kante: color-mix(in oklab, var(--akzent) 22%, transparent);
  --fuss-bg: #060a0f;
  --fuss-text: rgba(255, 255, 255, .56);

  --hebung: 0 1px 2px rgba(0, 0, 0, .5);
  --hebung-2: 0 1px 3px rgba(0, 0, 0, .6), 0 10px 24px -16px rgba(0, 0, 0, .9);
}

/* ── 2  Grundlagen ──────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

/* Verstecktes bleibt versteckt.
   Der Browser blendet [hidden] nur mit `display: none` aus seinem eigenen
   Stylesheet aus; jede eigene Regel mit `display` schlägt das. Der
   Teilen-Knopf für den Systemdialog trägt `hidden`, bis das Skript
   feststellt, dass das Gerät ihn beherrscht — ohne diese Zeile stünde er
   auch dort, wo er nichts täte, weil `.teilen__knopf` auf `inline-flex`
   steht. Bei [hidden] ist !important der vorgesehene Weg. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { max-width: 100%; }

a {
  color: var(--akzent);
  text-decoration: none;

  &:hover { color: var(--akzent-2); }
}

button { font: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Nur für Vorlesegeräte sichtbar. */
.nur-fuer-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-klein);
  background: var(--akzent-flaeche);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top .12s ease-out;

  &:focus { top: 8px; color: #fff; }
}

/* Der gemeinsame Rand: 1280 px Inhalt, aussen mitwachsende Luft. */
.rand {
  width: 100%;
  max-width: calc(var(--rand-breite) + 2 * var(--rand-luft));
  margin-inline: auto;
  padding-inline: var(--rand-luft);
}

.bereich { padding-block: clamp(24px, 4vw, 40px); }
.bereich--aufmacher { padding-block: clamp(20px, 3.4vw, 32px) 0; }
.bereich--schmal { max-width: 720px; }

.gitter--mit-leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

@media (max-width: 1060px) {
  .gitter--mit-leiste { grid-template-columns: minmax(0, 1fr); }
}

/* Rubrik: die kleine Zeile über jedem Abschnitt. */
.rubrik {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
}

.bereichskopf {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;

  & .bereichskopf__linie {
    flex: 1 1 auto;
    height: 1px;
    background: var(--linie);
  }

  & .bereichskopf__verweis {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
  }
}

.hinweis {
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 15px;
  text-wrap: pretty;
}

.seitentitel {
  margin-bottom: clamp(18px, 2.6vw, 26px);

  & .seitentitel__text {
    margin-top: 6px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
  }

  & .seitentitel__anriss {
    margin-top: 12px;
    max-width: 62ch;
    font-family: var(--schrift-lesen);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--text-2);
    text-wrap: pretty;
  }

  & .seitentitel__zahl {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--gedaempft);
  }
}

.brotkrumen {
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--gedaempft);

  & ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
  }

  & li + li::before {
    content: "›";
    margin-right: 9px;
    color: var(--linie-2);
  }
}

/* ── 3  Bausteine ───────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 19px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;

  &:hover { border-color: var(--akzent); color: var(--akzent); }
}

.knopf--gefuellt {
  border-color: transparent;
  background: var(--akzent-flaeche);
  color: #fff;
  box-shadow: var(--hebung);

  &:hover { background: var(--akzent-2); color: #fff; }
}

.knopf--breit { width: 100%; }

/* Marke: das gefüllte Ressortzeichen auf dunklem Grund. */
.marke {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius);
  background: var(--akzent-flaeche);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.marke--verweis:hover { background: var(--akzent-2); color: #fff; }

/* Ressortzeichen in hellen Karten. */
.ressortchip {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--akzent-fuellung);
  color: var(--akzent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;

  &:hover { background: color-mix(in oklab, var(--akzent) 16%, transparent); }
}

.schlagwort {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 13px;

  &:hover { border-color: var(--akzent); color: var(--akzent); }
}

/* Bilder: das Seitenverhältnis steht fest, der Zuschnitt kommt vom Server. */
.bild {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--flaeche-2);

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.bild--21-9, .platzhalterbild--21-9 { aspect-ratio: 21 / 9; }
.bild--16-9, .platzhalterbild--16-9 { aspect-ratio: 16 / 9; }
.bild--4-3,  .platzhalterbild--4-3  { aspect-ratio: 4 / 3; }
.bild--1-1,  .platzhalterbild--1-1  { aspect-ratio: 1 / 1; }

/* Gestaltete Fläche für die 88 % Beiträge ohne Bild. */
.platzhalterbild {
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--flaeche-2);
  border: 1px solid var(--akzent-kante);
  border-radius: inherit;

  & .platzhalterbild__struktur {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        45deg,
        transparent 0 11px,
        color-mix(in oklab, var(--akzent) 7%, transparent) 11px 12px
      );
  }

  & .platzhalterbild__kuerzel {
    position: relative;
    font-size: clamp(15px, 12cqw, 64px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--akzent);
  }
}

.platzhalterbild--lang .platzhalterbild__kuerzel { font-size: clamp(13px, 8.5cqw, 46px); }

/* ── 4  Kopf und Fuss ───────────────────────────────────────────── */

.servicezeile {
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  font-size: 12.5px;
  color: var(--gedaempft);
}

.servicezeile__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.servicezeile__daten {
  display: flex;
  align-items: center;
  gap: 18px;
}

.servicezeile__trenner {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--linie-2);
}

.servicezeile__werkzeuge {
  display: flex;
  align-items: center;
  gap: 16px;

  & a { color: var(--gedaempft); }
  & a:hover { color: var(--akzent); }
}

.themaschalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;

  &:hover { border-color: var(--akzent); color: var(--akzent); }
}

@media (max-width: 760px) {
  .servicezeile__anspruch,
  .servicezeile__daten .servicezeile__trenner { display: none; }
}

.kopf {
  position: relative;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  padding-block: 20px;
}

.kopf__logo {
  flex: 0 0 auto;
  line-height: 0;

  & img {
    height: 40px;
    width: auto;
  }

  & .kopf__logo-dunkel { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .kopf__logo-hell { display: none; }
  :root:not([data-thema="hell"]) .kopf__logo-dunkel { display: block; }
}

:root[data-thema="dunkel"] {
  & .kopf__logo-hell { display: none; }
  & .kopf__logo-dunkel { display: block; }
}

:root[data-thema="hell"] {
  & .kopf__logo-hell { display: block; }
  & .kopf__logo-dunkel { display: none; }
}

/* Die Navigation ist das nachgiebige Glied der Kopfzeile: sie schrumpft und
   rollt notfalls waagerecht, statt den Rest hinauszudraengen. */
.hauptnavigation {
  min-width: 0;
  flex: 1 1 auto;
}

.hauptnavigation__liste {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar { display: none; }

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}

.hauptnavigation__verweis {
  /* Ressortnamen brechen nie um - ein zweizeiliger Eintrag laesst die
     ganze Kopfzeile unruhig wirken. Deshalb stehen dort die Kurznamen. */
  white-space: nowrap;
  display: block;
  padding: 9px 13px;
  border-radius: 5px;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;

  &:hover { background: var(--flaeche-2); color: var(--text); }

  &[aria-current="page"] {
    background: var(--akzent-fuellung);
    color: var(--text);
  }
}

.navischalter {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--linie-2);
  border-radius: 5px;
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.kopf__werkzeuge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Suche und Anmeldeknopf haben feste Innenmasse. Gaebe die Leiste nach,
     wuerden ihre Kinder aus dem Fenster laufen - nachgeben soll die
     Navigation daneben. */
  flex: 0 0 auto;
}

.suche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 206px;
  padding: 9px 15px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--hebung);

  &:focus-within { border-color: var(--akzent); }

  & .suche__zeichen {
    flex: 0 0 auto;
    color: var(--gedaempft);
  }

  & .suche__feld {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;

    &::placeholder { color: var(--gedaempft); }
    &:focus { outline: none; }
    &::-webkit-search-cancel-button { filter: grayscale(1); }
  }

  & .suche__knopf {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  & .suche__knopf:focus-visible {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 4px 10px;
    border: 1px solid var(--akzent);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--akzent);
    font-size: 12px;
  }
}

.suchvorschlaege {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung-2);

  & li + li { border-top: 1px solid var(--linie); }

  & a {
    display: block;
    padding: 10px 14px;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.4;

    &:hover, &:focus-visible { background: var(--flaeche-2); }
  }
}

.suche--gross {
  width: 100%;
  max-width: 640px;
  margin-bottom: 26px;
  padding: 8px 8px 8px 18px;

  & .suche__feld { font-size: 15px; }

  /* Hier ist die Suche der Zweck der Seite — der Knopf steht sichtbar da. */
  & .suche__knopf {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--akzent-flaeche);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;

    &:hover { background: var(--akzent-2); }
  }
}

@media (max-width: 1180px) {
  .kopf__werkzeuge .suche { width: 168px; }
}

@media (max-width: 1100px) {
  .kopf__inhalt { flex-wrap: wrap; }
  .navischalter { display: inline-flex; }
  .kopf__werkzeuge { margin-left: auto; }

  .hauptnavigation {
    order: 3;
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--linie);
    padding-top: 12px;
  }

  .hauptnavigation--offen { display: block; }

  .hauptnavigation__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .hauptnavigation__verweis {
    padding: 12px 14px;
    font-size: 15px;
  }
}

/* Auf dem Telefon rutschen Suche und Konto in eine eigene Zeile —
   die Suche verschwindet nicht, sie bekommt nur mehr Platz. */
@media (max-width: 620px) {
  .kopf__logo img { height: 32px; }

  .kopf__werkzeuge {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
  }

  .kopf__werkzeuge .suche {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

.fuss {
  margin-top: clamp(32px, 5vw, 56px);
  padding-block: 48px 30px;
  background: var(--fuss-bg);
  color: var(--fuss-text);

  & a {
    color: var(--fuss-text);
    font-size: 13.5px;

    &:hover { color: #fff; }
  }
}

.fuss__raster {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
}

.fuss__marke img {
  height: 38px;
  width: auto;
}

.fuss__text {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.fuss__spalte {
  & ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
}

.fuss__titel {
  margin-bottom: 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--fuss-linie);
  font-size: 12.5px;
}

@media (max-width: 860px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── 5  Aufmacher ───────────────────────────────────────────────── */

.aufmacher { --aufmacher-luft: 18px; }

.aufmacher--zwei,
.aufmacher--drei,
.aufmacher--vier {
  display: grid;
  gap: var(--aufmacher-luft);
}

.aufmacher--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aufmacher--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aufmacher--vier { grid-template-columns: 1.62fr 1fr; }

.aufmacher--drei > .aufmacherkachel--gross { grid-column: span 2; }

.aufmacher__stapel,
.aufmacher__liste {
  display: flex;
  flex-direction: column;
  gap: var(--aufmacher-luft);
  min-height: 0;
}

.aufmacher__liste { gap: 12px; }

.aufmacherkachel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kachel-grund);
  box-shadow: var(--hebung-2);

  & .aufmacherkachel__verweis {
    display: block;
    height: 100%;
    color: #fff;
  }

  & .aufmacherkachel__schleier {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(12, 7, 16, .93),
      rgba(12, 7, 16, .55) 40%,
      rgba(12, 7, 16, .02) 76%
    );
  }

  & .aufmacherkachel__text {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(16px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px);
  }

  & .aufmacherkachel__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .68);
  }

  & .aufmacherkachel__titel {
    max-width: 32ch;
    color: #fff;
  }

  & .aufmacherkachel__anriss {
    margin-top: 12px;
    max-width: 60ch;
    font-family: var(--schrift-lesen);
    font-size: clamp(15px, 1.4vw, 16.5px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    text-wrap: pretty;
  }

  /* Ohne Bild greift die gestaltete Fläche — hier in dunklem Ton. */
  & .platzhalterbild {
    background: var(--kachel-grund);
    border-color: color-mix(in oklab, var(--kachel-akzent) 22%, transparent);
  }

  & .platzhalterbild__kuerzel { color: var(--kachel-akzent); }

  & .platzhalterbild__struktur {
    background: repeating-linear-gradient(
      45deg,
      transparent 0 11px,
      color-mix(in oklab, var(--kachel-akzent) 10%, transparent) 11px 12px
    );
  }

  &:hover .aufmacherkachel__titel { text-decoration: underline; text-underline-offset: 3px; }
}

.aufmacherkachel--panorama .aufmacherkachel__titel { font-size: clamp(22px, 3.1vw, 36px); }

/* Die grosse Kachel gibt das Verhältnis vor; das Bild füllt die Fläche
   auch dann, wenn die Spalte daneben etwas mehr Höhe verlangt. */
.aufmacherkachel--gross {
  aspect-ratio: 16 / 9;
  height: 100%;

  & .bild,
  & .platzhalterbild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  & .aufmacherkachel__titel { font-size: clamp(20px, 2.4vw, 31px); }
}
.aufmacherkachel--haelfte .aufmacherkachel__titel { font-size: clamp(18px, 2vw, 23px); max-width: 26ch; }
.aufmacherkachel--schmal .aufmacherkachel__titel { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.28; }

/* Die kleinen Kacheln füllen die Höhe der grossen — sonst stünde
   die rechte Spalte über. */
.aufmacherkachel--schmal {
  flex: 1 1 0;
  box-shadow: var(--hebung);

  & .bild,
  & .platzhalterbild {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
  }

  & .aufmacherkachel__schleier {
    background: linear-gradient(
      to top,
      rgba(12, 7, 16, .94) 4%,
      rgba(12, 7, 16, .28) 58%,
      transparent 84%
    );
  }

  & .aufmacherkachel__zeile { margin-bottom: 7px; }
}

.aufmacherkachel--schmal .aufmacherkachel__verweis { min-height: 150px; }

/* Zeilen mit quadratischem Vorschaubild — die Variante mit vier Einträgen. */
.aufmacherzeile {
  flex: 1 1 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  /* Das Vorschaubild darf mitgehen: die drei Zeilen zusammen sind so hoch
     wie die grosse Kachel daneben — nicht umgekehrt. */
  & .aufmacherzeile__verweis {
    display: grid;
    grid-template-columns: clamp(72px, 24%, 112px) minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    height: 100%;
    padding: 11px;
    color: var(--text);
  }

  & .aufmacherzeile__flaeche {
    border-radius: 5px;
    overflow: hidden;
  }

  & .aufmacherzeile__ressort {
    display: block;
    color: var(--akzent);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  & .aufmacherzeile__titel {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.015em;
  }

  &:hover { border-color: var(--linie-2); }
  &:hover .aufmacherzeile__titel { color: var(--akzent); }
}

/* Schmale Bildschirme: alles fällt auf eine Spalte, die kleinen
   Kacheln werden zu Zeilen mit Vorschaubild. */
@media (max-width: 900px) {
  .aufmacher--zwei,
  .aufmacher--drei,
  .aufmacher--vier { grid-template-columns: minmax(0, 1fr); }

  .aufmacher--drei > .aufmacherkachel--gross { grid-column: auto; }

  /* In einer Spalte richtet sich die Höhe nach dem Inhalt, nicht mehr
     nach der grossen Kachel daneben. */
  .aufmacher__stapel > .aufmacherkachel--schmal,
  .aufmacher__liste > .aufmacherzeile { flex: 0 0 auto; }

  .aufmacherkachel--schmal {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    box-shadow: var(--hebung);

    & .aufmacherkachel__verweis {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 15px;
      align-items: center;
      min-height: 0;
      height: auto;
      padding: 11px;
      color: var(--text);
    }

    & .bild,
    & .platzhalterbild {
      position: static;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 5px;
    }

    & .platzhalterbild {
      background: var(--flaeche-2);
      border-color: var(--akzent-kante);
    }

    & .platzhalterbild__kuerzel { color: var(--akzent); }

    & .aufmacherkachel__schleier { display: none; }

    & .aufmacherkachel__text {
      position: static;
      padding: 0;
    }

    & .aufmacherkachel__zeile {
      margin-bottom: 6px;
      color: var(--gedaempft);
    }

    & .aufmacherkachel__zeile .marke {
      background: none;
      padding: 0;
      color: var(--akzent);
      font-size: 9.5px;
    }

    & .aufmacherkachel__titel { color: var(--text); }
  }
}

@media (max-width: 700px) {
  /* Ein einzelnes Panorama wäre auf dem Telefon nur ein Streifen. */
  .aufmacherkachel--panorama .bild,
  .aufmacherkachel--panorama .platzhalterbild { aspect-ratio: 16 / 9; }

  .aufmacherzeile .aufmacherzeile__verweis { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ── 6  Artikelkarten und Listen ────────────────────────────────── */

.kartenstrom {
  container: strom / inline-size;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.artikelkarte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  &:hover { border-color: var(--linie-2); }

  & .artikelkarte__flaeche {
    overflow: hidden;
    border-radius: 5px;
  }

  & .artikelkarte__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gedaempft);
  }

  & .artikelkarte__titel {
    font-size: 19.5px;
    line-height: 1.22;

    & a { color: var(--text); }
    & a:hover { color: var(--akzent); }
  }

  & .artikelkarte__anriss {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-2);
    text-wrap: pretty;
  }

  & .artikelkarte__fuss {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gedaempft);

    & a { color: var(--gedaempft); }
    & a:hover { color: var(--akzent); }
  }
}

.artikelkarte--liste {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 20px;
  padding: 14px;

  /* Das Bild geht über die volle Höhe der Karte — sonst bliebe unter
     ihm ein leerer Streifen, sobald der Anriss länger wird. */
  & .artikelkarte__flaeche {
    height: 100%;
    min-height: 138px;
  }

  & .bild,
  & .platzhalterbild {
    height: 100%;
    aspect-ratio: auto;
  }

  & .artikelkarte__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 6px;
  }
}

.artikelkarte--kachel {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  & .artikelkarte__flaeche { border-radius: 0; }

  & .artikelkarte__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  & .artikelkarte__titel { font-size: 18px; }
}

.artikelkarte--klein {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 13px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;

  & .artikelkarte__titel {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
  }

  & + .artikelkarte--klein { border-top: 1px solid var(--linie); }
}

/* Wird die Spalte schmal, stellt sich die Karte selbst um —
   unabhängig davon, wie breit das Fenster ist. */
@container strom (max-width: 560px) {
  .artikelkarte--liste {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;

    & .artikelkarte__flaeche { height: auto; min-height: 0; }

    & .bild,
    & .platzhalterbild { height: auto; aspect-ratio: 16 / 9; }

    & .artikelkarte__text { padding-right: 0; }

    & .artikelkarte__titel { font-size: 18px; }
  }
}

.kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.unterressorts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* ── 7  Seitenleiste ────────────────────────────────────────────── */

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (min-width: 1061px) {
  .seitenleiste--haftend {
    position: sticky;
    top: 24px;
  }
}

.kasten {
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  & .kasten__titel {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--linie);
    color: var(--akzent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

.kasten--hinweis {
  border-top: 3px solid var(--akzent);
  padding: 22px 20px;

  & .kasten__ueberschrift { font-size: 19px; }

  & .kasten__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
    text-wrap: pretty;
  }

  & .kasten__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
}

.rangliste {
  & .rangliste__eintrag + .rangliste__eintrag { border-top: 1px solid var(--linie); }

  & a {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    color: var(--text);

    &:hover { background: var(--flaeche-2); }
  }

  & .rangliste__zahl {
    flex: 0 0 auto;
    color: var(--akzent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }

  & .rangliste__titel {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }
}

.ressortliste {
  padding: 8px;

  & a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 5px;
    color: var(--text-2);
    font-size: 14px;

    &:hover { background: var(--flaeche-2); color: var(--akzent); }
  }

  & .ressortliste__zahl {
    font-size: 12px;
    color: var(--gedaempft);
    font-variant-numeric: tabular-nums;
  }
}

/* ── 8  Artikelseite ────────────────────────────────────────────── */

.lesefortschritt {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 3px;
  background: var(--linie);

  & .lesefortschritt__balken {
    display: block;
    width: 0;
    height: 100%;
    background: var(--akzent);
  }
}

.artikel {
  & .artikel__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--gedaempft);
  }

  & .artikel__titel {
    max-width: 24ch;
    font-size: clamp(28px, 4.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -.024em;
  }

  & .artikel__vorspann {
    margin-top: 16px;
    max-width: 60ch;
    font-family: var(--schrift-lesen);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    color: var(--text-2);
    text-wrap: pretty;
  }
}

/* Die Kurzfassung — der erste zusammenhängende Absatz der Seite, gleich
   unter der Überschrift. Sie steht dort für Leser wie für Antwortmaschinen;
   versteckt wird nichts. */
.kurzfassung {
  margin: 20px 0 0;
  padding: 14px 16px 14px 18px;
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: var(--akzent-fuellung);
  font-family: var(--schrift-lesen);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

.kurzfassung__marke {
  display: block;
  margin-bottom: 4px;
  font-family: var(--schrift);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* Die Fundstelle einer Gerichtsentscheidung — für dieses Portal die
   wertvollste Angabe überhaupt, deshalb eigenständig ausgezeichnet. */
.entscheidung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--linie-2);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  font-size: 14px;

  & dt {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gedaempft);
    align-self: baseline;
  }

  & dd {
    margin: 0;
    color: var(--text);
    font-weight: 500;
  }

  & dd.entscheidung__az {
    font-variant-numeric: tabular-nums;
  }
}

/* Die Angabenzeile: wer, wann, wie lange, woher — mit Beschriftung, damit
   auch eine Maschine die Angabe nicht raten muss. */
.angaben {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 18px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-size: 12.5px;
  line-height: 1.45;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  & dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gedaempft);
  }

  & dd {
    margin: 0;
    color: var(--text-2);
    font-weight: 500;
  }

  & dd a { color: var(--text-2); }
  & dd a:hover { color: var(--akzent); }
}

.autorzeile {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 24px 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  & .autorzeile__zeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--akzent-flaeche);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }

  & .autorzeile__angaben {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  & .autorzeile__name {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
  }

  & .autorzeile__name:hover { color: var(--akzent); }

  & .autorzeile__titel {
    font-size: 12.5px;
    color: var(--gedaempft);
  }
}

.artikelbild {
  margin: 0 0 30px;

  & .bild {
    border-radius: var(--radius);
    box-shadow: var(--hebung-2);
  }

  & .artikelbild__unterschrift {
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gedaempft);
    text-wrap: pretty;
  }

  & .artikelbild__nachweis::before {
    content: "|";
    margin: 0 6px;
    color: var(--linie-2);
  }
}

/* Der Fliesstext — die einzige Stelle mit der Lesetype. */
.artikeltext {
  max-width: 70ch;
  font-family: var(--schrift-lesen);
  font-size: clamp(17px, 1.7vw, 18px);
  line-height: 1.72;
  color: var(--text);

  & p { margin: 0 0 22px; text-wrap: pretty; }

  & h2, & h3, & h4 {
    font-family: var(--schrift);
    margin: 36px 0 14px;
  }

  & h2 { font-size: clamp(21px, 2.4vw, 26px); }
  & h3 { font-size: clamp(18px, 2vw, 21px); }
  & h4 { font-size: 17px; }

  & ul, & ol {
    margin: 0 0 22px;
    padding-left: 1.3em;
    list-style: revert;
  }

  & li { margin-bottom: 8px; }

  & a { text-decoration: underline; text-underline-offset: 2px; }

  & blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--akzent);
    border-radius: var(--radius);
    background: var(--flaeche-2);

    & p {
      margin: 0;
      font-size: clamp(17px, 1.9vw, 19.5px);
      font-weight: 600;
      line-height: 1.55;
      color: var(--text);
    }
  }

  & figure { margin: 26px 0; }

  & figcaption {
    margin-top: 9px;
    font-family: var(--schrift);
    font-size: 12.5px;
    color: var(--gedaempft);
  }

  & img {
    height: auto;
    border-radius: var(--radius-klein);
  }

  & table {
    width: 100%;
    margin-bottom: 22px;
    border-collapse: collapse;
    font-family: var(--schrift);
    font-size: 14px;
  }

  & th, & td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--linie);
    text-align: left;
  }

  & hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--linie);
  }
}

.quellen {
  margin-top: 36px;
  max-width: 70ch;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  & .quellen__titel {
    padding: 14px 20px;
    border-bottom: 1px solid var(--linie);
  }

  & .quellen__liste li + li { border-top: 1px solid var(--linie); }

  & .quellen__liste a,
  & .quellen__liste > li > span {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 20px;
    font-size: 14px;
  }

  & .quellen__liste a span { flex: 1 1 auto; }
  & .quellen__liste a:hover { background: var(--flaeche-2); }
  & .quellen__liste > li > span { color: var(--text-2); }
}

.schlagworte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  max-width: 70ch;
}

/* ── 9  Weitere Seiten ──────────────────────────────────────────── */

.autorkopf {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;

  & .autorkopf__zeichen {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--akzent-flaeche);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
  }

  & .autorkopf__titel {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--gedaempft);
  }

  & .autorkopf__text {
    margin-top: 12px;
    max-width: 62ch;
    font-family: var(--schrift-lesen);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-2);
    text-wrap: pretty;
  }
}

.archiv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.archivjahr {
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  & .archivjahr__titel {
    font-size: 26px;

    & a { color: var(--text); }
    & a:hover { color: var(--akzent); }
  }

  & .archivjahr__zahl {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--gedaempft);
  }

  & .archivjahr__monate {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;

    & a {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 9px;
      border-radius: 5px;
      color: var(--text-2);
      font-size: 13.5px;

      &:hover { background: var(--flaeche-2); color: var(--akzent); }
    }
  }

  & .archivjahr__monatszahl {
    color: var(--gedaempft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
}

.fehlerseite {
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);
  text-align: center;

  & .fehlerseite__zahl {
    font-size: clamp(48px, 9vw, 74px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--akzent);
  }

  & .fehlerseite__titel {
    margin-top: 14px;
    font-size: clamp(22px, 3vw, 30px);
  }

  & .fehlerseite__text {
    margin: 14px auto 0;
    max-width: 52ch;
    font-family: var(--schrift-lesen);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-2);
    text-wrap: pretty;
  }

  & .fehlerseite__aktion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
  }
}

.anmeldung {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--hebung);

  & .anmeldung__titel { font-size: clamp(24px, 3vw, 30px); }

  & .anmeldung__text {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
    text-wrap: pretty;
  }
}

/* ── 10  Blätterung, Formulare, Meldungen ───────────────────────── */

.blaetterung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;

  & .blaetterung__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  & .blaetterung__schritt,
  & .blaetterung__zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 40px;
    padding: 10px 14px;
    border: 1px solid var(--linie-2);
    border-radius: 5px;
    background: var(--flaeche);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  & a.blaetterung__schritt:hover,
  & a.blaetterung__zahl:hover {
    border-color: var(--akzent);
    color: var(--akzent);
  }

  & .blaetterung__schritt--aus {
    opacity: .45;
    cursor: default;
  }

  & .blaetterung__zahl--hier {
    border-color: transparent;
    background: var(--akzent-flaeche);
    color: #fff;
  }

  & .blaetterung__luecke {
    display: inline-flex;
    align-items: center;
    padding: 10px 4px;
    color: var(--gedaempft);
  }
}

@media (max-width: 520px) {
  .blaetterung__liste { order: 3; width: 100%; justify-content: center; }
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;

  & .feld__marke {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
  }

  & .feld__eingabe {
    padding: 12px 14px;
    border: 1px solid var(--linie-2);
    border-radius: var(--radius-klein);
    background: var(--flaeche-2);
    color: var(--text);
    font: inherit;
    font-size: 15px;

    &:focus-visible { border-color: var(--akzent); }
  }
}

.meldung {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-klein);
  font-size: 14px;
}

.meldung--fehler {
  border: 1px solid color-mix(in oklab, #c2385a 40%, transparent);
  background: color-mix(in oklab, #c2385a 10%, transparent);
  color: color-mix(in oklab, #c2385a 70%, var(--text));
}

/* ── 11  Rücksichten ────────────────────────────────────────────── */

/* Auf Touch-Geräten hat alles Bedienbare mindestens 44 px Höhe. */
@media (pointer: coarse) {
  .hauptnavigation__verweis,
  .knopf,
  .themaschalter,
  .navischalter,
  .blaetterung__schritt,
  .blaetterung__zahl,
  .schlagwort,
  .suchvorschlaege a,
  .feld__eingabe {
    min-height: 44px;
  }

  .knopf, .themaschalter, .navischalter, .schlagwort {
    display: inline-flex;
    align-items: center;
  }

  .hauptnavigation__verweis { display: flex; align-items: center; }
  .suche { padding-block: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Druck: nur der Beitrag, ohne Navigation, Leiste und Fuss. */
@media print {
  .servicezeile,
  .kopf,
  .seitenleiste,
  .fuss,
  .lesefortschritt,
  .sprunglink,
  .schlagworte,
  .blaetterung,
  .brotkrumen { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .gitter--mit-leiste { display: block; }
  .rand { max-width: none; padding: 0; }
  .bereich { padding: 0; }

  .artikel__titel { font-size: 22pt; }

  .artikeltext {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .artikelbild .bild { box-shadow: none; }

  .autorzeile,
  .quellen {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .quellen__liste a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  a { color: #000; }
}

/* ── Tagestrenner im Meldungsstrom ──────────────────────────────────
   Gibt der chronologischen Reihe einen Takt, ohne ihre Ordnung zu
   verändern. Bewusst leise: eine Linie, ein kleines Datum. */
.tagestrenner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);

  &:first-child { margin-top: 0; }

  & span { flex: 0 0 auto; }

  &::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--linie);
  }
}

/* ── Hervorhebungen aus dem Altbestand ──────────────────────────────
   481 Beiträge trugen Auszeichnung aus einem System vor WoltLab noch
   als rohen BBCode im Text. Umgesetzt wird die Absicht, nicht die
   willkürliche Farbe: Hinweise treten hervor, Nebenbemerkungen zurück. */
.artikeltext .hervorhebung {
  font-weight: 600;
  color: var(--akzent);
}

.artikeltext .nebensache {
  color: var(--gedaempft);
}

/* ── Hinweis auf eine Zweitfassung ──────────────────────────────────
   982 Meldungen stehen doppelt im Archiv — eine Altlast aus der
   Übernahme. Beide bleiben erreichbar; diese Zeile führt zur gültigen. */
.zweitfassung {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--linie-2);
  background: var(--flaeche-2);
  font-size: 13.5px;
  color: var(--gedaempft);
}

/* ══════════════════════════════════════════════════════════════════
   Kopfbereich auf schmalen Bildschirmen

   Ziel: eine einzige Zeile, danach kommt Inhalt. Vorher belegten
   Servicezeile, Logo mit Menüknopf und eine dritte Reihe aus Suchfeld
   und Anmeldeknopf zusammen über 250 Pixel Höhe, bevor die erste
   Meldung zu sehen war.

   EIN Umbruchpunkt, nicht zwei. Bis zum 20.08.2026 klappte die
   Navigation bei 1100 Pixeln ein, die Servicezeile blieb aber bis 860
   stehen. Dazwischen sah man ein Hamburger-Menü UND eine Servicezeile —
   zwei Bedienwege nebeneinander, und der Kopf wirkte genau deshalb
   unruhig. Jetzt gilt: über 1100 der volle Kopf, darunter der kompakte,
   nichts dazwischen.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {

  /* Datum, Anspruch und Servicelinks brauchen hier keinen Platz —
     sie stehen im aufgeklappten Menü und im Fussbereich. */
  .servicezeile { display: none; }

  .kopf__inhalt {
    gap: 10px;
    padding-block: 10px;
    flex-wrap: nowrap;
  }

  /* Reihenfolge: Menü — Logo — Dehnfuge — Suche — Konto */
  .navischalter    { order: 1; }
  .kopf__logo      { order: 2; }
  .hauptnavigation { order: 5; }
  .kopf__werkzeuge { order: 4; margin-left: auto; gap: 2px; }

  .kopf__logo { min-width: 0; }
  .kopf__logo img { height: 30px; max-width: 100%; }

  /* Der Menüknopf wird zum Symbol. Der Text bleibt für Vorlesegeräte. */
  .navischalter {
    flex: 0 0 44px;
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text);
  }

  .navischalter__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Suche und Konto ebenfalls als Symbol — 44 Pixel, damit der Daumen trifft. */
  .kopfschalter {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;

    &:hover { color: var(--akzent); }
  }

  /* Das Suchfeld liegt eingeklappt und öffnet sich als eigene Zeile. */
  .kopf__werkzeuge .suche {
    order: 6;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    display: none;
    width: auto;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .5);
  }

  .kopf--suche-offen .suche { display: flex; }

  /* Der gefüllte Anmeldeknopf entfällt — dafür gibt es das Kontosymbol. */
  .kopf__werkzeuge > .knopf { display: none; }

  .hauptnavigation__service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 10px;
    padding: 12px 14px 4px;
    border-top: 1px solid var(--linie);
    font-size: 14px;
    color: var(--gedaempft);
  }
}

/* Auf breiten Bildschirmen bleibt alles wie bisher. */
@media (min-width: 1101px) {
  .kopfschalter,
  .hauptnavigation__service { display: none; }
}

/* ── Feste Seiten (Impressum, Datenschutz, Kontakt) ─────────────────── */
.festeseite { padding-block: 32px 56px; }

.festeseite__text {
  max-width: 74ch;

  & h2 {
    margin: 32px 0 10px;
    font-family: var(--schrift, Poppins), system-ui, sans-serif;
    font-size: clamp(19px, 2.2vw, 22px);
  }

  & h3, & h4 { margin: 24px 0 8px; font-size: 17px; }
  & ul, & ol { margin: 0 0 18px; padding-left: 22px; }
  & li { margin-bottom: 6px; }
}

.festeseite__stand {
  margin-top: 32px;
  font-size: 13px;
  color: var(--gedaempft);
}


/* Bildnachweis unter dem Bild. Stand bisher als style-Attribut im Markup —
   die Inhaltsrichtlinie erlaubt das nicht mehr, und hier gehört es ohnehin
   hin. */
.bildnachweis {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--gedaempft);
}

/* ══════════════════════════════════════════════════════════════════
   Werbeflächen

   Die eine Regel, die alles andere bestimmt: eine Anzeige verdeckt
   niemals Inhalt. Deshalb gibt es hier kein position: fixed, kein
   z-index über dem Text, keinen Balken, der sich über die Seite legt.
   Jede Fläche steht im Textfluss und schiebt, statt zu überlagern.

   Der Platz wird vorher freigehalten — die Höhe steht als Variable am
   Behälter, gesetzt vom Server aus den Maßen der Fläche. Lädt eine
   Anzeige nach, springt nichts. Bleibt sie leer, fällt der Behälter
   auf null zusammen (:empty), und die Seite sieht aus wie ohne.
   ══════════════════════════════════════════════════════════════════ */

.werbung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  margin-block: 28px;
  padding-block: 4px;

  /* Nie über dem Text. Explizit, damit es auch beim Weiterbauen gilt. */
  position: static;
  z-index: auto;
  overflow: hidden;

  &:has(.werbung__flaeche:empty) {
    /* Nichts geladen — dann auch kein Rand, kein Wort „Anzeige". */
    margin-block: 0;
    padding-block: 0;
  }

  &:has(.werbung__flaeche:empty) .werbung__marke { display: none; }
}

/* Die Kennzeichnung ist Pflicht (Trennungsgebot) und steht deshalb
   immer über der Fläche — klein, aber lesbar, nicht versteckt. */
.werbung__marke {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.werbung__flaeche {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;

  /* Reservierter Platz. Die Werte kommen vom Server. */
  min-height: var(--werbung-schmal, 0px);

  /* Was der Vermarkter liefert, bleibt im Behälter. */
  overflow: hidden;

  & > * { max-width: 100%; }

  &:empty { min-height: 0; }
}

@media (min-width: 600px) {
  .werbung__flaeche { min-height: var(--werbung-mittel, 0px); }
  .werbung__flaeche:empty { min-height: 0; }
}

@media (min-width: 1000px) {
  .werbung__flaeche { min-height: var(--werbung-breit, 0px); }
  .werbung__flaeche:empty { min-height: 0; }
}

/* Auf schmalen Bildschirmen entfallen die Flächen der Seitenleiste ganz —
   dort stünden sie sonst als Block zwischen Text und Fussbereich. */
@media (max-width: 999px) {
  .werbung--leiste,
  .werbung--leiste-hoch { display: none; }
}

/* Die hohe Fläche in der Leiste läuft mit, aber nur innerhalb ihrer
   Spalte. Sie kann den Text schon deshalb nicht überdecken, weil sie
   in einer eigenen Spalte steht — und sie bleibt niedriger als das
   Sichtfeld, damit ihr Ende erreichbar ist. */
.werbung--leiste-hoch {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
}

/* Im Beitrag: etwas mehr Luft, damit die Anzeige nicht wie ein Absatz
   des Textes wirkt. */
.artikeltext + .werbung,
.werbung--im-text {
  margin-block: 36px;
  padding-block: 8px;
  border-block: 1px solid var(--linie);
}

.werbung--im-text:has(.werbung__flaeche:empty) { border-block: 0; }

/* Der Aufmacher bleibt oben. Die Kopffläche steht darunter — nicht
   davor und nicht darüber. */
.werbung--kopf { margin-top: 12px; }

/* ── Die Leiste zur Einwilligung ──────────────────────────────────────
   Sie sitzt am unteren Rand, deckt aber nichts zu: das Skript gibt der
   Seite genau so viel Fussraum, wie die Leiste hoch ist. Wer bis ans
   Ende scrollt, kommt an jede Zeile. */
.einwilligung {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;

  background: var(--flaeche);
  border-top: 1px solid var(--linie-2);
  box-shadow: 0 -8px 24px -18px rgba(20, 20, 30, .5);

  &[hidden] { display: none; }
}

.einwilligung__inhalt {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;

  @media (max-width: 720px) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

.einwilligung__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);

  & a { color: var(--akzent); }
}

.einwilligung__knoepfe {
  display: flex;
  gap: 10px;
  flex-shrink: 0;

  @media (max-width: 720px) {
    & .knopf { flex: 1; }
  }
}

/* Testbetrieb: die Fläche zeigt sich selbst, damit sich prüfen lässt, wie
   die Seite mit Werbung aussieht — bevor ein Vermarkter eingerichtet ist. */
.werbung__probe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: repeating-linear-gradient(
    135deg, var(--flaeche-2), var(--flaeche-2) 10px,
    var(--bg) 10px, var(--bg) 20px
  );
  border: 1px dashed var(--linie-2);
  border-radius: var(--radius-klein);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gedaempft);
}

/* ══════════════════════════════════════════════════════════════════
   Teilen

   Zurückhaltend gesetzt: das sind Werkzeuge, kein Aufruf. Sie stehen
   nach dem Text, wo die Entscheidung zum Weitergeben fällt — nicht
   über der Überschrift, wo sie nur im Weg wären.

   Keine Markenfarben der Netzwerke. Ein Regenbogen aus Grün, Blau und
   Schwarz risse an dieser Stelle mehr Aufmerksamkeit an sich als der
   Beitrag darüber.
   ══════════════════════════════════════════════════════════════════ */

.teilen {
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
}

.teilen__titel {
  margin: 0 0 14px;
}

.teilen__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teilen__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-2);

  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;

  transition: border-color .12s ease, color .12s ease;

  & svg { flex: 0 0 auto; }

  &:hover,
  &:focus-visible {
    border-color: var(--akzent);
    color: var(--akzent);
  }

  &:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
  }
}

/* Der Systemdialog ist auf dem Telefon der beste Weg — deshalb steht er
   vorn und als einziger gefüllt. */
.teilen__knopf--gemeinsam {
  background: var(--akzent-flaeche);
  border-color: transparent;
  color: #fff;

  &:hover,
  &:focus-visible {
    border-color: transparent;
    color: #fff;
    filter: brightness(1.08);
  }
}

/* Rückmeldung nach dem Kopieren. Kurz und ohne Bewegung. */
.teilen__knopf[data-zustand="gut"] {
  border-color: var(--akzent);
  color: var(--akzent);
}

.teilen__knopf[data-zustand="fehler"] {
  border-color: var(--linie-2);
  color: var(--gedaempft);
}

@media (max-width: 480px) {
  /* Auf schmalen Geräten tragen die Symbole allein — der Systemdialog
     behält seine Beschriftung, er ist der Hauptweg. */
  .teilen__knopf:not(.teilen__knopf--gemeinsam) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .teilen__knopf:not(.teilen__knopf--gemeinsam) {
    padding: 10px;
    width: 42px;
    height: 42px;
    justify-content: center;
  }
}

/* Ersatzweg, wenn das Kopieren nicht klappt. */
.teilen__ersatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;

  &[hidden] { display: none; }
}

.teilen__adresse {
  flex: 1 1 20rem;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--linie-2);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.teilen__ersatz-text {
  font-size: 13px;
  color: var(--gedaempft);
}