/* CatVeo, Gesamtstil.
   ERZEUGT von build-stil.py, nicht von Hand bearbeiten.
   Grundgeruest stammt aus 04 Artefakte/build-seo-seiten.py.
   Aenderungen an Farben oder Grundlayout gehoeren dorthin. */

  /* ==================================================================
     Richtung Sprechzimmer, 27.08.2026.
     Spezifikation: Katzenprojekt/GESTALTUNG.md. Wo hier ein Wert steht,
     der dort nicht steht, ist er hier falsch und nicht dort.

     Diese Konstante ist die EINZIGE Quelle fuer Farben, Schriften und
     Grundlayout. 05 Website/build-stil.py laedt sie und haengt an, was
     nur der Test braucht. Wer die Palette wechselt, wechselt sie hier
     und laesst danach alle Generatoren neu laufen.
     ================================================================== */

  /* Schriften, selbst gehostet. Zwei Gruende gegen die Google-Server: Die
     Inhaltsrichtlinie sendet default-src 'self' und wuerde eine Schrift von
     dort kommentarlos verwerfen, und das Einbinden ueber Google uebertraegt
     die IP des Besuchers, was in Deutschland vorbelastet ist.

     Literata statt Source Serif 4, seit 27.08.2026: fuer laengeres Lesen auf
     Bildschirmen entworfen, kraeftigere Serifen, waermerer Duktus. Zwei
     Schnitte, nicht drei: Bei 46 Pixeln ist der Unterschied zwischen 400 und
     500 kaum sichtbar, und ein dritter Schnitt kostet rund 20 kB.

     Statische Schnitte statt der variablen Fassungen: Die variable Literata
     traegt eine zweite Achse fuer die optische Groesse, die wir nicht nutzen.
     Die Schnitte hier sind auf opsz 12 festgesetzt.

     Der Zeichenvorrat ist am 28.08.2026 auf Latin-1 und Latin Extended-A
     erweitert worden, 363 Zeichen. Der alte Ausschnitt hatte 231 und
     kannte zehn Zeichen nicht, die im Bestand vorkommen: den Rechtspfeil
     der Antwortkacheln, das Groesser-gleich und das s mit Cedille im
     Autorennamen Salgirli Demirbas. Kosten: 107 kB fuer fuenf Schnitte
     gegen 87 kB vorher. Das ist der Preis dafuer, dass kein Zeichen mehr
     still auf eine Systemschrift faellt.

     Beide Formate liegen in 05 Website/schriften/: woff2 fuer den Browser,
     ttf fuer mPDF. Lizenz und Herkunft stehen dort in LIESMICH.txt. */
  @font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;
             src:url(/schriften/Literata-Regular.woff2) format("woff2")}
  @font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;
             src:url(/schriften/Literata-SemiBold.woff2) format("woff2")}
  @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
             src:url(/schriften/SourceSans3-400.woff2) format("woff2")}
  @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
             src:url(/schriften/SourceSans3-600.woff2) format("woff2")}
  /* Der Schnitt 700 ist am 01.09.2026 herausgefallen. Er wurde fuer zwei
     Knopfregeln geladen und kostete 18.656 Byte, rund fuenfzehn Prozent der
     Last eines ersten Besuchs. Die Knoepfe stehen jetzt auf 600, dem
     Schnitt, den die Seite ohnehin dreiundzwanzigmal benutzt. */

  /* ------------------------------------------------------------------
     Farben. Die Werte sind gegen ihren jeweiligen Untergrund gerechnet,
     Vorgabe ist WCAG AA mit 4,5 zu 1 fuer Text.

     ZWEI ARTEN VON RAENDERN, und sie sind nicht dieselbe Farbe. Ein
     sandfarbener Rand auf Papiergrund erreicht rechnerisch nie die 3 zu 1,
     die WCAG 1.4.11 fuer Bedienelemente verlangt; die beiden Toene liegen
     zu dicht beieinander. Alles einheitlich dunkel zu umranden wuerde die
     Ruhe zerstoeren, von der diese Richtung lebt. Also getrennt:
       --line        Deko: Kartenraender, Trennlinien, Rahmen um Zeichnungen.
                     Kein Kontrastziel, sie tragen keine Information.
       --line-aktiv  Bedienbar: Antwortkacheln, Knoepfe, Eingabefelder.
                     Gemessen 3,95 gegen Kartenfuellung, 3,44 gegen --panel.

     --ink-faint steht NICHT auf --sand. Dort erreicht es 4,42 und faellt
     knapp durch; auf --sand ist --ink-soft der leichteste zulaessige Ton.
     ------------------------------------------------------------------ */
  :root {
    --ground:#FAF6EE; --surface:#FCFAF4; --panel:#F1EADB; --sand:#EFE0C9;
    --line:#E3DAC8; --line-aktiv:#8A7B62;
    --ink:#262119; --ink-soft:#5F584C; --ink-faint:#6E6555;
    --accent:#47664F; --accent-deep:#3E5847; --accent-hell:#F7F3E8;
    --alarm:#93381F; --alarm-flaeche:#F5E4DA; --alarm-text:#442A20;

    /* Abgeleitet. Sie stehen hier, damit sie mit der Palette wandern und
       nicht als Literale in dreissig Dateien haengen bleiben. */
    --accent-hover:#35513D;      /* Link im Ueberfahren */
    --accent-tint:#EFF1EA;       /* Kachel im Ueberfahren, gruenstichiges Papier */
    --accent-light:#C4D2C6;      /* Linie unter einem Link im Fliesstext */
    --knopf-text:#2E4436;        /* Text auf dem hellen Knopf im Schlussblock */
    --schluss-bei:#CBD6C7;       /* Beitext auf --accent-deep, gemessen 6,42 */

    --font-display:"Literata",Georgia,"Iowan Old Style","Times New Roman",serif;
    --font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
    /* Die Monospace traegt keine Kleinversalien mehr, dafuer steht jetzt
       .marke mit Source Sans 600 und Sperrung. Fuer Zahlenkolonnen und
       Massketten bleibt sie erlaubt. */
    --font-mono: Consolas,"Cascadia Mono",ui-monospace,monospace;

    /* Radien: zwei Werte, keine dritten. 6 fuer Bedienelemente und Karten,
       10 fuer grosse Flaechen und Bloecke. */
    --rad:6px; --rad-gross:10px;

    /* Inhaltsbreite. 780 statt 720, rund 72 Zeichen statt 66; der groessere
       Zeilenabstand von 1,68 traegt die laengere Zeile. Kachelraster und
       Startseite laufen bis 1080. */
    --breit:780px; --breit-weit:1080px;
    /* 600 Hauptspalte + 44 Abstand + 300 Randspalte = 944, dazu die
       Seitenraender. Die Ergebnisseite laeuft auf dieser Bahn, nicht auf
       den 1080 der Startseite: Sonst bliebe rechts neben der Randspalte
       ein leerer Streifen von 88 Pixeln stehen. */
    --breit-zwei:992px;
  }

  /* Dunkel: ein Papier-Negativ, kein kaltes Grauschwarz. Ein spuerbarer Teil
     der Leser sitzt abends auf dem Telefon. */
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    --ground:#17140F; --surface:#201C15; --panel:#262119; --sand:#2E2820;
    --line:#3A342A; --line-aktiv:#786D5A;
    --ink:#F0EADC; --ink-soft:#BDB4A2; --ink-faint:#958B77;
    --accent:#8FBE97; --accent-deep:#8FBE97; --accent-hell:#122015;
    --alarm:#F0A891; --alarm-flaeche:#33201A; --alarm-text:#F0A891;
    --accent-hover:#AAD2B0; --accent-tint:#22261F; --accent-light:#3E5545;
    --knopf-text:#122015; --schluss-bei:#1E3324;}}
  :root[data-theme="dark"]{
    --ground:#17140F; --surface:#201C15; --panel:#262119; --sand:#2E2820;
    --line:#3A342A; --line-aktiv:#786D5A;
    --ink:#F0EADC; --ink-soft:#BDB4A2; --ink-faint:#958B77;
    --accent:#8FBE97; --accent-deep:#8FBE97; --accent-hell:#122015;
    --alarm:#F0A891; --alarm-flaeche:#33201A; --alarm-text:#F0A891;
    --accent-hover:#AAD2B0; --accent-tint:#22261F; --accent-light:#3E5545;
    --knopf-text:#122015; --schluss-bei:#1E3324;}

  /* Bruecke fuer die Namen aus der alten Palette. Sie stehen noch in
     build-handbuch.py, in den Arbeitsblaettern und in einzelnen Seiten.
     Sie zeigen auf die neuen Werte, damit nichts zurueckfaellt; wer eine
     Datei anfasst, ersetzt den alten Namen gleich mit. */
  :root{--deep:var(--accent-deep); --deep-soft:var(--accent-deep);
        --paper:var(--surface); --grid:var(--line);
        --line-soft:var(--line); --line-strong:var(--line-aktiv);
        --sand-deep:var(--line-aktiv); --accent-soft:var(--accent-light);
        --alarm-soft:var(--alarm-flaeche)}

  *{box-sizing:border-box}
  /* Fliesstext 17,5 auf 1,68. Der ruhigere Satz gehoert zur Richtung. */
  body{background:var(--ground);color:var(--ink);font-family:var(--font-body);
       font-size:17.5px;line-height:1.68;margin:0;-webkit-font-smoothing:antialiased;
       overflow-wrap:break-word}
  /* ------------------------------------------------------------------
     Die Grundfarbe fuer JEDEN Verweis. Sie steht hier oben und mit
     Absicht schwach: body a hat die Gewichtung 0,0,2, also gewinnt jede
     Regel mit einer Klasse dagegen. Kacheln, Knoepfe und Fusszeile
     behalten damit ihre eigenen Farben.

     WARUM ES SIE GIBT: Bis zum 28.08.2026 war jeder Verweis nur dann
     eingefaerbt, wenn er in einem Behaelter lag, fuer den es eine Regel
     gab. Was daneben stand, lief im Browser-Blau, rgb(0,0,238), gegen
     eine Palette aus Papier und Gruen. Der Fehler ist dreimal
     aufgetreten: am 25.08. im Fliesstext, am 28.08. auf der
     Ergebnisseite und am selben Tag fuenfmal auf jeder Produktseite,
     darunter Widerrufsrecht und Nutzungsbedingungen.

     Zweimal davon habe ich ihn einzeln repariert, und beim dritten Mal
     war klar, dass die Reparatur die falsche Ebene hatte. Eine
     Grundfarbe kann nicht vergessen werden.
     ------------------------------------------------------------------ */
  body a{color:var(--accent)}

  .wrap{max-width:var(--breit);margin:0 auto;padding:0 24px}
  .wrap.weit{max-width:var(--breit-weit)}
  .wrap.zweibahn{max-width:var(--breit-zwei)}
  @media(max-width:640px){.wrap{padding:0 20px}body{font-size:16.5px;line-height:1.65}}

  /* Keine Bewegung ohne Bedienung. Was bleibt, sind Zustandswechsel an
     Bedienelementen und das Aufklappen von <details>. */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;
      transition-duration:.001ms !important;scroll-behavior:auto !important}}

  /* Die Marke ersetzt die Monospace-Auszeichnung der alten Seite. Consolas
     bringt einen technischen Ton mit, den die Waerme nicht vertraegt. */
  .marke,.kicker,.tb-step,.band{font-family:var(--font-body);font-size:12px;
    font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    line-height:1.4;color:var(--accent)}

  header.site{border-bottom:1px solid var(--line);background:var(--ground)}
  /* Der Kopf teilt die Randbreite des Textes, SOLANGE beide gleich breit
     sind. Erst oberhalb von 1080 ist der Kopf wirklich breiter als die
     Textspalte, und dort steht er bewusst weiter aussen, wie im Entwurf.

     Am 28.08.2026 einmal falsch gemacht: 40 pauschal gesetzt, und damit sass
     auf dem Telefon das Logo bei 40, waehrend die H1 bei 20 begann. Gemessen
     statt geschaetzt, sonst faellt so etwas erst auf dem Geraet auf. */
  .head-in{max-width:var(--breit-weit);margin:0 auto;padding:16px 24px;display:flex;
           align-items:center;justify-content:space-between;gap:20px}
  @media(min-width:1081px){.head-in{padding:16px 40px}}
  @media(max-width:640px){.head-in{padding:16px 20px}}
  /* Die Links stehen als Gruppe rechts, das Logo allein links. Vorher
     verteilte space-between die drei Teile ueber die ganze Breite, und
     "Alle Themen" hing in der Mitte ohne Bezug. Aus dem Review von GPT-6
     Astra, 15.09.2026, Test 12. */
  .head-in .logo{margin-right:auto}
  /* Auf den statischen Seiten ist das Logo ein div, auf den PHP-Seiten ein
     Link zur Startseite. Ohne diese Zeile erscheint es dort unterstrichen
     und in der Standardfarbe des Browsers. */
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .logo:hover .logo-txt em{color:var(--accent-hover)}
  /* Die Figur ist hochkant (265 zu 385). Ueber die Hoehe steuern, sonst
     schrumpft sie auf Briefmarkengroesse neben dem Schriftzug. */
  .logo svg{width:auto;height:30px;display:block;color:var(--accent)}
  /* Die Figur ist der gefuellte Umriss einer Strichzeichnung. Auf einem
     Bildschirm ohne doppelte Pixeldichte rastert sie bei 30 Pixeln Hoehe mit
     30 Geraetepixeln, und dort sind ueber drei Viertel der Striche schmaler
     als ein Pixel: die Figur wird grau statt scharf. Eine Kontur in derselben
     Farbe verdickt jeden Strich, ohne die Form zu aendern.
     Schwelle bei 2dppx, nicht bei 1,5: Gemessen am Anteil zu duenner Striche
     liegt 32 Geraetepixel bei 78 Prozent, 48 bei 36, 64 bei 3. Ein Bildschirm
     mit anderthalbfacher Dichte rastert mit 48 und braucht die Kontur also
     noch. Ab doppelter Dichte wuerde sie die Figur nur fett machen. */
  .logo svg path{stroke:currentColor;stroke-width:12;
                 stroke-linejoin:round;stroke-linecap:round}
  @media (min-resolution:2dppx){.logo svg path{stroke-width:0}}
  .logo-block{display:flex;flex-direction:column;line-height:1.12}
  .logo-txt{font-family:var(--font-display);font-size:18px;letter-spacing:-.012em;
            color:var(--ink)}
  .logo-txt em{font-style:normal;color:var(--accent)}
  .logo-sub{font-size:10.5px;color:var(--ink-faint);letter-spacing:.012em;margin-top:2px}
  @media(max-width:560px){.logo-sub{display:none}}
  /* Zeilenlaenge. Begrenzt wird nur Fliesstext, damit Tabellen, Kaesten und
     der Einstiegsblock ihre Breite behalten. */
  .txt p, .txt li, details.f .a p, .today li{max-width:72ch}
  .head-link{font-size:14px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
  .head-link:hover{color:var(--accent)}
  /* Der Testknopf im Seitenkopf. Kein Signalton: er faellt durch Flaeche auf,
     nicht durch Lautstaerke. */
  .kopf-knopf{background:var(--accent-deep);color:var(--accent-hell);
    border-radius:var(--rad);padding:9px 18px;font-size:14.5px;font-weight:600;
    text-decoration:none;white-space:nowrap;transition:background .12s}
  .kopf-knopf:hover{background:var(--accent)}
  .kopf-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media(max-width:640px){.kopf-knopf{display:none}}

  /* Brotkrume: schlicht als Textzeile, kein Kasten, keine Zeichen. */
  .crumb{font-size:13.5px;color:var(--ink-faint);padding:24px 0 0}
  .crumb a{color:var(--ink-soft);text-decoration:none}
  .crumb a:hover{color:var(--accent);text-decoration:underline}

  .lead-sec{padding:20px 0 32px}
  h1{font-family:var(--font-display);font-weight:400;font-size:clamp(33px,4.6vw,46px);
     line-height:1.12;letter-spacing:-.018em;margin:0 0 20px;text-wrap:balance}
  /* Der Vorspann laeuft in der Serife. Er ist die Antwort auf die Frage der
     Seite und nicht Beiwerk, deshalb traegt er dieselbe Schrift wie die H1. */
  .answer{font-family:var(--font-display);font-size:clamp(18.5px,1.7vw,21px);
    line-height:1.62;color:var(--ink);margin:16px 0 20px;max-width:64ch}
  .answer b{font-weight:600}
  .scene{font-size:16.5px;color:var(--ink-soft);margin:0 0 24px;line-height:1.6;
    max-width:72ch}
  @media(max-width:640px){
    .crumb{padding-top:16px}
    .lead-sec{padding:16px 0 24px}
    h1{margin-bottom:16px;line-height:1.16}
    .answer{margin:12px 0 16px;line-height:1.60}
    .scene{font-size:16px;margin-bottom:20px}
  }

  /* ------------------------------------------------------------------
     Das Notfall-Gate. Es muss auffallen, BEVOR Text gelesen wird, und es
     steht direkt unter der H1: nicht darueber, weil sonst niemand weiss,
     auf welcher Seite er ist, und nicht weiter unten, weil es dann zu
     spaet kommt.

     Es ist der einzige Ort im ganzen System mit dieser Farbfamilie. Genau
     daraus bezieht es seine Wirkung. Wer Rot woanders einsetzt, macht es
     kaputt.
     ------------------------------------------------------------------ */
  .safety{background:var(--alarm-flaeche);border:1px solid var(--alarm);
    border-left-width:4px;
    border-radius:var(--rad-gross);padding:16px 20px;margin:0 0 24px;
    font-size:15.5px;line-height:1.55;color:var(--alarm-text);
    display:flex;flex-direction:column;gap:8px}
  .safety .marke{color:var(--alarm);display:flex;align-items:center;gap:7px}
  .safety p{margin:0;max-width:72ch}
  .safety b{font-weight:600;color:var(--alarm-text)}
  .safety a{color:var(--alarm);text-decoration-color:var(--alarm)}
  .z-warn{flex:0 0 auto;color:var(--alarm)}

  /* Sprung zum Hauptinhalt fuer Tastatur und Screenreader, seit dem
     15.09.2026 (Review GPT-6 Astra: Die Themenseiten hatten kein main und
     keinen Sprunglink). Unsichtbar, bis er den Fokus bekommt. */
  .sprung-inhalt{position:absolute;left:-9999px;top:8px;z-index:10;
    background:var(--surface);color:var(--ink);border:2px solid var(--accent);
    border-radius:var(--rad);padding:8px 14px;font-weight:600;text-decoration:none}
  .sprung-inhalt:focus{left:16px}

  /* Die Ueberschrift im Notfallkasten, seit dem 15.09.2026. Vorher stand
     dort nur die Marke "Zuerst das Wichtigste": Man sah einen roten Kasten,
     aber worum es geht, stand erst im Absatz. Der Titel nennt das Zeichen und
     die Handlung, damit der Kasten beim Ueberfliegen traegt. Die Titel stehen
     in SAFETY_TITEL. */
  .safety .safety-titel{margin:0;font-size:17.5px;line-height:1.35;font-weight:700;
    color:var(--alarm-text)}

  /* Das Verzeichnis langer Seiten, seit dem 15.09.2026. Zugeklappt, damit es
     den Weg vom Einstiegsblock in den Text nicht verlaengert; natives details,
     also ohne Skript. */
  .seite-inhalt{margin:6px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .seite-inhalt summary{cursor:pointer;padding:13px 0;font-size:15px;font-weight:600;color:var(--ink-soft)}
  .seite-inhalt summary:hover{color:var(--accent)}
  .seite-inhalt ol{margin:0 0 16px;padding-left:22px;columns:2 300px;column-gap:36px;
    font-size:15px;line-height:1.5}
  .seite-inhalt li{break-inside:avoid;margin:0 0 7px}
  .seite-inhalt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-aktiv)}
  .seite-inhalt a:hover{color:var(--accent);border-color:var(--accent)}
  .txt h2[id], h2#nachfragen{scroll-margin-top:16px}

  /* Der Sprung zum Test, nur auf dem Handy. Seit dem 15.09.2026, aus der
     Designkritik vom 14.09.: Mobil steht der Einstiegsblock erst am unteren
     Rand des ersten Bildschirms, und der Testknopf im Seitenkopf ist dort
     ausgeblendet. Die Zeile steht direkt unter dem Notfallkasten, also nach
     ihm: Wer sie liest, hat den Hinweis schon gesehen. Leise wie der
     Einstiegsblock selbst, eine Textzeile und kein Knopf. */
  .zum-test{display:none}
  @media(max-width:640px){
    .zum-test{display:flex;align-items:center;gap:8px;margin:-8px 0 22px;
      font-size:15px;font-weight:600;color:var(--accent);text-decoration:none}
    .zum-test .zeichen{flex:0 0 auto}
    .zum-test span{margin-left:auto;font-weight:400;font-size:13.5px;color:var(--ink-faint)}
  }

  /* ------------------------------------------------------------------
     Der Testeinstieg. Er schreit nicht: kein Knopf in Signalfarbe, keine
     Verknappung. Er faellt durch Flaeche und Position auf.
     ------------------------------------------------------------------ */
  .testbox{background:var(--panel);border:0;border-radius:var(--rad-gross);
    padding:24px 20px;margin:0 0 8px;scroll-margin-top:24px;
    display:flex;flex-direction:column;gap:12px}
  .tb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .tb-time{font-size:13px;color:var(--ink-faint)}
  .tb-q{font-family:var(--font-display);font-weight:600;
    font-size:clamp(19px,2.2vw,21px);line-height:1.4;margin:0}
  .tb-frage{font-size:15px;font-weight:600;margin:0}
  /* Frage vor Zusage, seit dem 15.09.2026. Das Review von GPT-6 Astra hat
     nachgemessen, was beim Hinsehen nicht auffiel: Die Zusage stand in 21 px
     Literata, die Frage darunter in 15 px. Das Auge landete beim Versprechen
     statt bei dem, worauf man klickt. Jetzt traegt die Frage die Schrift, die
     Zusage steht als Einleitung darueber. Nur im Block mit Frage; ohne Frage
     (einstieg_ohne_frage, wegweiser) bleibt .tb-q gross, dort ist sie allein. */
  .testbox .tb-zusage{font-family:var(--font-body);font-weight:400;font-size:15.5px;
    line-height:1.5;color:var(--ink-soft)}
  .testbox .tb-zusage + .tb-frage{font-family:var(--font-display);font-weight:600;
    font-size:clamp(20px,2.4vw,23px);line-height:1.3;color:var(--ink);margin:2px 0 4px}
  .tb-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
  @media(max-width:560px){.tb-opts{grid-template-columns:1fr}}
  /* Antwortkacheln sind bedienbar, also --line-aktiv statt --line. */
  .tb-opts a{display:flex;justify-content:space-between;align-items:center;gap:12px;
    font:inherit;font-size:16px;font-weight:600;padding:12px 16px;
    background:var(--surface);border:1px solid var(--line-aktiv);color:var(--ink);
    text-decoration:none;border-radius:var(--rad);
    transition:border-color .12s,background .12s}
  .tb-opts a::after{content:"\2192";color:var(--accent);font-weight:400}
  .tb-opts a:hover{border-color:var(--accent);background:var(--accent-tint)}
  .tb-opts a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tb-note{font-size:13px;color:var(--ink-faint);margin:0;line-height:1.5}

  /* Links im Fliesstext. Die Linie unten statt einer Unterstreichung: Sie
     liegt tiefer, schneidet keine Unterlaengen und ist im Dunkelmodus
     ruhiger. */
  .txt a, .today a, details.f .a a, p.quellen a, .safety a{
    color:var(--accent);text-decoration:underline;
    text-decoration-color:var(--accent-light);text-decoration-thickness:1px;
    text-underline-offset:.18em}
  .txt a:hover, .today a:hover, details.f .a a:hover, p.quellen a:hover{
    text-decoration-color:var(--accent)}
  .txt a:focus-visible, .today a:focus-visible, details.f .a a:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px}
  /* Seit dem 15.09.2026 (Review GPT-6 Astra, Test 12): Textlinks als echte
     Unterstreichung statt Rahmenlinie, die Ziffern nummerierter Listen in
     der Akzentfarbe, und ein kraeftiger Fokusrahmen auf allen Kacheln und
     Aufklappzeilen, die vorher keinen hatten. */
  .today li::marker, .txt ol li::marker{color:var(--accent);font-weight:600}
  .related a:focus-visible, details.f summary:focus-visible, .head-link:focus-visible,
  .seite-inhalt summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

  /* Wegweiser statt Einstieg. Steht dort, wo kein Test die Frage der Seite
     beantwortet, und bietet die Tests an, die zu einem zweiten Problem
     passen. Bewusst anders als .tb-opts: Das sind keine Antworten auf eine
     Frage, sondern Bedingungen. */
  .tb-wege{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .tb-wege li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;
              border:1px solid var(--line-aktiv);border-radius:var(--rad);
              padding:12px 15px;background:var(--surface);font-size:15.5px;
              line-height:1.5}
  .tb-wege b{font-weight:600}
  .tb-wege a{font-weight:600;color:var(--accent);text-decoration:none;
             border-bottom:1px solid var(--accent-light);white-space:nowrap}
  .tb-wege a:hover{border-bottom-color:var(--accent)}
  .tb-wege a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* Orientierungszeichen. Sie nehmen currentColor, also die Farbe des
     Textes daneben; hier steht deshalb nur, wie sie sitzen. */
  .zeichen{flex:0 0 auto}
  .z-start{vertical-align:-3px;margin-right:7px}
  .z-druck{vertical-align:-4px;margin-right:8px}

  .beweg-quelle{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:22px 0 0}

  section.txt{padding:24px 0 0}
  h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.9vw,29px);
     line-height:1.22;letter-spacing:-.012em;margin:40px 0 16px;text-wrap:balance}
  h3{font-family:var(--font-body);font-size:19px;font-weight:600;margin:32px 0 12px;
     line-height:1.35}
  @media(max-width:640px){
    h2{font-size:24px;line-height:1.25;margin:32px 0 12px}
    h3{font-size:18px;margin:24px 0 10px}}
  p{margin:0 0 16px}
  ul.body,ol.body{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
  ul.body li,ol.body li{line-height:1.6}
  strong{font-weight:600}
  .klein{font-size:13px;line-height:1.6;color:var(--ink-faint)}

  /* Faktenblock: eine ruhige Flaeche, keine Signalkante. */
  .fact{background:var(--panel);border:0;border-radius:var(--rad);
    padding:16px 20px;margin:20px 0;font-size:16px;line-height:1.55}
  .fact b{font-weight:600}

  /* Die eine kraeftige Flaeche je Seite. --ink-faint steht hier nicht,
     der Ton faellt auf --sand mit 4,42 durch. */
  .today{background:var(--sand);border-radius:var(--rad-gross);
    padding:20px 24px 24px;margin:32px 0 0;color:var(--ink)}
  .today h2{margin-top:0;font-size:clamp(22px,2.5vw,26px)}
  .today ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px;
    font-size:16px;line-height:1.55}
  .today li{line-height:1.55}
  .today .klein{color:var(--ink-soft)}

  details.f{border-bottom:1px solid var(--line)}
  details.f summary{cursor:pointer;padding:16px 32px 16px 0;font-size:17px;font-weight:600;
    line-height:1.4;position:relative;list-style:none}
  details.f summary::-webkit-details-marker{display:none}
  details.f summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:21px;
    font-weight:400;color:var(--accent)}
  details.f[open] summary::after{content:"\2013"}
  details.f summary:hover{color:var(--accent)}
  details.f .a{padding:0 36px 20px 0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
  details.f .a p{margin:0 0 12px}
  details.f .a p:last-child{margin-bottom:0}

  /* Kacheln: Flaeche --surface, Rand --line, Radius 6, Titel in der Serife.
     Kein Fugenraster mehr: Auf getoentem Papier liest sich eine 1px-Fuge als
     Tabelle, und die Kacheln sollen einzeln stehen. */
  .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:12px;margin:16px 0 0}
  .related a{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--rad);padding:16px 20px;text-decoration:none;color:inherit;
    display:flex;flex-direction:column;gap:4px;transition:border-color .12s,background .12s}
  .related a:hover{background:var(--accent-tint);border-color:var(--line-aktiv)}
  .related .rt{font-family:var(--font-display);font-weight:600;font-size:18px;
    line-height:1.3}
  .related .rd{font-size:15px;color:var(--ink-soft);line-height:1.5}

  /* Die Fallliste auf den Bereichsseiten. auto-fill statt auto-fit, damit bei
     wenigen Eintraegen keine Riesenkacheln entstehen; minmax mit 100% als
     Obergrenze verhindert, dass ein langes Wort die Spalte aufspannt. Steht
     hier und nicht in build-stil.py, weil beide Ebenen sie brauchen. */
  .faelle{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:10px}
  .faelle a{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--rad);padding:15px 17px;text-decoration:none;color:inherit;
    display:flex;flex-direction:column;gap:4px;min-width:0;
    transition:border-color .12s,background .12s}
  .faelle a:hover{background:var(--accent-tint);border-color:var(--line-aktiv)}
  .faelle b{font-family:var(--font-display);font-weight:600;font-size:17px;
    line-height:1.3;overflow-wrap:anywhere}
  .faelle span{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
  .faelle-intro{font-size:16.5px;color:var(--ink-soft);margin:0 0 16px;max-width:72ch}
  .faelle-gruppe{font-size:14px;font-weight:600;color:var(--ink-soft);
    margin:24px 0 8px;letter-spacing:.012em}

  /* ------------------------------------------------------------------
     Der Schlussblock. Die EINZIGE grosse Farbflaeche einer Seite.

     Im Dunkelmodus dreht er sich um, als einziges Bauteil: Die Flaeche wird
     das helle Gruen, Text und Knopf werden dunkel. Ein dunkelgruener Block
     auf dunklem Grund waere nicht mehr zu sehen, und der Schlussblock muss
     sich abheben, weil er den Testeinstieg wiederholt. Gemessen 8,03 zu 1.

     Die Umkehr braucht kein zweites Regelwerk: --accent-deep und
     --accent-hell tauschen im Dunkelmodus ihre Rollen, --knopf-text und
     --schluss-bei ziehen mit.
     ------------------------------------------------------------------ */
  .cta-end{background:var(--accent-deep);border-radius:var(--rad-gross);
    padding:32px 24px;margin:40px 0 0;display:flex;flex-direction:column;gap:12px}
  .cta-end h2{font-family:var(--font-display);font-weight:400;color:var(--accent-hell);
    margin:0;font-size:clamp(22px,2.6vw,27px);line-height:1.3;letter-spacing:-.008em}
  .cta-end p{color:var(--schluss-bei);font-size:16px;line-height:1.55;margin:0;
    max-width:64ch}
  /* Auf der weiten Bahn darf die Zeile laenger laufen. Der Block ist dort
     1030 breit, und bei 64ch stand der Text in einem Drittel davon: fuenf
     Zeilen und viel leeres Gruen daneben. Gemessen am 28.08.2026 ueber die
     Blockhoehe, 1240 Pixel Fenster: 64ch ergibt 294 px, 74 bis 88ch je 269,
     ab 90ch sind es 244. 90 ist also die Schwelle zur dritten Zeile, und
     weiter zu gehen bringt nichts mehr.

     Nur unter .weit, damit die sechzig Themenseiten ihre kuerzere Zeile
     behalten. Ihr Block ist 676 breit, dort greift 64ch noch. */
  .weit .cta-end p{max-width:90ch}
  .cta-end a{align-self:flex-start;background:var(--accent-hell);
    color:var(--knopf-text);text-decoration:none;padding:13px 26px;font-size:16px;
    font-weight:600;border-radius:var(--rad);margin-top:4px;transition:opacity .12s}
  .cta-end a:hover{opacity:.88}
  .cta-end a:focus-visible{outline:2px solid var(--accent-hell);outline-offset:3px}
  /* Im Dunkelmodus ist die Flaeche hell, ein heller Beitext waere darauf
     unlesbar. Deshalb dort ein dunkler Ton statt --schluss-bei. */
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cta-end p{
    color:#1E3324}
    :root:not([data-theme="light"]) .cta-end a{background:#DCEFDF}}
  :root[data-theme="dark"] .cta-end p{color:#1E3324}
  :root[data-theme="dark"] .cta-end a{background:#DCEFDF}

  footer.site{background:var(--ground);border-top:1px solid var(--line);
    padding:32px 0 40px;margin-top:56px}
  footer.site p{font-size:12.5px;line-height:1.6;color:var(--ink-faint);margin:0 0 12px;
    max-width:80ch}
  footer.site a{color:var(--ink-soft)}
  .foot-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-top:16px}
  .foot-links a{text-decoration:none}
  .foot-links a:hover{color:var(--accent);text-decoration:underline}

  /* ================================================================
     Bauteile, die Ergebnis- und Produktseiten teilen.
     ================================================================ */

  /* Die Buehne. Bis zum 27.08.2026 war sie eine dunkle Flaeche als Aufmacher;
     in dieser Richtung liegt das Gruen nur noch im Schlussblock. Der Aufmacher
     ist hell und traegt seine Ruhe aus Raum, nicht aus Farbe. */
  .buehne{background:var(--ground);padding:8px 0 32px;margin-bottom:32px;
    border-bottom:1px solid var(--line)}
  .buehne h1{margin-bottom:16px}
  .buehne .lead{font-family:var(--font-display);
    font-size:clamp(18.5px,1.7vw,21px);line-height:1.62;color:var(--ink);
    margin-bottom:22px;max-width:64ch}
  .buehne .lead b{font-weight:600}
  .buehne .folge{margin-bottom:24px;max-width:72ch}
  .buehne .folge p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 12px}
  .buehne .folge p:last-child{margin-bottom:0}
  .buehne .folge b{color:var(--ink);font-weight:600}
  .buehne a{color:var(--accent)}
  @media(max-width:640px){.buehne{padding:4px 0 24px;margin-bottom:24px}}

  /* Dringlichkeitsband. Marke, kein Signalbalken. */
  .band{display:inline-flex;align-items:center;gap:9px;color:var(--accent);
    background:var(--panel);border-radius:var(--rad);padding:7px 13px;
    margin-bottom:20px}

  /* Aktionsblock: der eine naechste Schritt. */
  .aktion{background:var(--sand);border-radius:var(--rad-gross);padding:20px 24px}
  .aktion h2{margin:0 0 11px;font-size:22px}
  .aktion p{color:var(--ink);font-size:16px;margin:0 0 12px;line-height:1.6}
  .aktion p:last-child{margin-bottom:0}
  .aktion .warum{font-size:15px;color:var(--ink-soft);margin-top:14px;padding-top:14px;
    border-top:1px solid var(--line-aktiv)}

  /* Belege als Marken statt als Satz. */
  .belege{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .beleg{font-size:13px;line-height:1.3;padding:5px 10px;background:var(--panel);
    color:var(--ink-soft);border-radius:var(--rad)}

  /* Aufklappen, damit die Tiefe erhalten bleibt, ohne die Seite zu fluten. */
  details.mehr{margin-top:12px}
  details.mehr>summary{cursor:pointer;font-size:14.5px;color:var(--accent);
    list-style:none;display:inline-flex;align-items:center;gap:6px}
  details.mehr>summary::-webkit-details-marker{display:none}
  details.mehr>summary::after{content:"";width:6px;height:6px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);margin-bottom:3px;transition:transform .12s ease}
  details.mehr[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
  details.mehr .inhalt{margin-top:11px;font-size:16px;color:var(--ink-soft);line-height:1.6}

  /* Untersuchungsliste. Beginnt auf einer eigenen Seite und bleibt
     abtrennbar; die Druckregeln dafuer stehen weiter unten. */
  .vet-liste{list-style:none;margin:16px 0 0;padding:0}
  .vet-liste li{padding:12px 0;border-top:1px solid var(--line)}
  .vet-liste li:last-child{border-bottom:1px solid var(--line)}

  /* Nummerierte Schritte */
  ol.schritte{margin:14px 0 0;padding:0;list-style:none;counter-reset:s}
  ol.schritte li{counter-increment:s;position:relative;padding:0 0 12px 34px;font-size:16px}
  ol.schritte li::before{content:counter(s);position:absolute;left:0;top:2px;
    width:22px;height:22px;border-radius:50%;background:var(--panel);
    color:var(--accent);font-size:12px;font-weight:600;
    display:flex;align-items:center;justify-content:center}

  /* Hypothesen: Rang, Ueberschrift, ein Satz, Belege als Marken. Die Tiefe
     liegt hinter dem Aufklapper. */
  .hyp{display:flex;gap:14px;align-items:flex-start;padding:20px 0;
    border-top:1px solid var(--line)}
  .hyp:last-of-type{border-bottom:1px solid var(--line)}
  .hyp-rank{font-size:12px;font-weight:600;letter-spacing:.09em;color:var(--accent);
    min-width:16px;padding-top:6px;flex:none}
  .hyp-koerper{flex:1;min-width:0}
  .hyp-koerper h3{margin:0 0 6px}
  .hyp-kurz{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.6}

  /* ------------------------------------------------------------------
     Dichte Seiten laufen zweispaltig. Die Inhaltsbreite von 780 gilt fuer
     LESEseiten. Sobald eine Seite mehr als drei gleichrangige Bloecke
     traegt, wird daraus in einer Spalte eine Rolle, und der Weissraum
     arbeitet gegen sie. In die Randspalte gehoert, was begleitet und nicht
     gelesen werden muss: Druckmodul, Quellenhinweis, weiterfuehrende Seiten.
     Betrifft Ergebnisseite und Produktseiten, nicht Themenseiten.
     ------------------------------------------------------------------ */
  .zweispalt{display:grid;grid-template-columns:600px 300px;gap:44px;
    align-items:start}
  .zweispalt>.rand{display:flex;flex-direction:column;gap:16px}
  .rand-block{background:var(--panel);border-radius:var(--rad-gross);padding:18px 20px;
    font-size:15px;line-height:1.55;color:var(--ink-soft)}
  .rand-block h3{margin:0 0 8px;font-size:17px;color:var(--ink)}
  .rand-block p:last-child{margin-bottom:0}
  /* Unterhalb der Bahnbreite gibt es keine zwei Spalten mehr, sondern
     eine. Die Schwelle liegt unter 992, sonst faellt der Zweispalter
     sofort wieder zusammen. */
  @media(max-width:960px){.zweispalt{grid-template-columns:1fr;gap:28px}}
  /* Im Rand liegt, was begleitet. Die Bloecke dort tragen deshalb eine
     ruhige Flaeche statt der Trennlinien der Hauptspalte. */
  .rand .block{padding:20px;border-bottom:0;background:var(--panel);
    border-radius:var(--rad-gross)}
  .rand .block + .block{margin-top:16px}
  .rand .block h2{font-size:20px;margin-top:0}
  .rand .block p{font-size:15px}
  .haupt{min-width:0}

  /* Abbildung im Fliesstext. Kein Rahmen, keine Flaeche, kein Schatten:
     Die Zeichnung steht auf dem Papier, nicht in einer Kachel. */
  figure.bild{margin:28px 0;padding:0}
  figure.bild svg{display:block;width:100%;max-width:440px;height:auto;
    margin:0 auto;color:var(--ink)}
  figure.bild figcaption{margin:12px auto 0;max-width:520px;font-size:14px;
    line-height:1.55;color:var(--ink-soft);border-top:1px solid var(--line);
    padding-top:10px}
  @media(max-width:560px){figure.bild{margin:24px 0}
    figure.bild figcaption{font-size:13.5px}}

  /* Ruhige Flaeche fuer Sofortmassnahmen */
  .panel{background:var(--panel);border-radius:var(--rad-gross);padding:24px 26px}
  /* Ein Block kann seit dem 29.08.2026 mehrere Sofortmassnahmen tragen:
     kratzen zeigt drei, nachtaktivitaet und uebergewicht je zwei. Ohne
     diesen Abstand stossen zwei gleichfarbige Kaesten buendig aneinander
     und lesen sich als ein Kasten. */
  .panel + .panel{margin-top:14px}

  /* ------------------------------------------------------------------
     Die Figur als Papiermarke. Sie ist hier Material, kein Bild, und die
     Regeln sind eng gefasst, weil genau hier das Abrutschen ins Generische
     einer Tiermarke droht:
       1. hoechstens einmal je Seite, zusaetzlich zum Zeichen im Seitenkopf
       2. nie neben Lesetext, nie in derselben Blickachse wie eine
          Fachzeichnung
       3. nie ueber 2 zu 1 Kontrast gegen ihren Grund
       4. nur an Orten ohne Leseaufgabe: Aufmacher der Startseite, 404,
          Deckblatt eines Bandes, Kopf eines Arbeitsbogens, Uebergang vom
          letzten Testschritt zum Ergebnis
     Nicht betroffen sind die 33 Antwortfiguren im Test und die beiden
     Haltungen aus Abbildung 12: Die tragen Information.
     ------------------------------------------------------------------ */
  .papierfigur{color:var(--sand);pointer-events:none;user-select:none;
    display:block;height:auto}
  @media(max-width:820px){.papierfigur{display:none}}

  /* Widerrufsknopf nach Paragraf 356a BGB. Der Knopf muss gut lesbar und
     hervorgehoben sein, ein unauffaelliger Link in der Fusszeile genuegt
     nicht. Deshalb eigene Flaeche, eigene Groesse, ganz oben auf der Seite. */
  .wbox{border:1px solid var(--line);background:var(--panel);
    border-radius:var(--rad-gross);padding:22px 24px 24px;margin:0 0 32px}
  .wbox h2{margin:0 0 8px;font-size:clamp(19px,2.6vw,22px)}
  .wbox p{margin:0 0 18px;font-size:16px;color:var(--ink-soft);line-height:1.55}
  .wknopf{display:inline-block;background:var(--accent-deep);color:var(--accent-hell);
    text-decoration:none;font:inherit;font-size:17px;font-weight:600;line-height:1.2;
    padding:14px 28px;border:1px solid var(--accent-deep);border-radius:var(--rad);
    cursor:pointer;transition:background .12s}
  .wknopf:hover{background:var(--accent);border-color:var(--accent)}
  .wknopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* ==================================================================
     Druck. Die Druckansicht ist Teil des Produkts: Der Halter nimmt sie
     mit zum Tierarzttermin.

     Der Papierton wird NICHT gedruckt. Ein flaechiges #FAF6EE ueber
     dutzende Seiten kostet Toner, sieht auf Heimdruckern fleckig aus und
     bringt nichts; das Papier ist schon Papier. Die Waerme traegt im
     Druck die Typografie.

     Ausnahme von der Fuellregel: Der Notfallhinweis darf eine sehr helle
     Flaeche tragen, weil sie eine Funktion hat. Alles andere ist Linie,
     Weissraum und Schriftgrad.
     ================================================================== */
  @media print{
    :root{--ground:#FFFFFF; --surface:#FFFFFF; --panel:#FFFFFF; --sand:#FFFFFF;
          --line:#C9BFA8; --line-aktiv:#C9BFA8;
          --ink:#262119; --ink-soft:#5F584C; --ink-faint:#5F584C;
          --accent:#47664F; --accent-deep:#FFFFFF; --accent-hell:#262119;
          --alarm:#93381F; --alarm-flaeche:#FBF2EE; --alarm-text:#262119;
          --accent-tint:#FFFFFF; --schluss-bei:#5F584C; --knopf-text:#262119}
    /* Grundschrift 12 pt, nirgends darunter. Kurze Marken und Rechtszeilen
       duerfen auf 9 pt. */
    body{background:#fff;font-size:12pt;line-height:1.5}
    .marke,.kicker,.tb-step,.band{font-size:9pt}
    .klein,footer.site p{font-size:9pt}
    /* Keine Haarlinien: Minimum 0,3 mm, im Zweifel 0,4. */
    .safety{border-width:.4mm;border-radius:0}
    .fact,.today,.panel,.aktion,.rand-block,.beleg,.band{background:#fff;
      border:.3mm solid var(--line);border-radius:0}
    .cta-end,.testbox,.tb-wege,header.site .kopf-knopf,.papierfigur,.zum-test,.seite-inhalt,.sprung-inhalt{display:none}
    .vet-liste li{border-top-width:.3mm}
    .vet-liste li:last-child{border-bottom-width:.3mm}
    details.f,details.mehr{border-bottom-width:.3mm}
    details.f .a,details.mehr .inhalt{display:block}
    a{color:var(--ink);border-bottom:0}
    .txt a::after{content:" (" attr(href) ")";font-size:9pt;color:var(--ink-soft)}
    /* Die Untersuchungsliste bricht ueber .fp-praxis um, siehe stil.css. */
    h1,h2,h3{break-after:avoid}
    figure.bild,.safety,.hyp{break-inside:avoid}
  }

/* ===================================================================
   Startseite
   =================================================================== */
/* Der Aufmacher. Er beschreibt schlicht, was hier passiert, und traegt
   keine Symptomliste: Bei sechs Bereichen passen fuenf von sechs Beispielen
   nicht auf den Leser. Die Kacheln darunter nennen die Bereiche ohnehin,
   dort sortiert sich der Besucher ein. */
.hero{padding:56px 0 40px;position:relative}
.hero>*{position:relative;z-index:1}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.hero h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,5.4vw,52px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 20px;max-width:13em}
.hero-sub{font-family:var(--font-display);font-size:clamp(18.5px,2vw,21px);
  line-height:1.62;color:var(--ink);max-width:30em;margin:0 0 28px}

/* Die Figur als Papiermarke, einmal je Seite und sehr leise. Sie liegt
   rechts neben dem Aufmacher, also nicht in derselben Blickachse wie der
   Text und nicht neben einer Fachzeichnung. Unter 900px faellt sie weg,
   dort gibt es keinen Platz ohne Leseaufgabe. */
.hero-figur{position:absolute;right:0;top:24px;height:300px;width:auto;
  color:var(--sand);z-index:0;pointer-events:none}
@media(max-width:900px){.hero-figur{display:none}}
/* Und der Text bleibt von ihr weg. GESTALTUNG.md Abschnitt 5, Regel 2:
   nie neben Lesetext. Am 28.08.2026 nachgemessen, als die Figur zum ersten
   Mal live stand: Der Vorspann lief 92 Pixel weit ueber sie hinweg. Bei
   1,2 zu 1 Kontrast faellt das kaum auf, und genau deshalb faellt es beim
   Hinsehen durch und beim Nachmessen nicht.
   Die Figur ist 300 hoch und im Verhaeltnis 265 zu 385, also rund 206 breit;
   260 laesst ihr die Breite und eine Handbreit Abstand. */
@media(min-width:901px){
  /* min() aus beidem: die Lesebreite des Absatzes UND der Platz links der
     Figur. Auf der weiten Bahn von 1080 gewinnt die Lesebreite, auf einer
     schmaleren der Abstand zur Figur. */
  .hero-figur ~ h1{max-width:min(13em, calc(100% - 260px))}
  .hero-figur ~ .hero-sub{max-width:min(30em, calc(100% - 260px))}
  .hero-figur ~ .hero-klein{max-width:min(46em, calc(100% - 260px))}}

/* Erste Testfrage im Aufmacher. Sie muss ohne Scrollen sichtbar sein,
   deshalb ist der Kopfbereich auf schmalen Geraeten gestrafft. */
.hero-q{background:var(--panel);border:0;border-radius:var(--rad-gross);
  padding:22px 22px 20px;max-width:620px;scroll-margin-top:24px}
.hero-q-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.hero-q-step{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.hero-q-time{font-size:13px;color:var(--ink-faint)}
.hero-q-bar{height:3px;background:var(--line);margin-bottom:16px;border-radius:2px;overflow:hidden}
.hero-q-bar i{display:block;height:3px;width:8%;background:var(--accent)}
.hero-q-txt{font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,2.2vw,21px);line-height:1.4;margin:0 0 16px}
/* Bedienbar, also --line-aktiv. */
.hero-q-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.hero-q-opts button{font:inherit;font-size:16px;font-weight:600;padding:13px 12px;
  background:var(--surface);border:1px solid var(--line-aktiv);color:var(--ink);cursor:pointer;
  border-radius:var(--rad);transition:border-color .12s,background .12s}
.hero-q-opts button:hover{border-color:var(--accent);background:var(--accent-tint)}
.hero-q-opts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-q-note{font-size:13px;color:var(--ink-faint);margin:0;line-height:1.5}

.hero-meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:36px;padding-top:24px;
  border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--font-display);font-size:25px;font-weight:400;letter-spacing:-.01em}
.hero-meta span{font-size:13.5px;color:var(--ink-soft)}

@media(max-width:700px){
  .hero{padding:24px 0 32px}
  .eyebrow{margin-bottom:12px}
  .hero h1{margin-bottom:16px;line-height:1.16}
  .hero-sub{margin-bottom:20px;font-size:18.5px}
  .hero-meta{margin-top:26px;padding-top:20px;gap:18px 26px}
  .hero-meta b{font-size:22px}
}
@media(max-width:560px){
  .hero-q-opts{grid-template-columns:1fr}
  .hero-q{padding:20px 18px 18px}
}

/* Das Notfall-Gate auf der Startseite. Kein randloses Band mehr ueber die
   ganze Breite: Es traegt dieselbe Form wie auf jeder Themenseite, damit
   es als dasselbe Bauteil erkannt wird. */
.safety-band{background:var(--alarm-flaeche);border:1px solid var(--alarm);
  border-radius:var(--rad-gross);margin:0 0 8px;color:var(--alarm-text)}
.safety-in{display:flex;gap:13px;align-items:flex-start;padding:16px 18px}
.safety-in svg{flex:0 0 auto;margin-top:3px;color:var(--alarm)}
.safety-in p{margin:0;font-size:15.5px;line-height:1.55;max-width:72ch}
.safety-in strong{color:var(--alarm-text);font-weight:600}
@media(max-width:640px){.safety-in{padding:15px 16px}}
/* ===================================================================
   Startseite, Fassung vom 21.08.2026
   Reihenfolge geaendert: erst der eigene Fall, dann was herauskommt,
   dann die Systematik, dann der Rueckweg in den Test. Wer Hilfe sucht,
   will sich wiedererkennen und nicht belehrt werden.
   =================================================================== */
.block-intro{color:var(--ink-soft);font-size:16.5px;margin:0 0 20px;max-width:58ch}

/* Das Bereichszeichen sitzt ueber der Ueberschrift der Kachel, nicht
   daneben: In einer Zeile mit dem Text konkurriert es mit ihm, darueber
   ordnet es. */
.bereiche .z-bereich{display:block;margin:0 0 12px;color:var(--ink-faint)}
.bereiche a:hover .z-bereich{color:var(--accent)}

/* Die sieben Bereichskacheln der Startseite. Groesser als .faelle, weil es
   sieben statt fuenfzehn sind und jede in einen ganzen Bereich fuehrt.
   minmax mit 260px ergibt auf dem Handy eine Spalte, auf dem Tisch zwei bis
   drei, und die fuenfte Kachel bricht sauber um. */
/* 320 statt 260 als Mindestbreite: Auf der weiten Bahn von 1080 ergibt das
   drei Spalten, wie im Entwurf, und die sechs Bereiche stehen als 3 mal 2.
   Bei 260 waeren es vier, und die sechste Kachel stuende allein in einer
   zweiten Zeile. Schmaler faellt das Raster von selbst auf zwei und eins. */
.bereiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:12px;margin:0 0 14px}
/* Die Trennlinien sitzen auf den Kacheln, nicht als Hintergrund im
   Raster. Seit der siebten Kachel am 25.08.2026 bleibt sonst eine
   Zelle leer, und die Linienfarbe schlug dort als grauer Block durch.
   So bleibt freier Platz weiss, egal wie viele Spalten passen. */
.bereiche a{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad);padding:20px 22px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:6px;min-width:0;
  transition:background .12s,border-color .12s}
.bereiche a:hover{background:var(--accent-tint);border-color:var(--line-aktiv)}
.bereiche b{font-family:var(--font-display);font-weight:600;font-size:18px;
  line-height:1.3;overflow-wrap:anywhere}
.bereiche span{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
/* Die beiden Gruppen der Startseite, seit dem 15.09.2026. Eine Zwischenzeile
   und kein zweiter Kasten: Die Kacheln sind schon Flaechen, eine Flaeche um
   drei Flaechen waere Laerm. Die zweite Gruppe haelt Abstand zur ersten,
   damit die Zeile zu ihren eigenen Kacheln gehoert und nicht zu denen davor. */
.bereich-gruppe{font-family:var(--font-body);font-weight:600;font-size:15px;
  color:var(--ink-soft);margin:22px 0 10px;letter-spacing:.01em}
.bereiche + .bereich-gruppe{margin-top:30px}

/* Startseite ohne Testkasten: Der Hero traegt nur Text, deshalb weniger
   Abstand nach unten als der Hero mit Frageblock. */
.hero-neutral{padding-bottom:8px}
.hero-neutral .hero-sub{margin-bottom:14px}
.hero-klein{font-size:15px;color:var(--ink-soft);margin:4px 0 0}

/* Was am Ende herauskommt */
/* Drei Karten nebeneinander, nicht untereinander. Ohne
   grid-template-columns faellt das Raster auf eine Spalte zurueck, und dann
   steht eine kurze Zeile Text in einer Karte von 1030 Pixeln Breite. Auf der
   weiten Bahn der Startseite faellt das auf. Dasselbe minmax wie bei den
   Bereichskacheln, damit beide Raster gleich umbrechen. */
.ergebnis-vorschau{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* Seit dem 15.09.2026 offene Spalten mit einer Linie oben statt drei
   Kaesten (Review GPT-6 Astra, Test 12): Die Kacheln darueber sind schon
   Flaechen, und drei weitere Kaesten machten alles gleich wichtig. */
.ev-punkt{border-top:1px solid var(--line);padding:16px 0 0;min-width:0}
.ergebnis-vorschau{gap:24px}
.bereiche a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ev-punkt b{display:block;font-weight:600;font-size:16.5px;margin-bottom:5px}
.ev-punkt span{font-size:15px;color:var(--ink-soft);line-height:1.5}

/* Die Weiche, zweispaltig statt drei Absaetze */
.weiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:10px;margin:20px 0 0}
.weiche>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad);padding:19px 21px;min-width:0}
.weiche b{display:block;font-weight:600;font-size:16.5px;margin-bottom:6px}
.weiche span{font-size:15px;color:var(--ink-soft);line-height:1.55}

/* Abschluss mit Rueckweg in den Test */
.block.letzter{border-bottom:none;padding-bottom:56px}
.block.letzter h2{margin-bottom:12px}
.block.letzter p{max-width:56ch}
.knopfzeile{margin:22px 0 0}
.knopf{display:inline-block;background:var(--accent-deep);color:var(--accent-hell);
  text-decoration:none;font-size:16px;font-weight:600;padding:13px 26px;
  border-radius:var(--rad);transition:background .12s ease}
.knopf:hover{background:var(--accent-hover)}

/* ===================================================================
   Fragenlauf
   =================================================================== */
.fortschritt{margin:28px 0 26px}
.balken{height:3px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
.balken-txt{display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.04em;color:var(--ink-faint)}

.qhint{font-size:15px;color:var(--ink-soft);margin:0 0 22px;line-height:1.55}

/* Die zwei Wege unter einer Frage. Seit dem 28.08.2026: Vorher fuehrte von
   einer abgegebenen Antwort kein Weg zurueck. Der zweite Weg ist noetig, weil
   ein Klick auf eine schon gewaehlte Einfachauswahl kein change ausloest und
   das Formular deshalb nicht abschickt. */
/* Der Namensschritt am Ende des Fragebogens, seit dem 14.09.2026. */
.namensschritt{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.namensschritt input[type=text]{flex:1 1 220px;font:inherit;font-size:17px;padding:12px 14px;
  border:1px solid var(--line-aktiv);border-radius:var(--rad);background:var(--surface);color:inherit}
.namensschritt input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Seit dem 14.09.2026 positiver Abstand: Mit -8px lag der Link bei jeder
   Mehrfachauswahl auf dem Handy unter dem Weiter-Knopf. */
.testwege{display:flex;gap:20px;margin:10px 0 28px;font-size:15px}
.testwege a{color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line-aktiv)}
.testwege a:hover{color:var(--accent);border-color:var(--accent)}
.testwege a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Die Pfeile doppelt maskiert: TEST_CSS ist eine gewoehnliche Zeichenkette,
   Python liest eine einfache Folge sonst als Oktalzahl. Aus 2190 wurde am
   29.08.2026 U+0011 gefolgt von 90. Genau dieser Fehler stand am 24.08.2026
   schon einmal in stil.css, damals mit U+203A in der Brotkrume. */
.testwege .zurueck::before{content:"\2190\00a0"}
.testwege .vorwaerts::after{content:"\00a0\2192"}

.opts{display:flex;flex-direction:column;gap:8px;margin:0 0 24px}
/* Antwortkacheln sind bedienbar. Sie tragen deshalb --line-aktiv und nicht
   --line: Ein sandfarbener Rand auf Papiergrund erreicht die 3 zu 1 aus
   WCAG 1.4.11 rechnerisch nie. Die Trennung der beiden Randarten steht in
   build-seo-seiten.py im Tokensatz. */
.opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line-aktiv);border-radius:var(--rad);cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.opt input{flex:0 0 auto;margin:3px 0 0;width:18px;height:18px;accent-color:var(--accent)}
.opt-txt{flex:1;font-size:16px;line-height:1.4}
.opt-sub{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:4px}

/* Bebilderte Fragen, Kachelform.
   Elastisch statt fest dreispaltig: Die Haltungsfrage hat drei Antworten, die
   Mengenfrage vier. Bei festen drei Spalten stuende die vierte allein in einer
   zweiten Zeile, und die vier Mengen sollen nebeneinander liegen, sonst
   vergleicht sie niemand.
   auto-FIT, nicht auto-fill: fill laesst leere Spuren stehen, und drei
   Antworten standen dann in einem Vierspalter mit einer Luecke rechts. Im
   Browser nachgemessen, 159,5px mal vier bei drei Kacheln. */
.opts.visual{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}
.opts.visual .opt{flex-direction:column;align-items:stretch;padding:14px 15px 16px;gap:0}
.opts.visual .opt input{position:absolute;opacity:0;pointer-events:none}
.opt-fig{display:block;width:100%;height:auto;color:var(--ink-soft);margin-bottom:11px}
.opts.visual .opt:has(input:checked) .opt-fig{color:var(--accent)}
.opts.visual .opt-txt{flex:none;font-size:15px;font-weight:600;line-height:1.3}
.opts.visual .opt-sub{font-size:13px;font-weight:400;margin-top:5px}

/* Bebilderte Fragen, breite Form. Fuer Bilder, die laenger als hoch sind:
   das Nachtband ist 122 zu 26 Einheiten und in einer Kachel unlesbar. Eine
   Antwort je Zeile, das Bild links daneben, gross genug fuer die Uhrzeiten. */
.opts.visual-breit{grid-template-columns:1fr}
.opts.visual-breit .opt{flex-direction:row;align-items:center;gap:16px;
  padding:12px 16px}
.opts.visual-breit .opt-fig{width:150px;flex:0 0 150px;margin-bottom:0}
.opts.visual-breit .opt-txt{flex:1 1 auto;min-width:0;font-size:16px;
  overflow-wrap:break-word}
@media(max-width:640px){
  .opts.visual{grid-template-columns:1fr}
  .opts.visual .opt{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
  .opt-fig{width:78px;flex:0 0 78px;margin-bottom:0}
  /* flex:none aus der Grundregel heisst flex-shrink:0. In der Spalte (Desktop)
     wirkt das auf die Hoehe und ist gewollt. Hier kippt die Achse auf row, dann
     wirkt es auf die Breite: der Text bleibt auf max-content stehen und ragt
     ueber den Rand. Deshalb hier die Schrumpferlaubnis zurueckgeben. */
  .opts.visual .opt-txt{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
}

/* Auch als Link, nicht nur als Knopf. Die Regel hiess bis zum 28.08.2026
   button.primary, und ein <a class="primary"> bekam davon nichts ab: Der
   Verweis "Auswertung sichern oder drucken" auf der Ergebnisseite lief im
   Browser-Blau, rgb(0,0,238), mitten in einer Palette aus Papier und Gruen.

   Derselbe Fehler wie am 25.08.2026 bei den Verweisen im Fliesstext, und
   wieder ist er erst beim Nachmessen der Linkfarben aufgefallen, nicht beim
   Hinsehen: Ein blauer Link sieht aus wie ein Link. */
button.primary,a.primary{background:var(--accent-deep);color:var(--accent-hell);
  border:none;padding:14px 30px;font:inherit;font-size:16.5px;font-weight:600;
  cursor:pointer;border-radius:var(--rad);text-decoration:none;
  display:inline-block;line-height:1.2}
button.primary:hover,a.primary:hover{background:var(--accent-hover);
  color:var(--accent-hell)}
a.primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.opt{width:100%;font:inherit}

.fehler{background:var(--alarm-flaeche);border:1px solid var(--alarm);
  border-radius:var(--rad-gross);padding:14px 17px;margin:0 0 22px;font-size:16px;
  color:var(--alarm-text)}

/* ===================================================================
   Notfallzweig
   Dieselbe Farbfamilie wie das Notfall-Gate, und sie bleibt der einzige
   Ort im System, an dem Rot vorkommt.
   =================================================================== */
.alarm{background:var(--alarm-flaeche);border:1px solid var(--alarm);
  border-radius:var(--rad-gross);padding:24px 26px;margin:26px 0;
  color:var(--alarm-text)}
.alarm h1{font-family:var(--font-display);font-weight:400;color:var(--alarm);
  margin:0 0 14px;font-size:clamp(26px,4.4vw,34px);line-height:1.16}
.alarm p{font-size:17px;margin:0 0 14px}
.alarm p:last-child{margin-bottom:0}
.alarm a{color:var(--alarm)}

/* ===================================================================
   Ergebnis
   =================================================================== */
/* Marken. Ein Wert fuer Sperrung und Groesse, damit sie ueberall gleich
   aussehen; die Grundregel dafuer steht in build-seo-seiten.py unter
   .marke, hier stehen nur die Abstaende. */
.stamp{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:36px 0 16px}
.block{padding:32px 0;border-bottom:1px solid var(--line)}
.block:last-of-type{border-bottom:none}
.kicker{margin-bottom:12px}

/* Hypothesen auf der Ergebnisseite. Karte, kein Fugenraster: Auf getoentem
   Papier liest sich eine Fuge als Tabelle. */
.hyp{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad);padding:20px 22px;margin-bottom:12px;
  display:block;gap:0}
.hyp-rank{font-family:var(--font-body);font-weight:600;font-size:12px;
  letter-spacing:.09em;color:var(--accent);margin-bottom:6px;min-width:0;padding-top:0}
.hyp h3{margin:0 0 9px;font-size:18px;font-weight:600}
.hyp p{font-size:16px;margin:0 0 12px}
.hyp .why{font-size:15px;color:var(--ink-soft);background:var(--panel);
  border-radius:var(--rad);padding:12px 14px;margin:0}
.hyp .why b{color:var(--ink);font-weight:600}

/* Was der Test aufgenommen hat, in der Randspalte. Jede Zeile ist der
   Rueckweg in ihre Frage. Die Frage klein und leise, die Antwort in
   Lesegroesse: Gesucht wird nach der eigenen Angabe, nicht nach dem
   Fragewortlaut. */
.angaben{list-style:none;margin:0;padding:0}
.angaben li{border-bottom:1px solid var(--line)}
.angaben li:last-child{border-bottom:0}
.angaben a{display:block;padding:9px 0;text-decoration:none;color:inherit}
.angaben a:hover .angabe-wert,.angaben a:focus-visible .angabe-wert{color:var(--accent)}
.angabe-frage{display:block;font-size:14px;color:var(--ink-soft)}
.angabe-wert{display:block;font-size:15px}

/* Die Liste fuer die Praxis. Ruhige Flaeche, keine Signalfarbe: Sie ist
   das, was der Halter mitnimmt, nicht das, was ihn alarmiert. */
.vet{background:var(--panel);border:0;border-radius:var(--rad-gross);padding:24px}
.vet h3{color:var(--ink);font-family:var(--font-display);font-weight:600;
  font-size:19px;margin:0 0 10px}
.vet p{font-size:16.5px}
.vet ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px;
  font-size:16px;line-height:1.5}
.urgency{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;background:var(--panel);
  color:var(--accent);border-radius:var(--rad);padding:5px 11px;margin-bottom:13px}

/* Die Anmeldung, wenn ein Modul die Auswertung noch ueber die Mail
   ausliefert. Bis zum 27.08.2026 war das eine dunkle Petrolflaeche mit
   eigener Farbwelt. In dieser Richtung liegt Gruen nur im Schlussblock,
   also traegt die Anmeldung --panel und ihren Knopf in --accent-deep. */
.gate{background:var(--panel);border-radius:var(--rad-gross);padding:26px 26px;
  margin:8px 0 0}
.gate h2{font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(21px,3vw,25px);margin:0 0 12px;line-height:1.25}
.gate p{color:var(--ink-soft);font-size:16.5px;margin:0 0 18px}
/* Eingabefeld: bedienbar, also --line-aktiv. */
.gate input[type=email]{width:100%;padding:14px 16px;font:inherit;font-size:16.5px;
  border:1px solid var(--line-aktiv);background:var(--surface);color:var(--ink);
  border-radius:var(--rad);margin-bottom:12px}
.gate input[type=email]::placeholder{color:var(--ink-faint)}
.gate input[type=email]:focus{outline:2px solid var(--accent);outline-offset:-1px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);
  line-height:1.5;margin-bottom:18px}
.consent input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.consent a{color:var(--accent)}
.gate button.primary{font-weight:600}
.gate small{display:block;margin-top:13px;font-size:13.5px;color:var(--ink-faint)}

.klein{font-size:15px;color:var(--ink-soft);margin:22px 0 0}
.klein a{color:var(--accent)}

/* ===================================================================
   Fehlerseite
   =================================================================== */
.vierhundertvier{padding:70px 0 40px;text-align:center}
.vierhundertvier .code{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.16em;
  color:var(--ink-faint);margin-bottom:18px}
.vierhundertvier h1{max-width:14em;margin:0 auto 18px}
.vierhundertvier p{max-width:34em;margin:0 auto 26px;color:var(--ink-soft);font-size:17.5px}
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
  text-align:left;margin-top:10px}
.wege a{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
  padding:16px 18px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:5px;transition:border-color .12s,background .12s}
.wege a:hover{background:var(--accent-tint);border-color:var(--line-aktiv)}
.wege b{font-family:var(--font-display);font-weight:600;font-size:17px}
.wege span{font-size:14px;color:var(--ink-soft);line-height:1.45}

/* Ohne JavaScript braucht die Einfachauswahl einen sichtbaren Absendeknopf. */
noscript button.primary{margin-top:4px}

/* ===================================================================
   Teil A des Handbuchs, der Fahrplan
   Ein Dokument zum Ausdrucken, kein Bildschirmtext. Deshalb feste
   Textbreite, klare Blockkanten und alles auf Papier ausgerichtet.
   =================================================================== */
.fahrplan{max-width:none}
.fp-kopf{border-bottom:1px solid var(--line-aktiv);padding-bottom:18px;margin-bottom:30px}
.fp-marke{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.fp-kopf h1{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,5vw,38px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.fp-unter{margin:0;color:var(--ink-soft);font-size:17px;max-width:60ch}

.fp-block{margin:0 0 38px}
.fp-block h2{font-family:var(--font-display);font-weight:400;font-size:23px;
  letter-spacing:-.015em;margin:0 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.fp-block h3{font-size:16.5px;font-weight:600;margin:18px 0 6px}
.fp-block p{max-width:72ch}
.fp-lead{font-family:var(--font-display);font-size:20px;line-height:1.3;
  margin:0 0 10px;letter-spacing:-.01em}
.fp-klein{font-size:14px;color:var(--ink-soft)}

/* Die Zahlen */
.fp-zahlen{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:15.5px}
.fp-zahlen th{text-align:left;font-weight:600;padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line);width:34%;vertical-align:top}
.fp-zahlen td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-soft)}
.fp-zahlen td:first-of-type{font-weight:600;color:var(--ink);width:12%}
.fp-zahlen td.fp-leer{border-bottom:1px solid var(--line-strong,#A9B5B1)}

/* Der Weg durch das Handbuch */
ol.fp-weg{list-style:none;padding:0;margin:0;counter-reset:none}
ol.fp-weg li{display:flex;gap:16px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--line-soft)}
ol.fp-weg li:last-child{border-bottom:none}
.fp-rang{flex:0 0 74px;font-family:var(--font-body);font-weight:600;font-size:12.5px;
  color:var(--accent);padding-top:3px;letter-spacing:.02em}
.fp-inhalt{flex:1;min-width:0}
.fp-inhalt b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.fp-warum{display:block;color:var(--ink-soft);font-size:15.5px;line-height:1.55;
  max-width:62ch}
.fp-boegen{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;
  color:var(--ink-faint);margin-top:6px;letter-spacing:.02em}
ol.fp-weg li.fp-bedarf{opacity:.72}

/* Die ersten Schritte, mit Feld fuer das Datum */
ol.fp-schritte{list-style:none;padding:0;margin:0;counter-reset:schritt}
ol.fp-schritte li{counter-increment:schritt;position:relative;
  padding:16px 0 16px 46px;border-bottom:1px solid var(--line-soft)}
ol.fp-schritte li::before{content:counter(schritt);position:absolute;left:0;top:16px;
  width:28px;height:28px;border:1px solid var(--line-aktiv);border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-body);font-weight:600;font-size:13px}
ol.fp-schritte b{display:block;font-size:17px;margin-bottom:3px}
ol.fp-schritte p{margin:6px 0 0;font-size:15.5px;color:var(--ink-soft)}
.fp-datum{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:11.5px;
  color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line-strong,#A9B5B1);padding:0 78px 2px 0}

/* Die Praxisliste */
.fp-praxis{border:1px solid var(--line-aktiv);border-radius:var(--rad-gross);
  padding:22px 24px}
.fp-praxis h2{border-bottom:none;margin-bottom:6px}
.fp-band{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;background:var(--panel);color:var(--accent);
  border-radius:var(--rad);padding:5px 11px;margin:0 0 14px}

.fp-fuss{border-top:1px solid var(--line);padding-top:14px;margin-top:34px;
  font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.fp-fuss p{margin:0 0 6px;max-width:none}

@media(max-width:620px){
  ol.fp-weg li{flex-direction:column;gap:5px}
  .fp-rang{flex:none}
  .fp-zahlen th{width:44%}
}

/* ===================================================================
   Angebot auf der Ergebnisseite und die Downloads nach dem Kauf
   =================================================================== */
.block.angebot{background:var(--panel);border:0;border-radius:var(--rad-gross);
  padding:26px 28px 30px;margin-top:12px}
.block.angebot h2{margin-top:0}
ul.angebot-liste{list-style:none;padding:0;margin:18px 0 4px;
  display:flex;flex-direction:column;gap:11px}
ul.angebot-liste li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.55}
ul.angebot-liste li::before{content:"";position:absolute;left:0;top:11px;
  width:11px;height:1px;background:var(--accent)}

.dateien{display:flex;flex-direction:column;gap:10px}
a.datei{background:var(--surface);border:1px solid var(--line-aktiv);
  border-radius:var(--rad);padding:20px 22px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:5px;transition:background .12s}
a.datei:hover{background:var(--accent-tint)}
a.datei b{font-size:17.5px;color:var(--accent)}
a.datei span{font-size:15px;color:var(--ink-soft);line-height:1.5}

@media print{.block.angebot,.dateien{display:none !important}}

/* ===================================================================
   Widerrufsformular nach Paragraf 356a BGB
   =================================================================== */
.wform{margin:4px 0 0;max-width:540px}
.wform label{display:block;margin:0 0 20px}
.wform label>span{display:block;font-size:15.5px;font-weight:600;margin:0 0 6px}
.wform input[type=text],.wform input[type=email],.wform input[type=date]{
  width:100%;padding:13px 15px;font:inherit;font-size:16.5px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line-aktiv);border-radius:var(--rad)}
.wform input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.wform .zusatz{display:block;font-size:14px;font-weight:400;color:var(--ink-faint);
  margin:6px 0 0;line-height:1.45}
/* Honigtopf. Wer kein Mensch ist, fuellt das Feld aus und wird abgewiesen.
   Nicht ueber display:none, das erkennen einfache Skripte. */
.wform .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wquittung{border:0;background:var(--panel);border-radius:var(--rad-gross);
  padding:22px 24px;margin:0 0 24px}
.wquittung dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:16px}
.wquittung dt{color:var(--ink-soft)}
.wquittung dd{margin:0;font-weight:600}
@media(max-width:520px){.wquittung dl{grid-template-columns:1fr;gap:2px 0}
  .wquittung dd{margin-bottom:10px}}

/* ===================================================================
   Druckansicht

   Die Druckpalette steht in build-seo-seiten.py im @media print dort;
   hier steht nur, was die Test- und Ergebnisseiten zusaetzlich brauchen.
   Sie hier ein zweites Mal zu setzen war bis zum 28.08.2026 der Grund,
   warum die gedruckte Auswertung anders aussah als das gedruckte
   Handbuch.
   =================================================================== */
/* Der Weiter-Knopf der Einfachauswahl verschwindet, sobald sich auswahl.js
   gemeldet hat. Ohne Skript bleibt er stehen und der Test funktioniert. */
.js .weiter-auto{display:none}
.knopfzeile{margin:20px 0 6px}
.knopfzeile .primary{display:inline-block;text-decoration:none}
.druck-hinweis{background:var(--panel);border-radius:var(--rad-gross);
  padding:16px 20px;font-size:15px;line-height:1.55;margin:0 0 26px}

/* Im Druck ist ein Aufklapper kein Bedienelement mehr, sondern eine
   Ueberschrift. Der Pfeil daneben behauptet etwas, was auf Papier nicht
   geht. Das Aufklappen selbst erledigt das Attribut open, siehe
   aufklapper() in inc/layout.php. */
@media print{
  details.mehr>summary::after,details.f summary::after{display:none}
  details.mehr>summary{color:var(--ink);font-weight:600}
}
.druck-hinweis b{font-weight:600}

@media print {
  /* Alles ausblenden, was auf Papier nur Platz kostet */
  header.site, .fuss, .druck-hinweis, .knopfzeile, .gate,
  .fortschritt, .head-link, nav { display:none !important }
  .wrap{max-width:none;padding:0}
  /* Adressen ausschreiben, sonst zeigt das Papier ins Leere */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:var(--ink-soft)}
  main a[href^="/"]::after{content:" (catveo.de" attr(href) ")";font-size:9pt;color:var(--ink-soft)}

  h1{font-size:21pt;margin:0 0 10pt}
  h2{font-size:15pt}
  h3{font-size:12.5pt}
  .block{border:none;padding:0;margin:0 0 14pt}
  .kicker,.stamp,.urgency,.hyp-rank{font-size:9pt;letter-spacing:.09em}
  /* Keine Fuellungen im Druck, nur Rahmen und Linie. Die eine Ausnahme
     ist der Notfallhinweis, weil seine Flaeche eine Funktion hat. */
  .hyp,.vet,.druck-hinweis,.urgency,.hyp .why,.block.angebot,a.datei{
    background:#fff;border:.3mm solid var(--line);border-radius:0}
  /* orphans und widows sind hier NICHT gesetzt. Am 01.09.2026 probiert,
     um eine einzelne Zeile am Seitenende zu vermeiden. Gegenprobe mit zwei
     sonst gleichen Seiten: ohne Regel 33 und 2 Zeilen, mit orphans:3 und
     widows:3 ebenfalls 33 und 2. Chrome beachtet beides beim Druck nicht.
     Eine Regel, die nichts bewirkt, steht besser nicht da. */
  .hyp{break-inside:avoid;page-break-inside:avoid}
  .vet{break-inside:avoid;page-break-inside:avoid}
  .alarm,.fehler{border-width:.4mm;border-radius:0}
  /* Hier stand bis zum 01.09.2026:
         .vet-liste{break-before:page;page-break-before:always}
     mit der Begruendung, die Untersuchungsliste beginne auf einer eigenen
     Seite, damit man sie abtrennen koenne.
     Sie traf nur noch die falsche Stelle. `.vet-liste` steht in der
     kostenlosen Auswertung im Aufklapper des Tierarztblocks und traegt dort
     die bedingten Zusaetze aus `tierarzt_zusatz`, oft einen einzigen Satz.
     Im Ausdruck erzwang die Regel dafuer eine neue Seite: In der Probe war
     Seite 2 nach vier Zeilen zu Ende und Seite 3 begann mit einem einzelnen
     Aufzaehlungspunkt.
     Die Abtrennseite gibt es weiterhin, aber im bezahlten Teil A. Dort
     traegt sie `.fp-praxis`, siehe unten. */
  .stamp{border:.3mm solid var(--ink);padding:2pt 6pt;display:inline-block}

  /* Teil A: jeder Block bleibt zusammen, die Praxisliste bekommt eine
     eigene Seite, damit sie abgetrennt mitgenommen werden kann. */
  .fp-block{break-inside:avoid;page-break-inside:avoid;margin-bottom:16pt}
  .fp-kopf h1{font-size:22pt}
  .fp-unter{font-size:12pt}
  ol.fp-weg li{break-inside:avoid;page-break-inside:avoid}
  ol.fp-schritte li{break-inside:avoid;page-break-inside:avoid}
  .fp-praxis{break-before:page;page-break-before:always;border:.4mm solid var(--ink)}
  .fp-band{background:none;color:var(--ink);border:.3mm solid var(--ink)}
  /* Die Rueckstellung von `.vet-liste` faellt weg, seit die allgemeine
     Regel weg ist. Es gibt nichts mehr zurueckzustellen. */
  .fp-zahlen td.fp-leer{border-bottom:.4mm solid var(--ink)}
  .fp-datum{border-bottom:.4mm solid var(--ink)}
}