/* Erzeugt von wordpress/werkzeuge/profil_exportieren.py aus prototypen/prototyp/index.html. Nicht von Hand ändern. */
  /* Farben: verbindliche Palette aus docs/design.md */
  :root {
    --gefieder: #7E6E5F;
    --studio: #7A7064;  /* Studio-Graubraun: Randton des Hintergrunds im Originalfoto (Wunsch der Nutzerin, 2026-10-29); Menüleiste */
    --orange-dunkel: #B5481B;
    --orange: #E07A3F;
    --markierung: #F9D3B8;
    --braun: #6E5A40;
    --grau-blau: #9AA8B0;
    --creme: #FBF6EE;
    --text: #2B211B;
    --vogel-weiss: #FDFBF7;
    --weiss: #FFFFFF;
    --gold: #D9A441;  /* Wunsch der Nutzerin 2026-10-29: Gold nur als Akzent am Knopf „Zum Match-Check“ */
    --kopf-hoehe: 80px;
    --abstand: 64px;  /* einheitlicher Abstand oben und unten in jedem Abschnitt, hell wie dunkel (2026-10-30) */
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
  body { margin: 0; background: var(--creme); color: var(--text); font: 400 1.125rem/1.65 "Source Sans 3", system-ui, sans-serif; }
  h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
  h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
  h3 { font-size: 1.25rem; }
  /* ab 960 px wird die ganze Seite verkleinert: dort feste Größen wie bei 1440 px, sonst würden die vw-Werte doppelt schrumpfen */
  @media (min-width: 960px) { h1 { font-size: 3rem; } h2 { font-size: 2.1rem; } .ergebnis-titel { font-size: 2.1rem; } }
  a { color: var(--orange-dunkel); }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :focus-visible { outline: 3px solid var(--orange-dunkel); outline-offset: 3px; }
  /* Überschriften bekommen den Fokus nur per Skript (Seitenwechsel, Sprung, Ergebnis), damit Screenreader dort weiterlesen; sie sind nicht anklickbar, deshalb kein Rahmen (Wunsch der Nutzerin, 2026-10-30) */
  h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
  /* auf dunklen Flächen ein heller Fokusrahmen (Kontrast mind. 3 : 1) */
  .kopf :focus-visible, .fuss :focus-visible { outline-color: var(--vogel-weiss); }
  .zum-inhalt { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--vogel-weiss); color: var(--text); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
  .zum-inhalt:focus { top: 12px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .inhaltsverzeichnis { transition: none !important; }
    .balken span { transition: none; }
    details::details-content, .inhaltsverzeichnis summary::after, .menue { transition: none !important; }
    .ergebnis-bild .funke { animation: none; }
  }

  /* Markierung wie mit Textmarker */
  mark { background: var(--markierung); color: var(--text); font-weight: 700; padding: .05em .3em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* Hervorhebung einzelner Angaben (z. B. Verfügbarkeit): Brust-Hell mit gestrichelter oranger Kontur */
  .hervorhebung { background: var(--markierung); color: var(--text); font-weight: 700; padding: .05em .3em; border-radius: 3px; }

  /* Hinweis auf offene Angaben im Prototyp */
  .offen { background: #fff3c4; border: 1px dashed #b8962e; color: #5c4a12; padding: .1em .4em; border-radius: 4px; font-size: .9em; }

  /* Menüleiste */
  .kopf { position: sticky; top: 0; z-index: 20; background: var(--studio); color: var(--weiss); }
  .kopf .wrap { min-height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .marke { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
  /* Größen wie in der bestätigten Design-Vorschau */
  .marke .logo { width: 80px; height: 64px; }
  .marke .name { height: 30px; width: auto; overflow: visible; }
  .marke .name text { font-family: "Source Sans 3", sans-serif; font-weight: 900; font-size: 100px; letter-spacing: 3px; }
  .menue { display: flex; align-items: center; gap: 6px; }
  .menue a { color: var(--weiss); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 8px; }
  .menue a { white-space: nowrap; }
  /* aktive Seite: Rahmen mit abgerundeten Ecken */
  .menue a.kontakt-knopf { background: var(--vogel-weiss); color: var(--text); margin-left: 8px; border-radius: 999px; padding: 8px 18px; font-weight: 700; }
  .menue a.kontakt-knopf:hover { background: var(--markierung); }
  .menue-knopf { display: none; background: none; border: 2px solid var(--vogel-weiss); color: var(--vogel-weiss); border-radius: 6px; padding: 6px 10px; font: 700 1rem "Source Sans 3", sans-serif; cursor: pointer; }

  /* Seiten (im Prototyp per Sprungmarke umgeschaltet; in WordPress eigene Seiten) */
  .seite[hidden] { display: none; }

  /* Hauptseite mit Inhaltsverzeichnis */
  .profil-raster { display: grid; grid-template-columns: 210px 1fr; gap: 32px; align-items: start; padding-top: 40px; padding-bottom: 64px; }
  #profil .profil-raster { padding-bottom: 0; }  /* der letzte Abschnitt bringt seinen Abstand selbst mit */
  /* Impressum hat kein Inhaltsverzeichnis (Entscheidung 2026-11-02): Inhalt trotzdem in der rechten Spalte wie auf den anderen Seiten */
  .profil-raster.ohne-iv > div { grid-column: 2; }
  /* kurze Seite: Fußzeile trotzdem am unteren Rand */
  #impressum { min-height: calc(100svh - var(--kopf-hoehe) - 84px); }
  /* Impressum und Datenschutz: Fließtext mit lesbarer Zeilenlänge */
  .rechtlich p, .rechtlich ul { max-width: 42em; }
  .rechtlich ul { padding-left: 1.2em; }
  /* z-index: das Inhaltsverzeichnis liegt über dem dunklen Band des Werdegangs */
  .inhaltsverzeichnis { position: sticky; top: calc(var(--kopf-hoehe) + 24px); z-index: 5; }
  .inhaltsverzeichnis details { background: var(--weiss); border: 1px solid #e5ddd0; border-radius: 10px; padding: 14px 16px; }
  .inhaltsverzeichnis summary { font-weight: 700; cursor: pointer; list-style: none; }
  .inhaltsverzeichnis summary::-webkit-details-marker { display: none; }
  .inhaltsverzeichnis ol { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: abschnitt; }
  .inhaltsverzeichnis li { counter-increment: abschnitt; }
  .inhaltsverzeichnis a { display: flex; gap: 8px; padding: 5px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.35; }
  /* Symbol statt Nummer vor jedem Eintrag */
  .inhaltsverzeichnis .iv-ikon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--braun); }
  .inhaltsverzeichnis a.aktiv .iv-ikon { color: var(--text); }
  .inhaltsverzeichnis a:hover { background: var(--creme); }
  .inhaltsverzeichnis a.aktiv { background: var(--markierung); font-weight: 700; }

  /* helle und dunkle Abschnitte wechseln sich ab; der Farbwechsel trennt, deshalb keine Linie. Abstand überall gleich (Wunsch der Nutzerin, 2026-10-30) */
  .abschnitt { padding: var(--abstand) 0; }
  .abschnitt:has(> .band-dunkel) { padding: 0; }
  .abschnitt > :last-child, .band-dunkel > :last-child { margin-bottom: 0; }
  /* Sprung über Inhaltsverzeichnis oder Knopf: die Dachzeile steht bei jedem Abschnitt gleich weit (24 px) unter der Menüleiste,
     der obere Innenabstand verschwindet unter der Leiste (Wunsch der Nutzerin, 2026-10-30) */
  .abschnitt { scroll-margin-top: calc(8px - var(--abstand)); }
  /* folgen zwei helle Abschnitte aufeinander (ohne Farbwechsel dazwischen), zählt der Abstand nur einmal, sonst wären es 128 px (Wunsch der Nutzerin, 2026-10-30) */
  .abschnitt:not(:has(> .band-dunkel)) + .abschnitt:not(:has(> .band-dunkel)) { padding-top: 0; scroll-margin-top: 8px; }
  .einleitung-text { font-size: 1.2rem; max-width: 42em; }
  /* hält eine Wortgruppe in einer Zeile; ist sie breiter als der Platz, bricht sie trotzdem um */
  .zusammen { display: inline-block; }
  /* Überschrift im Kopfbereich immer in zwei Zeilen (Wunsch der Nutzerin, 2026-10-29) */
  .h1-zeile { display: block; }
  /* Kopfbereich mit freigestelltem Porträt auf dem Seitenhintergrund */
  /* Foto oben bündig mit der Dachzeile; der Abschnitt ist so hoch wie das Foto (Text darf nicht länger werden) */
  .start-raster { display: grid; grid-template-columns: 1fr 316px; gap: 32px 20px; align-items: start; }
  .portraet { margin: 0; grid-column: 2; grid-row: 1; }
  /* die weichen Ränder sind ins Bild eingearbeitet (prototypen/bilder/portraet.webp) */
  .portraet img { display: block; width: 100%; height: auto; }
  /* Dachzeile über der Hauptüberschrift: Großbuchstaben, weite Laufweite, kurze Akzentlinie darüber */
  .dachzeile { color: var(--braun); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
  .dachzeile::before { content: ""; display: block; width: 56px; height: 4px; background: var(--orange); margin-bottom: 18px; }
  .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
  .knopf { display: inline-block; padding: 12px 22px; border-radius: 6px; font: 700 1.05rem/1.3 "Source Sans 3", system-ui, sans-serif; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
  .knopf.primaer { background: var(--orange-dunkel); color: var(--weiss); }
  .knopf.sekundaer { border-color: var(--braun); color: var(--braun); background: transparent; }
  /* Knöpfe untereinander, mit kleiner Illustration vor dem Text */
  .knopf.mit-symbol { display: inline-flex; align-items: center; gap: 10px; }
  .knopf .symbol { width: 24px; height: 24px; flex: none; }
  .knopf.sekundaer .symbol { color: var(--braun); }
  /* wie normaler Text, aber fett und unterstrichen */

  /* align-items: start, damit eine aufgeklappte Referenz nur ihre eigene Kachel verlängert */
  .kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  .kachel { background: var(--weiss); border-radius: 10px; padding: 20px; border: 1px solid #ece4d7; }
  .kachel h3 { display: flex; gap: 10px; align-items: baseline; }
  .kachel h3::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
  .kachel p { margin: 0 0 .6em; font-size: 1.05rem; }
  .kachel blockquote { margin: 10px 0 0; font-size: .98rem; color: var(--braun); border-left: 3px solid var(--orange); padding-left: 10px; }



  .zitat { margin: 0 0 20px; padding: 22px 26px; background: var(--weiss); border-left: 6px solid var(--orange); border-radius: 0 10px 10px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
  .quelle { color: var(--braun); font-size: 1rem; margin: -8px 0 20px; }


  /* Häufige Fragen */
  .fragen details { background: var(--weiss); border: 1px solid #ece4d7; border-radius: 10px; margin: 0 0 10px; }
  .fragen summary { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .fragen details p { margin: 0; padding: 0 18px 16px; }
  /* Pfeil gehört zum Link (gleiche Farbe, anklickbar), aber ohne Unterstrich; inline-block, weil sich der Unterstrich sonst vererbt */
  .link-pfeil { display: inline-block; text-decoration: none; }

  /* Check „Passen wir zusammen?“: eine Frage auf einmal, Antworten als Kärtchen, Ergebnis mit Stufen */
  .check { background: var(--weiss); border: 1px solid #ece4d7; border-radius: 12px; padding: 28px; margin: 0 0 40px; }
  .check [hidden] { display: none; }
  /* kleiner grauer Hinweis zum Datenschutz über dem Check */
  .check-hinweis { margin: 0 0 16px; color: var(--braun); font-size: .9rem; }
  .check .knopf { margin-top: 18px; }
  .fortschritt-text { color: var(--braun); font-weight: 600; font-size: .95rem; margin: 0; }
  .balken { height: 10px; background: #efe6d8; border-radius: 999px; overflow: hidden; margin: 8px 0 22px; }
  .balken span { display: block; height: 100%; background: var(--orange); width: 0; transition: width .4s; }
  .frage-titel { font-size: 1.4rem; margin: 0 0 16px; }
  .karten { display: grid; gap: 12px; }
  .karte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; background: var(--creme); border: 2px solid #e2d8c8; border-radius: 10px; font: 600 1.05rem/1.4 "Source Sans 3", system-ui, sans-serif; color: var(--text); cursor: pointer; }
  .karte::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--braun); background: var(--weiss); }
  .karte:hover { border-color: var(--orange); }
  /* beim Zurückgehen ist die frühere Antwort markiert */
  .karte.gewaehlt { border-color: var(--orange-dunkel); background: var(--markierung); }
  @media (forced-colors: active) { .karte.gewaehlt { outline: 3px solid Highlight; } .karte.gewaehlt::before { background: Highlight; } }
  .karte.gewaehlt::before { border-color: var(--orange-dunkel); background: var(--orange-dunkel); box-shadow: inset 0 0 0 3px var(--weiss); }
  .zurueck { background: none; border: 0; padding: 6px 0; margin-top: 16px; color: var(--orange-dunkel); font: 700 1rem "Source Sans 3", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .ergebnis-bild { display: block; width: 76px; height: 76px; color: var(--text); margin: 0 0 8px; }
  /* Funken beim besten Ergebnis: einmal kurz aufleuchten */
  .ergebnis-bild .funke { stroke: var(--orange); transform-origin: 32px 34px; animation: funkeln .7s ease-out; }
  @keyframes funkeln { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
  .ergebnis-schluss { margin: 16px 0 0; font-weight: 600; }
  .ergebnis-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  /* Schrift sitzt in ihrer Zeile etwas hoch (Platz für Unterlängen): optisch auf die Mitte von Illustration und Knopf rücken (Wunsch der Nutzerin, 2026-11-03) */
  .ergebnis-kopf .ergebnis-titel { margin: 0; position: relative; top: .1em; }
  /* Illustration so groß wie die Schrift der Überschrift, direkt davor */
  .ergebnis-kopf .ergebnis-bild { flex: none; width: 2.8rem; height: 2.8rem; margin: 0 -12px 0 0; }
  @media (max-width: 959px) {
    .ergebnis-kopf .ergebnis-bild { width: 2.3rem; height: 2.3rem; }
    .ergebnis-kopf .ergebnis-titel { flex: 1 1 0; min-width: 0; }  /* bleibt neben der Illustration und bricht selbst um */
    .ergebnis-knopf { flex-basis: 100%; }  /* Knopf auf dem Handy unter der Überschrift */
  }
  .ergebnis-knopf { display: flex; }
  .ergebnis-knopf .knopf { margin: 0; }  /* sonst Abstand nach oben aus der allgemeinen Knopfregel im Check */
  .ergebnis-knopf:empty { display: none; }
  /* auf dem orangen Hauptknopf wäre der orange Stift kaum zu sehen: dort in Brust-Hell */
  .ergebnis-knopf .knopf.primaer .akzent-strich { stroke: var(--markierung); }
  /* Ergebnis-Illustration: Detail zeichnet sich neu, wenn die Maus direkt darauf steht (wie bei allen Symbolen) */
  .ergebnis-bild .akzent-strich { stroke-dasharray: 1; }
  .ergebnis-liste { list-style: none; margin: 20px 0 8px; padding: 0; display: grid; gap: 12px; }
  .ergebnis-liste li { background: var(--creme); border-radius: 0 10px 10px 0; padding: 14px 18px; border-left: 5px solid var(--grau-blau); }
  .ergebnis-liste li.gut { border-left-color: var(--orange); }
  .ergebnis-liste li.nicht { border-left-color: var(--braun); }
  .stufe { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--braun); }
  .ergebnis-liste .antwort { display: block; font-weight: 700; margin-top: 2px; }
  .ergebnis-liste p { margin: 4px 0 0; font-size: 1.02rem; }
  .knopf.klein { padding: 3px 12px; font-size: .95rem; margin-left: 6px; border-width: 2px; vertical-align: 1px; }
  /* Liniensymbole (Sprite oben im body); allein stehend in einem hellen Kreis */
  .ikon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* Regel auf die Symbol-Vorlage, weil Stile nicht in die per <use> eingefügten Kopien hineinreichen */
  symbol .akzent { stroke: var(--orange); }
  .symbol-kreis { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--creme); color: var(--text); }
  .knopf .ikon { width: 22px; height: 22px; }

  .knopf.klein.mit-symbol { margin: 12px 0 0; padding: 6px 14px; }

  /* alle Antworten des Checks als Tabelle (lesbar ohne JavaScript, auch für Suchmaschinen und KI) */
  .aufklappen { background: var(--weiss); border: 1px solid #ece4d7; border-radius: 12px; }
  .aufklappen summary { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--orange-dunkel); }
  .antworten-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
  .antworten-tabelle th, .antworten-tabelle td { text-align: left; vertical-align: top; padding: 10px 18px; border-top: 1px solid var(--grau-blau); }
  .antworten-tabelle thead th { color: var(--braun); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
  .antworten-tabelle tbody th { background: var(--creme); }
  .antworten-tabelle td:nth-child(2) { white-space: nowrap; font-weight: 700; }
  .antworten-tabelle tbody th[scope="row"] { background: none; font-weight: 600; }

  .kachel.mit-symbol h3::before { content: none; }
  /* aufklappbare Referenz unten in den Kacheln: kleines Zitat mit Quelle */
  .kachel.mit-symbol { display: flex; flex-direction: column; }
  .referenz { margin-top: auto; padding-top: 8px; }
  /* weitere Stärken ohne Referenz: zugeklappt unter den drei Hauptkacheln */
  .weitere-staerken { margin-top: 20px; }
  .weitere-staerken > summary { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-dunkel); text-decoration: underline; text-underline-offset: 3px; }
  .weitere-staerken .kacheln { margin-top: 16px; }
  .referenz summary { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-dunkel); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
  /* der Kreis mit + / – steht außerhalb des Textflusses, damit die Unterstreichung nicht als Strich unter dem Zeichen erscheint */
  .referenz summary, .weitere-staerken > summary { position: relative; padding-right: 28px; }
  .referenz summary::after, .weitere-staerken > summary::after { position: absolute; right: 0; top: calc(50% - 10px); }
  /* einheitliches Aufklapp-Muster (Referenz, Weitere Stärken, Häufige Fragen, Alle Antworten): fett, Kreis mit + / – hinter dem Text */
  .referenz summary, .weitere-staerken > summary, .fragen summary, .aufklappen summary { cursor: pointer; list-style: none; font-weight: 700; }
  .referenz summary::-webkit-details-marker, .weitere-staerken > summary::-webkit-details-marker, .fragen summary::-webkit-details-marker, .aufklappen summary::-webkit-details-marker { display: none; }
  .referenz summary::after, .weitere-staerken > summary::after, .fragen summary::after, .aufklappen summary::after { content: "+"; content: "+" / ""; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border: 2px solid var(--orange-dunkel); border-radius: 50%; color: var(--orange-dunkel); font-size: 1rem; font-weight: 700; line-height: 1; }
  .referenz[open] summary::after, .weitere-staerken[open] > summary::after, .fragen details[open] summary::after, .aufklappen[open] summary::after { content: "–"; content: "–" / ""; }  /* erste Angabe: Rückfall für ältere Browser */
  .referenz blockquote { margin: 10px 0 4px; font-size: .95rem; color: var(--text); border-left: 3px solid var(--orange); padding-left: 10px; }
  .referenz-quelle { margin: 0; font-size: .85rem; color: var(--braun); }
  .kachel .symbol-kreis { margin-bottom: 12px; }
  /* Werdegang als dunkle Zeitleiste (Vorbild der Nutzerin: „Die Geschichte der Nashörner“, Synapsenbrenner) */
  /* Baustein „dunkles Band“ (Dunkelbraun) über die ganze Seitenbreite (border-image ragt seitlich bis an den Fensterrand).
     Der Farbwechsel markiert den Abschnittsbeginn, deshalb keine Trennlinie davor und darin. */
  /* Fläche per border-image statt Schatten: eine einzige Farbfläche, dadurch keine feine Kante am Rand der Inhaltsspalte (2026-10-30) */
  .band-dunkel { color: var(--vogel-weiss); padding: var(--abstand) 0; border-image: linear-gradient(var(--text) 0 0) fill 0 / / 0 100vmax; }
  /* Windows-Kontrastmodus und Druck: border-image wird dort nicht angepasst, deshalb dunkle Flächen und Schleier ausblenden (Prüfrunde 2026-10-30) */
  @media (forced-colors: active) { .band-dunkel { border-image: none; } #match-check::before, #start::before, #start::after { display: none; } }
  @media print { .band-dunkel { border-image: none; color: var(--text); } .band-dunkel h2, .band-dunkel h3, .band-dunkel .dachzeile, .band-dunkel a:not(.knopf), .band-dunkel .quelle { color: var(--text) !important; } #match-check::before, #start::before, #start::after { display: none; } .js .einblenden, .js .station { opacity: 1 !important; transform: none !important; } }
  .band-dunkel :focus-visible { outline-color: var(--vogel-weiss); }
  .band-dunkel .dachzeile { color: var(--markierung); }
  .band-dunkel h2 { color: var(--weiss); }
  .band-dunkel a:not(.knopf) { color: var(--markierung); }
  /* Zitate auf dem dunklen Band als weiche Karten */
  .band-dunkel .zitat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-left: 6px solid var(--orange); color: var(--weiss); }
  .band-dunkel .quelle { color: var(--markierung); }
  .weg-einleitung { font-size: 1.15rem; max-width: 38em; margin: 0 0 28px; }
  /* Mittellinie; Stationen abwechselnd links und rechts davon (auf schmalen Bildschirmen alle rechts) */
  .weg { list-style: none; margin: 0 0 28px; padding: 0; position: relative; }
  .weg::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--orange); }
  .station { position: relative; width: 50%; padding: 0 36px 26px 0; }
  .station:nth-child(even) { margin-left: 50%; padding: 0 0 26px 36px; }
  .station:nth-child(odd) { text-align: right; }
  .station::before { content: ""; position: absolute; right: -8px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--gefieder); }
  .station:nth-child(even)::before { right: auto; left: -8px; }
  /* weiche Karte: leicht aufgehelltes Weiß auf dem dunklen Grund */
  .station-karte { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 16px 20px; }
  /* Rotkehlchen sitzt auf „heute“ und öffnet beim Klick eine Sprechblase */
  .weg-buehne { position: relative; }
  .weg-vogel { position: absolute; left: 0; top: 0; z-index: 3; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
  .weg-vogel svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 85%; transition: transform .2s; }
  /* beim Darüberfahren leicht größer, als Hinweis, dass man ihn anklicken kann */
  .weg-vogel:hover svg, .weg-vogel:focus-visible svg { transform: scale(1.12); }
  @media (prefers-reduced-motion: reduce) { .weg-vogel svg { transition: none; } }
  .vogel-blase { position: absolute; z-index: 4; width: min(300px, 90%); background: var(--vogel-weiss); color: var(--text); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(43, 33, 27, .35); }
  .vogel-blase p { margin: 0 0 10px; font-size: 1rem; }
  .vogel-blase :focus-visible { outline-color: var(--orange-dunkel); }
  /* sanftes Einblenden beim Scrollen (nur mit JavaScript); „heute“ ist immer sichtbar, weil dort das Rotkehlchen sitzt */
  .js .station:not(.station-heute) { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
  .js .station.sichtbar { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .station:not(.station-heute) { opacity: 1; transform: none; transition: none; } }
  .station-heute .station-karte { border-color: var(--orange); }
  .station-zeit { margin: 0; color: var(--markierung); font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
  .station h3 { color: var(--weiss); margin: 4px 0 4px; }
  .station p:not(.station-zeit) { margin: 0; font-size: 1rem; }
  /* Abkürzungen ohne Unterstreichung; die volle Bezeichnung steht weiter im title */
  abbr[title] { text-decoration: none; }
  .knopf.hell { border-color: var(--vogel-weiss); color: var(--vogel-weiss); background: transparent; }

  /* Zitatsymbol vor allen Zitaten (Illustration im Linienstil, Akzentfarbe) */
  .zitat, .zitat-text, .referenz blockquote { position: relative; }
  .zitat::before, .zitat-text::before, .referenz blockquote::before, .kopf-zitat::before {
    content: ""; position: absolute; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23E07A3F' d='M6 24c0-6 2-11 7-14l1.5 2.2C11.8 14 11 16.3 11 18h3v8H6zm12 0c0-6 2-11 7-14l1.5 2.2C23.8 14 23 16.3 23 18h3v8h-8z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .zitat { padding-left: 76px; }
  .zitat::before { left: 24px; top: 22px; width: 36px; height: 36px; }
  .zitat-text { margin: 0; padding-left: 52px; font-size: 1.15rem; font-style: italic; line-height: 1.55; }
  .zitat-text::before { left: 0; top: 4px; width: 36px; height: 36px; }
  /* auf dem graubraunen Kasten das Symbol in Brust-Hell, damit es sichtbar bleibt */
  .referenz blockquote { padding-left: 34px; border-left: 0; }
  .referenz blockquote::before { left: 0; top: 2px; width: 22px; height: 22px; }
  /* Stimmen aus dem Praktikum: Zitat mit Titel neben großer Illustration im Kreis und Stichworten; abwechselnd links und rechts */
  .quelle-klein { font-size: .9rem; }
  .stimmen { display: grid; gap: 48px; margin-bottom: 28px; }
  .stimme { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; }
  .stimme:nth-child(even) .stimme-bild { order: -1; }
  .stimme:nth-child(even) { grid-template-columns: 260px 1fr; }
  .stimme h3 { font-size: 1.4rem; margin-bottom: 10px; }
  .stimme .zitat-text { font-size: 1.1rem; }
  .stimme-bild { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .bild-kreis { display: flex; align-items: center; justify-content: center; width: 170px; height: 170px; border-radius: 50%; background: var(--weiss); color: var(--text); }
  .bild-kreis .ikon { width: 76px; height: 76px; stroke-width: 1.5; }
  .stichworte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .stichworte li { background: var(--weiss); border-radius: 999px; padding: 5px 14px; font-size: .9rem; font-weight: 600; }
  /* Kontakt: zwei Spalten mit feiner Trennlinie, links eigene Angaben, rechts die Referenz */
  /* gemeinsame Zeilen (subgrid), damit Namen, Angaben und Knöpfe beider Spalten auf einer Höhe stehen */
  .kontakt-spalten { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); row-gap: 0; }
  .kontakt-spalte { padding: 4px 32px 4px 0; display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; }
  .kontakt-spalte + .kontakt-spalte { padding: 4px 0 4px 32px; border-left: 1px solid var(--grau-blau); }
  .kontakt-spalte > p:first-child { margin-top: 0; }
  .kontakt-spalte h3 { font-size: 1.4rem; margin: 18px 0 10px; }
  /* Angaben als Liste mit Symbolen; Links ohne Knopf, aber ganz anklickbar */
  /* die fünf Angaben beider Spalten teilen sich dieselben Zeilen (subgrid): gleiche Abstände, auch wenn eine Angabe umbricht */
  .kontakt-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .kontakt-liste li { padding: 6px 0; line-height: 1.4; }
  .kontakt-liste li, .kontakt-liste a { display: flex; align-items: flex-start; gap: 12px; }
  .kontakt-liste a { color: var(--text); font-weight: 600; text-decoration: none; }
  .kontakt-liste a:hover, .kontakt-liste a:focus-visible { color: var(--orange-dunkel); text-decoration: underline; text-underline-offset: 3px; }
  .kontakt-liste .ikon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--braun); }
  /* Kontakt auf dem dunklen Band: helle Schrift und Symbole */
  .band-dunkel .kontakt-spalte h3 { color: var(--weiss); }
  .band-dunkel .kontakt-liste a { color: var(--vogel-weiss); }
  .band-dunkel .kontakt-liste a:hover, .band-dunkel .kontakt-liste a:focus-visible { color: var(--markierung); }
  .band-dunkel .kontakt-liste .ikon { color: var(--markierung); }
  .knopf.primaer .ikon { color: var(--weiss); }
  /* Arbeitsprobe: Varianten je Baustein, zwei sichtbar, die übrigen aufklappbar (Wunsch der Nutzerin, 2026-10-30) */
  #probe-start { padding-top: 8px; scroll-margin-top: 0; }  /* ohne Dachzeile: wie #start, sonst rutscht die H1 unter die Menüleiste (Prüfrunde 2026-11-02) */
   /* „Persönlich“ nicht: dort reicht das Foto bis an die Menüleiste (Wunsch der Nutzerin, 2026-11-02) */
  #probe-varianten h3 { margin: 32px 0 0; font-size: 1.4rem; }  /* frei stehende H3 wie Match-Check, Empfehlung, Kontakt (22,4 px); 20 px nur für Titel in Kästchen */
  /* gewählte Fassung groß mit Begründung, alle übrigen Fassungen klein rechts daneben, getrennt durch eine feine Linie (Wunsch der Nutzerin, 2026-10-30) */
  .variante-gruppe { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; margin-top: 12px; }
  .gewaehlt-spalte > p { margin: 14px 0 0; }
  .gewaehlt-fassung { padding: 16px; }
  .gewaehlt-fassung.zeichen img { height: 220px; }
  .varianten-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-left: 32px; border-left: 1px solid var(--grau-blau); }
  .varianten-rest.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .varianten-rest.eins { grid-template-columns: minmax(0, 1fr); }
  /* frühere Fassungen als ein Sammelbild je Gruppe (Karten im Bild, Hintergrund transparent; Wunsch der Nutzerin, 2026-10-30) */
  .varianten-rest .sammelbild { display: block; width: 100%; height: auto; }
  .varianten-rest .variante { padding: 8px; }
  .varianten-rest .variante.zeichen img { height: 72px; }
  .varianten-rest .farb-muster { grid-template-rows: 18px 34px 22px; }
  .varianten-rest .farb-leiste { font-size: .6rem; padding: 0 8px; }
  @media (max-width: 959px) {
    .variante-gruppe { grid-template-columns: minmax(0, 1fr); }
    .varianten-rest, .varianten-rest.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--grau-blau); }
    .varianten-rest.eins { grid-template-columns: minmax(0, 1fr); }
    .gewaehlt-fassung.zeichen img { height: 160px; }
  }
  .varianten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 12px; }
  .varianten.klein, .varianten.portraets { grid-template-columns: repeat(4, 1fr); }
  .varianten-mehr .varianten { margin-top: 16px; }
  .variante { margin: 0; background: var(--weiss); border: 1px solid #ece4d7; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
  .variante img { display: block; width: 100%; height: auto; border-radius: 6px; }
  .variante.zeichen img { height: 140px; object-fit: contain; }
  .variante.rund img { border-radius: 50%; }  /* Zwischenstand „rund“ wurde im Kopfbereich als Kreis gezeigt */
  .variante a { display: block; }
  .variante figcaption { margin-top: 10px; font-size: .95rem; line-height: 1.4; color: var(--braun); }
  .gewaehlt-marke { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 4px; background: var(--markierung); color: var(--text); font-weight: 700; font-size: .85rem; }
  .farb-muster { display: grid; grid-template-rows: 28px 56px 34px; border-radius: 6px; overflow: hidden; border: 1px solid #ece4d7; }
  .farb-leiste { display: flex; align-items: center; padding: 0 12px; color: var(--weiss); font-weight: 900; font-size: .8rem; letter-spacing: .04em; }
  .farb-seite { background: var(--creme); }
  /* Vorgehen: Bausteine untereinander, dazwischen ein Pfeil nach unten; letzter Baustein mit Rahmen in Akzentfarbe (Gestaltungsregel 6) */
  .schritte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 40px; }
  .schritt { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; background: var(--weiss); border: 1px solid #ece4d7; border-radius: 10px; padding: 20px 24px; transition: border-color .2s; }
  .schritt:last-child { border: 2px solid var(--orange); }
  .schritt + .schritt::before { content: ""; position: absolute; left: 51px; top: -34px; width: 28px; height: 28px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23E07A3F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v20M7 16l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* Karten im dunklen Band als weiche, leicht aufgehellte Flächen (Weiß 6 %, Rand 14 %, Regel aus docs/design.md) statt hartem Weiß (Wunsch der Nutzerin, 2026-10-30) */
  .band-dunkel .schritt, .band-dunkel .werkzeug { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--vogel-weiss); }
  .band-dunkel .schritt:last-child { border: 2px solid var(--orange); }
  .band-dunkel .schritt h3, .band-dunkel .werkzeug h3 { color: var(--weiss); }
  .band-dunkel .schritt-nr { color: var(--markierung); }
  .band-dunkel .werkzeug p { color: var(--vogel-weiss); opacity: .85; }
  .band-dunkel .werkzeug-logo { color: var(--vogel-weiss); }
  .band-dunkel .schritt .symbol-kreis, .band-dunkel .werkzeug .symbol-kreis { background: rgba(255, 255, 255, .1); color: var(--vogel-weiss); }
  @media (hover: hover) { .band-dunkel .schritt:not(:last-child):hover { border-color: var(--orange); } }
  .schritt-nr { margin: 2px 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--braun); }
  .schritt h3 { margin: 0 0 6px; }
  .schritt p:last-child { margin: 0; }
  @media (hover: hover) { .schritt:not(:last-child):hover { border-color: var(--orange); } }
  @media (max-width: 959px) {
    .schritt { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
    .schritt + .schritt::before { left: calc(50% - 14px); }
  }
  /* Texte im Vergleich: Fachgebiet, Titel, Vorher (ausgegraut) und Nachher (markiert) nebeneinander, darunter die Begründung */
  .text-beispiel { margin-top: 32px; }
  .fachgebiet { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 4px; background: var(--text); color: var(--weiss); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
  .text-beispiel h3 { margin: 0 0 12px; font-size: 1.4rem; }
  .text-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .text-fassung { border-radius: 10px; padding: 14px 18px; }
  .text-fassung p { margin: 0; }
  .text-fassung .fassung-name { margin-bottom: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .text-fassung.vorher { background: transparent; border: 1px dashed var(--grau-blau); color: var(--braun); }
  .text-fassung.nachher { background: var(--weiss); border: 2px solid var(--orange); }
  .text-fassung.nachher .fassung-name { color: var(--orange-dunkel); }
  .text-warum { margin: 12px 0 0; }
  /* Zweitknopf auf dem dunklen Band: helle Kontur und Schrift */
  .band-dunkel .knopf.sekundaer { border-color: var(--vogel-weiss); color: var(--vogel-weiss); }
  /* Sprechblase des Rotkehlchens ist weiß: Knopf dort wieder braun (sonst weiß auf weiß) */
  .vogel-blase .knopf.sekundaer { border-color: var(--braun); color: var(--braun); }
  /* ebenso im weißen Ergebnis des Match-Checks („Noch einmal versuchen“, Prüfrunde 2026-11-02) */
  .check .knopf.sekundaer { border-color: var(--braun); color: var(--braun); }
  @media (max-width: 959px) { .text-vergleich { grid-template-columns: 1fr; } }
  /* Werkzeuge als Kacheln: Logo oder eigenes Symbol, Name, eine Zeile zur Verwendung */
  .werkzeug-raster { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .werkzeug { background: var(--weiss); color: var(--text); border-radius: 10px; padding: 20px; }
  .werkzeug-logo { display: block; width: 44px; height: 44px; color: var(--text); margin-bottom: 12px; }
  .werkzeug-logo.breit { width: auto; }
  .werkzeug-logo.schriftzug { width: auto; height: 14px; margin: 15px 0 27px; }  /* Schriftzug ohne Bildzeichen, auf die Höhe der anderen Logos ausgerichtet */
  .werkzeug h3 { margin: 0 0 4px; font-size: 1.25rem; }
  .werkzeug p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--braun); }
  @media (max-width: 959px) { .werkzeug-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .werkzeug { padding: 16px; } }
  .probe-liste { padding-left: 1.2em; }
  .probe-rolle { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; margin-top: 8px; }
  .probe-rolle .probe-liste { margin: 0; }
  .probe-rolle .chat-beispiel { margin: 0; padding: 0 0 0 32px; background: none; border: 0; border-left: 1px solid var(--grau-blau); border-radius: 0; }
  .probe-rolle .chat-beispiel img { border: 1px solid #ece4d7; border-radius: 10px; }
  @media (max-width: 959px) {
    .probe-rolle { grid-template-columns: 1fr; gap: 24px; }
    .probe-rolle .chat-beispiel { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--grau-blau); }
  }
  .chat-beispiel { width: fit-content; max-width: 100%; margin: 24px 0 0; background: var(--weiss); border: 1px solid #ece4d7; border-radius: 10px; }
  .chat-beispiel img { display: block; max-width: 100%; height: auto; border-radius: 6px; }  /* nicht über die Originalgröße vergrößern, sonst unscharf */
  .chat-beispiel figcaption { margin-top: 10px; font-size: .95rem; color: var(--braun); }
  .probe-liste li + li { margin-top: 6px; }
  @media (max-width: 959px) {
    .varianten { grid-template-columns: 1fr; }
    .varianten.klein, .varianten.portraets, .varianten.farben { grid-template-columns: repeat(2, 1fr); }
    .variante.zeichen img { height: 110px; }
  }
  /* Seite „Persönlich“: Foto randlos über die halbe Breite, Text daneben, abwechselnd rechts und links;
     kein Inhaltsverzeichnis (Wunsch der Nutzerin nach Vorlage, 2026-11-02) */
  .split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(720px, calc(100svh - var(--kopf-hoehe))); padding: 0; }
  .split-bild { position: relative; min-height: 360px; }
  .split.foto-links .split-bild { order: -1; }
  .split-bild img, .split-bild .foto-platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; }
  .split-bild img { object-fit: cover; }
  /* Person steht rechts im Bild: beim Zuschneiden auf das Feld rechts halten, damit das Gesicht nicht angeschnitten wird */
  /* oben nichts abschneiden (Handy, 4:3): Ausschnitt nur unten (Wunsch der Nutzerin, 2026-11-03) */
  .split-bild img.foto-rechts { object-position: 85% 0%; }
  /* Text bündig mit Logo und Menü (Seitenbreite 1160 px, 16 px Rand) bzw. 64 px Abstand zum Foto */
  .split-text { align-self: center; padding: var(--abstand) max(32px, calc(100% - 564px)) var(--abstand) 64px; }
  .split:not(.foto-links) .split-text { padding: var(--abstand) 64px var(--abstand) max(32px, calc(100% - 564px)); }
  .split-text > :last-child { margin-bottom: 0; }
  /* Fließtext größer als sonst (Wunsch der Nutzerin, 2026-11-02): 21 px, H2 bleibt 33,6 px (Verhältnis 1,6), Zeilen ca. 55 Zeichen */
  .split-text p:not(.dachzeile) { font-size: 1.3125rem; line-height: 1.6; }
  .split.dunkel { background: var(--text); color: var(--vogel-weiss); }
  .split.dunkel .dachzeile { color: var(--markierung); }
  .split.dunkel h2 { color: var(--weiss); }
  .split.dunkel :focus-visible { outline-color: var(--vogel-weiss); }
  /* Platzhalter, bis die Nutzerin die Fotos liefert */
  .foto-platzhalter { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
    background: var(--weiss); border: 2px dashed var(--grau-blau); color: var(--braun); font-weight: 600; }
  .split.dunkel .foto-platzhalter { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: var(--markierung); }
  /* Fotos blenden nur weich ein, ohne Bewegung (sie reichen bis an den Rand) */
  .js .split-bild .einblenden { transform: none; }
  @media print { .split.dunkel { background: none; color: var(--text); } .split.dunkel h2, .split.dunkel .dachzeile { color: var(--text); } }
  .leitfrage { background: var(--weiss); border: 1px dashed var(--grau-blau); border-radius: 10px; padding: 16px 20px; margin: 0 0 14px; }
  .leitfrage h2 { font-size: 1.25rem; margin-bottom: 4px; }

  /* ---------- Neuer Kopfbereich (2026-10-29) ---------- */
  /* Vorstellung: erste Zeile normal, zweite fett und auf eigener Zeile */
  .vorstellung { font-size: 1.45rem; line-height: 1.35; margin: 0 0 16px; max-width: 30em; }
  /* zweite Zeile beginnt immer neu; markiert ist nur das Thema, die Jahreszahl bleibt normal (2026-10-30) */
  .vorstellung .zeile { display: block; }
  .vorstellung strong { font-weight: 700; }
  /* Eckdaten: große Zahl, darunter ein kurzes Wort (wie im dunklen Entwurf, hier auf hellem Grund) */
  /* Eckdaten als Kästchen mit Kontur; beim Laden steigen sie nacheinander auf, die Zahlen zählen hoch (Skript) */
  /* Eckdaten als schlichte Faktenzeile (Variante A, 2026-10-29): kein Kasten, kein Schatten, dünne senkrechte Trennlinien; wirkt wie die Kopfzeile eines Lebenslaufs statt wie Preisschilder */
  .zahl-reihe { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 24px 0 0; padding: 0; color: var(--braun); font-size: 1.05rem; }
  .zahl-reihe li { padding: 2px 30px; }
  .zahl-reihe li + li { border-left: 1px solid var(--grau-blau); }
  .zahl-reihe b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--text); }
  /* größerer Hauptknopf */
  .knopf.gross { padding: 20px 40px; font-size: 1.35rem; border-radius: 8px; }
  .knopf.gross .symbol { width: 32px; height: 32px; }
  /* Text im Kopfbereich endet dort, wo die Eckdaten-Reihe endet: der Block ist so schmal wie seine breiteste unteilbare Zeile (die Reihe) */
  .kopf-block { width: min-content; max-width: 100%; }
  .kopf-block .zahl-reihe { flex-wrap: nowrap; }
  .kopf-block .zahl-reihe li { white-space: nowrap; }
  #start .einleitung-text + .einleitung-text { margin-top: -6px; }
  /* Handy: Kopfbereich kompakt, damit der Knopf „Zum Match-Check“ auch auf kleinen Geräten im ersten Bildschirm steht (Wunsch der Nutzerin, 2026-10-29) */
  @media (max-width: 959px) {
    #start h1 { font-size: 1.6rem; margin-bottom: 12px; }  /* so passt „Von Datenqualität zu“ neben das runde Foto */
    #start .vorstellung { font-size: 1.1rem; margin-bottom: 10px; }
    #start .einleitung-text { font-size: 1rem; line-height: 1.5; margin: 0 0 8px; }
    #start .einleitung-text + .einleitung-text { margin-top: 0; }
    #start .zahl-reihe { margin-top: 12px; }
    #start .zahl-reihe li { padding: 2px 10px; }
    #start .knoepfe { margin-top: 14px; }
    #start .knopf.gross { padding: 13px 24px; font-size: 1.15rem; }
    #start .knopf.gross .symbol { width: 26px; height: 26px; }
  }
  /* Handy: Eckdaten kompakter (auf sehr schmalen Geräten dürfen sie umbrechen), Vorstellung etwas kleiner */
  @media (max-width: 959px) { .kopf-block { width: auto; } .kopf-block .zahl-reihe li { white-space: normal; } .vorstellung { font-size: 1.25rem; } .zahl-reihe { gap: 0; font-size: .92rem; } .zahl-reihe li { min-width: 0; flex: 1; padding: 2px 10px; } .zahl-reihe li:first-child { padding-left: 0; } .zahl-reihe b { font-size: 1.1rem; white-space: nowrap; } .knopf.gross { padding: 16px 28px; font-size: 1.2rem; } }
  /* Welle: der helle Kopfbereich geht geschwungen in das dunkle Band des Match-Checks über */
  #start { margin-bottom: 0; padding-top: 8px; padding-bottom: 24px; scroll-margin-top: 0; }
  @media (min-width: 960px) { #start { padding-bottom: 48px; } }  /* Knopf bis Wellenkamm etwa so weit wie der einheitliche Abstand */
  #match-check { padding-top: 64px; scroll-margin-top: calc(8px - var(--abstand) - 64px); }  /* 64 px Welle */
  /* die Welle hängt am Abschnitt (oberhalb des Bandes); #profil schneidet seitlich ab, damit kein waagerechter Scrollbalken entsteht */
  #profil { overflow-x: clip; }
  #match-check { position: relative; }
  #match-check::before { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 0; height: 66px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 66' preserveAspectRatio='none'%3E%3Cpath fill='%232B211B' d='M0 30C240 58 480 6 720 30S1200 6 1440 30V66H0z'/%3E%3C/svg%3E") repeat-x center bottom / 1800px 72px;  /* Kachel etwas höher als die Fläche: ihr oberer Rand liegt außerhalb (sonst feine Linie auf dem Handy) */ }
  /* Inhaltsverzeichnis der Profilseite am Desktop erst ab dem 2. Bildschirm; im ersten Bildschirm nutzt der Kopfbereich auch dessen Spalte.
     Nur unsichtbar, nicht versteckt: Screenreader und Tastatur erreichen es weiter, bei Fokus wird es sichtbar. */
  @media (min-width: 960px) {
    #profil .inhaltsverzeichnis { transition: opacity .3s; }
    body:not(.iv-zeigen) #profil .inhaltsverzeichnis:not(:focus-within) { opacity: 0; pointer-events: none; }
    #profil #start { margin-left: -242px; }
    /* springt jemand mit der Tastatur ins Inhaltsverzeichnis, rückt der Kopfbereich zurück, damit nichts verdeckt wird */
    body:has(#profil .inhaltsverzeichnis:focus-within) #profil #start { margin-left: 0; }
  }
  @media (min-width: 960px) {
    #profil #start { grid-template-columns: 1fr 340px; }
  }
  @media (prefers-reduced-motion: reduce) { #profil .inhaltsverzeichnis { transition: none; } }

  /* ---------- Rechte Seite des Kopfbereichs: warmer Lichtkreis hinter dem Foto und Zitat-Karte (2026-10-29) ---------- */
  .portraet { position: relative; isolation: isolate; }
  .portraet img { position: relative; z-index: 1; }
  /* Desktop: die rechte Seite des Kopfbereichs hat einen zarten Schleier in Brust-Hell und blendet nach links weich in den hellen Hintergrund aus.
     Reicht oben bis an die Menüleiste, rechts bis zum Fensterrand (#profil schneidet ab) und unten unter die Welle. */
  @media (min-width: 960px) {
    #start { position: relative; isolation: isolate; }
    #start::after { content: ""; position: absolute; z-index: -1; top: -40px; bottom: -64px; left: 46%; right: -100vmax; pointer-events: none;
      background: radial-gradient(ellipse 70% 62% at 34% 60%, rgba(249, 211, 184, .75) 0%, rgba(249, 211, 184, .35) 55%, rgba(249, 211, 184, 0) 85%);  /* nur zarter Schleier in Brust-Hell, oben unter der Menüleiste schon Creme (Prüfung 2026-10-29) */
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
    /* links derselbe Schleier gespiegelt, damit der Kopfbereich auf beiden Seiten gleich warm ausläuft (Wunsch der Nutzerin, 2026-10-30) */
    #start::before { content: ""; position: absolute; z-index: -1; top: -40px; bottom: -64px; left: -100vmax; right: 46%; pointer-events: none;
      background: radial-gradient(ellipse 70% 62% at 66% 60%, rgba(249, 211, 184, .75) 0%, rgba(249, 211, 184, .35) 55%, rgba(249, 211, 184, 0) 85%);
      -webkit-mask-image: linear-gradient(to left, transparent 0, #000 22%); mask-image: linear-gradient(to left, transparent 0, #000 22%); }
  }
  /* Foto: rechteckiges Originalfoto, nur die Ränder weich ausgeblendet (Wunsch der Nutzerin, 2026-10-29); am Desktop die Zitat-Karte darunter */
  @media (min-width: 960px) {
    /* rechteckig lassen, nur die vier Ränder weich ausblenden (zwei Verläufe, nur wo beide deckend sind, bleibt das Bild sichtbar) */
    .portraet img {
      -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .5) 10%, #000 24%, #000 76%, rgba(0, 0, 0, .5) 90%, transparent), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5) 8%, #000 18%, #000 70%, rgba(0, 0, 0, .5) 86%, transparent);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .5) 10%, #000 24%, #000 76%, rgba(0, 0, 0, .5) 90%, transparent), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5) 8%, #000 18%, #000 70%, rgba(0, 0, 0, .5) 86%, transparent);
      mask-composite: intersect; border-radius: 22px; }  /* Ecken leicht gerundet */
  }
  @media (min-width: 960px) {
    /* Foto etwas nach links; Zitat-Karte schräg rechts unten, teilweise auf dem Foto (Wunsch der Nutzerin, 2026-10-29) */
    .portraet { display: flex; flex-direction: column; align-items: center; left: -56px; }
    .kopf-zitat { position: absolute; right: -44px; width: 270px; margin: 0; transform: rotate(-3deg); }
    /* Überschrift so groß, dass die Unterkante des Knopfes auf einer Linie mit der unteren Ecke der Zitat-Karte liegt (gemessen bei 1440 px, Wunsch der Nutzerin) */
    #start h1 { font-size: 3.8125rem; }
    /* Text und Knopf in ihrem Block zentriert (Versuch, Wunsch der Nutzerin, 2026-10-29) */
    #start > div { text-align: center; }
    #start .kopf-block { margin-left: auto; margin-right: auto; }
    #start .zahl-reihe, #start .knoepfe { justify-content: center; }
  }
  .kopf-zitat { position: relative; z-index: 2; width: 290px; margin: 26px 0 0; padding: 16px 18px 14px; background: var(--weiss); border-radius: 14px; border-top: 5px solid var(--orange);
    box-shadow: 0 18px 36px -18px rgba(43, 33, 27, .45); }
  .kopf-zitat p { margin: 0 0 8px; padding-left: 42px; font-size: 1.12rem; font-weight: 700; font-style: italic; line-height: 1.3; }
  /* Zitatsymbol wie bei den anderen Zitaten (Grafik aus der gemeinsamen Regel weiter oben) */
  .kopf-zitat::before { left: 18px; top: 18px; width: 30px; height: 30px; }
  .kopf-zitat footer { padding-left: 42px; }
  .kopf-zitat footer { font-size: .9rem; line-height: 1.4; color: var(--braun); }
  /* Karte als Link: wie ein anklickbarer Kasten, hebt sich beim Darüberfahren und wirft einen Schatten */
  a.kopf-zitat { display: block; color: var(--text); text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .3, 1.2), box-shadow .22s; }
  .kopf-zitat blockquote { margin: 0; }
  /* Desktop: Karte per negativem Rand nach oben gezogen statt nur verschoben (vorher nur verschoben),
     sonst bleibt ihr alter Platz unter dem Foto leer und der Kopfbereich wird unten zu hoch (2026-10-30).
     Unterkante Knopf = Unterkante Zitat-Karte: bei Textänderungen diesen Wert nachmessen. */
  @media (min-width: 960px) { .kopf-zitat { margin-top: -117px; } }
  .zur-empfehlung { display: block; margin-top: 6px; color: var(--orange-dunkel); font-weight: 700; }
  .zur-empfehlung span { display: inline-block; transition: transform .22s; }
  @media (hover: hover) {
    a.kopf-zitat:hover { transform: rotate(-3deg) translateY(-5px); box-shadow: 0 24px 40px -18px rgba(43, 33, 27, .5); }
    a.kopf-zitat:hover .zur-empfehlung span { transform: translateX(4px); }
  }
  a.kopf-zitat:focus-visible { outline: 3px solid var(--orange-dunkel); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { a.kopf-zitat, .zur-empfehlung span { transition: box-shadow .2s; } a.kopf-zitat:hover { transform: rotate(-3deg); } }
  /* nur am Desktop mit Foto neben dem Text; schmaler steht das Zitat weiter unten unter „Empfehlung“ */
  @media (max-width: 959px) { a.kopf-zitat { display: none; } }  /* a. nötig: sonst gewinnt a.kopf-zitat { display: block } (Prüfung 2026-10-30) */

  /* Match-Check auf der Profilseite: Kasten, darunter direkt die aufklappbare Tabelle */
  #match-check .check { margin-bottom: 16px; box-shadow: 0 10px 30px rgba(43, 33, 27, .07); }
  /* Ergebnis-Überschrift (jetzt H3) so groß wie früher als H2 auf der Check-Seite */
  .ergebnis-titel { font-size: clamp(1.6rem, 3vw, 2.1rem); }

  /* ---------- Lebendigkeit (2026-10-29): Rückmeldung beim Darüberfahren und kleine Bewegungen ----------
     Nur bei Geräten mit Maus (hover: hover); bei „Bewegung reduzieren“ ohne Verschieben und Animation (siehe unten).
     Regel: Anklickbares hebt sich an und wirft einen Schatten (Knöpfe, Check-Antworten, Aufklapper).
     Nicht Anklickbares bewegt sich nicht: Nur der Rahmen färbt sich, und das orange Detail des Symbols zeichnet sich neu. */
  .knopf, .kachel, .karte, .station-karte, .fragen details, .aufklappen, .menue a, .inhaltsverzeichnis a,
  .symbol-kreis, .kontakt-liste .ikon, .karte::before,
  .referenz summary::after, .weitere-staerken > summary::after, .fragen summary::after, .aufklappen summary::after {
    transition: transform .22s cubic-bezier(.2, .8, .3, 1.2), box-shadow .22s, background-color .22s, border-color .22s, color .22s;
  }
  /* Symbole: das orange Detail (Klasse akzent, pathLength 1) zeichnet sich wie mit dem Stift neu.
     Die Symbole stecken in <use>; dorthin reicht nur eine vererbte Variable, deshalb steuert --ikon-zeichnen die Animation. */
  symbol .akzent, .knopf .symbol .akzent-strich { stroke-dasharray: 1; animation: var(--ikon-zeichnen, none); }
  @keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  /* aufgeklappt: Minus ohne Dreh-Übergang, damit es beim Wechsel von + zu – nicht zurückgedreht wird */
  .referenz[open] > summary::after, .weitere-staerken[open] > summary::after, .fragen details[open] > summary::after, .aufklappen[open] > summary::after { transition: background-color .22s, color .22s; }
  .knopf:active { transform: translateY(0) scale(.97); box-shadow: none; }
  .knopf.sekundaer:focus-visible, .knopf.primaer:focus-visible { transform: translateY(-2px); }
  /* Menüpunkte: orange Unterlinie, die beim Darüberfahren von der Mitte nach außen wächst; bei der aktiven Seite steht sie fest (Wunsch der Nutzerin, 2026-10-29) */
  .menue a:not(.kontakt-knopf) { position: relative; }
  .menue a:not(.kontakt-knopf)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: center; transition: transform .25s ease-out; pointer-events: none; }
  .menue a[aria-current="page"]::after { transform: scaleX(1); }
  @media (hover: hover) {
    .knopf:hover { transform: translateY(-3px); }
    .knopf.primaer:hover { box-shadow: 0 10px 22px -6px rgba(181, 72, 27, .55); }
    .knopf.sekundaer:hover { background: var(--markierung); border-color: var(--orange-dunkel); color: var(--text); box-shadow: 0 8px 18px -8px rgba(43, 33, 27, .35); }
    .knopf.sekundaer:hover .symbol { color: var(--text); }
    .knopf.hell:hover { background: var(--vogel-weiss); color: var(--text); }
    .menue a:not(.kontakt-knopf):hover::after { transform: scaleX(1); }
    .menue a.kontakt-knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43, 33, 27, .3); }
    /* anklickbar: Check-Antworten rücken nach rechts, der Kreis füllt sich */
    .karte:hover { transform: translateX(6px); border-color: var(--orange); background: var(--weiss); box-shadow: 0 8px 18px -10px rgba(43, 33, 27, .35); }
    .karte:hover::before { border-color: var(--orange-dunkel); background: var(--markierung); }
    /* anklickbar: Aufklapper heben sich, wenn die Maus auf der Zeile zum Aufklappen steht (nicht auf dem aufgeklappten Text) */
    .fragen details:has(> summary:hover), .aufklappen:has(> summary:hover) { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 8px 20px -12px rgba(43, 33, 27, .3); }
    /* Plus dreht sich einmal um 90 Grad, solange zugeklappt; das Minus bleibt waagerecht und wird nur etwas größer */
    .referenz summary:hover::after, .weitere-staerken > summary:hover::after, .fragen summary:hover::after, .aufklappen summary:hover::after { background: var(--markierung); }
    .referenz:not([open]) > summary:hover::after, .weitere-staerken:not([open]) > summary:hover::after, .fragen details:not([open]) > summary:hover::after, .aufklappen:not([open]) > summary:hover::after { transform: rotate(90deg); }
    .referenz[open] > summary:hover::after, .weitere-staerken[open] > summary:hover::after, .fragen details[open] > summary:hover::after, .aufklappen[open] > summary:hover::after { transform: scale(1.15); }
    .inhaltsverzeichnis a:hover { transform: translateX(4px); }
    /* nicht anklickbar: keine Bewegung des Kastens, nur Rahmen und Symbol */
    .kachel:hover { border-color: var(--orange); }
    .station-karte:hover { border-color: var(--orange); }
    /* das Symbol zeichnet sein oranges Detail neu, aber nur wenn die Maus auf dem Symbol selbst steht (Wunsch der Nutzerin) */
    .symbol-kreis:hover .ikon, .bild-kreis:hover .ikon, .ikon:hover { --ikon-zeichnen: zeichnen .7s ease-out both; }
    .knopf .symbol:hover .akzent-strich { animation: zeichnen .6s ease-out both; }
    .ergebnis-bild:hover .akzent-strich { animation: zeichnen .7s ease-out both; }
  }
  /* sanftes Einblenden beim Scrollen (Kacheln, Empfehlungen, Häufige Fragen, Fotos auf „Persönlich“; nur mit JavaScript) */
  .js .einblenden { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .knopf, .kachel, .karte, .station-karte, .fragen details, .aufklappen, .menue a, .inhaltsverzeichnis a,
    .symbol-kreis, .kontakt-liste .ikon { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; transform: none !important; }
    .referenz summary::after, .weitere-staerken > summary::after, .fragen summary::after, .aufklappen summary::after, .karte::before { transform: none !important; }
    symbol .akzent, .knopf .symbol .akzent-strich, .ergebnis-bild .akzent-strich { animation: none !important; }
    .menue a:not(.kontakt-knopf)::after { transition: none !important; }
    .js .einblenden { opacity: 1; transform: none; transition: none; }
  }

  /* Match-Check auf dem dunklen Band: Kasten und Tabelle bleiben weiß mit dunkler Schrift */
  .band-dunkel .check-hinweis { color: var(--markierung); }
  .band-dunkel .check, .band-dunkel .aufklappen { color: var(--text); border-color: transparent; }
  .band-dunkel .check .dachzeile { color: var(--braun); }
  .band-dunkel .check :focus-visible, .band-dunkel .aufklappen :focus-visible { outline-color: var(--orange-dunkel); }
  .band-dunkel .aufklappen > summary:focus-visible { outline-offset: -4px; }  /* Rahmen innen, sonst Orange auf Dunkelbraun unter 3 : 1 */
  #match-check .check { box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }

  /* Knopf „Zum Match-Check“ mit Gold: goldener Rahmen und Haken; alle 5 Sekunden läuft von selbst ein goldener Schimmer darüber (Wunsch der Nutzerin) */
  /* ohne goldene Kontur (Wunsch der Nutzerin, 2026-10-29); Gold bleibt im Haken und im Schimmer */
  .knopf.gold-knopf { position: relative; overflow: hidden; border-color: transparent; }
  .knopf.gold-knopf .akzent-strich { stroke: var(--gold); }
  .knopf.gold-knopf::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(217, 164, 65, .55), transparent); transform: skewX(-18deg); pointer-events: none; animation: schimmer 5s ease-out 1.5s infinite; }
  /* Schimmer dauert 0,7 s, danach Pause bis zum nächsten Durchgang */
  @keyframes schimmer { 0% { left: -60%; } 14%, 100% { left: 120%; } }
  @media (hover: hover) {
    .knopf.gold-knopf:hover { box-shadow: 0 10px 24px -6px rgba(217, 164, 65, .7); }
  }
  @media (prefers-reduced-motion: reduce) { .knopf.gold-knopf::after { display: none; } }

  /* Druck/PDF (Prüfrunde 2026-11-02): ohne Menüleiste, Inhaltsverzeichnis, Knöpfe und Check-Fragen; helle Schrift wird dunkel,
     Zitate und Karten nicht über Seitenumbrüche zerteilen; Aufklapper öffnet das Skript vor dem Druck */
  @media print {
    .kopf, .zum-inhalt, .inhaltsverzeichnis, .knoepfe, .knopf, .check, .check-hinweis, .weg-vogel, .vogel-blase, .foto-platzhalter { display: none !important; }
    body { background: #fff; }
    .fuss { background: none; color: var(--text); }
    .fuss a, .station-zeit { color: var(--text) !important; }
    blockquote, .station, .kachel, .schritt, figure { break-inside: avoid; }
    h2, h3 { break-after: avoid; }
  }

  /* Weiche Bewegungen (Wunsch der Nutzerin, 2026-11-03): Aufklapper (Inhaltsverzeichnis, Häufige Fragen, Referenzen,
     Weitere Stärken, Alle Antworten) gleiten auf und zu statt zu springen. Nur Chrome, Edge und Android-Browser können
     das bisher; Safari und Firefox klappen wie vorher sofort auf. */
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; min-block-size: 0; overflow-y: clip; transition: block-size .45s cubic-bezier(.4, 0, .2, 1), content-visibility .45s allow-discrete; }
  details[open]::details-content { block-size: auto; }
  /* min-block-size: 0, sonst kann das Handy-Inhaltsverzeichnis (Flex-Leiste) nicht unter seine Inhaltshöhe schrumpfen und springt */
  /* beim Messen und beim Laden ohne Bewegung (Skript setzt die Klasse kurz) */
  .ohne-uebergang details::details-content, .ohne-uebergang .menue { transition: none !important; }
  @media print { details::details-content { transition: none; } }

  /* Fußzeile */
  .fuss { background: var(--text); color: #e9e2d8; padding: 28px 0; font-size: 1rem; }
  .fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .fuss a { color: var(--markierung); display: inline-block; padding: 4px 0; }  /* Klickfläche mind. 24 px hoch */

  @media (max-width: 959px) {
    .profil-raster { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
    .split { grid-template-columns: 1fr; min-height: 0; }
    /* Handy: Foto immer nach dem Text (Wunsch der Nutzerin, 2026-11-02) */
    .split-bild, .split.foto-links .split-bild { order: 0; min-height: 0; aspect-ratio: 4 / 3; }
    .split-text, .split:not(.foto-links) .split-text { padding: 32px 16px; }
    .split-text p:not(.dachzeile) { font-size: 1.1875rem; }
    .profil-raster.ohne-iv > div { grid-column: auto; }
    .kacheln { grid-template-columns: 1fr; }
    .kontakt-spalten { grid-template-columns: 1fr; grid-template-rows: none; }
    .kontakt-spalte { display: block; }
    .kontakt-liste { grid-template-rows: none; }
    .kontakt-spalte, .kontakt-spalte + .kontakt-spalte { padding: 0; }
    .kontakt-spalte + .kontakt-spalte { border-left: 0; border-top: 1px solid var(--grau-blau); margin-top: 28px; padding-top: 24px; }
    .stimme, .stimme:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
    .stimme:nth-child(even) .stimme-bild { order: 0; }
    .weg::before { left: 8px; }
    .station, .station:nth-child(odd), .station:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 20px 34px; text-align: left; }
    .station::before, .station:nth-child(even)::before { left: 1px; right: auto; }
    .zitat { padding-left: 64px; }
    .zitat::before { left: 18px; }
    /* Tabelle auf schmalen Bildschirmen als Liste */
    .antworten-tabelle thead { display: none; }
    .antworten-tabelle tr, .antworten-tabelle td, .antworten-tabelle th { display: block; }
    .antworten-tabelle td, .antworten-tabelle th[scope="row"] { border-top: 0; padding-top: 2px; padding-bottom: 2px; }
    .antworten-tabelle tr[data-stufe] { border-top: 1px solid var(--grau-blau); padding: 8px 0; }
    /* Inhaltsverzeichnis als dunkle Leiste unten am Bildschirm; öffnet sich nach oben */
    .inhaltsverzeichnis { position: fixed; left: 8px; right: 8px; bottom: 0; top: auto; z-index: 15; transition: transform .4s cubic-bezier(.4, 0, .2, 1), visibility .4s; }
    /* erst ab dem zweiten Bildschirm einblenden (Klasse setzt das Skript beim Scrollen) */
    body:not(.iv-zeigen) .inhaltsverzeichnis { transform: translateY(110%); visibility: hidden; }
    .inhaltsverzeichnis details { display: flex; flex-direction: column-reverse; padding: 0; border: 0; border-radius: 10px 10px 0 0; background: var(--text); box-shadow: 0 -4px 18px rgba(43, 33, 27, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }  /* feine helle Oberkante: Leiste bleibt über dem dunklen Band und der Fußzeile sichtbar */
    .inhaltsverzeichnis summary { color: var(--vogel-weiss); text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; padding: 16px; display: flex; justify-content: center; align-items: center; gap: 12px; }
    .inhaltsverzeichnis summary::after { content: ""; width: 9px; height: 9px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(3px) rotate(45deg); transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
    .inhaltsverzeichnis details[open] summary::after { transform: translateY(-3px) rotate(225deg); }
    .inhaltsverzeichnis ol { margin: 0; padding: 12px 12px 0; max-height: 60vh; overflow-y: auto; background: var(--weiss); border-radius: 10px 10px 0 0; }
    .inhaltsverzeichnis summary:focus-visible { outline-color: var(--vogel-weiss); }
    html { scroll-padding-bottom: 72px; }  /* Fokus nicht unter der festen Leiste verstecken */
    .fuss { padding-bottom: calc(28px + 60px); }  /* Platz für die Leiste, damit sie Impressum und Datenschutz nicht verdeckt */
    body:has(#impressum:not([hidden]), #lerne-mich-kennen:not([hidden])) .fuss { padding-bottom: 28px; }  /* Impressum und Persönlich haben keine Leiste */
    .zurueck { min-height: 44px; padding: 10px 0; }
    /* Tippflächen mindestens 44 px hoch */
    .kontakt-liste li { padding: 2px 0; min-height: 44px; align-items: center; }  /* 2px: zweizeilige Einträge stoßen nicht aneinander */
    .kontakt-liste a { min-height: 44px; align-items: center; }
    .kontakt-liste .ikon { margin-top: 0; }
    .inhaltsverzeichnis a { min-height: 44px; align-items: center; }
    .inhaltsverzeichnis .iv-ikon { margin-top: 0; }
    .referenz summary, .weitere-staerken > summary { min-height: 44px; }
    .knopf.klein { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
  }
  @media (max-width: 959px) {
    .start-raster { grid-template-columns: 1fr; }
    /* auf schmalen Bildschirmen: Text, Knöpfe, dann Foto */
    .start-raster > div { order: 1; }
    /* kein Platz für das Foto neben dem Text: wie auf dem Handy klein und rund oben rechts neben der Überschrift */
    .start-raster { position: relative; }
    .portraet { position: absolute; top: 0; right: 0; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; background: var(--markierung); }
    .portraet img { height: 100%; object-fit: cover; object-position: 50% 16%; }
    #start h1 { padding-right: 150px; }
  }
  @media (max-width: 959px) {
    :root { --kopf-hoehe: 64px; --abstand: 40px; }
    .marke .logo { width: 56px; height: 44px; }
    .marke .name { height: 18px; }
    /* Porträt klein und rund neben Dachzeile und Überschrift, damit es im ersten Bildschirm steht */
    .portraet { top: 8px; width: 88px; height: 88px; }
    #start .dachzeile, #start h1 { padding-right: 100px; }
    /* H1 mindestens so hoch wie das Foto, sonst verdeckt es bei zweizeiliger H1 (390–430 px) den Anfang der Vorstellung (Prüfrunde 2026-11-02) */
    #start h1 { min-height: 88px; }
    /* Check kompakter */
    .check { padding: 18px 16px; }
    .frage-titel { font-size: 1.25rem; }
    .karten { gap: 10px; }
    .karte { padding: 12px 14px; font-size: 1rem; }
    .ergebnis-liste li { padding: 12px 14px; }
  }
  /* Menü-Knopf statt Menüleiste in der Handy-Fassung */
  @media (max-width: 959px) {
    .menue-knopf { display: block; min-height: 44px; min-width: 44px; }
    .menue { display: none; position: absolute; top: var(--kopf-hoehe); left: 0; right: 0; background: var(--studio); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
    .menue.offen { display: flex; }
    .menue { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete; }
    .menue.offen { opacity: 1; transform: none; }
    @starting-style { .menue.offen { opacity: 0; transform: translateY(-8px); } }
    .menue a { display: flex; align-items: center; min-height: 44px; }
    .menue a.kontakt-knopf { margin: 8px 0 0; justify-content: center; }
  }
  /* Nur zwei Fassungen (Wunsch der Nutzerin, 2026-10-29): ab 960 px Desktop, darunter die Handy-Fassung.
     Auf breiteren Fenstern (Tablet, kleiner Laptop) steht die Handy-Fassung als Spalte in der Mitte, damit sie nicht auseinandergezogen wirkt. */
  @media (min-width: 768px) and (max-width: 959px) {
    .wrap { max-width: 640px; }
    .menue { left: 50%; right: auto; width: 640px; margin-left: -320px; }
    .inhaltsverzeichnis { left: 50%; right: auto; width: 624px; margin-left: -312px; }
  }

/* ---------- Anpassungen an WordPress (Twenty Twenty-Five) ----------
   Wird vom Exportskript an das CSS des Prototyps angehängt. Hebt die Abstände und Rahmen auf,
   die WordPress um Vorlage und Seiteninhalt legt, damit die Seite aussieht wie der Prototyp. */

/* Abstände zwischen den Blöcken der Vorlage und des Seiteninhalts */
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > *, .wp-block-post-content > *, .profil-raster > * { margin-block: 0 !important; }
/* die Abschnitte bringen ihren Abstand selbst mit (padding, einheitlich --abstand), WordPress fügt keinen hinzu */
.profil-inhalt > * { margin-block-start: 0 !important; }
.wp-block-post-content { margin: 0; }

/* Twenty Twenty-Five setzt engere Laufweite und „schönen“ Zeilenumbruch, der Prototyp nicht */
body { letter-spacing: normal; }
.seite p, .seite li, .seite h1, .seite h2, .seite h3, .seite blockquote, .seite dd, .seite figcaption, .seite summary, .fuss { text-wrap: wrap; }

/* die Hauptüberschrift setzt WordPress sonst in die Schrift des Themes */
.seite h1, .seite h2, .seite h3, .kopf, .fuss { font-family: "Source Sans 3", system-ui, sans-serif; }

/* Links: WordPress unterstreicht alle Links, der Prototyp legt das je Baustein selbst fest */
.kopf a, .inhaltsverzeichnis a, .knopf, .kontakt-liste a { text-decoration: none; }

/* Twenty Twenty-Five zeichnet bei jedem Fokus eine Kontur, auch nach einem Mausklick (:focus).
   Der Prototyp zeigt den Fokusrahmen nur bei Tastaturbedienung (:focus-visible); so auch hier (Wunsch der Nutzerin, 2026-10-30). */
.wp-site-blocks *:focus:not(:focus-visible), .kopf *:focus:not(:focus-visible), .fuss *:focus:not(:focus-visible) { outline: none; }

/* Handy (Android/Chrome): keine blaue Fläche beim Antippen von Knöpfen und Links (Wunsch der Nutzerin, 2026-10-30) */
html { -webkit-tap-highlight-color: transparent; }

/* Werkzeugleiste für angemeldete Benutzer: Kopfzeile und Inhaltsverzeichnis darunter einordnen */
.admin-bar .kopf { top: 32px; }
/* nur seitlich mitlaufend (Desktop); auf dem Handy ist es eine Leiste unten */
@media (min-width: 960px) {
  .admin-bar .inhaltsverzeichnis { top: calc(var(--kopf-hoehe) + 56px); }
}
@media (max-width: 782px) {
  .admin-bar .kopf { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .kopf { top: 0; }
}