/* ORY — Burnout-Prävention für Arbeitgeber
   Werte 1:1 aus der Designvorlage "Leistung braucht Grundlagen" (Canvas.dc.html).
   Feste px-Werte der Artboards = Desktop-Zustand; die Media Queries setzen den
   Mobile-Zustand des 390px-Artboards um. */

:root{
  --ink:#111111; --ink-2:#3d3d3d; --ink-3:#6b6b6b;
  --bg:#faf9fc; --card:#ffffff; --line:#e8e6ef;
  --chip:#f0ebfd; --mint:#A8E8E2; --blush:#F9D5D3; --lila:#889FFE;
  --grad:linear-gradient(125deg,#A8E8E2 0%,#889FFE 100%);
  --shadow:0 18px 50px rgba(17,17,17,0.05);
  --r:16px; --r-sm:10px; --pad:100px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--lila); outline-offset:3px}
a{color:var(--ink)}
a:hover{color:var(--ink-2)}
img{max-width:100%;display:block}

/* ---------- Grundtypografie nach Vorlage ---------- */
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-0.02em}
h1{font-size:56px; line-height:1.05; max-width:15em; text-wrap:pretty}
h2{font-size:42px; line-height:1.1; text-wrap:pretty}
h3{font-size:23px}
p{margin:0; text-wrap:pretty}

.eyebrow{
  font-size:13px; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.lead{font-size:20px; line-height:1.45; color:var(--ink-2); max-width:26em}
.body-lg{font-size:18px; line-height:1.6; color:var(--ink-2)}
.body{font-size:17px; line-height:1.6; color:var(--ink-2)}
.small{font-size:15px; color:var(--ink-3)}
.fine{font-size:14px; line-height:1.6; color:var(--ink-3)}

.wrap{padding-left:var(--pad); padding-right:var(--pad)}
.stack{display:flex; flex-direction:column}
.mw-44{max-width:44em} .mw-38{max-width:38em} .mw-32{max-width:32em}
.mw-52{max-width:52em} .mw-60{max-width:60em} .mw-24{max-width:24em}
.mw-18{max-width:18em} .mw-20{max-width:20em}

/* ---------- Kopf / Fuß ---------- */
.site-head{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad) 0;
}
.logo{font-size:19px; font-weight:600; letter-spacing:-0.02em; text-decoration:none}
.head-nav{display:flex; gap:36px; font-size:15px; color:var(--ink-2)}
.head-nav a{text-decoration:none}
.head-nav a:hover{color:var(--ink)}

.site-foot{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:30px var(--pad); font-size:15px; color:var(--ink-3);
}
.site-foot a{color:var(--ink-3); text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.foot-links{display:flex; gap:24px}

/* ---------- Hero mit Sechseck-Netz ---------- */
.hero{position:relative; padding-bottom:26px}
.hero .hexwrap{position:absolute; inset:0; height:760px; opacity:0.07; pointer-events:none}
.hero .hexwrap svg{width:100%; height:100%}
.hero-in{position:relative; padding:60px var(--pad) 0; display:flex; flex-direction:column; gap:22px}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font:inherit; font-size:17px; font-weight:500;
  border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .16s, box-shadow .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-grad{background:var(--grad); color:var(--ink); padding:19px 34px}
.btn-grad:hover{box-shadow:0 12px 30px rgba(136,159,254,.34)}
.btn-line{border-color:var(--ink); color:var(--ink); background:transparent; padding:18px 32px}
.btn-line:hover{background:var(--card)}
.btn-dark{background:var(--ink); color:#fff; padding:19px 34px}
.btn-dark:hover{box-shadow:0 12px 30px rgba(17,17,17,.24)}
.btn-sm{padding:17px 32px}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none!important; box-shadow:none!important}
.btn-row{display:flex; align-items:center; gap:32px; padding-top:14px; flex-wrap:wrap}

/* ---------- Karten ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.card-flat{background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
.card-chip{background:var(--chip); border:1px solid var(--line); border-radius:var(--r)}
.card-soft{background:var(--bg); border:1px solid var(--line); border-radius:var(--r)}

.iconbox{
  width:52px; height:52px; border:1.7px solid var(--ink); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.iconbox-sm{width:34px; height:34px; border-radius:var(--r-sm)}
.iconbox-md{width:44px; height:44px}
.iconbox svg{stroke:var(--ink); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- Abschnitte ---------- */
.sec{padding:58px var(--pad) 0}
.split{display:flex; gap:64px; align-items:flex-start}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}

.baustein{padding:30px; display:flex; flex-direction:column; gap:15px}
.baustein p{font-size:17px; line-height:1.6; color:var(--ink-2)}

.schritt{border-top:1.7px solid var(--ink); padding:26px 0 0;
  display:flex; flex-direction:column; gap:14px}
.schritt .nr{font-size:15px; font-weight:500; color:var(--ink-3)}
.schritt p{font-size:16px; line-height:1.6; color:var(--ink-2)}

.ds-item{display:flex; gap:16px; padding:22px 24px}
.ds-item p{font-size:17px; line-height:1.55}

.cta-band{
  background:var(--grad); border-radius:var(--r); padding:48px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:60px;
}
.cta-band h2{font-size:42px; line-height:1.08}
.cta-band p{font-size:19px; line-height:1.55; color:var(--ink)}

/* ---------- Rechner ---------- */
.rechner-grid{display:flex; gap:24px; align-items:stretch}
.rechner-form{flex:1 1 0; padding:52px; display:flex; flex-direction:column; gap:38px}
.rechner-info{flex:0 0 420px; padding:44px; display:flex; flex-direction:column; gap:22px}
.rechner-info p{font-size:16px; line-height:1.55; color:var(--ink-2)}

.feld-reihe{display:flex; gap:20px}
.feld{display:flex; flex-direction:column; gap:10px}
.feld > span:first-child{font-size:15px; color:var(--ink-3)}
.feld select, .feld input[type=number]{
  font:inherit; font-size:17px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; background:var(--bg); width:100%;
  -webkit-appearance:none; appearance:none;
}
.feld select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.feld input[type=number]{border-color:var(--ink); background:var(--card)}
.feld .hinweis{font-size:13px; color:var(--ink-3); line-height:1.5}

.annahmen{border-top:1px solid var(--line); padding-top:32px;
  display:flex; flex-direction:column; gap:26px}
.annahmen summary{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; list-style:none; font-size:17px; font-weight:500;
}
.annahmen summary::-webkit-details-marker{display:none}
.annahmen summary::after{content:'Aufklappen ▾'; font-size:15px; font-weight:400; color:var(--ink-3)}
.annahmen[open] summary::after{content:'Zuklappen ▴'}
.annahmen-inner{display:flex; flex-direction:column; gap:26px; padding-top:26px}

.regler{display:flex; align-items:center; gap:20px}
.regler > label{flex:1 1 0; font-size:16px; color:var(--ink-2)}
.regler input[type=range]{
  flex:0 0 210px; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:999px; outline:none; cursor:pointer;
  /* Vorlage: gefuellter Teil links vom Punkt in Schwarz, Rest in Chip-Lila.
     --f wird von rechner.js je Regler gesetzt. */
  background:linear-gradient(to right,
    var(--ink) 0, var(--ink) var(--f,0%),
    var(--chip) var(--f,0%), var(--chip) 100%);
}
.regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:999px;
  background:var(--card); border:1.7px solid var(--ink); cursor:pointer;
}
.regler input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:999px;
  background:var(--card); border:1.7px solid var(--ink); cursor:pointer; box-sizing:border-box;
}
.regler .wert{flex:0 0 120px; text-align:right; white-space:nowrap; font-size:16px;
  font-weight:500; font-variant-numeric:tabular-nums}
.regler-zahl{display:flex; align-items:center; gap:20px; padding-top:6px}
.regler-zahl > label{flex:1 1 0; font-size:16px; color:var(--ink-2)}
.regler-zahl input{
  flex:0 0 210px; font:inherit; font-size:16px; text-align:right;
  border:1px solid var(--ink); border-radius:var(--r-sm); padding:12px 14px;
  background:var(--card); color:var(--ink);
}
.regler-zahl .platz{flex:0 0 120px}

.ergebnis{padding:44px; display:flex; flex-direction:column}
.erg-zeile{display:flex; align-items:baseline; justify-content:space-between;
  gap:40px; padding:34px 0; border-bottom:1px solid var(--line)}
.erg-zeile .k{display:flex; flex-direction:column; gap:4px}
.erg-zeile .k b{font-size:18px; font-weight:500}
.erg-zeile .k span{font-size:15px; color:var(--ink-3)}
.erg-zeile .v{font-size:22px; font-weight:600; letter-spacing:-0.02em;
  white-space:nowrap; font-variant-numeric:tabular-nums}
.erg-summe{
  margin-top:28px; background:var(--grad); border-radius:var(--r);
  padding:52px 44px; display:flex; align-items:center;
  justify-content:space-between; gap:40px;
}
.erg-summe .k{display:flex; flex-direction:column; gap:4px}
.erg-summe .k b{font-size:20px; font-weight:600; letter-spacing:-0.02em}
.erg-summe .k span{font-size:15px; color:var(--ink-2)}
.erg-summe .v{font-size:44px; font-weight:600; letter-spacing:-0.02em;
  white-space:nowrap; font-variant-numeric:tabular-nums}


/* --- Vorlage v2: mehr Luft im Rechner- und Ergebnisbereich --- */
.rechner-sec{gap:52px; padding-top:96px}
.rechner-h2{font-size:48px; line-height:1.08}
.rechner-lead{font-size:19px; line-height:1.6; color:var(--ink-2)}
.erg-fuss{margin:26px 0 0; font-size:15px; line-height:1.65; color:var(--ink-3)}
.q-huelle.q-huelle-top{padding-top:92px}
.res-sec{gap:24px; padding-top:88px}
.res-kopf{gap:16px; padding-bottom:18px}

/* ---------- Fragebogen ---------- */
.q-huelle{padding:44px var(--pad) 0; display:flex; justify-content:center}
.q-karte{width:820px; max-width:100%; padding:74px 76px 84px;
  display:flex; flex-direction:column; gap:22px}
.q-karte.start{padding:76px; gap:32px}
.q-karte.start h2{font-size:48px; line-height:1.08}
.q-karte.start p{font-size:20px; line-height:1.6; color:var(--ink-2); max-width:32em}
.q-punkte{display:flex; flex-direction:column; gap:12px; padding-top:6px}
.q-punkte span{display:flex; gap:12px; font-size:17px; color:var(--ink-2)}

.q-kopf{display:flex; flex-direction:column; gap:14px}
.q-meta{display:flex; justify-content:space-between; font-size:15px; color:var(--ink-3)}
.q-meta button{font:inherit; font-size:15px; color:var(--ink-3);
  background:none; border:0; cursor:pointer; padding:0}
.q-meta button:hover{color:var(--ink)}
.q-balken{height:6px; background:var(--chip); border-radius:999px; overflow:hidden}
.q-balken > div{height:100%; background:var(--grad); width:0;
  transition:width .3s cubic-bezier(.4,0,.2,1)}
.q-frage{font-size:40px; line-height:1.15; font-weight:600;
  letter-spacing:-0.02em; max-width:24em; text-wrap:pretty}

.skala-block{display:flex; flex-direction:column; gap:20px}
.skala{display:flex; gap:12px}
.skala button{
  flex:1 1 0; aspect-ratio:1; font:inherit; font-size:20px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  cursor:pointer; transition:.14s;
}
.skala button:hover{border-color:var(--ink); color:var(--ink)}
.skala button.sel{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:500}
.skala-enden{display:flex; justify-content:space-between; font-size:15px; color:var(--ink-3)}

.q-nav{display:flex; align-items:center; justify-content:space-between; padding-top:6px; gap:16px}
.q-zurueck{font:inherit; font-size:16px; color:var(--ink-3); background:none;
  border:0; cursor:pointer; padding:0}
.q-zurueck:hover:not([disabled]){color:var(--ink)}
.q-zurueck[disabled]{opacity:.35; cursor:not-allowed}
.q-fuss{font-size:14px; line-height:1.55; color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:22px}

/* ---------- Ergebniskarten Fragebogen ---------- */
.res-karte{padding:52px 56px; display:flex; gap:56px; align-items:flex-start}
.res-karte .links{flex:1 1 0; display:flex; flex-direction:column; gap:14px}
.res-karte h3{font-size:30px}
.res-karte .links p{font-size:18px; line-height:1.6; color:var(--ink-2); max-width:38em}
.res-schritt{flex:0 0 340px; border-radius:var(--r); padding:28px 30px;
  display:flex; flex-direction:column; gap:10px}
.res-schritt p{font-size:17px; line-height:1.5}
.res-schritt .eyebrow{color:var(--ink-2)}
.stufe-1{background:var(--bg); border:1px solid var(--line)}
.stufe-2{background:var(--mint); border:1px solid var(--mint)}
.stufe-3{background:var(--grad)}
.stufe-4{background:var(--blush); border:1px solid var(--blush)}

.versteckt{display:none!important}

/* ================= MOBIL — Zustand des 390px-Artboards ================= */
@media (max-width:900px){
  :root{--pad:22px}
  h1{font-size:34px; line-height:1.08; max-width:none}
  h2{font-size:27px}
  h3{font-size:20px}
  .lead{font-size:17px; max-width:none}
  .body-lg{font-size:16px}
  .cta-band h2{font-size:27px}
  .cta-band p{font-size:17px}
  .cta-band{flex-direction:column; align-items:flex-start; gap:26px; padding:30px}

  .site-head{padding:18px var(--pad) 0}
  .head-nav{display:none}
  .hero-in{padding-top:34px; gap:16px}
  .hero .hexwrap{height:420px}
  .btn-row{gap:12px; flex-direction:column; align-items:stretch}
  .btn{justify-content:center; font-size:16px; padding:17px 26px}

  .sec{padding:38px var(--pad) 0}
  .split{flex-direction:column; gap:26px}
  .split > *{flex:1 1 auto!important; width:100%}
  .grid-2, .grid-4{grid-template-columns:1fr; gap:16px}
  .baustein{padding:24px}
  .schritt{padding-top:20px}

  /* Rechner */
  .rechner-grid{flex-direction:column}
  .rechner-form, .rechner-info, .ergebnis{padding:26px; flex:1 1 auto}
  .feld-reihe{flex-direction:column; gap:16px}
  .feld{flex:1 1 auto!important}
  .regler{flex-wrap:wrap; gap:8px 14px}
  .regler > label{flex:1 1 100%; font-size:15px}
  .regler input[type=range]{flex:1 1 auto; min-width:0}
  .regler .wert{flex:0 0 auto; min-width:88px; font-size:15px}
  .regler-zahl{flex-wrap:wrap; gap:8px 14px}
  .regler-zahl > label{flex:1 1 100%; font-size:15px}
  .regler-zahl input{flex:1 1 auto}
  .regler-zahl .platz{display:none}
  .erg-zeile{gap:16px; padding:16px 0}
  .erg-zeile .k b{font-size:16px}
  .erg-zeile .k span{font-size:13px}
  .erg-zeile .v{font-size:19px}
  .erg-summe{padding:22px; gap:14px; flex-direction:column; align-items:flex-start}
  .erg-summe .v{font-size:32px}

  /* Fragebogen */
  .q-huelle{padding:20px var(--pad) 0}
  .q-karte{padding:30px 24px 34px; gap:20px}
  .q-karte.start{padding:30px 24px 34px; gap:24px}
  .q-karte.start h2{font-size:30px}
  .q-karte.start p{font-size:17px}
  .q-frage{font-size:25px; line-height:1.2}
  /* Vorlage: auf 390px stehen die neun Felder in zwei Reihen (5 + 4),
     jedes Feld über 44px breit, Beschriftungen ueber und unter dem Raster */
  .skala{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
  .skala button{aspect-ratio:1; font-size:17px}
  .skala button:nth-child(6){grid-column:1}
  .q-nav{gap:12px}
  .res-karte{flex-direction:column; gap:26px; padding:30px 24px}
  .rechner-sec{gap:26px; padding-top:38px}
  .rechner-h2{font-size:27px; line-height:1.12}
  .rechner-lead{font-size:16px}
  .erg-fuss{margin:20px 0 0; font-size:13px}
  .q-huelle.q-huelle-top{padding-top:26px}
  .res-sec{gap:18px; padding-top:30px}
  .res-kopf{gap:12px; padding-bottom:10px}
  .res-karte h3{font-size:24px}
  .res-karte .links p{font-size:16px}
  .res-schritt{flex:1 1 auto; width:100%}
  .site-foot{flex-direction:column; align-items:flex-start; gap:12px;
    font-size:13px; padding:26px var(--pad)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Sprungmarke für Tastatur und Screenreader ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:14px 22px;
  border-radius:0 0 var(--r-sm) 0; font-size:15px; font-weight:500;
  text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- Druck: Ergebnis der Modellrechnung mitnehmen ---------- */
@media print{
  .skip-link, .head-nav, .hexwrap, .btn-row, .cta-band, .rechner-info{display:none!important}
  body{background:#fff}
  .card, .card-flat, .card-chip, .card-soft{box-shadow:none; break-inside:avoid}
  .erg-summe{background:none!important; border:1.7px solid var(--ink)}
  .sec{padding:16px 0 0}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:11px; color:#6b6b6b}
  .annahmen{break-inside:avoid}
}

/* ---------- Gesprächsformular ---------- */
.feld textarea{
  width:100%; font:inherit; font-size:17px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; background:var(--bg); resize:vertical; min-height:110px;
}
.feld textarea:focus{outline:0; border-color:var(--lila);
  box-shadow:0 0 0 3px rgba(136,159,254,.16)}
.feld input[type=text], .feld input[type=email], .feld input[type=tel]{
  width:100%; font:inherit; font-size:17px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; background:var(--bg);
}
.feld input::placeholder, .feld textarea::placeholder{color:#9a9a9a}
.feld input:focus{outline:0; border-color:var(--lila);
  box-shadow:0 0 0 3px rgba(136,159,254,.16)}
.feld .fehler{font-size:14px; color:#b3261e; margin-top:2px}
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"]{border-color:#b3261e}

.einwilligung{display:flex; gap:14px; align-items:flex-start;
  font-size:15px; line-height:1.55; color:var(--ink-2)}
.einwilligung input[type=checkbox]{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  accent-color:var(--ink); cursor:pointer;
}
.einwilligung a{color:var(--ink)}
.einwilligung.ungueltig{color:#b3261e}
.einwilligung.ungueltig input[type=checkbox]{outline:2px solid #b3261e; outline-offset:2px}

#gf-status{font-weight:500}
#gf-status.ok{color:#0f7b3f}
#gf-status.fehler{color:#b3261e}

@media(max-width:900px){
  #gespraech-form{padding:26px!important}
  .einwilligung{font-size:14px}
}
@media print{ #gespraech-form{display:none!important} }

/* ---------- Häufige Fragen ---------- */
.faq-liste{display:flex; flex-direction:column; gap:12px}
.faq{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 28px}
.faq summary{cursor:pointer; list-style:none; font-size:19px; font-weight:600;
  letter-spacing:-0.02em; display:flex; align-items:flex-start; gap:16px; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; margin-left:auto; font-size:1.5rem; font-weight:400;
  color:var(--ink-3); line-height:1; flex:0 0 auto}
.faq[open] summary::after{content:'–'}
.faq[open] summary{margin-bottom:14px}
.faq p{font-size:17px; line-height:1.6; color:var(--ink-2); max-width:52em}
@media(max-width:900px){
  .faq{padding:20px 22px}
  .faq summary{font-size:17px; gap:12px}
  .faq p{font-size:16px}
}
@media print{ .faq{break-inside:avoid} .faq p{display:block!important} }

/* ---------- Touch-Ziele: mindestens 44 px, wie in den Plattform-Richtlinien ---------- */
@media (pointer:coarse), (max-width:900px){
  /* Fuß- und Kopfzeilen-Links bekommen Tippfläche über Innenabstand */
  .site-foot a, .foot-links a{
    display:inline-flex; align-items:center; min-height:44px; padding:2px 0;
  }
  .head-nav a{min-height:44px; display:inline-flex; align-items:center}
  .logo{min-height:44px; display:inline-flex; align-items:center}

  /* Aufklapp-Zeilen (Annahmen, Fragen) */
  .annahmen summary, .faq summary{min-height:44px; align-items:center}
  .faq[open] summary{align-items:flex-start}

  /* Einwilligungshaken: größere Trefferfläche, ohne die Optik zu ändern */
  .einwilligung{position:relative; min-height:44px; padding:8px 0}
  .einwilligung input[type=checkbox]{width:24px; height:24px}
  .einwilligung input[type=checkbox]::before{
    content:''; position:absolute; left:-10px; top:0; width:44px; height:100%;
  }

  /* Zurück-Zeile im Fragebogen */
  .q-zurueck, .q-meta button{min-height:44px; display:inline-flex; align-items:center}

  /* Ergebnis-Schaltfläche und Produktknöpfe */
  .btn{min-height:48px}
}

/* ---------- Ergebnis: Gesamtskala ---------- */
.skala-anzeige{margin-top:22px}
.skala-bahn{
  position:relative; height:12px; border-radius:999px; margin:34px 0 14px;
  background:linear-gradient(to right, var(--mint) 0%, #cfe8e6 28%, var(--chip) 50%, #f3ddd9 74%, var(--blush) 100%);
}
.skala-marke{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:999px;
  background:var(--card); border:3px solid var(--ink);
  transition:left .5s cubic-bezier(.4,0,.2,1);
}
.skala-marke span{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.skala-stufen{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.skala-stufen span{display:flex; flex-direction:column; gap:2px; padding-top:10px;
  border-top:2px solid var(--line)}
.skala-stufen b{font-size:14px; font-weight:600; color:var(--ink-3)}
.skala-stufen i{font-size:12px; font-style:normal; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.skala-stufen span.aktiv{border-top-color:var(--ink)}
.skala-stufen span.aktiv b{color:var(--ink)}

/* ---------- Ergebnis: Teilbereiche ---------- */
.dim-liste{display:flex; flex-direction:column; gap:24px}
.dim-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:9px}
.dim-name{font-size:18px; font-weight:600; letter-spacing:-0.01em}
.dim-wert{font-size:18px; font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap}
.dim-balken{height:10px; background:var(--chip); border-radius:999px; overflow:hidden}
.dim-fuell{height:100%; border-radius:999px; width:0;
  transition:width .6s cubic-bezier(.4,0,.2,1)}
.dim-fuell.ruhig  {background:var(--mint)}
.dim-fuell.leicht {background:linear-gradient(90deg,var(--mint),#8fd9e4)}
.dim-fuell.mittel {background:var(--grad)}
.dim-fuell.hoch   {background:linear-gradient(90deg,#889FFE,#e5a8a3)}
.dim-hinweis{font-size:14px; color:var(--ink-3); margin-top:7px; line-height:1.5}

@media(max-width:900px){
  .skala-stufen{grid-template-columns:1fr 1fr; gap:12px}
  .skala-stufen b{font-size:13px}
  .dim-name, .dim-wert{font-size:16px}
  .dim-liste{gap:20px}
}
@media print{ .dim-fuell{print-color-adjust:exact; -webkit-print-color-adjust:exact} }

/* ---------- Hervorgehobener Navigationslink ---------- */
.nav-cta{
  display:inline-flex!important; align-items:center; gap:8px;
  background:var(--ink); color:#fff!important; border-radius:999px;
  padding:10px 20px!important; font-weight:500; white-space:nowrap;
  transition:transform .16s, box-shadow .16s;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(17,17,17,.2);
  color:#fff!important}
@media(max-width:900px){
  /* Auf schmalen Geräten bleibt nur dieser eine Link stehen */
  .head-nav{display:flex!important; gap:0}
  .head-nav a:not(.nav-cta){display:none}
  .nav-cta{font-size:14px; padding:9px 16px!important; min-height:44px}
}
@media(max-width:400px){
  .nav-cta{font-size:13px; padding:8px 13px!important}
}

/* ---------- Logo mit Schriftzug und Claim ----------
   Vorgabe aus wiki/concepts/ory-ci.md, Abschnitt „Kopfzeile / Claim" (01.09.2026):
   Neben dem Logo steht „Your Partner in Health" als Eyebrow, nicht als Wortmarke —
   IBM Plex Mono 500, Versalien, Laufweite 0,13 em, Wortabstand −0,14 em,
   Farbe #8B89A0. Bewusst kleiner als das Logo, es soll nicht dagegen antreten. */
.logo{display:inline-flex; align-items:center; gap:14px; text-decoration:none}
.logo-bild{height:26px; width:auto; display:block}
.logo-claim{
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:500; text-transform:uppercase;
  font-size:10px; letter-spacing:0.13em; word-spacing:-0.14em;
  color:#8B89A0; line-height:1; white-space:nowrap;
}
@media(max-width:900px){
  .logo{gap:11px}
  .logo-bild{height:22px}
  .logo-claim{font-size:9px; letter-spacing:0.11em}
}
@media(max-width:430px){
  .logo-claim{display:none}   /* auf sehr schmalen Geräten bleibt nur die Wortmarke */
}

/* ---------- Vertraulichkeits-Hinweis im Fragebogen ---------- */
.note-vertraulich{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--mint); border-radius:var(--r); padding:22px 26px;
}
.note-vertraulich .iconbox{background:rgba(255,255,255,.75); border-color:var(--ink)}
.note-vertraulich p{font-size:16px; line-height:1.55; margin:0}
#r-hilfe{scroll-margin-top:24px}
@media(max-width:900px){
  #r-hilfe{padding:26px 22px!important}
  .note-vertraulich{padding:18px 20px; gap:12px}
  .note-vertraulich p{font-size:15px}
}

/* Ab Stufe 3 tritt der Beratungsblock deutlicher hervor */
#r-hilfe.betont{border-color:var(--ink); box-shadow:0 18px 50px rgba(17,17,17,.09)}

/* ---------- Bestätigung nach dem Absenden ---------- */
.bestaetigung{
  display:flex; flex-direction:column; gap:16px;
  background:var(--mint); border-radius:var(--r); padding:44px 48px;
  animation:danke .45s cubic-bezier(.2,.8,.3,1);
}
.bestaetigung:focus{outline:none}
.bestaetigung .haken{
  width:56px; height:56px; border-radius:999px; background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.bestaetigung h3{margin:0}
.bestaetigung p{color:var(--ink-2)}
.danke-punkte{display:flex; flex-direction:column; gap:9px; margin-top:6px}
.danke-punkte span{display:flex; gap:12px; font-size:16px; color:var(--ink-2)}
@keyframes danke{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@media(max-width:900px){
  .bestaetigung{padding:26px 22px; gap:13px}
  .bestaetigung h3{font-size:22px}
  .bestaetigung .haken{width:46px; height:46px}
  .danke-punkte span{font-size:15px}
}
@media(prefers-reduced-motion:reduce){ .bestaetigung{animation:none} }

/* ---------- Sichtbare Fehlermeldung statt kleiner Statuszeile ---------- */
.sende-fehler{
  background:#fdf1f0; border:1px solid #f4cfcc; border-radius:var(--r);
  padding:20px 24px; margin-top:22px; font-size:16px; line-height:1.55;
}
.sende-fehler strong{display:block; margin-bottom:5px}
.sende-fehler a{color:var(--ink)}