/* ============================================================================
   NEST — Web-Übersetzung des Design-Systems
   Quelle: nest-website/site/assets/css/site.css (Layout, Typo, Flächen, Linien)
   plus die CI-Farbe #ffd640; nest-assets/design.md ist für das Design
   abgelöst (Spec §3).
   Regel: Die Vorlage gewinnt. Kein Verlauf, kein Schatten, keine Rundung,
   nie Weiß auf Gelb.
   Flächen: nicht mehr „höchstens eine gelbe Fläche pro Seite“ als Daumenregel,
   sondern der ausdrückliche Flächen-Vertrag in §10 — genau ein `gelb` pro
   Seite (der Titelblock), und zwei benachbarte Abschnitte tragen nie dieselbe
   Fläche. Sichtbar im Admin als `surface`-Eigenschaft der Blöcke.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- tokens --- */
@layer tokens {
  :root {
    /* Farbe (aus tokens.css). Gelb ist EINE Vollfläche pro Seite. */
    --nest-yellow: #ffd640;
    --ink: #231f20;
    --paper: #ffffff;
    --grey-200: #dcddde;
    --grey-300: #d1d3d4;
    --grey-400: #a7a9ac;
    --grey-500: #888888;
    --grey-700: #737477;

    /* Flächen jenseits von Weiß und Ink (Spec §10). `--grund` kommt aus der
       Referenz (`site.css:--grund`) und ist der hellste Ton, der sich von
       `--paper` noch abhebt — ohne ihn wäre „grund“ einfach Weiß.

       `--anthrazit` ist der Referenzwert und wird seit §8 gebraucht: der
       Abschnitt `projekte` (Nr. 6) trägt ihn. Zu wissen, was er leistet: unsere
       CI-Schwarz ist `--ink: #231f20`, der Referenzwert liegt nur rund 5 %
       darüber. In der Referenz tragen die beiden Dunkeltöne `--schwarz:
       #0F0F10` und `--anthrazit: #282A2C` einen sichtbaren Stufenunterschied;
       bei uns ist der Schritt von `dunkel` auf `anthrazit` ein leiser. Der
       Flächen-Vertrag (Spec §10) prüft Namen, nicht Helligkeiten — die
       Nachbarschaft `massstaebe` (dunkel) → `projekte` (anthrazit) erfüllt ihn
       also, auch wenn die Kante nicht auffällt. Sie fällt dort auch nicht
       nötig: `projekte` hebt sich durch die gelbe Tafel ab, nicht durch seinen
       Grund. */
    --grund: #f2f2ef;
    --anthrazit: #282a2c;

    --statement: var(--nest-yellow);
    --rule: var(--ink);

    /* Schrift */
    --font-sans: "Apercu", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Apercu Mono", ui-monospace, Menlo, monospace;

    /* Linien */
    --rule-heavy: 8px;
    --rule-light: 3px;
    --rule-hair: 2px;

    /* Raster & Abstände. Die Maße kommen von der Referenz (`nest-website`),
       die ihre Inhalte in `.wrap` auf 1680px und ihren Rand auf 16–64px
       begrenzt. Die erste Fassung stand bei 1152px/85px: auf einem 3440px
       breiten Schirm war die Seite damit ein schmaler Streifen in der Mitte. */
    --measure: 105rem;             /* 1680px — wie `.wrap` der Referenz */
    --prose: 62ch;                 /* Lesemaß des Fließtexts — wie `p{max-width:62ch}` */

    /* φ-Raster von strongroots.at. Dort gemessen: step-1 1rem, step-2 1.618rem,
       step-3 2.618rem, step-5 4.236rem, step-8 6.854rem. Die Grenzen der
       fluiden Werte kommen aus dieser Skala; das Abschnittspolster liegt
       damit bei 67,8–109,7px statt bei 72–168px. */
    --step-1: 1rem;
    --step-2: 1.618rem;            /* 25,888px */
    --step-3: 2.618rem;            /* 41,888px */
    --step-5: 4.236rem;            /* 67,776px */
    --step-8: 6.854rem;            /* 109,664px */

    --gutter: clamp(var(--step-1), 3vw, var(--step-2));
    --margin: clamp(var(--step-2), 4.4vw, var(--step-5));
    --space-section: clamp(var(--step-5), 7vw, var(--step-8));
    --space-inset: var(--step-2);

    /* Fluide Typo-Skala. Der Fuß jeder Klammer ist der Mobilwert — die
       Referenz setzt ihre Startseiten-h1 auf 32px (`--hero-h1`), nicht auf die
       40px der ersten Fassung. Bei 390px sind 40px Versalschrift zu breit:
       „Leerstandsmanagement.“ misst darin 507px und passt in keine Telefonbreite.
       h1/h2 folgen jetzt sketches `--hero-h1`/`--h2` (5.2vw, max 80px). */
    --text-cover-title: clamp(2rem, 5.2vw, 5rem);        /* 32 → 80px */
    --text-heading:     clamp(2.125rem, 5.2vw, 5rem);    /* 34 → 80px */
    --text-statement:   clamp(1.625rem, 3.3vw, 3.25rem); /* 26 → 52px — wie `.aussage` */
    --text-subhead:     1.125rem;   /* 18px */
    /* Fließtext wächst mit dem Schirm — 17–20px wie die Referenz. Fest bei 16px
       wirkte er auf einem großen Schirm wie ein Beipackzettel. */
    --text-body:        clamp(1.0625rem, 1.25vw, 1.25rem); /* 17 → 20px */
    --leading-body:     1.618;      /* strongroots: 29,124px bei 18px */
    --text-meta:        1.25rem;    /* 20px */
    --text-footer:      0.875rem;   /* 14px */

    /* Bewegung. Kurve wie nest-website (dort `--ease`); die Dauern kommen von
       strongroots.at (`--dur-s .618s`, `--dur-m 1s`, `--dur-l 1.618s`,
       `--dur-xl 2.618s`, Micro-Interaktion .15s). */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-ui: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .15s;
    --dur-s: .618s;
    --dur-m: 1s;
    --dur-l: 1.618s;
    --dur-xl: 2.618s;
  }

  /* Schriften selbst hosten — nie Inter/Roboto als Ersatz (design.md §3). */
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Light-aEc4Igb.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-LightItalic-nCTM8n0.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Regular-_WgwO3b.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Italic-yzgf2tY.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Medium-sEhK5DF.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-MediumItalic-_enYAGR.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Bold-9S_IXC2.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-BoldItalic-e2ntHVt.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
  @font-face { font-family: "Apercu Mono"; src: url("../fonts/Apercu-Mono-6n3IsYX.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
}

/* ------------------------------------------------------------------ base --- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Lesemaß global — wie `p{max-width:62ch}` der Referenz. Einzelne Bausteine
     dürfen enger bleiben; `max-width:none` hebt die Grenze bewusst auf.
     Die Trennung steht ebenfalls global: die Referenztexte bringen weiche
     Trennstellen mit, die Sulu-Inhalte nicht — ohne `hyphens: auto` bliebe
     ein deutsches Kompositum im schmalen Kasten ungetrennt. */
  p { max-width: var(--prose); hyphens: auto; }

  /* Sichtbarer Fokus — Pflicht, nicht optional. */
  :focus-visible { outline: var(--rule-light) solid var(--ink); outline-offset: 3px; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { text-decoration-thickness: 2px; }

  img, svg, video { display: block; max-width: 100%; height: auto; }
  /* Bilder sind eckig und randlos (design.md §5). */
  figure { margin: 0; }
  figcaption { margin-top: .75rem; font-style: italic; }

  /* Titelzeilen und Kapitelüberschriften tragen rule-heavy (design.md §4).
     Satz wie die Referenz: enge Zeilenhöhe (1.02), negatives Tracking
     (−.025em) und ausbalancierte Umbrüche. */
  .nest-title, .nest-heading {
    font-weight: 700; line-height: 1.02; letter-spacing: -.025em;
    text-wrap: balance; margin: 0;
  }
  /* Alle Überschriften tragen denselben Satz wie die Referenz, auch wenn ein
     Baustein nur seine Größe setzt (etwa `.nest-partner h2` oder die
     Kartentitel). Ohne diese Basis erbten sie die 1.618-Zeilenhöhe des
     Fließtexts und liefen auseinander. */
  h1, h2, h3 {
    font-weight: 700; line-height: 1.02; letter-spacing: -.025em;
    text-wrap: balance;
  }
  /* Deutsche Komposita („Leerstandsmanagement“, „Zwischennutzung“) sind als EIN
     Wort breiter als ein Telefonschirm. Ohne Bruchstelle schiebt ein solches
     Wort seinen ganzen Container auf: gemessen bei 390px war das Dokument 555px
     breit, der Titelblock allein 507px.
     `hyphens: auto` trennt an der Sprachgrenze (`<html lang="de-AT">` steht im
     Grundgerüst), `overflow-wrap: anywhere` fängt den Rest (Namen, Kürzel,
     URLs).
     `anywhere` und nicht `break-word`, und das ist der springende Punkt: nur
     `anywhere` senkt die min-content-Breite eines Kastens. Mit `break-word`
     bleibt der Container so breit wie das ganze Wort — der Text würde dann
     nicht umbrochen, sondern an der Kante abgeschnitten.
     Die Referenz verlässt sich an dieser Stelle auf `overflow-x: clip` und
     schneidet „Leerstandsmanagement.“ auf dem Telefon ab (bei 32px sind es
     405px). Hier soll das Wort lesbar bleiben. */
  .nest-title, .nest-heading,
  .nest-subhead, .nest-eyebrow,
  .nest-statement, .nest-claim__text,
  .nest-titleblock__title, .nest-titleblock__claim,
  .nest-body h2, .nest-body h3,
  figcaption, .nest-meta, .nest-caption { hyphens: auto; overflow-wrap: anywhere; }
  .nest-title  { font-size: var(--text-cover-title); text-transform: uppercase; }
  .nest-heading { font-size: var(--text-heading); }
  .nest-title > span, .nest-heading > span {
    display: block; border-bottom: var(--rule-heavy) solid var(--rule);
    padding-bottom: .12em; margin-bottom: .22em;
  }
  .nest-title > span:last-child, .nest-heading > span:last-child { margin-bottom: 0; }

  .nest-subhead {
    font-size: var(--text-subhead); font-weight: 700; text-transform: uppercase;
    border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .34em; margin: 0 0 .625rem;
  }
  /* Das Lesemaß begrenzt die Zeile, nicht die Spalte: Überschriften und Raster
     dürfen über die volle Bandbreite laufen, Fließtext nicht. Ohne diese Grenze
     wären Absätze auf einem breiten Schirm über 100 Zeichen lang. */
  .nest-body p { margin: 0 0 1.1em; text-align: start; text-wrap: pretty; hyphens: auto; max-width: var(--prose); }
  .nest-caption { font-style: italic; }
  .nest-meta { font-size: var(--text-meta); font-weight: 500; line-height: 1.2; }
}

/* ---------------------------------------------------------------- layout --- */
@layer layout {
  .nest-shell { max-width: var(--measure); margin-inline: auto; padding-inline: var(--margin); }

  /* Startseite: Bänder laufen Rand zu Rand. Der Fluss zwischen den Kindern
     entspricht `.nest-flow`; ein Band bringt seinen eigenen Abstand mit und
     setzt ihn deshalb zurück.
     Die Spalte steht ausdrücklich auf `minmax(0, 1fr)`: eine implizite
     `auto`-Spalte wird nach ihrem min-content bemessen, also nach dem längsten
     unteilbaren Wort der Seite — und dieses eine Wort bestimmt dann die Breite
     ALLER Bänder. Mit `minmax(0, 1fr)` bleibt die Spalte am Viewport und ein
     zu breites Wort bleibt eine Angelegenheit seines eigenen Bandes. */
  .nest-page { display: grid; grid-template-columns: minmax(0, 1fr); }
  .nest-page > * + * { margin-block-start: calc(var(--gutter) * 2); }
  .nest-page > .nest-full { margin-block-start: 0; }

  .nest-full { width: 100%; }

  /* Flächen-Vertrag (Spec §10). Jeder abschnittstragende Block trägt genau eine
     Fläche; sie entscheidet Hintergrund, Linien- UND Fokusfarbe, weil beide
     sonst auf dunklem Grund unsichtbar wären (Spec §12 Nr. 7: Fokusring gelb
     auf dunklen Flächen, schwarz auf hellen).

     `weiss` ist die Vorgabe und entspricht dem Zustand vor diesem Vertrag:
     `.nest-full` hatte nie einen Hintergrund, die Bänder standen also auf dem
     Seitengrund. Die Fläche ist damit rückwärtskompatibel — ein Block ohne
     `surface` sieht aus wie bisher.

     `--ink` bleibt als Klassenname erhalten: `homepage-contact.html.twig` und
     die Button-Regel weiter unten hängen daran. Es ist die alte Schreibweise
     für `dunkel`. */
  .nest-full--weiss { background: var(--paper); color: var(--ink); --rule: var(--ink); }
  .nest-full--grund { background: var(--grund); color: var(--ink); --rule: var(--ink); }
  .nest-full--gelb { background: var(--nest-yellow); color: var(--ink); --rule: var(--ink); }
  .nest-full--ink,
  .nest-full--dunkel { background: var(--ink); color: var(--paper); --rule: var(--paper); }
  .nest-full--anthrazit { background: var(--anthrazit); color: var(--paper); --rule: var(--paper); }

  /* Der Fokusring ist im Rest der Datei `var(--ink)`. Auf einer dunklen Fläche
     wäre er damit 1:1 und unsichtbar, deshalb wird er dort auf Gelb gedreht
     (Spec §12 Nr. 7). Nur die Farbe überschreiben, damit Breite und Offset
     unverändert bleiben. */
  .nest-full--ink :focus-visible,
  .nest-full--dunkel :focus-visible,
  .nest-full--anthrazit :focus-visible { outline-color: var(--nest-yellow); }

  .nest-section { padding-block: var(--space-section); }

  /* 12-Spalten-Raster; die linke Spalte bleibt für Infobox/Bild/Beschriftung. */
  .nest-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--gutter); }
  .nest-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--gutter); }
  @media (min-width: 60rem) { .nest-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Ein Raster- oder Flex-Kind hat `min-width: auto`, also min-content. Ein
     einzelnes zu breites Kind (ein langes Wort, eine Tabelle, ein langes Kürzel)
     reicht das nach oben durch, bis der Container über seine Spalte hinaus
     wächst — die Spalte bleibt dabei richtig, das Kind nicht. `min-width: 0`
     nimmt dem Kind das Recht, seinen Container aufzublähen; umbrechen muss es
     dann selbst, und dafür sorgen die Bruchstellen oben. */
  .nest-page > *, .nest-flow > *,
  .nest-grid > *, .nest-two-col > *,
  .nest-cols-2 > *, .nest-cols-3 > * { min-width: 0; }
}

/* ------------------------------------------------------------ components --- */
@layer components {
  /* Titelblock — immer gelb, auch auf Foto, 1–4 Versalzeilen (design.md §9). */
  .nest-titleblock {
    background: var(--nest-yellow); color: var(--ink);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  }
  .nest-titleblock__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); }
  .nest-titleblock__logo { width: clamp(11rem, 24vw, 17.25rem); }
  .nest-titleblock--photo { position: relative; isolation: isolate; }
  .nest-titleblock--photo > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.35) grayscale(1); z-index: -1;
  }

  /* Infobox — gelb, mit <dl>, Innenabstand space-inset. */
  .nest-infobox { background: var(--nest-yellow); color: var(--ink); padding: var(--space-inset); }
  /* Variante OHNE Gelb — zu verwenden, wenn die Seite bereits eine gelbe Fläche
     trägt (Titelblock, Statement, Claim). Flächen-Vertrag: genau ein `gelb` pro
     Seite (Spec §10). */
  .nest-infobox--paper { background: var(--paper); border-top: var(--rule-heavy) solid var(--rule); padding: var(--space-inset) 0 0; }
  .nest-infobox__label { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; margin: 0 0 .625rem; }
  .nest-infobox dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; margin: 0; }
  .nest-infobox dt { font-weight: 400; }
  .nest-infobox dd { margin: 0; font-weight: 700; }
  /* Die Labels stehen auf `max-content`, damit sie eine ruhige Kante bilden —
     auf einem Telefon geht das nicht auf: das längste dt („Aktivierungs- und
     Transformationsprojekte über 50“) bestimmt dann die Breite der ganzen
     Liste und schiebt die Belege über den Rand (gemessen bei 390px: 397px
     Liste in einer 356px Zeile). Unter 40rem stehen Label und Wert
     untereinander; `column-gap` wird zu `row-gap`, weil dazwischen nichts
     mehr nebeneinander liegt. */
  @media (max-width: 39.99rem) {
    .nest-infobox dl { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .nest-infobox dt:not(:first-child) { margin-top: .75rem; }
  }

  /* Statement — eine gelbe Zeile, die einzige Ausnahme in der Farbregel. */
  .nest-statement { font-size: var(--text-statement); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--statement); max-width: 15ch; margin: 0; }
  /* Am Screen für Kerninhalte besser ink auf nest-yellow (Kontrast). */
  .nest-statement--solid { color: var(--ink); background: var(--nest-yellow); padding: var(--space-inset); max-width: none; }

  /* Figure — eckig, randlos, Platzhalter grey-200. */
  .nest-figure__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-200); }

  /* Callout (Diagramm) */
  .nest-callout { border-top: var(--rule-hair) solid var(--rule); padding-top: .4em; }
  .nest-callout__label { display: block; font-weight: 700; text-transform: uppercase; }

  /* Kontaktblock */
  .nest-contact__label { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; margin: 0 0 .625rem; }
  .nest-contact__name { font-size: var(--text-meta); line-height: 1.5; font-weight: 700; margin: 0; }
  .nest-contact__lines { font-size: 1.125rem; font-style: normal; }
  .nest-contact__fine { margin-top: 1.75rem; font-size: var(--text-footer); line-height: 1.2; font-weight: 300; }

  /* Fußzeile */
  .nest-footer { display: flex; justify-content: space-between; gap: var(--gutter); font-size: var(--text-footer); font-weight: 500; }

  /* Claim — gelbe Fläche, www unten rechts. */
  /* Der Innenabstand wächst mit dem Schirm (wie `.aussage` der Referenz): feste
     28px fressen auf einem 390px-Telefon 56px der 356px Zeile. */
  .nest-claim { background: var(--nest-yellow); color: var(--ink); padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 1.5rem; }
  .nest-claim__text { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; font-weight: 700; margin: 0; }
  .nest-claim__url { align-self: flex-end; font-size: var(--text-footer); font-weight: 700; margin: 0; }
  .nest-claim--ink { background: var(--ink); color: var(--nest-yellow); }
  .nest-claim--paper { background: var(--paper); }

  /* Projektkarte für Übersichten — bewusst kein Schatten, keine Rundung. */
  .nest-card-project { display: grid; gap: .75rem; text-decoration: none; }
  .nest-card-project__scale { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; }
  .nest-card-project__media { aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-200); }
}

/* -------------------------------------------------------------- utilities --- */
@layer utilities {
  .nest-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nest-skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 100; background: var(--nest-yellow); color: var(--ink); padding: .5rem .75rem; }
}

/* ============================================================================
   NEST — Website-Komponenten (Rollout 2026)
   Ergänzt tokens/base/layout/components/utilities oben. Alle Regeln folgen dem
   Markengesetz: kein border-radius, kein box-shadow, kein Verlauf, nie Weiß auf
   Gelb, genau ein `gelb` pro Seite (Spec §10). Neue Klassen sind additiv.
   ========================================================================== */

/* ------------------------------------------------------------------ base --- */
@layer base {
  /* Kein horizontales Scrollen: die Seite bleibt eine einzige Spalte.
     Die Regel steht auf BEIDEN Elementen, und das ist Absicht: `overflow` auf
     `body` wird auf das Viewport übertragen, solange `html` `visible` ist —
     dann rechnet `body` selbst wieder mit `visible` und schneidet gar nichts
     ab. Gemessen bei 390px: das Dokument war 555px breit, jedes Band ragte
     165px über den Rand hinaus und war nicht erreichbar. Mit `clip` auch auf
     `html` bleibt `body`s Regel wirksam. `clip` statt `hidden`, weil nur `clip`
     keinen Scroll-Container erzeugt: `position: sticky` (Kreislauf, Fußleiste)
     arbeitet unverändert weiter. */
  html, body { max-width: 100%; }
  html { overflow-x: clip; }
  body { overflow-x: clip; }
  @supports not (overflow: clip) { html, body { overflow-x: hidden; } }

  /* Redaktioneller Text (text_editor) erbt Satzregeln aus `.nest-body`. */
  .nest-body > :first-child { margin-top: 0; }
  .nest-body > :last-child { margin-bottom: 0; }
  .nest-body ul, .nest-body ol { padding-left: 1.25em; }
  .nest-body h2, .nest-body h3 { font-weight: 700; line-height: 1.02; letter-spacing: -.025em; margin: 1.5em 0 .5em; }
  .nest-body h2 { font-size: 1.75rem; }
  .nest-body h3 { font-size: 1.25rem; line-height: 1.12; letter-spacing: -.015em; }
  .nest-body blockquote { margin: 1.5em 0; padding-left: 1rem; border-left: var(--rule-light) solid var(--rule); }

  .nest-eyebrow { margin: 0 0 .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- layout --- */
@layer layout {
  /* Standard-Fluss der Blöcke innerhalb einer Seite. */
  /* Dieselbe Vorsichtsmaßnahme wie bei `.nest-page`: ohne `minmax(0, 1fr)`
     bemisst sich die implizite Spalte am min-content des breitesten Kindes. */
  .nest-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gutter) * 2); }

  /* Asymmetrisches Raster: linke Spalte für Infobox/Bild/Beschriftung. */
  .nest-two-col { display: grid; gap: var(--gutter); }
  @media (min-width: 60rem) {
    .nest-two-col { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; }
    .nest-two-col--wide { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
  }
  .nest-grid__right { grid-column: 4 / -1; }
  .nest-grid__left { grid-column: 1 / 4; }
  @media (max-width: 59.99rem) {
    .nest-grid__right, .nest-grid__left { grid-column: 1 / -1; }
  }

  /* Kopf- und Fußbereiche tragen dieselbe Satzbreite wie der Inhalt. */
  .nest-band { border-top: var(--rule-heavy) solid var(--rule); }
}

/* ------------------------------------------------------------ components --- */
@layer components {
  /* --- Header ----------------------------------------------------------- */
  .nest-header { border-bottom: var(--rule-heavy) solid var(--rule); background: var(--paper); }
  .nest-header__inner {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: var(--gutter); padding-block: 1.25rem;
  }
  .nest-brand { display: inline-flex; }
  .nest-brand img { width: clamp(10rem, 22vw, 15rem); height: auto; }

  /* --- Navigation ------------------------------------------------------- */
  .nest-nav { display: flex; align-items: center; gap: var(--gutter); }
  .nest-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .nest-nav__item { position: relative; }
  .nest-nav__link { font-weight: 700; text-transform: uppercase; text-decoration: none; }
  .nest-nav__link:hover, .nest-nav__link:focus-visible { text-decoration: underline; }
  .nest-nav__link[aria-current="page"] { border-bottom: var(--rule-light) solid var(--rule); }
  .nest-nav__link--contact { border-bottom: var(--rule-heavy) solid var(--ink); }
  /* Die Unterliste der Sprungmarken (neueste Projekte bzw. Pressebeiträge).
     Sie öffnet bei Zeigerkontakt und bei Tastaturfokus — `:focus-within`
     deckt den Weg über Tab ab, ohne dass ein Knopf den Zustand hält. */
  .nest-nav__sub {
    display: none; position: absolute; top: 100%; left: 0; z-index: 40;
    min-width: 16rem; max-width: 24rem; margin: .5rem 0 0; padding: .75rem 1rem;
    list-style: none; background: var(--paper);
    border: var(--rule-hair) solid var(--rule);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .08);
  }
  .nest-nav__item--has-sub:hover .nest-nav__sub,
  .nest-nav__item--has-sub:focus-within .nest-nav__sub { display: block; }
  .nest-nav__sublink { display: block; padding: .2rem 0; text-decoration: none; }
  .nest-nav__sublink:hover, .nest-nav__sublink:focus-visible { text-decoration: underline; }
  .nest-nav__toggle {
    display: none; align-items: center; gap: .5rem; font: inherit; font-weight: 700;
    text-transform: uppercase; background: var(--paper); color: var(--ink);
    border: var(--rule-light) solid var(--ink); padding: .4rem .6rem; cursor: pointer;
  }
  .nest-nav__bars { display: inline-block; width: 1.25rem; height: 2px; background: var(--ink); position: relative; }
  .nest-nav__bars::before, .nest-nav__bars::after { content: ""; position: absolute; left: 0; width: 1.25rem; height: 2px; background: var(--ink); }
  .nest-nav__bars::before { top: -6px; }
  .nest-nav__bars::after { top: 6px; }
  .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars { background: transparent; }
  .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars::before { top: 0; }
  .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars::after { top: 0; }

  .nest-lang { display: flex; gap: .75rem; font-weight: 700; text-transform: uppercase; }
  .nest-lang__link { text-decoration: none; }
  .nest-lang__link[aria-current="true"] { border-bottom: var(--rule-light) solid var(--rule); }

  @media (max-width: 52rem) {
    .nest-nav__toggle { display: inline-flex; }
    .nest-nav__list {
      display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
      flex-direction: column; gap: 0; background: var(--paper);
      border-top: var(--rule-heavy) solid var(--rule); border-bottom: var(--rule-heavy) solid var(--rule);
      padding: .5rem var(--margin) 1rem;
    }
    .nest-nav__list.is-open { display: flex; }
    .nest-nav__list li { border-bottom: var(--rule-hair) solid var(--rule); }
    .nest-nav__list li:last-child { border-bottom: 0; }
    .nest-nav__link { display: block; padding: .75rem 0; }
    /* Mobil ist die Unterliste immer offen und eingerückt — ein Aufklappen auf
       Zeigerkontakt gibt es dort nicht. */
    .nest-nav__sub {
      display: block; position: static; min-width: 0; max-width: none;
      margin: 0 0 .5rem; padding: 0 0 0 1rem; border: 0; box-shadow: none;
    }
    .nest-nav__sub li { border-bottom: 0; }
    .nest-nav__sublink { padding: .35rem 0; }
    .nest-header__inner { flex-wrap: wrap; }
    .nest-brand { order: 1; }
    .nest-nav { order: 3; width: 100%; justify-content: space-between; }
  }

  /* --- Titelblock (mit optionalem, abgedunkeltem Vollbild-Foto) --------- */
  .nest-titleblock__title { margin: 0; }
  .nest-titleblock__date { font-size: var(--text-meta); font-weight: 500; }
  .nest-titleblock__claim { margin: 1rem 0 0; max-width: 34ch; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
  .nest-titleblock--photo { position: relative; isolation: isolate; }
  .nest-titleblock--photo > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.35) grayscale(1); z-index: -1;
  }
  @media (min-width: 60rem) { .nest-titleblock--photo .nest-titleblock { max-width: 52rem; } }

  /* --- Statement-Varianten --------------------------------------------- */
  .nest-statement--paper { background: none; padding: 0; }
  .nest-statement__source { display: block; margin-top: 1rem; font-size: var(--text-body); font-weight: 400; }

  /* --- Figure / Galerie ------------------------------------------------- */
  .nest-figure--column { max-width: 34rem; }
  .nest-figure__media--thumb { aspect-ratio: 4 / 3; }
  .nest-gallery__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .nest-gallery figcaption { margin-top: .75rem; }

  /* --- Callout ---------------------------------------------------------- */
  .nest-callout__text { margin: .35rem 0 0; }
  .nest-callout a { font-weight: 700; }

  /* --- Projektskala ----------------------------------------------------- */
  .nest-scale { list-style: none; margin: 0; padding: 0; }
  .nest-scale__item {
    display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--gutter);
    align-items: baseline; border-bottom: var(--rule-light) solid var(--rule); padding: 1rem 0 .75rem;
  }
  .nest-scale__key { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
  .nest-scale__desc { font-size: 1.125rem; }
  .nest-scale__item--active { border-bottom-width: var(--rule-heavy); }
  .nest-scale__item--active .nest-scale__key { text-decoration: underline; text-decoration-thickness: var(--rule-light); text-underline-offset: .15em; }

  /* --- Kreislaufgrafik --------------------------------------------------
     Zwischennutzung → Planung → Verwaltung, so wie die Pfeile der Grafik
     laufen. Vorgabe ist der ENDZUSTAND: ohne Skript und bei reduzierter
     Bewegung steht die vollständige Grafik (alle drei Flächen hell, alle Pfeile
     gezogen, alle 32 Buchstaben da). Erst die Klasse `nest-kreislauf--animiert`
     — die `assets/app.js` setzt — dimmt und versteckt. Ein Skriptfehler führt
     damit nicht zu einer leeren Grafik, sondern zu einer stillstehenden,
     vollständigen (Spezifikation Kreislauf §5.4).

     Der Vertrag ist die Klasse, nicht der Elementtyp: `[data-station]` sitzt
     einmal an einer Gruppe und zweimal an einem Pfad, `.kr-pfeil`/`.kr-spitze`
     an Pfeilpfaden. Umgefärbt wird nie — Dimmung ist die einzige Technik, die
     das leistet (§5.2). */
  .nest-kreislauf {
    --kreislauf-scroll: 240vh;  /* eine Bühne, drei Schritte à 80vh */
    --kreislauf-dimm: .28;      /* die nicht besprochenen Stationen */
    display: grid;
    gap: var(--gutter);
  }

  .nest-kreislauf__buehne { position: relative; }
  .nest-kreislauf__haft { display: grid; gap: var(--gutter); }
  @media (min-width: 60rem) {
    .nest-kreislauf__haft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  }

  .nest-kreislauf__figure { width: 100%; height: auto; }
  .nest-kreislauf__figure svg { width: 100%; height: auto; display: block; }

  .nest-kreislauf__captions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .nest-kreislauf__caption {
    border-top: var(--rule-hair) solid var(--rule); padding-top: .4em;
    transition: border-top-width var(--dur-fast) var(--ease-ui), opacity var(--dur-fast) var(--ease-ui);
  }
  .nest-kreislauf__caption--active { border-top-width: var(--rule-heavy); }
  .nest-kreislauf__caption--active .nest-callout__label { text-decoration: underline; text-underline-offset: .15em; }
  .nest-kreislauf__hint { margin-top: 1rem; font-size: var(--text-footer); }

  /* Die Bühne wird zum Scrollweg, das Blatt darin bleibt stehen: nur so sind
     Grafik und Beschriftung gleichzeitig zu sehen, während der Schritt läuft. */
  .nest-kreislauf--animiert .nest-kreislauf__buehne { height: var(--kreislauf-scroll); }
  .nest-kreislauf--animiert .nest-kreislauf__haft {
    position: sticky; top: 0; min-height: 100vh;
    align-content: center; padding-block: var(--space-inset);
  }
  @media (min-width: 60rem) {
    .nest-kreislauf--animiert .nest-kreislauf__haft { align-items: center; }
  }

  /* Die besprochene Station tritt hervor, die anderen treten zurück. */
  .nest-kreislauf--animiert .kr-segment {
    opacity: var(--kreislauf-dimm);
    transition: opacity var(--dur-s) var(--ease);
  }
  .nest-kreislauf--animiert .kr-segment.kr-dran { opacity: 1; }

  /* Die Buchstaben treten gestaffelt hervor und bleiben stehen. */
  .nest-kreislauf--animiert .kr-buchstabe { opacity: 0; transition: opacity var(--dur-fast) var(--ease-ui); }
  .nest-kreislauf--animiert .kr-buchstabe.kr-dran { opacity: 1; }

  /* Der abgehende Pfeil zeichnet sich über seine Strichlänge: `--kr-len` ist die
     Länge aus `getTotalLength()`, `--kr-p` der Stand von 0 bis 1. Fehlt die
     Länge, ist der Versatz 0 und der Pfeil steht vollständig — lieber voll als
     leer. Das Haus bewegt sich nie; es ist die Aussage der Grafik. */
  .nest-kreislauf--animiert .kr-pfeil {
    stroke-dasharray: var(--kr-len, 0);
    stroke-dashoffset: calc(var(--kr-len, 0) * (1 - var(--kr-p, 0)));
  }
  .nest-kreislauf--animiert .kr-spitze { opacity: 0; transition: opacity var(--dur-fast) var(--ease-ui); }
  .nest-kreislauf--animiert .kr-spitze.kr-dran { opacity: 1; }

  /* Wird die reduzierte Bewegung erst im Betrieb eingeschaltet, greift der
     Zuhörer in `app.js` erst beim nächsten Scrollen. Bis dahin hält diese
     Zusicherung Bühne und Grafik im Endzustand (§5.4). */
  @media (prefers-reduced-motion: reduce) {
    .nest-kreislauf__buehne { height: auto !important; }
    .nest-kreislauf__haft { position: static !important; min-height: 0; padding-block: 0; }
    .nest-kreislauf .kr-segment,
    .nest-kreislauf .kr-buchstabe,
    .nest-kreislauf .kr-spitze { opacity: 1 !important; }
    .nest-kreislauf .kr-pfeil { stroke-dasharray: none !important; }
    .nest-kreislauf__caption { transition: none !important; }
  }

  /* --- FAQ -------------------------------------------------------------- */
  .nest-faq { border-top: var(--rule-heavy) solid var(--rule); }
  .nest-faq__item { border-bottom: var(--rule-light) solid var(--rule); }
  .nest-faq__q {
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: 1rem 0; font-weight: 700; cursor: pointer; list-style: none;
  }
  .nest-faq__q::-webkit-details-marker { display: none; }
  .nest-faq__q::after { content: "+"; font-weight: 700; }
  .nest-faq__item[open] .nest-faq__q::after { content: "\2013"; }
  .nest-faq__a { padding-bottom: 1.25rem; }

  /* --- Linkliste / CTA -------------------------------------------------- */
  .nest-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  .nest-linklist__link { font-size: 1.125rem; font-weight: 700; }

  /* --- Projekt-, Presse-, Team-Karten ----------------------------------- */
  .nest-projects { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .nest-card-project__title { font-size: 1.25rem; font-weight: 700; margin: 0; }
  .nest-card-project__summary { margin: 0; }
  .nest-card-project__media { width: 100%; }

  .nest-press__list { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .nest-card-press { display: grid; gap: .5rem; text-decoration: none; border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; }
  .nest-card-press__outlet { font-weight: 700; text-transform: uppercase; }
  .nest-card-press__date { font-size: var(--text-footer); font-weight: 500; }
  .nest-card-press__logo { max-height: 3rem; width: auto; background: var(--grey-200); }
  .nest-card-press__excerpt { margin: 0; }

  .nest-team { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .nest-card-team { display: grid; gap: .5rem; align-content: start; }
  .nest-card-team__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--grey-200); }
  .nest-card-team__name { font-size: 1.25rem; font-weight: 700; margin: 0; }
  .nest-card-team__role { font-weight: 700; text-transform: uppercase; margin: 0; }
  .nest-card-team__lines { margin: 0; font-style: normal; }
  .nest-card-team__bio { margin: 0; }

  /* --- Team-Seite ------------------------------------------------------- */
  /* Die Seite führt das Team in Worten ein (Vorspann), zeigt dann die
     Porträts größer als im Block auf der Startseite und schließt mit dem Weg
     zur Anfrage. Der Vorspann läuft nicht über die volle Satzbreite: er ist
     ein Absatz, keine Behauptung. */
  .nest-team-intro { display: grid; gap: 1rem; justify-items: start; }
  .nest-team-intro .nest-heading { max-width: 18ch; }
  .nest-team-intro .nest-lead { max-width: var(--prose); }
  .nest-team--portraits { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: calc(var(--gutter) * 1.5) var(--gutter); }
  .nest-team--portraits .nest-card-team { gap: .75rem; }
  .nest-team--portraits .nest-card-team__name { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
  .nest-team-outro { border-top: var(--rule-heavy) solid var(--rule); padding-top: var(--gutter); }
  .nest-team-outro .nest-lead { max-width: var(--prose); }

  /* Interessen, Werdegang, Publikationen je Person. Sie stehen zugeklappt in
     der Karte, damit das Porträt-Raster in gleichen Höhen bleibt; die
     Zusammenfassung ist die Überschrift, die der Inhalt verdient. */
  .nest-card-team__more { border-top: var(--rule-light) solid var(--rule); padding-top: .5rem; }
  .nest-card-team__more summary { cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: var(--text-footer); }
  .nest-card-team__tags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .nest-card-team__tags li { border: var(--rule-light) solid var(--rule); padding: 0 .4rem; }
  .nest-card-team__career,
  .nest-card-team__publications { margin: .5rem 0 0; padding-left: 1rem; display: grid; gap: .5rem; }
  .nest-card-team__period { display: block; font-weight: 700; font-size: var(--text-footer); }
  .nest-card-team__place,
  .nest-card-team__venue { display: block; font-size: var(--text-footer); }

  /* --- News ------------------------------------------------------------- */
  .nest-news { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .nest-news__item { display: grid; gap: .5rem; border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; align-content: start; }
  .nest-news__date { font-weight: 500; font-size: var(--text-footer); }
  .nest-news__title { font-size: 1.25rem; font-weight: 700; margin: 0; }
  .nest-news__teaser { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-200); }
  .nest-news__summary { margin: 0; }

  /* --- Artikel / Beitrag ------------------------------------------------ */
  .nest-article__head { display: grid; gap: 1rem; }
  .nest-article__date { font-size: var(--text-meta); font-weight: 500; }
  .nest-article__teaser { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-200); }

  /* --- Kontakt ---------------------------------------------------------- */
  .nest-contact-page { display: grid; gap: calc(var(--gutter) * 2); }
  @media (min-width: 60rem) { .nest-contact-page { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } }

  /* --- Formulare -------------------------------------------------------- */
  .nest-form { display: grid; gap: 1.25rem; max-width: 42rem; }
  .nest-field { display: grid; gap: .35rem; }
  .nest-field__label { font-weight: 700; }
  .nest-field__input, .nest-field__select, .nest-field__textarea {
    width: 100%; font: inherit; color: var(--ink); background: var(--paper);
    border: var(--rule-light) solid var(--ink); padding: .6rem .75rem;
  }
  .nest-field__textarea { min-height: 10rem; resize: vertical; }
  .nest-field--check { display: flex; gap: .6rem; align-items: flex-start; }
  .nest-field--check .nest-field__input { width: 1.25rem; height: 1.25rem; margin-top: .35rem; flex: 0 0 auto; }
  .nest-field__error { font-weight: 700; border-top: var(--rule-hair) solid var(--rule); padding-top: .2em; }
  .nest-field__hint { font-size: var(--text-footer); margin: 0; }
  .nest-form__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
  .nest-form__note { font-size: var(--text-footer); max-width: 42rem; }
  .nest-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* --- Buttons ---------------------------------------------------------- */
  .nest-button {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 1.02rem; font-weight: 700;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
    min-height: 52px; padding: .8em 1.4em;
    border: var(--rule-light) solid var(--ink); background: var(--paper); color: var(--ink);
    transition: background var(--dur-fast) var(--ease-ui),
                color var(--dur-fast) var(--ease-ui),
                border-color var(--dur-fast) var(--ease-ui);
  }
  .nest-button:hover, .nest-button:focus-visible { text-decoration: underline; }
  .nest-button--primary { background: var(--ink); color: var(--paper); }
  .nest-button--yellow { background: var(--nest-yellow); color: var(--ink); }

  /* Raum-Szene (Spec §6.8). Flach, randlos, ohne Radius und ohne Verlauf.
     Seit der Planfassung (2026-10-15) ist das Band die Bühne der Startseite:
     der Plan füllt den Schirm, die Kopfzeile trägt Namen und Maßstab wie ein
     Plan, die beiden Sätze erscheinen nacheinander als Planangabe über dem
     Blatt, und darunter steht der Einstiegskasten mit Überschrift, Vorspann und
     Tasten.

     Gelesen wird von oben nach unten, auch ohne JavaScript: die hohe, klebrige
     Bühne entsteht erst mit `data-scene-live` (und nur in einem Fenster, das
     hoch genug dafür ist) — sonst steht hier ein Blatt mit Text darunter. Der
     Unterschied ist die Fahrt, nie der Inhalt. Die Kästen tragen dieselbe
     Haarlinie wie die Planangaben der Vorlage. */
  .nest-scene {
    --scene-stage: 320vh;                        /* die Strecke der Fahrt, drei Schirme */
    --scene-inset: var(--margin);                /* Rand der Planangaben, wie `.nest-shell` */
    --scene-oben: clamp(.875rem, 2.6vh, 1.75rem); /* Rand oben, wie die Kopfzeile der Vorlage */
    --scene-hud: calc(var(--scene-oben) + 4.375rem); /* Satzoberkante: 70px unter der Kopfzeile, wie dort */
    position: relative;
  }

  .nest-scene__buehne,
  .nest-scene__klebrig,
  .nest-scene__blatt {
    position: relative;
  }

  .nest-scene__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-block-size: 88svh;
    overflow: hidden;
    background: var(--paper);
  }

  .nest-scene__still,
  .nest-scene__still img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Die Leinwand erbt die Größe des Standbilds — beim Umschalten kann deshalb
     kein Größenwechsel stattfinden. */
  .nest-scene__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Die Kopfzeile des Plans: Name links, Maßstab rechts, beides in Weiß über
     dem Blatt — wie die Planangaben der Vorlage. Sie steht auch ohne Skript da:
     das Blatt ist ein Plan, und seine Kopfzeile gehört dazu.

     `aria-hidden`: die Maßstabszahl ändert sich beim Fahren, und der Name steht
     schon in der Kopfzeile der Seite. Vorgelesen wird die Bildunterschrift. */
  .nest-scene__hud {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--scene-oben);
    inset-inline: var(--scene-inset);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 0;
    font: 400 13px/1.3 var(--font-mono);
    pointer-events: none;
  }

  /* Die beiden Sätze. Ohne Skript stehen sie im Fluss unter dem Blatt: sie sind
     Inhalt und dürfen nicht verschwinden, weil JavaScript fehlt. Erst die
     lebende Bühne legt sie als Planangabe über das Blatt und blendet sie
     nacheinander ein. `min-height` hält beide Kästen gleich hoch — der zweite
     Satz ist viel kürzer als der erste. */
  .nest-scene__saetze {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-inline: var(--scene-inset);
    margin-block-start: var(--gutter);
  }

  .nest-scene__satz,
  .nest-scene__marke,
  .nest-scene__massstab {
    background: var(--paper);
    border: var(--rule-hair) solid var(--ink);
    padding: 6px 10px;
  }

  .nest-scene__satz {
    min-height: 2.4em;                     /* beide Kästen gleich hoch — der zweite Satz ist viel kürzer */
    margin: 0;
    max-width: min(34ch, 100%);
    font: 400 clamp(13px, 1.1vw, 15px)/1.25 var(--font-mono);
  }

  /* Auf schmalen Schirmen fällt der Zusatz am Namen weg, damit die Kopfzeile
     einzeilig bleibt — wie in der Vorlage. Der Name selbst bleibt. */
  @media (max-width: 43.75rem) {
    .nest-scene__zusatz { display: none; }
    .nest-scene { --scene-hud: calc(var(--scene-oben) + 3.875rem); }
  }

  /* Der Hinweis auf die Fahrt. Er steht nur, wenn es etwas zu fahren gibt —
     ohne Skript wäre er eine Aufforderung ohne Folge. */
  .nest-scene__hinweis { display: none; }

  /* Der Einstiegskasten unter dem Blatt: die Inhalte, die vorher im gelben
     Titelblock standen. Er liegt NICHT auf dem Plan — unten links stehen die
     Treppen, der Vorplatz und die Menschen, und die gehören sichtbar. Weiß auf
     Weiß braucht eine Kante, deshalb trägt er einen Rahmen. */
  .nest-scene__einstieg {
    padding-block: clamp(1rem, 2.4vw, 1.75rem);
    padding-inline: var(--scene-inset);
  }

  .nest-scene__kasten {
    display: grid;
    gap: clamp(1rem, 2.4vw, 2rem);
    max-width: var(--measure);
    margin-inline: auto;
    background: var(--paper);
    border: var(--rule-light) solid var(--ink);
    padding: clamp(1.25rem, 3vw, 2.25rem);
  }

  /* Breit stehen Überschrift und Tasten nebeneinander: der Kasten bleibt flach,
     und das Blatt behält den größeren Teil des Fensters. */
  @media (min-width: 60rem) {
    .nest-scene__kasten {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
  }

  .nest-scene__titel { margin: 0; }
  .nest-scene__lead {
    margin: clamp(.75rem, 1.4vw, 1.125rem) 0 0;
    max-width: 46ch;
    font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
    line-height: 1.4;
  }
  .nest-scene__tasten { display: flex; flex-wrap: wrap; gap: 12px; }

  /* Die Fahrt. Ein klebriger Kasten, der höher wäre als das Fenster, könnte
     seinen Inhalt nicht zeigen — auf einem Telefon im Querformat (und in jeder
     anderen flachen Ansicht) bleibt es deshalb beim Blatt mit dem Einstieg
     darunter. `prefers-reduced-motion` nimmt dieselbe Abkürzung; die setzt
     `assets/app.js` schon beim Laden. */
  @media (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
    [data-scene-live] .nest-scene__buehne { block-size: var(--scene-stage); }

    [data-scene-live] .nest-scene__klebrig {
      position: sticky;
      inset-block-start: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      block-size: 100svh;
      overflow: hidden;
    }

    /* Das Blatt füllt seine Zeile. Nicht `cover`: das Seitenverhältnis der
       Zeile ist nicht das des Standbilds, und `cover` schnitte den Plan an.
       `contain` stellt dasselbe frei, was die Kamera rahmt. */
    [data-scene-live] .nest-scene__frame {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      max-block-size: none;
    }

    [data-scene-live] .nest-scene__still,
    [data-scene-live] .nest-scene__still img { object-fit: contain; }

    /* Der Einstieg wird während der Fahrt zur Planbeschriftung: eine flache
       Leiste unter dem Blatt statt eines Kastens mit Riesenlettern. Ohne diese
       Verdichtung frisst er zwei Drittel des Fensters (gemessen bei 1440×900:
       624px von 900), und der Plan — die Hauptsache der Bühne — schrumpfte auf
       einen 276px hohen Streifen, aus dem die Kamera nur noch einen Ausschnitt
       zeigte. Die Vorlage nimmt dieselbe Abkürzung (`.einstieg-text.kompakt`);
       sie blendet den Vorspann dabei aus, hier bleibt er stehen — kleiner, aber
       lesbar, denn er ist Inhalt und nicht Schmuck.

       Die Überschrift bleibt die `h1` der Seite; sie wird nur kleiner gesetzt
       und läuft so in EINER Zeile je Titelzeile durch.

       Die Polster sind oben knapp und unten großzügig, und das hat einen zweiten
       Grund: die Kopfzeile der Seite ist 109px hoch und steht im Fluss, die
       klebrige Bühne beginnt also erst darunter. Auf dem ersten Schirm (nichts
       gescrollt) liegt die Unterkante des Fensters deshalb 109px über der
       Unterkante der Bühne, und weil der Einstieg am Fuß der Bühne hängt, wird
       sein UNTERER Teil vom Falz abgeschnitten. Wie viel von der Überschrift zu
       sehen ist, hängt damit an dem, was unter ihr steht: je mehr Polster unter
       dem Vorspann, desto höher sitzt die Überschrift im ersten Bild. Mit diesen
       Werten endet sie rund 11px über der Fensterkante — vorher schnitt der Falz
       ihre zweite Regel an, was wie ein Fehler aussah. */
    [data-scene-live] .nest-scene__einstieg {
      padding-block: clamp(.25rem, .8vh, .5rem) clamp(.875rem, 2vh, 1.25rem);
    }

    [data-scene-live] .nest-scene__kasten {
      padding: clamp(.625rem, 1.1vw, .875rem) clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.1vw, 1.75rem);
      gap: clamp(.75rem, 1.6vw, 1.25rem);
    }

    /* Wie `.einstieg-text.kompakt h1` der Referenz: 62 % der Hero-Größe.
       Bei 1440px sind das 46,43px statt der bisherigen 27,36px. */
    [data-scene-live] .nest-scene__titel {
      font-size: calc(clamp(2rem, 5.2vw, 5rem) * .62);
    }

    [data-scene-live] .nest-scene__lead {
      margin-block-start: clamp(.375rem, .7vw, .625rem);
      max-width: 52ch;
      font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
    }

    [data-scene-live] .nest-scene__saetze {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      margin-block-start: 0;
      pointer-events: none;
    }

    /* Die Sätze stehen rechts unter dem Maßstab — wie die Planangaben, deren
       Fenster sie sind. Sie enden auf DERSELBEN Kante wie der Maßstab
       (`--scene-inset`), deshalb steht hier der Rand und nicht `0`: die Hülle
       ist absolut gesetzt und hat keinen Innenabstand mehr, an dem ein `0`
       hängen könnte. */
    [data-scene-live] .nest-scene__saetze { padding-inline: 0; }

    [data-scene-live] .nest-scene__satz {
      position: absolute;
      inset-block-start: var(--scene-hud);
      inset-inline-end: var(--scene-inset);
      opacity: 0;
      transform: translateY(-4px);
      transition:
        opacity var(--dur-s) var(--ease),
        transform var(--dur-s) var(--ease);
    }

    .nest-scene[data-scene-live] .nest-scene__satz--an { opacity: 1; transform: none; }

    [data-scene-live] .nest-scene__hinweis {
      position: absolute;
      z-index: 2;
      display: block;
      inset-block-end: var(--scene-oben);
      inset-inline-start: 50%;
      margin: 0;
      font: 400 13px/1.3 var(--font-mono);
      background: var(--paper);
      padding: 2px 8px;
      transform: translateX(-50%);
      transition: opacity var(--dur-s) var(--ease);
    }

    /* Sobald gefahren wird, hat der Hinweis seinen Dienst getan. */
    [data-scene-live][data-scene-gestartet] .nest-scene__hinweis { opacity: 0; }
  }

  @media (max-aspect-ratio: 1/1) {
    .nest-scene:not([data-scene-live]) .nest-scene__frame {
      aspect-ratio: 4 / 5;
    }
  }

  /* Die Bildunterschrift der Bühne (§8 Nr. 0). Sie liegt unter dem Rahmen, auf
     derselben Fläche wie die Bühne selbst — also ohne `--nest-muted`, das nur
     auf den fünf Flächen der Abschnitte gesetzt wird. */
  .nest-scene__caption { margin: 0; padding-block: clamp(.75rem, 1.4vw, 1.25rem); font-size: var(--text-footer); color: var(--grey-700); }

  /* --- Suche ------------------------------------------------------------ */
  .nest-search { display: grid; gap: var(--gutter); }
  .nest-search__form { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 42rem; }
  .nest-search__input { flex: 1 1 14rem; }
  .nest-search__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .nest-search__result { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; }
  .nest-search__result a { font-weight: 700; }
  .nest-search__empty { margin: 0; }

  /* --- Breadcrumb ------------------------------------------------------- */
  .nest-breadcrumb { font-size: var(--text-footer); }
  .nest-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .nest-breadcrumb__item { display: flex; gap: .5rem; }
  .nest-breadcrumb__item + .nest-breadcrumb__item::before { content: "/"; }

  /* --- Cookie-Hinweis (Ink-Fläche, gelbe Oberkante) --------------------- */
  .nest-cookie {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--ink); color: var(--paper); border-top: var(--rule-heavy) solid var(--nest-yellow);
  }
  .nest-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
  .nest-cookie__text { margin: 0; max-width: 62ch; }
  .nest-cookie__text a { color: var(--paper); }
  .nest-cookie__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
  .nest-cookie .nest-button { border-color: var(--paper); background: transparent; color: var(--paper); }
  .nest-cookie .nest-button--yellow { border-color: var(--nest-yellow); background: var(--nest-yellow); color: var(--ink); }
  /* Trenner auf der Ink-Fläche: `--grey-500` war der einzige Grauton auf Ink und
     verschwand darin. Auf Ink ist `--paper` das Gegenstück zu `--rule` auf Papier. */
  .nest-cookie__details { flex-basis: 100%; margin: .25rem 0 0; padding-top: .75rem; border-top: var(--rule-hair) solid var(--paper); }
  .nest-cookie__details p { margin: 0 0 .5rem; }
  .nest-cookie[hidden] { display: none; }

  /* --- Footer ----------------------------------------------------------- */
  .nest-footer-band { border-top: var(--rule-heavy) solid var(--rule); margin-top: var(--space-section); }
  .nest-footer__inner { display: grid; gap: calc(var(--gutter) * 1.5); padding-block: var(--gutter); }
  @media (min-width: 60rem) { .nest-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } }
  .nest-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
  .nest-footer__nav a { font-weight: 700; text-transform: uppercase; text-decoration: none; }
  .nest-footer__nav a:hover, .nest-footer__nav a:focus-visible { text-decoration: underline; }
  .nest-footer__fine { font-size: var(--text-footer); font-weight: 300; margin: 0; }
  .nest-footer__page { font-size: var(--text-footer); font-weight: 500; }
}

/* -------------------------------------------------------------- utilities --- */
@layer utilities {
  .nest-nowrap { white-space: nowrap; }
  .nest-block { display: block; }
  .nest-stack-sm { display: grid; gap: .5rem; }
  .nest-back { font-weight: 700; }
  .nest-empty { font-style: italic; }
}

/* ============================================================================
   NEST — Ergänzungen Rollout 2026 (Übersichten, Filter, Mehrspaltentext,
   Formularmeldungen, Footer-Raster). Additiv, gleiche Regeln wie oben.
   ========================================================================== */

/* ------------------------------------------------------------ components --- */
@layer components {
  /* Infobox-Notiz */
  .nest-infobox__note { margin: .875rem 0 0; }

  /* Mehrspaltiger Fließtext (Block `text`, columns 1|2|3) */
  .nest-columns-2 { column-count: 2; column-gap: var(--gutter); }
  .nest-columns-3 { column-count: 3; column-gap: var(--gutter); }
  @media (max-width: 59.99rem) { .nest-columns-2, .nest-columns-3 { column-count: 1; } }

  /* Dritte Spalte für `.nest-cols-*`-Raster */
  .nest-cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: var(--gutter); }
  @media (min-width: 60rem) { .nest-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Projektkarten-Meta */
  .nest-card-project__meta { margin: 0; }
  .nest-card-press__title { font-size: 1.25rem; font-weight: 700; margin: 0; }

  /* Filter (Projektübersicht, Skala als Achse) */
  .nest-filters { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; }
  .nest-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  .nest-filters__link { font-weight: 700; text-transform: uppercase; text-decoration: none; }
  .nest-filters__link:hover, .nest-filters__link:focus-visible { text-decoration: underline; }
  .nest-filters__link.is-active { border-bottom: var(--rule-light) solid var(--rule); }
  /* Die Archivachse ist ein Umschalter zwischen zwei Auswahlen, keine dritte
     Filterzeile: sie steht deshalb für sich, mit Abstand und einem Hinweis,
     der sagt, was das Archiv ist. */
  .nest-filters--schicht { margin-top: 1.25rem; }
  .nest-filters__hinweis { margin: .75rem 0 0; font-size: var(--text-footer); color: var(--nest-muted); max-width: 62ch; }
  /* Die Gruppe gliedert die Übersicht; der Abstand trennt die Listen, ohne
     eine Linie zu ziehen (die Zeilen des Registers haben schon eine). */
  .nest-projects__gruppe + .nest-projects__gruppe { margin-top: clamp(2rem, 4vw, 3.5rem); }

  /* Übersichts-Kopf und Suche-Trefferzahl */
  .nest-overview__head { display: grid; gap: .75rem; }
  .nest-search__count { margin: 0; font-weight: 700; }

  /* Artikel: verwandte Beiträge */
  .nest-article__related { border-top: var(--rule-heavy) solid var(--rule); padding-top: var(--gutter); }
  .nest-project__press { border-top: var(--rule-light) solid var(--rule); padding-top: var(--gutter); }

  /* Partner und Auftraggeber (Projektseite). Die Liste kommt aus den
     Sulu-Kontakten, nicht aus einer Abschrift am Projekt: Name immer, Logo
     nur, wenn im Kontakt eines hinterlegt ist. Deshalb keine feste Kachel —
     ein Eintrag ohne Logo ist trotzdem ein vollwertiger Eintrag. Die
     Unterstreichung des Verweises bleibt stehen (a, Zeile 154): sie ist hier
     das einzige Zeichen, dass ein Name anklickbar ist. */
  .nest-project__partners { border-top: var(--rule-light) solid var(--rule); padding-top: var(--gutter); }
  .nest-partners {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: calc(var(--gutter) * .75) var(--gutter);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .nest-partners__item { min-width: 0; display: grid; gap: .5rem; align-content: start; }
  .nest-partners__logo { display: block; width: auto; max-width: 9rem; height: 3rem; object-fit: contain; }
  .nest-partners__link, .nest-partners__name { font-weight: 700; overflow-wrap: anywhere; }

  /* Formularmeldungen */
  .nest-form__errors { margin: 0; padding: .75rem 1rem; border: var(--rule-light) solid var(--ink); font-weight: 700; }
  .nest-form__success { margin: 0; padding: .75rem 1rem; background: var(--nest-yellow); color: var(--ink); font-weight: 700; }

  /* Footer-Raster */
  .nest-footer__left { display: grid; gap: .75rem; align-content: start; }
  .nest-footer__contact { max-width: 24rem; }

  /* --- Zahlen (Startseite, design.md §9) -------------------------------- */
  .nest-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
  @media (min-width: 40rem) {
    .nest-figures { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  }
  .nest-stat { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; min-width: 0; }
  .nest-stat__value {
    display: block; font-size: clamp(2rem, 4.6vw, 4.25rem);
    font-weight: 700; line-height: 1; overflow-wrap: anywhere;
  }
  .nest-stat__label {
    display: block; margin-top: .5rem; font-size: var(--text-footer);
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    overflow-wrap: anywhere;
  }
  .nest-figures__note { margin: 1rem 0 0; font-size: var(--text-footer); font-style: italic; overflow-wrap: anywhere; }

  /* --- Leistungen (Startseite, design.md §9) ---------------------------- */
  .nest-services {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: calc(var(--gutter) * 1.5);
  }
  @media (min-width: 48rem) {
    .nest-services { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  }
  .nest-service { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; min-width: 0; }
  .nest-service__number { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
  .nest-service__heading { font-size: var(--text-subhead); font-weight: 700; text-transform: uppercase; margin: .75rem 0 .375rem; overflow-wrap: anywhere; }
  .nest-service__body { margin: 0; max-width: 46ch; overflow-wrap: anywhere; }

  /* --- Stimmen (Startseite, design.md §9) ------------------------------- */
  .nest-testimonials { display: grid; gap: calc(var(--gutter) * 1.5); }
  @media (min-width: 48rem) {
    .nest-testimonials { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  }
  .nest-testimonial {
    margin: 0; border-top: var(--rule-light) solid var(--rule);
    padding-top: 1rem; min-width: 0;
  }
  .nest-testimonial__quote {
    margin: 0 0 .875rem; font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 700; line-height: 1.45; overflow-wrap: anywhere;
  }
  .nest-testimonial__name { font-weight: 700; overflow-wrap: anywhere; }
  .nest-testimonial__role { display: block; overflow-wrap: anywhere; }

  /* --- Netzwerk (Startseite, design.md §9) ------------------------------ */
  .nest-network {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
  .nest-network__item { min-width: 0; }
  .nest-network__logo {
    display: grid; place-items: center; aspect-ratio: 3 / 2;
    background: var(--grey-200);
  }
  .nest-network__logo img { width: 60%; height: auto; object-fit: contain; }
  /* Die Verankerung umschließt Kästchen und Namen. Ohne diese Zeilen färbte
     der Browser den Namen blau ein und unterstriche ihn — beides gegen die
     Markenregeln (nur Ink auf Paper, keine Zierlinien). */
  .nest-network__link { display: block; color: inherit; text-decoration: none; }
  .nest-network__name { display: block; margin-top: .5rem; font-size: var(--text-footer); overflow-wrap: anywhere; }
  .nest-network__note { margin: 1rem 0 0; font-size: var(--text-footer); font-style: italic; overflow-wrap: anywhere; }

  /* --- Kontaktband (Startseite) ----------------------------------------- */
  .nest-contact-band { display: grid; gap: calc(var(--gutter) * 1.5); }
  @media (min-width: 48rem) {
    .nest-contact-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  }
  .nest-contact-band__company { margin: 0; font-size: clamp(1rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  .nest-contact-band__lines { margin: .75rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
  /* Weiß auf Gelb ist verboten, Gelb auf Ink dagegen zulässig (Markenregel).
     Die Taste selbst steht weiter unten im §8-Block: dort gilt die Regel für
     alle drei dunklen Flächen (`ink`, `dunkel`, `anthrazit`), und die
     Umriss-Taste ist dort ausgenommen — sie lebt von ihrer Kontur und bekäme
     als gelbe Fläche dieselbe Füllung wie die gefüllte Taste daneben. */
}

/* -------------------------------------------------------------- utilities --- */
@layer utilities {
  /* Skip-Link: `.nest-visually-hidden` versteckt ihn; im Fokus muss der
     Beschnitt aufgehoben werden, sonst bleibt er 1px klein. */
  .nest-skip-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    white-space: normal;
  }
}

/* ============================================================================
   NEST — Startseite, Abschnittsarchitektur (Spec §8). Die 13 Abschnitte der
   neuen Website, Abschnitt für Abschnitt aus der Vorlage `nest-website` in
   unsere Tokens übersetzt.

   Aufbau: jeder Abschnitt ist ein `<section class="nest-full nest-full--<fläche>
   nest-<name>">` mit einem `.nest-shell` darin. Die Vorlage legt ihren
   Satzspiegel (`.wrap`) JE ABSCHNITT anders aus — 5fr/7fr, 7fr/5fr, 6fr/6fr —,
   und genau das steht hier: die Regeln greifen auf `.nest-<name> .nest-shell`
   und ordnen `.nest-kopfzeile` (Maßstab + Überschrift) und den Abschnittsinhalt
   in dieses Raster. Ohne sie stünden alle Abschnitte als eine Spalte
   untereinander, und die Abschnitte sähen alle gleich aus.

   Warum die Vorlage ihr Raster pro Abschnitt stellt und nicht das Band: die
   Überschrift steht mal links und der Text rechts (`warum`, `faq`, `ueber`,
   `kontakt`), mal umgekehrt (`methode`, `massstaebe`, `belege`), mal gar nicht
   (`fuer-wen`, `werkzeuge`, `projekte`, `presse`). Das ist eine Aussage der
   Gestalt über jeden Abschnitt einzeln und keine Eigenschaft, die ein Band
   sinnvoll vererben könnte.

   Alle Maße sind die der Vorlage (`site/assets/css/site.css`); wo die CI
   abweicht, gewinnt die CI: Gelb ist `--nest-yellow` (#ffd640) statt #FFD630,
   Schwarz ist `--ink` (#231f20) statt #0F0F10. Für Text auf dunklem Grund gibt
   es in der Vorlage `--text-leise-dunkel` (#d0d3d6) und `--text-leise`
   (#4a4d50); hier treten dafür `--grey-300` und `--grey-700` ein, damit die
   Zahl der Farbtoken nicht wächst. Beide werden über `--nest-muted` angesprochen
   und richten sich nach der Fläche des Bandes — ein fester Grauton wäre auf der
   einen oder der anderen Fläche unsichtbar.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens --- */
@layer layout {
  /* Der gedämpfte Ton je Fläche. Ein Abschnitt, der ihn braucht (Bildunterschrift,
     Belegzahlen, Registerorte), spricht `--nest-muted` an und muss seine Fläche
     nicht kennen. */
  .nest-full--weiss,
  .nest-full--grund,
  .nest-full--gelb { --nest-muted: var(--grey-700); }
  .nest-full--ink,
  .nest-full--dunkel,
  .nest-full--anthrazit { --nest-muted: var(--grey-300); }
}

/* ---------------------------------------------------------------- layout --- */
@layer layout {
  /* Die Kopfzeile aller Abschnitte: Maßstab über Überschrift, gestapelt. Die
     Vorlage setzt den Maßstab nicht in die Kopfzeile, sondern als feste Anzeige
     an den Bildrand (`.hud`); bei uns gehört er zur Überschrift, damit
     `aria-labelledby` auf demselben Element liegt wie der Maßstab und die
     Überschrift den Anker trägt (Spec §5.1). */
  .nest-kopfzeile { display: grid; gap: .75rem; }

  .nest-massstab {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-footer);
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--nest-muted);
    /* Der Maßstab ist Zierrat und darf in der Kopfzeile nicht die Zeile
       bestimmen, in der die Überschrift steht. */
    line-height: 1;
  }

  /* Das „M“ vor der Zahl. Es steht in einem eigenen `<span>`, damit das
     Markenzeichen adressierbar ist, ohne die Zeichenfolge im Template zu
     zerlegen; hier trägt es nur den Abstand zur Zahl. */
  .nest-massstab__m { margin-right: .35em; }

  /* --- 1 warum: Überschrift links (stehend), Aussage rechts ------------- */
  .nest-warum .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 7rem);
  }
  /* Die Überschrift bleibt beim Scrollen stehen, solange ihr Abschnitt läuft:
     die Vorlage setzt den Abschnitt auf `position:sticky;top:96px`. */
  .nest-warum .nest-kopfzeile { grid-column: 1; position: sticky; top: 6rem; align-self: start; }
  .nest-warum__body { grid-column: 2; min-width: 0; }
  @media (max-width: 59.99rem) {
    .nest-warum .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-warum .nest-kopfzeile { grid-column: 1; position: static; }
    .nest-warum__body { grid-column: 1; }
  }

  /* --- 2 fuer-wen: Überschrift oben, drei Räume darunter ---------------- */
  .nest-fuer-wen .nest-kopfzeile { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }
  .nest-plan-raeume {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(10px, 1.2vw, 18px);
    /* Der Rahmen um die drei Räume ist der dunkle Grund, der zwischen ihnen
       stehen bleibt — kein `gap` auf weißem Papier. */
    background: var(--ink);
    padding: clamp(10px, 1.2vw, 18px);
  }
  /* `breit` ist die Spur, die wächst. Die Vorlage gibt sie dem mittleren Raum
     (Gemeinden und Verwaltung), weil dessen Beispielliste länger ist; bei uns
     entscheidet die Redaktion über `width`, und deshalb wächst die Spur, in der
     der breite Raum steht — nicht immer die zweite. Ohne `:has()` stehen die
     drei Räume gleich breit; das ist die richtige Rückfallposition, denn dann
     hat die Redaktion nichts Breiteres verlangt. */
  .nest-plan-raeume:has(> .nest-raum--breit:first-child) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); }
  .nest-plan-raeume:has(> .nest-raum--breit:nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); }
  .nest-plan-raeume:has(> .nest-raum--breit:nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); }
  /* Die `:has()`-Regeln oben sind spezifischer als eine einfache Klassenregel;
     deshalb stehen die Varianten hier noch einmal, sonst bliebe das Raster auf
     dem Telefon dreispaltig (gemessen: 84px je Raum, Seite 494px breit). */
  @media (max-width: 59.99rem) {
    .nest-plan-raeume,
    .nest-plan-raeume:has(> .nest-raum--breit:first-child),
    .nest-plan-raeume:has(> .nest-raum--breit:nth-child(2)),
    .nest-plan-raeume:has(> .nest-raum--breit:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  }

  /* --- 3 methode: Überschrift links, Vorspann rechts, Weg darunter ------ */
  .nest-methode .nest-shell,
  .nest-massstaebe .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 5vw, 6rem);
  }
  .nest-methode .nest-kopfzeile,
  .nest-massstaebe .nest-kopfzeile { grid-column: 1; }
  .nest-methode .nest-lead,
  .nest-massstaebe .nest-lead { grid-column: 2; align-self: end; margin: 0; }
  .nest-methode .nest-weg,
  .nest-methode .nest-kreislauf { grid-column: 1 / -1; }
  .nest-methode .nest-weg { margin-top: clamp(3rem, 6vw, 6rem); }
  .nest-methode .nest-kreislauf { margin-top: clamp(2.25rem, 4vw, 4rem); }
  .nest-massstaebe .nest-stufen { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 5rem); }
  @media (max-width: 59.99rem) {
    .nest-methode .nest-shell,
    .nest-massstaebe .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-methode .nest-kopfzeile, .nest-methode .nest-lead,
    .nest-massstaebe .nest-kopfzeile, .nest-massstaebe .nest-lead { grid-column: 1; }
    .nest-methode .nest-lead, .nest-massstaebe .nest-lead { align-self: start; }
  }

  /* --- 4 werkzeuge: Überschrift oben, vier Aufklapper darunter ---------- */
  .nest-werkzeuge .nest-kopfzeile { margin-bottom: clamp(2rem, 4vw, 4rem); }
  .nest-werkzeuge .nest-heading { max-width: 20ch; }

  /* --- 5 projekte: Überschrift oben, Tafel, Register, Verzeichnis ------- */
  .nest-projekte .nest-kopfzeile { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }

  /* --- 7 phase-null: links Überschrift und leerer Plan, rechts der Text - */
  .nest-phase-null .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: start;
  }
  .nest-phase-null .nest-kopfzeile { grid-column: 1; grid-row: 1; }
  .nest-phase-null .nest-leerplan { grid-column: 1; grid-row: 2; }
  .nest-phase-null__text { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  @media (max-width: 59.99rem) {
    .nest-phase-null .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-phase-null .nest-kopfzeile { grid-column: 1; grid-row: 1; }
    .nest-phase-null .nest-leerplan { grid-column: 1; grid-row: 2; }
    .nest-phase-null__text { grid-column: 1; grid-row: 3; }
  }

  /* --- 8 belege: Zitat links, Legende rechts, Partner über beide -------- */
  .nest-belege .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 6vw, 7rem);
  }
  .nest-belege__zitat { grid-column: 1; }
  .nest-legende { grid-column: 2; align-self: end; }
  .nest-partner { grid-column: 1 / -1; }
  @media (max-width: 59.99rem) {
    .nest-belege .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-belege__zitat, .nest-legende, .nest-partner { grid-column: 1; }
    .nest-legende { align-self: start; }
  }

  /* --- 10 faq: Überschrift links (stehend), Fragen rechts -------------- */
  .nest-faq .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 7rem);
  }
  .nest-faq .nest-kopfzeile { grid-column: 1; position: sticky; top: 6rem; align-self: start; }
  .nest-faq .nest-heading { font-size: clamp(1.75rem, 3.1vw, 3rem); }
  .nest-faq__liste { grid-column: 2; min-width: 0; }
  @media (max-width: 59.99rem) {
    .nest-faq .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-faq .nest-kopfzeile { position: static; }
    .nest-faq__liste { grid-column: 1; }
  }

  /* --- 11 ueber: Überschrift links, Text rechts ------------------------ */
  .nest-ueber .nest-shell {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 7rem);
  }
  .nest-ueber__text { grid-column: 2; min-width: 0; }
  @media (max-width: 59.99rem) {
    .nest-ueber .nest-shell { grid-template-columns: minmax(0, 1fr); }
    .nest-ueber__text { grid-column: 1; }
  }

  /* --- 12 kontakt ------------------------------------------------------- */
  /* Dieser Abschnitt bekommt KEIN eigenes Satzspiegel-Raster wie die anderen:
     die Vorlage stellt hier Überschrift, Vorspann und Anschrift in die eine und
     das Formular in die andere Spalte, wir haben statt des Formulars aber nur
     den einen Verweis darauf (die Maske selbst lebt auf /kontakt, Teilprojekt 4).
     Eine zweite Spalte für eine einzelne Taste wäre ein leeres Feld mit einem
     Knopf darin. Der Abschnitt läuft deshalb in einer Spalte, und die Anschrift
     teilt sich mit der Taste das Kontaktband (`.nest-contact-band`), das seine
     zwei Spalten selbst stellt. */
}

/* ------------------------------------------------------------ components --- */
@layer components {
  /* --- Gemeinsame Bausteine der Abschnitte ------------------------------ */

  /* Ziffernschrift für Jahre, Maßstäbe, Kürzel und Belegzahlen. Die Vorlage
     setzt dafür durchweg `.mono`. */
  .nest-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: .01em; }

  /* Vorspann eines Abschnitts: größer als der Fließtext, aber kein Titel. */
  .nest-lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; max-width: var(--prose); margin: 0; }

  /* Pfeil in einer Taste. Die Vorlage zeichnet ihn als Linie mit einer um 45°
     gedrehten Ecke — keine Bilddatei, keine Schrift. */
  .nest-pfeil {
    display: inline-block; width: 1.1em; height: 1px; margin-left: .6em;
    background: currentColor; position: relative; vertical-align: middle;
  }
  .nest-pfeil::after {
    content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
    border-top: var(--rule-hair) solid currentColor; border-right: var(--rule-hair) solid currentColor;
    transform: rotate(45deg);
  }

  /* Die zweite Taste: nur Umriss. Auf dunkler Fläche erbt sie die Schriftfarbe,
     damit sie nicht als gelbe Fläche neben der gefüllten Taste steht. */
  .nest-button--zweit { background: transparent; color: inherit; border-color: currentColor; }

  /* Tasten auf dunklem Grund: gefüllt gelb, sonst wären sie unsichtbar. Die
     Umriss-Taste bleibt ausgenommen — sie lebt von der Kontur. Gilt für alle
     drei dunklen Flächen, nicht nur für `ink`. */
  .nest-full--ink .nest-button:not(.nest-button--zweit),
  .nest-full--dunkel .nest-button:not(.nest-button--zweit),
  .nest-full--anthrazit .nest-button:not(.nest-button--zweit) {
    background: var(--nest-yellow); color: var(--ink); border-color: var(--nest-yellow);
  }

  /* --- Titelblock: Vorspann und Tasten der Bühne ------------------------ */
  /* Sie liegen am Titelblock und nicht in einem eigenen Band: die Bühne der
     Vorlage trägt Überschrift, Vorspann und Tasten auf DERSELBEN Fläche, und
     zwei gelbe Bänder nebeneinander verstießen gegen den Flächen-Vertrag
     (Spec §10). */
  .nest-titleblock__lead { font-size: clamp(1.0625rem, 1.45vw, 1.375rem); line-height: 1.4; max-width: 36ch; margin: clamp(.75rem, 1.4vw, 1.125rem) 0 0; }
  .nest-titleblock__tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(.875rem, 1.6vw, 1.375rem); }

  /* --- 1 warum ---------------------------------------------------------- */

  /* Die Aussage: der Satz, der den Abschnitt trägt. `text_editor` liefert ihn
     mit `<p>`; die Typografie hängt deshalb an der Hülle und der Absatz darin
     wird auf `margin: 0` gesetzt (sonst stünde ein Absatzabstand in einem
     Element, das nur diesen einen Absatz enthält). */
  .nest-aussage {
    font-weight: 700; font-size: clamp(1.625rem, 3.3vw, 3.25rem);
    line-height: 1.08; letter-spacing: -.02em; max-width: 22ch;
  }
  .nest-aussage p { margin: 0; max-width: none; }
  /* Hervorhebung als TEXT, nicht als Fläche: die eine gelbe FLÄCHE der Seite
     ist der Titelblock (Spec §10). */
  .nest-aussage mark { background: none; color: var(--nest-yellow); }

  /* Die weiße Platte in der dunklen Fläche — dieselbe Setzung wie in der
     Vorlage: die Maßkette und die drei Rollen stehen auf Papier, weil das
     Maßband eine Zeichnung ist und auf Schwarz nicht läse. */
  .nest-raum-weiss {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    background: var(--paper); color: var(--ink);
    padding: clamp(18px, 2.6vw, 36px);
  }
  .nest-masskette { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-footer); margin-bottom: 12px; }
  .nest-masskette i { flex: 1; height: 1px; background: currentColor; position: relative; }
  .nest-masskette i::before,
  .nest-masskette i:last-child::after { content: ""; position: absolute; top: -6px; height: 13px; width: 1px; background: currentColor; }
  .nest-masskette i::before { left: 0; }
  .nest-masskette i:last-child::after { right: 0; }
  .nest-masskette i:last-child::before { display: none; }

  .nest-rollen { display: grid; border-top: var(--rule-hair) solid var(--ink); }
  .nest-rollen p {
    display: grid; grid-template-columns: 56px minmax(0, 12ch) minmax(0, 1fr);
    gap: 16px 20px; align-items: center; padding: 16px 0; margin: 0;
    border-bottom: var(--rule-hair) solid var(--ink);
    max-width: none; font-size: clamp(1.125rem, 1.6vw, 1.5rem); text-align: left; hyphens: auto;
  }
  .nest-moebel { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .nest-rollen b { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-footer); overflow-wrap: anywhere; }
  /* Unterhalb von 60rem steht das Möbelzeichen neben zwei Zeilen statt neben
     dreien: das Zeichen wächst nicht mit und darf die Namen nicht quetschen. */
  @media (max-width: 59.99rem) {
    .nest-rollen p { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; }
    .nest-rollen p .nest-moebel { grid-row: 1 / 3; }
  }

  .nest-warum__schluss { margin-top: clamp(1.75rem, 4vw, 3.5rem); color: var(--nest-muted); max-width: 46ch; }
  .nest-warum__schluss p { margin: 0; max-width: none; }

  /* --- 2 fuer-wen ------------------------------------------------------ */
  .nest-raum {
    position: relative; min-width: 0;
    background: var(--paper); color: var(--ink);
    padding: clamp(22px, 2.6vw, 40px);
    display: flex; flex-direction: column; gap: 18px;
    transition: background var(--dur-fast) var(--ease-ui);
  }
  /* Der ganze Raum ist die Fläche, nicht nur die Taste: Wer mit der Maus oder
     mit der Tastatur hineinfährt, sieht, dass hier eine Anfrage steht. */
  .nest-raum:hover, .nest-raum:focus-within { background: var(--nest-yellow); }
  .nest-raum__kopf { font-size: clamp(1.625rem, 2.6vw, 2.5rem); margin: 0; line-height: 1.05; }
  .nest-raum__text p { max-width: 34ch; margin: 0; }
  .nest-raum__text p + p { margin-top: 1.1em; }
  /* Die Taste sitzt am Fuß des Raums, damit die drei Räume trotz
     unterschiedlich langer Listen auf einer Linie abschließen. */
  .nest-raum .nest-button { margin-top: auto; align-self: flex-start; }
  /* Der breite Raum nutzt seine Spur auch: sonst bliebe er eine schmale Spalte
     mit leerem Rand daneben, und der Beispielliste wäre die Breite genommen, um
     deretwillen sie breiter gestellt wurde. */
  .nest-raum--breit .nest-raum__text p { max-width: 44ch; }

  .nest-beispiele { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--ink); }
  .nest-beispiele li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: var(--rule-hair) solid var(--ink); font-size: .97rem; line-height: 1.3; }
  .nest-beispiele li span:last-child { font-family: var(--font-mono); font-size: var(--text-footer); white-space: nowrap; }

  /* --- 3 methode: der Weg durch den Plan ------------------------------- */

  /* Der Fortschritt ist Zusatz, keine Bedingung: `--p` ist ohne Skript 0, und
     bei 0 steht die ganze Linie in der Farbe des noch nicht Gegangenen. Die
     Vorlage zeichnet die Spur als Verlauf; hier tragen die beiden Farben den
     Zustand, den `assets/app.js` setzt.
     Die Hintergrundfarbe der Bögen kommt aus `--nest-weg-bg` und nicht aus
     `--grund`: der Bogen muss die Linie DAHINTER verdecken, und welche Farbe
     das ist, entscheidet die Fläche des Bandes — die Redaktion kann sie
     ändern. */
  .nest-full--weiss .nest-weg,
  .nest-full--gelb .nest-weg { --nest-weg-bg: var(--paper); }
  .nest-full--grund .nest-weg { --nest-weg-bg: var(--grund); }
  .nest-full--ink .nest-weg,
  .nest-full--dunkel .nest-weg,
  .nest-full--anthrazit .nest-weg { --nest-weg-bg: var(--ink); }

  .nest-weg {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2.5rem);
    --p: 0;
  }
  .nest-weg::before {
    content: ""; position: absolute; left: 0; right: 0; top: 19px; height: var(--rule-hair);
    background: linear-gradient(to right, var(--rule) 0 calc(var(--p) * 100%), var(--grey-300) calc(var(--p) * 100%) 100%);
  }
  .nest-weg li { position: relative; padding-top: 64px; }
  .nest-knoten {
    position: absolute; left: 0; top: 0; width: 40px; height: 40px;
    border: var(--rule-hair) solid var(--rule); background: var(--nest-weg-bg, var(--grund));
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: var(--text-footer);
    transition: background var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui);
  }
  /* Der erreichte Schritt: der Knoten färbt sich. `app.js` setzt die Klasse;
     ohne Skript bleibt sie aus und der Weg steht vollständig und ruhig. */
  .nest-weg li.nest-erreicht .nest-knoten { background: var(--nest-yellow); color: var(--ink); border-color: var(--nest-yellow); }
  /* Die Bögen zwischen den Schritten: der Weg läuft nicht gerade, er führt um
     die Ecke — die Zeichnung der Vorlage. `--nest-weg-bg` verdeckt dabei die
     gerade Linie unter dem Bogen; die Maske liegt als zweites Pseudo-Element
     über der Linie und unter dem Bogen. */
  .nest-weg li:not(:last-child)::before {
    content: ""; position: absolute; top: 19px;
    right: calc(clamp(1rem, 2.4vw, 2.5rem) / -2 - 23px);
    width: 46px; height: var(--rule-hair); background: var(--nest-weg-bg, var(--grund));
  }
  .nest-weg li:not(:last-child)::after {
    content: ""; position: absolute; top: -4px;
    right: calc(clamp(1rem, 2.4vw, 2.5rem) / -2 - 23px);
    width: 46px; height: 46px;
    border-top: var(--rule-hair) dashed var(--rule);
    border-right: var(--rule-hair) dashed var(--rule);
    border-left: var(--rule-hair) solid var(--rule);
    border-top-right-radius: 100%;
    background: var(--nest-weg-bg, var(--grund));
    pointer-events: none;
  }
  .nest-weg__kopf { font-size: clamp(1.75rem, 3vw, 2.875rem); margin: 0 0 14px; line-height: 1.05; }
  .nest-weg__text p { font-size: clamp(1rem, 1.2vw, 1.1875rem); max-width: 30ch; margin: 0; text-align: left; }
  .nest-weg__text p + p { margin-top: 1.1em; }
  /* Auf schmalen Schirmen läuft der Weg senkrecht: vier Spalten à 30ch passen
     nicht nebeneinander. Die Bögen entfallen dann — sie zeichnen eine Kurve
     zwischen zwei SPALTEN, und die gibt es nicht mehr. */
  @media (max-width: 59.99rem) {
    .nest-weg { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .nest-weg::before {
      left: 19px; right: auto; top: 0; bottom: 0; width: var(--rule-hair); height: auto;
      background: linear-gradient(to bottom, var(--rule) 0 calc(var(--p) * 100%), var(--grey-300) calc(var(--p) * 100%) 100%);
    }
    .nest-weg li { padding: 0 0 40px 64px; }
    .nest-weg li:not(:last-child)::before,
    .nest-weg li:not(:last-child)::after { display: none; }
  }

  /* --- 4 werkzeuge ------------------------------------------------------ */

  /* Der Aufklapper ist ein gemeinsamer Baustein: dieselbe Mechanik trägt die
     vier Werkzeuge, die häufigen Fragen und das Projektverzeichnis. Was hier
     steht, ist nur, was allen dreien gemeinsam ist — die Ausprägung folgt je
     Abschnitt. */
  .nest-aufklapper { border-top: var(--rule-hair) solid var(--rule); }
  .nest-aufklapper:last-of-type { border-bottom: var(--rule-hair) solid var(--rule); }
  .nest-aufklapper__kopf {
    list-style: none; cursor: pointer; display: grid;
    align-items: baseline; gap: clamp(12px, 2vw, 32px);
  }
  .nest-aufklapper__kopf::-webkit-details-marker { display: none; }
  /* Das Kreuz: zwei Striche, von denen einer beim Öffnen wegklappt. Kein
     Zeichen aus einer Schrift — die Vorlage zeichnet es, und ein „+“ aus der
     Textschrift säße nicht auf derselben Achse. */
  .nest-aufklapper__plus { position: relative; width: 28px; height: 28px; justify-self: end; align-self: center; }
  .nest-aufklapper__plus::before,
  .nest-aufklapper__plus::after {
    content: ""; position: absolute; left: 0; right: 0; top: 13px; height: var(--rule-hair);
    background: currentColor; transition: transform var(--dur-fast) var(--ease-ui);
  }
  .nest-aufklapper__plus::after { transform: rotate(90deg); }
  .nest-aufklapper[open] .nest-aufklapper__plus::after { transform: rotate(0); }
  .nest-aufklapper__inhalt > div > p:first-child { margin-top: 0; }
  .nest-aufklapper__inhalt > div > p:last-child { margin-bottom: 0; }

  /* Die vier Werkzeuge: Kürzel, Titel, Kreuz. Das Kürzel steht im geöffneten
     Werkzeug auf Gelb — das ist die einzige Stelle, an der der Abschnitt Farbe
     zeigt, und sie zeigt sie als Markierung der offenen Zeile, nicht als
     Fläche des Abschnitts. */
  .nest-aufklapper--werkzeug .nest-aufklapper__kopf { grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) 40px; padding: clamp(18px, 2.2vw, 32px) 0; }
  .nest-aufklapper__kurz { font-family: var(--font-mono); font-size: clamp(1.75rem, 3.4vw, 3.25rem); font-weight: 400; letter-spacing: -.02em; }
  .nest-aufklapper__titel { font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; }
  .nest-aufklapper__kopf:hover .nest-aufklapper__titel { text-decoration: underline; text-decoration-thickness: var(--rule-hair); }
  .nest-aufklapper--werkzeug .nest-aufklapper__inhalt {
    display: grid; grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) 40px;
    gap: clamp(12px, 2vw, 32px); padding-bottom: clamp(24px, 3vw, 48px);
  }
  /* Der Textkörper hält die Lesebreite, der 3D-Scan nicht: ein `<iframe>` in
     60 Zeichen Breite wäre ein Guckloch, und ein Scan ist ein Bild, kein Satz.
     Deshalb trägt hier jedes Kind außer dem Scan die Maßbegrenzung. */
  .nest-aufklapper--werkzeug .nest-aufklapper__inhalt > div { grid-column: 2; max-width: none; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
  .nest-aufklapper--werkzeug .nest-aufklapper__inhalt > div > :not(.nest-scan) { max-width: 60ch; }
  .nest-aufklapper--werkzeug[open] .nest-aufklapper__kurz { background: var(--nest-yellow); color: var(--ink); padding: 0 8px; justify-self: start; }
  @media (max-width: 43.99rem) {
    .nest-aufklapper--werkzeug .nest-aufklapper__kopf,
    .nest-aufklapper--werkzeug .nest-aufklapper__inhalt { grid-template-columns: minmax(0, 1fr) 32px; }
    .nest-aufklapper--werkzeug .nest-aufklapper__kurz { grid-column: 1 / -1; font-size: 1.5rem; }
    .nest-aufklapper--werkzeug .nest-aufklapper__inhalt > div { grid-column: 1 / -1; }
  }

  /* Der 3D-Scan: der Kasten trägt die Adresse, das `<iframe>` baut erst der
     Klick auf (`assets/app.js`). Bis dahin steht hier nur die Taste — kein
     fremdes Skript lädt, und der Hinweis darunter sagt warum. */
  .nest-scan { margin-top: 28px; display: grid; gap: 12px; justify-items: start; max-width: min(100%, 60rem); }
  .nest-scan iframe { width: 100%; aspect-ratio: 16 / 9; border: var(--rule-hair) solid var(--ink); background: var(--grund); display: block; order: 0; }
  .nest-scan__knopf { order: 1; }
  .nest-scan__direkt { order: 2; justify-self: start; font-size: 1rem; }
  .nest-scan__hinweis { order: 3; margin: 0; font-size: var(--text-footer); color: var(--nest-muted); max-width: 60ch; }
  .nest-scan--geladen .nest-scan__knopf { display: none; }
  /* Der Direktverweis rutscht unter den Scan, sobald er geladen ist: vorher
     führt er am Kasten vorbei, danach steht er als Fußnote darunter. */
  .nest-scan--geladen .nest-scan__direkt { order: 3; }
  .nest-scan--geladen .nest-scan__hinweis { order: 4; }

  /* --- 5 massstaebe: die fünf Stufen ------------------------------------ */

  /* Die Kante des Quadrats kommt aus dem Inhalt (`--sz`, in `rem`), der
     Schrumpffaktor aus dem Schirm (`--k`): dieselbe Stufe, zwei Größen. Fehlt
     `--sz`, bleibt das Quadrat bei der Mindestkante stehen — lieber klein als
     null. */
  .nest-stufen { list-style: none; margin: 0; padding: 0; display: grid; }
  .nest-stufe {
    display: grid;
    grid-template-columns: clamp(110px, 16vw, 260px) minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1rem, 3vw, 3.5rem); align-items: end;
    padding: clamp(16px, 2vw, 28px) 0;
    border-top: var(--rule-hair) solid var(--grey-700);
  }
  .nest-stufe:last-child { border-bottom: var(--rule-hair) solid var(--grey-700); }
  .nest-quad {
    width: calc(var(--sz, 3.5rem) * var(--k, 1)); height: calc(var(--sz, 3.5rem) * var(--k, 1));
    min-width: 44px; min-height: 44px;
    border: var(--rule-hair) solid var(--paper);
    display: grid; place-items: center; justify-self: start;
    font-size: clamp(.875rem, 1.2vw, 1.125rem);
    transition: background var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui);
  }
  /* Der Zeiger auf der Stufe färbt das Quadrat: dieselbe Geste wie im
     Abschnitt `fuer-wen`, wo der Raum gelb wird. `active` (die Filterachse der
     Projektübersicht) tut dasselbe, aber dauerhaft. */
  .nest-stufe:hover .nest-quad,
  .nest-stufe--aktiv .nest-quad { background: var(--nest-yellow); color: var(--ink); border-color: var(--nest-yellow); }
  .nest-stufe__aufgabe { font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1.12; letter-spacing: -.015em; }
  .nest-stufe__beispiel { color: var(--nest-muted); max-width: 46ch; }
  .nest-stufe__beispiel b { color: var(--paper); font-weight: 700; }
  @media (max-width: 49.99rem) {
    .nest-quad { --k: .44; }
    .nest-stufe { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
    .nest-stufe__beispiel { grid-column: 2; }
  }

  /* --- 6 projekte: Tafel, Register, Verzeichnis ------------------------- */

  /* Die Tafel steht auf Gelb, obwohl das Band anthrazit ist — sie ist die
     Ausnahme, die die Vorlage selbst setzt: ein hervorgehobenes Projekt in der
     Mitte einer dunklen Liste. `--rule` wird hier auf Ink gedreht, sonst zögen
     die Datenblattlinien die Farbe des Bandes. */
  .nest-tafel {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    background: var(--nest-yellow); color: var(--ink); --rule: var(--ink);
    margin-bottom: clamp(2.25rem, 5vw, 4.5rem);
  }
  .nest-tafel__haupt { padding: clamp(24px, 3.4vw, 56px); display: grid; gap: 18px; align-content: start; }
  /* `h1` steht hier, weil die Detailseite ihre Überschrift erster Ordnung in
     der Tafel trägt — dort, wo die Vorlage ihre `h3` hat. Beide sind derselbe
     Satz; ein eigener Titelblock darüber wäre die zweite gelbe Fläche. */
  .nest-tafel h1, .nest-tafel h3 { font-size: clamp(2.125rem, 4.6vw, 4.5rem); line-height: .98; margin: 0; }
  .nest-tafel__text p { margin: 0; max-width: 54ch; }
  .nest-tafel__text p + p { margin-top: 1.1em; }
  .nest-tafel__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
  /* Auf der gelben Tafel ist die Taste schwarz gefüllt — die Regel für dunkle
     Bänder würde sie gelb auf gelb setzen. */
  .nest-tafel .nest-button { background: var(--ink); color: var(--nest-yellow); border-color: var(--ink); }
  .nest-tafel__datenblatt {
    background: var(--ink); color: var(--paper); --rule: var(--paper);
    padding: clamp(24px, 3vw, 48px); align-content: start;
  }
  .nest-tafel__datenblatt dl { display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); margin: 0; }
  .nest-tafel__datenblatt dt,
  .nest-tafel__datenblatt dd {
    margin: 0; padding: 12px 0; border-bottom: var(--rule-hair) solid var(--grey-700);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  }
  .nest-tafel__datenblatt dt { font-family: var(--font-mono); font-size: var(--text-footer); color: var(--grey-300); padding-top: 15px; }

  .nest-register { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--grey-700); }
  .nest-register li {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 150px) minmax(0, 4fr) minmax(0, 7fr) auto;
    gap: clamp(12px, 2.4vw, 40px); align-items: baseline;
    padding: clamp(18px, 2vw, 28px) 0;
    border-bottom: var(--rule-hair) solid var(--grey-700);
  }
  .nest-register__jahr { font-size: var(--text-footer); color: var(--grey-300); }
  .nest-register h3 { font-size: clamp(1.5rem, 2.4vw, 2.375rem); margin: 0; }
  /* Die Zeilen des Registers führen auf die Detailseiten; die Unterstreichung
     kommt mit dem Zeiger, wie im Verzeichnis. */
  .nest-register h3 a { text-decoration: none; }
  .nest-register h3 a:hover, .nest-register h3 a:focus-visible { text-decoration: underline; }
  .nest-register__ort { display: block; font-size: var(--text-footer); color: var(--grey-300); font-weight: 400; letter-spacing: 0; margin-top: 6px; }
  .nest-register__text p { color: var(--grey-200); max-width: 54ch; margin: 0; }
  .nest-register__text p + p { margin-top: 1.1em; }
  .nest-register__gr { font-size: var(--text-footer); border: var(--rule-hair) solid var(--grey-700); padding: 3px 8px; white-space: nowrap; }
  @media (max-width: 62.49rem) {
    .nest-tafel { grid-template-columns: minmax(0, 1fr); }
    .nest-register li { grid-template-columns: 70px minmax(0, 1fr); gap: 8px 16px; }
    .nest-register__text { grid-column: 2; }
    /* Die Gattung fällt auf dem Telefon weg: sie wiederholt, was die
       Überschrift schon sagt, und ist die vierte Spalte einer Zeile, die dort
       nur zwei hat. */
    .nest-register__gr { display: none; }
  }

  /* Das Verzeichnis heißt in der Vorlage „Alle Projekte ansehen“ und ist eine
     Taste, kein Aufklapper mit Kreuz: es führt zu einer Liste, und die Liste
     ist lang. Die Form bleibt der gemeinsame Baustein, die Ausprägung ist die
     der Vorlage — ein gerahmter Knopf in Gelb. */
  .nest-alle { margin-top: clamp(1.75rem, 3vw, 3rem); }
  /* Keine Ober- und Unterlinie: die Taste bringt ihren eigenen Rahmen mit, und
     eine Linie darüber und darunter machte aus dem Knopf eine Tabellenzeile. */
  .nest-alle.nest-aufklapper, .nest-alle.nest-aufklapper:last-of-type { border: 0; }
  .nest-alle .nest-aufklapper__kopf {
    display: inline-flex; align-items: center; gap: 12px;
    font-weight: 700; font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    border: var(--rule-hair) solid var(--nest-yellow); padding: 14px 22px; color: var(--nest-yellow);
  }
  /* Der Titel erbt die Größe der Taste: `.nest-aufklapper__titel` ist auf die
     Werkzeugzeile hin gesetzt und wäre im Verzeichnis die doppelte Schrift. */
  .nest-alle .nest-aufklapper__titel { font-size: inherit; letter-spacing: inherit; }
  .nest-alle .nest-aufklapper__kopf:hover,
  .nest-alle[open] .nest-aufklapper__kopf { background: var(--nest-yellow); color: var(--ink); }
  .nest-alle .nest-aufklapper__plus { width: 18px; height: 18px; }
  .nest-alle .nest-aufklapper__plus::before,
  .nest-alle .nest-aufklapper__plus::after { top: 8px; }
  .nest-alle__liste { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
  .nest-alle__kopf { font-weight: 400; font-size: var(--text-footer); color: var(--grey-300); margin: 0 0 12px; }
  .nest-alle__liste ul { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
  .nest-alle__liste li { padding: 7px 0; border-bottom: var(--rule-hair) solid var(--grey-700); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .nest-alle__liste li span:last-child { font-family: var(--font-mono); font-size: var(--text-footer); color: var(--grey-300); white-space: nowrap; padding-top: 3px; }
  /* Die Zeilen des Verzeichnisses führen auf die Detailseiten — seit das
     Verzeichnis aus den Datensätzen kommt, sind es Verweise. 24 dauerhaft
     unterstrichene Zeilen wären Lärm; die Unterstreichung kommt mit dem Zeiger. */
  .nest-alle__liste li a { text-decoration: none; }
  .nest-alle__liste li a:hover, .nest-alle__liste li a:focus-visible { text-decoration: underline; }
  @media (max-width: 62.49rem) { .nest-alle__liste { grid-template-columns: minmax(0, 1fr); } }

  /* --- 7 phase-null: der leere Plan ------------------------------------- */

  /* Der leere Grundriss ist Zierrat: dieselbe Zeichnung wie die Bühne, nur
     ohne Eintragung. Er ist keine Bilddatei, sondern ein SVG im Template, und
     er zeichnet mit der Schriftfarbe seines Bandes (`currentColor`) — auf einer
     anderen Fläche stimmt er sich damit selbst ab. Das Weiß der Aussparungen
     kommt aus `--paper`: es ist der Grundriss-Rand, nicht die Bandfläche. */
  .nest-leerplan { margin: clamp(1.5rem, 3vw, 3rem) 0 0; max-width: 380px; }
  .nest-leerplan svg { width: 100%; height: auto; }
  .nest-leerplan figcaption { margin-top: 10px; font-size: var(--text-footer); font-style: normal; color: var(--nest-muted); }
  .nest-phase-null__text p { margin: 0; }
  .nest-phase-null__text p + p { margin-top: 1.1em; }
  .nest-phase-null__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

  /* --- 8 belege --------------------------------------------------------- */

  .nest-belege__zitat blockquote {
    margin: 0;
    font-weight: 700; font-size: clamp(1.75rem, 3.8vw, 3.75rem);
    line-height: 1.05; letter-spacing: -.025em; text-wrap: balance;
    hyphens: auto; overflow-wrap: anywhere;
  }
  .nest-belege__zitat cite {
    display: block; margin-top: 24px;
    font: 300 clamp(1rem, 1.3vw, 1.1875rem) / 1.4 var(--font-sans);
    letter-spacing: 0; font-style: normal;
  }

  /* Die Legende: Name, gepunktete Linie, Zahl. Die Linie ist ein Element und
     kein `border-bottom` am Listeneintrag, weil sie zwischen den beiden
     Spalten stehen muss und nicht darunter. */
  .nest-legende { list-style: none; margin: 0; padding: 0; }
  .nest-legende li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: var(--rule-hair) solid var(--rule); font-size: clamp(1rem, 1.3vw, 1.1875rem); }
  .nest-legende__linie { flex: 1; min-width: 20px; border-bottom: var(--rule-hair) dotted var(--rule); transform: translateY(-4px); }
  .nest-legende__wert { font-size: var(--text-footer); font-weight: 400; text-align: right; white-space: nowrap; }

  .nest-partner {
    margin-top: clamp(2.25rem, 5vw, 5rem); padding-top: 24px;
    border-top: var(--rule-hair) solid var(--rule);
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px;
  }
  .nest-partner h2 { font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -.015em; margin: 0; }
  @media (max-width: 59.99rem) { .nest-partner { grid-template-columns: minmax(0, 1fr); } }

  /* --- 9 presse --------------------------------------------------------- */

  .nest-presse .nest-kopfzeile { margin-bottom: clamp(1.75rem, 4vw, 3.5rem); }
  .nest-presse__liste { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--rule); }
  .nest-presse__liste li {
    display: grid;
    grid-template-columns: clamp(110px, 12vw, 190px) minmax(0, 3fr) minmax(0, 8fr);
    gap: clamp(12px, 2.4vw, 40px); align-items: baseline;
    padding: 18px 0; border-bottom: var(--rule-hair) solid var(--rule);
  }
  .nest-presse__datum { font-size: var(--text-footer); }
  .nest-presse__medium { font-weight: 700; }
  /* Der Titel unterstreicht sich beim Zeigen von links nach rechts, statt
     unterstrichen dazustehen: in einer Liste aus sieben Zeilen wären sieben
     Unterstriche eine zweite Linienführung neben der ersten. */
  .nest-presse__titel a {
    text-decoration: none;
    background: linear-gradient(var(--rule), var(--rule)) 0 100% / 0 var(--rule-hair) no-repeat;
    transition: background-size var(--dur-fast) var(--ease-ui);
  }
  .nest-presse__titel a:hover, .nest-presse__titel a:focus-visible { background-size: 100% var(--rule-hair); }
  .nest-presse__note { margin: 1.5rem 0 0; font-size: var(--text-footer); color: var(--nest-muted); max-width: var(--prose); }
  @media (max-width: 49.99rem) { .nest-presse__liste li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

  /* --- 10 faq ----------------------------------------------------------- */

  .nest-faq__item { padding: 0; }
  .nest-faq__frage {
    grid-template-columns: minmax(0, 1fr); position: relative;
    font-weight: 700; font-size: clamp(1.1875rem, 1.8vw, 1.625rem);
    letter-spacing: -.015em; line-height: 1.2;
    padding: 22px 44px 22px 0;
    hyphens: auto; overflow-wrap: anywhere;
  }
  /* Der Winkel statt eines Kreuzes: die Vorlage unterscheidet die beiden
     Bausteine auch zeichnerisch — das Werkzeug öffnet sich mit einem Kreuz,
     die Frage mit einem Pfeil. */
  .nest-faq__frage::after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 12px; height: 12px;
    border-right: var(--rule-hair) solid var(--rule); border-bottom: var(--rule-hair) solid var(--rule);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-ui);
  }
  .nest-faq__item[open] .nest-faq__frage::after { transform: translateY(-30%) rotate(-135deg); }
  .nest-faq__frage:hover { text-decoration: underline; text-decoration-thickness: var(--rule-hair); }
  .nest-faq__antwort { padding: 0 0 26px; max-width: 58ch; }
  .nest-faq__antwort p:last-child { margin-bottom: 0; }
  .nest-faq__nachtrag { margin: 24px 0 0; color: var(--nest-muted); font-size: .95em; max-width: 58ch; }

  /* --- 11 ueber --------------------------------------------------------- */

  .nest-ueber__text p { margin: 0; }
  .nest-ueber__text p + p { margin-top: 1.1em; }
  /* Die Haltung: der Satz, der die Haltung des Hauses beschreibt, abgesetzt
     durch eine Oberlinie und Anzeigegröße. Sie ist eine eigene Eigenschaft des
     Abschnitts und kein `<strong>` im Fließtext — sonst entschiede die
     Redaktion mit Markup über die Gestalt. */
  .nest-haltung {
    margin-top: clamp(1.75rem, 3vw, 2.75rem); padding-top: 24px;
    border-top: var(--rule-hair) solid var(--rule);
    font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.875rem);
    line-height: 1.2; letter-spacing: -.015em; max-width: 30ch;
  }

  /* --- Großansicht der Bilder -------------------------------------------
     Der Verweis trägt das Bild; die Großansicht entsteht erst im Klick als
     `<dialog>` mit `showModal()` (initLightbox in assets/app.js). Der Grund
     ist `::backdrop`, keine zweite Fläche im Markup.

     `[open]` ist nicht Zierde, sondern nötig: ein `display` des Autors auf
     `.nest-lightbox` ohne `[open]` schlüge die Vorgabe des Browsers
     (`dialog:not([open]) { display: none }`), und der Kasten stünde vom
     ersten Anstrich an offen im Weg.

     Die Regeln des Hauses gelten auch hier: keine Rundung, kein Schatten,
     kein Verlauf. Die Abgrenzung leistet allein der Kontrast — Papier auf
     Ink. */
  .nest-gallery__link { display: block; cursor: zoom-in; }

  .nest-lightbox[open] {
    display: grid; justify-items: center; gap: 1rem;
    border: 0; padding: 0; background: none; overflow: visible;
  }
  .nest-lightbox::backdrop { background: var(--ink); }
  /* Zwei Fassungen desselben Maßes: `dvh` folgt der eingeblendeten Leiste auf
     dem Telefon, `vh` bleibt für Browser ohne `dvh`. */
  .nest-lightbox__bild { display: block; max-width: 92vw; max-height: 84vh; max-height: 84dvh; object-fit: contain; }
  .nest-lightbox__text { margin: 0; max-width: 60ch; color: var(--paper); font-size: var(--text-footer); line-height: 1.4; text-align: center; }
  .nest-lightbox__text[hidden] { display: none; }
  .nest-lightbox__schliessen {
    position: fixed; top: 0; right: 0;
    width: 3rem; height: 3rem; border: 0; padding: 0;
    background: var(--nest-yellow); color: var(--ink);
    font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer;
  }
  .nest-lightbox__schliessen:focus-visible { outline: var(--rule-light) solid var(--paper); outline-offset: -6px; }

  /* --- Einblenden: bewusst NICHT portiert ------------------------------- */
  /* Die Vorlage blendet fast jeden Block beim Scrollen ein (`@keyframes`-frei:
     `.js .rv { opacity: 0; transform: translateY(18px) }`). Hier fehlt sie, und
     zwar aus einem Grund, der mehr wiegt als die Bewegung: `opacity: 0` muss
     VOR dem ersten Anstrich gesetzt sein, sonst blitzt der Inhalt auf und
     verschwindet wieder. Das geht nur mit einem Skript im `<head>`, das `.js`
     an `<html>` hängt — und fällt dieses Skript oder das Modul aus, bleibt der
     Inhalt dauerhaft unsichtbar. Für einen reinen Zusatz ist das der falsche
     Handel. Kein §8-Block trägt deshalb einen `rv`-Haken: die Abschnitte stehen
     still, und eine spätere Teilaufgabe kann das Einblenden nachrüsten, wenn
     sie es für die ganze Website entscheidet — nicht abschnittsweise. */

  @media (prefers-reduced-motion: reduce) {
    .nest-raum, .nest-aufklapper__plus::before, .nest-aufklapper__plus::after,
    .nest-knoten, .nest-quad, .nest-faq__frage::after,
    .nest-presse__titel a { transition: none !important; }
  }
}