/* Schriften vom eigenen Server — keine Verbindung zu Google */
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --petrol:#1E4F62; --petrol-d:#13333F; --creme:#EFEBE4; --sand:#E7E2D4;
  --gold:#CFBB8C; --gold-d:#B79A63; --gold-t:#7E672F; --teal:#3E8C97; --slate:#46545A;
  --bg:var(--creme); --surface:#fff; --ink:var(--petrol); --body:var(--slate);
  --line:#DCD5C6; --muted:#66645C; --rg:#E2DCCE; --rg-out:#C9C2B2;
  --ist:var(--teal); --ist-fill:rgba(62,140,151,.16); --ziel:var(--petrol);
  --sel:#F3EFE6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp,.eyebrow{font-family:Jost,"Century Gothic",Futura,sans-serif;color:var(--ink)}
h1{font-size:clamp(25px,4.4vw,34px);font-weight:400;line-height:1.2;margin:0;text-wrap:balance}
h2{font-size:clamp(19px,2.8vw,23px);font-weight:400;margin:0;text-wrap:balance}
h3{font-size:16px;font-weight:500;margin:0}
p{margin:0}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);font-weight:500}

.wrap{max-width:760px;margin:0 auto;padding-inline:20px;padding-block:0 64px}

/* Fortschritt */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);
  border-bottom:1px solid var(--line);padding:11px 20px}
.bar .in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px}
.bar .lbl{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.track{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.fill{height:100%;background:var(--gold-d);transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.fill{transition:none}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:22px 22px 24px}
.stack{display:flex;flex-direction:column;gap:26px;padding-top:30px}

/* Fragen */
.q{display:flex;flex-direction:column;gap:11px}
.q + .q{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.opts{display:flex;flex-direction:column;gap:5px}
.opt{display:flex;align-items:flex-start;gap:11px;padding:9px 12px;border:1px solid var(--line);
  border-radius:4px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--gold-d)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .n{font-family:Jost,sans-serif;font-size:13px;font-weight:500;color:var(--muted);
  min-width:16px;line-height:1.5;font-variant-numeric:tabular-nums}
.opt .t{font-size:14px;line-height:1.5;color:var(--body)}
.opt:has(input:checked){border-color:var(--teal);background:var(--sel)}
.opt:has(input:checked) .n{color:var(--teal)}
.opt:has(input:checked) .t{color:var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--gold-d);outline-offset:2px}

/* Profil */
.pf{display:grid;gap:18px}
.pf label span{display:block;font-family:Jost,sans-serif;font-size:14px;color:var(--ink);margin-bottom:6px}
select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);
  border-radius:4px;background:var(--surface);color:var(--body)}
select:focus-visible{outline:2px solid var(--gold-d);outline-offset:1px}

/* Knöpfe */
.nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{font-family:Jost,sans-serif;font-size:14.5px;font-weight:500;padding:11px 22px;border-radius:4px;
  border:1px solid var(--petrol);background:var(--petrol);color:#fff;cursor:pointer;transition:.15s}
.btn:hover{background:var(--petrol-d);border-color:var(--petrol-d)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:none}
.hint{font-size:13px;color:var(--muted)}

/* Ergebnis */
.radarbox{display:block;width:100%;max-width:520px;margin:0 auto}
.radarbox svg{width:100%;height:auto;display:block}
.dimtable{width:100%;border-collapse:collapse;font-size:14px}
.dimtable th{font-family:Jost,sans-serif;font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--line)}
.dimtable th.num,.dimtable td.num{text-align:right;font-variant-numeric:tabular-nums}
.dimtable td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--body)}
.dimtable td.nm{font-family:Jost,sans-serif;color:var(--ink);font-size:15px}
.dimtable td.num b{color:var(--ink);font-weight:600}
.gap{display:inline-block;min-width:44px;text-align:right}
.gap.neg{color:var(--gold-d)}

.score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score .v{font-family:Jost,sans-serif;font-size:44px;font-weight:300;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.score .s{font-family:Jost,sans-serif;font-size:16px;color:var(--gold-d)}

.lever{border-left:2px solid var(--gold);padding:2px 0 2px 16px}
.lever h3{margin-bottom:5px}
.levers{display:flex;flex-direction:column;gap:18px}

.note{background:var(--bg);border-radius:4px;padding:13px 15px;font-size:13.5px;color:var(--muted);line-height:1.6}

/* Compass-Bildzeichen „Facet" — Original aus dem Brand-Assets-Paket */
:root{ --facet-line:var(--petrol); --facet-gold:var(--gold-d); --facet-bg:rgba(207,187,140,.17) }
.facet{display:block;border-radius:50%;background:var(--facet-bg)}
.facet.lg{width:78px;height:78px}
.facet.sm{width:22px;height:22px;background:none;flex:0 0 22px}
.tagwrap{margin-left:auto;display:flex;align-items:center;gap:7px}

/* Marke — Konstruktion nach CI-Workbook, nicht veraendern */
.brand{--wm:17px;display:inline-flex;align-items:center;gap:0;color:var(--petrol);
  text-decoration:none;line-height:0}
.mark{height:calc(var(--wm)*1.0705);width:calc(var(--wm)*1.3077);
  flex:0 0 calc(var(--wm)*1.3077);margin-right:calc(var(--wm)*.8526);overflow:visible}
.wm{height:var(--wm);width:calc(var(--wm)*8.4615);flex:0 0 calc(var(--wm)*8.4615);
  fill:currentColor;display:block}

.site-head{border-bottom:1px solid var(--line);background:var(--bg)}
.site-head .in{max-width:760px;margin:0 auto;padding:17px 20px;display:flex;align-items:center;gap:16px}
.site-head .tag{margin-left:auto;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-d)}

.site-foot{background:var(--petrol-d);color:#A9BFC7;margin-top:56px}
.site-foot .in{max-width:760px;margin:0 auto;padding:30px 20px 34px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline;justify-content:space-between}
.site-foot .brand{color:#fff}
.site-foot p{font-size:13px}
.site-foot .claim{font-family:Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;color:var(--gold)}

@media (max-width:520px){ .card{padding:18px 16px 20px} .site-head .in{padding:14px 20px} }
.dimtable .dmap{display:block;font-family:Inter,sans-serif;font-size:11px;letter-spacing:.06em;
  color:var(--muted);font-weight:400;margin-top:2px}

/* --- nur in der Serverfassung ------------------------------------------ */
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;
  padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--body)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-d);outline-offset:1px}
textarea{resize:vertical;min-height:80px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--body);line-height:1.55}
.check input{margin-top:3px;flex:0 0 auto;width:auto}
.check span{display:block}
.fehler{background:rgba(183,154,99,.14);border-left:2px solid var(--gold-d);
  padding:10px 14px;border-radius:3px;font-size:14px;color:var(--ink)}
.ok{background:rgba(62,140,151,.12);border-left:2px solid var(--teal);
  padding:10px 14px;border-radius:3px;font-size:14px;color:var(--ink)}
a{color:inherit}
.site-foot a{color:#CFE0E6}
.nav a.btn{text-decoration:none;display:inline-block}
.site-head .lang{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;margin-left:14px}
.site-head .lang:hover{color:var(--ink)}
.site-head .tag{margin-left:auto}

/* === Seite in Petrol, Inhaltsbloecke in Beige ============================
   Die Farbrollen werden auf zwei Ebenen gesetzt: die Seite traegt Petrol mit
   heller Schrift, jeder Inhaltsblock stellt die Rollen auf die Beige-Fassung
   zurueck. Dadurch bleibt alles innerhalb einer Karte unveraendert lesbar —
   auch das Spinnennetz, das seine Farben aus denselben Variablen bezieht. */
body{
  background:var(--petrol);
  --ink:#EDE8DE; --body:#C3D2D8; --muted:#AFC3CA;
  --line:#2E5D70; --sel:#20566B;
}
.card,.pruef{
  background:var(--creme);
  color:var(--slate);
  --ink:var(--petrol); --body:var(--slate); --muted:#66645C;
  --line:#DCD5C6; --sel:#F3EFE6;
  border-color:#2E5D70;
}
.card .eyebrow{color:var(--gold-t)}
.card .gap.neg{color:var(--gold-t)}
.card .score .s{color:var(--gold-t)}
.eyebrow{color:var(--gold)}

/* Antwortfelder: weiss auf Beige, ausgewaehlt in Petrol gefasst */
.opt{background:#fff}
.opt:has(input:checked){border-color:var(--petrol);background:var(--sel)}
.opt:has(input:checked) .n{color:var(--petrol)}
select,input[type=text],input[type=email],input[type=tel],textarea{background:#fff}

/* Fortschritt */
.bar{background:var(--petrol);border-bottom-color:#2E5D70}
.track{background:#2E5D70}
.fill{background:var(--gold)}

/* Hinweise ausserhalb der Bloecke stehen auf Petrol */
.note{background:rgba(255,255,255,.055);color:#C0D0D7}
.card .note{background:var(--sand);color:var(--muted)}

/* Knoepfe */
.btn{background:var(--gold);border-color:var(--gold);color:#12303C}
.btn:hover{background:#E0CFA6;border-color:#E0CFA6}
.btn.ghost{background:none;color:#EDE8DE;border-color:#4A7A8A}
.btn.ghost:hover{border-color:#EDE8DE;background:none}
.card .btn{background:var(--petrol);border-color:var(--petrol);color:#fff}
.card .btn:hover{background:var(--petrol-d);border-color:var(--petrol-d)}

/* Kopf und Fuss */
.site-head{background:var(--petrol);border-bottom-color:#2E5D70}
.site-head .brand{color:#fff}
.site-head .tag{color:var(--gold)}
.site-head .lang{color:#A8BFC7}
.site-head .lang:hover{color:#fff}
.site-foot{background:var(--petrol-d)}

/* Compass-Zeichen auf dunklem Grund */
:root{--facet-line:#BFD2D9;--facet-gold:#D9C79C;--facet-bg:rgba(217,199,156,.10)}
.card{--facet-line:var(--petrol);--facet-gold:var(--gold-d);--facet-bg:rgba(207,187,140,.17)}

/* Ergebniszahl und Fehlermeldungen */
.score .v{color:#EDE8DE}
.score .s{color:var(--gold)}
.fehler{background:rgba(207,187,140,.16);border-left-color:var(--gold);color:#EDE8DE}
.ok{background:rgba(111,191,201,.16);border-left-color:#6FBFC9;color:#EDE8DE}
.card .fehler{background:rgba(183,154,99,.14);border-left-color:var(--gold-d);color:var(--ink)}
.card .ok{background:rgba(62,140,151,.12);border-left-color:var(--teal);color:var(--ink)}