/* ══ Die Startseite ═════════════════════════════════════════════════════════════
   Stil der Startseite. Die Unterseiten liegen in unterseiten.css; beide teilen
   Schriften, Bilder und Zeichnungen und sind gleich aufgebaut.

   Der Aufbau beginnt in der ersten Zeile: Die Kaskade ist benannt. In Fassung 6
   hing die halbe Gestaltung an der Reihenfolge zweier <link>-Zeilen; sieben
   !important-Regeln, ein toter Weichzeichner und ein zweiter Dunkelmodus waren
   die Folge. Mit @layer schlägt die Schale die Seite, ohne dass jemand lauter
   werden muss.
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Atkinson Next"; src: url("fonts/AtkinsonHyperlegibleNext-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("fonts/AtkinsonHyperlegibleMono-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* inherits: true, weil die Füllung der Kette auf einem Pseudoelement gezeichnet wird:
   mit inherits:false stünde dort immer der Anfangswert 100 %. */
@property --fuellung { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

@layer seite, schale, effekt;

/* ───── Schicht 1: die Seite ───── */
@layer seite {
  /* Entwurf 6 · „Ins Netz hinein“
     Eine Idee trägt die Seite: Die Logo-Kugel ist ein Netzplan; beim Scrollen fliegt man hinein,
     bis die Mitte „Ihr Betrieb“ den Bildschirm füllt. Alles danach entfaltet sich aus dieser Mitte.
     Kein JavaScript. Grundzustand ist der fertige Zustand; Bewegung nur unter @supports und ohne
     Wunsch nach reduzierter Bewegung. Farben aus dem Logo, als OKLCH-Werte. */


  :root {
    color-scheme: light dark;
    --papier: oklch(97.2% 0.004 95);
    --flaeche: oklch(93.5% 0.006 95);
    --tinte: oklch(24% 0.008 250);          /* entspricht etwa #2b2f33 */
    --nacht: oklch(19% 0.01 250);           /* die Mitte: Ihr Betrieb */
    --nacht-text: oklch(95% 0.004 95);
    --grau: oklch(44% 0.006 250);           /* Logo-Grau #515355 */
    --linie: oklch(85% 0.006 95);
    --it: oklch(65% 0.075 228);   --it-ton: oklch(45% 0.07 228);   --it-hell: oklch(78% 0.07 228);
    --pz: oklch(73% 0.13 42);     --pz-ton: oklch(50% 0.12 40);    --pz-hell: oklch(82% 0.1 42);
    --ha: oklch(75% 0.14 132);    --ha-ton: oklch(48% 0.11 132);   --ha-hell: oklch(84% 0.12 132);
    --sans: "Atkinson Next", system-ui, sans-serif;
    --mono: "Atkinson Mono", ui-monospace, monospace;
    --rand: clamp(1rem, 4.5vw, 3rem);
    --breite: 84rem;
    --weich: cubic-bezier(.16, 1, .3, 1);
  }
  /* Dunkel: nach Systemeinstellung, es sei denn, jemand hat im Fuß hell gewählt. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papier: oklch(17% 0.008 250); --flaeche: oklch(21% 0.008 250); --tinte: oklch(93% 0.004 95);
      --nacht: oklch(12% 0.008 250); --grau: oklch(76% 0.006 250); --linie: oklch(32% 0.008 250);
      --it-ton: oklch(76% 0.08 228); --pz-ton: oklch(80% 0.11 42); --ha-ton: oklch(82% 0.13 132);
    }
  }
  /* Dunkel, von Hand gewählt */
  :root[data-theme="dark"] {
      --papier: oklch(17% 0.008 250); --flaeche: oklch(21% 0.008 250); --tinte: oklch(93% 0.004 95);
      --nacht: oklch(12% 0.008 250); --grau: oklch(76% 0.006 250); --linie: oklch(32% 0.008 250);
      --it-ton: oklch(76% 0.08 228); --pz-ton: oklch(80% 0.11 42); --ha-ton: oklch(82% 0.13 132);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: oklch(88% 0.1 95); color: oklch(20% 0.01 250); }
  h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  .innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
  .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 20; background: var(--tinte); color: var(--papier); padding: 0.6rem 1rem; }
  .sprung:focus { top: 0.75rem; }
  .leise { color: var(--grau); }
  .gross { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem); }
  .gross span { display: block; font-weight: 300; }
  .lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.5; max-width: 38ch; }


  .marke img { display: block; height: 36px; width: auto; }

  .kopf nav { display: flex; gap: clamp(0.75rem, 2.5vw, 2rem); font-weight: 600; font-size: 0.95rem; }
  .kopf nav a { text-decoration: none; padding: 0.5rem 0; }
  .kopf nav a:hover { text-decoration: underline; }
  @media (max-width: 40rem) {
    .kopf { flex-wrap: wrap; row-gap: 0.25rem; }
    .kopf nav { width: 100%; gap: 1.1rem; font-size: 0.92rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
    .kopf nav::-webkit-scrollbar { display: none; }
    .kopf nav a { flex: 0 0 auto; }
  }

  /* Knöpfe */
  .knopf { display: inline-flex; align-items: center; min-height: 52px; padding: 0.75rem 1.4rem; background: var(--tinte); color: var(--papier);
    font-weight: 700; text-decoration: none; border-radius: 999px; transition: transform 200ms var(--weich), box-shadow 200ms ease; }
  .knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px oklch(20% 0.01 250 / 0.6); }
  .knopf-hell { background: var(--nacht-text); color: var(--nacht); }
  .aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }
  .aktion .leise a { white-space: nowrap; }

  /* ───────── 1 · Einstieg ───────── */
  .buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem;
    max-width: var(--breite); margin: 0 auto; padding: clamp(2rem, 6vh, 5rem) var(--rand); min-height: min(calc(100svh - 61px), 56rem); }
  .flug h1 { font-size: clamp(3rem, 1.6rem + 6vw, 6rem); letter-spacing: -0.035em; margin-bottom: 1.5rem; }
  .flug-kugel svg { display: block; width: 100%; height: auto; overflow: visible; }
  .flug-mitte, .scroll-hinweis { display: none; }
  /* Netz der Kugel (aus tools/zeichnungen.py) */
  .kugel .kugel-rest { fill: var(--grau); opacity: 0.85; }
  .kugel .kw-it, .kugel .kki-it { fill: var(--it); } .kugel .kw-pz, .kugel .kki-pz { fill: var(--pz); } .kugel .kw-ha, .kugel .kki-ha { fill: var(--ha); }
  .kugel .kb-it { fill: var(--it-hell); } .kugel .kb-pz { fill: var(--pz-hell); } .kugel .kb-ha { fill: var(--ha-hell); }
  .kugel .km { fill: var(--nacht); }
  .netz-it { --nf: var(--it-ton); } .netz-pz { --nf: var(--pz-ton); } .netz-ha { --nf: var(--ha-ton); }
  .netz .nl { fill: none; stroke: var(--nf); stroke-width: 7; stroke-linecap: round; }
  .netz .nl-stamm { stroke-width: 12; }
  .netz .np { fill: var(--papier); stroke: var(--nf); stroke-width: 7; }
  .netz .ns-ki { font: 700 40px var(--mono); text-anchor: middle; fill: oklch(20% 0.01 250); }
  .schild rect { fill: var(--papier); stroke: var(--nf); stroke-width: 5; }
  .schild text { font: 700 36px var(--mono); text-anchor: middle; fill: var(--tinte); }
  .netz-ziel { cursor: pointer; }
  .netz-ziel:hover .schild rect, .netz-ziel:focus-visible .schild rect { fill: var(--nf); }
  .netz-ziel:hover .schild text, .netz-ziel:focus-visible .schild text { fill: var(--papier); }
  /* Die Trefferfläche ist das ganze Feldnetz, nicht nur das Schild: dann soll auch das ganze
     Netz antworten, sonst bewegt man die Maus über eine Fläche, die scheinbar nichts tut. */
  .netz-ziel:hover .netz .nl, .netz-ziel:focus-visible .netz .nl { stroke-width: 11; }
  .netz-ziel:hover .netz .nl-stamm, .netz-ziel:focus-visible .netz .nl-stamm { stroke-width: 16; }
  .netz-ziel:hover .netz .np, .netz-ziel:focus-visible .netz .np { fill: var(--nf); }
  .netz-ziel:hover .netz .km, .netz-ziel:focus-visible .netz .km { fill: var(--nf); }
  .mitte { transform-box: fill-box; transform-origin: 50% 50%; }
  .mitte .km { fill: var(--nacht); }
  .mitte .ns-mitte { font: 750 44px var(--sans); text-anchor: middle; fill: var(--nacht-text); }
  @media (max-width: 56rem) {
    .buehne { grid-template-columns: 1fr; min-height: auto; }
    .flug-kugel { max-width: 34rem; justify-self: center; width: 100%; }
  }

  /* Die Signatur: hinein in die Mitte. Nur mit Scroll-Zeitleisten und ohne reduzierte Bewegung.
     Ablauf über eine Bildschirmhöhe Scrollweg: Text geht (0–14 %), Feldschilder gehen (0–22 %),
     die Kugel wächst beschleunigt bis die Mitte den Schirm deckt (0–88 %), „Ihr Betrieb“ wächst mit
     und weicht erst bei 40–55 % dem Satz, der auf dem dunklen Sechseck erscheint (50–66 %). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 56.01rem) {
      .flug { height: 185svh; view-timeline: --flug block; }
      .buehne { position: sticky; top: 61px; height: calc(100svh - 61px); min-height: 0; overflow: hidden; max-width: none; padding-inline: max(var(--rand), (100vw - var(--breite)) / 2 + var(--rand)); }
      .flug-kugel svg { transform-origin: 45.2% 50.8%; animation: hinein linear both; animation-timeline: --flug; animation-range: contain 3% contain 88%; }
      .flug-text .these { display: none; }
      .flug-text { animation: weg linear both; animation-timeline: --flug; animation-range: contain 2% contain 9%; }
      .flug .schild, .flug .ns-ki { animation: weg-leise linear both; animation-timeline: --flug; animation-range: contain 0% contain 22%; }
      .flug .ns-mitte { animation: weg-leise linear both; animation-timeline: --flug; animation-range: contain 40% contain 48%; }
      .flug-mitte { display: grid; place-items: center; position: absolute; inset: 0; margin: 0; padding: var(--rand); text-align: center; pointer-events: none;
        color: var(--nacht-text); font-size: clamp(2.4rem, 1rem + 4.5vw, 5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
      .flug-mitte::before { content: ""; position: absolute; inset: 0; background: var(--nacht); animation: auf linear both; animation-timeline: --flug; animation-range: contain 74% contain 90%; }
      .flug-mitte span { position: relative; max-width: min(14ch, 70vw); animation: auf linear both; animation-timeline: --flug; animation-range: contain 58% contain 70%; }
      .flug-mitte b { font-weight: 800; }
      .scroll-hinweis { display: block; position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; margin: 0; font: 600 0.8rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau);
        animation: weg linear both; animation-timeline: --flug; animation-range: contain 2% contain 6%; }
      .felder { margin-top: -1px; padding-top: clamp(1.5rem, 4vh, 3rem); }
      .flug .sprung-flug { display: block; }
    }
  }
  @keyframes hinein {
    0% { transform: translateX(0) scale(1); }
    45% { transform: translateX(-12vw) scale(4); }
    75% { transform: translateX(-21vw) scale(11); }
    100% { transform: translateX(-24vw) scale(34); }
  }
  @keyframes weg { to { opacity: 0; transform: translateY(-3rem); } }
  @keyframes auf { from { opacity: 0; } }
  @keyframes weg-leise { to { opacity: 0; } }
  .sprung-flug { display: none; }

  /* ───────── 2 · Felder: auf der Mitte, dunkel ───────── */
  .felder { background: var(--nacht); color: var(--nacht-text); padding: clamp(4rem, 10vh, 8rem) 0 clamp(5rem, 12vh, 9rem); }
  .felder .gross span { color: oklch(78% 0.006 250); }
  .waben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(3rem, 7vh, 5rem); }
  .feld { --f: var(--it); --fh: var(--it-hell); container-type: inline-size; }
  .feld[data-feld="pz"] { --f: var(--pz); --fh: var(--pz-hell); }
  .feld[data-feld="ha"] { --f: var(--ha); --fh: var(--ha-hell); }
  .feld:nth-child(2) { margin-top: clamp(0rem, 6vw, 5rem); }
  .wabe-gross { width: min(11rem, 60%); aspect-ratio: 1 / 1.1547; background: var(--f); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display: grid; place-items: center; margin-bottom: 1.75rem; transition: transform 400ms var(--weich); }
  .wabe-gross span { font: 700 clamp(1rem, 0.9rem + 0.6vw, 1.25rem) var(--mono); color: oklch(20% 0.01 250); }
  .feld:hover .wabe-gross { transform: rotate(-6deg) scale(1.04); }
  .feld h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1rem; }
  .feld p { color: oklch(86% 0.005 95); max-width: 40ch; }
  .feld .ki { margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--f); color: oklch(90% 0.005 95); }
  .feld .beweis { margin-top: 1.25rem; font-size: 0.95rem; color: var(--fh); }
  .feld .beweis a { color: var(--nacht-text); font-weight: 700; }
  @media (max-width: 56rem) { .waben { grid-template-columns: 1fr; } .feld:nth-child(2) { margin-top: 0; } .wabe-gross { width: 7.5rem; } }

  /* ───────── 3 · Weg: eine Wabe füllt sich ───────── */
  .weg { padding: clamp(5rem, 12vh, 9rem) 0; }
  .weg-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .weg-kopf { position: sticky; top: 7rem; }
  .weg-kopf p { margin-top: 1.25rem; max-width: 30ch; color: var(--grau); font-size: 1.15rem; }
  .fortschritt { --fuellung: 100%; margin-top: 2.5rem; width: 9rem; aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(to top, var(--tinte) var(--fuellung), var(--flaeche) var(--fuellung)); }
  .schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  .schritte > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; padding: 2.25rem 0; border-top: 1px solid var(--linie); }
  .schritte > li:last-child { border-bottom: 1px solid var(--linie); }
  .schritte .nr { grid-row: span 2; font: 700 1rem var(--mono); color: var(--grau); padding-top: 0.35rem; }
  .schritte h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
  .schritte p { max-width: 46ch; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .weg { view-timeline: --weg block; }
      .fortschritt { animation: fuellen linear both; animation-timeline: --weg; animation-range: entry 60% exit 40%; }
    }
  }
  @keyframes fuellen { from { --fuellung: 0%; } to { --fuellung: 100%; } }
  @media (max-width: 56rem) { .weg-raster { grid-template-columns: 1fr; } .weg-kopf { position: static; } .fortschritt { display: none; } }

  /* ───────── 4 · Zuhause: Grundriss mit Szenen ───────── */
  .zuhause { background: var(--flaeche); padding: clamp(5rem, 12vh, 9rem) 0; }
  .zuhause .lead { margin-top: 1.25rem; max-width: 60ch; font-size: 1.1rem; }
  .marke-beispiel { display: inline-block; font: 600 0.8rem var(--mono); border: 1.5px dashed var(--grau); padding: 0 0.4rem; margin-right: 0.4rem; vertical-align: 0.15em; color: var(--grau); }
  .szenen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-areas: "wahl wahl" "plan text"; gap: 1.5rem clamp(2rem, 4vw, 4rem); margin-top: 2.5rem; align-items: start; }
  .wahl { grid-area: wahl; display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
  .wahl label { position: relative; }
  .wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .wahl span { display: inline-block; padding: 0.65rem 1rem; border: 1.5px solid var(--tinte); border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: background 200ms ease, color 200ms ease; }
  .wahl input:checked + span { background: var(--tinte); color: var(--papier); }
  .wahl input:focus-visible + span { outline: 3px solid var(--tinte); outline-offset: 3px; }
  .plan { grid-area: plan; margin: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; padding: clamp(0.75rem, 2vw, 1.5rem); }
  .plan svg { display: block; width: 100%; height: auto; }
  .r { fill: var(--papier); stroke: var(--tinte); stroke-width: 3; transition: fill 400ms var(--weich); }
  .r-dach { stroke-dasharray: 8 7; }
  .namen text { font: 600 15px var(--sans); fill: var(--grau); }
  .hinweis { font: 700 14px var(--mono); fill: var(--tinte); }
  .s { opacity: 0; transition: opacity 300ms ease; }
  .licht { fill: oklch(90% 0.13 95); stroke: var(--tinte); stroke-width: 2; }
  .tuer-offen, .fenster { stroke: var(--tinte); stroke-width: 8; stroke-linecap: round; }
  .uhr { fill: var(--papier); stroke: var(--tinte); stroke-width: 3; } .zeiger { stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; }
  .vorschlag { fill: color-mix(in oklch, var(--ha) 25%, transparent); stroke: var(--ha-ton); stroke-width: 2; stroke-dasharray: 6 5; }
  .szene-text { grid-area: text; }
  .szene-text .t { display: none; }
  .szene-text h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1rem; }
  .szene-text .werkzeug { margin-top: 1rem; font: 600 0.9rem var(--mono); color: var(--grau); }
  /* Szene wählen: Grundriss und Text folgen */
  .szenen:has(#sz-nacht:checked) :is(.s-nacht) { opacity: 1; }
  .szenen:has(#sz-nacht:checked) .t-nacht { display: block; }
  .szenen:has(#sz-nacht:checked) .r:not(.r-dach) { fill: color-mix(in oklch, var(--nacht) 14%, var(--papier)); }
  .szenen:has(#sz-rechte:checked) .s-rechte { opacity: 1; }
  .szenen:has(#sz-rechte:checked) .t-rechte { display: block; }
  .szenen:has(#sz-rechte:checked) :is(.r-kinder, .r-bad, .r-wohnen) { fill: color-mix(in oklab, var(--ha) 32%, var(--papier)); }
  .szenen:has(#sz-rechte:checked) .r-gast { fill: color-mix(in oklab, var(--ha) 14%, var(--papier)); }
  .szenen:has(#sz-ruhe:checked) .s-ruhe { opacity: 1; }
  .szenen:has(#sz-ruhe:checked) .t-ruhe { display: block; }
  .szenen:has(#sz-ausbau:checked) .s-ausbau { opacity: 1; }
  .szenen:has(#sz-ausbau:checked) .t-ausbau { display: block; }
  .szenen:has(#sz-ausbau:checked) .r-dach { fill: color-mix(in oklch, var(--ha) 12%, var(--papier)); stroke: var(--ha-ton); }
  @media (max-width: 56rem) { .szenen { grid-template-columns: 1fr; grid-template-areas: "wahl" "plan" "text"; } }

  /* ───────── 5 · Haltung ───────── */
  .haltung { padding: clamp(6rem, 15vh, 11rem) 0; }
  .riesig { font-size: clamp(2.8rem, 1rem + 7.4vw, 6rem); letter-spacing: -0.04em; line-height: 0.98; }
  .riesig span { font-weight: 300; }
  .haltung-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 2rem; border-top: 2px solid var(--tinte); }
  .haltung-text p { max-width: 36ch; }
  .notiz { color: var(--grau); }
  .beleg-zeile { font-weight: 700; }
  @media (max-width: 56rem) { .haltung-text { grid-template-columns: 1fr; } }

  /* ───────── 6 · Kontakt: zurück in die Mitte ───────── */
  .kontakt { background: var(--nacht); color: var(--nacht-text); padding: clamp(5rem, 12vh, 9rem) 0; }
  .kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
  .kontakt p { margin-top: 1.5rem; max-width: 48ch; color: oklch(86% 0.005 95); }
  .fakten { margin: 0; display: grid; gap: 1.25rem; }
  .fakten dt { font: 600 0.8rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: oklch(78% 0.006 250); }
  .fakten dd { margin: 0.2rem 0 0; font-size: 1.05rem; }
  .fakten a { color: var(--nacht-text); }
  @media (max-width: 56rem) { .kontakt-raster { grid-template-columns: 1fr; } }

  .fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 2rem var(--rand); font-size: 0.9rem; color: var(--grau); border-top: 1px solid var(--linie); }
  .fuss a { color: var(--tinte); }

  /* ───────── Ausbau zur vollständigen Seite ───────── */
  /* Netzpläne der Felder: aufklappbar, damit die Waben ruhig bleiben */
  .bauplan { margin-top: 1.5rem; border-top: 1px solid oklch(40% 0.01 250); }
  .bauplan summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 700; color: var(--nacht-text); }
  .bauplan summary::-webkit-details-marker { display: none; }
  .bauplan summary::before { content: ""; width: 0.9rem; height: 1.04rem; background: var(--f); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: rotate 300ms var(--weich); }
  .bauplan[open] summary::before { rotate: 90deg; }
  .bauplan figure { margin: 1rem 0 0; }
  .feld .zeichnung { display: block; width: 100%; height: auto; overflow: visible; }
  .feld {
    --f-text: var(--fh); --band: color-mix(in oklab, var(--f) 16%, var(--nacht));
    --n-bau: color-mix(in oklab, var(--f) 45%, var(--nacht)); --z-strich: var(--fh);
  }
  .netzbild .nl { fill: none; stroke: var(--f-text); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .netzbild .nl-stamm { stroke-width: 6; }
  .netzbild :is(.n-hub, .n-ki, .n-bau, .n-aus) { stroke-linejoin: round; stroke-width: 6; }
  .netzbild :is(.n-hub, .n-ki) { fill: var(--f); stroke: var(--f); }
  .netzbild .n-bau { fill: var(--n-bau); stroke: var(--n-bau); }
  .netzbild .n-aus { fill: var(--band); stroke: var(--f-text); stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
  .netzbild .np { fill: var(--band); stroke: var(--f-text); stroke-width: 3.5; vector-effect: non-scaling-stroke; }
  .netzbild .n-zeile { fill: none; stroke: var(--nacht-text); stroke-width: 3; stroke-linecap: round; }
  .netzbild .nt { font: 700 20px var(--mono); fill: var(--nacht-text); }
  .netzbild .nt.nt-in { fill: oklch(20% 0.01 250); }
  .netzbild .nt-ki { font: 700 22px var(--mono); text-anchor: middle; fill: oklch(20% 0.01 250); }
  .zeichnung .vor { display: none; }
  .zeichnung .end { stroke: var(--z-strich); }
  .zeichnung .fuell { fill: var(--z-strich); }
  .zeichnung .marke-text { fill: var(--nacht); font-family: var(--mono); font-weight: 700; }
  .netzbild .wm { transform: scale(1.35); }
  .abb { display: block; margin: 1rem 0 0.6rem; font: 600 0.85rem var(--mono); color: oklch(80% 0.006 250); }
  .legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.95rem; }
  .legende li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: first baseline; }
  .wm-nr { display: inline-grid; place-items: center; width: 1.4rem; height: 1.6rem; font: 700 0.8rem var(--mono); background: var(--f, var(--tinte)); color: oklch(20% 0.01 250);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .feld .legende { color: oklch(88% 0.005 95); }
  .feld-mail { margin-top: 1rem; }
  .feld-mail a { font-weight: 700; color: var(--nacht-text); }

  /* Übergabemappe bei Schritt 4 */
  .schritte .mappe { grid-column: 2; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; margin: 1rem 0 0; }
  .schritte .mappe .zeichnung { display: block; width: 100%; height: auto; --z-strich: var(--tinte); }
  .schritte .mappe .marke-text { fill: var(--papier); }
  .schritte .mappe .wm-nr { background: var(--tinte); color: var(--papier); }
  .schritte .mappe .netzbild .n-bau { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 3; }
  .schritte .mappe .netzbild .n-zeile { stroke: var(--tinte); }
  .schritte .mappe .netzbild .nl { stroke: var(--tinte); }
  .schritte .mappe .netzbild .np { fill: var(--papier); stroke: var(--tinte); }

  /* Zwei Wege: eine Frage, zwei Antworten */
  .wege { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 3rem; }
  .wege-frage { grid-column: 1 / -1; font-size: 1.25rem; font-weight: 800; }
  .wege h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .wege > div { border-top: 3px solid var(--tinte); padding-top: 1rem; }
  @media (max-width: 56rem) { .wege { grid-column: 1; grid-template-columns: 1fr; } .schritte .mappe { grid-template-columns: 5rem minmax(0, 1fr); } }

  /* Nachprüfbar */
  .belege { padding: clamp(5rem, 12vh, 9rem) 0; border-top: 1px solid var(--linie); }
  .belege .gross span { color: var(--grau); }
  .beleg-liste { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
  .beleg-liste article { border-top: 2px solid var(--tinte); padding-top: 1.25rem; }
  .beleg-liste h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); margin: 0.75rem 0; }
  .beleg-liste p { max-width: 48ch; }
  .beleg-feld { display: flex; gap: 0.4rem; }
  .beleg-feld span { font: 700 0.8rem var(--mono); padding: 0.1rem 0.5rem; border-radius: 3px; color: oklch(20% 0.01 250); background: var(--it); }
  .beleg-feld [data-feld="pz"] { background: var(--pz); } .beleg-feld [data-feld="ha"] { background: var(--ha); }
  .stand { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
  .stand li { max-width: 52ch; }
  .chip { display: inline-block; font: 700 0.8rem var(--mono); padding: 0 0.45rem; border: 1.5px solid currentColor; border-radius: 3px; margin-right: 0.35rem; }
  .chip-pilot { color: var(--tinte); } .chip-offen { color: var(--tinte); border-style: dashed; }
  .weiter { margin-top: 1rem; font-weight: 700; }
  @media (max-width: 64rem) { .beleg-liste { grid-template-columns: 1fr; } }

  /* Mit wem Sie reden */
  .menschen { padding: clamp(5rem, 12vh, 9rem) 0; background: var(--flaeche); }
  .menschen .gross span { color: var(--grau); }
  .menschen .lead { margin-top: 1.5rem; }
  .menschen-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .leute { display: grid; gap: 0; }
  .leute article, .kunden { border-top: 1px solid var(--linie); padding: 1.25rem 0; }
  .leute h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
  .kunden ul { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.4rem; }
  @media (max-width: 56rem) { .menschen-raster { grid-template-columns: 1fr; } }

  /* ───────── Nach Kritik 24/32 ───────── */


  .mail-hinweis { margin-top: 0.9rem; font-size: 0.92rem; color: var(--grau); max-width: 46ch; }
  .kontakt .mail-hinweis { color: oklch(80% 0.006 250); }
  /* Feld-Waben: „Hausautomation“ passt hinein */
  .wabe-gross span { font-size: clamp(0.82rem, 0.7rem + 0.35vw, 1.05rem); text-align: center; padding: 0 0.4rem; }
  @media (max-width: 56rem) { .wabe-gross { width: 8.5rem; } .wabe-gross span { font-size: 0.78rem; } }


  /* ───────── Runde 3 ───────── */
  /* Fokus auf dunklen Flächen hell */
  .felder :focus-visible, .kontakt :focus-visible { outline-color: var(--nacht-text); }


  @media (max-width: 56rem) {
    .namen text { font-size: 24px; }
    .hinweis { font-size: 22px; }
  }

  /* ───────── Runde 4 ───────── */
  /* 1 · Grundriss am Handy: Hinweise stehen im Text daneben, Raumnamen groß */
  @media (max-width: 40rem) {
    .plan .hinweis { display: none; }
    .namen text { font-size: 27px; }
  }
  /* 3 · Überspringen für alle sichtbar */
  .scroll-hinweis { color: var(--tinte); text-decoration: underline; text-underline-offset: 0.3em; text-transform: none; letter-spacing: 0; font: 700 0.9rem var(--sans); padding: 0.5rem 0.75rem; }
  /* 4 · Menü zeigt den Abschnitt, in dem man liest.
     Zwei Wege zum selben Strich: Das Skript misst genauer (Lesehöhe 40 %) und setzt
     data-aktiv; wo kein Skript läuft, übernimmt die Scroll-Zeitleiste. Sobald das
     Skript da ist, setzt es .spy-js, und dieser Block hält still — sonst überschreibt
     die Animation den Strich wieder auf durchsichtig. */
  @supports (animation-timeline: view()) {
    body { timeline-scope: --s-felder, --s-weg, --s-belege, --s-zuhause, --s-menschen; }
    #felder { view-timeline: --s-felder block; } #weg { view-timeline: --s-weg block, --weg block; } #belege { view-timeline: --s-belege block; }
    #zuhause { view-timeline: --s-zuhause block; } #menschen { view-timeline: --s-menschen block; }
    :root:not(.spy-js) .kopf nav a { animation: hier linear; animation-range: cover 35% cover 65%; }
    :root:not(.spy-js) .kopf nav a[href="#felder"] { animation-timeline: --s-felder; } :root:not(.spy-js) .kopf nav a[href="#weg"] { animation-timeline: --s-weg; }
    :root:not(.spy-js) .kopf nav a[href="#belege"] { animation-timeline: --s-belege; } :root:not(.spy-js) .kopf nav a[href="#zuhause"] { animation-timeline: --s-zuhause; }
    :root:not(.spy-js) .kopf nav a[href="#menschen"] { animation-timeline: --s-menschen; }
  }
  @keyframes hier { 0%, 100% { border-bottom-color: transparent; } 1%, 99% { border-bottom-color: currentColor; } }
  /* 5 · Fortschrittswabe nur, wo sie sich füllen kann */
  .fortschritt { display: none; }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 56.01rem) { .fortschritt { display: block; } } }
  /* Lampen in „Gute Nacht“: an, aber markiert als „gehen gleich aus“ */
  .szenen:has(#sz-nacht:checked) .licht { fill: oklch(90% 0.13 95); stroke: var(--tinte); stroke-width: 2; stroke-dasharray: 4 3; }
  .adresse { user-select: all; font-weight: 700; color: var(--tinte); white-space: nowrap; }
  .scroll-hinweis:focus-visible { animation: none; opacity: 1; }
  /* Personen: Rolle als eigene Zeile über dem Lebenslauf */
  .leute .rolle { margin: 0 0 0.5rem; font: 600 0.85rem var(--mono); color: var(--grau); }
  .leute article p:last-child { margin-bottom: 0; max-width: 60ch; }
  /* Porträts als Wabe, einheitlich in Graustufen (Urlaubs- und Restaurantlicht angeglichen) */
  .leute article:has(.portrait) { display: grid; grid-template-columns: clamp(5.5rem, 9vw, 7.5rem) minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .leute article:has(.portrait) > :not(.portrait) { grid-column: 2; }
  .leute .portrait { grid-column: 1; grid-row: 1 / span 3; width: 100%; height: auto; aspect-ratio: 1 / 1.1547; object-fit: cover;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: grayscale(1) contrast(1.05); }

  /* ───────── Nach der Kritik 22/32 (2026-10-19) ───────── */
  /* Die These stand bisher nur in der Bewegung. Ohne Flug — am Handy, bei reduzierter Bewegung,
     ohne Scroll-Zeitleisten — sagte sie niemand. Jetzt steht sie als Satz da und der Flug führt sie vor. */
  .these { margin: 1.2rem 0 0; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 600; max-width: 34ch; }
  .these b { font-weight: 800; }

  /* Kleiner Rahmenknopf, etwa für „Adresse kopieren" neben der verlinkten Adresse */
  .knopf-klein {
    font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; min-height: 32px;
    background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 999px;
    padding: 0.1rem 0.7rem; margin-left: 0.4rem; white-space: nowrap;
  }
  .knopf-klein:hover { text-decoration: underline; }
}

/* ───── Schicht 2: die Schale, Kopf und Fuß ───── */
@layer schale {
  /* ── Schale ───────────────────────────────────────────────────────────────────
     Kopf und Fuß, auf der Startseite und auf den Unterseiten dieselben. Diese Datei
     wird als letzte geladen (nach startseite.css bzw. style.css) und gilt deshalb
     zuletzt. Sie bringt ihre eigenen Farben mit, damit sie nicht davon abhängt,
     welches Stylesheet darunter liegt.
     Die Schalter im Fuß setzen data-theme und data-motion; assets/seite.js füllt sie. */

  :root {
    --sch-rand: clamp(1rem, 4.5vw, 3rem);
    --sch-breite: 84rem;
    --sch-papier: oklch(97.2% 0.004 95);
    --sch-tinte: oklch(24% 0.008 250);
    --sch-linie: oklch(85% 0.006 95);
    --sch-fuss: oklch(24% 0.008 250);
    --sch-fuss-text: oklch(93% 0.004 95);
    --sch-fuss-leise: oklch(76% 0.006 250);
    --sch-fuss-link: oklch(84% 0.06 228);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --sch-papier: oklch(17% 0.008 250); --sch-tinte: oklch(93% 0.004 95); --sch-linie: oklch(32% 0.008 250);
      --sch-fuss: oklch(27% 0.014 250);
    }
  }
  :root[data-theme="dark"] {
    --sch-papier: oklch(17% 0.008 250); --sch-tinte: oklch(93% 0.004 95); --sch-linie: oklch(32% 0.008 250);
    --sch-fuss: oklch(27% 0.014 250);
  }

  /* ── Kopf: eine Zeile, Marke links, Menü rechts, Kontakt als Knopf ───────────── */
  .kopf {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem var(--sch-rand);
    background: var(--sch-papier);
    border-bottom: 1px solid var(--sch-linie);
    color: var(--sch-tinte);
  }
  /* Die Unterseiten tragen im Kopf noch einen Container; er verschwindet aus dem Layout. */
  .kopf > .innen { display: contents; }
  .marke { display: block; line-height: 0; }
  .marke img { display: block; height: 36px; width: auto; }
  /* Hell oder dunkel: genau ein Logo. Die Regeln stehen hier, weil .marke img sonst gewinnt. */
  .marke .logo-dunkel { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marke .logo-hell { display: none; }
    :root:not([data-theme="light"]) .marke .logo-dunkel { display: block; }
  }
  :root[data-theme="dark"] .marke .logo-hell { display: none; }
  :root[data-theme="dark"] .marke .logo-dunkel { display: block; }
  :root[data-theme="light"] .marke .logo-hell { display: block; }
  :root[data-theme="light"] .marke .logo-dunkel { display: none; }

  .kopf nav, .kopf .navi {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(0.75rem, 2.5vw, 2rem);
    margin-left: auto; margin-right: clamp(0.75rem, 2vw, 1.5rem);
    font-weight: 600; font-size: 0.95rem;
  }
  .kopf nav a, .kopf .navi a {
    text-decoration: none; padding: 0.5rem 0;
    border-bottom: 2px solid transparent; color: inherit;
  }
  .kopf nav a:hover, .kopf .navi a:hover { text-decoration: underline; }
  /* „page“ meint die aufgeschlagene Unterseite, data-aktiv den gelesenen Abschnitt.
     Beides derselbe Strich; bis hierher traf die Regel nur das erste. */
  .kopf .navi a[aria-current="page"],
  .kopf .navi a[data-aktiv] { border-bottom-color: currentColor; }

  .kopf-knopf {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0.4rem 1rem; border-radius: 999px;
    background: var(--sch-tinte); color: var(--sch-papier);
    font-weight: 700; font-size: 0.92rem; text-decoration: none; white-space: nowrap;
  }
  .kopf-knopf:hover { text-decoration: underline; }

  .kopf-schalter {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
    margin-left: 0.5rem; background: transparent; color: var(--sch-tinte);
    border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  }
  .kopf-schalter:hover { border-color: currentColor; }
  .kopf-schalter svg { width: 22px; height: 22px; }
  .kopf-schalter .halb { fill: currentColor; }
  .kopf-schalter .rand { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
  .kopf-wort { display: none; }
  @media (min-width: 56rem) {
    .kopf-wort { display: inline; font-size: 0.9rem; font-weight: 600; margin-left: 0.4rem; }
    .kopf-schalter { width: auto; padding-inline: 0.5rem; grid-auto-flow: column; }
  }
  /* Schmal: Marke und Kontakt bleiben in der ersten Zeile, das Menü bekommt eine eigene,
     seitlich schiebbare zweite Zeile. Vorher war es unter 40rem ersatzlos ausgeblendet — auf einer
     Seite von über 11.000 px war das die einzige Navigation. Der Bereich reicht bis 48rem, damit das
     Menü nicht zwischen 641 und 735 px unkontrolliert umbricht. */
  @media (max-width: 48rem) {
    /* Der Kopf ist hier zweizeilig; das Sprungpolster aus startseite.css (5rem) wächst mit. */
    html { scroll-padding-top: 7.5rem; }
    .kopf { flex-wrap: wrap; row-gap: 0.15rem; padding-bottom: 0.4rem; }
    .kopf nav, .kopf .navi {
      order: 3; width: 100%; margin: 0; gap: 1.1rem; font-size: 0.92rem;
      flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
      overscroll-behavior-x: contain;
    }
    .kopf nav::-webkit-scrollbar, .kopf .navi::-webkit-scrollbar { display: none; }
    .kopf nav a, .kopf .navi a { flex: 0 0 auto; }
    .kopf-knopf { margin-left: auto; }
  }

  /* ── Fuß: die eine dunkle Fläche, auf jeder Seite gleich ─────────────────────── */
  .fuss {
    background: var(--sch-fuss); color: var(--sch-fuss-text);
    border-top: 0; padding: 2.5rem var(--sch-rand); font-size: 0.95rem;
  }
  .fuss .innen {
    display: grid; gap: 1.5rem;
    max-width: var(--sch-breite); margin-inline: auto; padding: 0;
  }
  @media (min-width: 56rem) {
    .fuss .innen { grid-template-columns: auto 1fr auto; align-items: start; }
  }
  .fuss img { height: 52px; width: auto; display: block; }
  .fuss p { margin: 0 0 0.35rem; }
  .fuss a { color: var(--sch-fuss-link); }
  .fuss .leise { color: var(--sch-fuss-leise); }
  .fuss .rechtliches { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .fuss .rechtliches a { display: inline-block; padding-block: 0.5rem; }
  .nach-oben { display: inline-block; padding-block: 0.5rem; margin-top: 0.5rem; color: var(--sch-fuss-link); }
  .schalter-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
  .schalter {
    font: inherit; font-size: 0.88rem; cursor: pointer; min-height: 40px;
    background: transparent; color: var(--sch-fuss-text);
    border: 1px solid var(--sch-fuss-leise); border-radius: 2px; padding: 0.25rem 0.9rem;
  }
  .schalter:hover { border-color: var(--sch-fuss-text); }
  /* Der Ring aus startseite.css ist --tinte und damit im hellen Modus genau der Fußgrund. */
  .fuss :focus-visible { outline-color: var(--sch-fuss-text); }
  .schalter[aria-pressed="true"] { background: var(--sch-fuss-text); color: var(--sch-fuss); border-color: var(--sch-fuss-text); }

  /* ── Bewegung reduzieren, von Hand gewählt: der Flug steht still ─────────────── */
  :root[data-motion="aus"] * { animation: none !important; transition: none !important; }
  :root[data-motion="aus"] { scroll-behavior: auto; }
  :root[data-motion="aus"] .flug { height: auto; }
  :root[data-motion="aus"] .buehne { position: static; height: auto; overflow: visible; }
  :root[data-motion="aus"] .flug-mitte,
  :root[data-motion="aus"] .scroll-hinweis,
  :root[data-motion="aus"] .fortschritt,
  :root[data-motion="aus"] .sprung-flug { display: none; }

  /* Die Schriftart für die Registernummer, auch ohne style.css */
  .fuss .mono { font-family: var(--mono, ui-monospace, monospace); }
}

/* ───── Schicht 3: was Entwurf 7 anders macht ─────
   Jede Regel hier beantwortet einen gemessenen Befund aus der Analyse. Die Schicht
   steht zuletzt, also braucht keine dieser Regeln ein !important. */
@layer effekt {

  /* 1 · Die Flächenlogik im Dunkeln aufrichten.
     Hell fällt die Leiter von 97,2 % über 93,5 % auf 19 % — die Mitte ist die dunkelste
     Fläche, und der ganze Flug läuft auf sie zu. Dunkel stieg sie bisher von 17 % über
     21 % auf 27 %: die Mitte war die hellste Fläche der Seite, die These stand auf dem
     Kopf. Jetzt fällt sie auch dort. --linie liegt wieder über --nacht, nicht darunter. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papier: oklch(20.5% 0.008 250);
      --flaeche: oklch(24% 0.008 250);
      --nacht: oklch(11% 0.01 250);
      --linie: oklch(34% 0.008 250);
      --sch-fuss: oklch(24% 0.008 250);
    }
  }
  :root[data-theme="dark"] {
    --papier: oklch(20.5% 0.008 250);
    --flaeche: oklch(24% 0.008 250);
    --nacht: oklch(11% 0.01 250);
    --linie: oklch(34% 0.008 250);
    --sch-fuss: oklch(24% 0.008 250);
  }

  /* 2 · Ein Logo statt zwei. Die beiden Dateien waren byteidentisch bis auf zwölf Byte —
     einen Grauwert, zweimal. Einmal eingebettet, zweimal benutzt, Farbe aus --grau:
     hell 44 %, dunkel 76 %, genau die beiden Werte der alten Dateien. Spart zwei
     Anfragen und 58 KB, und der Schalter wirkt jetzt auch auf das Logo. */
  .logo-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
  .marke .logo { display: block; height: 36px; width: 148px; color: var(--grau); }
  .fuss .logo { display: block; height: 52px; width: 191px; color: var(--sch-fuss-leise); }

  /* 3 · Das Menüband am Handy sagt, dass es weitergeht.
     Gemessen: 382 px Inhalt in 355 px Fenster, Scrollleiste ausgeblendet, keine Kante. */
  @media (max-width: 48rem) {
    .kopf nav, .kopf .navi {
      mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
      scroll-padding-inline: 1rem;
    }
    @media (prefers-contrast: more) {
      .kopf nav, .kopf .navi { mask-image: none; }
    }
  }
  /* Der Kopf trägt jetzt sechs Einträge. Damit er nirgends unkontrolliert umbricht:
     bis 56rem zwei Zeilen (dieselbe Schwelle wie der Flug), darüber bis 72rem enger
     geführt. Gemessen bei 1024 px: vorher 135 px hoher Kopf, jetzt eine Zeile. */
  @media (max-width: 56rem) {
    html { scroll-padding-top: 7.5rem; }
    .kopf { flex-wrap: wrap; row-gap: 0.15rem; padding-bottom: 0.4rem; }
    .kopf nav, .kopf .navi {
      order: 3; width: 100%; margin: 0; gap: 1.1rem; font-size: 0.92rem;
      flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
      mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
      scroll-padding-inline: 1rem;
    }
    .kopf-knopf { margin-left: auto; }
  }
  @media (min-width: 56.01rem) and (max-width: 72rem) {
    .kopf { padding-inline: clamp(1rem, 3vw, 2rem); }
    .kopf nav, .kopf .navi { gap: clamp(0.55rem, 1.5vw, 1.1rem); font-size: 0.88rem; margin-right: 0.75rem; flex-wrap: nowrap; }
  }

  /* Der Kontakt-Knopf ist gefüllt, eine Unterkante sieht man dort nicht. */
  .kopf-knopf[data-aktiv] { box-shadow: inset 0 0 0 2px var(--sch-papier); }

  /* 4b · Abbildungsnummern: der helle Ton gehört auf die dunklen Feldflächen.
     Abb. 4 (Übergabemappe) liegt auf Papier und kam damit auf 1,72:1 — derselbe Fehler,
     den PR #22 in der laufenden Fassung behebt; Entwurf 7 zweigt davor ab. */
  .abb { color: var(--grau); }
  .felder .abb, .kontakt .abb { color: oklch(80% 0.006 250); }

  /* 5 · Der Beleg bekommt seine eigene Fläche. Vorher standen Ablauf und Nachprüfbar
     2.401 px zusammenhängend auf demselben Papier, getrennt von einer Haarlinie. */
  .belege { background: var(--flaeche); border-top: 0; }

  /* 6 · Der Zweitsatz der Überschriften: ein Ton, nicht drei.
     Vorher oklch(78 %) in den Feldern, --grau in Belegen und Menschen, und in Zuhause
     genau so dunkel wie der erste Satz — dieselbe Auszeichnung, drei Bedeutungen. */
  :root { --zweitsatz: var(--grau); }
  .gross span, .riesig span { color: var(--zweitsatz); }
  .felder, .kontakt { --zweitsatz: oklch(78% 0.006 250); }

  /* 7 · Die Ankunft: wer durch eine Tür der Kugel kam, sieht, wo er gelandet ist. */
  @media (prefers-reduced-motion: no-preference) {
    .feld:target { animation: ankommen 1.4s ease both; }
  }
  .feld:target h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--fh, currentColor); }

  /* 8 · Der Netzplan zeichnet sich, wenn er aufgeht — von links nach rechts, wie von Hand. */
  @media (prefers-reduced-motion: no-preference) {
    .bauplan[open] .netzbild { animation: aufdecken 700ms var(--weich) both; }
  }

  /* 9 · Die Fortschrittswabe: eine Wabe, groß genug, dass man sie sieht.
     Zwischendurch standen hier fünf kleine, eine je Schritt. Das war genauer und
     zugleich unruhiger — fünf Zeichen neben fünf Überschriften, die dasselbe zählen.
     Also wieder eine. Was an der Kette richtig war, bleibt: schwarzer Rand, Feldfarbe
     als Füllung statt Grau auf Grau, und sie verschwindet nicht mehr am Handy, sobald
     der Browser Scroll-Zeitleisten kennt. */
  .fortschritt {
    /* Die leere Wabe hell halten, damit der Füllstand auch zu Beginn ablesbar ist. */
    --wabe-leer: oklch(93.5% 0.006 95);
    position: relative; isolation: isolate;
    width: clamp(7.5rem, 4rem + 11vw, 12rem);
    margin-top: 2.5rem;
    background: var(--tinte);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fortschritt { --wabe-leer: oklch(72% 0.01 250); } }
  :root[data-theme="dark"] .fortschritt { --wabe-leer: oklch(72% 0.01 250); }
  .fortschritt::before {
    content: ""; position: absolute; inset: 4px; z-index: -1;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(to top, var(--pz) var(--fuellung), var(--wabe-leer) var(--fuellung));
  }
  /* Auch am Handy, sobald sie sich füllen kann — vorher war sie dort ausgeblendet. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) { .fortschritt { display: block; } }
  }

  /* 10 · Die Szenen wechseln als eine Sache. display lässt sich nicht überblenden,
     die Zeichnung blendete 300 ms weich, der Text sprang. Jetzt liegen sie gestapelt. */
  @media (min-width: 56.01rem) {
    .szene-text { display: grid; }
    .szene-text .t { display: block; grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 300ms var(--weich), visibility 300ms; }
    .szenen:has(#sz-nacht:checked) .t-nacht,
    .szenen:has(#sz-rechte:checked) .t-rechte,
    .szenen:has(#sz-ruhe:checked) .t-ruhe,
    .szenen:has(#sz-ausbau:checked) .t-ausbau { opacity: 1; visibility: visible; }
  }

  /* 11 · Der Kontakt erinnert an die Form, in die man hineingeflogen ist — von außen.
     Der Kommentar „zurück in die Mitte" stand seit Monaten im Stylesheet, die Form fehlte. */
  .kontakt { position: relative; isolation: isolate; overflow: hidden; }
  .kontakt::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -6vw; top: 50%; translate: 0 -50%;
    width: min(42rem, 60vw); aspect-ratio: 1 / 1.1547;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--nacht-text); opacity: 0.05;
  }

  /* 12 · Trefferflächen: freistehende Links waren 22 px hoch. Die Inline-Ausnahme von
     WCAG 2.5.8 trägt dort nicht, weil sie kein Satzbestandteil sind. */
  .weiter a, .feld-mail a, .beleg-zeile a, .nach-oben { display: inline-block; min-height: 24px; padding-block: 1px; }

  /* 13 · Bewegung aus heißt auch für Pseudoelemente aus. Der Universalselektor in der
     Schale trifft ::before und ::after nicht — der Pfeil am Aufklapper drehte sich weiter. */
  :root[data-motion="aus"] ::before, :root[data-motion="aus"] ::after,
  :root[data-motion="aus"] ::view-transition-group(*),
  :root[data-motion="aus"] ::view-transition-old(*),
  :root[data-motion="aus"] ::view-transition-new(*) {
    animation: none !important; transition: none !important;
  }

  /* 14 · Die leise Einblendung, die alle erreicht — auch ohne Scroll-Zeitleisten.
     Grundzustand ist immer sichtbar; wer Bewegung abschaltet, verliert nichts. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:not([data-motion="aus"]) .erscheint {
        animation: erscheinen linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 60%;
      }
    }
  }

  /* 15 · Der Textabgang im Flug gestaffelt: man liest fertig, bevor etwas weggeht. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 56.01rem) {
      .flug-text { animation: none; }
      .flug-text > h1 { animation: weg linear both; animation-timeline: --flug; animation-range: contain 2% contain 11%; }
      .flug-text > .lead { animation: weg linear both; animation-timeline: --flug; animation-range: contain 5% contain 14%; }
      .flug-text > .aktion, .flug-text > .mail-hinweis { animation: weg linear both; animation-timeline: --flug; animation-range: contain 8% contain 17%; }
      /* Der Zoom läuft bis ans Ende der Klebestrecke, statt 12 % vorher stehenzubleiben. */
      .flug-kugel svg { animation-range: contain 0% contain 100%; }
    }
  }
  /* ── Der Klick auf eine Unterseite soll kein Ausstieg sein ──────────────────
     Gemessen auf werkstatt.html gegen die Startseite: H1 70 statt 96 px, H2 40
     statt 69, Rahmen 68 statt 84 rem, und der Grund war ein anderer Farbwert
     (#f4f4f2 gegen oklch(97,2 %)). Drei Brüche, die man beim Klick sieht. */

  /* Die Gruppe im Menü: der MCP-Connector hat als einziger Eintrag eine eigene
     Struktur. Gebaut aus <details>, also ohne Skript bedienbar und mit Tastatur
     von Haus aus; das Skript schließt sie nur bei Escape und Klick daneben. */
  .menue-gruppe { position: relative; }
  .menue-gruppe > summary {
    list-style: none; cursor: pointer; padding: 0.5rem 0;
    border-bottom: 2px solid transparent; white-space: nowrap;
  }
  .menue-gruppe > summary::-webkit-details-marker { display: none; }
  .menue-gruppe > summary::after {
    content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    rotate: 45deg; translate: 0 -0.15em;
  }
  .menue-gruppe[open] > summary::after { rotate: -135deg; translate: 0 0.1em; }
  .menue-gruppe > summary:hover { text-decoration: underline; }
  .menue-gruppe:has(a[aria-current="page"]) > summary { border-bottom-color: currentColor; }
  .menue-klappe { display: flex; flex-direction: column; }
  @media (min-width: 56.01rem) {
    .menue-klappe {
      position: absolute; top: calc(100% + 0.55rem); left: -0.9rem; z-index: 20;
      min-width: 14rem; padding: 0.4rem;
      background: var(--sch-papier); border: 1px solid var(--sch-linie);
      box-shadow: 0 10px 30px -12px oklch(0% 0 0 / 0.35);
    }
    .menue-klappe a { padding: 0.55rem 0.9rem; border-bottom: 0; }
    .menue-klappe a:hover { background: color-mix(in oklch, currentColor 8%, transparent); }
  }
  /* Schmal: keine Klappe, die zwei Ziele stehen einfach in der Zeile. */
  @media (max-width: 56rem) {
    .menue-gruppe > summary { display: none; }
    .menue-gruppe, .menue-klappe { display: contents; }
  }

  /* ── Mehr dazu, an Ort und Stelle ──────────────────────────────────────────
     Die Werkstatt-Seite ist aufgelöst: ihre Stücke stehen dort, wo ihre Kurzfassung
     steht, und klappen auf. Dieselbe Wabe als Marke wie bei den Netzplänen, aber in
     Tinte statt in Feldfarbe, weil diese Aufklapper auf hellem Grund liegen. */
  .mehr { margin-top: 1.25rem; border-top: 1px solid var(--linie); }
  .mehr > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem;
    min-height: 44px; font-weight: 700;
  }
  .mehr > summary::-webkit-details-marker { display: none; }
  .mehr > summary::before {
    content: ""; flex: 0 0 auto; width: 0.9rem; height: 1.04rem; background: currentColor;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: rotate 220ms var(--weich);
  }
  .mehr[open] > summary::before { rotate: 90deg; }
  .mehr > summary:hover { text-decoration: underline; }
  .mehr-inhalt { padding: 0.4rem 0 1.2rem; max-width: 46ch; }
  .mehr-inhalt > :first-child { margin-top: 0.4rem; }
  .mehr-inhalt h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); margin-top: 1.4rem; }
  .mehr-inhalt h4 { font-size: 1.05rem; margin-top: 1.1rem; }
  .mehr-inhalt p, .mehr-inhalt li { margin-top: 0.7rem; }
  @media (prefers-reduced-motion: no-preference) {
    .mehr[open] .mehr-inhalt { animation: erscheinen 320ms var(--weich) both; }
  }

  /* Die Offenlegung ist zu kurz zum Verstecken: sie steht sichtbar in der Karte. */
  .offenlegung { margin-top: 1.1rem; padding-left: 0.9rem; border-left: 3px solid var(--grau); }
  .offenlegung h4 { font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; }
  .offenlegung p { margin-top: 0.5rem; }

  /* ── Was noch geprüft wird: ein roter Punkt statt eines Kastens ─────────────
     Der Satz bleibt im Dokument — Vorleseprogramme und das Livegang-Tor lesen ihn
     weiter; auf dem Schirm steht nur noch die Markierung. */
  .platzhalter {
    display: block; width: 0.55cm; height: 0.55cm; border-radius: 50%;
    background: oklch(55% 0.2 27); border: 0; padding: 0; margin: 0.6rem 0 1.4rem;
    font-size: 0; line-height: 0; color: transparent; overflow: hidden;
  }

  /* Porträtkarten am Handy: Deutsche Wortungetüme passen nicht in 180 px.
     Bei 320 px Fensterbreite steht neben dem Bild eine 180 px schmale Textspalte.
     „Praxisverwaltungssoftware" ist dort 221 px breit und schob die ganze Seite auf
     345 px — gemessen, nicht vermutet. Mit Silbentrennung (die Seite ist lang="de")
     bleibt die Seite exakt 320 px breit. */
  .leute article h3, .leute article p { hyphens: auto; overflow-wrap: break-word; }
}

@keyframes ankommen {
  0% { background-color: color-mix(in oklch, var(--fh, var(--nacht-text)) 22%, transparent); }
  100% { background-color: transparent; }
}
@keyframes aufdecken {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes erscheinen {
  from { opacity: 0; translate: 0 1.25rem; }
  to { opacity: 1; translate: 0 0; }
}