/* ═══════════════════════════════════════════════════════
   HUNDESCHULE WOLFSTEIN · Fragebogen-Bausteine
   Genutzt von ahund/fragebogen_assistenzhund.html und
   betreuung/ferienhundebetreuung.html.
   Ergaenzt style.css + neu.css — laedt danach.
   Stand: 14.08.2026 (12.08.2026 angelegt)
   ═══════════════════════════════════════════════════════ */

/* ── "hidden" muss auch wirklich verstecken ─────────────────
   Der Browser bringt zwar [hidden] { display: none } mit, das steht aber im
   Vorgabe-Stylesheet und verliert gegen JEDE Regel aus unseren Dateien.
   ".btn { display: inline-block }" in style.css hat es deshalb ausgehebelt:
   Die Schrittsteuerung setzte "hidden" korrekt, trotzdem standen "Zurück",
   "Weiter" und "Absenden" alle drei gleichzeitig da — auf Schritt 6 also ein
   "Weiter", das nirgendwo hinführt. Am 15.08.2026 aufgefallen. */
[hidden] { display: none !important; }

/* ── Bildkopf der Fragebögen ────────────────────────────────
   REGEL (14.08.2026, mit Moritz festgelegt): Fragebögen benutzen den
   Bildkopf der Website (.page-hero aus neu.css) — also Menüleiste,
   Eyebrow, Überschrift, Vorspann — aber mit deutlich zurückgenommenem
   Foto. Grund: Der Kopf der Werkzeugseiten (includes/header.php,
   Erstkontakt/Anamnese/Kurse) wirkt ruhiger, weil das Foto dort stark
   gedämpft ist. Diese Ruhe wollen wir; seinen Aufbau können wir aber
   nicht übernehmen, weil er die Wortmarke selbst trägt — die steht auf
   unseren Seiten schon in der Menüleiste, sie stünde also doppelt.

   Gedämpft wird über die Deckkraft des Fotos gegen den schwarzen Grund
   des Kastens — genau der Kniff, den .hero--a11y live schon benutzt.

   Der ASSISTENZHUND-Bogen bekommt bewusst KEIN Foto (schlichter .hero aus
   neu.css): Moritz hat es dort ausdrücklich herausgenommen, damit der Fokus
   auf der Sache bleibt. Das ist keine Nachlässigkeit, sondern Absicht —
   bitte nicht "vereinheitlichen". */
.page-hero.fragebogen-kopf { background: #0b0b0b; }
.page-hero.fragebogen-kopf > img { opacity: .58; }
.page-hero.fragebogen-kopf::after {
    background:
        linear-gradient(180deg, rgba(11,11,11,.62) 0%, rgba(11,11,11,.24) 26%, rgba(11,11,11,.10) 46%),
        linear-gradient(0deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.74) 30%, rgba(11,11,11,.44) 62%, rgba(11,11,11,.18) 100%);
}

/* Motive, die SCHON vor schwarzem Grund fotografiert sind (Jinjin), brauchen
   keine Dämpfung — sie sind bereits ruhig. Nimmt man ihnen zusätzlich
   Deckkraft, verschwindet der Hund schlicht. Zweck der Regel ist ein ruhiger
   Kopf mit gut lesbarem Text, nicht ein bestimmter Zahlenwert; hier ist er
   ohne Dämpfung erfüllt.

   Auch der Schleier bleibt schwach: Er soll bei hellen Fotos die Schrift
   tragen. Vor schwarzem Grund trägt sie sich selbst — ein kräftiger Verlauf
   würde hier nur den Hund zudecken, besonders auf dem Handy, wo der Kopf
   flach ist und der Text fast die ganze Höhe einnimmt. */
.page-hero.fragebogen-kopf.dunkles-motiv > img { opacity: 1; }
.page-hero.fragebogen-kopf.dunkles-motiv::after {
    background: linear-gradient(0deg,
        rgba(11,11,11,.55) 0%, rgba(11,11,11,.25) 34%, rgba(11,11,11,0) 70%);
}

/* Der Vorspann brach vorher unschön um (eine lange Zeile, dann ein
   kurzer Rest). "balance" verteilt die Zeilen gleichmäßig. */
.page-hero.fragebogen-kopf .lede { max-width: 52ch; text-wrap: balance; }
.page-hero.fragebogen-kopf h1 { text-wrap: balance; }

/* Schmalere Lesespalte fuer das Formular — bei ~700px liest sich ein
   Label-neben-Feld-Layout deutlich besser als ueber die volle .wrap-Breite. */
.fragebogen-frame { max-width: 700px; margin: 0 auto; }

/* ── Fortschritt ─────────────────────────────────────────── */
.fragebogen-progress { margin-bottom: 22px; }
.fragebogen-progress-track {
    width: 100%; height: 8px; border-radius: 99px;
    background: var(--sage-tint); overflow: hidden;
}
.fragebogen-progress-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: var(--sage-dark);
    transition: width .25s ease;
}
.fragebogen-progress-text { margin-top: 8px; font-size: .85rem; color: var(--ink-faint); }

/* ── Sprungleiste zu den Abschnitten ─────────────────────────
   Bleibt beim Scrollen unter der Kopfleiste stehen, damit man bei einem
   langen Formular jederzeit springen kann, ohne zurueckzuscrollen. */
.fragebogen-nav {
    position: sticky; top: 68px; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 0; margin-bottom: 26px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.fragebogen-nav a {
    display: inline-block; padding: 6px 13px;
    font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em;
    color: var(--ink-soft); text-decoration: none;
    border: 1px solid var(--line); border-radius: 99px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.fragebogen-nav a:hover { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-tint); }

/* ── Formular-Abschnitte ──────────────────────────────────── */
.fragebogen-section { margin-bottom: 46px; scroll-margin-top: 132px; }
.fragebogen-section h2 {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
    margin: 0 0 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--sage-line);
}
.fragebogen-section h2 .letter { color: var(--sage-deep); }
.theme-dark .fragebogen-section h2 .letter { color: var(--sage); }

.fragebogen-frage { margin-bottom: 20px; }
.fragebogen-frage:last-child { margin-bottom: 0; }

/* ── Erklaerzeilen unter einer Frage ───────────────────────
   ".formular .hinweis" aus neu.css hat margin: 0 — im Kontaktformular
   passt das, dort steht die Zeile allein unter einem Feld. Hier klebte
   sie oben an der Frage und unten an den Antwortmoeglichkeiten. */
.fragebogen-frage .hinweis { margin: 2px 0 12px; line-height: 1.5; }
/* Steht der Hinweis NACH dem Eingabefeld, braucht er unten nichts mehr —
   der Abstand zur naechsten Frage kommt schon von .fragebogen-frage. */
.fragebogen-frage input + .hinweis,
.fragebogen-frage textarea + .hinweis,
.fragebogen-frage select + .hinweis { margin: 4px 0 0; }
/* Zwischen Erklaerzeile und Auswahlliste etwas mehr Luft als zwischen
   zwei Zeilen Text — sonst liest sich der Hinweis wie die erste Antwort. */
.fragebogen-frage .hinweis + .optionen-liste { margin-top: 4px; }
.optionen-liste + .hinweis { margin-top: 12px; }

/* .feld/.formular kommen aus neu.css (Kontaktformular) — hier mitgenutzt,
   damit Text-, Mail-, Tel- und Textareafelder ueberall gleich aussehen. */
.fragebogen-frage.feld { margin-bottom: 20px; }

/* Radio-/Checkbox-Gruppen: eigenes Muster, dafuer gibt es in neu.css
   noch nichts (das Kontaktformular kommt ohne aus). */
.fragebogen-frage fieldset.optionen {
    border: 0; margin: 0; padding: 0;
}
/* ── Die Fragen selbst ──────────────────────────────────────
   REGEL (14.08.2026, Variante C aus dem Vergleich): Hausschrift der
   Überschriften (Oswald), aber NORMAL geschrieben — keine Versalien.

   ".formular label" in neu.css setzt Versalien mit weiter Sperrung. Für
   eine Feldbeschriftung aus einem Wort ("TELEFON") ist das richtig. Eine
   ganze Frage — "5. IST DER HUND ZUR ZEIT GESUND ODER LIEGEN BESCHWERDEN
   VOR?" — liest sich darin zäh: In Großbuchstaben fehlen Ober- und
   Unterlängen, an denen das Auge sonst die Wortformen erkennt, und die
   weite Sperrung zieht die Wörter zusätzlich auseinander.
   Deshalb hier normal gesetzt, dafür etwas größer, damit die Frage
   trotzdem klar über ihrem Eingabefeld steht. */
.fragebogen-frage fieldset.optionen legend,
.fragebogen-frage > label {
    font-family: var(--font-body); text-transform: none;   /* 16.09.: Roboto Medium statt Oswald (Rückmeldung Schrift) */
    letter-spacing: 0; font-size: 1.05rem; font-weight: 500;
    color: var(--ink); line-height: 1.35;
    padding: 0; margin-bottom: 10px; width: 100%;
}
/* Die laufende Nummer tritt farblich zurück: Sie ist Orientierung,
   nicht Teil der Frage. */
.fragebogen-frage .nr { color: var(--sage-deep); }
.theme-dark .fragebogen-frage .nr { color: var(--sage); }
.optionen-liste { display: grid; gap: 8px; }
/* Antwortmoeglichkeiten sind Fliesstext, keine Feldbeschriftungen:
   ".formular label" aus neu.css setzt sonst auch sie auf Versalien mit
   weiter Sperrung. Bei "JA/NEIN" faellt das kaum auf, bei den langen
   Auswahlsaetzen im Assistenzhund-Bogen ("Unterbrechen/Deeskalieren
   (Stupsen, Anlehnen, Druck)") wird daraus eine Zeile Grossbuchstaben. */
.optionen-liste label {
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--font-body); font-size: .96rem; color: var(--ink);
    text-transform: none; letter-spacing: normal; line-height: 1.5;
    cursor: pointer;
}
.optionen-liste input[type="radio"],
.optionen-liste input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
    accent-color: var(--sage-dark); cursor: pointer;
}

/* Von Frage 13 gesteuert (fragebogen.js) — weder style.css noch neu.css
   haben bisher eine .hidden-Hilfsklasse gebraucht. */
.hidden { display: none !important; }

/* Ein <p>, das als Trennueberschrift dient. "max-width: none" muss sein:
   style.css begrenzt jeden Absatz auf 68ch (Lesbarkeit im Fliesstext) —
   die Trennlinie darunter endete dadurch mitten in der Spalte. */
.fragebogen-unterkennung {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .08em; font-size: .74rem; color: var(--ink-faint);
    margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
    max-width: none;
}

/* ═══════════════════════════════════════════════════════════
   BAUSTEINE FÜR MEHRSCHRITTIGE BÖGEN (Anamnese)
   Kurze Bögen laufen auf einer Seite mit Sprungleiste A–E. Die
   Anamnese hat 39 Fragen — dort führt eine einzige lange Seite dazu,
   dass Leute vor dem Anfang aufgeben. Deshalb sechs Schritte.
   ═══════════════════════════════════════════════════════════ */

/* ── Schrittanzeige ───────────────────────────────────────── */
.fragebogen-schritte { margin-bottom: 30px; }
.fragebogen-schritte-reihe {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; margin-bottom: 10px;
}
/* Die Linie liegt HINTER den Punkten und beginnt/endet in deren Mitte,
   damit sie nicht links und rechts übersteht. */
.fragebogen-schritte-linie {
    position: absolute; left: 14px; right: 14px; top: 50%; height: 2px;
    background: var(--line); z-index: 0;
}
.fragebogen-schritte-fortschritt {
    position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background: var(--sage-dark); transition: width .3s ease;
}
.fragebogen-punkt {
    position: relative; z-index: 1;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: .8rem;
    background: var(--paper); color: var(--ink-faint);
    border: 2px solid var(--line);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.fragebogen-punkt.aktiv { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.fragebogen-punkt.erledigt { background: var(--sage-tint); border-color: var(--sage-dark); color: var(--sage-deep); }
.theme-dark .fragebogen-punkt.aktiv { color: #191b14; }

.fragebogen-schritte-namen {
    display: flex; justify-content: space-between;
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: .68rem; color: var(--ink-faint);
}
.fragebogen-schritte-namen span { flex: 1; text-align: center; }
.fragebogen-schritte-namen span:first-child { text-align: left; }
.fragebogen-schritte-namen span:last-child { text-align: right; }
@media (max-width: 620px) {
    /* Sechs Wörter nebeneinander sind auf dem Handy Kleinstschrift.
       Dort reicht "Schritt 3 von 6" unter den Punkten. */
    .fragebogen-schritte-namen { display: none; }
}

/* ── Ein Schritt ──────────────────────────────────────────── */
.fragebogen-schritt { display: none; }
.fragebogen-schritt.aktiv { display: block; }
.fragebogen-schritt > h2 {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
    margin: 0 0 6px; padding-bottom: 10px;
    border-bottom: 2px solid var(--sage-line);
}
.fragebogen-schritt > h2 .letter { color: var(--sage-deep); }
.theme-dark .fragebogen-schritt > h2 .letter { color: var(--sage); }
.fragebogen-schritt-lead { color: var(--ink-soft); font-size: .95rem; margin: 0 0 26px; }

.fragebogen-schrittnav {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--line);
}
.fragebogen-schrittzaehler {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .08em; font-size: .74rem; color: var(--ink-faint);
    margin-left: auto;
}
@media (max-width: 520px) {
    .fragebogen-schrittnav .btn { flex: 1 1 0; min-width: 0; text-align: center; }
    .fragebogen-schrittzaehler { margin: 4px 0 0; width: 100%; text-align: center; }
}

/* ── Unterfragen (eine Frage, mehrere Teilantworten) ──────── */
.unterfragen { display: grid; gap: 16px; margin-top: 4px; }
.unterfrage > label {
    display: block; font-family: var(--font-body); text-transform: none;
    letter-spacing: normal; font-size: .95rem; color: var(--ink-soft);
    margin-bottom: 6px;
}
.unterfrage textarea { min-height: 80px; }

/* ── Skala 0–10 ───────────────────────────────────────────── */
.skala-block { margin-bottom: 22px; }
.skala-block:last-child { margin-bottom: 0; }
.skala-frage {
    font-family: var(--font-body); font-size: .95rem;
    color: var(--ink-soft); margin-bottom: 8px;
}
/* Elf gleich breite Felder. Auf schmalen Geräten schrumpfen sie mit,
   statt aus der Zeile zu fallen — deshalb 1fr statt fester Breite. */
.skala-reihe { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.skala-reihe label { cursor: pointer; }
.skala-reihe input { position: absolute; opacity: 0; width: 0; height: 0; }
.skala-knopf {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink-soft);
    font-family: var(--font-display); font-size: .82rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.skala-reihe label:hover .skala-knopf { border-color: var(--sage); }
.skala-reihe input:checked + .skala-knopf {
    background: var(--sage-dark); border-color: var(--sage-dark); color: #fff;
}
.theme-dark .skala-reihe input:checked + .skala-knopf { color: #191b14; }
/* Tastaturbedienung muss sichtbar bleiben — das Feld selbst ist unsichtbar.
   Seit 26.08.2026 zweifarbig wie in style.css: --sage allein erreichte auf
   hellem Grund nur 2,4–2,7 statt der geforderten 3,0. */
.skala-reihe input:focus-visible + .skala-knopf {
    outline: 3px solid var(--sage-deep); outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--card);
}
.skala-enden {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: .78rem; color: var(--ink-faint);
}
@media (max-width: 420px) {
    .skala-knopf { font-size: .72rem; border-radius: 6px; }
    .skala-reihe { gap: 3px; }
}

/* ── Dringlichkeitskarten ─────────────────────────────────── */
.dringlichkeit { display: grid; gap: 10px; margin-top: 4px; }
.dringlichkeit > label { cursor: pointer; }
.dringlichkeit input { position: absolute; opacity: 0; width: 0; height: 0; }
.dringlichkeit-karte {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--card);
    transition: border-color .15s ease, background .15s ease;
}
.dringlichkeit > label:hover .dringlichkeit-karte { border-color: var(--sage); }
.dringlichkeit input:checked + .dringlichkeit-karte {
    border-color: var(--sage-dark); background: var(--sage-tint);
}
.dringlichkeit input:focus-visible + .dringlichkeit-karte {
    outline: 3px solid var(--sage-deep); outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--card);   /* 26.08.2026, siehe oben */
}
.dringlichkeit-punkt {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.dringlichkeit-punkt.gruen  { background: #6f9056; }
.dringlichkeit-punkt.gelb   { background: #d8a13a; }
.dringlichkeit-punkt.orange { background: #cc7a33; }
.dringlichkeit-punkt.rot    { background: #b3422f; }
/* Die Karten stecken in <label>-Elementen, deshalb greift auch hier
   "text-transform: uppercase" aus neu.css. Bei "PRÄVENTIV" ginge das noch
   durch, bei drei Zeilen Beschreibung in Versalien nicht mehr. */
.dringlichkeit-text { text-transform: none; letter-spacing: normal; }
.dringlichkeit-text strong {
    display: block; font-family: var(--font-display); font-size: 1.05rem;
    color: var(--ink); margin-bottom: 3px;
}
.dringlichkeit-text span {
    font-family: var(--font-body); font-size: .9rem;
    color: var(--ink-soft); line-height: 1.5;
}

/* ── Datenschutz-Kasten ───────────────────────────────────── */
.fragebogen-datenschutz {
    background: var(--sage-tint); border: 1px solid var(--sage-line);
    border-radius: var(--radius); padding: 20px 22px; margin: 8px 0 26px;
}
.fragebogen-datenschutz h3 { font-size: 1rem; margin: 0 0 10px; }
.fragebogen-datenschutz p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 10px; }
.fragebogen-datenschutz p:last-of-type { margin-bottom: 0; }
.fragebogen-zustimmung {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
}
.fragebogen-zustimmung input {
    width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0;
    accent-color: var(--sage-dark); cursor: pointer;
}
/* Ausdruecklich zurueck auf Fliesstext: ".formular label" in neu.css setzt
   fuer Feldbeschriftungen Versalien mit weiter Sperrung — richtig fuer ein
   Wort wie "TELEFON", falsch fuer den einen langen Satz, den der Kunde hier
   wirklich lesen soll, bevor er ihn bestaetigt. */
.fragebogen-zustimmung label {
    font-family: var(--font-body); text-transform: none; letter-spacing: normal;
    font-size: .88rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer;
}
.fragebogen-zustimmung label strong { color: var(--ink); }

/* ── Pflichtfeld-Sternchen ─────────────────────────────────
   Im HTML mit aria-hidden versehen: Screenreader bekommen die Pflicht
   ueber das required-Attribut mit, das vorgelesene "Stern" waere nur
   Laerm. Fuer Sehende bleibt es das gewohnte Zeichen. */
.pflicht { color: var(--sage-deep); margin-left: 3px; }
.theme-dark .pflicht { color: var(--sage); }

/* ── Warnkasten (Risikohinweis vor einer Zustimmung) ────────
   Bewusst waermer/roeter als .notice: Hier steht kein Hinweis, sondern
   etwas, dem man gleich ausdruecklich zustimmt. */
.fragebogen-warnung {
    background: #fdf3f0; border: 1px solid #e2c0b5;
    border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px;
}
.theme-dark .fragebogen-warnung { background: #35231d; border-color: #5f3c31; }
.fragebogen-warnung p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 10px; }
.fragebogen-warnung p:last-child { margin-bottom: 0; }
/* Direkt unter Antwortmoeglichkeiten (Ferienbetreuung Frage 8, seit 11.09.2026) */
.optionen-liste + .fragebogen-warnung { margin: 12px 0 0; }

/* ── Kleine Preistabelle ───────────────────────────────────── */
.fragebogen-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.fragebogen-tabelle caption {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .09em; font-size: .78rem; color: var(--ink-soft);
    text-align: left; margin-bottom: 10px;
}
.fragebogen-tabelle th, .fragebogen-tabelle td {
    padding: 9px 0; border-bottom: 1px solid var(--line);
    font-size: .93rem; font-weight: 400;
}
.fragebogen-tabelle th { text-align: left; color: var(--ink-soft); }
.fragebogen-tabelle td { text-align: right; color: var(--ink); white-space: nowrap; }
.fragebogen-tabelle tr:last-child th, .fragebogen-tabelle tr:last-child td { border-bottom: 0; }

/* ── Wer bestaetigt? ────────────────────────────────────────
   Wird von betreuung.js aus den Feldern Name/E-Mail gefuellt, damit
   sichtbar ist, wem die Zustimmung zugerechnet wird. */
.fragebogen-signatur {
    margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--sage-line);
    font-size: .84rem; color: var(--ink-faint); max-width: none;
}
.fragebogen-signatur.gesetzt {
    font-family: var(--font-display); letter-spacing: .04em;
    color: var(--sage-deep);
}
.theme-dark .fragebogen-signatur.gesetzt { color: var(--sage); }

/* ── Aktionen ─────────────────────────────────────────────── */
.fragebogen-aktionen {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding-top: 22px; border-top: 1px solid var(--line);
    /* Platz für die Statuszeile ist dauerhaft reserviert — siehe unten. */
    position: relative; padding-bottom: 30px;
}
/* Die Statuszeile liegt bewusst AUSSERHALB des Flex-Flusses.
   Vorher war sie ein normales Flex-Kind: Sobald "Automatisch gespeichert"
   erschien, rutschte sie auf schmalen Fenstern in eine eigene Zeile, die
   Seite wurde höher, und alles darunter sprang — alle paar Sekunden neu.
   Jetzt steht sie in reserviertem Platz und kann nichts mehr verschieben. */
.fragebogen-status {
    position: absolute; left: 0; bottom: 6px;
    font-size: .82rem; color: var(--ink-faint);
    opacity: 0; transition: opacity .25s ease;
}
.fragebogen-status.gespeichert, .fragebogen-status.fehler { opacity: 1; }
.fragebogen-status.gespeichert { color: var(--sage-deep); }
.theme-dark .fragebogen-status.gespeichert { color: var(--sage); }
.fragebogen-status.fehler { color: #b3422f; }

/* ── Hinweisbanner nach dem Absenden ──────────────────────── */
.fragebogen-banner { display: none; margin-bottom: 26px; }
.fragebogen-banner.zeigen { display: block; }
.fragebogen-banner.fehler { background: #fdecea; border-color: #e2b3a8; }
.theme-dark .fragebogen-banner.fehler { background: #3a231d; border-color: #6b4136; }

/* Nach erfolgreichem Absenden bleibt NUR die Bestätigung stehen.
   Vorher stand darunter wieder der leere Fragebogen samt "Für Stammgäste:
   bitte aktuell halten" — Moritz hat beim ersten echten Test genau deshalb
   gedacht, das Absenden habe nicht funktioniert. Ein Bestätigungstext, unter
   dem das Formular erneut wartet, sagt für den Leser: fang nochmal an. */
.fragebogen-frame.abgeschickt > *:not(.fragebogen-banner) { display: none !important; }

.fragebogen-banner.erfolg { padding: 26px 28px; }
.fragebogen-banner-titel {
    font-family: var(--font-display); font-size: 1.25rem;
    color: var(--sage-deep); margin-bottom: 12px;
}
.theme-dark .fragebogen-banner-titel { color: var(--sage); }
.fragebogen-banner-aktion {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--sage-line);
}

/* ── Anhang: "Wie es weitergeht" + Hintergrundinfos ──────── */
/* 20.09.2026 (Moritz): „Wie es weitergeht" klebte an den Knoepfen
   Zurueck/Weiter. Eigener Abstand plus feine Linie als Zaesur. */
.fragebogen-anhang {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.fragebogen-anhang h2 {
    font-size: 1.4rem; margin: 2.2em 0 .6em;
}
.fragebogen-anhang h2:first-child { margin-top: 0; }
.fragebogen-anhang-block { margin-bottom: 22px; }
.fragebogen-anhang-block p.kicker {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .04em; font-size: .82rem; color: var(--sage-deep);
    margin: 0 0 8px;
}
.theme-dark .fragebogen-anhang-block p.kicker { color: var(--sage); }
.fragebogen-anhang ul { margin: 0 0 .8em 1.3em; padding: 0; }
.fragebogen-anhang li { margin-bottom: .4em; color: var(--ink-soft); }
.fragebogen-anhang p { margin: 0 0 .8em; }

@media (max-width: 620px) {
    .fragebogen-nav { top: 60px; gap: 6px; }
    .fragebogen-nav a { padding: 5px 11px; font-size: .78rem; }
    .fragebogen-section { scroll-margin-top: 118px; }
}

/* ═══════════════════════════════════════════════════════════
   BAUKASTEN-ERGÄNZUNGEN (17.09.2026)
   Grundlage: Marketing/DESIGN-REVIEW-FORMULARE-2026-09-17.md, Abschnitt 2.
   Alles hier ist ADDITIV: Ein Formular bekommt den Baustein erst, wenn es
   die Klasse trägt (.kacheln, .segment, .hat-fehler …). Nimmt man die
   Klasse wieder weg, steht das alte Bild da. Ausnahme sind die beiden
   Kontrast-Korrekturen unter "Schritte nachschärfen".
   Farben nur über Tokens — .theme-dark kippt deshalb von selbst.
   ═══════════════════════════════════════════════════════════ */

/* ── Fehlerfarben ───────────────────────────────────────────
   Hell 6,3:1 auf Papier und 6,1:1 auf der Fläche; dunkel 8,9:1 und 7,6:1.
   (#b3422f kam in der dunklen Ansicht nur auf 3,1:1.) Stehen HIER und nicht
   in neu.css, weil nur Formulare sie brauchen — so bleibt neu.css beim
   etappenweisen Livegang unberührt. */
:root       { --fehler: #a23a28; --fehler-flaeche: #fdf3f0; --fehler-linie: #e2c0b5; }
.theme-dark { --fehler: #f0a898; --fehler-flaeche: #35231d; --fehler-linie: #6b4136; }

/* ── Symbole (assets/img/symbole.svg, per <use>) ───────────── */
.symbol {
    width: 1.15em; height: 1.15em; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ── Fehler am Feld ─────────────────────────────────────────
   Bis 17.09.2026 stand die Meldung nur in .fragebogen-status unter dem
   Absende-Knopf — gemessen 1.500 bis 3.000 px vom Feld entfernt, nach
   vier Sekunden weg. Jetzt dreifach erkennbar: Text, Symbol, Balken
   links. Nie nur Farbe. Gesetzt wird das von fragebogen-fehler.js. */
.fehlertext {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 6px 0 4px; max-width: none;
    font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--fehler);
}
.fehlertext .symbol { margin-top: .12em; }
.fragebogen-frage .fehlertext + .hinweis { margin-top: 4px; }
.hat-fehler input:not([type="radio"]):not([type="checkbox"]),
.hat-fehler select,
.hat-fehler textarea {
    border-color: var(--fehler);
    box-shadow: inset 3px 0 0 var(--fehler);
}
.hat-fehler .optionen-liste,
.hat-fehler .skala-reihe,
.hat-fehler .dringlichkeit,
.hat-fehler .ss-termine { border-left: 3px solid var(--fehler); padding-left: 12px; }
.fragebogen-zustimmung.hat-fehler { border-left: 3px solid var(--fehler); padding-left: 12px; }
.fragebogen-zustimmung + .fehlertext { margin: 2px 0 0 15px; }

/* Übersicht über dem Formular bzw. über dem Schritt */
.fragebogen-fehlerliste {
    background: var(--fehler-flaeche); border: 1px solid var(--fehler-linie);
    border-radius: var(--radius); padding: 16px 20px; margin: 0 0 22px;
}
.fragebogen-fehlerliste p { margin: 0 0 4px; color: var(--ink); max-width: none; }
.fragebogen-fehlerliste ul { margin: 0; padding-left: 1.2em; }
.fragebogen-fehlerliste li { margin: 0; }
.fragebogen-fehlerliste a { display: inline-block; padding: 7px 0; color: var(--fehler); }
.fragebogen-fehlerliste:focus { outline: none; }
.fragebogen-fehlerliste:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Deaktiviert — nur wo es einen Grund gibt (ausgebuchter Termin).
   Der Absende-Knopf wird NIE deaktiviert, siehe INFOS.md § 3. */
.formular input:disabled, .formular select:disabled, .formular textarea:disabled {
    background: var(--tint, var(--sage-tint)); color: var(--ink-faint);
    border-style: dashed; cursor: not-allowed;
}

/* ── Auswahl als Kacheln ────────────────────────────────────
   Gleiche Auszeichnung wie bisher (<label><input> Text</label>), nur die
   Klasse "kacheln" an .optionen-liste. Das Kästchen bleibt sichtbar: Der
   Zustand hängt so nie an der Farbe allein, und Browser ohne :has()
   zeigen einfach ein gewöhnliches Häkchen in einem Rahmen. */
.optionen-liste.kacheln { gap: 8px; }
.optionen-liste.kacheln label {
    align-items: center; min-height: 48px; padding: 10px 14px;
    background: var(--card); border: 1px solid var(--line-strong, #8a8f7e); border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.optionen-liste.kacheln input[type="radio"],
.optionen-liste.kacheln input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
.optionen-liste.kacheln label:hover { border-color: var(--sage-deep); }
.optionen-liste.kacheln label:has(input:checked) {
    border-color: var(--sage-deep); background: var(--sage-tint);
    box-shadow: inset 0 0 0 1px var(--sage-deep);
}
.optionen-liste.kacheln label:has(input:focus-visible) {
    outline: 3px solid var(--ink); outline-offset: 2px;
}
.optionen-liste.kacheln label:has(input:focus-visible) input { outline: none; box-shadow: none; }
.optionen-liste.kacheln label:has(input:disabled) {
    background: var(--tint, var(--sage-tint)); color: var(--ink-faint);
    border-style: dashed; cursor: not-allowed;
}
@media (min-width: 620px) {
    .optionen-liste.kacheln.zweispaltig { grid-template-columns: 1fr 1fr; }
}

/* ── Ja/Nein als Segment ────────────────────────────────────
   Nur für zwei bis drei KURZE Antworten. Ganze Sätze bekommen .kacheln.
   ".lang" bricht unter 420 px in Zeilen um (z. B. "Weiß ich nicht"). */
.optionen-liste.segment {
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    border: 1px solid var(--line-strong, #8a8f7e); border-radius: 10px;
    overflow: hidden; background: var(--card);
}
.optionen-liste.segment label {
    justify-content: center; align-items: center; min-height: 48px;
    padding: 8px 12px; text-align: center;
    border-left: 1px solid var(--line-strong, #8a8f7e);
    transition: background .15s ease;
}
.optionen-liste.segment label:first-child { border-left: 0; }
.optionen-liste.segment input[type="radio"] { width: 20px; height: 20px; margin: 0; }
.optionen-liste.segment label:hover { background: var(--sage-tint); }
.optionen-liste.segment label:has(input:checked) {
    background: var(--sage-tint); font-weight: 500;
    box-shadow: inset 0 -3px 0 var(--sage-deep);
}
.optionen-liste.segment label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
.optionen-liste.segment label:has(input:focus-visible) input { outline: none; box-shadow: none; }
.hat-fehler .optionen-liste.segment { border-color: var(--fehler); border-left-width: 3px; padding-left: 0; }
@media (max-width: 420px) {
    .optionen-liste.segment.lang { grid-auto-flow: row; }
    .optionen-liste.segment.lang label {
        justify-content: flex-start; border-left: 0;
        border-top: 1px solid var(--line-strong, #8a8f7e);
    }
    .optionen-liste.segment.lang label:first-child { border-top: 0; }
}

/* ── Datum und Uhrzeit mit Bordmitteln ──────────────────────
   iOS zeichnet date/time sonst schmaler, zentriert und ohne Mindesthöhe. */
.formular input[type="date"], .formular input[type="time"] {
    min-height: 46px; min-width: 0; text-align: left;
    -webkit-appearance: none; appearance: none;
}

/* ── Schritte nachschärfen ──────────────────────────────────
   Weiß auf --sage-dark sind 3,9:1 — für die kleine Ziffer zu wenig.
   --sage-deep bringt 6,1:1; dunkel bleibt dunkle Schrift auf hellem Grün. */
.fragebogen-punkt.aktiv { background: var(--sage-deep); border-color: var(--sage-deep); }
.skala-reihe input:checked + .skala-knopf { background: var(--sage-deep); border-color: var(--sage-deep); }
/* Schrittname über dem Inhalt — die Namensleiste ist unter 620 px ausgeblendet */
.fragebogen-schritt-kopf {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: .78rem; color: var(--ink-faint);
    margin: 0 0 6px; max-width: none;
}
.fragebogen-schritt > h2:focus { outline: none; }
/* Skala: unter 480 px zwei Reihen (0–5, 6–10). Elf Knöpfe in einer Reihe
   sind bei 375 px nur 27 px breit. */
@media (max-width: 480px) {
    .skala-reihe { grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .skala-knopf { aspect-ratio: auto; min-height: 44px; font-size: .9rem; border-radius: 8px; }
}

/* ── Einwilligung größer ────────────────────────────────────
   Opt-in über die Klasse "gross", damit bestehende Bögen unverändert
   bleiben, bis ihre Etappe dran ist. */
.fragebogen-zustimmung.gross { gap: 14px; padding-top: 10px; padding-bottom: 10px; min-height: 48px; }
.fragebogen-zustimmung.gross input { width: 24px; height: 24px; margin-top: 1px; }
.fragebogen-zustimmung.gross label { font-size: .95rem; color: var(--ink); }

/* ── Absenden läuft / keine Verbindung ──────────────────────── */
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.fragebogen-offline {
    display: none; background: var(--fehler-flaeche); border: 1px solid var(--fehler-linie);
    border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px;
    font-size: .92rem; color: var(--ink); max-width: none;
}
.fragebogen-offline.zeigen { display: block; }

/* ── Flacher Bildkopf am Handy ──────────────────────────────
   Opt-in je Bogen (Klasse "kopf-flach"): Der normale Kopf ist am Handy
   mindestens 380 px hoch — das erste Feld beginnt dann erst am unteren
   Bildschirmrand. Motiv, Eyebrow, Überschrift und Vorspann bleiben. */
@media (max-width: 620px) {
    .page-hero.fragebogen-kopf.kopf-flach { min-height: 0; }
    .page-hero.fragebogen-kopf.kopf-flach .wrap { padding-block: 26px 20px; }
}

/* ── Terminkacheln (Mantrailing): Tag links, Uhrzeit rechts ── */
.optionen-liste.kacheln .termin-zeit { margin-left: auto; padding-left: 12px; color: var(--ink-soft); white-space: nowrap; }
.optionen-liste.kacheln .termin-monat {
    margin: 10px 0 0; max-width: none;
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: .8rem; color: var(--ink-faint);
}
.optionen-liste.kacheln .termin-monat:first-child { margin-top: 0; }

/* ── Rückkehr-Hinweis und leiser Textknopf ──────────────────── */
.fragebogen-rueckkehr p { margin: 0 0 6px; }
.fragebogen-textknopf {
    background: none; border: 0; padding: 10px 0; min-height: 44px;
    font: inherit; font-size: .88rem; color: var(--ink-soft);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fragebogen-textknopf:hover { color: var(--sage-deep); }

/* ── Hinweis- und Kleintexte nehmen die Feldbreite ein ──────
   Aufgefallen am 18.09.2026 (Moritz: „komisch formatiert", „gedrittelt").
   Ursache: die Grundregel `p { max-width: 68ch }` aus neu.css. Bei .85 rem
   sind das rund 520 px, das Feld darüber ist im 700-px-Rahmen aber 660 px
   breit — der Hinweis bricht dadurch weit vor dem Feldrand um und sieht
   eingerückt aus. Für Fließtext ist die Regel richtig, für eine Zeile, die
   zu einem Feld gehört, nicht. (.notice p macht es in neu.css schon so.) */
.formular .hinweis,
.formular p.klein,
.fragebogen-datenschutz p,
.fragebogen-warnung p { max-width: none; }

/* ── Sprungleiste mit 44-px-Zielen (Opt-in "gross") ─────────── */
.fragebogen-nav.gross a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; }

/* ── Aufklapper im Formular (standardmäßig zu) ──────────────
   Eigener Baustein, damit er nicht an "details.aufklapp" aus neu.css hängt —
   das kennt der Live-Server vor dem Relaunch noch nicht. */
.fragebogen-aufklapper {
    border: 1px solid var(--line-strong, #8a8f7e); border-radius: 10px;
    background: var(--card); padding: 0 16px; margin: 0 0 20px;
}
.fragebogen-aufklapper > summary {
    list-style: none; cursor: pointer; min-height: 48px; padding: 10px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--font-body, inherit); font-weight: 500; font-size: 1rem; color: var(--ink);
}
.fragebogen-aufklapper > summary::-webkit-details-marker { display: none; }
.fragebogen-aufklapper > summary::after {
    content: "+"; font-size: 1.3rem; line-height: 1; color: var(--sage-deep); flex-shrink: 0;
}
.fragebogen-aufklapper[open] > summary::after { content: "–"; }
.fragebogen-aufklapper[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.fragebogen-aufklapper[open] { padding-bottom: 16px; }
.fragebogen-aufklapper p { max-width: none; }

/* ── Abschluss: "Was jetzt passiert" ────────────────────────── */
.fragebogen-weiter { margin: 14px 0 0; padding-left: 1.3em; }
.fragebogen-weiter li { margin-bottom: .5em; color: var(--ink-soft); }

/* ── Druckansicht ──────────────────────────────────────────
   Ziel: ein ausdruckbarer Bogen, unabhaengig vom aktuell
   ausgewaehlten Zweig bei Frage 13 — deshalb werden dort beide
   Unterabschnitte erzwungen sichtbar. Navigation, Fortschritt und
   Bedienelemente ergeben auf Papier keinen Sinn und fliegen raus. */
@media print {
    .site-header, .fragebogen-progress, .fragebogen-nav,
    .fragebogen-aktionen, .fragebogen-status, .fragebogen-banner,
    .site-footer, .skip-link, .theme-toggle { display: none !important; }

    #existingDogSection, #plannedDogSection { display: block !important; }

    body { background: #fff; }
    .hero { background: none; padding: 0 0 20px; border-bottom: 1px solid #ccc; }

    /* .formular/.feld/.optionen-liste sind fuers Bildschirm-Layout
       display:grid (neu.css bzw. weiter oben in dieser Datei). CSS-Grid
       fragmentiert nicht zuverlaessig ueber Seitenumbrueche — im Testdruck
       hat der PDF-Renderer den Rest eines Grid-Containers stillschweigend
       abgeschnitten, sobald der nicht mehr auf eine Seite passte (Frage 21
       bis 25 fehlten dadurch komplett). Fuer den Druck deshalb zurueck auf
       normalen Blockfluss, der wie jeder Fliesstext beliebig oft umbrechen
       kann, ohne etwas zu verlieren. */
    .formular, .feld, .optionen-liste { display: block; }
    .feld label { display: block; margin-bottom: 6px; }
    .optionen-liste label { margin-bottom: 8px; }
    .formular textarea { min-height: 70px; resize: none; }

    /* Aus demselben Grund bewusst KEIN "page-break-inside: avoid" auf
       .fragebogen-section (A–H) selbst: Abschnitt D ist mit beiden erzwungen
       sichtbaren Zweigen laenger als eine Seite, und ein "avoid" auf einem
       Block, der nie auf eine Seite passt, brachte dieselbe
       Verschluckungs-Bug wieder zurueck. Nur der schwache Hinweis "nicht
       direkt nach einer Überschrift umbrechen" ist unproblematisch, weil
       danach ohnehin Platz folgt. */
    .fragebogen-section h2 { break-after: avoid; }
    .fragebogen-datenschutz { page-break-inside: avoid; break-inside: avoid; }
    .fragebogen-anhang-block { page-break-inside: avoid; break-inside: avoid; }
    .fragebogen-warnung,
    .fragebogen-tabelle { page-break-inside: avoid; break-inside: avoid; }
    .honigtopf { display: none !important; }
    .fragebogen-offline, .fragebogen-fehlerliste, .fehlertext { display: none !important; }

    a { color: inherit; text-decoration: none; }
    .fragebogen-frame { max-width: none; }
}