/* ═══════════════════════════════════════════════════════════════════════
   Praxisfragen — neun Schritte statt einer langen Seite.
   Werte aus „Praxisfragen Entwurf" uebernommen.

   Richtung D ist hier bewusst eckig: kein Radius ausser bei Pillen.
   Und bewusst nur Archivo - eine Familie, dafuer die ganze Gewichtsachse.
   ═══════════════════════════════════════════════════════════════════════ */

body{font-family:var(--f-head);font-size:1.05rem}

/* ── Kopf mit Fortschritt ────────────────────────────────────────────────
   Sieben Segmente, eines je Abschnitt. Bernstein ist der aktuelle,
   Teal der vollstaendige, halbes Teal der angefangene. Die Prozentzahl
   waere bei 33 Fragen entmutigend, die Abschnittszaehlung ist es nicht. */
.qhead{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--paper)}
.qhead-in{max-width:720px;margin-inline:auto;padding:11px clamp(16px,4vw,28px)}
.qhead-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:9px}
.qhead-l{font-weight:700;font-size:.9rem}
.qhead-r{font-weight:600;font-size:.82rem;color:var(--faint)}
/* Sprachwahl im Kopf: ein Auswahlfeld, keine drei Flaechen. Neben
   Abschnittszaehler und Fortschritt ist fuer drei Knoepfe kein Platz,
   und ein Auswahlfeld waechst nicht mit jeder weiteren Sprache. */
.qlang{flex:none;min-height:32px;max-width:10em;padding:0 6px;
  background:rgba(255,255,255,.1);color:var(--paper);
  border:1px solid rgba(255,255,255,.28);border-radius:0;
  font-family:inherit;font-weight:600;font-size:.8rem}
.qlang option{color:var(--text);background:var(--card)}
.qlang:focus-visible{outline:2px solid var(--todo);outline-offset:1px}

.qbars{display:flex;gap:3px}
.qbars span{height:4px;flex:1;background:rgba(255,255,255,.2)}
.qbars .is-done{background:var(--accent)}
.qbars .is-part{background:rgba(15,90,99,.45)}
.qbars .is-now{background:var(--todo)}

/* ── Seitenkoerper ───────────────────────────────────────────────────── */
.qmain{max-width:720px;margin-inline:auto;
  padding:clamp(20px,4vw,34px) clamp(16px,4vw,28px) 110px}

.flag{display:inline-flex;align-items:center;gap:9px;background:var(--todo-bg);
  border-left:5px solid var(--todo);padding:9px 13px;
  margin:0 0 clamp(20px,4vw,30px);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--todo-text)}
.flag--done{background:var(--accent-bg);border-left-color:var(--accent);
  color:var(--accent-dark);margin-bottom:clamp(20px,4vw,28px)}

.qmain h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.04;margin:0 0 16px;
  max-width:none}
.qintro{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.55;font-weight:500;
  color:var(--text);margin:0 0 clamp(22px,4vw,30px)}

/* Drei Hinweiskarten im Haarlinienraster */
.hints{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-bottom:clamp(22px,4vw,30px)}
.hints>div{background:var(--card);padding:16px 18px}
.hints b{display:block;font-weight:700;font-size:1.05rem;color:var(--ink);
  margin-bottom:4px}
.hints span{display:block;font-size:.97rem;line-height:1.5;color:var(--muted)}

/* Freiwillige Angaben */
.meta{background:var(--card);border:1px solid var(--line);
  padding:clamp(18px,3vw,24px)}
.meta-h{font-weight:700;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.fields{display:grid;gap:14px}
.fields label{display:grid;gap:6px}
.fields span{font-weight:600;font-size:.95rem;color:var(--text)}
input[type=text],input[type=date],textarea{font-family:inherit;font-size:1rem;
  color:var(--text);background:var(--card);border:1px solid var(--line-strong);
  border-radius:0;width:100%}
input[type=text],input[type=date]{min-height:50px;padding:0 14px}
textarea{padding:12px 14px;line-height:1.5;resize:vertical;min-height:96px}

/* ── Abschnittskopf ──────────────────────────────────────────────────── */
.sect{margin-bottom:clamp(22px,4vw,32px);padding-bottom:18px;
  border-bottom:3px solid var(--ink)}
.sect-n{display:block;font-weight:800;font-size:.85rem;letter-spacing:.06em;
  color:var(--accent);margin-bottom:8px}
.sect h2{font-weight:800;font-size:clamp(1.6rem,4.6vw,2.3rem);line-height:1.06;
  letter-spacing:-.03em}

/* ── Frage ───────────────────────────────────────────────────────────────
   Der Fragecode sitzt als Kachel links. D16 und G31 tragen Bernstein -
   das sind die beiden Fragen, auf die es am meisten ankommt, und sie
   duerfen optisch herausfallen. */
.qs{display:grid;gap:clamp(18px,3vw,26px)}
.q{background:var(--card);border:1px solid var(--line);scroll-margin-top:96px}
.q-top{display:flex;gap:14px;
  padding:clamp(16px,2.5vw,20px) clamp(16px,2.5vw,20px) 0}
.q-code{width:40px;height:40px;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:.82rem;background:var(--paper);color:var(--ink)}
.q-code.is-key{background:var(--todo);color:var(--ink)}
.q-text{font-weight:700;font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.3;
  letter-spacing:-.015em;color:var(--ink);margin:0}
.q-hint{font-size:.92rem;line-height:1.45;color:var(--muted);margin:5px 0 0}
.q-body{padding:14px clamp(16px,2.5vw,20px) clamp(16px,2.5vw,20px)}

/* Antwortflaechen: die ganze Zeile ist die Trefferflaeche, nicht nur das
   Kaestchen. Der gewaehlte Zustand traegt Farbe UND Rahmen - bei Sonne
   und aus schraegem Winkel reicht Farbe allein nicht. */
.opts{display:grid;gap:7px}
.opt{position:relative;display:flex;align-items:center;gap:13px;width:100%;
  min-height:52px;padding:8px 14px;cursor:pointer;text-align:left;
  background:var(--card);border:1.5px solid var(--line)}
.opt:hover{border-color:var(--line-strong)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;
  pointer-events:none}
.opt-mark{width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line-strong);background:var(--card);color:#FFFFFF;
  font-weight:800;font-size:.75rem;line-height:1}
.opt--one .opt-mark{border-radius:50%}
.opt-label{font-weight:500;font-size:1rem;line-height:1.35;color:var(--text);
  text-wrap:pretty}
.opt.is-on{background:var(--accent-bg);border-color:var(--accent)}
.opt.is-on .opt-mark{background:var(--accent);border-color:var(--accent)}
.opt.is-on .opt-label{font-weight:700;color:var(--accent-dark)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.opt-detail{margin-top:6px;min-height:48px;border-color:var(--accent)}

.more-btn{margin-top:10px;min-height:44px;padding:0 14px;background:none;
  border:1px dashed var(--faint);cursor:pointer;font-family:inherit;
  font-weight:600;font-size:.92rem;color:var(--muted)}
.more-btn:hover{border-color:var(--muted);color:var(--text)}
.more-box{margin-top:10px}
.more-box[hidden]{display:none}

/* ── Abschluss ───────────────────────────────────────────────────────── */
.qmain h2.done-h{font-weight:800;font-size:clamp(1.8rem,5.4vw,2.8rem);
  line-height:1.04;margin:0 0 16px}
.done-lead{font-size:clamp(1.05rem,2vw,1.18rem);line-height:1.55;
  color:var(--text);margin:0 0 clamp(24px,4vw,32px)}

.sum{background:var(--card);border:1px solid var(--line);
  margin-bottom:clamp(20px,3vw,28px)}
.sum-h{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;
  flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px}
.sum-h b{font-weight:700;font-size:1.05rem;color:var(--ink)}
.sum-h span{font-weight:600;font-size:.88rem;color:var(--muted)}
.sum-row{padding:13px 18px;border-bottom:1px solid var(--card-alt);display:flex;
  flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.sum-row:last-child{border-bottom:0}
.sum-row span:first-child{font-weight:600;font-size:.97rem;color:var(--text)}
.sum-row span:last-child{font-weight:700;font-size:.9rem;color:var(--accent)}
.sum-row.is-part span:last-child{color:var(--todo-text)}
.sum-row.is-none span:last-child{color:var(--muted)}

/* Rueckmeldung zum Bogen selbst — bewusst ruhiger als die Fachfragen,
   damit sie sich nicht wie eine weitere Pflichtfrage anfuehlt. */
.rueck{margin:clamp(22px,4vw,32px) 0 0;padding:clamp(16px,3vw,22px);
  background:var(--card-alt);border:1px solid var(--line)}
.rueck-h{margin:0;font-size:1.12rem;font-weight:700;color:var(--ink)}
.rueck-lead{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--muted)}
.rueck-frage{margin:clamp(16px,3vw,22px) 0 0}
.rueck-x{margin:0 0 8px;font-size:.98rem;font-weight:600;color:var(--text)}
.rueck-skala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
/* Der Verlauf von Rot nach Gruen. Drei Toene je Stufe: ein kraeftiger fuer
   Schrift und Rahmen im gewaehlten Zustand, ein heller als Flaeche, ein
   blasser als Rahmen im Ruhezustand. Fest hinterlegt statt gerechnet -
   color-mix kennen aeltere iPhones nicht.
   Die Farbe ist Zugabe: die Aussage steht als Wort darunter. */
.rueck-opt.s1{--ton:#A32A20;--hell:#F8E9E7;--rand:#C9817B}
.rueck-opt.s2{--ton:#9B5410;--hell:#FAEEE2;--rand:#BB8B5C}
.rueck-opt.s3{--ton:#8A6212;--hell:#FBF3E0;--rand:#AD9159}
.rueck-opt.s4{--ton:#4C7A2E;--hell:#EDF4E7;--rand:#7C9E66}
.rueck-opt.s5{--ton:#276850;--hell:#E4F0EA;--rand:#739D8D}

.rueck-opt{display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:0;min-height:64px;padding:8px 2px;cursor:pointer;
  background:var(--card);border:1px solid var(--rand);
  font-family:inherit;color:var(--ton)}
.rueck-opt:hover{background:var(--hell);border-color:var(--ton)}
/* Das Gesicht ist eine gezeichnete Scheibe, kein Emoji: Systememoji sind
   immer gelb und koennten den Verlauf nicht mitgehen. Die Farbe kommt aus
   currentColor, also aus dem Ton der Stufe. */
.rueck-bild{display:block;width:26px;height:26px;flex:none}
.rueck-wort{font-size:.72rem;line-height:1.15;text-align:center;
  hyphens:auto;overflow-wrap:anywhere}
.rueck-opt.is-on{background:var(--hell);border-color:var(--ton);
  box-shadow:inset 0 0 0 1px var(--ton);color:var(--ton);font-weight:700}
.rueck-opt:focus-visible{outline:2px solid var(--ton);outline-offset:2px}
.rueck-text{width:100%;margin:clamp(16px,3vw,22px) 0 0;min-height:96px;padding:11px 13px;
  background:var(--card);border:1px solid var(--line-strong);
  font-family:inherit;font-size:1rem;line-height:1.5;color:var(--text);resize:vertical}
.rueck-text:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:359px){
  .rueck-skala{gap:4px}
  .rueck-opt{min-height:58px;padding:6px 1px}
  .rueck-bild{width:22px;height:22px}
  .rueck-wort{font-size:.66rem}
}

.done-acts{display:grid;gap:10px}
.act-pdf{min-height:56px;padding:0 22px;border:0;background:var(--accent);
  color:#FFFFFF;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:1.08rem}
.act-pdf:hover{background:var(--accent-dark)}
/* Das Netz darunter: sichtbar, aber deutlich zweite Wahl */
.act-save{min-height:48px;padding:0 22px;border:1px solid var(--line-strong);
  background:var(--card);color:var(--text);cursor:pointer;font-family:inherit;
  font-weight:600;font-size:.98rem}
.act-save:hover{background:var(--card-alt)}
.act-wa{display:flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 22px;border:1.5px solid var(--ink);color:var(--ink);
  font-weight:700;font-size:1rem}
.act-wa:hover{background:var(--ink);color:#FFFFFF}

.after{margin-top:clamp(22px,4vw,30px);padding:16px 18px;background:var(--todo-bg);
  border-left:5px solid var(--todo);font-size:.97rem;line-height:1.55;
  color:#6A4C0E}

/* ── Blaettern ───────────────────────────────────────────────────────── */
.nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,4vw,34px)}
.nav-back{min-height:54px;padding:0 20px;border:1.5px solid var(--line-strong);
  background:var(--card);cursor:pointer;font-family:inherit;font-weight:600;
  font-size:1rem;color:var(--text)}
.nav-next{flex:1;min-width:180px;min-height:54px;padding:0 22px;border:0;
  background:var(--accent);color:#FFFFFF;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:1.05rem}
.nav-next:hover{background:var(--accent-dark)}

.qfoot{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center;font-size:.88rem;color:var(--muted)}
.qfoot button{min-height:40px;padding:0 10px;background:none;border:0;
  cursor:pointer;font-family:inherit;font-weight:600;font-size:.88rem;
  color:var(--muted);text-decoration:underline}
.qfoot a{color:var(--muted);text-decoration:underline}

/* ── Druckansicht ────────────────────────────────────────────────────────
   Ziel ist ein PDF, das per WhatsApp verschickt wird: alle Abschnitte,
   nur die gewaehlten Antworten, keine Bedienelemente. */
@media print{
  .noprint{display:none!important}
  body{background:#FFFFFF;font-size:11pt}
  .qmain{max-width:none;padding:0}
  .print-only{display:block!important}
  .print-sec{break-inside:avoid;margin:0 0 14pt}
  .print-sec h2{font-size:13pt;margin:0 0 6pt;padding-bottom:3pt;
    border-bottom:1.5pt solid #17181A}
  .print-q{break-inside:avoid;margin:0 0 9pt}
  .print-q b{display:block;font-size:10.5pt;color:#000000}
  .print-q .pc{font-weight:800;color:#0F5A63}
  .print-q ul{margin:3pt 0 0;padding-left:14pt}
  .print-q li{font-size:10pt;line-height:1.35}
  .print-q .free{margin:3pt 0 0;font-size:10pt;font-style:italic;color:#333333}
  .print-none{font-size:10pt;color:#666666}
  .print-head{margin:0 0 16pt;padding-bottom:8pt;border-bottom:3pt solid #17181A}
  .print-head h1{font-size:18pt;margin:0 0 4pt}
  .print-head p{font-size:10pt;margin:0;color:#333333}
}
.print-only{display:none}

/* Wiedereinstieg — erklaert, warum man mitten im Bogen landet */
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:0 0 clamp(18px,3vw,26px);padding:12px 14px;background:var(--accent-bg);
  border-left:5px solid var(--accent)}
.resume p{margin:0;font-size:.92rem;line-height:1.45;color:var(--accent-dark);
  font-weight:600}
.resume-btn{min-height:44px;padding:0 14px;background:none;
  border:1.5px solid var(--accent);cursor:pointer;font-family:inherit;
  font-weight:700;font-size:.9rem;color:var(--accent-dark)}
.resume-btn:hover{background:var(--accent);color:#FFFFFF}

/* Saisondefinition im Einstieg */
.qintro--def{font-size:1rem;font-weight:500;color:var(--muted);
  padding-left:14px;border-left:3px solid var(--line-strong)}

/* Hinweis unter der Abschlussuebersicht */
.sum-note{font-size:.92rem;line-height:1.5;color:var(--muted);
  margin:0 0 clamp(20px,3vw,28px)}

/* Ein Knopf, zwei Schritte — dazu die ehrliche Erklaerung darunter */
.act-note{font-size:.9rem;line-height:1.5;color:var(--muted);margin:12px 0 0}
.act-hinweis{margin:14px 0 0;padding:13px 15px;background:var(--accent-bg);
  border-left:5px solid var(--accent);font-size:.93rem;line-height:1.5;
  color:var(--accent-dark)}
.act-hinweis a{color:var(--accent-dark);font-weight:700}
.act-hinweis[hidden]{display:none}
.act-pdf{width:100%}