/* Bedarfs-Check. Kein Handoff vorhanden (Johannes, 2026-10-05): nur aus Bausteinen des Design Systems v1.0 zusammengesetzt.
   Glas für den Dialog-Hintergrund, Haarlinien, Buttons und Felder aus code/components.css, Auswahl wie im Terminwidget der Beispielseite. */

/* Einstieg in der Kontaktfläche (Signal-Theme: Akzent wird Ink) */
.contact-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-mail { font: 400 .875rem/1.5 var(--font-mono); }
.contact-mail a { text-decoration-color: var(--ink-800); text-decoration-thickness: 1px; }

/* Buttons (fb-btn) */
.fb-btn { display: inline-flex; align-items: center; gap: .75rem; height: 52px; padding: 0 1.375rem; border: 1px solid transparent; border-radius: 0; font: 500 .875rem/1 var(--font-mono); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background-color .24s var(--ease-out), color .24s, border-color .24s; }
.fb-btn svg { display: block; flex: none; transition: transform .24s var(--ease-pop); }
.fb-btn--primary { background: var(--signal); color: var(--ink-800); }
.fb-btn--lg { height: 64px; padding: 0 1.75rem; font-size: 1rem; }
.fb-btn--ghost { height: 44px; padding: 0; background: none; color: var(--paper-100); }
.fb-btn--ghost span { padding-bottom: 4px; border-bottom: 1px solid var(--signal); }
.fb-btn:disabled { opacity: .4; pointer-events: none; }
.contact .fb-btn--primary { background: var(--ink-800); color: var(--signal); }

/* Dialog: mobil Vollbild, ab 820 als Fläche mit Haarlinie und Overlay-Schatten */
.fb-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--ink-800); color: var(--paper-100); overscroll-behavior: contain; }
.fb-dialog[open] { display: flex; flex-direction: column; }
.fb-dialog::backdrop { background: rgba(35,31,32,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (min-width: 820px) {
  .fb-dialog { width: min(720px, calc(100% - 48px)); height: min(840px, calc(100% - 48px)); margin: auto; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
}

.fb-dlg-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 8px 0 var(--margin); border-bottom: 1px solid var(--line); }
.fb-dlg-top .label { color: var(--stone-300); }
.fb-dlg-top .label b { font-weight: 500; color: var(--signal); }
.fb-icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--line-strong); background: none; color: var(--paper-100); cursor: pointer; }
.fb-steps { flex: none; display: flex; gap: 4px; padding: 0 var(--margin); }
.fb-steps span { flex: 1; height: 2px; background: var(--line-strong); transition: background-color .24s; }
.fb-steps span.is-done { background: var(--signal); }

.fb-dlg-body { flex: 1; overflow-y: auto; padding: 32px var(--margin) 40px; }
.fb-dlg-body > * + * { margin-top: 16px; }
.fb-intro { color: var(--stone-300); font-size: .9375rem; max-width: 36rem; }
.fb-q { font: 500 clamp(1.375rem, 4.6vw, 2rem)/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; outline: none; }
.fb-hint { font: 400 .75rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--stone-400); }
/* Überschriften bekommen den Fokus nur für Screenreader, ohne sichtbaren Rahmen */
.fb-q:focus-visible, .fb-result-title:focus-visible { outline: none; }

/* Antworten als Zeilen mit Haarlinien; gewählt = Signal-Fläche, Text Ink */
.fb-opts { margin-top: 24px !important; border-top: 1px solid var(--line); }
.fb-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--paper-100); font: 400 1rem/1.35 var(--font-body); text-align: left; cursor: pointer; transition: background-color .24s, color .24s; }
.fb-opt[aria-pressed="true"] { background: var(--signal); color: var(--ink-800); }
.fb-opt__box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: transparent; }
.fb-opt--single .fb-opt__box { border-radius: 999px; }
.fb-opt[aria-pressed="true"] .fb-opt__box { border-color: var(--ink-800); background: var(--ink-800); color: var(--signal); }

/* Eigene Antwort unter den Optionen */
.fb-dlg-body > .fb-free { margin-top: 20px; }

/* Kurze Zusammenfassung über den Kontaktfeldern, erscheint erst, wenn sie da ist */
.fb-zf:empty { display: none; }
.fb-zf .fb-points { margin-top: 12px; }
.fb-zf:not(:empty) + .fb-q { margin-top: 40px; }

/* Warten: der Punkt als Status */
.fb-wait { display: flex; align-items: center; gap: 12px; min-height: 56px; font: 500 .75rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--stone-300); }

/* Auswertung: Punkte als Aufzählung */
.fb-result-title { font: 800 clamp(1.625rem, 5.4vw, 2.5rem)/1.08 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; outline: none; }
.fb-points { list-style: none; padding: 0; margin-top: 24px !important; border-top: 1px solid var(--line); }
.fb-points li { display: grid; grid-template-columns: 7px 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fb-points li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--signal); transform: translateY(-2px); }
.fb-next { color: var(--stone-300); max-width: 36rem; }

/* Kontakt: Felder aus dem Design System, Inputs 16 px gegen iOS-Zoom */
.fb-form { display: grid; gap: 20px; margin-top: 24px !important; }
@media (min-width: 600px) { .fb-form { grid-template-columns: 1fr 1fr; } .fb-form .fb-field--wide { grid-column: 1 / -1; } }
.fb-field { display: grid; gap: 8px; align-content: start; }
.fb-field__label { font: 500 .75rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--stone-300); }
.fb-input { width: 100%; height: 52px; padding: 0 1rem; background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: 0; color: var(--paper-100); font: 400 1rem var(--font-body); transition: border-color .12s; }
.fb-input::placeholder { color: var(--stone-400); }
.fb-input:focus { outline: none; border-color: var(--signal); box-shadow: inset 0 -2px 0 var(--signal); }
.fb-input[aria-invalid="true"] { border-color: #F0506E; }
.fb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-tag { height: 44px; padding: 0 1rem; border: 1px solid var(--line-strong); background: none; color: var(--paper-100); font: 500 .8125rem/1 var(--font-mono); letter-spacing: .04em; cursor: pointer; }
.fb-tag[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink-800); }
.fb-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .9375rem; color: var(--stone-300); }
.fb-check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--line-strong); background: var(--ink-900); border-radius: 0; cursor: pointer; }
.fb-check input:checked { background: var(--signal) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23231F20%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22square%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / 16px no-repeat; border-color: var(--signal); }
.fb-check a { color: var(--paper-100); }
.fb-error { font-size: .875rem; color: #F0506E; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Fertig: Kreis in Signal mit Haken in Ink */
.fb-done { width: 44px; height: 44px; border-radius: 999px; background: var(--signal); color: var(--ink-800); display: grid; place-items: center; }

.fb-dlg-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--margin) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.fb-dlg-foot .fb-btn--primary { margin-left: auto; }

/* Hover nur mit Maus oder Trackpad (Design System: Hover nur bei hover: hover), sonst bleibt er auf dem Handy nach dem Antippen hängen */
@media (hover: hover) {
  .contact-mail a:hover { text-decoration-thickness: 3px; }
  .fb-btn:hover svg { transform: translateX(4px); }
  .fb-btn--primary:hover, .contact .fb-btn--primary:hover { background: var(--paper-100); color: var(--ink-800); }
  .fb-icon-btn:hover { border-color: var(--paper-100); }
  .fb-opt:hover { background: rgba(207,202,192,.05); }
  .fb-opt[aria-pressed="true"]:hover { background: var(--signal); }
  .fb-input:hover:not(:focus):not([aria-invalid="true"]) { border-color: var(--stone-300); }
}

@media (prefers-reduced-motion: reduce) {
  .fb-btn svg, .fb-opt, .fb-steps span { transition: none; }
}