@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);
  /* Die Zeile traegt nur noch Logo und Werkzeuge; die Ressorts stehen
     darunter. Etwas weniger Luft, damit der Kopf durch die zweite
     Zeile insgesamt nicht auftraegt. */
  padding-block: 16px;
}

.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; }
}

/* ── Ressortleiste ───────────────────────────────────────────────────
   Die Ressorts stehen in einer eigenen Leiste unter dem Logo, nicht
   mehr in derselben Zeile wie Logo, Suche und Anmeldeknopf.

   Warum: dort bekamen sie nur, was uebrig blieb. Bei der FahrradBlick
   waren das 568 von 950 benoetigten Pixeln — zwei Ressorts lagen
   ausserhalb. Aufgefallen ist es lange niemandem, denn `overflow-x:
   auto` mit ausgeblendetem Rollbalken schneidet lautlos ab: kein
   Pfeil, keine Kante, kein Hinweis. Die Unfallzeitung stand mit 594
   von 594 Pixeln genau auf der Kippe und verlor zwischen 1100 und
   1160 Pixeln Fensterbreite ebenfalls Eintraege.

   In der eigenen Leiste steht die ganze Breite zur Verfuegung. Und
   falls sie doch einmal nicht reicht — ein Ressort mehr, eine
   groessere Schrift —, bricht die Liste um, statt zu verbergen:
   zwei sichtbare Zeilen sind besser als ein unsichtbarer Eintrag. */
.kopf__leiste {
  border-top: 1px solid var(--linie);
}

.kopf__leiste-inhalt {
  display: flex;
  align-items: center;
}

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

.hauptnavigation__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding-block: 5px;
}

.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;
  /* Seit die Ressorts in einer eigenen Leiste stehen, traegt diese Zeile
     nur noch Logo und Werkzeuge — rund 630 Pixel blieben ungenutzt. Die
     206 Pixel von frueher waren ein Zugestaendnis an die Enge: ins Feld
     passten 150 Pixel Text, also ein einzelnes Wort. „Haftung bei
     Dooring-Unfaellen" lief schon beim Tippen aus dem Bild.

     Schwerer wog die Vorschlagsliste darunter: sie ist so breit wie das
     Feld, und ein echter Beitragstitel wurde darin 96 Pixel hoch —
     vier Zeilen fuer einen Vorschlag. Sechs davon waren eine halbe
     Bildschirmhoehe zerfledderter Text.

     Jetzt waechst das Feld mit dem Fenster, aber nur bis 380 Pixel. Es
     wird damit breiter als das Logo (242) — das ist in Ordnung, weil es
     am rechten Rand neben dem Kontoknopf sitzt und dort als Werkzeug
     gelesen wird, nicht als Mitte der Seite. Die Deckelung sorgt dafuer,
     dass zwischen Logo und Feld immer eine Luecke bleibt: rund 530
     Pixel bei 1280, 460 bei sehr breiten Fenstern. Ohne sie waere der
     Kopf eine Suchmaschine mit Zeitungslogo. */
  width: clamp(240px, 24vw, 380px);
  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); }
  }
}

/* Der 1180er-Block hat das Suchfeld frueher auf 168 Pixel gestutzt, weil
   Logo, Ressorts, Suche und Anmeldeknopf sich eine Zeile teilten. Seit
   die Ressorts eine eigene Leiste haben, ist die Zeile halb leer — und
   `clamp` regelt die Breite ohnehin selbst. */

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

  /* Unter 1100 Pixeln uebernimmt der Menueknopf. Die Ressortleiste
     traegt dann keine eigene Linie mehr — sie liegt eingeklappt bei
     null Hoehe unter dem Kopf, und ein Strich unter nichts sieht nach
     Fehler aus. Sichtbar wird sie erst beim Aufklappen, und dann
     bringt die Navigation ihre Trennlinie selbst mit. */
  .kopf__leiste { border-top: 0; }
  .kopf__leiste-inhalt { display: block; }

  .hauptnavigation {
    display: none;
    border-top: 1px solid var(--linie);
    padding-block: 12px;
  }

  .hauptnavigation--offen { display: block; }

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

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

/* Auf dem Telefon bleibt der Kopf eine Zeile: Menue, Logo, Suche, Konto.

   Hier stand einmal `flex-basis: 100%` fuer die Werkzeugleiste, weil das
   Suchfeld damals ausgeklappt danebenstand und eine eigene Zeile
   brauchte. Seit die Leiste auf schmalen Bildschirmen nur noch zwei
   Symbole traegt und das Suchfeld sich darunter oeffnet, ist die eigene
   Zeile ueberfluessig — sie schob nur Logo und Symbole auseinander.

   Aufgefallen ist es erst, als der Kopf wieder umbrechen durfte: vorher
   verhinderte ein `flex-wrap: nowrap` weiter unten jeden Umbruch und
   verdeckte damit die Regel. */
@media (max-width: 620px) {
  .kopf__logo img { height: 32px; }

  .kopf__werkzeuge {
    order: 4;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .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 {
  /* Bezugspunkt fuer die Schnellleiste der Redaktion. */
  position: relative;
  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;
}

/* ── Schnellleiste der Redaktion ─────────────────────────────────────
   Nur für angemeldete Redakteure; der Leser bekommt dieses Markup gar
   nicht erst geliefert.

   Sie liegt in der Ecke über dem Bild und nicht unter dem Text. Zwei
   Gründe: unter dem Text machte sie jede Karte höher, und der Redakteur
   sähe die Seite dann anders aufgeteilt als der Leser — genau das soll
   die Ansicht ja nicht. Über dem Bild verschiebt sie nichts.

   Bis zum Zeigen bleibt sie halb durchsichtig. Ganz auszublenden wäre
   falsch: was man erst durch Herumfahren findet, findet man nicht. */
.schnellleiste {
  position: absolute;
  z-index: 3;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .45);
  opacity: .55;
  transition: opacity .12s ease;

  & .schnellleiste__form { display: contents; }
}

.artikelkarte:hover .schnellleiste,
.aufmacher__stelle:hover .schnellleiste,
.schnellleiste:hover,
.schnellleiste:focus-within {
  opacity: 1;
}

.schnellleiste__knopf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

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

  & svg { flex: 0 0 auto; }
}

.schnellleiste__knopf--warnung:hover { color: var(--warnung, #b4232a); }
.schnellleiste__knopf--gut:hover     { color: var(--akzent); }

/* Auf der Beitragsseite steht sie im Fluss: dort gibt es an dieser
   Stelle kein Bild, und schwebend läge sie auf der Schrift. Sie ist
   deshalb auch dauerhaft voll sichtbar — auf einer Seite, die man
   gerade liest, sucht man den Bearbeiten-Knopf gezielt. */
.schnellleiste--seite {
  position: static;
  margin-bottom: 14px;
  opacity: 1;
  backdrop-filter: none;
  background: var(--flaeche-2);
  box-shadow: none;
  /* Nicht über die ganze Spalte: eine Leiste aus zwei Knöpfen, die
     sich auf 74 Zeichen Breite zieht, sieht nach Fehler aus. */
  width: fit-content;
}

/* Der Stand steht nur dann da, wenn er vom Erwarteten abweicht — ein
   „veröffentlicht" an jedem Beitrag wäre Rauschen. */
.schnellleiste__stand {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--akzent-fuellung);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Auf schmalen Bildschirmen bleibt nur das Sinnbild: drei Wörter neben
   drei Wörtern passen dort nicht neben ein 300 Pixel breites Bild. */
@media (max-width: 620px) {
  .schnellleiste__knopf span { display: none; }
  .schnellleiste__knopf { padding: 6px; }
}

.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 {
    /* Bezugspunkt fuer die Schnellleiste, die in der Ecke darueber liegt. */
    position: relative;
    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); }
  }
}

/* ── „Angemeldet bleiben" ────────────────────────────────────────────
   Ein Kontrollkästchen, kein nachgebauter Schieberegler. Der Schalter
   des Betriebssystems ist überall gleich, jeder kennt ihn, und er
   funktioniert auch dann, wenn das Stylesheet nicht lädt. Gefärbt wird
   er über `accent-color` — eine Zeile statt eines Nachbaus. */
.feld--schalter {
  gap: 4px;
}

.schalter {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;

  & input[type="checkbox"] {
    /* 16 Pixel und nicht kleiner: darunter wird das Kästchen auf dem
       Telefon zum Zielproblem. */
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--akzent);
    cursor: pointer;
  }
}

.schalter__text {
  font-size: 14.5px;
  color: var(--text);
}

.feld__hinweis {
  /* Steht unter dem Schalter, nicht daneben — die Erklärung gehört an
     die Stelle, an der die Frage gestellt wird, und sie soll den
     Schalter nicht schmaler machen. */
  padding-left: 25px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gedaempft);
}

.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; }

  /* Umbruch erlauben, nicht verbieten.

     Hier stand `flex-wrap: nowrap`, und weiter oben im Stylesheet steht
     fuer dieselbe Breite `flex-wrap: wrap`. Der spaetere Block gewann —
     mit der Folge, dass die Navigation nicht in eine eigene Zeile
     umbrechen konnte. Sie blieb in derselben Flex-Zeile wie Logo und
     Werkzeuge, wurde dort auf null Pixel Breite gequetscht und 497
     Pixel hoch. Das Menue oeffnete sich also, war aber leer, und die
     Seite wurde breiter als der Bildschirm.

     Die Navigation liegt inzwischen ohnehin ausserhalb dieser Zeile —
     sie hat seit der Ressortleiste ihren eigenen Kasten unter dem
     Kopf. Der Umbruch bleibt trotzdem erlaubt: Menue, Logo und
     Werkzeuge brauchen zusammen keine 330 Pixel, und wenn ein Logo
     einmal breiter ausfaellt, soll die Zeile nachgeben statt zu
     ueberlaufen. */
  .kopf__inhalt {
    gap: 10px;
    padding-block: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Reihenfolge: Menü — Logo — Dehnfuge — Suche — Konto */
  .navischalter    { order: 1; }
  .kopf__logo      { order: 2; }
  .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; }
}

/* ── Vorschau hinter einem privaten Link ─────────────────────────────
   Das Band steht ueber allem und ist die erste Zeile, die der Empfaenger
   liest. Es muss zwei Dinge sofort sagen: dass das hier nicht oeffentlich
   ist, und wie lange der Link noch gilt.

   Gestreift und nicht rot: eine Warnfarbe waere falsch — hier ist nichts
   kaputt, es ist nur nicht oeffentlich. Die Streifen sind das
   Baustellen-Zeichen, das jeder kennt, ohne dass es nach Fehler aussieht. */
.vorschauband {
  background: repeating-linear-gradient(
    135deg,
    var(--flaeche-2) 0 14px,
    var(--flaeche) 14px 28px
  );
  border-bottom: 1px solid var(--linie-2);
}

.vorschauband__inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding-block: 11px;
}

.vorschauband__text {
  font-size: 14px;
  color: var(--text);
}

.vorschauband__frist {
  font-size: 13px;
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}

/* Der Beitrag darunter steht schmaler als sonst: gegengelesen wird
   Zeile fuer Zeile, und dafuer zaehlt die Zeilenlaenge mehr als die
   Ausnutzung der Flaeche. */
.beitrag--vorschau {
  max-width: 74ch;
  margin-inline: auto;
}

.vorschauform {
  max-width: 74ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vorschauform__trenner {
  max-width: 74ch;
  margin: 36px auto 24px;
  border: 0;
  border-top: 1px solid var(--linie);
}

.feld__eingabe--code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}

.vorschau__fuss {
  max-width: 74ch;
  margin: 40px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}
/* ── 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;

  /* Nichts geliefert — dann auch kein Rand, kein Wort „Anzeige".
   *
   * Die Bedingung hiess einmal `.werbung__flaeche:empty`, und das war
   * richtig, solange keine Werbung lief: ohne Vermarkter blieb der
   * Behälter kinderlos und fiel zusammen. Seit der Freischaltung legt
   * das Skript in jede Fläche ein <ins class="adsbygoogle"> — leer ist
   * sie damit nie mehr, und die Regel griff nie wieder. Auf der
   * Startseite standen drei Löcher von je 307 Pixeln.
   *
   * Gefragt wird deshalb nach dem, worauf es ankommt: Google setzt am
   * <ins> ein `data-ad-status`, und nur `filled` heisst, dass wirklich
   * etwas darin steht. Ohne Einwilligung fehlt das Merkmal ganz, bei
   * fehlender Nachfrage steht dort `unfilled` — beide Male gehört der
   * Platz der Seite, nicht dem Vermarkter.
   *
   * `.werbung__probe` ist der Testmodus. Er zeigt kein Geschäft, aber
   * er soll sichtbar bleiben.
   *
   * Kennt ein Browser `:has()` nicht, fällt diese Regel weg — dann
   * steht die Kennzeichnung da und der Platz bleibt reserviert. Das ist
   * die richtige Richtung zum Danebenliegen: Das Trennungsgebot
   * verlangt die Kennzeichnung, eine überflüssige Lücke verlangt
   * niemand zurück. */
  &:not(:has(ins[data-ad-status="filled"], .werbung__probe)) {
    margin-block: 0;
    padding-block: 0;
  }

  &:not(:has(ins[data-ad-status="filled"], .werbung__probe)) .werbung__marke {
    display: none;
  }
}

/* Hat der Vermarkter nichts, nimmt er auch keinen Platz.
 *
 * Google setzt am <ins> ein `data-ad-status`: `filled`, wenn eine Anzeige
 * darin steht, `unfilled`, wenn er nichts zu liefern hatte. Im zweiten
 * Fall bleibt sonst ein leerer Kasten in der Höhe stehen, die er sich
 * vorher genommen hat — auf der Startseite waren das dreimal 280 Pixel.
 *
 * Das `!important` ist nötig, weil die Höhe als Stilattribut direkt am
 * Element steht; aus der Datei heraus ist sie sonst nicht zu erreichen.
 *
 * Bewusst nicht gedeckt: der Zustand vor der Einwilligung. Dort fehlt
 * `data-ad-status` ganz, und wer ihn wie `unfilled` behandelte, nähme
 * dem Vermarkter die Fläche weg, bevor er sie füllen darf. Diese Lücke
 * steht ohnehin hinter dem Einwilligungsdialog. */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* 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%; }

  /* Kein gelieferter Inhalt, kein reservierter Platz — dieselbe
     Bedingung wie oben. `:empty` traf hier seit der Freischaltung nie
     mehr zu, weil das <ins> immer im Behälter liegt. */
  &:not(:has(ins[data-ad-status="filled"], .werbung__probe)) { min-height: 0; }
}

@media (min-width: 600px) {
  .werbung__flaeche { min-height: var(--werbung-mittel, 0px); }
  .werbung__flaeche:not(:has(ins[data-ad-status="filled"], .werbung__probe)) { min-height: 0; }
}

@media (min-width: 1000px) {
  .werbung__flaeche { min-height: var(--werbung-breit, 0px); }
  .werbung__flaeche:not(:has(ins[data-ad-status="filled"], .werbung__probe)) { 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);
}

.artikeltext + .werbung:not(:has(ins[data-ad-status="filled"], .werbung__probe)),
.werbung--im-text:not(:has(ins[data-ad-status="filled"], .werbung__probe)) {
  /* Ohne Anzeige auch keine Trennlinien mitten im Text. */
  border-block: 0;
  margin-block: 0;
  padding-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);
}