/* ══════════════════════════════════════════════════════════════
   Dieselben Werte wie in Vaschido Studio.

   Zwei Auftritte, die dasselbe Haus meinen, muessen zusammengehen.
   Wer von hier ins Studio wechselt, soll nicht das Gefuehl haben,
   die Firma gewechselt zu haben.

   Anthrazit statt Grau, vier Pixel Radius statt zwoelf, eckige
   Flaechen statt Pillen. Eine Kante braucht einen Grund; Farbe
   bedeutet genau eine Sache.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#fbfbfc;            /* Papier mit kaltem Stich */
  --surface:#ffffff;
  --bg-alt:#f5f6f8;
  --ink:#14171c;
  --ink-mid:#5a616b;
  --ink-soft:#878e98;
  --line:#e4e6ea;
  --line-strong:#d2d6dc;
  --line-soft:#edeff2;
  --knopf-rand:#c9ced5;
  --knopf-rand-hover:#a2a9b2;
  --knopf-flaeche-hover:#f2f3f5;
  --signal:#a6521c;        /* genau ein Signalton */
  --shell:64rem;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 2rem}
@media(max-width:640px){.shell{padding:0 1.5rem}}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r)}

/* ---------- Header ---------- */
/* Kein Milchglas. Das Studio hat eine ruhige weisse Leiste mit
   einer Linie darunter, und was durchscheint, lenkt nur ab. */
.site-head{
  position:sticky;top:0;z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--line-strong);
}
.head-in{display:flex;align-items:center;justify-content:space-between;height:3.5rem;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;font-size:1.06rem;letter-spacing:-.022em;flex:none}
.logo .mark{
  width:26px;height:24px;flex:none;
  background:url("/vaschido%20(1).png") no-repeat;
  background-size:66px auto;
  background-position:-20px -11px;
}
.nav{display:flex;align-items:center;gap:1.6rem;font-size:.88rem;color:var(--ink-mid)}
.nav a{text-decoration:none;transition:color .15s;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
@media(max-width:820px){.nav .hide-sm{display:none}}

/* Eckig, wie im Studio. Eine Pille bekaeme eine Bedeutung, die sie
   hier nicht hat -- und ein Werkzeug fuer Elektrotechnik verspricht
   mit runden Formen etwas, das es nicht einloest.

   Die Rangfolge macht die Flaeche, nicht die Plastik: die
   Haupthandlung ist gefuellt, alles andere hat einen Rand. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;text-decoration:none;
  border:1px solid var(--ink);
  font-size:.94rem;font-weight:500;line-height:1;
  padding:.8rem 1.4rem;border-radius:var(--r);
  transition:background .12s,border-color .12s;
}
.btn:hover{background:#2b3038;border-color:#2b3038;color:#fff}
.btn:active{background:#0c0e11;border-color:#0c0e11}
.btn-sm{font-size:.86rem;padding:.48rem 1rem}
.btn-ghost{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--knopf-rand);
}
.btn-ghost:hover{
  background:var(--knopf-flaeche-hover);border-color:var(--knopf-rand-hover);
}

/* ---------- Sektionen ---------- */
section{padding:7rem 0;scroll-margin-top:3.5rem}
section.tight{padding:4.5rem 0}
section.tint{background:var(--bg-alt)}
h1{
  font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.07;font-weight:600;
  letter-spacing:-.038em;margin:0 0 1.6rem;
}
h2{
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.14;font-weight:600;
  letter-spacing:-.03em;margin:0 0 1.4rem;
}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .5rem}
p{margin:0 0 1.2rem}
p:last-child{margin-bottom:0}
.lead{font-size:1.28rem;line-height:1.45;color:var(--ink-mid);letter-spacing:-.012em}
.muted{color:var(--ink-mid)}
.small{font-size:.95rem}
.prose p{color:var(--ink-mid);max-width:42rem}
.prose h2{margin-top:3.5rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:2.25rem;font-size:1.08rem}
.center{text-align:center}
.center h1,.center h2,.center .lead{margin-left:auto;margin-right:auto}
.center h1{max-width:18ch}
.center h2{max-width:22ch}
.center .lead{max-width:36rem}

/* ---------- Hero ---------- */
.hero{padding:7.5rem 0 4.5rem;text-align:center}
.hero.left{text-align:left}
.hero.left h1,.hero.left .lead{margin-left:0;max-width:none}
.hero.left h1{max-width:20ch}
.hero.left .lead{max-width:38rem}
@media(max-width:640px){.hero{padding:4.5rem 0 3rem}}
.hero .btn{margin-top:2.5rem}
.eyebrow{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.2rem}

/* ---------- Video ---------- */
.stage{padding:0 0 7rem;display:flex;justify-content:center}
.frame{
  width:min(calc(100vw - 2.5rem), calc((100vh - 8rem) * 16 / 9), 76rem);
  aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.10);
}
.frame video{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
@media(max-width:760px){
  .stage{padding-bottom:5rem}
  .frame{width:calc(100vw - 2rem)}
}

/* ---------- Raster ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem;text-align:center}
@media(max-width:760px){.trio{grid-template-columns:1fr;gap:2.75rem}}
.trio p{font-size:.99rem;color:var(--ink-mid);margin:0}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:5rem}
@media(max-width:820px){.duo{grid-template-columns:1fr;gap:3rem}}
.duo p{color:var(--ink-mid);font-size:1.02rem}

.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;margin-top:3.5rem}
@media(max-width:860px){.phases{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:520px){.phases{grid-template-columns:1fr}}
.phase{padding-top:1.2rem;border-top:1px solid var(--line)}
.phase .n{font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;display:block;margin-bottom:.7rem}
.phase p{font-size:.94rem;color:var(--ink-mid);margin:0}

/* ---------- Karten / Verweise ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
@media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  display:block;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;background:#fff;
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--ink-soft);transform:translateY(-2px)}
.card p{font-size:.95rem;color:var(--ink-mid);margin:0}
.card .go{display:block;margin-top:1rem;font-size:.88rem;color:var(--ink-soft)}

/* ---------- Vergleichstabelle ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:2rem 0}
table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:32rem;background:#fff}
th,td{text-align:left;padding:.95rem 1.25rem;border-top:1px solid var(--line-soft);vertical-align:top}
thead th{border-top:0;background:var(--bg-alt);font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
td{color:var(--ink-mid)}
td:first-child{color:var(--ink);font-weight:500}

/* ---------- Fragen ---------- */
.qa{border-top:1px solid var(--line-soft);padding:1.6rem 0}
.qa:last-of-type{border-bottom:1px solid var(--line-soft)}
.qa h3{margin-bottom:.6rem}
.qa p{color:var(--ink-mid);margin:0;max-width:44rem}

/* ---------- Aufzählung ohne Punkte ---------- */
.plainlist{list-style:none;margin:0 0 1.2rem;padding:0}
.plainlist li{padding:.7rem 0;border-top:1px solid var(--line-soft);color:var(--ink-mid)}
.plainlist li:first-child{border-top:0}

/* ---------- Kontakt ---------- */
.people{margin:3rem auto 0}
.person{text-align:center}
.person h3{margin-bottom:.9rem}
.person a{display:block;text-decoration:none;color:var(--ink-mid);font-size:.99rem;transition:color .15s}
.person a:hover{color:var(--ink)}

/* ---------- Abschluss-Aufruf ---------- */
.cta{text-align:center}
.cta .lead{margin-bottom:2.25rem}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line-soft);padding:3.5rem 0 2.5rem;font-size:.88rem;color:var(--ink-soft);background:var(--bg-alt)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
@media(max-width:700px){.foot-cols{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:460px){.foot-cols{grid-template-columns:1fr}}
.foot-cols h4{font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1rem}
.foot-cols a{display:block;text-decoration:none;color:var(--ink-mid);margin-bottom:.55rem;transition:color .15s}
.foot-cols a:hover{color:var(--ink)}
.foot-cols p{color:var(--ink-mid);margin:0}
.foot-in{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;padding-top:1.75rem;border-top:1px solid var(--line)}
.foot-in a{text-decoration:none;transition:color .15s}
.foot-in a:hover{color:var(--ink)}
.foot-links{display:flex;gap:1.75rem}

/* ---------- Rechtstexte ---------- */
.legal{padding:4.5rem 0 6rem;max-width:44rem}
.legal h1{font-size:clamp(1.9rem,4.5vw,2.5rem);margin-bottom:3rem}
.legal h2{font-size:1.2rem;margin:3rem 0 .9rem}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal ul{color:var(--ink-mid)}
.legal ul{margin:0 0 1.1rem;padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal address{font-style:normal;color:var(--ink-mid);margin-bottom:1.1rem}
.legal address.plain{color:var(--ink)}
.hinweis{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--ink-soft)}
.stand{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.5rem}

/* ---------- Quellenangaben ---------- */
.quelle{
  display:block;margin-top:.6rem;
  font-size:.83rem;line-height:1.5;color:var(--ink-soft);
}
.quelle a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.quelle a:hover{color:var(--ink)}
.belege{
  margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft);
}
.belege h3{font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.belege ol{margin:0;padding-left:1.4rem}
.belege li{margin-bottom:.7rem;line-height:1.55}
.belege a{color:var(--ink-mid)}
sup.ref{font-size:.7em;font-weight:600;color:var(--ink-soft);margin-left:.12em}
sup.ref a{text-decoration:none;color:inherit}
sup.ref a:hover{color:var(--ink)}

/* Belegqualität in Tabellen */
td .gut{color:#1a7f4b;font-weight:600}
td .mittel{color:#8a6d1f;font-weight:600}
td .schwach{color:#9a3b3b;font-weight:600}

/* ---------- Preis-/Eckdatenleiste ---------- */
.fakten{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin:2.5rem 0 0;padding:1.75rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media(max-width:760px){.fakten{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}}
.fakten div{text-align:left}
.fakten .wert{display:block;font-size:1.45rem;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin-bottom:.2rem}
.fakten .was{font-size:.88rem;color:var(--ink-soft);line-height:1.4}

/* ---------- Eignungscheck ---------- */
.check{max-width:44rem}
.frage{padding:1.5rem 0;border-top:1px solid var(--line-soft)}
.frage:first-of-type{border-top:0;padding-top:0}
.frage legend{font-size:1rem;font-weight:600;letter-spacing:-.01em;padding:0;margin-bottom:.9rem;color:var(--ink)}
.frage .nr{color:var(--ink-soft);font-weight:400;margin-right:.5rem;font-variant-numeric:tabular-nums}
.frage fieldset{border:0;padding:0;margin:0}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl label{
  display:inline-flex;align-items:center;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.93rem;color:var(--ink-mid);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;
}
.wahl label:hover{border-color:var(--ink-soft)}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl input:checked + span{color:#fff}
.wahl label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.wahl input:focus-visible + span{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r)}
.check-aktion{margin-top:2.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.check-stand{font-size:.88rem;color:var(--ink-soft)}

.ergebnis{
  margin-top:2.5rem;padding:1.9rem;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;
}
.ergebnis[hidden]{display:none}
.ergebnis .stufe{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .7rem}
.ergebnis h3{font-size:1.25rem;margin-bottom:.7rem}
.ergebnis p{color:var(--ink-mid);margin-bottom:1.1rem}
.ergebnis .grund{
  margin:1.1rem 0;padding:.9rem 1.1rem;border-left:2px solid var(--line);
  background:var(--bg-alt);font-size:.95rem;color:var(--ink-mid);border-radius:0 var(--r) var(--r) 0;
}
.ergebnis.a{border-color:#1a7f4b}
.ergebnis.a .stufe{color:#1a7f4b}
.ergebnis.b{border-color:#8a6d1f}
.ergebnis.b .stufe{color:#8a6d1f}
.ergebnis.c{border-color:var(--line)}

/* ---------- Enthalten / nicht enthalten ---------- */
.umfang{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-top:2.5rem}
@media(max-width:760px){.umfang{grid-template-columns:1fr;gap:2.5rem}}
.umfang h3{margin-bottom:1rem}
.umfang ul{list-style:none;margin:0;padding:0}
.umfang li{padding:.62rem 0;border-top:1px solid var(--line-soft);color:var(--ink-mid);font-size:.97rem}
.umfang li:first-child{border-top:0}

/* ---------- Ablaufschritte ---------- */
.schritte{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:s}
.schritte li{counter-increment:s;position:relative;padding:1.15rem 0 1.15rem 3.2rem;border-top:1px solid var(--line-soft)}
.schritte li:first-child{border-top:0}
.schritte li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.15rem;
  font-size:.82rem;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;line-height:1.6;
}
.schritte strong{display:block;margin-bottom:.2rem}
.schritte span{color:var(--ink-mid);font-size:.96rem}

/* ---------- Formular ---------- */
.formular{max-width:40rem;margin-top:2.5rem}
.feld{margin-bottom:1.25rem}
.feld label{display:block;font-size:.92rem;font-weight:500;margin-bottom:.4rem}
.feld .hint{font-weight:400;color:var(--ink-soft)}
.feld input,.feld textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--ink);
  padding:.72rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .12s;
}
.feld textarea{min-height:5.5rem;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--ink)}
.feld-zwei{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:560px){.feld-zwei{grid-template-columns:1fr}}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:1.75rem 0;font-size:.92rem;color:var(--ink-mid)}
.zustimmung input{margin-top:.28rem;flex:none}
.hinweisbox{
  margin-top:1.5rem;padding:1rem 1.2rem;border-radius:var(--r);
  background:var(--bg-alt);font-size:.93rem;color:var(--ink-mid);
}
.hinweisbox.gut{background:#eaf6ef;color:#1a5c39}
.hinweisbox.fehler{background:#fbeeee;color:#8a3232}

/* ---------- Downloadkarte ---------- */
.download{
  display:flex;align-items:center;gap:1.1rem;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;
  background:#fff;transition:border-color .15s;max-width:36rem;
}
.download:hover{border-color:var(--ink-soft)}
.download .sym{
  flex:none;width:2.6rem;height:2.6rem;border-radius:var(--r);
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:600;letter-spacing:.03em;
}
.download strong{display:block;font-size:1rem;margin-bottom:.15rem}
.download span{font-size:.9rem;color:var(--ink-soft)}

/* ---------- Partnerband auf der Startseite ---------- */
.partnerband{
  padding:5rem 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.partnerband .eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);margin-bottom:1.1rem;
}
.partnerband h2{max-width:24ch}
.partnerband .lead{max-width:40rem}
.partnerband .fakten{margin-top:2.25rem}
.partnerband .hero-actions{margin-top:2.25rem}
@media(max-width:640px){.partnerband{padding:3.5rem 0}}

.fakten.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.fakten.drei{grid-template-columns:1fr;gap:1.25rem}}
.partnerband .lead strong{color:var(--ink);font-weight:600}

/* PDF als schlichter Textlink */
.pdflink{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pdflink:hover{color:var(--ink-mid)}

/* Eignungscheck: schrittweises Aufklappen */
.frage.verdeckt{display:none}
.frage.frisch{animation:auf .28s ease-out}
@keyframes auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.check-aktion.verdeckt{display:none}

/* ---------- Aufklappbare Fragen ---------- */
details.qa{border-top:1px solid var(--line-soft);padding:0;border-bottom:0}
details.qa:last-of-type{border-bottom:1px solid var(--line-soft)}
details.qa summary{
  list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-size:1.05rem;font-weight:600;letter-spacing:-.012em;color:var(--ink);
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"";position:absolute;right:.35rem;top:1.55rem;
  width:.5rem;height:.5rem;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .18s;
}
details.qa[open] summary::after{transform:rotate(-135deg);top:1.75rem}
details.qa summary:hover{color:var(--ink-mid)}
details.qa .antwort{padding:0 0 1.35rem;color:var(--ink-mid);max-width:44rem}
details.qa .antwort p{margin:0 0 .8rem}
details.qa .antwort p:last-child{margin-bottom:0}

/* ---------- Produktansicht auf Unterseiten ---------- */
.schau{max-width:46rem;margin-top:2.5rem}
.schau video{
  display:block;width:100%;border-radius:var(--r);
  border:1px solid var(--line-strong);
  background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.08);
}
.schau .bu{display:block;margin-top:.7rem;font-size:.86rem;color:var(--ink-soft)}

/* Preis-Fußnote */
.preisnote{font-size:.9rem;color:var(--ink-soft);margin-top:.6rem}

/* ---------- Vaschido Studio ---------- */
.studio-block{max-width:44rem}
.studio-block h2{margin-bottom:.8rem}
.studio-block p{color:var(--ink-mid)}
.studio-frei{
  margin-top:1.4rem;font-size:.94rem;color:var(--ink);
  border-left:2px solid var(--signal);padding-left:.9rem;
}
.studio-tun{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}