.start-band{position:relative;overflow:hidden;background:var(--schiefer);color:var(--weiss);isolation:isolate}
.start-film{position:absolute;inset:0;z-index:-2}
.start-film img,.start-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.start-film img{filter:blur(2px);transform:scale(1.02)}
.start-film video{opacity:0;transition:opacity 703ms cubic-bezier(.2,.7,.2,1)}
.start-film video.laeuft{opacity:.91}
.start-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(55,55,51,.92) 0%,rgba(55,55,51,.82) 42%,rgba(55,55,51,.18) 68%),radial-gradient(120% 90% at 70% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)}
.start-inhalt{padding:30px 0 32px;max-width:600px}
.start-band h1{color:var(--weiss);font-size:clamp(1.6rem,2.7vw,2.15rem);font-weight:700;letter-spacing:-.035em;margin-bottom:.45em}
.start-band .unterzeile{color:#F2F1EC;margin-bottom:20px;font-size:1.15rem}
.start-band .unterzeile a{color:var(--weiss);text-decoration-color:var(--sonne)}

.schrittwerk{background:var(--weiss);color:var(--tinte);border-radius:6px;padding:28px 30px 30px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.seiten-werkzeug .schrittwerk{box-shadow:none;border:1px solid var(--linie);max-width:var(--lesebreite)}
.schritt-zaehler{display:block;font-size:.95rem;color:var(--leise);margin:0 0 6px}
.schritt[hidden],.ergebnis[hidden]{display:none}
.ergebnis{font-size:1.35rem}
.schritt-frage{display:block;font-family:var(--titel);font-size:1.22rem;letter-spacing:-.025em;line-height:1.3;color:var(--schiefer);margin:0 0 6px;font-weight:400}
.schritt-hilfe{font-size:1rem;color:var(--leise);margin:0 0 16px;line-height:1.5}
.schritt-feld{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.schritt-feld>.antworten{width:100%}
.ergebnis-werte caption{text-align:left;margin:0 0 4px}
.eingabe{min-height:52px;padding:10px 14px;font:inherit;font-size:1.15rem;color:var(--tinte);background:var(--weiss);border:1.5px solid #8F8E87;border-radius:var(--radius);width:100%;max-width:260px}
.eingabe:focus{border-color:var(--schiefer)}
.eingabe-einheit{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--schiefer)}
select.eingabe{max-width:320px}
textarea.eingabe{max-width:none;min-height:96px;font-size:1.05rem}
.antworten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 4px}
.antwort{min-height:54px;padding:12px 16px;font:inherit;font-size:1.05rem;text-align:left;color:var(--schiefer);background:var(--weiss);border:1.5px solid #8F8E87;border-radius:var(--radius);cursor:pointer;line-height:1.3}
.antwort:hover{border-color:var(--schiefer);background:var(--flaeche)}
.antwort[aria-pressed=true]{border-color:var(--schiefer);background:var(--schiefer);color:var(--weiss)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;font:inherit;font-size:1.05rem;font-weight:700;color:var(--weiss);background:var(--schiefer);border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none}
.knopf:hover{background:#1F1F1C;color:var(--weiss)}
.knopf-gold{background:var(--gold-tief)}
.knopf-gold:hover{background:#6F5003}
.knopf-leise{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;font:inherit;font-size:1rem;color:var(--schiefer);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:4px}
.knopf-leise:hover{text-decoration-color:var(--gold)}
.schritt-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:18px}
.schritt-fehler{color:#9B2C12;font-size:1rem;margin:10px 0 0;min-height:0}
.schritt-fehler:empty{display:none}
.ergebnis-satz{font-family:var(--titel);font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.025em;line-height:1.25;color:var(--schiefer);margin:0 0 10px;font-weight:700}
.ergebnis-satz em{font-style:normal;color:var(--gold-tief)}
.ergebnis-warum{font-size:1.05rem;margin:0 0 16px;color:var(--tinte)}
.ergebnis-werte{width:100%;margin:6px 0 18px;font-size:1rem}
.ergebnis-anpassen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;font-size:1rem}
.ergebnis-anpassen .eingabe{width:6.5em;max-width:6.5em;min-height:44px}
.ergebnis-werte th{font-weight:400;color:var(--leise);width:52%;border-bottom:1px solid var(--linie);padding:9px 10px 9px 0}
.ergebnis-werte td{font-weight:700;color:var(--tinte);padding:9px 0}
.kopier-knopf{margin-left:8px;min-height:32px;padding:2px 10px;font:inherit;font-size:.85rem;font-weight:400;color:var(--schiefer);background:var(--flaeche);border:1px solid var(--linie);border-radius:3px;cursor:pointer}
.ohne-skript{font-size:1rem}
.ohne-skript table{margin-top:8px}
.brief-vorschau{white-space:pre-wrap;font-family:var(--koerper);font-size:1rem;line-height:1.6;background:#FCFCFB;border:1px solid var(--linie);border-radius:var(--radius);padding:24px 26px;margin:0 0 16px;max-height:520px;overflow:auto}
.brief-felder{display:grid;gap:6px;margin:0 0 20px;font-size:1rem}
.brief-felder label{color:var(--schiefer);margin-top:8px}
.brief-felder .eingabe{max-width:none}
.brief-blatt>*{margin:0 0 1.1em}
.brief-kopf{text-align:right}
.brief-feld>*{margin:0}
.brief-ruecksendung{font-size:.8rem;color:var(--leise);text-decoration:underline;text-decoration-color:var(--linie);margin-bottom:4px !important}
.brief-datum{text-align:right}
.brief-betreff{font-weight:700}
.brief-druck{display:none}
@page brief{size:A4;margin:20mm 20mm 20mm 25mm}

@media (max-width:767px){
  .start-band{background:var(--weiss);color:var(--tinte)}
  .start-film{position:relative;inset:auto;height:185px;z-index:0}
  .start-film img,.start-film video{object-position:50% 66%}
  .start-film img{filter:none;transform:none}
  .start-schleier{display:none}
  .start-inhalt{padding:12px 0 36px}
  .start-band h1{color:var(--schiefer)}
  .start-band .start-inhalt h1{font-size:1.4rem}
  .start-band .unterzeile{color:var(--schiefer);margin-bottom:12px;font-size:1rem;line-height:1.5}
  .start-band .unterzeile a{color:var(--schiefer);text-decoration-color:var(--gold)}
  .schrittwerk{padding:22px 18px 24px;box-shadow:none;border:1px solid var(--linie)}
  .eingabe{max-width:none}
  .antworten{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .start-film video{display:none}
}
@media print{
  .start-film,.start-schleier,.schritt,.schritt-fuss,.kopier-knopf{display:none !important}
  .start-band{background:none;color:#000}
  .schrittwerk{box-shadow:none;border:0;padding:0}
  .brief-vorschau{border:0;max-height:none;padding:0;font-size:11pt}
  html.druck-brief body>*:not(.brief-druck){display:none !important}
  html.druck-brief .brief-druck{display:block;page:brief;color:#000}
  .brief-druck .brief-blatt{position:relative;margin:0;padding:78.46mm 0 0;font-size:11pt;line-height:1.4;background:none;overflow:visible}
  .brief-druck .brief-kopf{position:absolute;top:0;right:0;width:85mm;margin:0}
  .brief-druck .brief-feld{position:absolute;top:25mm;left:0;width:80mm;height:45mm;margin:0;overflow:hidden}
  .brief-druck .brief-ruecksendung{height:17.7mm;display:flex;align-items:flex-end;font-size:7pt;color:#000;margin:0 !important;padding-bottom:1mm;box-sizing:border-box}
  .brief-druck .brief-an{height:27.3mm}
  .brief-druck .brief-datum{position:absolute;top:30mm;left:100mm;width:65mm;margin:0}
  .brief-druck .brief-betreff{margin:0 0 8.46mm}
}
.werkzeug-titel{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--linie);font-size:1rem;line-height:1.4;color:var(--schiefer);font-weight:700}
.ergebnis-vergleich thead th{font-size:.9rem;color:var(--leise);font-weight:400;border-bottom:1px solid var(--linie);padding:6px 10px 6px 0;background:none}
.ergebnis-vergleich th[scope=row]{width:40%}
.ergebnis-vergleich td{padding:9px 10px 9px 0}