/* Badsanierungs-Formular D-148, Typeform-Optik D-163 (03.11.2026).
   Vorbild Typeform YqhionNh: schwarz, gelbe Frage, roter Pillen-Knopf, Bild geteilt.
   Nur Tokens umstellen; formular.css und derigo-job.css bleiben unverändert. */

/* Dunkles Thema: die Bausatz-Tokens für diese Seite neu belegen (Kontraste auf #000 gemessen) */
.bs{
  --karte:#000; --flaeche:#141414; --tinte:#fff; --text:#e6e6e6; --text-2:#c4c4c4; --text-3:#9a9a9a;
  --linie:#3a3a3a; --linie-2:#1f1f1f;
  --marke-dunkel:var(--marke);                    /* Gelb als Text: 13,8:1 auf Schwarz */
  --marke-bg:rgba(252,204,18,.14);
  --rot:#ff6b5e;                                  /* Fehlertext 6,7:1 auf Schwarz */
  --schatten-1:0 0 0 1px rgba(252,204,18,.35);
  --bs-kopf:70px;
  background:#000;color:var(--text);
}
.bs-kopf{position:relative;z-index:4;height:var(--bs-kopf)}

/* Rahmen: Handy = Bildstreifen oben, Formular darunter. Desktop = Formular links, Bild rechts über die volle Höhe. */
.bs-rahmen{position:relative}
.bs-bildwand{position:relative;height:28vh;min-height:170px;max-height:260px;overflow:hidden;background:#111}
.bs-bildwand::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to bottom,transparent,#000);pointer-events:none}
.bs-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);
  transition:opacity 520ms var(--kurve),transform 1200ms var(--kurve)}
.bs-bild.ist-an{opacity:1;transform:none}
.bs-bild:not([src]){visibility:hidden}
/* Dankeseite: Maskottchen auf Derigo-Gelb, ganz zu sehen */
.bs-bildwand.bs-hell{background:var(--marke)}
.bs-bildwand.bs-hell::after{display:none}
.bs-bildwand.bs-hell .bs-bild.ist-an{object-fit:contain;padding:8%}

.bs-haupt{display:flex;flex-direction:column;min-height:calc(100dvh - var(--bs-kopf) - 28vh)}
.bs .mf{min-height:0;flex:1;background:transparent}
.bs .mf-fortschritt{position:fixed;top:0;left:0;right:0;z-index:5;height:4px;background:rgba(255,255,255,.12)}
.bs .mf-buehne{align-items:flex-start;padding:var(--abstand-4) var(--abstand-4) var(--abstand-6)}

/* Typografie wie im Typeform: Frage gelb in Oswald, Hilfe hellgrau */
.bs .mf-frage{font:700 var(--schrift-5)/1.2 var(--font-titel);text-transform:uppercase;letter-spacing:.2px;color:var(--marke)}
.bs .mf-frage .mf-pflicht{color:var(--marke)}
.bs .mf-nummer{color:var(--marke)}
.bs .mf-hilfe{color:var(--text-2)}
.bs .mf-hinweis-taste{color:var(--text-3)}

/* Auswahl-Kacheln auf Schwarz */
.bs .mf-option{background:#0d0d0d;color:#fff;border-color:var(--linie)}
.bs .mf-option:hover{border-color:var(--marke);background:#151515}
.bs .mf-option[aria-checked="true"]{border-color:var(--marke);background:var(--marke-bg)}
.bs .mf-taste{background:#000;color:var(--marke);border-color:rgba(252,204,18,.6)}
.bs .mf-option[aria-checked="true"] .mf-taste{background:var(--marke);border-color:var(--marke);color:#000}
.bs .mf-teil-frage{color:#fff}
#formular .mf-option-text{hyphens:manual}

/* Felder: Unterstreichung hell, Fokus gelb */
.bs .mf-feld input,.bs .mf-feld textarea{color:#fff;border-bottom-color:#5a5a5a}
.bs .mf-feld input:focus,.bs .mf-feld textarea:focus{border-bottom-color:var(--marke)}
.bs .mf-feld label{color:var(--text-2)}
.bs .mf-feld input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #000 inset;caret-color:#fff}
.bs .mf-einwilligung{border-color:var(--linie);background:#0d0d0d}
.bs .mf-ablage{border-color:#4a4a4a;color:var(--text-2);background:#0a0a0a}
.bs .mf-ablage:hover,.bs .mf-ablage.mf-ziehen{border-color:var(--marke);background:var(--marke-bg)}
.bs .mf-kamera{color:var(--marke)}
.bs .mf-bild{background:#141414;border-color:var(--linie);color:var(--text-2)}

/* Fußleiste: schwarz, roter Pillen-Knopf wie im Typeform */
.bs .mf-fuss{position:sticky;bottom:0;background:rgba(0,0,0,.88);border-top:1px solid #1f1f1f;backdrop-filter:blur(8px)}
.bs .mf-weiter{border-radius:var(--radius-pill);padding:0 var(--abstand-6);background:var(--knopf-primaer);color:#fff;white-space:nowrap}
.bs .mf-weiter:hover{background:var(--knopf-primaer-hover)}
.bs .mf-zurueck{color:var(--text-2);white-space:nowrap}
.bs .mf-zurueck:hover{color:#fff;background:#151515}
.bs :focus-visible{outline-color:var(--marke)}

/* Ende */
.bs .mf-ende{text-align:left}
.bs .mf-ende .mf-kreis{margin:0 0 var(--abstand-4);background:var(--marke);color:#000}
.bs-start{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--abstand-6);margin-top:var(--abstand-4);
  border-radius:var(--radius-pill);background:var(--knopf-primaer);color:#fff;font:600 16px/1 var(--font);text-decoration:none}
.bs-start:hover{background:var(--knopf-primaer-hover)}

.bs-recht{padding:var(--abstand-4);font-size:12px;color:var(--text-3);text-align:center}
.bs-recht a{color:var(--text-2)}

/* Lange Auswahltexte am Handy einspaltig */
@media (max-width:560px){
  #formular .mf-gruppe .mf-optionen{grid-template-columns:1fr}
}

/* Desktop: geteilt wie Typeform „split“, Bild steht still, nur das Formular scrollt */
@media (min-width:900px){
  .bs{--bs-kopf:70px}
  .bs-rahmen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100dvh - var(--bs-kopf))}
  .bs-bildwand{order:2;height:auto;max-height:none;min-height:0}
  .bs-bildwand::after{inset:0 auto 0 0;width:22%;height:auto;background:linear-gradient(to right,#000,transparent)}
  .bs-haupt{order:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .bs .mf{--mf-breite:600px}
  .bs .mf-buehne{align-items:center;padding:var(--abstand-6) var(--abstand-6)}
  .bs .mf-fuss{background:#000}
}
/* Schrift groß wie im Typeform (r2, Wolfgang 03.11. „texte sind zu klein“). Öffentliche Seite: eigene, größere Stufen
   statt der App-Skala. Handy zuerst, ab 900 px größer. Felder ≥ 16 px, sonst zoomt das iPhone. */
.bs{--bs-frage:28px;--bs-hilfe:18px;--bs-antwort:18px;--bs-feld:22px;--bs-knopf:18px}
@media (min-width:900px){.bs{--bs-frage:40px;--bs-hilfe:20px;--bs-antwort:19px;--bs-feld:24px}}
.bs .mf-frage{font-size:var(--bs-frage);line-height:1.15;margin-bottom:var(--abstand-3)}
.bs .mf-nummer{font-size:16px;margin-bottom:var(--abstand-3)}
.bs .mf-hilfe{font-size:var(--bs-hilfe);line-height:1.45;margin-bottom:var(--abstand-5)}
.bs .mf-option{font-size:var(--bs-antwort);min-height:60px;padding:var(--abstand-3) var(--abstand-4);gap:var(--abstand-3)}
.bs .mf-taste{width:30px;height:30px;font-size:14px}
.bs .mf-teil-frage{font-size:var(--bs-antwort)}
.bs .mf-teil-hilfe{font-size:16px}
.bs .mf-teil .mf-option{min-height:56px}
.bs .mf-teil .mf-optionen{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}   /* größere Schrift: zwei statt drei Spalten, „Komplettsanierung“ passt */
.bs .mf-feld label{font-size:16px}
.bs .mf-feld input,.bs .mf-feld textarea{font-size:var(--bs-feld)}
.bs .mf-einwilligung{font-size:17px}
.bs .mf-ablage{font-size:17px}
.bs .mf-fehler{font-size:16px}
.bs .mf-weiter{font-size:var(--bs-knopf);min-height:52px}
.bs .mf-zurueck{font-size:17px;min-height:52px}
.bs .mf-ende .mf-hilfe{font-size:var(--bs-hilfe)}
.bs-start{font-size:var(--bs-knopf);min-height:52px}
@media (prefers-reduced-motion:reduce){.bs-bild{transition:none;transform:none}}