/* formular.css – Ausfüllseite (Briefkasten) und „Gespräch fortführen“ (Büro) im Familien-Design.
   Ersetzt engine.css + toolbox.css. Wird NACH loewe-ui.css geladen und nutzt nur deren Tokens.
   Vorbild: Meldeseite der Inventar-App (Vorlage „Ausfüllen“): Glasleiste oben, Karte, Kacheln, Kapselknöpfe.
   Klassen kommen aus engine.js (tf-*). Keine Inline-Stile (CSP style-src 'self'). */

/* ── Gerüst: feste Leiste, darunter ein eigener Scrollbereich (kein Gummiband der ganzen Seite) ── */
html,body{height:100%}
body.formular{overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}

#tfHeader{position:fixed;z-index:20;top:calc(10px + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
  right:max(14px,env(safe-area-inset-right));max-width:760px;margin:0 auto;min-height:56px;
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 8px;border-radius:999px;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:0 0 0 .5px var(--g-kante),inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(24,34,68,.06),0 10px 24px rgba(24,34,68,.08)}
#tfLogo{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
#tfLogo img{width:36px;height:36px;flex-shrink:0;padding:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px var(--g-kante),0 2px 6px rgba(24,34,68,.10)}
#tfLogo .marke-text,#tfLogo #person{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Schmal: sobald Fortschritt und „Verwerfen“ in der Leiste stehen, trägt das Logo allein die Marke */
@media (max-width:480px){#tfHeader:has(#stepCount:not(:empty)) .marke-text{display:none}#tfLogo #person{display:none}}
#stepCount{margin-left:auto;padding:0 6px;font-size:14px;line-height:18px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
#stepCount:empty{display:none}
.tf-verwerfen{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  background:var(--g-knopf);color:var(--ink2);font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 .5px var(--g-kante),inset 0 1px 0 rgba(255,255,255,.95);transition:background-color .2s var(--aus),color .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.tf-verwerfen:hover{background:rgba(255,255,255,.95);color:var(--ink)}}
.tf-verwerfen:active{transform:scale(.97)}
@media (pointer:coarse){.tf-verwerfen{min-height:44px}}

/* Fortschritt: schmale Spur direkt unter der Leiste */
#progressTrack{position:fixed;z-index:19;top:calc(76px + env(safe-area-inset-top));left:max(38px,calc(env(safe-area-inset-left) + 24px));
  right:max(38px,calc(env(safe-area-inset-right) + 24px));max-width:712px;margin:0 auto;height:4px;border-radius:999px;background:rgba(24,34,68,.08);overflow:hidden}
body.tf-ohne-fortschritt #progressTrack{display:none}
#progressBar{width:0;height:100%;border-radius:999px;background:var(--akzent);transition:width .35s var(--aus)}

#tfMain{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(104px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#tfContent{width:100%;max-width:680px;margin:0 auto}

/* ── Fragekarte ── */
.tf-question,.tf-complete{position:relative;background:var(--g-karte);border-radius:26px;padding:32px;
  box-shadow:0 0 0 .5px var(--g-kante),var(--g-schatten-2);animation:tf-rein .24s var(--aus) both}
.tf-question::before,.tf-complete::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tf-question.exiting{animation:tf-raus .16s ease-in both;pointer-events:none}
@keyframes tf-rein{from{opacity:0;transform:translateY(10px)}}
@keyframes tf-raus{to{opacity:0;transform:translateY(-6px)}}
@media (max-width:640px){.tf-question,.tf-complete{border-radius:22px;padding:24px 20px}}

.tf-q-abschnitt{margin-bottom:10px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.tf-q-num{margin-bottom:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--akzent);font-variant-numeric:tabular-nums}
.tf-q-label{margin:0;font-size:27px;line-height:33px;font-weight:700;letter-spacing:-.022em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.tf-q-label:focus{outline:none}
.tf-q-label .required{margin-left:3px;color:var(--akzent);font-weight:600}
.tf-optional{margin-left:8px;display:inline-block;vertical-align:middle;padding:3px 10px;border-radius:999px;background:rgba(24,34,68,.07);
  color:var(--ink2);font-size:13px;line-height:18px;font-weight:600;letter-spacing:0}
.tf-q-hint{margin-top:8px;font-size:16px;line-height:23px;color:var(--ink2);text-wrap:pretty}
.tf-question>div:not([class]),.tf-question>.tf-choices,.tf-question>.tf-input,.tf-question>.tf-date,.tf-question>.tf-zeitraum,
.tf-question>.tf-matrix,.tf-question>.tf-intro,.tf-question>.tf-uebersicht-list{margin-top:22px}
@media (max-width:640px){.tf-q-label{font-size:23px;line-height:29px}.tf-q-hint{font-size:15.5px;line-height:22px}}

/* Begrüßung */
.tf-intro{margin-top:14px;font-size:17px;line-height:26px;color:var(--ink2)}
.tf-intro-punkte{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tf-intro-punkte li{position:relative;padding-left:28px;font-size:16px;line-height:22px;color:var(--ink)}
.tf-intro-punkte li::before{content:'';position:absolute;left:6px;top:7px;width:8px;height:8px;border-radius:999px;
  background:var(--akzent);box-shadow:0 0 0 4px rgba(38,96,201,.14)}

/* ── Eingaben ── */
.tf-input,.tf-textarea,.tf-date-part{width:100%;height:52px;padding:0 16px;border:1px solid rgba(24,34,68,.5);border-radius:13px;
  background:var(--g-feld);color:var(--ink);font-family:inherit;font-size:17px;box-shadow:inset 0 1px 2px rgba(24,34,68,.06);
  transition:background-color .2s var(--aus),border-color .2s var(--aus),box-shadow .2s var(--aus)}
.tf-textarea{display:block;height:auto;min-height:140px;padding:14px 16px;line-height:24px;resize:vertical}
.tf-input:focus,.tf-textarea:focus,.tf-date-part:focus{outline:none;background:#fff;border-color:var(--akzent);box-shadow:0 0 0 4px rgba(38,96,201,.22)}
.tf-input::placeholder,.tf-textarea::placeholder,.tf-date-part::placeholder{color:#6B7385}
.tf-date{display:flex;gap:10px}
.tf-date-part{width:76px;text-align:center;font-variant-numeric:tabular-nums;padding:0 8px}
.tf-date-part:last-child{width:100px}
.tf-zeitraum{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
.tf-zeitraum-gruppe{display:flex;flex-direction:column;gap:7px}
.tf-zeitraum-label{font-size:15px;line-height:20px;font-weight:600;color:var(--ink2)}
.tf-zeitraum-strich{padding-bottom:14px;color:var(--ink3)}

/* Auswahl als Kacheln */
.tf-choices{display:flex;flex-direction:column;gap:10px}
.tf-choice{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--ink);font-size:17px;line-height:22px;font-weight:500;
  box-shadow:0 0 0 1px rgba(24,34,68,.14),0 1px 2px rgba(24,34,68,.04);-webkit-user-select:none;user-select:none;
  transition:background-color .2s var(--aus),box-shadow .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.tf-choice:hover{background:#fff;box-shadow:0 0 0 1px rgba(24,34,68,.24),0 2px 6px rgba(24,34,68,.06)}}
.tf-choice:active{transform:scale(.985)}
.tf-choice.selected{background:rgba(38,96,201,.07);box-shadow:0 0 0 2px var(--akzent),0 2px 8px rgba(38,96,201,.12)}
.tf-choice-key{flex-shrink:0;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(24,34,68,.22);color:var(--ink3);font-size:13px;font-weight:600;transition:background-color .2s var(--aus),color .2s var(--aus)}
.tf-choice.selected .tf-choice-key{background:var(--akzent);color:#fff;box-shadow:none}
.tf-choices[role=group] .tf-choice{padding-left:52px}
.tf-choices[role=group] .tf-choice::before{content:'';position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:7px;
  box-shadow:inset 0 0 0 1.5px rgba(24,34,68,.56);background:#fff;transition:background-color .2s var(--aus),box-shadow .2s var(--aus)}
.tf-choices[role=group] .tf-choice.selected::before{background:var(--akzent);box-shadow:none}
.tf-choices[role=group] .tf-choice.selected::after{content:'';position:absolute;left:23px;top:50%;width:6px;height:11px;margin-top:-7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tf-choices[role=group] .tf-choice-sonstige{padding-left:16px;cursor:text}
.tf-choices[role=group] .tf-choice-sonstige::before,.tf-choices[role=group] .tf-choice-sonstige::after{display:none}
.tf-choice-frei{cursor:text}
.tf-choice-frei-input{flex:1 1 auto;min-width:0;height:30px;border:0;outline:0;background:transparent;color:var(--ink);font-family:inherit;font-size:17px}
.tf-choice-frei-input::placeholder{color:#6B7385}
.tf-choice-einheit{color:var(--ink3);font-size:15px}
.tf-choice-frei.selected .tf-choice-einheit{color:var(--akzent)}
.tf-choice:focus-visible,.tf-matrix-zelle:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Ja / Nein */
.tf-yesno{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.tf-yesno-btn{min-height:56px;border:0;border-radius:20px;background:rgba(255,255,255,.72);color:var(--ink);font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;
  box-shadow:0 0 0 1px rgba(24,34,68,.14);transition:background-color .2s var(--aus),box-shadow .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.tf-yesno-btn:hover{background:#fff}}
.tf-yesno-btn:active{transform:scale(.97)}
.tf-yesno-btn.selected{background:rgba(38,96,201,.07);color:var(--akzent);box-shadow:0 0 0 2px var(--akzent)}
.tf-jn-freitext{margin-top:14px}

/* Bewertungsmatrix: Tabelle ab 600 px, darunter je Zeile ein Block mit beschrifteten Punkten */
.tf-matrix{width:100%;border-collapse:collapse;table-layout:fixed}
.tf-matrix th{padding:8px 4px;font-size:12px;line-height:15px;font-weight:600;letter-spacing:.3px;color:var(--ink3);text-align:center;vertical-align:bottom;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.tf-matrix th:first-child{width:44%;text-align:left}
.tf-matrix td{padding:12px 4px;border-top:1px solid var(--linie);font-size:15px;line-height:21px;color:var(--ink)}
.tf-matrix td:first-child{padding-right:12px}
.tf-matrix td.tf-matrix-zelle{text-align:center;cursor:pointer}
.tf-matrix-punkt{display:inline-block;width:26px;height:26px;border-radius:999px;vertical-align:middle;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(24,34,68,.56);transition:box-shadow .2s var(--aus),background-color .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.tf-matrix td.tf-matrix-zelle:hover .tf-matrix-punkt{box-shadow:inset 0 0 0 1.5px var(--akzent)}}
.tf-matrix td.tf-matrix-zelle:active .tf-matrix-punkt{transform:scale(.9)}
.tf-matrix td.tf-matrix-zelle.selected .tf-matrix-punkt{background:var(--akzent);box-shadow:inset 0 0 0 5px #fff,0 0 0 1.5px var(--akzent)}
.tf-matrix tr.zeile-fehlt td:first-child{color:var(--fehler);font-weight:600}
@media (max-width:599px){
  .tf-matrix,.tf-matrix tbody{display:block}
  .tf-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tf-matrix tr{display:grid;grid-template-columns:repeat(var(--spalten,5),1fr);gap:4px 2px;padding:14px 0;border-top:1px solid var(--linie)}
  .tf-matrix td{border:0;padding:0}
  .tf-matrix td:first-child{grid-column:1/-1;padding:0 0 6px;font-weight:600}
  .tf-matrix td.tf-matrix-zelle{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0;border-radius:12px}
  .tf-matrix td.tf-matrix-zelle::after{content:attr(aria-label);font-size:12px;line-height:15px;color:var(--ink3);text-align:center;
    -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .tf-matrix td.tf-matrix-zelle.selected::after{color:var(--akzent);font-weight:600}
}

/* Unterschrift */
.tf-signature-wrap{border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(24,34,68,.18),0 1px 2px rgba(24,34,68,.05);overflow:hidden}
/* Höhe folgt dem Seitenverhältnis der Zeichenfläche (560:180 wie im PDF) – nie fest, sonst verzerrt (Audit D1) */
.tf-signature-canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;
  background:linear-gradient(transparent 74%,rgba(24,34,68,.18) 74%,rgba(24,34,68,.18) calc(74% + 1px),transparent calc(74% + 1px))}
@media (max-width:640px) and (orientation:portrait){.tf-signature-hint::after{content:' · quer halten für mehr Platz'}}
.tf-signature-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-top:1px solid var(--linie);background:rgba(38,60,120,.03)}
.tf-signature-hint{font-size:14px;line-height:20px;color:var(--ink3)}
.tf-signature-clear{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--g-knopf);color:var(--ink2);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 0 0 .5px var(--g-kante),inset 0 1px 0 rgba(255,255,255,.95)}
.tf-signature-clear:active{transform:scale(.97)}
@media (pointer:coarse){.tf-signature-clear{min-height:44px}}

/* Bestätigung (Vertraulichkeit, Übergabe an die Gesprächsführung) */
.tf-bestaetigung-text{margin-bottom:16px;padding:16px 18px;border-radius:16px;background:rgba(38,60,120,.045);
  box-shadow:inset 0 0 0 1px rgba(24,34,68,.07);font-size:15px;line-height:23px;color:var(--ink2);white-space:pre-line}
.tf-check-label{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;font-size:16px;line-height:23px;color:var(--ink);cursor:pointer}
.tf-check-label input[type=checkbox]{flex-shrink:0;width:24px;height:24px;margin:0;accent-color:var(--akzent);cursor:pointer}
.tf-hinweis-box{margin-top:18px;padding:14px 18px;border-radius:16px;background:rgba(238,244,253,.92);color:#1F55B5;font-size:15px;line-height:22px}

/* Fehler am Feld (Feld selbst rot umrandet, Audit D6) */
.tf-input[aria-invalid=true],.tf-textarea[aria-invalid=true],.tf-date-part[aria-invalid=true]{border-color:var(--fehler);box-shadow:0 0 0 4px rgba(194,69,46,.16)}
.tf-choices[aria-invalid=true] .tf-choice,.tf-yesno[aria-invalid=true] .tf-yesno-btn{box-shadow:0 0 0 1.5px var(--fehler)}
.tf-signature-wrap[aria-invalid=true]{box-shadow:0 0 0 2px var(--fehler)}
/* Zeichenzähler (Felder mit kleinerem Platz im PDF) */
.tf-zaehler{margin-top:6px;font-size:13px;line-height:18px;color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.tf-zaehler.knapp{color:var(--warn,#8A5300);font-weight:600}
.tf-error{margin-top:14px;align-items:flex-start;gap:8px;padding:11px 14px;border-radius:14px;background:rgba(253,240,237,.94);
  color:var(--fehler);font-size:15px;line-height:21px;font-weight:500}

/* ── Knöpfe ── */
.tf-actions,.tf-resume-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.tf-btn-next,.tf-btn-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border:0;border-radius:999px;
  font-family:inherit;font-size:17px;line-height:22px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--aus),box-shadow .2s var(--aus),transform .14s var(--aus)}
.tf-btn-next{background:linear-gradient(180deg,#3B78DE,#2660C9);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(10,30,80,.18),0 0 0 .5px rgba(10,30,80,.25),0 2px 6px rgba(24,34,68,.14),0 8px 20px rgba(24,34,68,.12)}
@media (hover:hover) and (pointer:fine){.tf-btn-next:hover:not(:disabled){background:linear-gradient(180deg,#4884E4,#2C68D2);color:#fff}}
.tf-btn-back{background:var(--g-knopf);color:var(--ink);box-shadow:0 0 0 .5px var(--g-kante),inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(24,34,68,.06)}
@media (hover:hover) and (pointer:fine){.tf-btn-back:hover{background:rgba(255,255,255,.95)}}
.tf-btn-next:active:not(:disabled),.tf-btn-back:active{transform:scale(.97)}
.tf-btn-next:disabled{opacity:.6;cursor:default}
.tf-hint-enter{font-size:13px;line-height:18px;color:var(--ink3)}
@media (pointer:coarse){.tf-hint-enter{display:none}.tf-btn-next,.tf-btn-back{min-height:54px}}
@media (max-width:640px){.tf-actions .tf-btn-next{flex:1 1 auto}.tf-btn-back{padding:0 20px}}

/* ── Übersicht vor dem Absenden ── */
.tf-uebersicht-title{font-size:27px;line-height:33px;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.tf-uebersicht-sub{margin-top:8px;font-size:16px;line-height:23px;color:var(--ink2)}
.tf-uebersicht-list{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--linie)}
.tf-uebersicht-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;align-items:center;gap:6px 16px;padding:12px 0;border-bottom:1px solid var(--linie)}
.tf-uebersicht-label{font-size:14px;line-height:20px;color:var(--ink3)}
.tf-uebersicht-wert{font-size:15px;line-height:21px;font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.tf-uebersicht-wert.leer{color:var(--ink3);font-weight:400}
.tf-uebersicht-edit{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--akzent);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.tf-uebersicht-edit:hover{background:rgba(38,96,201,.08)}}
.tf-uebersicht-edit:active{transform:scale(.96);background:rgba(38,96,201,.12)}
@media (pointer:coarse){.tf-uebersicht-edit{min-height:44px}}
@media (max-width:640px){
  .tf-uebersicht-title{font-size:23px;line-height:29px}
  .tf-uebersicht-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label edit" "wert edit";gap:2px 10px}
  .tf-uebersicht-label{grid-area:label}.tf-uebersicht-wert{grid-area:wert}.tf-uebersicht-edit{grid-area:edit}
}

/* ── Fertig ── */
.tf-complete{text-align:center;padding:44px 32px 40px}
.tf-complete-icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 18px;border-radius:999px;
  background:rgba(35,122,75,.13);color:#1E6B41;font-size:0}
.tf-complete-icon::before{content:'';flex-shrink:0;width:24px;height:13px;margin-top:-5px;border:solid #1E6B41;border-width:0 0 3.5px 3.5px;transform:rotate(-45deg)}
.tf-complete-title{font-size:27px;line-height:33px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.tf-complete-desc{max-width:440px;margin:10px auto 0;font-size:16.5px;line-height:24px;color:var(--ink2);text-wrap:pretty}
.tf-complete .tf-btn-next{margin-top:26px}
@media (max-width:640px){.tf-complete{padding:36px 20px 30px}.tf-complete-title{font-size:23px;line-height:29px}}

/* Angefangenes Formular */
.tf-resume-box{margin-top:16px}
.tf-resume-box p{font-size:16px;line-height:24px;color:var(--ink2)}

/* Meldeseiten (Link abgelaufen, unvollständig, schon abgeschickt …): Pille, Titel, Text (Audit D12) */
.tf-fehlerseite .lf-pille{margin-bottom:14px}
.tf-fehlerseite .tf-q-label{font-size:22px;line-height:28px}
.tf-fehlerseite-text{margin:10px 0 0;font-size:16.5px;line-height:24px;color:var(--ink2);text-wrap:pretty}
/* Kontakt der Verwaltung (nur wenn in den Einstellungen eingetragen) */
.tf-kontakt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linie)}
.tf-kontakt-titel{font-size:15px;line-height:21px;color:var(--ink3)}
.tf-kontakt-link{display:inline-flex;align-items:center;min-height:44px;font-size:17px;line-height:22px;font-weight:600;color:var(--akzent);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.tf-kontakt-link:hover{text-decoration:underline}}

/* ── Fallbacks ── */
@media (prefers-reduced-motion:reduce){
  .tf-question,.tf-complete{animation:tf-blende .15s ease both}
  .tf-question.exiting{animation:tf-blende-raus .12s ease both}
  .tf-choice:active,.tf-btn-next:active,.tf-btn-back:active{transform:none}
}
@keyframes tf-blende{from{opacity:0}}
@keyframes tf-blende-raus{to{opacity:0}}
@media (prefers-reduced-transparency:reduce){#tfHeader{background:#F3F5F9}.tf-question,.tf-complete{background:#fff}}
@media (prefers-contrast:more){
  #tfHeader,.tf-question,.tf-complete{box-shadow:0 0 0 1px #6B7489}
  .tf-question::before,.tf-complete::before{display:none}
  .tf-choice,.tf-yesno-btn{box-shadow:0 0 0 1px #6B7489}
  .tf-choice.selected,.tf-yesno-btn.selected{box-shadow:0 0 0 3px var(--akzent)}
  .tf-matrix-punkt,.tf-choices[role=group] .tf-choice::before{box-shadow:inset 0 0 0 2px var(--ink2)}
}