/* Bewusst dieselbe Formensprache wie der Exit-Check: beide Werkzeuge stehen
   auf derselben Seite nebeneinander im Tools-Index. Zwei Handschriften an
   einem Ort lesen sich als zwei verschiedene Anbieter. */
#wc{
  --wc-ink:#0f0f11; --wc-muted:#52525b; --wc-soft:#5f5f69; --wc-line:#1b1d1e14;
  --wc-fill:#3546c4; --wc-text:#2c3bb0;
  --wc-gut:#15803d; --wc-warn:#b45309; --wc-schlecht:#b91c1c;

  position:relative; color:var(--wc-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;
}
#wc *{box-sizing:border-box}
#wc button,#wc input{font:inherit}
#wc :focus-visible{outline:3px solid var(--wc-fill); outline-offset:2px; border-radius:8px}

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

.wc-form{display:flex; gap:10px; flex-wrap:wrap; max-width:560px; margin:30px 0 0}
.wc-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(--wc-ink);
}
.wc-form input::placeholder{color:#8a8a94}

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

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

/* ---------- Bericht ---------- */
.wc-bericht[hidden]{display:none}
.wc-bericht{margin:34px 0 0; scroll-margin-top:110px}
.wc-domain{font-size:13px; color:var(--wc-soft); margin:0 0 14px}
.wc-domain b{color:var(--wc-ink)}

/* Die Zählung steht ganz oben, weil sie die einzige Zahl ist, die jemand
   weitererzählt („drei rote Punkte"). */
.wc-summe{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 20px}
.wc-z{display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:#ffffffbf; border:1px solid var(--wc-line); font-size:14px}
.wc-z b{font-variant-numeric:tabular-nums}
.wc-punkt{width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#9a9aa5}
.wc-z-rot .wc-punkt{background:var(--wc-schlecht)}
.wc-z-gelb .wc-punkt{background:var(--wc-warn)}
.wc-z-gut .wc-punkt{background:var(--wc-gut)}

.wc-karten{display:grid; gap:11px; margin:0 0 22px}
.wc-k{background:#ffffffbf; border:1px solid var(--wc-line); border-radius:14px; padding:15px 17px}
.wc-k h3{margin:0 0 5px; font-size:15px; letter-spacing:-.2px; display:flex; gap:9px; align-items:baseline}
.wc-k p{margin:0; font-size:14px; color:var(--wc-muted); line-height:1.55}
.wc-k .wc-detail{margin:8px 0 0; font-size:12.5px; color:var(--wc-soft)}
.wc-rot .wc-punkt{background:var(--wc-schlecht)}
.wc-gelb .wc-punkt{background:var(--wc-warn)}
.wc-gut .wc-punkt{background:var(--wc-gut)}
.wc-info .wc-punkt{background:#9a9aa5}
/* Der rote Punkt allein trägt die Schwere sonst über Farbe allein — für
   Rot-Grün-Blindheit und Graustufendruck kommt der Rahmen dazu. */
.wc-rot{border-color:#b91c1c33}

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

.wc-grenzen{margin:20px 0 0; padding:16px 18px; border-radius:14px;
  background:#ffffff96; border:1px solid var(--wc-line)}
.wc-grenzen h3{margin:0 0 8px; font-size:14px; letter-spacing:-.2px}
.wc-grenzen ul{margin:0; padding-left:19px; font-size:13.5px; color:var(--wc-soft); line-height:1.65}

/* ---------- Statisch ---------- */
.wc-abschnitt{padding:34px 0 0}
.wc-nichts{padding:18px 20px; border-radius:14px; background:#fffaf0; border:1px solid #b4530933}
.wc-nichts h2{margin:0 0 8px; font-size:17px; color:#7c3d06}
.wc-nichts p{margin:0 0 9px; font-size:14.5px; color:#6b4315; line-height:1.6}
.wc-nichts p:last-child{margin:0}
.wc-abschnitt:last-child{padding-bottom:60px}

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