#ex{
  --ex-ink:#0f0f11; --ex-muted:#52525b; --ex-soft:#5f5f69; --ex-line:#1b1d1e14;
  --ex-fill:#3546c4; --ex-text:#2c3bb0; --ex-glass:#3546c41f;
  --ex-gut:#15803d; --ex-warn:#b45309; --ex-schlecht:#b91c1c;

  position:relative; color:var(--ex-ink); line-height:1.5;
  font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 40% at 10% 2%,  #e6e9ff 0%, transparent 60%),
    radial-gradient(55% 35% at 88% 1%,  #e7f6ff 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 100%,#f2f0ff 0%, transparent 65%), #fdfdfd;
}
#ex *{box-sizing:border-box}
#ex button,#ex input{font:inherit}
#ex :focus-visible{outline:3px solid var(--ex-fill); outline-offset:2px; border-radius:8px}

.ex-wrap{max-width:820px; margin:0 auto; padding:0 24px}
/* Die Webflow-Navigation liegt fest über der Seite und ist 96 px hoch. */
.ex-head{padding:136px 0 0}
.ex-eyebrow{font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ex-text); margin:0 0 12px}
.ex-h1{margin:0 0 10px; font-size:38px; line-height:1.08; letter-spacing:-1px; font-weight:700}
.ex-lead{margin:0; font-size:16.5px; line-height:1.55; color:var(--ex-muted); max-width:620px}
.ex-lead b{color:var(--ex-ink); font-weight:600}

/* ---------- Fragen ----------
   Alles auf einer Seite statt als Schritt-Strecke: sechs Fragen sind kein
   Trichter, und wer sieht, dass es gleich vorbei ist, bricht seltener ab. */
.ex-fragen{margin:34px 0 0; border:0; padding:0; min-width:0}
/* fieldset bringt von sich aus Rahmen, Innenabstand und ein eingerücktes
   legend mit — alle drei müssen weg, sonst sieht das Formular aus wie 1998.
   min-width:0, weil fieldset sonst nicht schrumpfen will und schmale Geräte
   in den Überlauf schiebt. */
.ex-f{margin:0 0 26px; border:0; padding:0; min-width:0}
.ex-f legend{padding:0; font-size:16.5px; font-weight:600; letter-spacing:-.2px; margin:0 0 3px}
.ex-f .ex-sub{margin:0 0 11px; font-size:13.5px; color:var(--ex-soft)}
.ex-opts{display:flex; flex-wrap:wrap; gap:8px}
.ex-opt{position:relative}
.ex-opt input{position:absolute; opacity:0; width:0; height:0}
.ex-opt span{
  display:block; padding:9px 15px; border-radius:999px; cursor:pointer; font-size:14.5px;
  background:#ffffffbf; border:1px solid var(--ex-line); color:var(--ex-ink);
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.ex-opt span:hover{border-color:#00000026; background:#fff}
.ex-opt input:checked + span{
  background:var(--ex-fill); border-color:var(--ex-fill); color:#fff; font-weight:600;
}
.ex-opt input:focus-visible + span{outline:3px solid var(--ex-fill); outline-offset:2px}
.ex-opt span:active{transform:translateY(1px)}

.ex-knopf{
  padding:14px 24px; border:0; border-radius:12px; cursor:pointer; font-weight:600;
  background:var(--ex-fill); color:#fff;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 2px #0f0f1114, 0 6px 16px #3546c42e;
}
.ex-knopf:hover{background:#2a389f; box-shadow:0 2px 4px #0f0f111f, 0 10px 22px #3546c43d}
.ex-knopf:active{transform:translateY(1px); box-shadow:0 1px 2px #0f0f1114}
.ex-knopf[disabled]{background:#9aa0c9; cursor:progress; box-shadow:none}
.ex-hinweis{margin:10px 0 0; font-size:13px; color:var(--ex-soft)}

.ex-fehler{
  margin:16px 0 0; padding:13px 16px; border-radius:12px;
  background:#fff2f2; border:1px solid #b91c1c33; color:#8f1616; font-size:14.5px;
}

/* ---------- Rat ---------- */
.ex-rat[hidden], .ex-tief[hidden], .ex-bericht[hidden]{display:none}
.ex-rat{margin:38px 0 0; scroll-margin-top:110px}
.ex-urteil{padding:24px 26px; border-radius:16px; color:#fff; margin:0 0 18px}
.ex-urteil h2{margin:0 0 8px; font-size:23px; letter-spacing:-.6px; color:#fff}
.ex-urteil p{margin:0; font-size:15.5px; line-height:1.55; color:#ffffffe3}
.ex-u-los  {background:linear-gradient(135deg,#3546c4,#2a389f); box-shadow:0 10px 30px #3546c433}
.ex-u-warte{background:linear-gradient(135deg,#166534,#14532d); box-shadow:0 10px 30px #16653433}
.ex-u-reden{background:linear-gradient(135deg,#b45309,#92400e); box-shadow:0 10px 30px #b4530933}

.ex-warum{margin:0 0 20px; padding:0; list-style:none}
.ex-warum li{
  display:flex; gap:11px; align-items:flex-start; padding:11px 16px; margin:0 0 8px;
  background:#ffffffbf; border:1px solid var(--ex-line); border-radius:12px; font-size:14.5px;
  line-height:1.55; color:var(--ex-muted);
}
.ex-warum li b{color:var(--ex-ink); font-weight:600}
.ex-punkt{width:8px; height:8px; border-radius:50%; flex:0 0 8px; margin-top:7px; background:#9a9aa5}
.ex-w-gut .ex-punkt{background:var(--ex-gut)}
.ex-w-warn .ex-punkt{background:var(--ex-warn)}
.ex-w-stop .ex-punkt{background:var(--ex-schlecht)}

.ex-geld{
  margin:0 0 20px; padding:18px 20px; border-radius:14px;
  background:#ffffffbf; border:1px solid var(--ex-line);
}
.ex-geld h3{margin:0 0 10px; font-size:16px; letter-spacing:-.3px}
.ex-geld table{width:100%; border-collapse:collapse; font-size:14.5px}
.ex-geld td{padding:7px 0; border-bottom:1px solid var(--ex-line)}
.ex-geld tr:last-child td{border-bottom:0}
.ex-geld td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ex-geld p{margin:11px 0 0; font-size:13.5px; color:var(--ex-soft); line-height:1.55}

.ex-tun{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 8px}
.ex-cta{text-decoration:none; display:inline-block}

/* ---------- Vertiefung: der Scanner ---------- */
.ex-tief{margin:30px 0 0; padding:20px 0 0; border-top:1px solid var(--ex-line)}
.ex-tief h3{margin:0 0 5px; font-size:16.5px; letter-spacing:-.3px}
.ex-tief > p{margin:0 0 13px; font-size:14px; color:var(--ex-muted); line-height:1.55}
.ex-form{display:flex; gap:10px; flex-wrap:wrap; max-width:560px}
.ex-form input{
  flex:1 1 240px; min-width:0; padding:13px 16px; font-size:15.5px;
  border:1px solid #1b1d1e24; border-radius:12px; background:#fff; color:var(--ex-ink);
}
.ex-form input::placeholder{color:#8a8a94}

.ex-bericht{margin:24px 0 0}
.ex-domain{font-size:13px; color:var(--ex-soft); margin:0 0 13px}
.ex-domain b{color:var(--ex-ink)}
.ex-karten{display:grid; gap:11px; margin:0 0 22px}
.ex-k{
  background:#ffffffbf; border:1px solid var(--ex-line); border-radius:14px; padding:15px 17px;
}
.ex-k h4{margin:0 0 5px; font-size:15px; letter-spacing:-.2px; display:flex; gap:9px; align-items:baseline}
.ex-k p{margin:0; font-size:14px; color:var(--ex-muted); line-height:1.55}
.ex-k .ex-detail{margin:8px 0 0; font-size:12.5px; color:var(--ex-soft)}
.ex-hoch .ex-punkt{background:var(--ex-schlecht)}
.ex-mittel .ex-punkt{background:var(--ex-warn)}
.ex-gut .ex-punkt{background:var(--ex-gut)}
.ex-info .ex-punkt{background:#9a9aa5}
.ex-tabelle{width:100%; border-collapse:collapse; font-size:14px; background:#ffffffbf;
  border:1px solid var(--ex-line); border-radius:14px; overflow:hidden}
.ex-tabelle th,.ex-tabelle td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--ex-line)}
.ex-tabelle th{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--ex-soft); font-weight:600}
.ex-tabelle tr:last-child td{border-bottom:0}
.ex-tabelle td:not(:first-child){white-space:nowrap; font-variant-numeric:tabular-nums}
.ex-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ex-fazit{margin:11px 0 0; font-size:14.5px; line-height:1.55}
.ex-fussnote{margin:7px 0 0; font-size:12.5px; color:var(--ex-soft)}
.ex-grenzen{margin:16px 0 0; padding-left:20px; font-size:13.5px; color:var(--ex-soft); line-height:1.65}

/* ---------- Statisch ---------- */
.ex-abschnitt{padding:34px 0 0}
.ex-nichts{padding:18px 20px; border-radius:14px; background:#fffaf0; border:1px solid #b4530933}
.ex-nichts h2{margin:0 0 8px; font-size:17px; color:#7c3d06}
.ex-nichts p{margin:0; font-size:14.5px; color:#6b4315; line-height:1.6}
.ex-fuss{padding:26px 0 60px; font-size:13px; color:var(--ex-soft); line-height:1.6}

@media (max-width:640px){
  .ex-head{padding:112px 0 0}
  .ex-h1{font-size:29px; letter-spacing:-.6px}
  .ex-wrap{padding:0 18px}
  .ex-tun .ex-knopf, .ex-form .ex-knopf{width:100%}
}
@media (prefers-reduced-motion:reduce){
  #ex *{transition:none !important}
}