/* Profyntra – Produktseite profyntra.com („Der Kassensturz“, website/KONZEPT.md).
   Dunkle Bühne, Kassenbon auf Thermopapier, Lime nur für Geld, das noch da ist. Kein Inline-Style, kein fremder Inhalt. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --nacht:#0c0d0d; --nacht2:#141615; --nacht3:#1d201e; --linie:rgba(244,244,240,.12);
  --hell:#f4f4f0; --grau:#a3a59d; --grau2:#7c7f77;
  --papier:#f3f2ea; --papier2:#e8e7dd; --tinte:#0c0d0d; --tinte2:#55574f; --papierlinie:rgba(12,13,13,.14);
  --lime:#d0d42f; --lime-tief:#575a0a; --kosten:#ec7f68; --kosten-papier:#b3392c;
  --f-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:"Space Grotesk","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --r:14px; --r-gross:24px;
  --kopfhoehe:68px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nacht);color:var(--hell);font:400 16.5px/1.6 var(--f-ui);overflow-x:hidden}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;letter-spacing:-.025em;margin:0;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springen{position:absolute;left:12px;top:-60px;background:var(--lime);color:var(--tinte);padding:10px 14px;border-radius:8px;z-index:50;font-weight:600}
.springen:focus{top:12px}
.huelle{width:min(1200px,100%);margin:0 auto;padding:0 16px}
@media (min-width:760px){.huelle{padding:0 32px}}
.schmal{width:min(820px,100%)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:600 15.5px/1 var(--f-ui);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.knopf:hover{transform:translateY(-1px)}
.knopf.lime{background:var(--lime);color:var(--tinte)}
.knopf.lime:hover{background:#dde13e}
.knopf.geist{border-color:var(--linie);color:var(--hell)}
.knopf.geist:hover{border-color:var(--hell)}
.knopf.klein{min-height:38px;padding:0 16px;font-size:14px}
.knopf.breit{width:100%}
.knopf[disabled]{opacity:.6;cursor:progress}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:20;background:rgba(12,13,13,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--linie)}
.kopfzeile{display:flex;align-items:center;gap:24px;height:var(--kopfhoehe)}
.marke{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;color:var(--hell)}
.zeichen{width:32px;height:32px;border-radius:9px;display:block;box-shadow:0 0 0 1px var(--linie)}
.kopfnav{display:none;gap:22px;font-size:14.5px;margin-left:12px}
.kopfnav a{text-decoration:none;color:var(--grau)} .kopfnav a:hover{color:var(--hell)}
.kopfknoepfe{display:flex;gap:8px;margin-left:auto}
.kopfknoepfe .geist{display:none}
@media (min-width:960px){.kopfnav{display:flex}.kopfknoepfe .geist{display:inline-flex}}

/* Gemeinsames */
.vorzeile{font:600 12.5px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.vorzeile.dunkel{color:var(--lime-tief)}
h2{font-size:clamp(32px,5vw,58px)}
.einleitung{color:var(--grau);font-size:18px;margin-top:18px;max-width:38em}
.papier{background:var(--papier);color:var(--tinte)}
.papier .einleitung{color:var(--tinte2)}
.haken{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.haken li{position:relative;padding-left:30px}
.haken li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:6px;background:var(--lime)}
.haken li::after{content:"";position:absolute;left:5px;top:calc(.3em + 4px);width:7px;height:4px;border-left:2.4px solid var(--tinte);border-bottom:2.4px solid var(--tinte);transform:rotate(-45deg)}
.haken.hell li::before{background:var(--tinte)}
.haken.hell li::after{border-color:var(--lime)}

/* ---------- Bühne: Einstieg + Kassensturz mit mitlaufendem Bon ---------- */
.buehne{padding-top:var(--kopfhoehe);background:radial-gradient(1200px 600px at 85% -10%,rgba(208,212,47,.10),transparent 60%),var(--nacht)}
.buehnenraster{display:grid;gap:0}
@media (min-width:1000px){.buehnenraster{grid-template-columns:minmax(0,1fr) 380px;gap:72px}}

.einstieg{padding:64px 0 48px;min-height:calc(100vh - var(--kopfhoehe));display:flex;flex-direction:column;justify-content:center}
@media (min-width:1000px){.einstieg{padding:40px 0 80px}}
.einstieg h1{font-size:clamp(46px,8.2vw,108px);letter-spacing:-.035em;line-height:.98}
@media (min-width:1000px){.einstieg h1{font-size:clamp(56px,6.4vw,100px)}}
.einstieg h1 > span{display:block}
.einstieg .zeile1{color:var(--grau2)}
.einstieg .zeile2{color:var(--hell)}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--grau);margin:28px 0 34px;max-width:36em}
.lead b{color:var(--hell);font-weight:600}
.reihe{display:flex;flex-wrap:wrap;gap:12px}
.vertrauen{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--grau);font-size:14px}
.vertrauen li::before{content:"·";color:var(--lime);margin-right:8px;font-weight:700}
.vertrauen li:first-child::before{content:none}
.scrollhinweis{margin-top:56px;color:var(--grau2);font:500 13px/1 var(--f-mono);letter-spacing:.04em}
.scrollhinweis::after{content:" ↓";color:var(--lime)}

/* Durchgestrichene Eitelkeit (nur mit Bewegung) */
.streich{background:linear-gradient(var(--kosten),var(--kosten)) left 56%/100% .085em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){
  .js .streich{background-size:0% .085em;animation:streichen .8s .9s cubic-bezier(.7,0,.2,1) forwards}
}
@keyframes streichen{to{background-size:100% .085em}}

/* Schritte */
.kassensturz{padding:24px 0 40px}
.schritt{padding:56px 0;border-top:1px solid var(--linie);min-height:68vh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.schritt:first-of-type{border-top:0}
.schritt h3{font-size:clamp(26px,3.2vw,40px);max-width:16em}
.schritt > p:not(.betrag){color:var(--grau);font-size:17.5px;max-width:36em}
.betrag{font:700 clamp(30px,4vw,52px)/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.betrag.kosten{color:var(--kosten)}
@media (prefers-reduced-motion:no-preference){
  .js .schritt > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .schritt.sichtbar > *{opacity:1;transform:none}
  .js .schritt.sichtbar > :nth-child(2){transition-delay:.06s}
  .js .schritt.sichtbar > :nth-child(3){transition-delay:.12s}
  .js .schritt.sichtbar > :nth-child(4){transition-delay:.18s}
}

/* Nachgebaute Ausschnitte aus der App */
.mock{background:var(--nacht2);border:1px solid var(--linie);border-radius:var(--r);padding:16px 18px;max-width:460px;font-size:14px;margin-top:8px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.mockkopf{display:flex;justify-content:space-between;gap:12px;color:var(--grau);font-size:12.5px;margin-bottom:10px}
.pille{border:1px solid var(--linie);border-radius:999px;padding:1px 8px;color:var(--lime);font-size:11.5px}
.mockzeile{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--linie);font-variant-numeric:tabular-nums}
.mockzeile span:last-child{color:var(--hell);text-align:right}
.mockzeile span:first-child{color:var(--grau)}
.mockzeile.stark span{color:var(--hell);font-weight:600}
.mockzeile.stark span:last-child{color:var(--lime)}
.mbalken{display:grid;grid-template-columns:70px 1fr 52px;align-items:center;gap:10px;padding:6px 0;color:var(--grau)}
.mbalken .b{display:block;height:8px;border-radius:4px;background:var(--kosten);opacity:.8}
.mbalken b{color:var(--hell);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.w9{width:91%} .w6{width:57%} .w5{width:50%}

/* ---------- Der Bon ---------- */
.bonspalte{display:none}
@media (min-width:1000px){.bonspalte{display:block}}
.bon{position:sticky;top:calc(var(--kopfhoehe) + 28px);margin:40px 0 80px;background:var(--papier);color:var(--tinte);padding:26px 24px 34px;font:500 13px/1.5 var(--f-mono);font-variant-numeric:tabular-nums;border-radius:4px 4px 0 0;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 7px 10px,transparent 6px,#000 6.5px) bottom/14px 10px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 7px 10px,transparent 6px,#000 6.5px) bottom/14px 10px repeat-x}
.bonkopf{text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px}
.bonunter{text-align:center;color:var(--tinte2);font-size:12px;margin-top:2px}
.bonstrich{border-top:1px dashed rgba(12,13,13,.4);margin:14px 0}
.bonstrich.doppelt{border-top:3px double rgba(12,13,13,.5)}
.bonliste{margin:0}
.bonzeile{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.bonzeile dt{text-transform:uppercase;letter-spacing:.03em}
.bonzeile dd{margin:0;color:var(--kosten-papier)}
.bonzeile.umsatz dd{color:var(--tinte);font-weight:700}
.bonsumme{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bonsumme span:first-child{text-transform:uppercase;letter-spacing:.1em;font-weight:700;flex:1 0 100%}
.bonsumme output{font:700 46px/1 var(--f-display);letter-spacing:-.03em;color:var(--tinte);transition:color .5s ease}
.bonsumme .euro{font:700 24px/1 var(--f-display)}
.bonfuss{margin-top:16px;color:var(--tinte2);font-size:11px;text-align:center}
/* Mit JavaScript: Zeilen erscheinen erst, wenn ihr Schritt erreicht ist; die Summe ist am Anfang Lime (noch alles da) */
.js .bonzeile[data-zeile]{opacity:.16}
.js .bonzeile[data-zeile].gedruckt{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .bonzeile[data-zeile]{transition:opacity .35s ease}
  .js .bonzeile[data-zeile].gedruckt{animation:drucken .45s steps(6) both}
}
@keyframes drucken{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.js .bon[data-stufe="0"] .bonsumme output{color:var(--lime-tief)}

/* ---------- Bleibt ---------- */
.bleibt{padding:120px 0;text-align:center;border-top:1px solid var(--linie)}
.bleibtzahl{font:700 clamp(64px,13vw,180px)/1 var(--f-display);letter-spacing:-.05em;color:var(--lime);font-variant-numeric:tabular-nums}
.bleibt h2{margin-top:10px;font-size:clamp(40px,6vw,72px)}
.bleibttext{color:var(--grau);font-size:clamp(17px,1.8vw,21px);max-width:30em;margin:22px auto 0}
.bleibttext b{color:var(--hell)}
.stufen{list-style:none;padding:0;margin:56px auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:980px}
.stufen li{background:var(--nacht2);border:1px solid var(--linie);border-radius:12px;padding:14px 12px;text-align:left;display:flex;flex-direction:column;gap:6px}
.stufen li:last-child{background:var(--lime);color:var(--tinte);border-color:var(--lime)}
.stufen b{font:700 17px/1 var(--f-display)}
.stufen span{font-size:12.5px;color:var(--grau);line-height:1.35}
.stufen li:last-child span{color:var(--lime-tief)}
@media (max-width:820px){.stufen{grid-template-columns:1fr 1fr}.stufen li:last-child{grid-column:1/-1}}

/* ---------- Rechner ---------- */
.rechner{padding:110px 0}
.rechnerraster{display:grid;gap:48px}
@media (min-width:980px){.rechnerraster{grid-template-columns:1.1fr .9fr;align-items:start;gap:72px}}
.rechner h2 em{font-style:normal;background:linear-gradient(transparent 60%,var(--lime) 60%,var(--lime) 90%,transparent 90%)}
.regler{display:grid;gap:22px;margin-top:36px}
.regler label{display:grid;gap:10px}
.regler label > span{display:flex;justify-content:space-between;gap:12px;font-weight:500}
.regler output{font:600 16px/1 var(--f-display);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--papier2);border:1px solid var(--papierlinie)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--papier2);border:1px solid var(--papierlinie)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--tinte);border:3px solid var(--lime);margin-top:-10px;cursor:grab}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--tinte);border:3px solid var(--lime);cursor:grab}
.ergebnis{background:var(--nacht);color:var(--hell);border-radius:var(--r-gross);padding:32px 28px;position:relative;overflow:hidden}
@media (min-width:980px){.ergebnis{position:sticky;top:calc(var(--kopfhoehe) + 24px)}}
.ergebnisvor{color:var(--grau)}
.ergebniszahl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.ergebniszahl output{font:700 clamp(48px,6vw,72px)/1 var(--f-display);letter-spacing:-.03em;color:var(--kosten);font-variant-numeric:tabular-nums}
.ergebniszahl span{color:var(--grau)}
.ergebnisanteil{margin-top:6px;color:var(--grau)}
.ergebnisanteil output{color:var(--hell);font-weight:600}
.aufschluesselung{margin:22px 0 24px;display:grid;gap:0}
.aufschluesselung div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--linie);font-size:14.5px}
.aufschluesselung dt{color:var(--grau)} .aufschluesselung dd{margin:0;font-variant-numeric:tabular-nums}
.annahmen{margin-top:16px;font-size:12.5px;color:var(--grau2);line-height:1.5}

/* ---------- Prüfbar ---------- */
.pruefbar{padding:110px 0;border-top:1px solid var(--linie)}
.pruefraster{display:grid;gap:48px;align-items:center}
@media (min-width:980px){.pruefraster{grid-template-columns:1fr 1fr;gap:72px}}
.mock.gross{max-width:none;padding:22px;display:grid;gap:14px}
.kpi{background:var(--nacht3);border-radius:12px;padding:16px}
.kpititel{color:var(--grau);font-size:13px;display:flex;align-items:center;gap:8px}
.info{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--tinte);font-size:12px}
.kpiwert{font:700 34px/1.1 var(--f-display);margin-top:6px;font-variant-numeric:tabular-nums}
.kpidelta{color:#6fd39a;font-size:13px;margin-top:2px}
.erklaerung{background:var(--papier);color:var(--tinte);border-radius:12px;padding:16px;display:grid;gap:6px;position:relative;font-size:14px}
.erklaerung::before{content:"";position:absolute;top:-7px;left:132px;width:14px;height:14px;background:var(--papier);transform:rotate(45deg)}
.erklaerung .quelle{color:var(--tinte2);font-size:13px}
.qualitaet{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:var(--grau);font-size:13.5px}
.qbalken{height:8px;border-radius:4px;background:var(--nacht3);overflow:hidden}
.qbalken i{display:block;height:100%;width:96%;background:var(--lime);border-radius:4px}
.qualitaet b{color:var(--hell)}

/* ---------- Team ---------- */
.team{padding:110px 0}
.teamraster{display:grid;gap:44px;align-items:center}
@media (min-width:980px){.teamraster{grid-template-columns:.85fr 1.15fr;gap:72px}}
.teamfoto{margin:0;position:relative;isolation:isolate;max-width:560px}
.teamfoto img{display:block;width:100%;height:auto;border-radius:var(--r-gross)}
.teamfoto::after{content:"";position:absolute;inset:auto -14px -14px auto;width:46%;height:46%;border:2px solid var(--lime-tief);border-radius:var(--r-gross);z-index:-1}
.zitat{margin:30px 0 0;padding:0 0 0 22px;border-left:3px solid var(--lime)}
.zitat p{font:600 clamp(20px,2.2vw,26px)/1.35 var(--f-display);letter-spacing:-.01em}
.zitat footer{margin-top:12px;color:var(--tinte2);font-size:14.5px}
.fakten{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fakten li{border-top:2px solid var(--tinte);padding-top:10px;display:flex;flex-direction:column}
.fakten b{font:700 clamp(22px,2.6vw,32px)/1.1 var(--f-display)}
.fakten span{color:var(--tinte2);font-size:13.5px}
@media (max-width:560px){.fakten{grid-template-columns:1fr 1fr}}

/* ---------- Vergleich ---------- */
.vergleich{padding:110px 0}
.tabwrap{overflow-x:auto;margin-top:40px;-webkit-overflow-scrolling:touch}
.vgl{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:15px}
.vgl th,.vgl td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.vgl thead th{color:var(--grau);font-weight:500;font-size:13.5px}
.vgl tbody th{font-weight:500;color:var(--hell);width:34%}
.vgl td{color:var(--grau)}
.vgl .wir{background:rgba(208,212,47,.08);color:var(--hell)}
.vgl thead .wir{color:var(--lime);font:700 16px/1 var(--f-display);border-radius:12px 12px 0 0}
.vgl tbody tr:last-child .wir{border-radius:0 0 12px 12px}
.vgl td.ja::before{content:"✓ ";color:var(--lime);font-weight:700}
.vgl td.nein{color:var(--grau2)}

/* ---------- KI ---------- */
.ki{padding:110px 0;border-top:1px solid var(--linie)}
.kiraster{display:grid;gap:44px;align-items:center}
@media (min-width:980px){.kiraster{grid-template-columns:1fr 1fr;gap:72px}}
.chat{display:grid;gap:12px;font-size:15px}
.chat p{border-radius:18px;padding:14px 16px;max-width:92%}
.chat .frage{justify-self:end;background:var(--hell);color:var(--tinte);border-bottom-right-radius:6px}
.chat .werkzeug{background:transparent;border:1px dashed var(--linie);color:var(--grau);font:500 12.5px/1.4 var(--f-mono);padding:10px 14px}
.chat .werkzeug::before{content:"⚙ ";color:var(--lime)}
.chat .antwort{background:var(--nacht2);border:1px solid var(--linie);border-bottom-left-radius:6px}
.chat .beispiel{color:var(--grau2);font-size:12.5px;padding:0 4px;max-width:none}

/* ---------- Sicherheit ---------- */
.sicherheit{padding:110px 0;border-top:1px solid var(--linie)}
.kacheln{display:grid;gap:14px;margin-top:40px}
@media (min-width:760px){.kacheln{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.kacheln{grid-template-columns:repeat(4,1fr)}}
.kachel{background:var(--nacht2);border:1px solid var(--linie);border-radius:var(--r);padding:22px}
.kachel h3{font-size:20px;margin-bottom:8px}
.kachel p{color:var(--grau);font-size:15px}

/* ---------- Pilot ---------- */
.pilot{padding:110px 0;background:linear-gradient(180deg,var(--nacht),#101211);border-top:1px solid var(--linie)}
.pilotraster{display:grid;gap:40px}
@media (min-width:980px){.pilotraster{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.ticket{background:var(--lime);color:var(--tinte);border-radius:var(--r-gross);padding:30px 28px;position:relative;
  -webkit-mask:radial-gradient(circle at 0 150px,transparent 14px,#000 14.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 150px,transparent 14px,#000 14.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 150px,transparent 14px,#000 14.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 150px,transparent 14px,#000 14.5px) right/51% 100% no-repeat}
.ticketkopf{font:600 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.plaetze{display:flex;align-items:baseline;gap:10px;margin:18px 0 26px;padding-bottom:22px;border-bottom:2px dashed rgba(12,13,13,.35);min-height:96px}
.plaetze b{font:700 76px/.9 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plaetze span{font-weight:600}
.ticket h2{font-size:clamp(28px,3.4vw,40px)}
.pilotform{background:var(--nacht2);border:1px solid var(--linie);border-radius:var(--r-gross);padding:28px;display:grid;gap:18px}
.feld{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.feld > span,.feld legend{font-weight:500;font-size:15px;padding:0;margin-bottom:8px}
.feld > span{margin-bottom:0}
.feld small{color:var(--grau2);font-weight:400}
.feld input[type=email],.feld input[type=text],.feld select,.feld textarea{width:100%;background:var(--nacht);border:1px solid var(--linie);border-radius:10px;color:var(--hell);font:inherit;padding:12px 14px;min-height:48px}
.feld textarea{resize:vertical;min-height:90px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(208,212,47,.22)}
.auswahl{display:flex;flex-wrap:wrap;gap:8px}
.auswahl label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie);border-radius:999px;padding:9px 14px;cursor:pointer;font-size:14.5px;user-select:none}
.auswahl input{accent-color:var(--lime);width:16px;height:16px;margin:0}
.auswahl label:has(input:checked){border-color:var(--lime);background:rgba(208,212,47,.1)}
.zweier{display:grid;gap:18px}
@media (min-width:560px){.zweier{grid-template-columns:1fr 1fr}}
.honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formhinweis{color:var(--grau);font-size:13.5px}
.formhinweis.ok{color:var(--lime);font-size:17px;font-weight:600}
.formhinweis.fehler{color:var(--kosten)}
.pilotform.gesendet > :not(.formhinweis){display:none}

/* ---------- FAQ ---------- */
.faq{padding:110px 0}
.faq h2{margin-bottom:28px}
.faq details{border-top:1px solid var(--papierlinie);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--papierlinie)}
.faq summary{cursor:pointer;list-style:none;font:600 19px/1.3 var(--f-display);padding:18px 40px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 28px/1 var(--f-ui);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tinte2);padding:0 0 20px;max-width:44em}

/* ---------- Fuß und Handy-Leiste ---------- */
.fuss{border-top:1px solid var(--linie);padding:32px 0 96px;color:var(--grau);font-size:14px}
@media (min-width:1000px){.fuss{padding-bottom:40px}}
.fusszeile{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss a{text-decoration:none} .fuss a:hover{color:var(--hell)}
.leiste{position:fixed;inset:auto 10px 10px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(20,22,21,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--linie);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.leistezahl{font:700 20px/1 var(--f-display);font-variant-numeric:tabular-nums}
.leistezahl small{font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--grau);margin-right:4px}
.js .leiste[data-stufe="0"] .leistezahl output{color:var(--lime)}
@media (min-width:1000px){.leiste{display:none}}

/* ---------- Rechtsseiten und Danke-Seite (website/bauen.py, danke.html) ---------- */
.einfach{padding:calc(var(--kopfhoehe) + 48px) 0 80px;min-height:72vh}
.recht{max-width:780px}
.recht h1{font-size:40px;margin:0 0 24px}
.recht h2{font-size:22px;margin:32px 0 8px} .recht h3,.recht h4{font-size:17px;margin:22px 0 6px}
.recht p,.recht ul,.recht ol,.recht blockquote{margin:0 0 12px;color:var(--grau)} .recht ul,.recht ol{padding-left:22px}
.recht strong{color:var(--hell)}
.recht table{border-collapse:collapse;font-size:14.5px;margin:0 0 14px} .recht td,.recht th{border-bottom:1px solid var(--linie);padding:6px 10px 6px 0;text-align:left;vertical-align:top}
.recht blockquote{border-left:3px solid var(--linie);padding-left:12px}
.danke h1{font-size:clamp(40px,6vw,72px)}
.danke .einleitung{font-size:20px}
.danke .reihe{margin-top:32px}
.danke [data-fall="fehler"]{display:none}
.danke.fehler [data-fall="ok"]{display:none}
.danke.fehler [data-fall="fehler"]{display:block}