/* ===== Design: VdW Bayern CD, Spektrum 2 Dachmarke =====
   Übernommen aus docs/prototyp/bvv-self-check.html. Geändert gegenüber dem Prototyp
   nur: Schriftquelle (selbst gehostet), entfallene Prototyp-Hinweise (.proto, .dev),
   Lade- und Fehlerzustand der Auswertung (.laden) und der noscript-Hinweis.
   Open Sans wird selbst gehostet (static/fonts/), kein Google-CDN (DSGVO).
   Ist die Schrift nicht vorhanden, greift Segoe UI. */
@font-face{font-family:"Open Sans";font-weight:300 800;font-style:normal;font-display:swap;
  src:url("fonts/OpenSans-latin-variable.woff2") format("woff2")}
:root{
  --vdw-lila:#5d2082; --vdw-lila-20:#dfd2e6;
  --vdw-dunkelblau:#1c388f; --vdw-dunkelblau-80:#4960a5; --vdw-dunkelblau-20:#d2d7e9;
  --vdw-tuerkis:#009bb5; --vdw-tuerkis-60:#66c3d3; --vdw-tuerkis-20:#ccebf0;
  --vdw-limegreen:#c7d300;
  --vdw-anthrazit:#1a1a1a; --vdw-grau-80:#333333; --vdw-grau-60:#666666; --vdw-grau-40:#999999;
  --vdw-grau-20:#cccccc; --vdw-hellgrau:#f5f5f5; --vdw-weiss:#ffffff;

  /* Akzentfarben VdW Bayern Treuhand */
  --th-blau:#0073bd; --th-hellblau:#2aafe5; --th-petrol:#009992; --th-lime:#c7d300;
  --accent:var(--th-blau);            /* Buttons, Links, Überschriften-Akzente (Kontrast 5,0:1) */
  --accent-hover:#005a94;             /* Blau ca. 20 % dunkler für Hover */
  --accent-20:#cce3f2;                /* Blau 20 % für ausgewählte Antworten */
  --accent-2:var(--th-petrol);        /* Linien, Icons, Fortschritt */
  --color-primary:var(--accent);
  --color-text:var(--vdw-anthrazit); --color-text-muted:var(--vdw-grau-60);
  --color-bg:var(--vdw-weiss); --color-bg-alt:var(--vdw-hellgrau); --color-border:var(--vdw-grau-20);
  /* Einordnungsstufen: Türkis = gering, Dunkelblau = Prüfbedarf, Lila = erhöht.
     Bedeutung wird zusätzlich über Anzahl der Segmente, Icon und Text vermittelt (WCAG). */
  --lv0:var(--accent-2); --lv1:var(--accent); --lv2:var(--vdw-lila);
  --font-primary:"Open Sans","Segoe UI",Arial,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--color-bg-alt);color:var(--color-text);font:400 16px/1.5 var(--font-primary);-webkit-font-smoothing:antialiased}

/* Kopfleiste mit offiziellem Logo (unverändert, nur skaliert) */
.topbar{position:sticky;top:0;z-index:5;background:var(--vdw-weiss);box-shadow:0 1px 0 var(--vdw-grau-20)}
.topbar .in{max-width:800px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:20px}
.divider{width:1px;align-self:stretch;margin:8px 0;background:var(--vdw-grau-20)}
.product{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.product strong{font-size:17px;font-weight:700;color:var(--accent);letter-spacing:-.005em}
.product span{font-size:13px;color:var(--color-text-muted)}
.hbar{height:3px;background:transparent}
.hbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--th-hellblau),var(--accent));transition:width .4s ease}
@media (max-width:480px){.topbar .in{gap:14px}.product span{display:none}.product strong{font-size:15px}}
.logo{display:block;height:68px;width:auto}
@media (max-width:560px){.logo{height:52px}}

/* Hero: zentrierte Inhalte, Living Houses aus dem Logo schweben an den Rändern */
.hero{position:relative;overflow:hidden;background:var(--vdw-hellgrau);min-height:calc(100vh - 28px);min-height:calc(100svh - 28px);display:flex;align-items:center}
.hero .in{position:relative;z-index:2;width:100%;max-width:1000px;margin:0 auto;padding:64px 24px}
.tiles{position:absolute;inset:0;z-index:1;pointer-events:none}
.tile{position:absolute;display:block;height:auto;mix-blend-mode:multiply;will-change:transform;
  animation:drift var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,0px),var(--dy,-22px),0)}}
@media (max-width:1180px){.tile{opacity:.55}}
@media (max-width:760px){.tile{opacity:.25}.tile.hide-s{display:none}}
/* Abweichung vom Prototyp (WCAG 1.4.3): Die Kacheln sitzen in Prozent der Fensterbreite
   am Rand, der Text mittig. Unter etwa 1380 px Breite (und auf dem Handy) lagen Zeilen
   auf einer Kachel: Einleitung 4,1:1, Hinweistext bis 1,9:1 statt 4,5:1. Die kleinen
   Texte bekommen deshalb zeilenweise einen Hintergrund in der Farbe der Startseite.
   Wo keine Kachel ist, sieht man ihn nicht; wo eine durchläuft, liegt sie hinter der Zeile.
   Überschrift (groß, dunkel) und Knöpfe (eigener Hintergrund) sind nicht betroffen. */
.hero .hg{background:var(--vdw-hellgrau);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.08em .3em;margin:0 -.3em}
.hero .facts li{background:var(--vdw-hellgrau);padding:2px 6px;margin:-2px -6px}
/* In der Überschrift (Zeilenabstand 1,04) nur ein Band in Buchstabenhöhe: ein voller
   Hintergrund wäre höher als die Zeile und schnitte die Zeile darüber an. */
.display .hg{background:linear-gradient(var(--vdw-hellgrau),var(--vdw-hellgrau)) center/100% 74% no-repeat;padding:0 .12em;margin:0 -.12em}
@media (prefers-reduced-motion:reduce){.tile{animation:none}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:10px 14px;border:1px solid var(--vdw-grau-20);border-radius:4px;background:var(--vdw-weiss);color:var(--color-text-muted)}
.chip.accent{border-color:var(--accent-2);color:var(--accent)}
/* Abweichung vom Prototyp (WCAG 1.4.12): dort nowrap. Mit vergrößerten Textabständen lief die
   Zeile bei 600 px über den Rand und wurde abgeschnitten. Passt sie, bleibt sie einzeilig. */
.display .line{display:block}
.display{font-size:clamp(36px,4.3vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.025em;color:var(--color-text);margin:0 0 28px}
.display .grad{background:linear-gradient(90deg,var(--th-blau) 0%,var(--th-petrol) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.hero .lead{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--vdw-grau-80);max-width:36em;margin-bottom:40px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.cta button{padding:18px 30px;font-size:17px}
.cta .ghost{border-color:var(--vdw-grau-20)}
.cta .ghost:hover{border-color:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 18px;padding:0;list-style:none;font-size:15px;color:var(--vdw-grau-80)}
.facts li{display:flex;align-items:center;gap:8px}
.facts .vdw-icon{width:20px;height:20px;color:var(--accent-2)}
.hero .disc{font-size:13px;color:var(--color-text-muted);max-width:100ch;margin:0}
.about{background:var(--vdw-weiss);border-left:3px solid var(--accent-2);padding:20px 24px;margin:-12px 0 32px}
.about p{margin:0 0 10px}.about p:last-child{margin:0}
@media (max-width:560px){.hero .in{padding:48px 20px 64px}.cta button{width:100%}.display{font-size:clamp(30px,9vw,40px);hyphens:auto;-webkit-hyphens:auto}.display .line{display:inline;white-space:normal}
  /* Abweichung vom Prototyp: dort bleibt das hervorgehobene Wort ungetrennt und wird auf
     320 px breiten Geräten abgeschnitten („Personalverwaltung“). Hier darf es getrennt werden. */
  .display .grad{white-space:normal}}

.wrap{max-width:800px;margin:0 auto;padding:40px 16px 72px}
.card{background:var(--vdw-weiss);border-radius:8px;padding:40px 44px 36px;box-shadow:0 1px 2px rgba(26,26,26,.05),0 12px 32px rgba(28,56,143,.07)}
@media (max-width:560px){.card{padding:28px 20px}}
h1{font-size:36px;line-height:1.15;margin:0 0 16px;font-weight:700;color:var(--accent)}
h2{font-size:28px;line-height:1.2;margin:0 0 12px;font-weight:700}
h3{font-size:18px;line-height:1.3;margin:0 0 4px;font-weight:600}
@media (max-width:560px){h1{font-size:28px}h2{font-size:22px;line-height:1.25}}
h2.q{font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
@media (max-width:560px){h2.q{font-size:22px}}
p{margin:0 0 16px;max-width:68ch}
.lead{font-size:18px;line-height:1.5}
.muted{color:var(--color-text-muted)}
.small{font-size:14px}
.note{background:var(--vdw-hellgrau);border-left:3px solid var(--accent-2);padding:16px 20px;font-size:14px;margin:24px 0}
.note p:last-child{margin:0}
.progress{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-size:14px;color:var(--color-text-muted)}
.bar{flex:1;height:4px;background:var(--vdw-grau-20);overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent-2);transition:width .3s ease}
.qtitle{color:var(--accent);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.options{display:grid;gap:8px;margin:20px 0 16px;border:0;padding:0}
.opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--color-border);border-radius:6px;padding:16px 16px 16px 16px;cursor:pointer;background:var(--vdw-weiss);transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--accent-hover)}
.opt input{margin:3px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}
.opt.sel{border-color:var(--accent);background:var(--accent-20);box-shadow:inset 0 0 0 1px var(--accent)}
.opt .txt{display:block}
.opt.rec{border-left:4px solid var(--accent-2);padding-left:13px}
.rec-note{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:1.3;font-weight:600;color:var(--accent)}
.rec-note .vdw-icon{width:16px;height:16px}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.qhead .qtitle{margin:0}
.step{font-size:13px;color:var(--color-text-muted);white-space:nowrap}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.chipbtn{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--font-primary);color:var(--accent);
  background:var(--vdw-weiss);border:1px solid var(--vdw-grau-20);border-radius:4px;padding:8px 11px;text-decoration:none;cursor:pointer}
.chipbtn:hover,.tip.open .chipbtn{border-color:var(--accent);background:var(--accent-20);color:var(--accent-hover)}
.chipbtn .vdw-icon{width:16px;height:16px}
.chipbtn .ext{width:13px;height:13px;color:var(--vdw-grau-60)}
.tip{position:relative;display:inline-block}
.tipbox{position:absolute;left:0;top:calc(100% + 10px);z-index:10;width:min(460px,calc(100vw - 72px));
  background:var(--vdw-weiss);border:1px solid var(--vdw-grau-20);border-top:3px solid var(--accent-2);border-radius:4px;
  box-shadow:0 12px 32px rgba(28,56,143,.14);padding:16px 18px;font-size:14px;line-height:1.55;font-weight:400;color:var(--vdw-grau-80);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.tipbox::before{content:"";position:absolute;left:18px;top:-9px;width:12px;height:12px;background:var(--accent-2);clip-path:polygon(50% 0,100% 100%,0 100%)}
.tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.tip:hover .tipbox,.tip:has(button:focus-visible) .tipbox,.tip.open .tipbox{opacity:1;visibility:visible;transform:none}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}
button{font:600 16px/1 var(--font-primary);border-radius:4px;padding:12px 24px;cursor:pointer;border:1px solid var(--accent)}
.primary{background:var(--accent);color:var(--vdw-weiss)}
.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.primary:disabled{background:var(--vdw-grau-40);border-color:var(--vdw-grau-40);cursor:not-allowed}
.ghost{background:var(--vdw-weiss);color:var(--accent)}
.ghost:hover{background:var(--accent-20);color:var(--accent-hover)}
/* Abweichung vom Prototyp (WCAG 1.4.3): Blau #0073bd auf Hellblau #cce3f2 hat nur 3,78:1.
   Auf hellblauem Grund steht Schrift deshalb im dunkleren Hover-Blau #005a94 (5,5:1). */
.opt.sel .rec-note{color:var(--accent-hover)}
button:focus-visible,.opt:has(input:focus-visible),input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vdw-icon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px;flex:none}

/* Ergebnis */
.verdict{display:flex;gap:16px;align-items:flex-start;background:var(--vdw-hellgrau);border-left:6px solid;padding:20px 24px;margin:0 0 28px}
.verdict h1{font-size:28px;line-height:1.2;margin:0 0 8px;color:var(--color-text)}
.verdict .vdw-icon{width:36px;height:36px;margin-top:2px}
/* Abweichung vom Prototyp (E58): Ohne min-width:0 wird der Textblock nie schmaler als sein
   längstes Wort, und „Handlungsbedarf“ ragte auf dem Handy über den Kasten. Auf schmalen
   Bildschirmen etwas enger und kleiner, unter 375 px das Symbol über dem Text; so passt das
   Wort bis 320 px ungetrennt. Trennen ist nur der Rückfall für noch längere Titel. */
.verdict>div{min-width:0}
.verdict h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:560px){.verdict{padding:16px;gap:12px}.verdict h1{font-size:24px}.verdict .vdw-icon{width:28px;height:28px}}
@media (max-width:374px){.verdict{flex-direction:column;gap:8px}.verdict h1{font-size:22px}}
.lv0{border-color:var(--lv0)} .lv0 .vdw-icon{color:var(--lv0)}
.lv1{border-color:var(--lv1)} .lv1 .vdw-icon{color:var(--lv1)}
.lv2{border-color:var(--lv2)} .lv2 .vdw-icon{color:var(--lv2)}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px}
@media (max-width:620px){.dims{grid-template-columns:1fr}}
.dim{border:1px solid var(--color-border);border-radius:4px;padding:20px 24px}
.dim h3{font-size:14px;color:var(--color-text-muted);font-weight:600;margin-bottom:12px}
.gauge{display:flex;gap:4px;margin-bottom:12px}
.gauge i{height:8px;flex:1;background:var(--vdw-grau-20)}
.gauge[data-l="0"] i:nth-child(-n+1){background:var(--lv0)}
.gauge[data-l="1"] i:nth-child(-n+2){background:var(--lv1)}
.gauge[data-l="2"] i:nth-child(-n+3){background:var(--lv2)}
.lvlabel{font-weight:700;font-size:18px;line-height:1.3;display:flex;gap:8px;align-items:center}
.lvlabel .vdw-icon{width:22px;height:22px}
.findings{display:grid;gap:20px;margin:16px 0 28px;padding:0;list-style:none}
.finding{border-left:3px solid;padding:2px 0 2px 20px}
.finding.l1{border-color:var(--lv1)} .finding.l2{border-color:var(--lv2)}
.finding ul{margin:8px 0 0;padding-left:20px}
.finding li{margin:4px 0}
.finding li::marker{color:var(--accent-2)}
.tag{font-size:12px;line-height:1.4;color:var(--color-text-muted)}
.tag b{font-weight:600}

label.field{display:block;margin:0 0 16px;font-weight:600;font-size:14px}
/* Abweichung vom Prototyp (WCAG 1.4.11): Feldrahmen in Grau 60 statt Grau 40. Grau 40 hat
   auf Weiß nur 2,85:1, verlangt sind 3:1, damit die Felder als solche erkennbar sind. */
label.field input,label.field textarea{display:block;width:100%;margin-top:6px;font:400 16px/1.5 var(--font-primary);padding:10px 12px;border:1px solid var(--vdw-grau-60);border-radius:4px;background:var(--vdw-weiss);color:var(--color-text)}
label.field input:focus,label.field textarea:focus{border-color:var(--accent)}
label.field textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.consent input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.consent-link{font-size:14px;margin:6px 0 0 30px}
.consent-link a{color:var(--accent)}
.consent-link .ext{width:13px;height:13px;margin-left:4px;vertical-align:-1px;color:var(--vdw-grau-60)}
.err{color:var(--vdw-lila);font-weight:600;font-size:14px;margin:8px 0 0}
.warn{background:var(--vdw-lila-20);border-left:3px solid var(--vdw-lila);padding:12px 16px;margin-bottom:16px;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.laden{min-height:40vh;display:flex;flex-direction:column;justify-content:center}
.noscript{max-width:800px;margin:40px auto;padding:24px;background:var(--vdw-weiss);border-left:3px solid var(--accent)}
.sr{position:absolute;left:-9999px}
[tabindex="-1"]:focus{outline:none}
/* Footer */
.site-footer{background:var(--vdw-grau-80);color:#e6e6e6;font-size:15px;line-height:1.6}
.site-footer .in{max-width:1080px;margin:0 auto;padding:48px 24px 40px;display:grid;grid-template-columns:2fr 1fr;gap:32px}
.site-footer h2{font-size:20px;line-height:1.3;font-weight:600;color:var(--vdw-weiss);margin:0 0 12px}
.site-footer p{margin:0 0 10px}
.site-footer a{color:#e6e6e6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(230 230 230 / .5)}
.site-footer a:hover{color:var(--vdw-weiss);text-decoration-color:var(--th-hellblau)}
.site-footer a:focus-visible{outline:2px solid var(--th-hellblau);outline-offset:2px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer .ext{width:14px;height:14px;margin-left:5px;vertical-align:-1px;color:currentColor}
.site-footer .lime{height:2px;background:var(--th-lime)}
@media (max-width:760px){.site-footer .in{grid-template-columns:1fr;gap:28px;padding:36px 20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}