/* ══ Die Unterseiten ════════════════════════════════════════════════════════════
   Gleiche Schichten, gleiche Schale, gleiche Entscheidungen wie seite.css — nur
   der Inhalt kommt aus dem gewachsenen Stylesheet der Unterseiten.
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/AtkinsonHyperlegibleNext-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Italic-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("fonts/AtkinsonHyperlegibleMono-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@view-transition { navigation: auto; }

@layer seite, schale, effekt;

/* ───── Schicht 1: die Seite ───── */
@layer seite {
  /* DIE-Bildungsmanufaktur. Werkstattzeichnung in den Hausfarben.
     Ein Stylesheet, keine Fremdanfrage: Schriften liegen in assets/fonts/, kein CDN, kein Tracking.

     Herkunft der Werte: konzept/06-KONZEPT-ueberarbeitung.md §1a. Die Farben sind die vier
     Logofarben aus assets/logo.svg; jeder Kontrast ist gemessen (WCAG 2.1), nicht geschätzt.
     Feldzuordnung (Michael, 2026-10-16): Blau = IT, Orange = Prozesse, Grün = Hausautomation.

     ⛔ Die hellen Logofarben bestehen auf hellem Grund weder als Text noch als dünne Linie.
     Sie sind deshalb FLÄCHEN, auf denen Tinte steht. Wo Feldfarbe als Text oder Strich auf dem
     Grund nötig ist, gilt die abgeleitete Variante --f-text. */





  :root {
    color-scheme: light;

    /* Grund und Tinte. Neutral, weil das Logo neutral ist: kein Creme. */
    --grund:     #f4f4f2;
    --flaeche:   #e9e9e5;   /* genau eine abgesetzte Fläche */
    --tinte:     #2b2f33;   /* 12,25:1 */
    --gedaempft: #515355;   /* Logo-Grau · 7,01:1 */
    --strich:    #515355;   /* Endlinie der Zeichnungen und Fokusring */
    --vorzeichnung: rgb(81 83 85 / 0.32);
    --linie:     #d6d6d1;   /* nur sinnfreie Haarlinien, trägt nie Information */
    --link:      #33667b;

    /* Die drei Felder. --f: Fläche (Logofarbe) · --f-tinte: Text darauf · --f-text: Feldfarbe als Text */
    --it:  #5d9eb9;  --it-tinte: #1f2326;  --it-text: #3e778e;
    --pz:  #f38861;  --pz-tinte: #2b2f33;  --pz-text: #c8410f;
    --ha:  #8bc25c;  --ha-tinte: #2b2f33;  --ha-text: #527b2e;

    /* Fuß: die eine dunkle Fläche */
    --fuss-grund: #2b2f33; --fuss-tinte: #e6e7e8; --fuss-leise: #b4b6b9; --fuss-link: #8fc3d6;

    --text: "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Atkinson Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Spuren: die linke Achse ist die Konstante */
    --lesespalte: 36rem;
    --rand-spalte: 15rem;
    --rahmen: 68rem;

    /* Rhythmus, bewusst nicht linear */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 20px;
    --s5: 32px; --s6: 52px; --s7: 84px; --s8: 136px;
    --rand: clamp(1rem, 4vw, 2.5rem);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --grund: #16191c; --flaeche: #1f2327; --tinte: #e6e7e8; --gedaempft: #a9abae;
      --strich: #b4b6b9; --vorzeichnung: rgb(180 182 185 / 0.3); --linie: #33383d; --link: #5d9eb9;
      --it-tinte: #16191c; --pz-tinte: #16191c; --ha-tinte: #16191c;
      --it-text: #5d9eb9; --pz-text: #f38861; --ha-text: #8bc25c;
      --fuss-grund: #262b30; --fuss-leise: #b4b6b9;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --grund: #16191c; --flaeche: #1f2327; --tinte: #e6e7e8; --gedaempft: #a9abae;
    --strich: #b4b6b9; --vorzeichnung: rgb(180 182 185 / 0.3); --linie: #33383d; --link: #5d9eb9;
    --it-tinte: #16191c; --pz-tinte: #16191c; --ha-tinte: #16191c;
    --it-text: #5d9eb9; --pz-text: #f38861; --ha-text: #8bc25c;
    --fuss-grund: #262b30; --fuss-leise: #b4b6b9;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s4); }
  body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-kerning: normal;
  }
  main { overflow-x: clip; }

  /* Browseroberflächen gehören zum Entwurf */
  ::selection { background: var(--it); color: var(--it-tinte); }
  :focus-visible { outline: 2px solid var(--strich); outline-offset: 3px; border-radius: 2px; }
  html { scrollbar-color: var(--gedaempft) var(--flaeche); }

  .sprunglink {
    position: absolute; left: var(--rand); top: -5rem; z-index: 10;
    background: var(--grund); color: var(--tinte);
    border: 2px solid var(--strich); padding: var(--s2) var(--s4);
  }
  .sprunglink:focus { top: var(--s2); }
  .nur-vorlesen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* ---------------------------------------------------------------- Gerüst */

  .band { padding-inline: var(--rand); }
  .innen { max-width: var(--rahmen); margin-inline: auto; }
  .lesespalte { max-width: var(--lesespalte); }

  /* Satzspiegel mit Randspalte: Text links an der Achse, Belege rechts daneben */
  .satz { display: grid; gap: 0 var(--s6); }
  .satz > * { grid-column: 1; min-width: 0; }
  @media (min-width: 64rem) {
    .satz { grid-template-columns: minmax(0, var(--lesespalte)) var(--rand-spalte); }
    .satz > .rand { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin-top: var(--s1); }
  }

  /* ---------------------------------------------------------------- Kopf */

  .kopf .innen {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s3) var(--s5);
    padding-block: var(--s4);
  }
  .marke { display: block; line-height: 0; }
  .marke img { height: 44px; width: auto; }
  .logo-dunkel { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-hell { display: none; }
    :root:not([data-theme="light"]) .logo-dunkel { display: block; }
  }
  :root[data-theme="dark"] .logo-hell { display: none; }
  :root[data-theme="dark"] .logo-dunkel { display: block; }

  .navi { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-left: auto; }
  .navi a {
    display: inline-block; padding: var(--s2) 0;
    color: var(--tinte); text-decoration: none; font-weight: 500;
    border-bottom: 3px solid transparent;
  }
  .navi a[data-feld="it"] { --f: var(--it); }
  .navi a[data-feld="pz"] { --f: var(--pz); }
  .navi a[data-feld="ha"] { --f: var(--ha); }
  .navi a:hover { border-bottom-color: var(--f, var(--strich)); }
  .navi a[aria-current="page"] { border-bottom-color: var(--strich); }
  .navi a[aria-current="true"], .navi a[data-aktiv] { border-bottom-color: var(--f, var(--strich)); }
  @media (max-width: 40rem) {
    .kopf .innen { gap: var(--s2) var(--s4); padding-block: var(--s3); }
    .navi { margin-left: 0; width: 100%; justify-content: space-between; gap: 0 var(--s2); font-size: 0.92rem; }
    .navi a { padding: 10px 0; }
    .marke img { height: 36px; }
    .aufschlag { padding-block: var(--s5) var(--s5); }
  }

  /* ---------------------------------------------------------------- Typografie */

  h1, h2, h3 { text-wrap: balance; color: inherit; }
  h1 {
    font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem);
    line-height: 1.04; letter-spacing: -0.025em; font-weight: 750;
    margin: 0 0 var(--s5); max-width: 18ch;
  }
  h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.12; letter-spacing: -0.015em; font-weight: 700;
    margin: 0 0 var(--s4); max-width: 24ch;
  }
  h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: var(--s5) 0 var(--s2); }
  p, ul, ol { margin: 0 0 var(--s4); }
  p, li { max-width: 68ch; }
  b, strong { font-weight: 700; }

  a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }

  .vorspann { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--tinte); max-width: 40rem; }
  .leise { color: var(--gedaempft); }
  .mono, .abb, .ziffer { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------- Abschnitte */

  .aufschlag { padding-block: var(--s7) var(--s6); }
  .abschnitt { padding-block: var(--s7); }
  .abschnitt + .abschnitt:not(.feld) { border-top: 1px solid var(--linie); }
  .ruhig { background: var(--flaeche); }
  .haltung h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 14ch; margin-bottom: var(--s5); }

  /* ---- Wabe: die Ziffernmarke aus dem Logo */
  .wabe {
    display: inline-grid; place-items: center;
    width: 2.1em; height: 1.85em; flex: none;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: var(--strich); color: var(--grund);
    font-family: var(--mono); font-weight: 700; font-size: 0.95rem; line-height: 1;
  }

  /* ---- Wie ein Stück entsteht: fünf Schritte, die Linie läuft über den Rand */
  .schritte {
    list-style: none; padding: 0; margin: var(--s6) 0 0;
    display: grid; gap: var(--s5); position: relative;
  }
  .schritte li { position: relative; max-width: none; }
  .schritte h3 { margin: var(--s3) 0 var(--s2); font-size: 1.35rem; }
  .schritte p { margin: 0; }
  .schritte .dokument { margin-top: var(--s3); font-size: 0.95rem; }
  .schritte .dokument { border-top: 1.5px solid var(--strich); padding-top: var(--s2); }
  .schritte .dokument b { display: block; font-weight: 700; font-size: 1rem; color: var(--tinte); }
  @media (min-width: 60rem) {
    .schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); }
    .schritte::before {
      content: ""; position: absolute; top: calc(0.925rem * 0.95 + 1px); left: 0;
      width: calc(100% + 50vw); border-top: 2px solid var(--strich);
    }
    .schritte::after { /* die Vorzeichnung darunter, leicht versetzt */
      content: ""; position: absolute; top: calc(0.925rem * 0.95 + 5px); left: -6px;
      width: calc(100% + 50vw); border-top: 1px solid var(--vorzeichnung);
    }
    .schritte .wabe { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--grund); }
  }

  .zwei-wege { display: grid; gap: var(--s4) var(--s5); margin-top: var(--s7); align-items: start; }
  .wege-frage { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  .weg { padding: var(--s5) var(--s5) var(--s4); border-radius: 2px; }
  .weg h3 { margin-top: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); letter-spacing: -0.01em; }
  .weg-fuer { background: var(--flaeche); }
  .weg-mit { border: 2px solid var(--strich); }
  .mappe { max-width: 26rem; }
  @media (min-width: 60rem) {
    .zwei-wege { grid-template-columns: 1fr 1fr 0.9fr; }
    .wege-frage { grid-column: 1 / -1; }
    .weg-mit { margin-top: var(--s5); }
  }

  /* ---- Die drei Felder: eine Gestalt in hell und dunkel (Fassung 5, Runde 2).
     Grund in 14 % Feldfarbe getönt, Kante in voller Feldfarbe, Überschrift und Zeichnung in der
     lesbaren Feldfarbe --f-text, Fließtext in Tinte. Vorher: hell volle Farbflächen, dunkel getönt. */
  .feld {
    background: color-mix(in srgb, var(--f) 14%, var(--grund)); color: var(--tinte);
    border-top: 8px solid var(--f); padding-block: var(--s7);
  }
  .feld a { color: inherit; text-decoration-thickness: 1.5px; }
  .feld[data-feld="it"] { --f: var(--it); --f-tinte: var(--it-tinte); --f-text: var(--it-text); }
  .feld[data-feld="pz"] { --f: var(--pz); --f-tinte: var(--pz-tinte); --f-text: var(--pz-text); }
  .feld[data-feld="ha"] { --f: var(--ha); --f-tinte: var(--ha-tinte); --f-text: var(--ha-text); }
  .feld h1, .feld h2 { color: var(--f-text); }
  .feld .innen { display: grid; gap: var(--s5) var(--s7); align-items: start; }
  @media (min-width: 64rem) {
    .feld .innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .feld:nth-of-type(even) .innen > figure { order: -1; }
  }
  .feld h2 { margin-bottom: var(--s4); }
  .feld .zeichnung { --z-strich: var(--f-text); --z-vor: color-mix(in srgb, var(--f-text) 32%, transparent); }
  .feld .zeichnung .marke-text { fill: var(--auf-text); }
  .feld .wabe { background: var(--f-text); color: var(--auf-text); }
  .feld .arbeiten li::before { background: var(--f-text); }
  .arbeiten { list-style: none; padding: 0; }
  .arbeiten li { position: relative; padding-left: 1.7em; margin-bottom: var(--s2); }
  .arbeiten li::before { /* die Wabe als Aufzählungszeichen, dieselbe Form wie die Ziffernmarke */
    content: ""; position: absolute; left: 0; top: 0.5em; width: 0.85em; height: 0.75em;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: currentColor;
  }
  .beleg {
    margin-top: var(--s5); padding-top: var(--s4);
    border-top: 1.5px solid var(--f-text, currentColor);
  }
  .beleg .abb { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: var(--s1); }

  /* ---- Zeichnungen */
  figure { margin: 0; }
  .zeichnung {
    --z-strich: var(--strich); --z-vor: var(--vorzeichnung);
    display: block; width: 100%; height: auto;
  }
  .zeichnung .vor { stroke: var(--z-vor); }
  .zeichnung .end { stroke: var(--z-strich); }
  .zeichnung .fuell { fill: var(--z-strich); }
  .zeichnung .marke-text { fill: var(--f, var(--grund)); font-family: var(--mono); font-weight: 700; }
  figcaption { margin-top: var(--s3); font-size: 0.95rem; }
  figcaption .abb { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: var(--s2); }
  .legende { padding-left: 0; list-style: none; margin: 0; counter-reset: l; }
  .legende li { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s2); }
  .legende .wabe { font-size: 0.78rem; }

  /* Bewegung: genau eine Stelle. Die Endlinie zieht sich beim ersten Sichtbarwerden,
     sichtbar bleibt sie auch ohne Unterstützung (Grundzustand = fertig gezeichnet). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:not([data-motion="aus"]) .zeichnung .end {
        stroke-dasharray: 1; stroke-dashoffset: 0;
        animation: ziehen linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
      }
    }
  }
  @keyframes ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* ---- Randnotiz und Belegzettel */
  .zettel { font-size: 0.95rem; color: var(--gedaempft); border-top: 1.5px solid var(--strich); padding-top: var(--s3); margin: var(--s4) 0; }
  .zettel b { color: var(--tinte); }
  .zettel .mono { color: var(--tinte); }

  /* ---- Fallbeschreibung */
  .fall-raster { display: grid; gap: var(--s5) var(--s6); margin-top: var(--s5); }
  @media (min-width: 56rem) { .fall-raster { grid-template-columns: 1fr 1fr; } }
  .fall-raster h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .fall-raster h3 .feldmarke { margin-right: 0; }
  .status {
    display: inline-block; margin-left: var(--s1);
    font-family: var(--mono); font-size: 0.78rem; font-weight: 600; line-height: 1.4;
    padding: 0 6px; border: 1px solid var(--gedaempft); border-radius: 2px; color: var(--gedaempft);
    white-space: nowrap;
  }

  /* ---- Personen */
  .personen { display: grid; gap: var(--s6); margin-top: var(--s5); }
  @media (min-width: 48rem) { .personen { grid-template-columns: 1fr 1fr; } }
  .person h3 { font-size: 1.6rem; margin: var(--s4) 0 0; letter-spacing: -0.01em; }
  .person .rolle { color: var(--gedaempft); margin-bottom: var(--s3); }
  .portrait { aspect-ratio: 4 / 5; max-width: 15rem; width: 100%; object-fit: cover; display: block; }

  /* ---- Platzhalter: fehlender Inhalt, sichtbar und unverwechselbar */
  .platzhalter {
    border: 1.5px dashed var(--gedaempft);
    padding: var(--s3) var(--s4); margin: var(--s4) 0;
    font-size: 0.95rem; color: var(--tinte); background: transparent;
    max-width: 40rem;
  }
  .platzhalter::before {
    content: "Fehlt noch"; display: block; margin-bottom: var(--s1);
    font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--gedaempft);
  }
  .portrait.platzhalter { max-width: 15rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s1); text-align: center; margin: 0; }

  /* ---- Tabellen */
  .daten { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: 0.98rem; }
  .daten caption { text-align: left; font-weight: 700; margin-bottom: var(--s2); }
  .daten th, .daten td { text-align: left; vertical-align: top; padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--linie); }
  .daten th { width: 15rem; font-weight: 600; color: var(--gedaempft); }
  .daten td.mono, .daten .mono { font-family: var(--mono); }
  .daten td .platzhalter { display: block; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); font-size: 0.9rem; }
  .feldmarke { display: inline-block; font-size: 0.85rem; font-weight: 700; padding: 1px var(--s2); border-radius: 2px; margin-right: var(--s2); background: var(--f); color: var(--f-tinte); }
  .feldmarke[data-feld="it"] { --f: var(--it); --f-tinte: var(--it-tinte); }
  .feldmarke[data-feld="pz"] { --f: var(--pz); --f-tinte: var(--pz-tinte); }
  .feldmarke[data-feld="ha"] { --f: var(--ha); --f-tinte: var(--ha-tinte); }
  @media (max-width: 36rem) {
    .daten th, .daten td { display: block; width: auto; border-bottom: none; padding-bottom: 0; }
    .daten td { padding-bottom: var(--s3); border-bottom: 1px solid var(--linie); }
  }

  /* ---- Kontakt */
  .kontakt { position: relative; }
  .kontakt::before { /* drei Felder, drei Farben, in der Reihenfolge der Felder: IT, Prozesse, Hausautomation */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: linear-gradient(90deg, var(--it) 0 33.33%, var(--pz) 33.33% 66.66%, var(--ha) 66.66% 100%);
  }
  .abschnitt.kontakt { border-top: 0; }
  .kontakt h2 { max-width: 20ch; }
  .mailzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s5) 0; }
  .mailzeile a { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem); font-weight: 700; color: var(--tinte); letter-spacing: -0.01em; overflow-wrap: anywhere; }
  .knopf {
    font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    color: var(--tinte); background: transparent;
    border: 1.5px solid var(--strich); border-radius: 2px;
    padding: var(--s2) var(--s4); min-height: 44px;
  }
  .knopf:hover { background: var(--tinte); color: var(--grund); }
  .erste-mail { padding-left: 1.2em; }

  /* ---- Abwesenheit (EULA Ziffer 7.2: angekündigte Abwesenheiten verlängern die Frist) */
  .erreichbarkeit { border: 1.5px solid var(--strich); padding: var(--s4); max-width: 40rem; margin: var(--s4) 0; }
  .erreichbarkeit h3 { margin-top: 0; }
  .erreichbarkeit .stand { font-family: var(--mono); font-size: 0.85rem; color: var(--gedaempft); }

  /* ---------------------------------------------------------------- Fuß */

  .fuss {
    background: var(--fuss-grund); color: var(--fuss-tinte); border-top: 1px solid var(--linie);
    padding-block: var(--s6) var(--s6); font-size: 0.95rem;
  }
  .fuss .innen { display: grid; gap: var(--s5); }
  @media (min-width: 56rem) { .fuss .innen { grid-template-columns: auto 1fr auto; align-items: start; } }
  .fuss img { height: 52px; width: auto; display: block; }
  .fuss a { color: var(--fuss-link); }
  .fuss .leise { color: var(--fuss-leise); }
  .fuss p { margin: 0 0 var(--s1); }
  .fuss .rechtliches { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .fuss .rechtliches a { display: inline-block; padding-block: var(--s2); }
  .nach-oben { display: inline-block; padding-block: var(--s2); margin-top: var(--s2); }
  .schalter-zeile { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
  .schalter {
    font: inherit; font-size: 0.88rem; cursor: pointer; min-height: 40px;
    background: transparent; color: var(--fuss-tinte);
    border: 1px solid var(--fuss-leise); border-radius: 2px; padding: var(--s1) var(--s3);
  }
  .schalter[aria-pressed="true"] { background: var(--fuss-tinte); color: var(--fuss-grund); }

  /* Unter 40rem: Zeichnungen, deren Aussage die Legende als Liste ohnehin trägt, entfallen
     zusammen mit dem Hinweis auf sie; die Legende bleibt als Text stehen. */
  /* Am Handy: vereinfacht statt verborgen. Ohne Vorzeichnung, gleich dicker Strich,
     größere Waben, damit die Ziffern der Legende auf etwas zeigen. */
  @media (max-width: 40rem) {
    .zeichnung .vor { display: none; }
    .zeichnung .end path { vector-effect: non-scaling-stroke; }
    .zeichnung .wm { transform: scale(1.55); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  }
  :root[data-motion="aus"] *, :root[data-motion="aus"] *::before, :root[data-motion="aus"] *::after {
    animation: none !important; transition: none !important;
  }

  @media print {
    .kopf .navi, .schalter-zeile, .knopf, .sprunglink { display: none; }
    .feld { background: none; color: #000; border-top: 4px solid var(--f); }
    .fuss { background: none; color: #000; }
  }

  /* ======================================================================
     Fassung 3: Die Werkstattzeichnung baut sich auf.
     Herleitung: konzept/R10 (Award-Recherche) und konzept/07. Grundsatz für jede Bewegung:
     Sie erklärt etwas, sie ist an das Lesen gebunden (Scroll-Zeitachse statt Zeitschaltung),
     und ohne sie ist die Seite vollständig. Alles hier ist Fortschritt, kein Fundament.
     ====================================================================== */

  /* ---- Seitenwechsel: das Logo bleibt stehen, der Inhalt wechselt */

  .marke { view-transition-name: marke; }
  .navi { view-transition-name: navi; }
  ::view-transition-old(root) { animation: 180ms cubic-bezier(.4,0,1,1) both seite-raus; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(.16,1,.3,1) both seite-rein; }
  @keyframes seite-raus { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes seite-rein { from { opacity: 0; transform: translateY(12px); } }

  /* ---- Kopf: bleibt oben, bekommt beim Scrollen eine Kante */
  @media (min-width: 40.01rem) {
    .kopf {
      position: sticky; top: 0; z-index: 20;
      background: var(--grund);
    }
    @supports (animation-timeline: scroll()) {
      .kopf { animation: kante linear both; animation-timeline: scroll(); animation-range: 0 120px; }
    }
  }
  @keyframes kante { to { box-shadow: 0 1px 0 var(--linie), 0 8px 24px -16px rgb(0 0 0 / 0.25); } }
  html { scroll-padding-top: 88px; }


  /* ---- Abschnitte erscheinen, wenn man zu ihnen kommt (an die Scrollposition gebunden) */
  @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 0% entry 55%;
      }
      /* Die Schrittlinie zieht sich mit dem Lesen */
      :root:not([data-motion="aus"]) .schritte::before,
      :root:not([data-motion="aus"]) .schritte::after {
        transform-origin: left center;
        animation: linie-zieht linear both; animation-timeline: view(); animation-range: entry 30% cover 45%;
      }
      :root:not([data-motion="aus"]) .schritte li { animation: erscheinen linear both; animation-timeline: view(); }
      :root:not([data-motion="aus"]) .schritte li:nth-child(1) { animation-range: entry 20% entry 60%; }
      :root:not([data-motion="aus"]) .schritte li:nth-child(2) { animation-range: entry 30% entry 70%; }
      :root:not([data-motion="aus"]) .schritte li:nth-child(3) { animation-range: entry 40% entry 80%; }
      :root:not([data-motion="aus"]) .schritte li:nth-child(4) { animation-range: entry 50% entry 90%; }
      :root:not([data-motion="aus"]) .schritte li:nth-child(5) { animation-range: entry 60% entry 100%; }
    }
  }
  @keyframes erscheinen { from { opacity: 0; transform: translateY(28px); } }
  @keyframes linie-zieht { from { transform: scaleX(0); } }

  /* ---- Produkt: Editionen nebeneinander */
  .editionen { display: grid; gap: var(--s4); margin-top: var(--s5); }
  @media (min-width: 56rem) { .editionen { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
  .edition { padding: var(--s5); border-radius: 3px; display: flex; flex-direction: column; gap: var(--s2); }
  .edition h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.015em; }
  .edition .kurz { font-size: 1.15rem; font-weight: 600; margin: 0 0 var(--s2); }
  .edition-lite { background: var(--flaeche); }
  .edition-pro { background: var(--ha); color: var(--ha-tinte); }
  .edition-pro a { color: inherit; }
  .edition-pro .status, .edition-pro .leise { color: inherit; border-color: currentColor; }
  .edition .preis { margin-top: auto; padding-top: var(--s3); border-top: 1.5px solid currentColor; }

  /* ---- Produkt: Was die KI tun soll (reines CSS); Layout siehe "Beispiele" weiter unten */
  .wahl { display: block; }
  .wahl input { position: absolute; opacity: 0; pointer-events: none; }
  .wahl input:checked + span { border-color: var(--strich); background: var(--flaeche); }
  .wahl input:focus-visible + span { outline: 2px solid var(--strich); outline-offset: 3px; }
  .ablauf { display: none; }
  .ablauf ol { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
  .ablauf li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--linie); max-width: none; }
  .ablauf li b { display: block; }
  .ablauf .frage { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="aus"]) .ablauf li { animation: 420ms cubic-bezier(.16,1,.3,1) both erscheinen; }
    :root:not([data-motion="aus"]) .ablauf li:nth-child(2) { animation-delay: 90ms; }
    :root:not([data-motion="aus"]) .ablauf li:nth-child(3) { animation-delay: 180ms; }
    :root:not([data-motion="aus"]) .ablauf li:nth-child(4) { animation-delay: 270ms; }
    :root:not([data-motion="aus"]) .ablauf li:nth-child(5) { animation-delay: 360ms; }
  }

  /* ---- Vergleichstabelle */
  .vergleich { width: 100%; border-collapse: collapse; margin-top: var(--s5); font-size: 0.98rem; }
  .vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--linie); }
  .vergleich thead th { font-size: 1.05rem; border-bottom: 2px solid var(--strich); }
  .vergleich tbody th { font-weight: 600; width: 34%; }
  @media (max-width: 36rem) { .vergleich { font-size: 0.92rem; } .vergleich tbody th { width: auto; } }

  /* ---- Hilfe: Einrichtung, Code, Fragen */
  .anleitung { list-style: none; padding: 0; margin: var(--s5) 0 0; counter-reset: s; display: grid; gap: var(--s5); }
  .anleitung > li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); max-width: 52rem; }
  .anleitung > li > .wabe { font-size: 1.1rem; margin-top: 2px; }
  .anleitung h3 { margin-top: 0; }
  pre, code { font-family: var(--mono); }
  pre {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
    padding: var(--s4); overflow-x: auto; font-size: 0.9rem; line-height: 1.55; max-width: 100%;
  }
  code { font-size: 0.92em; }
  p code, li code, td code { background: var(--flaeche); padding: 1px 5px; border-radius: 2px; }
  .fragen { display: grid; gap: var(--s2); margin-top: var(--s4); max-width: 52rem; }
  .fragen details { border-top: 1.5px solid var(--linie); padding: var(--s3) 0; }
  .fragen details[open] { border-top-color: var(--strich); }
  .fragen summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary::after { content: "+"; font-family: var(--mono); font-weight: 700; transition: transform 220ms cubic-bezier(.16,1,.3,1); }
  .fragen details[open] summary::after { transform: rotate(45deg); }
  .fragen details > :not(summary) { margin-top: var(--s3); }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .fragen details::details-content { height: 0; overflow: clip; transition: height 300ms cubic-bezier(.16,1,.3,1), content-visibility 300ms allow-discrete; }
    .fragen details[open]::details-content { height: auto; }
  }
  .inhalt-sprung { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none; }
  .inhalt-sprung a { font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

  /* ---- Produktseite: Panelbild und Vorteile */
  .panelbild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 3px; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35); }
  .panelbild figcaption { font-size: 0.95rem; }
  .vorteile h3 { font-size: 1.15rem; }
  .edition .arbeiten li { margin-bottom: var(--s1); }
  .anleitung pre { margin: var(--s2) 0 var(--s3); }
  .edition-pro .platzhalter { color: inherit; border-color: currentColor; }
  .edition-pro .platzhalter::before { color: inherit; }
  .anleitung > li > div { min-width: 0; }
  p code, li code, td code { overflow-wrap: anywhere; word-break: break-word; }
  .vergleich { table-layout: auto; }
  .vergleich td, .vergleich th { overflow-wrap: anywhere; }


  /* ---- Beispiele: das Ergebnis steht direkt unter der gewählten Frage (mobil), daneben (Desktop) */
  .beispiele { display: block; }
  .beispiele-titel { font-weight: 700; margin-bottom: var(--s3); }
  .beispiele-raster { display: grid; gap: var(--s2); align-items: start; }
  .beispiele-raster .ablauf { border: 1.5px solid var(--strich); border-radius: 3px; padding: var(--s4); margin-bottom: var(--s3); }
  .beispiele-raster > .ablauf:nth-child(2) { display: block; } /* ohne :has() sichtbar: das erste */
  @supports selector(:has(*)) {
    .beispiele-raster > .ablauf:nth-child(2) { display: none; }
    .beispiele-raster:has(#b1:checked) .ablauf[data-b="1"],
    .beispiele-raster:has(#b2:checked) .ablauf[data-b="2"],
    .beispiele-raster:has(#b3:checked) .ablauf[data-b="3"],
    .beispiele-raster:has(#b4:checked) .ablauf[data-b="4"],
    .beispiele-raster:has(#b5:checked) .ablauf[data-b="5"],
    .beispiele-raster:has(#b6:checked) .ablauf[data-b="6"] { display: block; }
  }
  @media (min-width: 60rem) {
    .beispiele-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--s5); }
    .beispiele-raster > .wahl { grid-column: 1; }
    .beispiele-raster > .ablauf { grid-column: 2; grid-row: 1 / span 6; margin: 0; padding: var(--s5); min-height: 24rem; }
  }
  .ergebnis { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 2px solid var(--strich); font-size: 1.05rem; }
  /* Selektor nur für die Karte, nicht für die Marken darin; Kante mindestens 3:1 */
  .wahl span { display: inline; padding: 0; border: 0; }
  .wahl > span {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline;
    padding: var(--s3) var(--s4); border: 1.5px solid var(--kante); border-radius: 3px; cursor: pointer;
  }
  .wahl > span .status, .wahl > span .feldmarke { display: inline-block; }
  .wahl > span .status { padding: 0 6px; border: 1px solid var(--gedaempft); }
  .wahl > span .feldmarke { padding: 1px var(--s2); }
  :root { --kante: #727477; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kante: #7a7e83; } }
  :root[data-theme="dark"] { --kante: #7a7e83; }

  /* ---- Polish 3.1 */
  @media (min-width: 40.01rem) { .kopf { box-shadow: 0 1px 0 var(--linie); } }
  .vergleich .ja, .vergleich .nein { font-family: var(--mono); font-weight: 700; }
  .vergleich .nein { color: var(--gedaempft); }

  /* ---- Lite und Professional gleich laut */
  .edition-lite, .edition-pro { background: var(--grund); color: var(--tinte); border: 2px solid var(--strich); border-top: 10px solid var(--ha); }
  .edition-pro a { color: var(--link); }
  .edition-pro .status, .edition-pro .leise { color: var(--gedaempft); border-color: var(--gedaempft); }
  .edition-pro .platzhalter, .edition-pro .platzhalter::before { color: var(--tinte); border-color: var(--gedaempft); }
  .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s4) 0; }
  .knopf-stark {
    display: inline-flex; align-items: center; min-height: 48px; padding: var(--s2) var(--s5);
    background: var(--tinte); color: var(--grund) !important; text-decoration: none; font-weight: 700;
    border-radius: 3px; transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease;
  }
  .knopf-stark:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.5); }
  .feld .status { color: inherit; border-color: currentColor; }
  .knopf-code { display: block; margin: calc(-1 * var(--s2)) 0 var(--s3) auto; min-height: 36px; font-size: 0.85rem; padding: var(--s1) var(--s3); }

  /* ---- Hilfe: Edition wählbar, ohne Skript */
  .edition-wahl { display: inline-flex; border: 2px solid var(--strich); border-radius: 3px; margin: var(--s2) 0 var(--s4); }
  .edition-wahl label { position: relative; }
  .edition-wahl input { position: absolute; opacity: 0; }
  .edition-wahl span { display: block; padding: var(--s2) var(--s5); font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
  .edition-wahl input:checked + span { background: var(--tinte); color: var(--grund); }
  .edition-wahl input:focus-visible + span { outline: 2px solid var(--strich); outline-offset: 3px; }
  .hilfe .nur-pro { display: none; }
  @supports selector(:has(*)) {
    .hilfe:has(#ed-pro:checked) .nur-pro { display: inline; }
    .hilfe:has(#ed-pro:checked) .nur-lite { display: none; }
  }

  /* ======================================================================
     Fassung 3.2
     ====================================================================== */

  /* ---- Fokus auf Feldflächen: Doppelring aus Feldtinte und Feldfarbe, hell wie dunkel ≥ 3:1 */


  /* ---- Layout 3.2: Produkt-Überschrift kürzer, Handy-Einstieg in voller Breite */
  .feld h1 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 3.8rem); line-height: 1.04; letter-spacing: -0.03em; }
  @media (max-width: 39.99rem) {
    .abschnitt { padding-block: var(--s6); }
  }

  /* ---- Hilfe 3.2: Umschalter läuft mit, Codeblöcke tragen ihre Edition, Kopierknopf am Block */
  .edition-wahl { position: sticky; top: var(--s2); z-index: 5; background: var(--grund); box-shadow: 0 6px 16px -12px rgb(0 0 0 / 0.35); }
  @media (min-width: 40.01rem) { .edition-wahl { top: 92px; } }
  .hilfe pre { position: relative; padding-top: calc(var(--s4) + 18px); }
  .hilfe pre::before {
    content: "Lite"; position: absolute; top: var(--s2); left: var(--s4);
    font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--gedaempft); letter-spacing: 0.02em;
  }
  @supports selector(:has(*)) { .hilfe:has(#ed-pro:checked) pre::before { content: "Professional"; } }
  .hilfe pre:not(:has(.nur-lite))::before { content: none; }
  .knopf-code { position: absolute; top: var(--s2); right: var(--s2); margin: 0; min-height: 32px; background: var(--grund); }

  /* ---- Polish 3.2 */
  @media (min-width: 60rem) {
    .beispiele-raster { grid-template-rows: repeat(6, min-content) 1fr; }
    .beispiele-raster > .ablauf { grid-row: 1 / -1; }
  }
  .edition, .edition-lite, .edition-pro { border-radius: 0; }
  .status-laeuft { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
  .status-probe { border-style: dashed; }
  .abschnitt + .abschnitt.kontakt { border-top: 0; }
  .bild-gross { display: block; cursor: zoom-in; }
  .bild-gross:hover img { box-shadow: 0 22px 48px -22px rgb(0 0 0 / 0.45); }

  /* ---- Hilfe 3.3: vollbreite Edition-Leiste, die nichts verdeckt; Kennung sichtbar */
  .edition-leiste {
    position: sticky; top: 0; z-index: 6;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
    margin: var(--s3) calc(-1 * var(--rand)) var(--s5); padding: var(--s3) var(--rand);
    background: var(--grund); border-block: 1px solid var(--linie);
  }
  @media (min-width: 40.01rem) { .edition-leiste { top: 84px; } }
  .edition-leiste .edition-wahl { position: static; margin: 0; box-shadow: none; }
  .edition-frage { font-weight: 600; }
  .schritt-ziel { scroll-margin-top: 170px; }
  .hilfe pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .hilfe pre .nur-lite, .hilfe pre .nur-pro {
    background: color-mix(in srgb, var(--ha) 38%, transparent); font-weight: 700;
    border-radius: 2px; padding: 0 2px;
  }

  /* ---- Produkt 3.3: Vorteile als Liste (keine Reihenfolge, also keine Zeitleiste) */
  .vorteil-liste { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s4) var(--s5); }
  @media (min-width: 48rem) { .vorteil-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) { .vorteil-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vorteil-liste li { position: relative; padding-left: 1.7em; max-width: none; }
  .vorteil-liste li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9em; height: 0.8em; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: var(--strich); }
  .vorteil-liste h3 { margin: 0 0 var(--s1); font-size: 1.12rem; }
  .vorteil-liste p { margin: 0; }
  .beispiele { margin-top: var(--s6); }
  .status-zeile { font-weight: 600; color: var(--gedaempft); border-top: 1.5px solid var(--linie); padding-top: var(--s2); }
  .panelbild-gross { max-width: 62rem; margin-top: var(--s4); }
  /* Navigation am Handy mit „Wer wir sind“ in einer Zeile */
  @media (max-width: 40rem) {
    .navi { font-size: 0.86rem; gap: 0 var(--s2); letter-spacing: -0.005em; }
  }
  @media (max-width: 22.5rem) { .navi { font-size: 0.8rem; } }


  [hidden] { display: none !important; }

  /* ======================================================================
     Fassung 5: Die Wabe führt. Ein Einstieg, ein Bauteil je Aufgabe.
     Ersetzt alle früheren Einstiegsregeln (Fassung 3 bis 4.2 sind hier zusammengeführt).
     ====================================================================== */

  :root { --mitte: #2b2f33; --mitte-text: #f4f4f2; --mitte-kante: #2b2f33; --ki-schrift: #1f2326; --auf-text: #ffffff; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --mitte: #0b0d0f; --mitte-text: #f4f4f2; --mitte-kante: #e6e7e8; --auf-text: #16191c; }
  }
  :root[data-theme="dark"] { --mitte: #0b0d0f; --mitte-text: #f4f4f2; --mitte-kante: #e6e7e8; --auf-text: #16191c; }


  /* ---- Einstieg: Überschrift, Vorspann, die Mail; daneben die Kugel als Netz (Abb. 1) mit den
     drei Türen direkt darunter. Quelltext-Reihenfolge = Lese- und Tab-Reihenfolge am Desktop:
     Aussage, Aktion, dann das Bild mit seinen Türen. */
  .einstieg-band { padding-block: var(--s5) var(--s6); overflow: clip; }
  .einstieg {
    position: relative; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "bild" "aktion" "text";
  }
  .e-kopf { grid-area: kopf; } .e-bild { grid-area: bild; display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
  .e-aktion { grid-area: aktion; } .e-text { grid-area: text; }
  .e-kopf, .e-tueren, .e-aktion, .e-text { position: relative; z-index: 1; }
  .einstieg h1 {
    font-size: clamp(2.2rem, 0.5rem + 3.9vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em;
    font-weight: 800; margin: 0; max-width: none;
  }
  .einstieg h1 .zeile { display: block; }
  .einstieg h1 .leicht { font-weight: 300; letter-spacing: -0.03em; }
  .e-text .vorspann { margin-bottom: var(--s3); }
  .wer { color: var(--gedaempft); margin: 0; }
  .wer b { color: var(--tinte); font-weight: 600; }

  /* Abb. 1: die Bildunterschrift erklärt das Netz ohne Zeigen */
  .e-kugel { position: relative; margin: 0; }
  .e-kugel figcaption { margin-top: var(--s2); font-size: 0.92rem; line-height: 1.45; color: var(--gedaempft); max-width: 24rem; }
  .e-kugel figcaption .abb { display: inline; font-weight: 700; color: var(--tinte); margin-right: 0.35em; }
  /* Die Kugel */
  .kugel { display: block; width: 100%; height: auto; overflow: visible; }
  .kugel .kugel-rest { fill: var(--strich); 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:not(.kki) { fill: color-mix(in srgb, var(--it) 55%, var(--grund)); }
  .kugel .kb-pz:not(.kki) { fill: color-mix(in srgb, var(--pz) 55%, var(--grund)); }
  .kugel .kb-ha:not(.kki) { fill: color-mix(in srgb, var(--ha) 55%, var(--grund)); }
  .netz { --nf: var(--strich); transition: opacity 260ms cubic-bezier(.16,1,.3,1); }
  .netz-it { --nf: var(--it-text); } .netz-pz { --nf: var(--pz-text); } .netz-ha { --nf: var(--ha-text); }
  .netz .nl { fill: none; stroke: var(--nf); stroke-width: 7; stroke-linecap: round; }
  .netz .nl-stamm { stroke-width: 12; }
  .netz .np { fill: var(--grund); stroke: var(--nf); stroke-width: 7; }
  .netz .ns-ki { font-family: var(--mono); font-weight: 700; font-size: 40px; text-anchor: middle; fill: var(--ki-schrift); }
  .schild rect { fill: var(--grund); stroke: var(--nf); stroke-width: 5; }
  .schild text { font-family: var(--mono); font-weight: 700; font-size: 36px; text-anchor: middle; fill: var(--tinte); }
  .mitte { transform-box: fill-box; transform-origin: 50% 50%; }
  .mitte .km { fill: var(--mitte); stroke: var(--mitte-kante); stroke-width: 2px; vector-effect: non-scaling-stroke; }
  .mitte .ns-mitte { font-family: var(--text); font-weight: 750; font-size: 44px; letter-spacing: -0.01em; text-anchor: middle; fill: var(--mitte-text); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kugel .kugel-rest { opacity: 0.5; } }
  :root[data-theme="dark"] .kugel .kugel-rest { opacity: 0.5; }

  /* Türen: jede Tür ist ihr Feldabschnitt im Kleinen (getönter Grund, Kante in Feldfarbe),
     hell wie dunkel dieselbe Gestalt. Ist das Feld gewählt (Zeigen, Fokus, Zeigen aufs Netz),
     füllt sich die Tür mit der vollen Feldfarbe. Eine Zeile: Marke, Feld, Inhalt, Pfeil. */
  .tueren { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .tueren li { max-width: none; }
  .tuer {
    --f-text: var(--tinte);
    display: flex; align-items: center; gap: var(--s3);
    min-height: 50px; padding: var(--s2) var(--s4);
    background: color-mix(in srgb, var(--f) 14%, var(--grund)); color: var(--tinte); text-decoration: none;
    border-top: 3px solid var(--f); border-radius: 0 0 3px 3px;
    transition: background-color 200ms cubic-bezier(.16,1,.3,1), color 200ms ease;
  }
  .tuer[data-feld="it"] { --f: var(--it); --f-tinte: var(--it-tinte); }
  .tuer[data-feld="pz"] { --f: var(--pz); --f-tinte: var(--pz-tinte); }
  .tuer[data-feld="ha"] { --f: var(--ha); --f-tinte: var(--ha-tinte); }
  .tuer-wabe { flex: none; width: 18px; height: 16px; background: var(--f); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); transition: background-color 200ms ease; }
  .tuer strong { font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
  .tuer-text { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; line-height: 1.3; color: var(--gedaempft); transition: color 200ms ease; }
  .tuer .pfeil { flex: none; margin-left: auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(.16,1,.3,1); }
  .tuer:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
  /* Die Mail: die einzige gefüllte Aktion der Seite, oben wie im Kontakt gleich */
  .e-aktion .mail-anlass { margin: 0 0 var(--s2); color: var(--gedaempft); }
  .e-aktion .mailzeile { margin: 0; }
  .mailzeile { gap: var(--s2) var(--s3); }
  .mailzeile .mail-knopf { padding-inline: var(--s4); font-size: clamp(1.02rem, 0.9rem + 0.3vw, 1.15rem); letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
  .mail-knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
  .mail-hilfe { margin: var(--s3) 0 0; font-size: 0.95rem; color: var(--gedaempft); max-width: 34rem; }
  .mail-hilfe a { color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .kontakt .mailzeile { margin: var(--s4) 0 var(--s5); }

  /* Ein Feld wählen: Zeigen auf seine Tür oder sein Netz (nur mit Maus) oder Fokus auf der Tür.
     Dann bleibt sein Netz, die anderen treten zurück, die Tür füllt sich, die Führungslinie wird voll.
     Auf Touch führt Tippen (Tür oder Netz) direkt ins Feld; nichts bleibt hängen. */
  .netz-ziel { cursor: pointer; }
  .netz-ziel:focus { outline: none; }
  .einstieg:has(.tuer[data-feld="it"]:focus-visible) :is(.netz-pz, .netz-ha, .kugel-rest),
  .einstieg:has(.tuer[data-feld="pz"]:focus-visible) :is(.netz-it, .netz-ha, .kugel-rest),
  .einstieg:has(.tuer[data-feld="ha"]:focus-visible) :is(.netz-it, .netz-pz, .kugel-rest) { opacity: 0.16; }
  .tuer:focus-visible { background: color-mix(in srgb, var(--f) 34%, var(--grund)); color: var(--tinte); }
  .tuer:focus-visible .tuer-text { color: inherit; }
  .tuer:focus-visible .tuer-wabe { background: var(--f); }
  @media (hover: hover) and (pointer: fine) {
    .tuer:hover { background: color-mix(in srgb, var(--f) 34%, var(--grund)); color: var(--tinte); }
    .tuer:hover .tuer-text { color: inherit; }
    .tuer:hover .tuer-wabe { background: var(--f); }
    .tuer:hover .pfeil { transform: translateX(4px); }
    .einstieg:has(:is(.tuer, .netz-ziel)[data-feld="it"]:hover) :is(.netz-pz, .netz-ha, .kugel-rest),
    .einstieg:has(:is(.tuer, .netz-ziel)[data-feld="pz"]:hover) :is(.netz-it, .netz-ha, .kugel-rest),
    .einstieg:has(:is(.tuer, .netz-ziel)[data-feld="ha"]:hover) :is(.netz-it, .netz-pz, .kugel-rest) { opacity: 0.16; }
    .einstieg:has(.netz-ziel[data-feld="it"]:hover) .tuer[data-feld="it"],
    .einstieg:has(.netz-ziel[data-feld="pz"]:hover) .tuer[data-feld="pz"],
    .einstieg:has(.netz-ziel[data-feld="ha"]:hover) .tuer[data-feld="ha"] { background: color-mix(in srgb, var(--f) 34%, var(--grund)); color: var(--tinte); }
    .einstieg:has(.netz-ziel[data-feld="it"]:hover) .tuer[data-feld="it"] :is(.tuer-text, .pfeil),
    .einstieg:has(.netz-ziel[data-feld="pz"]:hover) .tuer[data-feld="pz"] :is(.tuer-text, .pfeil),
    .einstieg:has(.netz-ziel[data-feld="ha"]:hover) .tuer[data-feld="ha"] :is(.tuer-text, .pfeil) { color: inherit; }
    .einstieg:has(.netz-ziel[data-feld="it"]:hover) .tuer[data-feld="it"] .tuer-wabe,
    .einstieg:has(.netz-ziel[data-feld="pz"]:hover) .tuer[data-feld="pz"] .tuer-wabe,
    .einstieg:has(.netz-ziel[data-feld="ha"]:hover) .tuer[data-feld="ha"] .tuer-wabe { background: var(--f); }
  }
  /* Aufbau der Kugel: eine Stelle, Grundzustand = fertiges Netz */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="aus"]) .kugel .kugel-rest { animation: 900ms cubic-bezier(.16,1,.3,1) backwards netz-auf; }
    :root:not([data-motion="aus"]) .netz { animation: 600ms cubic-bezier(.16,1,.3,1) backwards netz-auf; }
    :root:not([data-motion="aus"]) .netz-it { animation-delay: 300ms; }
    :root:not([data-motion="aus"]) .netz-pz { animation-delay: 420ms; }
    :root:not([data-motion="aus"]) .netz-ha { animation-delay: 540ms; }
    :root:not([data-motion="aus"]) .netz .nl { stroke-dasharray: 1; animation: 640ms cubic-bezier(.16,1,.3,1) 700ms backwards netz-zieht; }
  }
  @keyframes netz-auf { from { opacity: 0; } }
  @keyframes netz-zieht { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* Handy: Überschrift, Kugel, drei Türen in einer Zeile, Mail; Vorspann danach */
  @media (max-width: 39.99rem) {
    .einstieg-band { padding-top: var(--s4); }
    .einstieg { gap: var(--s3); }
    .schild .sg { transform: scale(1.65); }
    .netz .ns-ki { font-size: 62px; }
    .mitte { transform: scale(1.35); }
    .tueren { display: flex; flex-wrap: wrap; gap: 6px; }
    .tueren li { flex: 1 1 auto; }
    .tuer { justify-content: center; gap: 7px; padding: 0 var(--s3); min-height: 48px; }
    .tuer-wabe { width: 11px; height: 10px; }
    .tuer strong { font-size: 1rem; }
    .tuer-text, .tuer .pfeil { display: none; }
    .e-aktion { margin-top: var(--s2); }
    .e-text { margin-top: var(--s4); }
    .e-text .vorspann { font-size: 1.12rem; }
    .wer { font-size: 0.92rem; }
  }

  /* Tablet: Überschrift, Aussage und Mail links, Kugel mit Türen rechts */
  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf bild" "text bild" "aktion bild"; grid-template-rows: auto auto 1fr; column-gap: var(--s5); align-items: start; }
    .e-kugel { margin-right: calc(-1 * var(--rand)); }
    .schild .sg { transform: scale(1.5); }
    .netz .ns-ki { font-size: 56px; }
    .mitte { transform: scale(1.25); }
    .tuer-text { display: none; }
    .e-aktion { margin-top: var(--s3); }
  }

  /* Desktop: links Aussage, Vorspann und Mail; rechts die Kugel angeschnitten, Türen direkt darunter */
  @media (min-width: 64rem) {
    .einstieg {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "kopf bild" "text bild" "aktion bild";
      grid-template-rows: auto auto 1fr;
      column-gap: var(--s6); row-gap: var(--s5); align-items: start;
    }
    .e-bild { gap: 0; }
    .e-kugel { margin-right: calc(-1 * var(--rand) - 4vw); margin-top: calc(-1 * var(--s3)); }
    .e-kugel figcaption {
      position: absolute; right: calc(var(--rand) + 4vw); bottom: 20%; max-width: 12.5rem; margin: 0;
      padding-top: var(--s2); border-top: 1.5px solid var(--strich);
    }
    .e-tueren { margin-top: calc(-1 * var(--s4)); }
  }
  @media (min-width: 64rem) and (max-width: 79.99rem) { .schild .sg { transform: scale(1.2); } .netz .ns-ki { font-size: 46px; } .mitte { transform: scale(1.1); } .tuer-text { font-size: 0.9rem; } }

  /* ---- Kopf am Handy: die Navigationszeile bleibt stehen, das Logo scrollt weg */
  @media (max-width: 40rem) {
    .kopf { position: sticky; top: calc(-1 * (36px + var(--s3) + var(--s2))); z-index: 20; background: var(--grund); box-shadow: 0 1px 0 var(--linie); }
    html { scroll-padding-top: 68px; }
    .navi a { text-align: center; }
  }

  /* ---- Belege und Fall: Satzanfang fett statt Etikett */
  .beleg p { margin-bottom: var(--s2); }
  .beleg p:last-child { margin-bottom: 0; }
  .fall h3 { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 1.2rem; }
  .fall h3 .feldmarke { margin-right: 0; }
  .fall .status { margin: 0 var(--s1) 0 0; }


  /* ---- Zwei Wege: beide Wege dieselbe Gestalt, die Mappe daneben */
  .weg { border: 1.5px solid var(--kante); background: transparent; }
  @media (min-width: 60rem) { .zwei-wege { grid-template-columns: 1fr 1fr 0.9fr; } }

  /* ---- Mit wem Sie reden: Herkunft, Personen, Kunden in einem Abschnitt */
  .herkunft { max-width: var(--lesespalte); }
  .herkunft .vorspann { margin-bottom: var(--s3); }
  .kunden-titel { margin-top: var(--s7); font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); letter-spacing: -0.01em; }
  .daten td .platzhalter[hidden] { display: none !important; }

  /* ---- Ablauf schmal: Schienen statt Stapel, die Wabe sitzt auf der Linie */
  @media (max-width: 59.99rem) {
    .schritte { gap: var(--s4); margin-top: var(--s5); }
    .schritte::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: calc(1.05em - 1px); border-left: 2px solid var(--strich); }
    .schritte li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
    .schritte li .wabe { grid-row: 1 / span 2; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--grund); }
    .schritte h3 { margin: 0 0 var(--s1); }
  }
  @media (max-width: 39.99rem) {
    .zwei-wege { margin-top: var(--s6); }
    .zwei-wege .mappe { display: none; }
    .einstieg-band { padding-bottom: var(--s5); }
  }
  @media (min-width: 64rem) { .einstieg-band { padding-bottom: var(--s5); } }
  .navi a { min-width: 24px; text-align: center; }
  /* Hilfe am Handy: die Edition-Leiste rastet unter der stehenden Navigationszeile ein */
  @media (max-width: 40rem) {
    .edition-leiste { top: 57px; }
    .schritt-ziel { scroll-margin-top: 200px; }
  }

  /* ======================================================================
     Fassung 5, Runde 2: Haltung als Doppelseite, Mappe auch am Handy, Ziele ≥ 24 px
     ====================================================================== */
  .haltung-text > :last-child { margin-bottom: 0; }
  @media (min-width: 64rem) {
    .haltung .innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: start; }
    .haltung h2 { margin: 0; }
    .haltung-text { padding-top: var(--s3); }
  }
  .weiter a { display: inline-block; padding-block: 4px; font-weight: 600; }
  figcaption .abb-satz { display: block; margin-bottom: var(--s2); }
  @media (max-width: 39.99rem) {
    .zwei-wege .mappe { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s4); align-items: center; max-width: none; }
    .zwei-wege .mappe figcaption { margin: 0; }
    .feld { padding-block: var(--s6); }
    .feld .innen { gap: var(--s5); }
    .weg { padding: var(--s4) var(--s4) var(--s3); }
  }
  .haltung-text > p:first-child { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; }


  /* ======================================================================
     Fassung 5, Runde 3: jede Tatsache einmal, am stärksten Ort.
     KI-Band aufgelöst in je eine KI-Zeile pro Feld (die KI-Wabe der Kugel kehrt dort wieder),
     Belege in einer Gestalt, „Mit wem Sie reden“ als Satzspiegel mit Kundenspalte.
     ====================================================================== */

  /* Führungslinie: in Ruhe unsichtbar, nur das gewählte Feld zeigt seine Bemaßung */
  .tuer { border-top-width: 3px; }
  .tuer:focus-visible .tuer-text { color: var(--tinte); }

  /* KI-Zeile: dieselbe KI-Wabe wie in der Kugel, in der Feldfarbe */
  .ki-zeile { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) 0 0; max-width: 40rem; }
  .ki-wabe {
    flex: none; display: inline-grid; place-items: center; width: 2.7rem; height: 2.35rem; margin-top: 2px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: var(--f); color: var(--ki-schrift);
    font-family: var(--mono); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  }

  /* Belege: eine Gestalt in allen drei Feldern (Feldmarke + Überschrift, Text, Weiterlesen) */
  .beleg h3 { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 1.2rem; }
  .beleg h3 .feldmarke { margin-right: 0; }
  .beleg .status { margin: 0 var(--s1) 0 0; }

  /* Weiterlesen: eine Gestalt auf der ganzen Seite, eigene Zeile, Ziel ≥ 24 px */
  .weiter { margin: var(--s2) 0 0; }
  .weiter a { display: inline-block; padding-block: 4px; font-weight: 600; color: var(--tinte); text-decoration-thickness: 1.5px; }
  .weiter a:hover { text-decoration-thickness: 2.5px; }

  /* Zwei Wege: Frage über den beiden Wegen, die Mappe daneben; Wege gleich hoch */
  @media (min-width: 60rem) {
    .zwei-wege { grid-template-columns: 1fr 1fr 0.9fr; grid-template-rows: auto 1fr; align-items: stretch; column-gap: var(--s5); }
    .zwei-wege .wege-frage { grid-column: 1 / 3; grid-row: 1; align-self: end; }
    .zwei-wege .weg { grid-row: 2; }
    .zwei-wege .mappe { grid-column: 3; grid-row: 1 / 3; align-self: start; }
  }

  /* Mit wem Sie reden: links Herkunft und Personen, rechts die Kunden mit Registerzettel */
  .leute { display: grid; gap: var(--s6); }
  .leute-text > p { max-width: var(--lesespalte); }
  .leute .personen { margin-top: var(--s5); gap: var(--s5); }
  .leute .person h3 { font-size: 1.35rem; margin-top: 0; }
  .leute .person p:last-child { margin-bottom: 0; }
  .leute-rand { border-top: 1.5px solid var(--strich); padding-top: var(--s4); }
  .leute-rand .kunden-titel { margin: 0 0 var(--s2); font-size: 1.35rem; }
  .kunden-satz { font-size: 0.95rem; color: var(--gedaempft); }
  .kunden { list-style: none; padding: 0; margin: 0 0 var(--s4); }
  .kunden li { padding: var(--s3) 0; border-bottom: 1px solid var(--linie); line-height: 1.5; }
  .kunden li:first-child { border-top: 1px solid var(--linie); }
  .kunden b { font-weight: 700; }
  .kunden .feldmarke { margin: 0 0 0 4px; font-size: 0.78rem; vertical-align: 1px; }
  .leute-rand .zettel { border-top: 0; padding-top: 0; margin-bottom: 0; }
  @media (min-width: 64rem) {
    .leute { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
    .leute-rand { margin-top: var(--s2); }
  }

  /* Schalter im Kopf: Erscheinungsbild direkt erreichbar, nicht nur im Fuß */
  .kopf-schalter { display: none; }
  @media (min-width: 56rem) {
    .kopf-schalter {
      display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: calc(-1 * var(--s2));
      background: transparent; color: var(--tinte); border: 1px solid transparent; border-radius: 2px; cursor: pointer;
    }
    .kopf-schalter:hover { border-color: var(--strich); }
    .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; }
  }

  /* Einstieg schmal: Türen mit ihrem Inhalt (zweizeilig), am Handy unter der Mail */
  @media (max-width: 63.99rem) {
    .tuer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0; align-items: center; padding-block: 7px; }
    .tuer .tuer-wabe { grid-row: 1 / span 2; }
    .tuer strong { grid-column: 2; }
    .tuer .tuer-text { display: block; grid-column: 2; font-size: 0.9rem; }
    .tuer .pfeil { display: block; grid-column: 3; grid-row: 1 / span 2; }
  }
  @media (max-width: 39.99rem) {
    .einstieg { grid-template-areas: "kopf" "kugel" "aktion" "tueren" "text"; }
    .e-bild { display: contents; }
    .e-kugel { grid-area: kugel; }
    .e-tueren { grid-area: tueren; margin-top: var(--s3); }
    .tueren { display: grid; gap: 6px; }
    .tuer { justify-content: stretch; padding-inline: var(--s3) var(--s4); min-height: 56px; }
    .tuer-wabe { width: 16px; height: 14px; }
    .tuer strong { font-size: 1.05rem; }
    .e-aktion { margin-top: var(--s1); }
    .e-text { margin-top: var(--s3); }
  }

  /* ======================================================================
     Fassung 5, Runde 4: Das Netz trägt durch die Seite.
     Abb. 3 bis 5 sind Feldnetze in der Sprache der Kugel (Generator: Netzblatt). Im Einstieg eine
     Hauptaktion; die Türen sind die Legende der Kugel, keine zweite Navigation. Keine Führungslinien
     mehr: Farbe, Wabe und das gemeinsame Hervorheben zeigen, was zusammengehört.
     ====================================================================== */

  /* ---- Feldnetze (Abb. 3 bis 5) */
  .feld { --band: color-mix(in srgb, var(--f) 14%, var(--grund)); --n-bau: color-mix(in srgb, var(--f) 55%, var(--grund)); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feld { --n-bau: color-mix(in srgb, var(--f) 40%, var(--grund)); } }
  :root[data-theme="dark"] .feld { --n-bau: color-mix(in srgb, var(--f) 40%, var(--grund)); }
  .netzbild { overflow: visible; }
  .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 .n-hub, .netzbild .n-ki, .netzbild .n-bau, .netzbild .n-aus { stroke-linejoin: round; stroke-width: 6; }
  .netzbild .n-hub, .netzbild .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(--tinte); stroke-width: 3; stroke-linecap: round; }
  .netzbild .nt { font-family: var(--mono); font-weight: 700; font-size: 16px; fill: var(--tinte); }
  .netzbild .nt.nt-in { fill: var(--f-tinte); }
  .netzbild .nt-ki { font-family: var(--mono); font-weight: 700; font-size: 20px; text-anchor: middle; fill: var(--ki-schrift); }
  @media (max-width: 39.99rem) {
    .netzbild .nt { font-size: 22px; }
    .netzbild .nt.nt-in { font-size: 19px; }
    .netzbild .nt-ki { font-size: 25px; }
  }
  .legende .wabe-ki { background: var(--f); color: var(--ki-schrift); font-size: 0.7rem; letter-spacing: 0.02em; }

  /* Lange Feldtexte: die Zeichnung geht mit, statt ein Loch zu lassen */
  @media (min-width: 64rem) {
    .feld .innen > figure { position: sticky; top: 104px; }
  }

  /* ---- Einstieg: eine Hauptaktion. Kopieren als leiser Textknopf, Telefon im Hinweis */
  .knopf-leise {
    font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; color: var(--tinte);
    background: none; border: 0; padding: 0 var(--s1); min-height: 44px;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  }
  .knopf-leise:hover { text-decoration-thickness: 2px; }

  /* ---- Türen = Legende der Kugel: kein Farbblock, eine Kante in Feldfarbe, Inhalt darunter.
     Am Desktop drei nebeneinander unter der Kugel, sonst untereinander. Die Mail bleibt die
     einzige gefüllte Fläche im Einstieg. */
  .tuer {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0; align-items: center;
    min-height: 52px; padding: var(--s2) var(--s1) var(--s2) 0;
    background: transparent; border-top: 3px solid var(--f); border-radius: 0;
  }
  .tuer .tuer-wabe { grid-row: 1 / span 2; width: 18px; height: 16px; }
  .tuer strong { grid-column: 2; font-size: 1.05rem; }
  .tuer .tuer-text { display: block; grid-column: 2; font-size: 0.9rem; }
  .tuer .pfeil { display: block; grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; }
  @media (min-width: 64rem) {
    /* eine Zeile je Feld: Marke, Feld, Inhalt, Pfeil */
    .tueren { gap: 0; }
    .tuer { grid-template-columns: auto auto minmax(0, 1fr) auto; min-height: 46px; padding-block: 6px; border-top-width: 2px; }
    .tuer .tuer-wabe { grid-row: 1; }
    .tuer strong { grid-column: 2; }
    .tuer .tuer-text { grid-column: 3; }
    .tuer .pfeil { grid-row: 1; grid-column: 4; }
    .e-tueren { margin-top: var(--s2); }
  }
  /* Das Feldnetz in der Kugel zeigt beim Zeigen, dass es ein Ziel ist */
  @media (hover: hover) and (pointer: fine) {
    .netz-ziel:hover .schild rect { fill: var(--nf); }
    .netz-ziel:hover .schild text { fill: var(--grund); }
  }

  /* ---- Handy: wer und was zuerst, dann die Mail, dann das Netz mit seiner Legende */
  @media (max-width: 39.99rem) {
    .einstieg { grid-template-areas: "kopf" "text" "aktion" "kugel" "tueren"; }
    .e-text { margin-top: 0; }
    .e-text .vorspann { margin-bottom: var(--s2); }
    .e-aktion { margin-top: var(--s2); }
    .e-kugel { margin-top: var(--s4); }
    .e-tueren { margin-top: var(--s2); }
    .tuer { min-height: 52px; padding-inline: 0 var(--s1); }
  }

  /* ---- Schalter im Kopf auf jeder Breite; am Handy in der Logozeile, die wegscrollt */
  .kopf-schalter {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: calc(-1 * var(--s2));
    background: transparent; color: var(--tinte); border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  }
  .kopf-schalter:hover { border-color: var(--strich); }
  .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; }
  @media (max-width: 40rem) {
    .kopf-schalter { order: 1; margin-left: auto; width: 36px; height: 36px; }
    .navi { order: 2; }
  }

  /* ---- Zwei Wege: ein Satzpaar mit Kante oben statt zweier leerer Kästen */
  .weg { border: 0; border-top: 1.5px solid var(--strich); border-radius: 0; padding: var(--s3) 0 0; background: none; }
  .weg h3 { margin-bottom: var(--s2); }
  .weg p { margin: 0; }
  @media (min-width: 60rem) {
    .zwei-wege { align-items: start; row-gap: var(--s4); }
    .zwei-wege .weg { align-self: start; }
  }

  /* ---- Kontakt: die direkte Adresse bricht nicht */
  @media (min-width: 64rem) { .kontakt .satz { grid-template-columns: minmax(0, var(--lesespalte)) 19.5rem; } }
  .zettel.rand a[href^="mailto:"] { white-space: nowrap; }
  @media (max-width: 24rem) { .zettel.rand a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; } }
  @media (min-width: 60rem) {
    /* Frage und beide Wege untereinander links, die Mappe rechts daneben: kein Loch unter den Wegen */
    .zwei-wege { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--s7); row-gap: var(--s4); }
    .zwei-wege .wege-frage { grid-column: 1; grid-row: 1; align-self: start; }
    .zwei-wege .weg { grid-column: 1; grid-row: auto; }
    .zwei-wege .weg:nth-of-type(1) { grid-row: 2; }
    .zwei-wege .weg:nth-of-type(2) { grid-row: 3; }
    .zwei-wege .mappe { grid-column: 2; grid-row: 1 / -1; align-self: start; }
  }
  .wege-frage { line-height: 1.2; text-wrap: balance; }
  .zwei-wege .mappe { max-width: 22rem; }
  @media (max-width: 63.99rem) { .feld .innen > figure { max-width: 34rem; } }


  /* ======================================================================
     Fassung 5, Runde 5: Die Zeichnung ist die Liste.
     Je Feld eine Aufzählung weniger: Die nummerierte Legende unter dem Feldnetz IST die Arbeitsliste
     (Abb. 3 und 5), die KI-Zeile ist die Legende der KI-Wabe. Die Übergabemappe steht klein im Schritt
     „übergeben“, die zwei Wege bilden eine Zeile ohne Loch. Kopf deckend, Schalter am Handy in der
     stehenden Zeile.
     ====================================================================== */

  /* ---- Feldlegenden als Arbeitsliste: Lesegröße, Satzanfang fett */
  .feld figcaption { font-size: 1rem; margin-top: var(--s4); }
  .feld figcaption .abb { font-size: 0.9rem; color: var(--tinte); }
  .feld .legende li { line-height: 1.5; margin-bottom: var(--s3); align-items: first baseline; }
  .feld .legende li:last-child { margin-bottom: 0; }
  .feld .legende .wabe { font-size: 0.85rem; }
  .feld .legende b { font-weight: 700; }
  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .feld .innen > figure { max-width: 40rem; width: 100%; justify-self: center; }
  }

  /* ---- Übergabemappe im Schritt „übergeben“: klein, in der Sprache der Feldnetze, neutral getönt */
  .schritte .mappe {
    --f: var(--strich); --f-text: var(--tinte); --f-tinte: var(--grund); --band: var(--grund);
    --n-bau: color-mix(in srgb, var(--strich) 22%, var(--grund));
    margin-top: var(--s3); max-width: none;
  }
  .schritte .mappe .zeichnung { width: 8.5rem; --z-strich: var(--tinte); }
  .schritte .mappe .marke-text { fill: var(--grund); }
  .schritte .mappe figcaption { margin-top: var(--s2); font-size: 0.92rem; }
  .schritte .mappe .abb { margin-bottom: var(--s1); font-size: 0.85rem; }
  .schritte .mappe .legende li { margin-bottom: var(--s1); }
  .schritte .mappe .legende .wabe { background: var(--tinte); }
  @media (max-width: 59.99rem) {
    .schritte .mappe { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); align-items: center; }
    .schritte .mappe .zeichnung { width: 100%; }
    .schritte .mappe figcaption { margin: 0; }
  }

  /* ---- Zwei Wege: Frage und beide Wege auf einer Zeile, gleiche Oberkante */
  .wege-frage { border-top: 1.5px solid var(--tinte); padding-top: var(--s3); }
  @media (min-width: 60rem) {
    .zwei-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; column-gap: var(--s6); }
    .zwei-wege .wege-frage { grid-column: 1; grid-row: 1; }
    .zwei-wege .weg:nth-of-type(1) { grid-column: 2; grid-row: 1; }
    .zwei-wege .weg:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  }

  /* ---- Kopf am Handy: Logo-Zeile scrollt weg, Navigation und Schalter bleiben stehen */
  @media (max-width: 40rem) {
    .kopf .innen::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
    .kopf .marke { order: 0; }
    .navi { order: 2; width: auto; flex: 1 1 0; min-width: 0; }
    .kopf-schalter { order: 3; margin: 0 calc(-1 * var(--s2)) 0 0; width: 44px; height: 44px; }
  }
  @media (min-width: 40.01rem) and (max-width: 55.99rem) { .kopf-schalter { width: 44px; height: 44px; } }

  /* ---- Feld wählen: die anderen Netze treten zurück, die Logo-Kugel bleibt lesbar (40 bis 45 %) */
  .einstieg:has(.tuer:focus-visible) .kugel .kugel-rest { opacity: 0.45; }
  @media (hover: hover) and (pointer: fine) {
    .einstieg:has(:is(.tuer, .netz-ziel):hover) .kugel .kugel-rest { opacity: 0.45; }
  }

  /* Ziffern im Bild so groß wie in der Legende: Feldnetze 1,35-fach, die kleine Mappe 1,7-fach */
  .netzbild .wm { transform: scale(1.35); }
  .schritte .mappe .netzbild .wm { transform: scale(1.7); }
  @media (max-width: 39.99rem) { .netzbild .wm { transform: scale(1.7); } }
  @media (max-width: 59.99rem) { .schritte li > .mappe { grid-column: 2; } }

  /* Ziele ≥ 24 px auch dort, wo ein Link allein steht (Kundenliste, direkte Adresse, Sprungliste) */
  .kunden b > a, .zettel.rand a[href^="mailto:"], .inhalt-sprung a { display: inline-block; padding-block: 2px; }

  /* ---- Zuhause: ausgedachte Beispiele, echte Werkzeuge. Deutlich als Beispiel markiert. */
  .zuhause-liste { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5) var(--s6); }
  @media (min-width: 56rem) { .zuhause-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .zuhause-liste > li { border-top: 2px solid var(--ha-text); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
  .zuhause-liste h3 { margin: 0; }
  .zuhause-liste p { margin: 0; max-width: 46ch; }
  .beispiel-marke {
    align-self: flex-start; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
    border: 1.5px dashed var(--gedaempft); color: var(--gedaempft); padding: 0 var(--s2); border-radius: 2px;
  }
  .werkzeug { font-family: var(--mono); font-size: 0.85rem; color: var(--ha-text); margin-top: auto !important; padding-top: var(--s2); }
  .vorschau { margin: var(--s2) 0 0; border: 1.5px solid var(--strich); border-radius: 4px; padding: var(--s3); max-width: 22rem; background: var(--grund); }
  .vorschau-titel { font-family: var(--mono); font-size: 0.85rem; color: var(--gedaempft); }
  .vorschau ul { margin: var(--s2) 0; padding-left: 1.1rem; }
  .vorschau li { margin: 2px 0; }
  .vorschau li.achtung { font-weight: 700; }
  .vorschau li.achtung::marker { content: "▲ "; color: var(--pz-text); }
  .vorschau-knoepfe { display: flex; gap: var(--s2); }
  .vorschau-knoepfe span { font-size: 0.85rem; font-weight: 700; padding: 4px var(--s3); border: 1.5px solid var(--strich); border-radius: 3px; }
  .vorschau-knoepfe span:first-child { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }

  /* ---- Fassung 5.2: Zuhause klarer, Wege als Frage mit zwei Antworten, Personen als Zeilen */
  .werkzeuge { margin: var(--s4) 0 0; display: grid; gap: var(--s2) var(--s5); max-width: 72rem; }
  @media (min-width: 56rem) { .werkzeuge { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .werkzeuge > div { border-left: 1px solid var(--linie); padding-left: var(--s3); }
  .werkzeuge dt { font-family: var(--mono); font-weight: 700; color: var(--ha-text); }
  .werkzeuge dd { margin: 2px 0 0; font-size: 0.95rem; max-width: 40ch; }
  .zuhause-liste { align-items: start; }
  .zuhause-liste > li { display: block; }
  .zuhause-liste > li > * + * { margin-top: var(--s2); }
  .werkzeug { margin-top: var(--s2) !important; padding-top: 0; }
  .vorschau { border-style: dashed; background: transparent; }
  .vorschau-knoepfe span { font-weight: 600; border-style: dotted; color: var(--gedaempft); cursor: default; }
  .vorschau-knoepfe span:first-child { background: transparent; color: var(--gedaempft); border-color: var(--gedaempft); }
  .zuhause-schluss { margin-top: var(--s5); font-weight: 700; max-width: 60ch; }
  .zuhause-schluss a { white-space: nowrap; }
  /* Zwei Wege: die Frage führt, darunter zwei gleichrangige Antworten */
  .wege-frage { border-top: 0; padding-top: 0; font-size: 1.2rem; font-weight: 700; }
  @media (min-width: 60rem) {
    .zwei-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zwei-wege .wege-frage { grid-column: 1 / -1; grid-row: 1; }
    .zwei-wege .weg:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .zwei-wege .weg:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  }
  /* Personen ohne Porträt: kompakte Zeilen statt halbleerer Karten */
  .leute .personen { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s4); }
  .leute .person { border-top: 1px solid var(--linie); padding: var(--s3) 0; }
  .leute .person h3 { font-size: 1.2rem; margin: 0; }
  .leute .person p { margin: 2px 0 0; }
  /* Telefon im Einstieg als ausreichend großes Ziel */
  .mail-hilfe a { display: inline-block; padding-block: 3px; min-height: 24px; }

  /* ---- Fassung 5.3: was zur 4 fehlte */
  /* Schritte erscheinen gemeinsam: nichts wirkt beim Lesen deaktiviert */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:not([data-motion="aus"]) .schritte li:nth-child(n) { animation-range: entry 10% entry 50%; }
    }
  }
  /* Überschriften nach Gewicht: Belege vor Nebenwegen */
  .weg h3 { font-size: 1.3rem; }
  .beleg h3 { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; }
  .status { font-size: 0.85rem; }
  /* Zuhause: gleichartige Karten, eine Kennzeichnung für alle */
  .zuhause .vorspann .beispiel-marke { display: inline-block; margin-right: var(--s2); vertical-align: 0.15em; font-size: 0.8rem; }
  .zuhause-liste > li { border-top: 2px solid var(--ha-text); padding-top: var(--s3); }
  .werkzeug { font-family: var(--mono); font-size: 0.85rem; color: var(--gedaempft); }
  .zuhause-schluss { margin-top: var(--s6); font-weight: 400; max-width: 62ch; }
  .zuhause-schluss p + p { margin-top: var(--s3); }
  /* Ein Linkstil im Fließtext: dunkel, unterstrichen */
  main p a:not([class]), main li a:not([class]), main dd a:not([class]) {
    color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  }
  main p a:not([class]):hover, main li a:not([class]):hover { text-decoration-thickness: 2px; }
  .feld p a:not([class]), .feld li a:not([class]) { color: inherit; }
  /* Kopf: Bewegungsschalter neben dem Erscheinungsbild */
  .kopf-bewegung { margin-left: var(--s1); }
  @media (max-width: 40rem) { .kopf-bewegung { display: none; } }
  .mailzeile .knopf-leise { white-space: nowrap; }

  /* ---- Fassung 5.4 */
  /* Kopf-Schalter zeigen ihren Zustand: gedrückt = gefüllte Fläche */
  .kopf-schalter[aria-pressed="true"] { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
  .kopf-schalter[aria-pressed="true"] .rand { stroke: var(--grund); }
  .kopf-schalter[aria-pressed="true"] .halb { fill: var(--grund); }
  /* Am Handy: Bewegung oben in der Logo-Zeile, Erscheinungsbild bleibt bei der Navigation */
  @media (max-width: 40rem) {
    .kopf-bewegung { display: inline-grid !important; place-items: center; order: 0; margin: 0 calc(-1 * var(--s2)) 0 auto; width: 44px; height: 44px; }
  }
  /* Mail je Feld und Schluss von Zuhause */
  .feld-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s4); font-weight: 700; }
  .zuhause-schluss > p:first-child { max-width: 38rem; }
  .mail-hilfe { color: var(--gedaempft); }

  /* ---- Fassung 5.5 */
  /* Kopf: nur das Erscheinungsbild, ab Desktop mit Wort */
  .kopf-schalter .kopf-wort { display: none; }
  @media (min-width: 64rem) {
    .kopf-schalter:not(.kopf-bewegung) { width: auto; grid-auto-flow: column; gap: 6px; padding: 0 var(--s2); }
    .kopf-schalter .kopf-wort { display: inline; font-size: 0.9rem; font-weight: 600; }
  }
  /* Feld-Mail: ein Baustein, sichtbar als Aufruf, Adresse daneben als Ersatz */
  .knopf-feld {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4);
    border: 1.5px solid currentColor; border-radius: 3px; font-weight: 700; text-decoration: none; color: inherit;
  }
  .knopf-feld::after { content: "→"; margin-left: var(--s2); }
  .knopf-feld:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  .feld-adresse { font-family: var(--mono); font-size: 0.9rem; font-weight: 400; }
  .praxis-beleg { margin-top: var(--s3); }
  .praxis-beleg .feldmarke { margin-right: var(--s1); }
  /* Kontakt: Hinweis direkt unter dem Knopf */
  .kontakt .mailzeile + .mail-hilfe { margin-top: calc(-1 * var(--s3)); }
  /* Haltung: Notiz unter der Überschrift füllt die linke Spalte */
  .haltung-kopf .zettel { margin-top: var(--s4); max-width: 34ch; }
  /* Einblendung: früher fertig, nichts bleibt blass im Bild */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:not([data-motion="aus"]) .erscheint { animation-range: entry 0% entry 22%; }
    }
  }

  /* ---- Kopf am Handy: Platz für den Dunkel-Schalter ist von Anfang an reserviert,
     damit das nachträglich eingefügte Bedienelement nichts verschiebt (CLS) */
  @media (max-width: 40rem) {
    .kopf .innen { position: relative; }
    .navi { margin-right: 48px; }
    .kopf-schalter { position: absolute; right: var(--rand); bottom: 1px; margin: 0; }
  }
  @media (max-width: 40rem) {
    .navi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .navi::-webkit-scrollbar { display: none; }
    .navi a { flex: 0 0 auto; white-space: nowrap; }
  }
  /* Porträts: Wabe in Graustufen wie im Entwurf 6 */
  .person .portrait { max-width: 9rem; height: auto; aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: grayscale(1) contrast(1.05); }
}

/* ───── 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; }
  .kopf .navi a[aria-current="page"] { 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 ─────
   Dieselben Entscheidungen wie auf der Startseite, auf die Unterseiten übertragen.
   Alles Weitere (Flug, Felder, Wabenkette) gibt es hier nicht und steht deshalb
   auch nicht in dieser Datei. */
@layer effekt {

  /* Flächenlogik im Dunkeln, identisch zur Startseite */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papier: oklch(20.5% 0.008 250);
      --grund: 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);
    --grund: 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);
  }

  /* Ein Logo statt zwei, einmal eingebettet, Farbe aus --grau */
  .logo-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
  .marke .logo { display: block; height: 36px; width: 148px; color: var(--grau, #515355); }
  .fuss .logo { display: block; height: 52px; width: 191px; color: var(--sch-fuss-leise); }

  /* Der Kopf trägt sechs Einträge: bis 56rem zwei Zeilen mit Kante, darüber enger */
  @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;
    }
    @media (prefers-contrast: more) { .kopf nav, .kopf .navi { mask-image: none; } }
    .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; }
  }
  .kopf-knopf[data-aktiv] { box-shadow: inset 0 0 0 2px var(--sch-papier); }

  /* Der Erscheinungsbild-Schalter wurde in der alten Schale absolut in die Kopfecke
     gesetzt (style.css:1360–1362, gegen Umbrüche beim Nachladen). In der neuen Schale
     ist der Kopf ein Flex-Band: dort gehört er in die Reihe, sonst liegt er auf dem
     Menüband. Gemessen bei 451 px: vorher Überdeckung von „Wer wir sind". */
  .kopf .innen { position: static; }
  .kopf-schalter { position: static; order: 0; right: auto; bottom: auto; margin: 0 0 0 0.5rem; }
  .kopf .navi { margin-right: 0; }

  /* Abbildungsnummern: heller Ton nur auf dunklen Flächen */
  .abb { color: var(--gedaempft, var(--grau)); }

  /* Trefferflächen ab 24 px für freistehende Links */
  .weiter a, .feld-mail a, .beleg-zeile a, .nach-oben, .inhalt-sprung a {
    display: inline-block; min-height: 24px; padding-block: 1px;
  }

  /* Bewegung aus gilt auch für Pseudoelemente und den Seitenwechsel */
  :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;
  }

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

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

  /* Gleicher Grund, gleicher Rahmen, gleiche Leiter wie die Startseite. */
  :root { --papier: oklch(97.2% 0.004 95); --grund: var(--papier); --rahmen: 84rem; }
  h1 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
  main h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); letter-spacing: -0.02em; }
  main .innen { max-width: var(--rahmen); }

  /* ── Die Fallseite: Kennzahlen, Stimmen, dunkles Band, Raster ──────────────
     Gemessen hatte die erste Fassung 576 px Inhalt in einem 1344-px-Rahmen und zehnmal
     denselben Bauplan. Die Mittel dafür gibt es im Haus; sie waren nur nicht benutzt. */

  /* Die Feldmarken über der Überschrift standen auf der Unterseite ohne Stil
     aneinander („ProzesseIT"). Sie bekommen denselben Chip wie in den Belegkarten. */
  /* Der Stand: dieselben Marken wie auf der Startseite. Die Regeln standen bisher nur
     in seite.css — auf dieser Seite las sich die Liste deshalb als Fließtext:
     „läuft Zwei Domänencontroller, eigene Zertifizierungsstelle …“. */
  .stand { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
  .stand li { max-width: 60ch; }
  .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.45rem; }
  .chip-pilot { color: var(--tinte); }
  .chip-offen { color: var(--tinte); border-style: dashed; }

  .beleg-feld { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
  .beleg-feld span {
    font: 700 0.78rem var(--mono); letter-spacing: 0.04em; padding: 0.12rem 0.5rem;
    background: var(--f); color: var(--f-tinte);
  }
  .beleg-feld span[data-feld="pz"] { --f: var(--pz); --f-tinte: var(--pz-tinte); }
  .beleg-feld span[data-feld="ha"] { --f: var(--ha); --f-tinte: var(--ha-tinte); }
  .beleg-feld span[data-feld="it"] { --f: var(--it); --f-tinte: var(--it-tinte); }

  /* Kennzahlen neben dem Vorspann, in der Spalte, in der sonst eine Zeichnung steht */
  .kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.6rem; margin: 0; }
  .kennzahlen dt { font: 600 0.82rem var(--mono); letter-spacing: 0.04em; color: var(--gedaempft); }
  /* Die Leitzahl steht über den sechs: ein ganzes Netz in wenigen Wochen */
  .kennzahlen .spanne { grid-column: 1 / -1; padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  .kennzahlen .spanne dd { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
  .kennzahlen dd { margin: 0.15rem 0 0; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800;
    letter-spacing: -0.03em; line-height: 1; color: var(--f-text, var(--tinte)); }

  /* Die fünf Sätze sind Zitate, keine Legende */
  .stimmen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.2rem 2.5rem; }
  @media (min-width: 56rem) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stimmen > li { border-top: 2px solid var(--tinte); padding-top: 1rem; }
  .stimmen blockquote { margin: 0; }
  .stimmen blockquote p {
    margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 750; line-height: 1.22;
    letter-spacing: -0.02em; text-wrap: balance;
  }
  .stimmen blockquote p::before { content: "„"; }
  .stimmen blockquote p::after { content: "“"; }
  .stimmen .antwort { margin: 0.7rem 0 0; color: var(--gedaempft); max-width: 42ch; }

  /* Das dunkle Band: die eine Fläche, auf der die Haltung steht */
  .nachtband { background: var(--mitte); color: var(--mitte-text); padding-block: var(--s7); border-top: 0; }
  .nachtband h2, .nachtband h3 { color: var(--mitte-text); }
  .nachtband .lead { color: color-mix(in srgb, var(--mitte-text) 82%, transparent); max-width: 52ch; }
  .nachtband a { color: var(--mitte-text); }
  .gedanken { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.8rem 2.5rem; counter-reset: g; }
  @media (min-width: 56rem) { .gedanken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 80rem) { .gedanken { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .gedanken > li { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-items: start; }
  .gedanken .gz {
    grid-row: 1 / span 2; width: 2.2rem; aspect-ratio: 1 / 1.1547; display: grid; place-items: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--it); color: var(--mitte); font: 800 1rem var(--mono);
  }
  .gedanken h3 { margin: 0; font-size: 1.1rem; }
  .gedanken p { margin: 0.3rem 0 0; color: color-mix(in srgb, var(--mitte-text) 80%, transparent); }

  /* Was im Alltag anders ist: acht kurze Karten statt einer langen Liste */
  .alltag-raster { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem 2rem; }
  @media (min-width: 48rem) { .alltag-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) { .alltag-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .alltag-raster > li { border-top: 1px solid var(--linie); padding-top: 0.9rem; }
  .alltag-raster h3 { margin: 0; font-size: 1.05rem; }
  .alltag-raster p { margin: 0.45rem 0 0; font-size: 0.97rem; color: var(--gedaempft); }

  /* Die Werkzeuge nebeneinander, nicht untereinander */
  .werkzeug-raster { display: grid; gap: 1.4rem 2.2rem; margin: 2rem 0 1.2rem; }
  @media (min-width: 56rem) { .werkzeug-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .werkzeug-raster dt { font: 600 0.82rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-text, var(--gedaempft)); }
  .werkzeug-raster dd { margin: 0.35rem 0 0; }

  /* Die Zeichnungen der Fallseite stehen außerhalb eines Feld-Abschnitts und brauchen
     deshalb ihren Farbraum selbst — sonst fehlen --f und --n-bau und die Waben werden schwarz. */
  .fall-bild {
    --f: var(--it); --f-tinte: var(--it-tinte); --f-text: var(--it-text);
    --band: color-mix(in srgb, var(--it) 14%, var(--grund));
    --n-bau: color-mix(in srgb, var(--it) 55%, var(--grund));
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fall-bild { --n-bau: color-mix(in srgb, var(--it) 40%, var(--grund)); }
  }
  :root[data-theme="dark"] .fall-bild { --n-bau: color-mix(in srgb, var(--it) 40%, var(--grund)); }
  .fall-bild .netzbild { max-width: 42rem; width: 100%; height: auto; }
  .fall-bild .ns-mitte { font-family: var(--text); font-weight: 750; font-size: 26px; fill: var(--f-tinte); }
  .fall-bild .nt-stark { font-weight: 700; font-size: 18px; font-family: var(--text); }
  .fall-bild figcaption { margin-top: 0.8rem; }

  /* Die beiden MCP-Seiten gehören zusammen: ein Weg zwischen ihnen, oben. */
  .mcp-wege {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
    max-width: var(--rahmen); margin: 0 auto; padding: 1rem var(--rand, 1.5rem) 0;
    font: 600 0.95rem var(--text, inherit);
  }
  .mcp-wege a { padding-block: 0.35rem; min-height: 24px; display: inline-block; }
  .mcp-wege a[aria-current="page"] { border-bottom: 2px solid currentColor; }
}