/* Erzeugt von wordpress/werkzeuge/profil_exportieren.py aus prototypen/prototyp/index.html. Nicht von Hand ändern. */
  /* Farben: verbindliche Palette aus docs/design.md */
  :root {
    /* helle Rahmen und Flächen als Transparenz von Braun aus der Palette (Prüfrunde 2026-11-04, vorher eigene Hex-Werte) */
    --rahmen: rgba(110, 90, 64, .16);
    --rahmen-kraeftig: rgba(110, 90, 64, .26);
    --flaeche-hell: rgba(110, 90, 64, .12);
    --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; }
  /* mit Maus nie schmaler als 960 px: beim Vergrößern (Strg +) bleibt die Desktop-Fassung, dafür seitlich scrollen (Wunsch der Nutzerin, 2026-11-03) */
  @media not all and (pointer: coarse) { body { min-width: 960px; } }
  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; }
  /* Desktop-Fassung: feste Größen wie bei 1440 px (die vw-Werte gelten nur noch in der Handy-Fassung) */
  @media not all and (pointer: coarse) { 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; }
  .zum-inhalt:focus-visible { outline-color: var(--text); }  /* Orange auf der Menüleiste hätte nur 1,1 : 1 */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #profil .inhaltsverzeichnis { transition: none !important; }
    .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; }

  /* (Die frühere Klasse „offen“ für offene Angaben im Prototyp ist entfernt: Sie gab dem geöffneten Handy-Menü (.menue.offen)
     eine gestrichelte Kontur und 90 % Schrift, Rückmeldung der Nutzerin 2026-11-04) */

  /* 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, #fehler { min-height: calc(100svh - var(--kopf-hoehe) - 84px); }  /* auch die Fehlerseite (404) */
  /* 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 var(--rahmen); border-radius: 10px; padding: 14px 16px; }
  .inhaltsverzeichnis summary { font-weight: 700; cursor: pointer; list-style: none; }
  .inhaltsverzeichnis summary::-webkit-details-marker { display: none; }
  /* Desktop: Pfeil rechts zeigt, dass sich das Inhaltsverzeichnis zuklappen lässt (Wunsch der Nutzerin, 2026-11-03);
     offen zeigt er nach oben, zu nach unten. Auf dem Handy gelten die Regeln der Leiste unten. */
  @media not all and (pointer: coarse) {
    /* knapper Abstand: in Safari ragte der Pfeil sonst rechts aus der Karte (Rückmeldung der Nutzerin, 2026-11-04) */
    .inhaltsverzeichnis summary { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
    .inhaltsverzeichnis summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px; border-left: 2px solid var(--orange-dunkel); border-top: 2px solid var(--orange-dunkel); transform: translateY(-2px) rotate(225deg); transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
    .inhaltsverzeichnis details[open] summary::after { transform: translateY(2px) rotate(45deg); }
  }
  .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: der obere Innenabstand verschwindet unter der Menüleiste (Wunsch der Nutzerin, 2026-10-30).
     Beginnt der Abschnitt mit einer Dachzeile, liegt auch ihre orange Linie (4 px + 18 px Abstand) unter der Leiste und der Begriff
     steht bei jedem Abschnitt 12 px darunter, damit mehr Inhalt zu sehen ist (Wunsch der Nutzerin, 2026-11-04; vorher Linie 24 px darunter) */
  .abschnitt { --dz-versatz: 0px; scroll-margin-top: calc(8px - var(--abstand) - var(--dz-versatz)); }
  .abschnitt:has(> .dachzeile:first-child, > .band-dunkel > .dachzeile:first-child) { --dz-versatz: 34px; }
  /* 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: calc(8px - var(--dz-versatz)); }
  .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 var(--rahmen); }
  .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 var(--rahmen); 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; }
  /* Link und Pfeil immer in einer Zeile (neben dem inline-block-Pfeil half   nicht, Wunsch der Nutzerin 2026-11-04) */
  .link-mit-pfeil { white-space: nowrap; }

  /* Check „Passen wir zusammen?“: eine Frage auf einmal, Antworten als Kärtchen, Ergebnis mit Stufen */
  .check { background: var(--weiss); border: 1px solid var(--rahmen); 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: var(--flaeche-hell); 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 var(--rahmen-kraeftig); 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); }
  /* orange Rahmen beim Darüberfahren nur mit Maus (unten unter hover: hover); auf dem iPhone blieb er sonst an der
     neuen Antwort an derselben Stelle hängen (Rückmeldung der Nutzerin, 2026-11-03) */
  /* 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 (pointer: coarse) {
    .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 var(--rahmen); 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, .station.wartet { 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 */
  /* Klasse „wartet“ setzt das Skript selbst: lädt es nicht, bleiben die Stationen sichtbar (Prüfrunde 2026-11-04) */
  .station.wartet { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
  .station.wartet.sichtbar { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .station.wartet { 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 (pointer: coarse) {
    .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 var(--rahmen); 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 var(--rahmen); }
  .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 var(--rahmen); 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 (pointer: coarse) {
    .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 (pointer: coarse) { .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 (pointer: coarse) { .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 var(--rahmen); border-radius: 10px; }
  @media (pointer: coarse) {
    .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 var(--rahmen); 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 (pointer: coarse) {
    .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%; }
  /* Weihnachtsfoto: bei schmalem Bildausschnitt (Tablet) am Baum abschneiden, nicht an den Personen rechts (Wunsch der Nutzerin, 2026-11-03) */
  .split-bild img.foto-weihnachten { object-position: 78% 50%; }
  /* 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 und Tablet, Kopfbereich (Wunsch der Nutzerin, 2026-11-04, ersetzt Foto neben der Überschrift und das Skript, das
     Schrift und Abstände bis zum Bildschirmrand wachsen ließ): Das Foto steht rund vor dem Knopf in derselben Zeile und ist so
     groß, wie der Knopf hoch ist; so kann es den Text nicht mehr verschieben. Überschrift über die volle Breite, immer zweizeilig
     (die längere Zeile „SEO, GEO und Content“ ist etwa 9,6 Schriftgrößen breit, 10,1 mit Reserve). Fließtext groß wie bei
     Evergreen Media (18 px, Vorstellung 20 px), gleichmäßige Abstände. */
  @media (pointer: coarse) {
    #start { --knopf-hoehe: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; }
    #start > div { display: contents; }
    #start h1, #start .kopf-block { grid-column: 1 / -1; }
    #start h1 { font-size: min(2.125rem, calc((100vw - 32px) / 10.1)); margin-bottom: 16px; }
    #start .vorstellung { font-size: 1.25rem; line-height: 1.5; margin: 0 0 14px; text-wrap: pretty; }
    #start .vorstellung .zeile { display: inline; }
    #start .vorstellung mark { padding-top: 0; padding-bottom: 0; }
    #start .einleitung-text { font-size: 1.125rem; line-height: 1.6; margin: 0 0 14px; text-wrap: pretty; }
    #start .einleitung-text + .einleitung-text { margin-top: 0; }
    #start .zahl-reihe { margin-top: 20px; }
    #start .portraet { grid-column: 1; grid-row: 3; align-self: center; position: static; width: var(--knopf-hoehe); height: var(--knopf-hoehe); margin: 24px 0 0; border-radius: 50%; overflow: hidden; background: var(--markierung); }
    #start .portraet img { height: 100%; object-fit: cover; object-position: 50% 16%; }
    #start .knoepfe { grid-column: 2; grid-row: 3; margin-top: 24px; flex-wrap: nowrap; }
    /* Knopftext in einer Zeile: auf schmalen Handys (unter 375 px) wird er etwas kleiner (Text ca. 11,1 Schriftgrößen breit) */
    #start .knopf.gross { min-height: var(--knopf-hoehe); padding: 0 14px; font-size: min(1.15rem, calc((100vw - 168px) / 11.4)); white-space: nowrap; justify-content: center; }
    #start .knopf.gross .symbol { width: 26px; height: 26px; }
  }
  /* niedrige Handys (z. B. iPhone SE, ca. 550 px sichtbar): knapper, damit der Knopf im ersten Bildschirm steht */
  @media (pointer: coarse) and (max-height: 640px) {
    #start { padding-top: 0; }
    #start h1 { font-size: min(1.875rem, calc((100vw - 32px) / 10.1)); margin-bottom: 10px; }
    #start .vorstellung { font-size: 1.125rem; margin-bottom: 8px; }
    #start .einleitung-text { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 8px; }
    #start .zahl-reihe { margin-top: 12px; }
    #start .portraet, #start .knoepfe { margin-top: 14px; }
  }
  /* Handy: Eckdaten kompakter (auf sehr schmalen Geräten dürfen sie umbrechen), Vorstellung etwas kleiner */
  @media (pointer: coarse) { .kopf-block { width: auto; } .kopf-block .zahl-reihe li { white-space: normal; } .vorstellung { font-size: 1.25rem; } .zahl-reihe { gap: 0; font-size: 1rem; } .zahl-reihe li { min-width: 0; flex: 1 1 auto; padding: 2px 10px; } .zahl-reihe li:first-child { padding-left: 0; } .zahl-reihe b { font-size: 1.25rem; 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 not all and (pointer: coarse) { #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 - var(--dz-versatz)); }  /* 64 px Welle */
  /* die Welle hängt am Abschnitt (oberhalb des Bandes); #profil schneidet seitlich ab, damit kein waagerechter Scrollbalken entsteht */
  /* alle Seiten schneiden seitlich ab: Die dunklen Bänder ragen per border-image bis 100vmax über den Rand (vorher nur #profil).
     Auf Touch-Geräten zusätzlich die ganze Seite, damit Safari auf dem iPad nicht seitlich ins Leere scrollen lässt
     (Rückmeldung der Nutzerin, 2026-11-04). Mit Maus nicht: Dort soll man beim Vergrößern seitlich scrollen können. */
  #profil, .seite { overflow-x: clip; }
  /* Touch-Geräte: zusätzlich „hidden“, das auch ältere Safari-Versionen kennen (overflow: clip erst ab Safari 16; ohne Unterstützung
     wirkt clip gar nicht und man kann seitlich ins Leere scrollen). Unschädlich, weil in der Handy-Fassung innerhalb von .seite
     nichts „sticky“ ist (die Inhaltsverzeichnis-Leiste ist fest, die Menüleiste liegt außerhalb). body bleibt bei clip, sonst
     würde body zum Scrollbereich und die Menüleiste bliebe nicht oben stehen. */
  @media (pointer: coarse) {
    html { overflow-x: hidden; overflow-x: clip; }
    body { overflow-x: clip; }
    #profil, .seite { overflow-x: hidden; }
  }
  #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.
     Es steht unter dem Kopfbereich auf Höhe der Dachzeile des Match-Checks (Abstand --iv-versatz per Skript) und kommt mit dem
     zweiten Bildschirm herein, sobald dort Platz ist; oben bleibt es hängen (Wunsch der Nutzerin, 2026-11-04; vorher erst
     eingeblendet, wenn der Kopfbereich ganz aus dem Bild war). */
  @media not all and (pointer: coarse) {
    #profil #start { margin-left: -242px; }
    /* !important: in WordPress setzt wordpress-anpassungen.css alle Kinder von .profil-raster mit !important auf margin 0 */
    .js #profil .inhaltsverzeichnis { margin-top: var(--iv-versatz, 0px) !important; transition: opacity .3s; }
    /* sichtbar erst, wenn es ganz in den sichtbaren Teil des zweiten Bildschirms passt (Klasse iv-platz per Skript), nicht schon
       angeschnitten im ersten Bildschirm (Rückmeldung der Nutzerin, 2026-11-04); per Tastatur erreichbar bleibt es */
    .js body:not(.iv-platz) #profil .inhaltsverzeichnis:not(:focus-within) { opacity: 0; pointer-events: none; }
    /* ohne Skript wie bisher: unsichtbar, aber per Tastatur erreichbar; bei Fokus rückt der Kopfbereich zurück */
    html:not(.js) #profil .inhaltsverzeichnis:not(:focus-within) { opacity: 0; }
    html:not(.js) body:has(#profil .inhaltsverzeichnis:focus-within) #profil #start { margin-left: 0; }
  }
  @media not all and (pointer: coarse) {
    #profil #start { grid-template-columns: 1fr 340px; }
  }

  /* ---------- 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 not all and (pointer: coarse) {
    #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 not all and (pointer: coarse) {
    /* 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 not all and (pointer: coarse) {
    /* 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 not all and (pointer: coarse) { .kopf-zitat { margin-top: -89px; } #start .einleitung-text + .einleitung-text { text-wrap: balance; } }  /* 2026-11-04: Zielsatz zweizeilig ausgeglichen (sonst „Content.“ allein), Karte neu ausgerichtet */
  .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 (pointer: coarse) { 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; }
  /* Rückmeldung beim Antippen (Wunsch der Nutzerin, 2026-11-03): Auf dem Handy gibt es kein Darüberfahren. Das Angetippte
     drückt sich kurz ein und färbt sich; erst danach scrollt das Skript weich zum Ziel bzw. zeigt die nächste Frage. */
  /* „html“ vorn: gewinnt gegen die :hover-Regeln weiter unten (sonst am Desktop beim Klicken unsichtbar, Prüfrunde 2026-11-03) */
  html .knopf.angetippt { transform: scale(.96); box-shadow: none; }
  html .knopf.sekundaer.angetippt, html .knopf.sekundaer:active { background: var(--markierung); border-color: var(--orange-dunkel); color: var(--text); transition-duration: 0s; }
  /* rote Knöpfe: dieselbe Bewegung wie beim Klicken am Desktop (eindrücken), keine andere Farbe (Wunsch der Nutzerin, 2026-11-04).
     Gilt auch bei „Bewegung reduzieren“ (iPhone der Nutzerin), sonst bliebe keine Rückmeldung; das kurze Eindrücken ist keine
     große Bewegung. Schnell (0,1 s), damit es in den 160 ms vor dem Scrollen bzw. Seitenwechsel sichtbar ist. */
  html .knopf.primaer.angetippt, html .knopf.primaer:active { transform: scale(.96) !important; box-shadow: none; transition: transform .1s ease-out !important; }
  /* Menü-Knopf: hell, solange gedrückt oder das Menü offen ist */
  .menue-knopf:active, .menue-knopf[aria-expanded="true"] { background: var(--vogel-weiss); color: var(--text); }
  html .menue a:active, html .menue a.angetippt { background: var(--text); }
  html .menue a.kontakt-knopf:active, html .menue a.kontakt-knopf.angetippt { background: var(--markierung); transform: scale(.96); }
  html .inhaltsverzeichnis a:active, html .inhaltsverzeichnis a.angetippt { background: var(--markierung); transform: scale(.98); }
  html .karte:active, html .karte.angetippt { border-color: var(--orange-dunkel); background: var(--markierung); transform: scale(.98); }
  html .karte.angetippt::before { border-color: var(--orange-dunkel); background: var(--orange-dunkel); box-shadow: inset 0 0 0 3px var(--weiss); }
  .fragen summary:active, .aufklappen summary:active { background: var(--markierung); border-radius: 10px; }
  .referenz summary:active, .weitere-staerken > summary:active { color: var(--text); }
  .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, .check-einleitung, .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; }
    /* einspaltig ohne Inhaltsverzeichnis-Spalte und ohne Mindestbreite, sonst stand alles in einer 210 px schmalen Spalte (Prüfrunde 2026-11-04) */
    body { min-width: 0 !important; }
    .profil-raster { display: block; padding-top: 0; }
    #profil #start { margin-left: 0; }
    .js #profil .inhaltsverzeichnis { margin-top: 0 !important; }
    /* Karten im dunklen Band: dunkle Schrift auf Weiß */
    .band-dunkel, .band-dunkel * { color: var(--text) !important; }
    .band-dunkel .schritt, .band-dunkel .werkzeug, .band-dunkel .station-karte, .band-dunkel .zitat { background: none; border-color: var(--grau-blau); }
    /* Kopfbereich: Text links, Foto klein rechts daneben, ohne Zitat-Karte (das Zitat steht unter „Empfehlung“); Foto lag
       sonst auf dem Text (Rückmeldung der Nutzerin, 2026-11-04) */
    #profil #start { grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; padding-bottom: 0; }
    #start > div { text-align: left !important; }
    #start .kopf-block { margin-left: 0 !important; width: auto; }
    #start .zahl-reihe { justify-content: flex-start !important; }
    #start .zahl-reihe li:first-child { padding-left: 0; }
    #start h1 { font-size: 2.4rem !important; }
    .portraet { left: 0 !important; }
    .portraet img { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 12px; }
    a.kopf-zitat { display: none !important; }
    /* keine leeren Flächen: kleinere Abstände, keine Fläche für die Welle */
    #match-check { padding-top: 0 !important; }
    .abschnitt, .band-dunkel { padding-top: 20px !important; padding-bottom: 20px !important; }
    .abschnitt:has(> .band-dunkel) { padding: 0 !important; }
    /* Überschrift nicht allein am Seitenende; Aufklapper dürfen über Seiten umbrechen */
    .dachzeile, h2, h3 { break-after: avoid-page; }
    .werkzeug, .text-beispiel, .variante-gruppe, .stimme, .kontakt-spalten, .ergebnis-liste li, .fragen details { break-inside: avoid; }
    /* „Persönlich“: Text, darunter das ganze Foto; nichts über Seiten zerteilt, dunkle Abschnitte mit dunkler Schrift
       (Fotos wurden sonst abgeschnitten, Rückmeldung der Nutzerin, 2026-11-04) */
    .split { display: block; min-height: 0; break-inside: avoid; }
    .split-text, .split:not(.foto-links) .split-text { padding: 16px 0 10px !important; }
    .split-text p:not(.dachzeile) { font-size: 1rem; }
    .split-bild, .split.foto-links .split-bild { position: static; min-height: 0; aspect-ratio: auto; width: auto; margin: 0 0 20px; }
    .split-bild img { position: static; width: auto; max-width: 100%; height: auto; max-height: 56mm; object-fit: contain; border-radius: 8px; }  /* zwei Abschnitte je A4-Seite */
    .split.dunkel, .split.dunkel * { color: var(--text) !important; }
    .fuss { break-before: avoid; padding: 8px 0 !important; }  /* Fußzeile nicht allein auf einer Seite */
    /* Werdegang untereinander statt im Zickzack, sonst große Lücken zwischen den Stationen */
    .weg::before { left: 8px; }
    .station, .station:nth-child(odd), .station:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 16px 34px; text-align: left; }
    .station::before, .station:nth-child(even)::before { left: 1px; right: auto; }
    details::details-content { block-size: auto !important; overflow: visible !important; content-visibility: visible !important; }
    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. Chrome, Edge und Android-Browser können
     das mit CSS; in Safari und Firefox übernimmt das Skript (Baustein „Weiche Bewegungen“). */
  :root { interpolate-size: allow-keywords; }
  /* ohne das Inhaltsverzeichnis: seit dieser Regel färbte Safari auf dem iPhone seine Adressleiste unter der Handy-Leiste dunkel
     (Rückmeldung der Nutzerin, 2026-11-03); die Leiste gleitet stattdessen per Skript */
  details:not(.inhaltsverzeichnis 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:not(.inhaltsverzeichnis 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; }
  /* Safari und Firefox: dort gleitet das Skript; der CSS-Übergang würde den Inhalt sonst erst nach .45 s zeigen */
  .aufklapper-skript details::details-content { transition: none !important; }
  @media print { details::details-content { transition: none; } }

  /* Fußzeile */
  .fuss { background: var(--text); color: var(--vogel-weiss); 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 (pointer: coarse) {
    .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 */
    /* volle Breite ohne Rand links und rechts (Wunsch der Nutzerin, 2026-11-03) */
    .inhaltsverzeichnis { position: fixed; left: 0; right: 0; 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; }
    /* dunkle Fläche unter der Leiste nach unten verlängern: Safari ab iOS 26 zeigt bei eingeklappter Adressleiste sonst
       einen Spalt mit Seiteninhalt zwischen Leiste und Adressleiste (Rückmeldung der Nutzerin, 2026-11-03) */
    .inhaltsverzeichnis::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 120px; background: var(--text); pointer-events: none; }
    .inhaltsverzeichnis details { display: flex; flex-direction: column-reverse; padding: 0; border: 0; border-radius: 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: 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 (pointer: coarse) {
    :root { --kopf-hoehe: 64px; --abstand: 40px; }
    .marke .logo { width: 56px; height: 44px; }
    .marke .name { height: 18px; }
    /* 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; }
  }
  /* Handy und Tablet: Fließtext überall mindestens 18 px wie bei Evergreen Media (Wunsch der Nutzerin, 2026-11-04);
     vorher waren Kacheln, Werkzeuge, Check und Tabellen kleiner (14–17 px). Kleine Beschriftungen (Dachzeile, Quelle, Stufe) bleiben. */
  @media (pointer: coarse) {
    body { line-height: 1.6; }
    .kachel p, .werkzeug p, .ergebnis-liste p, .antworten-tabelle, .karte, .referenz blockquote, .text-fassung p,
    .variante figcaption, .chat-beispiel figcaption, .inhaltsverzeichnis a, .fuss, .kontakt-liste, .referenz summary, .station p:not(.station-zeit), .vogel-blase p, .kachel blockquote, .stimme .zitat-text { font-size: 1.125rem; }
    .einleitung-text, .weg-einleitung { font-size: 1.25rem; }
    .quelle, .referenz-quelle, .kopf-zitat footer { font-size: 1rem; }
  }
  /* ohne JavaScript (Prüfrunde 2026-11-04): Menüpunkte offen statt Menü-Knopf, leeren Check-Rahmen ausblenden */
  html:not(.js) .menue-knopf { display: none !important; }
  html:not(.js) #check-frage, html:not(.js) #check-zurueck { display: none; }
  @media (pointer: coarse) { html:not(.js) .menue { display: flex; position: static; opacity: 1; transform: none; flex-direction: row; flex-wrap: wrap; padding: 0 0 8px; } html:not(.js) .kopf .wrap { flex-wrap: wrap; } }
  /* Menü-Knopf statt Menüleiste in der Handy-Fassung */
  @media (pointer: coarse) {
    .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); } }
    /* größere Schrift im Menü (Wunsch der Nutzerin, 2026-11-04): Menüpunkte 20 px, Knopf „Menü“ 18 px */
    .menue a { display: flex; align-items: center; min-height: 52px; font-size: 1.25rem; }
    .menue-knopf { font-size: 1.125rem; padding: 6px 12px; }
    .menue a.kontakt-knopf { margin: 8px 0 0; justify-content: center; }
  }
  /* Tablets (Touch, ab 600 px, hoch und quer) zeigen die Handy-Fassung als Spalte in der Mitte, damit sie nicht auseinandergezogen
     wirkt (Wunsch der Nutzerin, 2026-11-04). Auf „Persönlich“ stehen Text und Foto in derselben Spalte. */
  @media (min-width: 600px) and (pointer: coarse) {
    .wrap { max-width: 640px; }
    .menue { left: 0; right: 0; margin-inline: auto; max-width: 640px; }
    .inhaltsverzeichnis { left: 0; right: 0; margin-inline: auto; max-width: 624px; }
    .split-text, .split:not(.foto-links) .split-text { padding: 40px max(16px, calc(50% - 304px)) 32px; }
    .split-bild, .split.foto-links .split-bild { width: min(608px, 100% - 32px); margin: 0 auto; border-radius: 10px; overflow: hidden; }
    .abschnitt.split { padding-bottom: 40px; }  /* Abstand unter dem Foto (ein Rand am Foto entfiele durch .abschnitt > :last-child) */
  }

/* ---------- 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 not all and (pointer: coarse) {
  .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; }
}