/*  Selbst gehostet statt von Google Fonts: siehe assets/fonts/NOTICE.md.
    Eine variable Datei deckt 400–700 ab — die Seite nutzt 400, 500, 600, 640,
    660 und 700, mit statischen Schnitten waeren das fuenf Anfragen.
    font-display:swap zeigt sofort die Systemschrift; der Wechsel kostet
    gemessen hoechstens 3 px Versatz.                                          */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-var.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;
}

/*  School Base — Gestaltungssystem.
    Dieselbe Sprache wie churchbasecloud.com und campusbasecloud.com
    (Typografie, Rhythmus, Bausteine), aber ein eigener Farbton: Gruen fuer den
    Sportplatz und das Kassenbuch. So sieht man auf einen Blick, dass die drei
    zusammengehoeren und trotzdem drei Produkte sind.                           */

:root{
  --ground:#f7f4ee; --ground-2:#efe9df; --surface:#ffffff; --surface-2:#fbf9f5;
  --ink:#132229; --heading:#0d1b22; --body:#414c53; --muted:#6c7780; --faint:#9aa2a8;
  --brand:#17795a; --brand-700:#115c45; --brand-800:#0b3f2f; --brand-50:#e8f3ee; --brand-glow:#34b083;
  --gold:#b0863a; --gold-soft:#d9b877;
  --line:#e7e0d4; --hair:#efe9dd;
  --dark:#0a1f18; --dark-2:#0e2b21; --dark-line:#1c4435; --dark-text:#c6d9ce; --dark-faint:#7fa293;
  --shadow-s:0 1px 2px rgba(17,38,30,.05);
  --shadow-m:0 4px 14px -6px rgba(17,38,30,.14), 0 1px 2px rgba(17,38,30,.05);
  --shadow-l:0 30px 60px -28px rgba(9,42,32,.42);
  --sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --rad:16px;
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top haelt Sprungziele unter der klebenden Kopfzeile frei —
   ohne das verschwindet nach jedem "Weiter" die Schrittueberschrift darunter. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--brand-700)}
h1,h2,h3,h4{color:var(--heading); font-weight:640; line-height:1.14; letter-spacing:-.018em; margin:0}
h1{font-size:clamp(2.15rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem)}
h3{font-size:1.12rem; letter-spacing:-.01em}
p{margin:0}
.wrap{width:min(1160px,calc(100% - 40px)); margin-inline:auto}
.accent{color:var(--brand); font-family:var(--serif); font-style:italic; font-weight:400}
.eyebrow{
  display:inline-block; font-size:.735rem; font-weight:660; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-700); background:var(--brand-50);
  border:1px solid #cfe5da; border-radius:999px; padding:6px 13px;
}
.sub{font-size:clamp(1.02rem,1.5vw,1.19rem); color:var(--body); margin-top:18px; max-width:62ch}
.lead{font-size:1.06rem; color:var(--muted); max-width:66ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px; border-radius:10px; box-shadow:var(--shadow-m)}
:focus-visible{outline:3px solid var(--brand-glow); outline-offset:2px; border-radius:6px}

/* ---------- Kopfzeile ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(247,244,238,.88);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--hair);
}
/* Die Kopfzeile darf nie breiter werden als der Bildschirm. Sie war es: ein
   flex-Zeile ohne Umbruch, dazu ein Schriftzug mit flex:0 0 auto — unter 461 px
   Viewport schob sie die ganze Seite waagerecht weg. Deshalb hier drei Dinge:
   umbrechen duerfen, schrumpfen duerfen (min-width:0), und unter 600 px steht
   die Handlungsaufforderung in einer eigenen Zeile statt neben dem Schriftzug. */
.navrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; min-height:68px}
.wordmark{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; flex:0 1 auto; min-width:0}
.wordmark img{width:38px; height:38px; border-radius:11px; flex:0 0 auto}
.wm-t{display:flex; flex-direction:column; line-height:1.16; min-width:0}
.wm-t b{font-size:1.02rem; color:var(--heading); letter-spacing:-.015em; overflow-wrap:anywhere}
.wm-t span{font-size:.72rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
.navlinks{display:flex; gap:16px; margin-left:auto}
.navlinks a{font-size:.9rem; color:var(--body); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--brand-700); border-bottom-color:var(--brand-glow)}
/* nowrap: Sprachwahl und Knopf gehoeren nebeneinander. Mit wrap stapelten sie
   sich bei knappem Platz uebereinander und machten die Kopfzeile 97 px hoch,
   obwohl waagerecht alles passte. */
.navcta{display:flex; flex-wrap:nowrap; gap:10px; align-items:center; margin-left:auto; min-width:0}
.navlinks + .navcta{margin-left:0}
/* Erst ab 1120 px ist Platz fuer die Punkte NEBEN Sprachwahl und Knopf —
   gemessen mit geladener Hausschrift, nicht mit der Rueckfallschrift. */
@media (max-width:1120px){ .navlinks{display:none} .navcta{margin-left:auto} }
@media (max-width:560px){ .navcta .ghost{display:none} .wm-t span{display:none} }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:.94rem; font-weight:600; text-decoration:none; cursor:pointer;
  padding:11px 20px; border-radius:12px; border:1px solid transparent; transition:.16s ease;
}
.btn.primary{background:var(--brand); color:#fff; box-shadow:0 6px 16px -8px rgba(14,125,132,.75)}
.btn.primary:hover{background:var(--brand-700); transform:translateY(-1px)}
.btn.ghost{background:var(--surface); color:var(--heading); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand-glow); color:var(--brand-700)}
.btn.onDark{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.24)}
.btn.onDark:hover{background:rgba(255,255,255,.16)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}

/* Sprachwahl */
.langs{display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px}
/* Vorher 2,1 px Abstand zwischen den drei Sprachen und 22 px Hoehe — auf dem
   Handy trifft man damit zuverlaessig die falsche. Jetzt 44 px hoch mit echtem
   Zwischenraum. */
.langs{gap:4px}
.langs a{
  font-size:.82rem; font-weight:640; letter-spacing:.04em; text-decoration:none;
  color:var(--muted); padding:0 12px; border-radius:7px;
  min-height:38px; display:inline-flex; align-items:center;
}
.langs a[aria-current="true"]{background:var(--brand-50); color:var(--brand-700)}
.langs a:hover{color:var(--brand-700)}

/* Unter 600 px steht die Handlungsaufforderung in einer eigenen Zeile — dort
   aber komplett, nicht in einer dritten. Deshalb Sprachwahl und Knopf hier
   knapper setzen. */
@media (max-width:600px){
  .navrow{padding-block:10px}
  /* Frueher stand hier width:100% — die Sprachwahl und der Knopf bekamen eine
     eigene Zeile, damit der Weg zum Fragebogen nicht verschwindet. Seit es
     die kurze Beschriftung gibt, passt alles in eine Zeile, und die klebende
     Kopfzeile kostet 69 statt 117 px. */
  .navcta{margin-left:auto; justify-content:flex-end; flex-wrap:nowrap}
  .navcta .btn{padding:9px 11px; font-size:.83rem; min-width:0}
  .langs{padding:2px}
  .langs a{padding:4px 6px; font-size:.74rem}
}

/* ---------- Abschnitte ---------- */
.sec{padding:clamp(58px,7vw,96px) 0}
.sec-head{max-width:70ch; margin-bottom:38px}
.sec-head h1,.sec-head h2{margin-top:14px}
.sec-head p{margin-top:16px}
.alt{background:var(--ground-2)}
.darkwrap{background:var(--dark); color:var(--dark-text)}
.darkwrap h2,.darkwrap h3{color:#fff}
.darkwrap .eyebrow{background:rgba(47,182,176,.12); border-color:rgba(47,182,176,.3); color:#8fded8}
.darkwrap .lead,.darkwrap .sub{color:var(--dark-faint)}

/* ---------- Hero ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,64px); position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:auto -10% 40% 55%; height:520px;
  background:radial-gradient(closest-side, rgba(47,182,176,.16), transparent 70%); pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,58px); align-items:center; position:relative}
/* Rasterzellen haben von Haus aus min-width:auto und schrumpfen deshalb nie unter
   die Mindestbreite ihres Inhalts. Die Tabelle im Vorschaufenster misst dort rund
   353 px — bei 320 px Bildschirm wurde die Zelle also 355 px breit, und
   .hero{overflow:hidden} schnitt den Absatz daneben einfach ab. Unsichtbar und
   unerreichbar, weil geklippt statt gescrollt. */
.hero-grid > *{min-width:0}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr} }
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:.86rem; color:var(--muted)}
.hero-meta span{display:inline-flex; align-items:center; gap:7px}
.hero-meta span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-glow)}

/* ---------- Karten ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:24px 22px; box-shadow:var(--shadow-s); transition:.18s ease;
}
.card:hover{box-shadow:var(--shadow-m); transform:translateY(-2px); border-color:#dcd3c3}
.card h3{margin-bottom:9px}
.card p{font-size:.95rem; color:var(--muted)}
.card .ic{
  width:38px; height:38px; border-radius:11px; background:var(--brand-50);
  display:grid; place-items:center; margin-bottom:15px; color:var(--brand-700);
}
.card .ic svg{width:20px; height:20px}
.darkwrap .card{background:var(--dark-2); border-color:var(--dark-line); box-shadow:none}
.darkwrap .card p{color:var(--dark-faint)}
.darkwrap .card .ic{background:rgba(47,182,176,.13); color:#8fded8}
.darkwrap .card:hover{border-color:#2a5560; transform:translateY(-2px)}

/* ---------- Statement / Zahlen ---------- */
.statement{background:var(--surface-2); border-block:1px solid var(--hair)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{padding:20px 4px}
.stat b{display:block; font-family:var(--serif); font-size:2.1rem; color:var(--brand-700); line-height:1}
.stat span{display:block; font-size:.88rem; color:var(--muted); margin-top:8px}

/* ---------- Vergleich ---------- */
.compare{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .compare{grid-template-columns:1fr} }
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:24px 22px}
.pcard.cb{border-color:var(--brand); box-shadow:var(--shadow-m); position:relative}
.pcard.cb::before{
  content:attr(data-tag); position:absolute; top:-11px; left:22px; background:var(--brand); color:#fff;
  font-size:.7rem; font-weight:660; letter-spacing:.09em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
}
.pcard h3{margin-bottom:14px}
.pcard ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pcard li{position:relative; padding-left:26px; font-size:.94rem; color:var(--muted)}
.pcard li::before{
  content:"–"; position:absolute; left:6px; top:-1px; color:var(--faint); font-weight:700;
}
.pcard.cb li{color:var(--body)}
.pcard.cb li::before{content:"✓"; color:var(--brand); left:4px; font-size:.9rem}

/* ---------- Oberflächen-Vorschau ---------- */
.browser{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-l);
}
.browser .bar{
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--hair);
}
.browser .bar i{width:9px; height:9px; border-radius:50%; background:#ddd5c6; display:block}
.browser .bar b{
  margin-left:10px; font-weight:500; font-size:.76rem; color:var(--faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Breiter Inhalt scrollt in seinem eigenen Kasten, nicht im Dokument. */
.pane{padding:18px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.pane .tbl{min-width:300px}
.tbl{width:100%; border-collapse:collapse; font-size:.85rem}
.tbl th{
  text-align:left; font-weight:600; color:var(--faint); font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; padding:0 10px 9px; border-bottom:1px solid var(--hair);
}
.tbl td{padding:10px; border-bottom:1px solid var(--hair); color:var(--body)}
.tbl tr:last-child td{border-bottom:0}
.pill{
  display:inline-block; font-size:.72rem; font-weight:640; padding:2px 9px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700);
}
.pill.gold{background:#f6eeda; color:#8a6524}
.pill.grey{background:var(--ground-2); color:var(--muted)}
.mini{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.mini div{background:var(--surface-2); border:1px solid var(--hair); border-radius:10px; padding:11px 12px}
.mini b{display:block; font-size:1.24rem; color:var(--heading); font-family:var(--serif); line-height:1}
.mini span{font-size:.72rem; color:var(--faint)}
.caption{font-size:.875rem; color:var(--faint); margin-top:12px}

/* ---------- Callouts ---------- */
.callout{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:12px; padding:20px 22px;
}
.callout.gold{border-left-color:var(--gold)}
.callout h3,.callout .h2-klein{margin-bottom:8px}
.callout p{font-size:.95rem; color:var(--muted)}
.darkwrap .callout{background:var(--dark-2); border-color:var(--dark-line); border-left-color:var(--brand-glow)}
.darkwrap .callout p{color:var(--dark-faint)}

/* ---------- Preis ---------- */
.pricegrid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}
@media (max-width:860px){ .pricegrid{grid-template-columns:1fr} }
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:28px 26px}
.plan .price{font-family:var(--serif); font-size:2.5rem; color:var(--heading); line-height:1; margin:6px 0 4px}
.plan .price small{font-size:.95rem; color:var(--muted); font-family:var(--sans)}

/* ---------- Fussbereich ---------- */
.foot{background:var(--dark); color:var(--dark-faint); padding:52px 0 30px}
/* Semantisch eine Ebene, optisch die kleine Spaltenueberschrift von vorher. */
.foot .foot-h{color:#fff; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px; font-weight:640}
.foot-cols{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:28px}
@media (max-width:820px){ .foot-cols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-cols{grid-template-columns:1fr} }
.foot a{color:var(--dark-text); text-decoration:none; font-size:.92rem; display:block; padding:4px 0}
.foot a:hover{color:var(--brand-glow)}
.foot a,.foot-bottom span{overflow-wrap:anywhere}
.foot-bottom{
  border-top:1px solid var(--dark-line); margin-top:34px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px 24px; font-size:.83rem;
}

/* ---------- Einblenden ----------
   Die Regel haengt an html.js. Diese Klasse setzt school.js als erste Anweisung
   — bewusst im Kopf und ohne defer. Kommt die Datei nicht an, bleibt die Klasse
   aus und der Inhalt steht trotzdem. Eine Marketingseite darf nie hinter einer
   Animation verschwinden. */
/* Einblenden, umgedreht.

   Frueher stand .reveal auf opacity:0 und wurde erst vom IntersectionObserver
   sichtbar gemacht. Feuert der nicht — eine Ansicht, die nicht zeichnet, ein
   Browser ohne Beobachter, ein Fehler weiter oben —, blieb der halbe Seitentext
   unsichtbar. Gemessen wurde genau das: 47 von 49 Bloecken auf opacity 0.

   Der Zwischenschritt (nur noch verschieben statt verstecken) war besser, aber
   nicht gut: In einer Ansicht ohne Bildaufbau laufen CSS-Uebergaenge nicht
   weiter, der 14-px-Versatz blieb also stehen.

   Jetzt traegt der RUHEZUSTAND gar keine Regel. Ein Element sitzt vom ersten
   Bildaufbau an dort, wo es hingehoert, und ist lesbar. Die Bewegung ist eine
   Animation, die NUR beim Einblenden laeuft — bleibt sie aus, faellt nichts
   aus. Das kostet die stufenweise Einblendung; die ist den Preis nicht wert. */
/* OHNE fill-mode. 'both' haelt den Anfangszustand fest, solange die Animation
   nicht laeuft — in einer Ansicht ohne Bildaufbau also dauerhaft, und damit
   waere der Text wieder bei opacity .35 haengengeblieben. Gemessen: 56 von 56.
   Ohne Fuellung gilt vor und nach der Animation der natuerliche Zustand. */
html.js .reveal.on{animation:cb-rein .55s ease}
/* Die Animation ruehrt die Deckkraft NICHT an. In einer Ansicht, die keine
   Bilder aufbaut, steht die laufende Animation bei Zeit 0 still — egal ob
   mit oder ohne fill-mode. Bewegte sie die Deckkraft, waere der Text dort
   dauerhaft blass. Ein Versatz von 14 px in so einem Fall ist ein
   Schoenheitsfehler; blasser oder unsichtbarer Text ist keiner. */
@keyframes cb-rein{from{transform:translateY(14px)} to{transform:none}}
@media (prefers-reduced-motion:reduce){ html.js .reveal.on{animation:none} }
@media print{ html.js .reveal.on{animation:none} }

/* ---------- Druck ---------- */
@media print{
  .nav,.foot,.hero::after,.btn{display:none}
  body{background:#fff}
  .sec{padding:18px 0; break-inside:avoid}
}

/* =========================================================================
   Fragebogen — die elf Fragen
   ========================================================================= */
.disc-wrap{max-width:840px}
.progress{height:5px; background:var(--ground-2); border-radius:999px; overflow:hidden; margin:0 0 30px}
.progress span{display:block; height:100%; width:0; background:var(--brand); transition:width .3s ease}

.disc fieldset{border:0; margin:0 0 8px; padding:0; min-width:0}
.disc legend{
  display:block; width:100%; color:var(--heading); font-weight:640; font-size:1.35rem;
  letter-spacing:-.015em; margin-bottom:22px; padding:0;
}
.disc legend .stepno{
  display:block; font-size:.72rem; font-weight:660; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-700); margin-bottom:8px;
}
.disc .q{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:22px 22px 24px; margin-bottom:16px;
}
.disc .q .q-frage{display:flex; gap:12px; align-items:flex-start; font-size:1.04rem; line-height:1.4; font-weight:640; letter-spacing:-.01em}
.disc .q .num{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--brand-50);
  color:var(--brand-700); font-size:.82rem; font-weight:700; display:grid; place-items:center;
  margin-top:1px;
}
.disc .hint{font-size:.9rem; color:var(--muted); margin:10px 0 16px; padding-left:38px}
@media (max-width:520px){ .disc .hint{padding-left:0} }

.disc label{display:block; font-size:.88rem; font-weight:600; color:var(--heading); margin-bottom:6px}
.disc .sub-l{margin-top:14px}
.disc .opt{font-weight:400; color:var(--faint); font-size:.82rem}
.disc .req{color:var(--gold)}
/* 16 px ist keine Geschmacksfrage: Darunter zoomt Safari auf dem iPhone bei
   JEDEM Fokus in das Feld hinein und schiebt die Seite seitlich weg. Bei elf
   Fragen waere das einundzwanzigmal Hinein- und Herausschieben. */
.disc input[type=text],.disc input[type=email],.disc input[type=tel],.disc input[type=url],
.disc textarea,.disc select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:.15s ease;
}
.disc textarea{resize:vertical; min-height:82px; line-height:1.6}
.disc input:focus,.disc textarea:focus,.disc select:focus{
  background:#fff; border-color:var(--brand-glow); outline:none; box-shadow:0 0 0 3px rgba(47,182,176,.16);
}
.disc .invalid input,.disc .invalid textarea,.disc .invalid select{border-color:#c0553f; background:#fdf5f3}
.disc .fields .fld{margin:0}
.disc .fields{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:22px}
.disc .fld.inline{display:flex; align-items:center; gap:12px; margin:14px 0 0}
.disc .fld.inline label{margin:0; white-space:nowrap}
.disc .fld.inline select{width:auto; min-width:110px}

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{margin:0 !important; cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-block; font-size:.9rem; font-weight:500; color:var(--body);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  transition:.14s ease;
}
.chip:hover span{border-color:var(--brand-glow)}
.chip input:checked + span{background:var(--brand-50); border-color:var(--brand); color:var(--brand-800); font-weight:600}
.chip input:focus-visible + span{outline:3px solid var(--brand-glow); outline-offset:2px}

.check label{display:flex; gap:11px; align-items:flex-start; font-weight:400; font-size:.95rem; color:var(--body)}
.check input{margin-top:4px; width:17px; height:17px; accent-color:var(--brand); flex:0 0 auto}
.check{margin:16px 0 0}
/* Bei einer nativen Checkbox mit accent-color ist ein roter Rahmen am input
   nicht zu sehen. Die Markierung gehoert deshalb an den Container. */
.disc .check.invalid{
  border:1px solid #c0553f; background:#fdf5f3; border-radius:10px;
  padding:10px 12px; margin-left:-12px; margin-right:-12px;
}
.disc .check.invalid input{outline:2px solid #c0553f; outline-offset:2px}

/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.steer{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:26px}
.steer .btn{min-width:150px}
@media (max-width:420px){ .steer .btn{min-width:0; flex:1 1 auto} }
.err{
  margin-top:14px; font-size:.92rem; color:#a03d29; background:#fdf1ee;
  border:1px solid #f0cfc5; border-radius:10px; padding:11px 14px;
}
.err.hinweis{color:var(--brand-800); background:var(--brand-50); border-color:#cfe6e5}
.thanks{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--rad); padding:34px 30px;
}
.thanks .lead{margin-top:14px}

/* =========================================================================
   Hilfsklassen — ersetzen die früheren style-Attribute.
   Grund: Die Content-Security-Policy erlaubt kein style-src 'unsafe-inline'.
   Mit Inline-Stilen hätte der Browser sie auf dem Server verworfen und die
   Seite wäre live anders ausgesehen als lokal. Klassen sind hier nicht
   Geschmack, sondern Voraussetzung.
   ========================================================================= */
.zentriert{text-align:center}
.schmal{max-width:74ch}
.hell{color:#fff}
.klein{font-size:.9rem}
.name{color:var(--heading); font-weight:600}
/* Ein Fliesstext-Link, den man mit dem Daumen treffen soll: Polsterung statt
   Mindesthoehe, sonst zerreisst der Zeilenfall. */
.link-hell{color:var(--brand-glow); display:inline-block; padding:12px 4px}
.h2-klein{font-size:1.7rem}
.gap-12{gap:12px}
.mt-8{margin-top:8px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-22{margin-top:22px}
.mt-26{margin-top:26px}
.mt-34{margin-top:34px}
.mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px}
.mb-20{margin-bottom:20px}
.lead-zentriert{margin:16px auto 26px}
.fuss-text{font-size:.92rem; max-width:34ch}
.angebot-vorspann{color:var(--muted); margin:10px 0 14px}
.angebot-liste{margin:0; padding-left:20px; color:var(--body); font-size:.96rem}

/* Ohne diese Zeile gewinnt jede Klasse mit display gegen das hidden-Attribut
   des Browsers. Der "Zurück"-Knopf ist .btn{display:inline-flex} — er stand
   deshalb auf Schritt 1 sichtbar da, obwohl er hidden trug. */
[hidden]{display:none !important}

.mark-mitte{margin:0 auto 22px}
.zentriert-block{margin-inline:auto}

/* --- Nur fuer Bildschirmleser, nicht fuer das Auge ---------------------------
   .sr-only nimmt keinen Platz ein, bleibt aber im Zugaenglichkeitsbaum. Ohne
   die Klasse waere die Fortschrittsansage (#cbStand) sichtbarer Text und die
   Fragenummer doppelt zu hoeren.                                              */
.sr-only,.sr-nr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Unauffaelliger Knopf, der wie ein Link aussieht: "Zwischenstand loeschen". */
.text-knopf{
  font:inherit; font-size:.86rem; color:var(--muted); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.text-knopf:hover{color:var(--brand-700)}
.verwerfen{margin-top:18px}


/* =========================================================================
   Handy — gemessen, nicht geraten
   ========================================================================= */

/* Tippziele. Die Regel sind 44x44 (Apple) bzw. 48x48 (Google) CSS-Pixel.
   Fliesstext-Links im Absatz bleiben absichtlich aussen vor: Dort wuerde eine
   erzwungene Hoehe den Zeilenfall zerreissen. Betroffen sind die Ziele, die man
   wirklich mit dem Daumen trifft. */
@media (max-width:900px){
  .navlinks a{min-height:44px; display:inline-flex; align-items:center}
  .langs{gap:6px}
  .langs a{min-height:44px; padding:0 14px}
  .foot a{padding:9px 0; min-height:44px; display:flex; align-items:center}
  .foot-cols a.wordmark{min-height:0}
  .btn{min-height:46px}
  .chip span{min-height:44px; display:inline-flex; align-items:center}
  .check input{width:22px; height:22px}
  .text-knopf{min-height:44px}
}

/* Die klebende Kopfzeile kostet auf einem iPhone SE (320x568) sonst 24 % des
   Bildschirms — dauerhaft, auf jeder Seite. Zwei Zeilen bleiben noetig, damit der
   Weg zum Fragebogen nicht verschwindet; sie duerfen nur nicht so hoch bauen. */
@media (max-width:600px){
  .navrow{min-height:0; padding:8px 0; gap:6px 14px}
  .wordmark{min-height:44px}
  .wordmark img{width:32px; height:32px}
  .wm-t b{font-size:.95rem}
  .navcta .btn.primary{padding:9px 14px; font-size:.88rem}
  html{scroll-padding-top:104px}
}

/* Unter 420 px bleibt vom Markenzug nur das Zeichen stehen — der Name wandert
   fuer Bildschirmleser in die versteckte Fassung, der Link behaelt also seinen
   Namen. Damit passt die Kopfzeile wieder in EINE Zeile: 105 px klebende
   Kopfzeile sind auf einem 568 px hohen iPhone SE fast ein Fuenftel des
   Bildschirms, dauerhaft und auf jeder Seite. */
.nur-schmal{display:none}

/* Auch im Querformat: Bei 320 px Hoehe frass die zweizeilige Kopfzeile 36,6 %
   des Bildschirms. Die Regel haengt deshalb nicht nur an der Breite. */
@media (max-width:600px), (max-height:420px){
  .nur-breit{display:none}
  .nur-schmal{display:inline}
  .nav .wm-t{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  /* wrap, nicht nowrap: Passt es nicht in eine Zeile, faellt die Kopfzeile auf
     zwei — statt waagerecht ueberzulaufen. Mit nowrap UND flex:0 0 auto ragte
     sie bei 320 px um 20 px heraus. */
  .navrow{flex-wrap:nowrap; gap:6px 8px}
  /* Der 600-px-Block gibt .navcta width:100% und macht daraus eine eigene Zeile.
     Unter 420 px passt aber alles nebeneinander — sofern man diese Breite
     zuruecknimmt. Ohne das war die Kopfzeile 117 px statt 67 px hoch. */
  .navcta{width:auto; margin-left:auto; justify-content:flex-end; flex:0 1 auto; min-width:0}
  /* Ohne flex:0 0 auto quetscht das Flexbox-Verfahren beide Enden zusammen:
     Das Zeichen wurde waagerecht gestaucht und der Knopftext ragte links und
     rechts aus seinem Knopf heraus. Beide duerfen jetzt nicht schrumpfen —
     den Platz dafuer holt die kurze Beschriftung. */
  .nav .wordmark{flex:0 0 auto}
  .nav .wordmark img{max-width:none; width:32px; height:32px}
  .navcta{gap:8px; flex-wrap:nowrap}
  .langs{padding:2px; gap:3px}
  .langs a{padding:0 9px; min-height:44px; font-size:.8rem}
  .navcta .btn.primary{flex:0 1 auto; padding:8px 11px; font-size:.83rem; min-height:44px; white-space:nowrap}
  html{scroll-padding-top:74px}
}

/* Der Weichzeichner der Kopfzeile laesst den Browser bei jedem Scroll-Bild
   43.250 Pixel neu rechnen. Auf einem aelteren Handy ist das der Unterschied
   zwischen fluessig und zaeh — dort genuegt eine deckende Flaeche. */
@media (max-width:600px), (prefers-reduced-motion:reduce){
  .nav{backdrop-filter:none; background:var(--ground)}
}

/* Bildschirme mit Aussparung: ohne das schneidet die Kopfzeile im Querformat. */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
  }
}

/* =========================================================================
   Klickbarer Explorer — die nachgebaute Oberfläche
   Vorbild ist der Explorer von churchbasecloud.com: Tabs plus eine Seitenleiste,
   die den ganzen Bereich austauscht. Drei Welten statt zwei, weil das Produkt
   drei hat — und weil die dritte (Fundraising) das Trennungsversprechen zeigt,
   statt es zu behaupten.
   ========================================================================= */
.x-wrap{margin-top:6px}
.x-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.x-tabbtn{
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--body); border:1px solid var(--line);
  border-radius:11px; padding:10px 16px; min-height:44px; transition:.16s ease;
}
.x-tabbtn:hover{border-color:var(--brand-glow); color:var(--brand-700)}
.x-tabbtn.on{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px -8px rgba(14,125,132,.75)}
.x-pane[hidden]{display:none}

.x-app{display:grid; grid-template-columns:210px minmax(0,1fr); min-height:430px}
.x-side{
  background:var(--dark); color:var(--dark-text); padding:14px 10px;
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.x-marke{
  color:#fff; font-weight:660; font-size:.9rem; letter-spacing:-.01em;
  padding:4px 10px 12px; border-bottom:1px solid var(--dark-line); margin-bottom:8px;
}
.x-grp{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dark-faint); padding:12px 10px 5px;
}
.x-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  font:inherit; font-size:.87rem; color:var(--dark-text); cursor:pointer;
  background:none; border:0; border-radius:8px; padding:9px 10px; min-height:38px;
  transition:.14s ease;
}
.x-item i{width:6px; height:6px; border-radius:50%; background:var(--dark-faint); flex:0 0 auto}
.x-item:hover{background:rgba(255,255,255,.06); color:#fff}
.x-item.on{background:var(--brand-800); color:#fff}
.x-item.on i{background:var(--brand-glow)}

.x-haupt{padding:20px 22px; background:var(--surface-2); min-width:0; overflow-x:auto}
.x-view[hidden]{display:none}
.x-titel{font-size:1.02rem; margin-bottom:16px; color:var(--heading)}
.x-liste{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.x-liste li{position:relative; padding-left:20px; font-size:.9rem; color:var(--body)}
.x-liste li::before{content:""; position:absolute; left:4px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--brand-glow)}
.x-notiz{
  margin-top:16px; font-size:.86rem; color:var(--muted); line-height:1.6;
  border-left:3px solid var(--line); padding-left:12px;
}
.x-notiz.gold{border-left-color:var(--gold); color:var(--body)}

/* Zustandskette */
.x-kette{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; counter-reset:k}
.x-kette li{
  font-size:.86rem; font-weight:600; color:var(--brand-800); background:var(--brand-50);
  border:1px solid #cfe5da; border-radius:999px; padding:7px 14px;
}
.x-kette li + li::before{content:"→"; color:var(--faint); margin-right:10px; font-weight:400}
.x-kette.neben{margin-top:10px}
.x-kette.neben li{background:var(--ground-2); border-color:var(--line); color:var(--muted)}
.x-kette.neben li + li::before{content:"·"}

/* Dokumentvorschau */
.x-dok{
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; display:grid; gap:10px;
}
.x-dok > div{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.x-dok dt{flex:0 0 170px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.x-dok dd{margin:0; font-size:.95rem; color:var(--heading); font-weight:560}

/* Kursfortschritt */
.x-kurse{display:grid; gap:12px}
.x-kurs{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.x-kurs b{display:block; font-size:.95rem; color:var(--heading); margin-bottom:9px}
.x-bar{display:block; height:7px; background:var(--ground-2); border-radius:999px; overflow:hidden}
.x-bar i{display:block; height:100%; background:var(--brand); border-radius:999px}
.x-bar i.p0{width:0} .x-bar i.p5{width:5%} .x-bar i.p10{width:10%} .x-bar i.p15{width:15%}
.x-bar i.p20{width:20%} .x-bar i.p25{width:25%} .x-bar i.p30{width:30%} .x-bar i.p35{width:35%}
.x-bar i.p40{width:40%} .x-bar i.p45{width:45%} .x-bar i.p50{width:50%} .x-bar i.p55{width:55%}
.x-bar i.p60{width:60%} .x-bar i.p65{width:65%} .x-bar i.p70{width:70%} .x-bar i.p75{width:75%}
.x-bar i.p80{width:80%} .x-bar i.p85{width:85%} .x-bar i.p90{width:90%} .x-bar i.p95{width:95%}
.x-bar i.p100{width:100%}
.x-rest{display:block; font-size:.8rem; color:var(--muted); margin-top:8px}

/* Player */
.x-buehne{
  position:relative; background:var(--dark); border-radius:12px; height:132px;
  display:grid; place-items:center; margin-bottom:14px;
}
.x-play{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.14);
  display:grid; place-items:center;
}
.x-play::after{content:""; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px}
.x-zeit{
  position:absolute; right:12px; bottom:10px; font-size:.76rem; color:var(--dark-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.x-zwei{display:grid; grid-template-columns:1fr 1.35fr; gap:18px}
.x-zwei h4{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
.x-marken{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.x-marken li{font-size:.86rem; color:var(--body); line-height:1.5}
.x-marken b{
  color:var(--brand-700); font-weight:600; margin-right:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;
}
.x-marken.laufend li:nth-child(2){background:var(--brand-50); border-radius:7px; padding:4px 7px; margin:-4px -7px}

/* Quiz */
.x-frage{font-size:.98rem; color:var(--heading); font-weight:560; margin-bottom:14px}
.x-opts{display:grid; gap:9px}
.x-opt{
  font:inherit; font-size:.9rem; text-align:left; cursor:pointer; color:var(--body);
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:12px 15px; min-height:44px; transition:.14s ease;
}
.x-opt:hover{border-color:var(--brand-glow)}
.x-opt.richtig{background:var(--brand-50); border-color:var(--brand); color:var(--brand-800); font-weight:600}
.x-opt.falsch{background:#fdf5f3; border-color:#e6b3a6; color:#8f3d28}
.x-echo{margin-top:12px; font-size:.88rem; color:var(--muted); min-height:1.4em}

/* KI-Tutor */
.x-chat{display:grid; gap:10px}
.x-badge{
  font-size:.76rem; font-weight:600; color:var(--gold); background:#f9f2e4;
  border:1px solid #ecdcbb; border-radius:999px; padding:6px 13px; justify-self:start;
}
.x-msg{font-size:.9rem; line-height:1.6; border-radius:13px; padding:11px 15px; max-width:88%}
.x-msg.student{background:var(--ground-2); color:var(--body); justify-self:end; border-bottom-right-radius:4px}
.x-msg.tutor{background:var(--surface); border:1px solid var(--line); color:var(--body); border-bottom-left-radius:4px}

/* Die Wand */
.x-wand{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch}
.x-wand h4{font-size:.86rem; color:var(--heading); margin-bottom:10px}
.x-wand ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.x-wand li{font-size:.86rem; color:var(--muted); padding-left:16px; position:relative}
.x-wand li::before{content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--brand-glow)}
.x-mauer{
  width:6px; border-radius:3px; align-self:stretch;
  background:repeating-linear-gradient(45deg, var(--gold) 0 4px, var(--gold-soft) 4px 8px);
}

@media (max-width:760px){
  .x-app{grid-template-columns:1fr}
  .x-side{
    flex-direction:row; overflow-x:auto; gap:6px; padding:10px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .x-marke,.x-grp{display:none}
  .x-item{width:auto; white-space:nowrap; min-height:44px; border:1px solid var(--dark-line)}
  .x-zwei{grid-template-columns:1fr}
  .x-wand{grid-template-columns:1fr}
  .x-mauer{width:auto; height:6px}
  .x-dok dt{flex:0 0 100%}
  .x-haupt{padding:16px 14px}
}

/* =========================================================================
   Notenschema-Umrechner
   ========================================================================= */
.u-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:26px 24px; box-shadow:var(--shadow-s)}
.u-label{display:flex; align-items:baseline; gap:12px; font-size:.88rem; font-weight:600; color:var(--heading); margin-bottom:14px}
.u-label output{font-family:var(--serif); font-size:1.7rem; color:var(--brand-700); line-height:1}
#u-punkte{width:100%; accent-color:var(--brand); height:32px}
.u-karten{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media (max-width:620px){ .u-karten{grid-template-columns:1fr} }
.u-karte{background:var(--surface-2); border:1px solid var(--hair); border-radius:12px; padding:16px 18px; text-align:center}
.u-name{display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.u-wert{font-family:var(--serif); font-size:2rem; color:var(--heading); line-height:1}
.u-status{margin-top:16px; font-size:.9rem; font-weight:600}
.u-status.ok{color:var(--brand-700)}
.u-status.nein{color:#a03d29}

/* =========================================================================
   Herkunft: Schwesterprodukt und Studio
   ========================================================================= */
.f-karte{
  display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad); padding:26px 24px; box-shadow:var(--shadow-s); transition:.18s ease;
}
.f-karte:hover{box-shadow:var(--shadow-m); transform:translateY(-2px); border-color:var(--brand-glow)}
.f-rolle{display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); margin-bottom:10px}
.f-karte h3{margin-bottom:10px}
.f-karte p{font-size:.94rem; color:var(--muted); margin-bottom:16px}
.f-karte b{font-size:.9rem; color:var(--brand-700); font-weight:600}