/* Dieselbe Formensprache wie Website-Check und Exit-Check. Die drei stehen
   nebeneinander im Tools-Index; drei Handschriften lesen sich als drei
   Anbieter. Präfix `vg-` statt `wc-`, weil beide Seiten dieselbe Webflow-CSS
   laden und gleiche Klassennamen sich gegenseitig überschreiben würden
   (derselbe Fehler wie bei `kf-*` auf der Startseite). */
#vg{
  --vg-ink:#0f0f11; --vg-muted:#52525b; --vg-soft:#5f5f69; --vg-line:#1b1d1e14;
  --vg-fill:#3546c4; --vg-text:#2c3bb0;
  --vg-gut:#15803d; --vg-warn:#b45309; --vg-schlecht:#b91c1c;

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

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

/* ---------- Eingabe ---------- */
.vg-form{margin:30px 0 0; max-width:620px}
.vg-feld{margin:0 0 10px}
.vg-feld label{display:block; font-size:13px; font-weight:600; margin:0 0 5px; color:var(--vg-soft)}
.vg-feld input{
  width:100%; padding:13px 16px; font-size:15.5px;
  border:1px solid #1b1d1e24; border-radius:12px; background:#fff; color:var(--vg-ink);
}
.vg-feld input::placeholder{color:#8a8a94}
.vg-eigen input{border-color:#3546c455; box-shadow:0 0 0 3px #3546c414}
.vg-gegner{display:grid; gap:8px}
.vg-tun{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0 0}

.vg-knopf{
  padding:14px 24px; border:0; border-radius:12px; cursor:pointer; font-weight:600;
  background:var(--vg-fill); color:#fff;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 2px #0f0f1114, 0 6px 16px #3546c42e;
}
.vg-knopf:hover{background:#2a389f; box-shadow:0 2px 4px #0f0f111f, 0 10px 22px #3546c43d}
.vg-knopf:active{transform:translateY(1px); box-shadow:0 1px 2px #0f0f1114}
.vg-knopf[disabled]{background:#9aa0c9; cursor:progress; box-shadow:none}
/* Zweitknopf: gleiche Größe, klar nachrangig — aber mit echtem Kontrast,
   nicht als graues Geisterelement. */
.vg-knopf2{
  padding:14px 22px; border:1px solid #1b1d1e29; border-radius:12px; cursor:pointer;
  font-weight:600; background:#ffffffd9; color:var(--vg-ink);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.vg-knopf2:hover{background:#fff; border-color:#1b1d1e4d}
.vg-knopf2:active{transform:translateY(1px)}
.vg-knopf2[hidden]{display:none}
.vg-hinweis{margin:11px 0 0; font-size:13px; color:var(--vg-soft); max-width:620px}

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

/* ---------- Ergebnis ---------- */
.vg-erg[hidden]{display:none}
.vg-erg{margin:34px 0 0; scroll-margin-top:110px}
.vg-stand{font-size:13px; color:var(--vg-soft); margin:0 0 14px}
.vg-stand b{color:var(--vg-ink)}

/* Die Tabelle ist breiter als ein Handy. Sie scrollt in ihrem eigenen Kasten,
   die Seite selbst nie — und die erste Spalte bleibt stehen, sonst weiß nach
   zwei Wischern niemand mehr, welche Zeile er liest. */
.vg-tabellenkasten{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--vg-line); border-radius:14px; background:#ffffffbf}
.vg-t{border-collapse:collapse; width:100%; font-size:14px; min-width:560px}
.vg-t th,.vg-t td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--vg-line);
  white-space:nowrap}
.vg-t thead th{font-size:12.5px; letter-spacing:.2px; color:var(--vg-soft); font-weight:600;
  position:sticky; top:0; background:#f7f7fb}
.vg-t tbody tr:last-child td{border-bottom:0}
.vg-t th:first-child,.vg-t td:first-child{
  position:sticky; left:0; background:#f7f7fb; font-weight:500; color:var(--vg-ink);
  white-space:normal; min-width:210px; border-right:1px solid var(--vg-line)}
.vg-eigenspalte{background:#eef0ff !important; font-weight:700}
.vg-t thead .vg-eigenspalte{background:#e4e7ff !important; color:var(--vg-text)}
.vg-warte{color:#9a9aa5}
.vg-tot{color:var(--vg-schlecht); font-style:italic; white-space:normal !important}
/* Nur die Zellen, in denen die eigene Seite hinter ALLEN liegt. Farbe allein
   trägt das nicht (Rot-Grün-Blindheit, Graustufendruck) — deshalb zusätzlich
   ein Zeichen im Text. */
.vg-letzter{color:var(--vg-schlecht)}

.vg-anhang{margin:22px 0 0; padding:16px 18px; border-radius:14px;
  background:#fff6f6; border:1px solid #b91c1c26}
.vg-anhang h3{margin:0 0 8px; font-size:15px; letter-spacing:-.2px}
.vg-anhang ul{margin:0; padding-left:19px; font-size:14px; line-height:1.65}
.vg-anhang p{margin:9px 0 0; font-size:12.5px; color:var(--vg-soft)}
.vg-nix{background:#f4fbf6; border-color:#15803d26}

.vg-weiter{margin:20px 0 0; padding:18px 20px; border-radius:14px;
  background:#ffffffd9; border:1px solid var(--vg-line)}
.vg-weiter h3{margin:0 0 6px; font-size:16px; letter-spacing:-.2px}
.vg-weiter p{margin:0 0 13px; font-size:14.5px; color:var(--vg-muted); line-height:1.55}
.vg-cta{text-decoration:none; display:inline-block}

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

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

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