/* Grundgerüst jeder Seite: Hülle, Kopf, Navbar, Menü, Servicemenü, Footer. */
@layer components {
  :root {
    /* Platz, den die feste Servicebar unten braucht; die Leiste darf nie
       dauerhaft Inhalt verdecken. Ab Tablet entfällt sie, dort steht
       "Auf einen Blick" als Spalte am Rand (siehe Servicemenü). */
    --bar-clearance: calc(var(--service-bar-size) + var(--service-bar-inset));
  }

  /* ---- Hülle: mindestens die ganze Fensterhöhe, der Footer liegt darunter ---- */
  .site-shell {
    display: flex;
    flex-direction: column;
    min-block-size: var(--viewport-block-dynamic);
    padding-block-end: var(--bar-clearance);
  }

  .site-main {
    flex: 1 0 auto;
  }

  .site-main__inner {
    padding-block: var(--space-xl);
  }

  /* ---- Skip-Link ---- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    z-index: var(--z-skip);
    padding: var(--space-s) var(--space-m);
    color: var(--color-text-on-brand);
    background: var(--color-surface-brand);
    border-radius: var(--radius-box);
    transform: translateY(-300%);
  }

  .skip-link:focus {
    transform: none;
    outline-color: var(--color-mint-on-dark);
    outline-offset: calc(var(--focus-ring-width) * -1);
  }

  /* ---- Kopf ---- */
  .site-header {
    position: relative;
    padding-block: var(--space-xl);
  }

  .site-header::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--rainbow-stripe);
    background: var(--stripe-books);
  }

  .site-header__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
  }

  .site-header__claim {
    font-size: var(--text-s);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-accent-text-on-brand);
  }

  /* ---- Navbar: klebt oben, sobald der Kopf vorbei ist ----
     Ein Band über die ganze Breite. Farbe und Schrift kommen aus zwei
     Variablen: --bar-bg und --bar-fg. Vorgabe Dunkelblau mit weißer Schrift;
     Kapitel überschreiben beide (reines CSS mit :has(), ohne Skript). Die
     Tiefe (Verlauf, Schatten) liest nur diese Variablen und folgt der Farbe
     deshalb von selbst. */
  .site-navbar {
    --bar-bg: var(--color-school-navy);
    --bar-fg: var(--color-white);
    /* Verlauf: oben heller (Weißanteil --bar-lift), unten ggf. dunkler
       (Dunkelblauanteil --bar-sink). Bei weißer Schrift auf Rot wäre ein
       hellerer Rand zu schwach; dort bleibt die Oberkante die Grundfarbe und
       nur der Boden wird dunkler (siehe die Kapitelregel unten). */
    --bar-lift: var(--bar-highlight);
    --bar-sink: 0%;
    --bar-bg-top: color-mix(in srgb, var(--color-white) var(--bar-lift), var(--bar-bg));
    --bar-bg-bottom: color-mix(in srgb, var(--color-school-navy) var(--bar-sink), var(--bar-bg));
    --color-focus: var(--bar-fg);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-navbar);
    color: var(--bar-fg);
  }

  /* (d) Die aktuelle Seite gehört zu diesem Kapitel. Mit :where() ohne
     Spezifität, damit Öffnen, Hover und Fokus sie immer überstimmen. */
  .site-navbar:where(:has(.chapter-selber-machen > [data-current], .chapter-selber-machen > [aria-current])) {
    --bar-bg: var(--color-chapter-selber-machen);
    --bar-fg: var(--color-on-chapter-selber-machen);
  }

  .site-navbar:where(:has(.chapter-frei-lernen > [data-current], .chapter-frei-lernen > [aria-current])) {
    --bar-bg: var(--color-chapter-frei-lernen);
    --bar-fg: var(--color-on-chapter-frei-lernen);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  .site-navbar:where(:has(.chapter-in-bewegung > [data-current], .chapter-in-bewegung > [aria-current])) {
    --bar-bg: var(--color-chapter-in-bewegung);
    --bar-fg: var(--color-on-chapter-in-bewegung);
  }

  .site-navbar:where(:has(.chapter-digital-lernen > [data-current], .chapter-digital-lernen > [aria-current])) {
    --bar-bg: var(--color-chapter-digital-lernen);
    --bar-fg: var(--color-on-chapter-digital-lernen);
  }

  .site-navbar:where(:has(.chapter-zusammen-wachsen > [data-current], .chapter-zusammen-wachsen > [aria-current])) {
    --bar-bg: var(--color-chapter-zusammen-wachsen);
    --bar-fg: var(--color-on-chapter-zusammen-wachsen);
  }

  .site-navbar:where(:has(.chapter-gemeinsam-schule > [data-current], .chapter-gemeinsam-schule > [aria-current])) {
    --bar-bg: var(--color-chapter-gemeinsam-schule);
    --bar-fg: var(--color-on-chapter-gemeinsam-schule);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  /* (c) Das Kapitel ist aufgeklappt. */
  .site-navbar:has(.chapter-selber-machen > details[open]) {
    --bar-bg: var(--color-chapter-selber-machen);
    --bar-fg: var(--color-on-chapter-selber-machen);
  }

  .site-navbar:has(.chapter-frei-lernen > details[open]) {
    --bar-bg: var(--color-chapter-frei-lernen);
    --bar-fg: var(--color-on-chapter-frei-lernen);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  .site-navbar:has(.chapter-in-bewegung > details[open]) {
    --bar-bg: var(--color-chapter-in-bewegung);
    --bar-fg: var(--color-on-chapter-in-bewegung);
  }

  .site-navbar:has(.chapter-digital-lernen > details[open]) {
    --bar-bg: var(--color-chapter-digital-lernen);
    --bar-fg: var(--color-on-chapter-digital-lernen);
  }

  .site-navbar:has(.chapter-zusammen-wachsen > details[open]) {
    --bar-bg: var(--color-chapter-zusammen-wachsen);
    --bar-fg: var(--color-on-chapter-zusammen-wachsen);
  }

  .site-navbar:has(.chapter-gemeinsam-schule > details[open]) {
    --bar-bg: var(--color-chapter-gemeinsam-schule);
    --bar-fg: var(--color-on-chapter-gemeinsam-schule);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  /* (a) Hover und (b) Tastaturfokus im Kapitel: zuletzt, gewinnen also vor
     Öffnen und aktueller Seite. */
  .site-navbar:has(.chapter-selber-machen:hover, .chapter-selber-machen :focus-visible) {
    --bar-bg: var(--color-chapter-selber-machen);
    --bar-fg: var(--color-on-chapter-selber-machen);
  }

  .site-navbar:has(.chapter-frei-lernen:hover, .chapter-frei-lernen :focus-visible) {
    --bar-bg: var(--color-chapter-frei-lernen);
    --bar-fg: var(--color-on-chapter-frei-lernen);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  .site-navbar:has(.chapter-in-bewegung:hover, .chapter-in-bewegung :focus-visible) {
    --bar-bg: var(--color-chapter-in-bewegung);
    --bar-fg: var(--color-on-chapter-in-bewegung);
  }

  .site-navbar:has(.chapter-digital-lernen:hover, .chapter-digital-lernen :focus-visible) {
    --bar-bg: var(--color-chapter-digital-lernen);
    --bar-fg: var(--color-on-chapter-digital-lernen);
  }

  .site-navbar:has(.chapter-zusammen-wachsen:hover, .chapter-zusammen-wachsen :focus-visible) {
    --bar-bg: var(--color-chapter-zusammen-wachsen);
    --bar-fg: var(--color-on-chapter-zusammen-wachsen);
  }

  .site-navbar:has(.chapter-gemeinsam-schule:hover, .chapter-gemeinsam-schule :focus-visible) {
    --bar-bg: var(--color-chapter-gemeinsam-schule);
    --bar-fg: var(--color-on-chapter-gemeinsam-schule);
    --bar-lift: 0%;
    --bar-sink: var(--bar-shade);
  }

  /* Raster 1fr | Kreis | 1fr: der Kreis steht in jeder Breite genau mittig. */
  .site-navbar__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-m);
    min-block-size: var(--navbar-height);
    padding-inline: var(--gutter);
  }

  /* ---- Die Form: Band und Wiege in einem Stück ----
     Ein dekoratives Element hinter dem Band (aria-hidden). Sein ::before
     trägt den Verlauf und ist per Maske zur Form geschnitten: das gerade
     Band über die ganze Breite und mittig die Wiege (navbar-wiege.svg), die
     oben leicht ansteigt und unten in einer breiten Mulde die Scheibe trägt.
     Beide Masken bilden eine Vereinigung; der Schatten folgt der Kontur. */
  .site-navbar__shape {
    position: absolute;
    inset-block-start: calc(-1 * var(--navbar-cradle-lift));
    inset-inline: 0;
    z-index: -1;
    block-size: var(--navbar-cradle-height);
    filter: var(--shadow-bar);
    pointer-events: none;
  }

  .site-navbar__shape::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--bar-bg-top), var(--bar-bg-bottom));
    mask-image: var(--mask-solid), url("../img/form/navbar-wiege.b3bdb1e95ac7.svg");
    mask-size: 100% var(--navbar-height), var(--navbar-cradle-width) var(--navbar-cradle-height);
    mask-position: 0 var(--navbar-cradle-lift), 50% 0;
    mask-repeat: no-repeat;
  }

  /* Vorschau: Solange kein Kapitel aktiv ist (keine aktuelle Seite, nichts
     geöffnet, kein Hover, kein Fokus im Menü), trägt das Band den
     Regenbogen in Kapitelfolge statt Dunkelblau. */
  .site-navbar:not(:has(.menu-list [data-current], .menu-list > li > [aria-current], .menu-list details[open], .menu-list > li:hover, .menu-list :focus-visible)) .site-navbar__shape::before {
    background: var(--bar-rainbow);
  }

  /* Der Bereich nach der Leiste beginnt erst unter der Mulde. */
  .site-navbar + * {
    padding-block-start: var(--navbar-cradle-overhang);
  }

  /* Die Papierscheibe mit dem Signet in der Wiege. Das Band bleibt so hoch
     wie --navbar-height (negativer Außenabstand unten). Die Scheibe ist der
     einzige erlaubte Rahmen um das Signet. */
  .site-signet {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: grid;
    place-items: center;
    inline-size: var(--signet-circle);
    block-size: var(--signet-circle);
    margin-block-start: calc(var(--signet-center) - var(--signet-circle) / 2);
    margin-block-end: calc(var(--navbar-height) - var(--signet-center) - var(--signet-circle) / 2);
    line-height: 0;
    border: var(--signet-ring) solid transparent;
    border-radius: 50%;
    /* Innen die Papierscheibe; der Rand ist durchsichtig und trägt nur ein
       Licht oben, das nach unten ausläuft. Keine Farbfläche. */
    background:
      linear-gradient(var(--signet-disc), var(--signet-disc)) padding-box,
      linear-gradient(to bottom, var(--signet-ring-glow), transparent var(--signet-ring-glow-end)) border-box;
    box-shadow: var(--shadow-ring), var(--shadow-disc);
  }

  /* Die Bücherelemente des Signets liegen auf einem Kreis, der die ganze
     Breite der SVG einnimmt (Mitte 250/250, Radius 250; unten ist die Datei
     bei 448 abgeschnitten). Ist das Bild so breit wie die Scheibe innen
     minus zweimal --signet-gap und steht es oben mit --signet-gap Abstand,
     haben die Bücher links, rechts und oben denselben Abstand zum Rand; das
     L ergibt sich von selbst. */
  .site-signet img {
    align-self: start;
    inline-size: calc(var(--signet-circle) - 2 * var(--signet-ring) - 2 * var(--signet-gap));
    block-size: auto;
    margin-block-start: var(--signet-gap);
    aspect-ratio: var(--signet-aspect);
    object-fit: contain;
  }

  /* Der Fokusring liegt im Ring der Form, in der Schriftfarbe des Bands. */
  .site-signet:focus-visible {
    outline: var(--focus-ring-width) solid var(--bar-fg);
    outline-offset: var(--focus-ring-offset);
  }

  /* ---- Sprachumschalter im Regenbogenstreifen ----
     Platzhalter. Er sitzt klein im Streifen selbst, ganz rechts im roten Feld;
     ab Tablet genau über der Randspalte „Auf einen Blick“. Keine eigene
     Fläche: Weiß auf dem Rot erreicht 4,6 : 1. Die Ziele sind so hoch wie der Streifen
     (mindestens 1,5rem, WCAG 2.5.8). */
  .site-header__top {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 1;
    block-size: var(--rainbow-stripe);
    /* Klein genug, dass der Umschalter auch bei 320 px ganz im roten Feld
       (letztes Sechstel) liegt. */
    padding-inline-end: var(--space-xs);
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  @media (min-width: 48rem) {
    .site-header__top {
      inline-size: var(--service-edge-size);
      padding-inline-end: 0;
    }
  }

  .language-switch {
    --color-focus: var(--color-on-chapter-gemeinsam-schule);
    display: flex;
  }

  .language-switch ul {
    display: flex;
    align-items: stretch;
    list-style: none;
  }

  .language-switch li {
    display: flex;
  }

  .language-switch li + li::before {
    content: "|";
    align-self: center;
    color: var(--color-on-chapter-gemeinsam-schule);
    font-size: var(--text-xs);
  }

  .language-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--language-target-min);
    padding-inline: var(--language-padding);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    color: var(--color-on-chapter-gemeinsam-schule);
    text-decoration: none;
  }

  /* Aktuelle Sprache: fett und unterstrichen, nicht nur Farbe. */
  .language-switch a[aria-current="true"] {
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-thickness: var(--underline-thickness-em);
    text-underline-offset: var(--underline-offset-s);
  }

  /* ---- Menü ---- */
  .site-menu {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* Schmal: ein Symbolknopf (drei Linien, nur Zierde) in der Schriftfarbe
     des Bands; der Name "Menü" steht unsichtbar im Knopf. */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    padding: 0;
    color: var(--bar-fg);
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .menu-toggle__icon {
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
  }

  .menu-close,
  .menu-fallback {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-m);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    background: transparent;
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-box);
    cursor: pointer;
    text-decoration: none;
  }

  .menu-fallback {
    display: none;
  }

  /* Schmal: das Panel ist ein Popover über der ganzen Fensterfläche. Es
     schließt per Knopf, Escape oder Klick daneben; der Fokus kehrt zum
     Menüknopf zurück. Alles macht der Browser. */
  .menu-panel {
    inset: 0;
    inline-size: 100%;
    block-size: var(--viewport-block-dynamic);
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: var(--space-m) var(--gutter);
    overflow-y: auto;
    color: var(--color-text);
    /* Papierfarbener Grund, damit die weißen Zettel sich abheben. */
    background: var(--color-surface);
    border: 0;
    --color-focus: var(--color-school-navy);
  }

  /* Ohne Popover-Unterstützung führt „Alle Seiten“ zum Seitenbaum im Footer. */
  @supports not selector(:popover-open) {
    .menu-toggle {
      display: none;
    }

    .menu-fallback {
      display: inline-flex;
      color: var(--bar-fg);
      border-color: var(--bar-fg);
    }

    .menu-panel {
      display: none;
    }
  }

  .menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .menu-list > li {
    max-inline-size: none;
  }

  .menu-chapter > summary,
  .menu-link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-xxs);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    /* Der Schatten sitzt hier, nicht am Zettel: Auf dem Zettel selbst würde
       der Zuschnitt (clip-path) ihn wegschneiden. So folgt er der Kante. */
    filter: var(--shadow-paper);
  }

  /* Papierschnipsel: weiß, von Hand ausgeschnitten, leicht schräg. Zuschnitt
     und Schräglage wechseln (siehe unten), die Schrift bleibt Dunkelblau,
     auch wenn sich das Band umfärbt. */
  .menu-paper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--paper-pad-block) var(--paper-pad-inline);
    color: var(--color-text);
    background: var(--color-paper-scrap);
    clip-path: var(--paper-cut, var(--paper-cut-1));
    rotate: var(--paper-tilt, var(--paper-tilt-1));
  }

  /* Jedes Kapitel hat seinen eigenen Zettel: Zuschnitt und Schräglage fest
     je Kapitel, damit kein Zettel einem anderen gleicht und jeder auf allen
     Seiten derselbe bleibt. */
  .chapter-selber-machen { --paper-cut: var(--paper-cut-1); --paper-tilt: var(--paper-tilt-1); }
  .chapter-frei-lernen { --paper-cut: var(--paper-cut-2); --paper-tilt: var(--paper-tilt-2); }
  .chapter-in-bewegung { --paper-cut: var(--paper-cut-3); --paper-tilt: var(--paper-tilt-3); }
  .chapter-digital-lernen { --paper-cut: var(--paper-cut-4); --paper-tilt: var(--paper-tilt-4); }
  .chapter-zusammen-wachsen { --paper-cut: var(--paper-cut-5); --paper-tilt: var(--paper-tilt-5); }
  .chapter-gemeinsam-schule { --paper-cut: var(--paper-cut-6); --paper-tilt: var(--paper-tilt-6); }

  .menu-chapter > summary > .menu-paper::before,
  .menu-chapter > summary > .menu-paper::after {
    content: "";
    flex: none;
    background: var(--color-chapter);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  .menu-chapter > summary > .menu-paper::before {
    block-size: var(--menu-book-size);
    aspect-ratio: var(--menu-book-aspect);
    mask-image: url("../img/form/buch.4a3d43121408.svg");
  }

  .menu-chapter > summary > .menu-paper::after {
    inline-size: var(--menu-triangle-size);
    aspect-ratio: var(--menu-triangle-aspect);
    background: currentcolor;
    mask-image: url("../img/form/dreieck.6760d937cb36.svg");
  }

  /* Offen: Das Dreieck zeigt nach oben. */
  .menu-chapter[open] > summary > .menu-paper::after {
    transform: rotate(180deg);
  }

  .menu-chapter[data-current] > summary > .menu-paper,
  .menu-link[aria-current="page"] > .menu-paper {
    text-decoration: underline;
    text-decoration-thickness: var(--border-thick);
    text-underline-offset: var(--underline-offset-xl);
  }

  .menu-chapter__panel {
    list-style: none;
    padding: var(--space-s) var(--space-s) var(--space-s) var(--space-l);
    border-inline-start: var(--border-thick) solid var(--color-chapter);
  }

  .menu-chapter__panel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-s);
  }

  .menu-chapter__panel a[aria-current="page"] {
    font-weight: var(--weight-bold);
  }

  /* Ab dieser Breite steht das Menü als Leiste da: drei Kapitel links, drei
     rechts vom Signetkreis. Ein Haltepunkt, weil kein Primitiv entscheidet,
     ob drei Namen, der Kreis und drei Namen in eine Zeile passen; Media
     Queries können keine Custom Properties lesen, der Wert steht deshalb
     hier (gemessen, siehe docs/architecture.md). */
  @media (min-width: 90rem) {
    /* Menü und Panel lösen sich auf: ihre beiden Listen sind Rasterzellen
       der Leiste, links und rechts vom Kreis. */
    .site-menu,
    .menu-panel {
      display: contents;
    }

    .menu-toggle,
    .menu-close,
    .menu-fallback {
      display: none;
    }

    /* Die Leiste nutzt die Breite bis nahe an den Rand: sonst passen die
       sechs Namen erst bei sehr breiten Fenstern. */
    .site-navbar__bar {
      column-gap: var(--space-l);
      padding-inline: var(--space-s);
    }

    .menu-list {
      grid-row: 1;
      flex-direction: row;
      align-items: stretch;
      gap: var(--space-xxs);
      align-self: stretch;
    }

    /* Beide Gruppen rücken an den Kreis, mit gleichem Abstand zu ihm. */
    .menu-panel > .menu-list:first-of-type {
      grid-column: 1;
      justify-content: flex-end;
    }

    .menu-panel > .menu-list:last-of-type {
      grid-column: 3;
      justify-content: flex-start;
    }

    .menu-chapter > summary,
    .menu-link {
      block-size: 100%;
      min-block-size: var(--navbar-height);
      padding-inline: var(--space-xs);
      font-size: var(--text-m);
      font-weight: var(--weight-regular);
      line-height: var(--leading-tight);
      color: var(--bar-fg);
    }

    .menu-chapter > summary:focus-visible,
    .menu-link:focus-visible {
      outline-offset: calc(var(--focus-ring-width) * -1);
    }

    /* Keine Buchmarke; das Dreieck aus dem Logo steht auf dem Zettel neben
       dem Namen und dreht sich beim Öffnen (ohne Übergang). */
    .menu-chapter > summary > .menu-paper::before {
      display: none;
    }

    .menu-chapter {
      position: relative;
    }

    /* Dropdown: unter dem Band, Schrift Dunkelblau auf Papier, oben eine
       Kante in der Kapitelfarbe. */
    .menu-chapter__panel {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: var(--z-panel);
      min-inline-size: var(--dropdown-min);
      color: var(--color-text);
      background: var(--color-surface-raised);
      border: var(--border-thin) solid transparent;
      border-block-start: var(--border-thick) solid var(--color-chapter);
      /* Hängt am Band: nur die unteren Ecken rund. */
      border-end-start-radius: var(--radius-box);
      border-end-end-radius: var(--radius-box);
      box-shadow: var(--shadow-raised);
      --color-focus: var(--color-school-navy);
    }

    .menu-panel > .menu-list:first-of-type > li:last-child .menu-chapter__panel,
    .menu-panel > .menu-list:last-of-type > li:nth-last-child(-n + 2) .menu-chapter__panel {
      inset-inline-start: auto;
      inset-inline-end: 0;
    }
  }

  /* ---- Brotkrumen ---- */
  .breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-s);
    padding-block: var(--space-s);
    font-size: var(--text-s);
  }

  .breadcrumbs li {
    max-inline-size: none;
  }

  .breadcrumbs li + li::before {
    content: "›" / "";
    margin-inline-end: var(--space-s);
  }

  /* Schmal: nur die Elternebene, als „‹ Kapitel“. */
  @media (max-width: 39.99rem) {
    .breadcrumbs li:not([data-parent]) {
      display: none;
    }

    .breadcrumbs li[data-parent]::before {
      content: "‹" / "";
      margin-inline-end: var(--space-xs);
    }
  }

  /* ---- Weiter ---- */
  .next-steps {
    padding-block: var(--space-xl);
  }

  .next-steps__list {
    list-style: none;
  }

  .next-steps__item {
    padding: var(--space-m);
    max-inline-size: none;
  }

  .next-steps__item a {
    font-weight: var(--weight-medium);
  }

  /* ---- Footer: außerhalb der ersten Fensterhöhe ---- */
  .site-footer {
    padding-block: var(--space-xl);
    padding-block-end: calc(var(--space-xl) + var(--bar-clearance));
    background: var(--color-surface-sunken);
  }

  .footer-chapter {
    --space: var(--space-s);
    padding: var(--space-m);
    border-block-start: var(--border-thick) solid var(--color-chapter);
  }

  .footer-chapter ul,
  .footer-meta ul {
    list-style: none;
  }

  .footer-meta {
    padding: var(--space-m);
  }

  .footer-meta li,
  .footer-chapter li {
    max-inline-size: none;
  }

  /* ---- Servicemenü "Auf einen Blick": drei Links mit Symbol und Beschriftung ----
     Schmal: Daumenleiste unten über die ganze Breite, die Überschrift ist
     nur für Vorlese-Software da. Ab Tablet: Spalte am rechten Rand,
     senkrecht mittig, die drei Links untereinander unter der Überschrift.
     Kein Knopf, kein Popover: alles ist immer sichtbar. */
  .service {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-service);
    padding-block-end: var(--service-bar-inset);
    background: var(--color-surface-raised);
    /* Keine sichtbare Umrandung; der transparente Rahmen erscheint nur im
       Kontrastmodus des Systems (forced colors) und grenzt dort ab. */
    border-block-start: var(--border-thin) solid transparent;
  }

  .service__title {
    position: absolute;
    inline-size: var(--visually-hidden-size);
    block-size: var(--visually-hidden-size);
    margin: calc(var(--visually-hidden-size) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .service-list {
    display: flex;
    list-style: none;
  }

  .service-list li {
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .service-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);
    block-size: 100%;
    min-block-size: var(--service-bar-size);
    padding: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .service-list a:focus-visible {
    outline-offset: calc(var(--focus-ring-width) * -1);
  }

  .service .icon {
    flex: none;
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
  }

  /* Ab dieser Breite steht die Spalte am Rand; Media Queries können keine
     Custom Properties lesen, der Wert steht deshalb hier. */
  @media (min-width: 48rem) {
    :root {
      --bar-clearance: 0px;
    }

    /* Ab hier ist der Seitenrahmen ein Raster mit einer Spalte: Kopf und
       Servicemenü teilen sich die erste Zelle. So steht die Randspalte
       anfangs senkrecht mittig auf Höhe des Kopfs (auf der Startseite die
       Hero-Section), wandert beim Scrollen mit ihm nach oben und klebt dann
       mit --service-stuck-top Abstand unter dem Band (position: sticky).
       Am Ende des Rahmens, vor dem Footer, scrollt sie weg. */
    .site-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
    }

    .site-shell > :first-child {
      grid-area: 1 / 1;
    }

    .service {
      position: sticky;
      grid-area: 1 / 1;
      justify-self: end;
      align-self: center;
      inset-inline: auto;
      inset-block: var(--service-stuck-top) auto;
      /* Unter der Navbar: Läuft das Band beim Scrollen an der Spalte vorbei,
         gleitet es darüber, statt dass die Spalte einen Zettel verdeckt. */
      z-index: var(--z-base);
      inline-size: var(--service-edge-size);
      padding: 0;
      border-block-start: var(--border-thin) solid transparent;
      border-inline-start: var(--border-thin) solid transparent;
      /* Randständig: nur die dem Inhalt zugewandte Seite ist rund. Die
         Daumenleiste unten läuft über die ganze Breite und bleibt eckig. */
      border-start-start-radius: var(--radius-box);
      border-end-start-radius: var(--radius-box);
    }

    .service__title {
      position: static;
      inline-size: auto;
      block-size: auto;
      margin: 0;
      padding: var(--space-xs);
      overflow: visible;
      font-size: var(--text-s);
      font-weight: var(--weight-bold);
      line-height: var(--leading-heading);
      text-align: center;
      clip-path: none;
      white-space: normal;
      text-wrap: balance;
    }

    .service-list {
      flex-direction: column;
    }

    .service-list a {
      min-block-size: var(--service-link-height);
    }
  }

  /* ---- Platzhalterrahmen für Bilder ---- */
  .placeholder {
    inline-size: 100%;
    padding: var(--space-s);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-align: center;
    background: var(--color-placeholder);
    border-radius: var(--radius-box);
  }

  /* ---- Kachel: Farbfläche mit Titel und Link ---- */
  .tile {
    padding: var(--space-l);
    max-inline-size: none;
    border-radius: var(--radius-box);
  }

  .tile--chapter {
    color: var(--color-on-chapter);
    background: var(--color-chapter);
    --color-link: var(--color-on-chapter);
    --color-focus: var(--color-on-chapter);
  }

  .tile a {
    font-weight: var(--weight-medium);
  }

  .tile ul {
    list-style: none;
  }

  .page-intro {
    padding: var(--space-l);
  }

  .article-section {
    padding: var(--space-l);
  }
}