/* Ergänzungen zu academy.css (Entwurf 1) für die echte Anwendung:
   Formulare, Meldungen, Anmeldung, Trainer am Handy, Teilnehmerseiten, Beamer. */

select,textarea{font:inherit;color:inherit}
a{text-decoration-thickness:1px;text-underline-offset:2px}

/* ── Meldungen ── */
.meldung{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.45;border:1px solid transparent}
.meldung .ico{width:18px;height:18px;margin-top:1px}
.meldung-ok{background:var(--ok0);color:var(--ok);border-color:#bcdccc}
.meldung-fehler{background:#fbeeec;color:var(--bad);border-color:#e6c2bd}
.meldung-info{background:var(--t0);color:var(--n8);border-color:var(--t1)}
.meldung-warn{background:var(--warn0);color:var(--warnT);border-color:#ead3a8}
.meldung b{font-weight:700}

/* ── Formulare ── */
.formular{display:flex;flex-direction:column;gap:18px}
.feld select,.feld textarea{border:1.5px solid var(--line2);border-radius:12px;padding:10px 14px;background:#fff;font-size:16px;color:var(--ink);width:100%}
.feld select{height:46px;padding:0 12px}
.feld textarea{min-height:110px;resize:vertical;line-height:1.5}
.feld input[type=color]{height:46px;width:84px;padding:4px;border:1.5px solid var(--line2);border-radius:12px;background:#fff}
.feld input[type=file]{height:auto;padding:10px;border-style:dashed}
.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--t5);outline-offset:1px;border-color:var(--t7)}
.feld .fehler-text{font-size:13px;color:var(--bad);font-weight:600}
.feld.hat-fehler input,.feld.hat-fehler select,.feld.hat-fehler textarea{border-color:var(--bad)}
.feld-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 18px}
.feld-reihe-breit{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.feld-reihe-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.haken{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;cursor:pointer;min-height:32px}
.haken input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--n7);flex:none}
.haken small{display:block;color:var(--ink2);font-size:13px}
.haken-liste{display:flex;flex-direction:column;gap:10px}
.formular-fuss{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:6px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;padding:0}

/* ── Seitenkopf und Leerzustand ── */
.zurueck-link{display:inline-flex;align-items:center;gap:6px;color:var(--n7);font-weight:600;text-decoration:none;font-size:14px;min-height:40px}
.zurueck-link:hover{text-decoration:underline}
.leerzustand{padding:28px;text-align:center;color:var(--ink2);border:1.5px dashed var(--line2);border-radius:14px;background:var(--bg2)}
.leerzustand strong{display:block;color:var(--n9);font-family:var(--serif);font-size:19px;margin-bottom:4px}

/* ── Tabellen der Verwaltung ── */
.tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.tabelle th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);padding:10px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tabelle td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle a.zeilen-link{color:var(--n9);font-weight:600;text-decoration:none}
.tabelle a.zeilen-link:hover{text-decoration:underline}
.tabelle .leise{color:var(--ink2);font-size:13px}
.tabelle .rechts{text-align:right}

/* ── Status-Marken ── */
.marke{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1.5}
.marke::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.marke-entwurf{background:#eef1f4;color:#4a5a6b}
.marke-offen{background:var(--ok0);color:var(--ok)}
.marke-geschlossen{background:var(--warn0);color:var(--warnT)}
.marke-abgeschlossen{background:var(--t0);color:var(--n7)}
.marke-aus{background:#f6e7e5;color:var(--bad)}

/* ── Anmeldung ── */
.anm{min-height:100vh;min-height:100dvh;display:grid;place-items:center;position:relative;isolation:isolate;padding:32px 16px;color:#fff}
.anm-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:-2}
.anm::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(13,31,56,.96) 0%,rgba(13,31,56,.84) 45%,rgba(13,31,56,.6) 100%)}
.anm-box{width:100%;max-width:440px;display:flex;flex-direction:column;gap:22px}
.anm-logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.anm-logo img{width:46px;height:46px;background:#fff;border-radius:12px;padding:4px}
.anm-logo span{font-family:var(--serif);font-weight:600;font-size:24px}
.anm-karte{background:#fff;color:var(--ink);border-radius:20px;padding:30px 28px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:18px}
.anm-karte h1{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--n9);line-height:1.15}
.anm-karte .leise{color:var(--ink2);font-size:14.5px;margin-top:-10px}
.anm-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px}
.anm-links a{color:var(--n7);font-weight:600;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.anm-links a:hover{text-decoration:underline}
.anm-fuss{font-size:13px;color:#c3d9e4;display:flex;gap:16px;flex-wrap:wrap}
.anm-fuss a{color:#dcebf1}
.pw-feld{position:relative}
.pw-feld input{padding-right:52px}
.pw-zeigen{position:absolute;right:4px;top:4px;width:44px;height:38px;border:0;background:transparent;color:var(--n7);cursor:pointer;border-radius:8px;display:grid;place-items:center}
.pw-zeigen:hover{background:var(--bg)}

/* ── App-Kopf auf dem Handy: Menü einklappbar ── */
.menue-knopf{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(180,221,230,.3);background:transparent;color:#fff;cursor:pointer;place-items:center}
.app-abmelden{margin:0}
.app-abmelden button{width:100%;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:#c9dbe7;font-weight:500;font-size:14.5px;cursor:pointer;text-align:left}
.app-abmelden button:hover{background:rgba(255,255,255,.07);color:#fff}
.app-abmelden .ico{color:var(--t3)}

/* ── Karten mit Listen (Schulungen, Firmen) ── */
.zeilen{display:flex;flex-direction:column}
.zeile{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:8px 16px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.zeile:first-child{border-top:0;padding-top:2px}
.zeile-titel{color:var(--n9);font-weight:600;text-decoration:none;line-height:1.3;display:block}
a.zeile-titel:hover{text-decoration:underline}
.zeile-meta{font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:3px}
.zeile-meta span{display:inline-flex;align-items:center;gap:5px}
.zeile-meta .ico{width:14px;height:14px;color:var(--t7)}
.zeile-rechts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ── Trainer: Heute (Handy zuerst) ── */
.heute-gruss .ueber{margin-bottom:2px}
.heute-gruss h1{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--n9);line-height:1.15}
.heute-karte{background:#fff;border:1.5px solid var(--t3);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh)}
.heute-karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.heute-karte h2{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--n9);line-height:1.2}
.heute-karte .ort{font-size:14px;color:var(--ink2)}
.btn-riesig{min-height:66px;font-size:18px;border-radius:16px;gap:12px}
.btn-riesig .ico{width:26px;height:26px}
.heute-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.install-hinweis{display:flex;gap:10px;align-items:center;background:var(--t0);border-radius:14px;padding:12px 14px;font-size:13.5px;color:var(--n8)}
.install-hinweis .ico{color:var(--tt)}

/* ── Tab-Leiste unten auf dem Handy (Trainer) ── */
.tabbar{display:none}

/* ── Schulung: Live-Tabelle ── */
.live-punkt{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ok);font-weight:600}
.live-punkt i{width:8px;height:8px;border-radius:50%;background:#2fa36f;box-shadow:0 0 0 3px rgba(47,163,111,.22)}
.tl .ohne-sig{color:var(--ink2);font-size:13px;font-style:italic}
.tl .aktionen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tl td.rechts{text-align:right}
.schalter-form{margin:0}

/* ── Beamer ── */
.beamer{min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 50% -10%,#21446b 0%,var(--n9) 62%);color:#fff;display:flex;flex-direction:column;padding:28px 36px;gap:24px}
.beamer-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.beamer-kopf .f-logo img{width:40px;height:40px;background:#fff;border-radius:10px;padding:3px}
.beamer-mitte{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;max-width:1400px;margin:0 auto;width:100%}
.beamer-qr{width:min(58vh,560px);background:#fff;border-radius:24px;padding:22px}
.beamer-qr svg{display:block;width:100%;height:auto}
.beamer h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,64px);line-height:1.08}
.beamer .schritte-gross{margin-top:26px;display:flex;flex-direction:column;gap:14px;font-size:clamp(18px,1.7vw,26px);color:#dbe8f0}
.beamer .schritte-gross b{color:#fff}
.beamer-code{margin-top:30px;display:flex;flex-direction:column;gap:4px}
.beamer-code small{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--t1);font-weight:600}
.beamer-code span{font-family:var(--mono);font-size:clamp(46px,6vw,96px);font-weight:600;letter-spacing:.08em;line-height:1}
.beamer-code em{font-style:normal;color:var(--t3);font-size:clamp(16px,1.5vw,22px);font-weight:600}
.beamer-zaehler{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:1400px;margin:0 auto;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(180,221,230,.2);border-radius:18px;padding:16px 22px}
.beamer-zaehler b{font-family:var(--serif);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.beamer-zaehler .spur{flex:1;min-width:200px;height:14px;border-radius:7px;background:rgba(255,255,255,.14);overflow:hidden}
.beamer-zaehler .spur i{display:block;height:100%;background:var(--t3);border-radius:7px;width:var(--w,0%);transition:width .4s}

/* ── Teilnehmerseiten (am Handy) ── */
.tn{min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,var(--bg) 0%,#e2ecf3 100%);display:flex;flex-direction:column;align-items:center}
.tn-rahmen{width:100%;max-width:480px;min-height:100vh;min-height:100dvh;background:var(--bg2);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.tn .ph-app{position:sticky;top:0;z-index:5}
.tn .ph-body{padding:18px 18px 28px;gap:16px}
.tn .unterschrift{height:260px;touch-action:none}
.tn .unterschrift canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;touch-action:none;cursor:crosshair}
.unterschrift-deckel{position:absolute;inset:0;border:0;border-radius:14px;background:rgba(246,249,251,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--n7);font-weight:600;font-size:15px;cursor:pointer}
.unterschrift-deckel .ico{width:28px;height:28px}
.unterschrift--offen .unterschrift-deckel{display:none}
.unterschrift-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tn-schritt[hidden]{display:none}
.tn-fuss{margin-top:auto;padding:18px;font-size:12.5px;color:var(--ink2);text-align:center;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.tn-fuss a{color:var(--n7)}
.tn-gesperrt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 10px}
.tn-gesperrt .kreis{width:64px;height:64px;border-radius:50%;background:var(--warn0);color:var(--warnT);display:grid;place-items:center;border:2px dashed #c0913f}
.tn-gesperrt .kreis .ico{width:32px;height:32px}
.tn-gesperrt h1{font-family:var(--serif);font-size:24px;color:var(--n9);font-weight:600;line-height:1.2}
.tn-gesperrt p{color:var(--ink2);max-width:34ch}
.pass-nr{font-family:var(--mono);font-weight:600;font-size:20px;letter-spacing:.06em;background:#fff;color:var(--n9);border-radius:10px;padding:6px 14px;position:relative;z-index:1}
.frei .btn[aria-disabled=true]{background:var(--bg);color:var(--ink2);border-color:var(--line2);cursor:default}
.zert-karte{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--ok);border-radius:14px;padding:14px}
.zert-karte .kreis{width:44px;height:44px;border-radius:12px;background:var(--ok0);color:var(--ok);display:grid;place-items:center;flex:none}
.zert-karte strong{display:block;color:var(--n9)}
.zert-karte small{color:var(--ink2)}

/* ── Vorlagen-Wahl in den Einstellungen ── */
.vorlagen-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.vorlage-karte{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.vorlage-karte input{position:absolute;opacity:0;width:1px;height:1px}
.vorlage-bild{border:2px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:210/297;display:grid;place-items:center}
.vorlage-bild.quer{aspect-ratio:297/210}
.vorlage-bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.vorlage-karte strong{font-size:14px;color:var(--n9);display:flex;align-items:center;gap:8px}
.vorlage-karte strong .nr{width:24px;height:24px;border-radius:7px;background:var(--n8);color:#fff;display:grid;place-items:center;font-size:12.5px}
.vorlage-karte small{color:var(--ink2);font-size:12.5px;line-height:1.35}
.vorlage-karte input:checked + .vorlage-bild{border-color:var(--t7);box-shadow:0 0 0 3px var(--t1)}
.vorlage-karte input:focus-visible + .vorlage-bild{outline:3px solid var(--t5);outline-offset:2px}
.logo-vorschau{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-vorschau .rahmen{min-width:140px;height:64px;border:1px solid var(--line2);border-radius:10px;display:grid;place-items:center;padding:8px;background:#fff}
.logo-vorschau .rahmen img{height:44px;max-width:220px;width:auto;object-fit:contain}
.logo-vorschau .rahmen.dunkel{background:var(--vorschau-farbe,#14304f)}

/* ── Startseite: Angebot statt Warenkorb ── */
.preis .anfrage{font-family:var(--serif);font-size:19px;color:var(--n9);font-weight:600}

/* ── Startpasswort-Anzeige ── */
.geheimnis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--n9);color:#fff;border-radius:12px;padding:14px 16px}
.geheimnis code{font-family:var(--mono);font-size:20px;letter-spacing:.06em;font-weight:600}
.geheimnis small{color:var(--t1);width:100%}

/* ── Rechtstexte ── */
.text-seite{max-width:780px;margin:0 auto;padding:48px 20px 64px;display:flex;flex-direction:column;gap:16px}
.text-seite h1{font-family:var(--serif);font-size:36px;color:var(--n9);font-weight:600}
.text-seite h2{font-family:var(--serif);font-size:22px;color:var(--n9);font-weight:600;margin-top:12px}
.text-seite p,.text-seite li{color:var(--ink);line-height:1.65}
.text-seite ul{list-style:disc;padding-left:22px}

@media (max-width:960px){
  .menue-knopf{display:grid}
  .app-leiste.zu .app-menue,.app-leiste.zu .app-rolle,.app-leiste.zu .app-abmelden{display:none}
  .app-leiste .app-abmelden{order:5;flex-basis:100%}
  .beamer-mitte{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:28px}
  .beamer .schritte-gross{align-items:center}
}
@media (max-width:760px){
  .app-trainer .app-leiste{display:none}
  .app-trainer .app-inhalt{padding-bottom:96px}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;font-size:11px;color:var(--ink2);text-decoration:none;font-weight:500}
  .tabbar a.aktiv{color:var(--n7);font-weight:700}
  .tabbar .ico{width:22px;height:22px}
  .feld-reihe-2{grid-template-columns:minmax(0,1fr)}
  .zeile{grid-template-columns:56px minmax(0,1fr)}
  .zeile-rechts{grid-column:2;justify-content:flex-start}
  .heute-raster{grid-template-columns:minmax(0,1fr)}
  .tabelle-scroll{overflow-x:auto}
}
@media print{
  .app-leiste,.tabbar,.kopf-rechts,.qr-knoepfe,.tk-aktionen{display:none!important}
  body{background:#fff}
}

/* ── Nachträge ── */
.qr-gross svg{display:block;width:100%;height:auto}
.unterschrift.hat-fehler{border-color:var(--bad)}
.tl svg.sig{background:transparent}
[data-wach-hinweis][hidden]{display:none}

/* Teilnehmerliste auf der Schulungsseite: kompakt, ohne Seitwärtsschieben */
.tl{min-width:0}
.tl .name{white-space:normal;min-width:150px}
.tl .name .firma{display:block;font-weight:400;font-size:13px;color:var(--ink2);margin-top:2px}
.tl .sig-zelle{width:120px}
.tl .sig-zelle .zeit{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px}
.tl .btn-sym{width:36px;height:36px;padding:0;justify-content:center}
.tl .aktionen{flex-wrap:nowrap}
.lzk-form{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.lzk-form select{width:122px;height:36px;border:1.5px solid var(--line2);border-radius:10px;padding:0 6px;background:#fff;font-size:13.5px}
.lzk-form input{width:58px;height:36px;border:1.5px solid var(--line2);border-radius:10px;padding:0 8px;font-size:13.5px}
.lzk-form .btn-klein{width:36px;height:36px;padding:0;justify-content:center}
@media (max-width:760px){
  .tl tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name akt" "sig sig" "status status"}
  .tl td:nth-child(1){grid-area:name}
  .tl td:nth-child(2){grid-area:sig;font-size:inherit}
  .tl td:nth-child(3){grid-area:status;text-align:left}
  .tl td:nth-child(4){grid-area:akt}
  .tl .sig-zelle{width:auto;display:flex!important;align-items:center;gap:12px}
  .tl .sig-zelle .zeit{margin:0}
  .lzk-form select{flex:1 1 auto;width:auto}
  .lzk-form input{width:72px}
}
.tl .sig-zelle .zeit{font-family:inherit}
/* Säulen: geplante Wochen heller und gestreift */
.s-sp.geplant i{background:repeating-linear-gradient(135deg,#9fc3d0 0 5px,#c9dde5 5px 10px)}
.s-sp.geplant .s-w{color:var(--ink2)}
.s-legende i.geplant{background:repeating-linear-gradient(135deg,#9fc3d0 0 3px,#c9dde5 3px 6px)}
/* Gesperrte Felder sichtbar als nicht änderbar */
.feld input:disabled,.feld select:disabled{background:#eef3f6;color:var(--ink2);border-style:dashed;cursor:not-allowed}
/* Nur lokal: Schnellanmeldung */
.schnell-box{margin-top:18px;padding:14px;border:1.5px dashed #d9a441;border-radius:14px;background:#fff8ea}
.schnell-titel{margin:0 0 10px;font-size:13px;font-weight:600;color:#7a5a12}
.schnell-knoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.schnell-knoepfe .btn{flex-direction:column;gap:2px;height:auto;padding:8px 6px;line-height:1.2}
.schnell-knoepfe small{font-size:11.5px;font-weight:400;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ── Lernstand (André, 27.09.2026: am PC Raster mit Ring je Person, am Handy Karten) ── */
.ls-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ls-beschreibung{font-size:13.5px;color:var(--ink2)}
.ls-summe{display:flex;align-items:center;gap:10px}.ls-summe b{font-family:var(--serif);font-size:40px;color:var(--n9);line-height:1}
.ls-summe span{font-size:13px;color:var(--ink2);line-height:1.3;max-width:190px}
.ls-legende{display:flex;gap:8px 18px;flex-wrap:wrap;margin:14px 0 6px;font-size:13px;color:var(--ink2)}
.ls-legende span{display:inline-flex;align-items:center;gap:6px}.ls-legende .lq{width:14px;height:14px;border-radius:4px}
.ls-legende-ring{margin-left:auto}
.lq{display:inline-block;width:24px;height:24px;border-radius:6px;vertical-align:middle}
.lq-b{background:#1a6b50}.lq-v{background:#e3a33a}.lq-n{background:#97372f}.lq-o{background:#e4edf3;box-shadow:inset 0 0 0 1px #d3e0ea}
.ls-raster{border-collapse:collapse;font-size:13.5px;width:100%;min-width:640px}
.ls-raster th.ls-rot{height:112px;vertical-align:bottom;padding:0 0 8px;min-width:34px}
.ls-raster th.ls-rot span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;margin:0 auto}
.ls-raster .ls-gruppen th{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--tt);text-align:center;padding:4px 0;border-bottom:2px solid var(--t1)}
.ls-raster td{text-align:center;padding:5px 2px;border-bottom:1px solid var(--line)}
.ls-raster .ls-trenner{border-left:2px solid var(--line2)}
.ls-raster td.ls-name{text-align:left;padding:6px 12px 6px 0;min-width:210px;white-space:nowrap}
.ls-raster td.ls-name>div{display:inline-block;vertical-align:middle}
.ls-raster td.ls-name small{display:block;font-size:12px;color:var(--ink3);font-weight:400}
.ls-ring-klein{position:relative;width:44px;height:44px;margin-right:10px}
.ls-ring-klein b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--n9)}
.ring-svg{transform:rotate(-90deg);display:block}
.ls-summen td{border-bottom:0;font-size:12px;color:var(--ink2);font-weight:600;padding-top:8px}
.ls-klein .lq{width:18px;height:18px;border-radius:5px}.ls-klein th.ls-rot{min-width:24px;height:118px}.ls-klein th.ls-rot span{font-size:11px}
.ls-karte{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.ls-karte + .ls-karte{margin-top:10px}
.ls-ring{position:relative;width:64px;height:64px;flex:none}
.ls-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--n9)}
.ls-ring small{font-size:11px;margin-left:1px}
.ls-karte-text{min-width:0;flex:1}.ls-karte-text strong{display:block;font-size:14.5px;color:var(--n9)}
.ls-karte-text span{display:block;font-size:12.5px;color:var(--ink2);margin:1px 0 4px}
.ls-ziel{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink2)}.ls-ziel-b{color:var(--ok)}.ls-ziel-n{color:var(--bad)}
.ls-streifen{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}.ls-streifen .lq{width:15px;height:15px;border-radius:4px}.ls-streifen .lq-trenner{margin-left:5px}
.ls-handy{display:none}
@media (max-width:760px){.ls-pc{display:none}.ls-handy{display:block;margin-top:8px}.ls-legende-ring{margin-left:0}}
.frei-titel + .ls-karte{margin-top:8px}

/* Pass auf einem anderen Gerät öffnen */
.anderes-geraet{margin-top:6px}
.anderes-geraet .frei-titel{margin-bottom:8px}
.geraet-code{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:var(--t0);border:1px solid var(--t1);text-align:center}
.geraet-code span{font-size:13.5px;color:var(--ink)}
.geraet-code strong{font-size:30px;letter-spacing:.12em;color:var(--n9)}
.geraet-code small{font-size:12.5px;color:var(--ink2)}
.feld-hinweis{display:block;margin-top:6px;font-size:12.5px;color:var(--ink2);line-height:1.4}

/* Offline-Kopie */
.offline-pw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:16px;border-radius:14px;background:var(--t0);border:1px solid var(--t1)}
.offline-pw code{font-size:28px;letter-spacing:.08em;color:var(--n9);flex:1;min-width:0;word-break:break-all}
.offline-fakten{display:flex;flex-direction:column;gap:12px}
.offline-fakten li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.offline-fakten .ico{color:var(--t7);margin-top:1px}

/* Produkte mit Knöpfen (Trainer, Admin) */
.inhalt-liste{display:flex;flex-direction:column}
.inhalt-zeile{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.inhalt-zeile:last-child{border-bottom:0}
.inhalt-text strong{display:block;color:var(--n9);font-size:15px}
.inhalt-knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ok-text{color:var(--ok)}.warn-text{color:var(--warnT)}
@media (max-width:760px){.inhalt-zeile{grid-template-columns:42px minmax(0,1fr)}.inhalt-knoepfe{grid-column:2;justify-content:flex-start}}
.ls-karte-gross{margin-top:20px}
.inhalt-stand{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.inhalt-stand-text{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;flex:1;min-width:220px}
.inhalt-stand-text .ico{width:18px;height:18px;color:var(--t7)}
.inhalt-upload{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-size:13.5px}
.inhalt-upload label{font-weight:600;color:var(--ink)}
.inhalt-upload input[type=file]{font-size:13px;max-width:260px}
.kopf-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.chip-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;background:#fff;border:1px solid var(--line2);color:var(--n7);font-weight:600}
.chip-link .ico{width:15px;height:15px}
.chip-link:hover{border-color:var(--t7)}

/* Live-Fragen auf dem Pass (Abschnitt 3) */
.live-frage{padding:16px;border-radius:16px;background:#fff;border:2px solid var(--t5);box-shadow:var(--sh)}
.live-frage.leer{display:none}
.live-kopf{margin:0 0 6px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tt)}
.live-punkt{width:8px;height:8px;border-radius:50%;background:#e0452f;box-shadow:0 0 0 4px rgba(224,69,47,.18);flex:none}
.live-text{margin:0 0 12px;font-size:15.5px;font-weight:600;color:var(--n9);line-height:1.4}
.live-optionen{display:flex;flex-direction:column;gap:8px}
.live-opt{display:flex;gap:12px;align-items:center;width:100%;min-height:52px;padding:10px 12px;border:1.5px solid var(--line2);border-radius:13px;background:#fff;text-align:left;font-size:14.5px;color:var(--ink);cursor:pointer}
.live-opt b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--bg);color:var(--n7);flex:none}
.live-opt.gewaehlt{border-color:var(--n7);box-shadow:0 0 0 3px var(--t1)}.live-opt.gewaehlt b{background:var(--n7);color:#fff}
.live-hinweis{margin:10px 0 0;font-size:12.5px;color:var(--ink2);text-align:center}
.live-ergebnis{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:14px;text-align:center}
.live-ergebnis .kreis{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;font-size:24px;font-weight:700}
.live-ergebnis b{font-family:var(--serif);font-size:21px}.live-ergebnis span{font-size:13px;color:var(--ink)}
.live-ergebnis.ok{background:var(--ok0)}.live-ergebnis.ok .kreis{background:var(--ok)}.live-ergebnis.ok b{color:var(--ok)}
.live-ergebnis.nein{background:#f8e5e2}.live-ergebnis.nein .kreis{background:var(--bad)}.live-ergebnis.nein b{color:var(--bad)}
.live-ergebnis.ohne{background:var(--bg)}.live-ergebnis.ohne .kreis{background:var(--ink3)}
.live-erkl{margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.live-stand{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px}
.live-bilanz{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px}
.live-bilanz b{font-family:var(--serif);font-size:20px;color:var(--n9)}
.lzk-quelle{display:block;margin-top:3px;font-size:11.5px;color:var(--tt);font-weight:600}

/* ── Shop (Abschnitt 4; André: Ansicht A + C) ── */
.breit-seite{max-width:1240px;margin:0 auto;padding:28px 24px 60px}
.shop-kopf{margin-bottom:18px}.shop-kopf h1{font-family:var(--serif);font-size:34px;color:var(--n9);line-height:1.15;margin:2px 0 6px}.shop-kopf .unter{color:var(--ink2);max-width:640px}
.shop-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.shop-raster .st-gruppe{margin:6px 0 12px}.shop-raster .st-raster{margin-bottom:22px}
.st-raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.shop-seite-rechts{position:sticky;top:16px}
.shop-anfrage{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink2)}.shop-anfrage .ico{color:var(--t7);flex:none}
.w-korb h2 .ico{width:20px;height:20px;vertical-align:-3px}
.w-leer{font-size:14px;color:var(--ink2);margin:6px 0 0}
.w-liste{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.w-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:14px}.w-liste b{white-space:nowrap}
.w-weg{appearance:none;border:0;background:none;color:var(--ink3);cursor:pointer;padding:4px;border-radius:6px}.w-weg:hover{color:var(--bad);background:#f8e5e2}.w-weg .ico{width:16px;height:16px}
.w-summe{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-top:1px solid var(--line)}.w-summe b{white-space:nowrap}
.w-summe.leise{color:var(--ink2);border-top:0}.w-summe.gesamt{font-size:17px;color:var(--n9);border-top:2px solid var(--line2);margin-bottom:12px}.w-summe.gesamt b{font-family:var(--serif);font-size:22px}
.w-hinweis{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;color:var(--ink2)}.w-hinweis .ico{width:16px;height:16px;color:var(--t7);flex:none}
.k-schritte{display:flex;gap:10px;margin:0 0 18px}
.k-schritte li{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--ink2)}
.k-schritte span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--ink2);font-weight:700;flex:none}
.k-schritte .fertig span{background:var(--ok);color:#fff}.k-schritte .jetzt{border-color:var(--t7);color:var(--n9);box-shadow:inset 0 -3px 0 var(--t7)}.k-schritte .jetzt span{background:var(--t7);color:#fff}
.kasse-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.kasse-adresse{grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1.4fr)}
.k-zahlung{border:0;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.k-zahlung legend{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--ink)}
.k-zw{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;cursor:pointer}
.k-zw:has(input:checked){border-color:var(--n7);box-shadow:0 0 0 3px var(--t1)}
.k-zw input{margin-top:3px}.k-zw b{display:block;font-size:14px}.k-zw small{font-size:12.5px;color:var(--ink2)}
.k-knoepfe{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.k-pruef{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:14px;line-height:1.5}
.k-pruef-titel{margin:0 0 2px!important;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tt)}
.k-pruef p{margin:0 0 10px}
.danke{max-width:900px;margin:10px auto;text-align:center}
.danke>.kreis{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:32px;margin-bottom:10px}
.danke>.kreis.nein{background:var(--bad)}.danke>.kreis.warten{background:none;border:5px solid var(--t1);border-top-color:var(--t7);animation:dreh .9s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.danke h1{font-family:var(--serif);font-size:32px;color:var(--n9);margin:0 0 6px}
.danke-karten{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;text-align:left}
.danke-karten h2{font-family:var(--serif);font-size:20px;color:var(--n9);margin:0 0 10px}
.danke-schritte{list-style:decimal;padding-left:20px;margin:0 0 14px;display:flex;flex-direction:column;gap:8px;font-size:14px}
@media (max-width:960px){.shop-raster,.kasse-raster,.danke-karten{grid-template-columns:minmax(0,1fr)}.shop-seite-rechts{position:static}}
@media (max-width:760px){.st-raster-2,.k-pruef{grid-template-columns:minmax(0,1fr)}.k-schritte{flex-direction:column}.kasse-adresse{grid-template-columns:minmax(0,1fr)}.shop-kopf h1{font-size:27px}}
.shop-fehlt{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;font-size:14px}.shop-fehlt li{display:flex;gap:8px;align-items:center}.shop-fehlt .ico{width:16px;height:16px;color:var(--warnT)}
.shop-online{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px}
.shop-online p{margin:0 0 4px;display:flex;gap:8px;align-items:flex-start}.shop-online .ico{width:17px;height:17px;color:var(--t7);flex:none}
.aktionen-zeile{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.b-tab{width:100%;border-collapse:collapse;font-size:14px}
.b-tab th{text-align:left;font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line2)}
.b-tab td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.b-tab td:first-child{width:36px}
.b-tab input[type=checkbox]{width:20px;height:20px}.b-tab label{cursor:pointer}.b-tab .rechts{text-align:right}

/* Admin „Inhalte öffnen“: Kacheln je Produkt; „Shop & Rechnung“: Preistabelle */
.inhalte-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:4px 0 8px}
.inhalt-gruppe{margin-bottom:14px}
.inhalt-gruppe>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:var(--flaeche,#fff);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,32,56,.05)}
.inhalt-gruppe>summary::-webkit-details-marker{display:none}
.inhalt-gruppe>summary:hover{border-color:var(--line2)}
.inhalt-gruppe>summary:focus-visible{outline:3px solid var(--t5,#2a6fdb);outline-offset:2px}
.inhalt-gruppe[open]>summary{margin-bottom:14px}
.inhalt-gruppe-titel{display:flex;flex-direction:column;min-width:0;flex:1}
.inhalt-gruppe-titel b{font-size:17px}
.inhalt-gruppe-titel small{color:var(--ink3,#5b6873);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inhalt-gruppe-pfeil{width:20px;height:20px;transition:transform .15s;color:var(--ink3,#5b6873)}
.inhalt-gruppe[open] .inhalt-gruppe-pfeil{transform:rotate(90deg)}
.inhalt-kachel{padding:18px;display:flex;flex-direction:column;gap:12px}
.inhalt-kachel-kopf{display:flex;gap:12px;align-items:center}
.inhalt-kachel-kopf strong{display:block}
.inhalt-kachel .inhalt-stand-text{margin:0;min-width:0;flex:none}
.inhalt-kachel-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.inhalt-kachel .inhalt-upload{padding-top:10px;border-top:1px solid var(--line)}
.preis-produkt{display:flex;gap:10px;align-items:center}
.preis-produkt .prod-sym{width:34px;height:34px;flex:none}
.preis-produkt strong{display:block}
.preis-feld{white-space:nowrap}
.preis-feld input{width:120px;text-align:right}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Startseite: Umschalter „Für Firmen | Für Privatpersonen“ */
.st-fuer{display:inline-flex;background:var(--bg);border:1px solid var(--line2);border-radius:999px;padding:4px;gap:4px}
.st-fuer a{padding:7px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.st-fuer a:hover{color:var(--n7)}
.st-fuer a.an{background:var(--n7);color:#fff}
.st-fuer a:focus-visible{outline:3px solid var(--t5);outline-offset:2px}

/* Privatpersonen: Mein Bereich, Kasse, Admin */
.privat-ring{position:relative;display:inline-grid;place-items:center;flex:none}
.privat-ring b{position:absolute;font-size:12px}
.privat-gueltig{margin:0;font-size:14px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.privat-gratis{background:#e9f7ef;color:#1a6b50;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600}
.inhalt-kachel.abgelaufen{opacity:.8}
.privat-angebote{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.privat-angebote li{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.privat-angebote li:first-child{border-top:0}
.privat-angebote strong{display:block}
.privat-preis{font-size:17px;white-space:nowrap}
.privat-kauf{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.privat-kauf strong{display:block}
.privat-summe{margin:0;display:grid;gap:8px}
.privat-summe div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.privat-summe dt{color:var(--ink2)} .privat-summe dd{margin:0}
.privat-summe .gesamt{border-top:1px solid var(--line);padding-top:10px;font-size:18px;font-weight:700}
.privat-konten{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.privat-konten>li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.privat-konten>li.gesperrt{background:var(--bg2)}
.privat-konto-kopf{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.privat-konto-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.privat-zugang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.privat-zugang-name{flex:1;min-width:180px}
.privat-zugang input[type=date]{width:auto}
.anm-neu{display:flex;gap:8px;align-items:center;background:var(--t0);border-radius:12px;padding:10px 12px;font-size:14px;margin:14px 0 0}
.anm-neu .ico{width:18px;height:18px;color:var(--n7)}
.kopier-zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:12px 0}
.kopier-zeile code{font-size:13px;word-break:break-all;flex:1;min-width:0}
@media (max-width:640px){.privat-angebote li{grid-template-columns:42px minmax(0,1fr)}.privat-angebote li .privat-preis,.privat-angebote li .btn{grid-column:2}}

/* „Bald verfügbar“ (André: Variante A) – Eintragen in der Produktkarte, Newsletter-Band */
.bald-marke{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:19px;color:var(--n9);font-weight:600}
.bald-marke i{width:9px;height:9px;border-radius:50%;background:#e0a23a;box-shadow:0 0 0 4px #fbeccd;flex:none}
.bald-auf summary{list-style:none}
.bald-auf summary::-webkit-details-marker{display:none}
.bald-auf[open] summary{display:none}
.bald-form{display:grid;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.bald-form strong{font-size:14px}
.bald-form input[type=email],.nl-zeile input{height:46px;border:1.5px solid var(--line2);border-radius:12px;padding:0 14px;background:#fff;font-size:16px;color:var(--ink);width:100%;min-width:0}
.bald-form input[type=email]:focus-visible,.nl-zeile input:focus-visible{outline:3px solid var(--t5);outline-offset:1px;border-color:var(--t7)}
.bald-form .haken{font-size:14px;min-height:0}
.bald-klein{font-size:12.5px;color:var(--ink2);line-height:1.45}
.bald-klein a,.nl-klein a{color:inherit}
.hersteller-hinweis{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2);margin-top:26px}
.hersteller-hinweis .ico{width:18px;height:18px;color:var(--t7);margin-top:1px}
.nl-band{margin:0 56px 56px;background:var(--n8);color:#fff;border-radius:20px;padding:30px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;position:relative}
.nl-band .ueber{color:var(--t3)}
.nl-band h2{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.2;margin:6px 0 8px}
.nl-band p{color:#cfe0ec;font-size:15px}
.nl-zeile{display:flex;gap:8px}
.nl-zeile .btn{flex:none}
.nl-klein{font-size:13px!important;color:#b9cfe0!important;margin-top:10px}
@media (max-width:960px){.nl-band{margin:0 24px 44px;grid-template-columns:1fr;gap:18px;padding:24px}}
@media (max-width:640px){.nl-band{margin:0 16px 36px;padding:22px 18px}.nl-band h2{font-size:22px}.nl-zeile{flex-direction:column}}
.interesse-was{display:grid;gap:10px;margin:14px auto 22px;max-width:520px;text-align:left}
.interesse-was li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}
.interesse-was .ico{color:var(--n7);margin-top:1px}
.int-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.int-zahlen div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.int-zahlen b{font:600 26px/1.1 var(--serif);color:var(--n9)}
.int-zahlen span{font-size:13px;color:var(--ink2)}
.int-downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.verkauf-status{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:14.5px}
.verkauf-status .ico{color:var(--t7);margin-top:1px}
@media (max-width:640px){.int-zahlen{grid-template-columns:1fr}}

/* Zwei-Faktor-Anmeldung */
.code-feld{font-family:var(--mono);font-size:22px!important;letter-spacing:.18em;text-align:center}
.code-hilfe{margin-top:16px;font-size:14px;color:var(--ink2)}
.code-hilfe summary{cursor:pointer;font-weight:600;color:var(--n7)}
.code-hilfe p{margin-top:8px}
.zf-schritte{list-style:decimal;padding-left:22px;display:grid;gap:10px;margin:0 0 18px;font-size:15px}
.zf-qr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;max-width:240px;margin:0 auto}
.zf-qr svg{display:block;width:100%;height:auto}
.zf-schluessel{font-size:15px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;word-break:break-all;text-align:center}
.zf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;list-style:decimal;padding-left:28px;font-size:18px;margin:6px 0 16px}
.zf-codes-karte{max-width:720px}
@media print{.app-seite>aside,.app-leiste,.app-tabbar,.k-fuss,.hinweis,.app-kopf .unter{display:none!important}.zf-codes-karte{box-shadow:none;border:0}}

/* ═══ Startseite dunkel über Video (André: Variante C wie seine Fahrschul-Seite, 27.09.2026) ═══
   Standbild und Videos stehen fest hinter der ganzen Seite, eine dunkle Schicht darüber;
   die Inhalte laufen beim Scrollen darüber. Die Produktkarten bleiben weiß. */
.st-buehne{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0d1f38}
.st-buehne-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.st-buehne .st-hero-videos{position:absolute;inset:0;z-index:1}
.st-buehne::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(10,24,44,.78)}
.st-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.st-hero-video.sichtbar{opacity:1}
.st-video-pause{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(13,31,56,.6);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;backdrop-filter:blur(6px)}
.st-video-pause:hover{background:rgba(13,31,56,.85)}
.st-video-pause .ico{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.st-hero-video{transition:none}}

.st-dunkel .st-hero::before{background:linear-gradient(90deg,rgba(10,24,44,.5) 0%,rgba(10,24,44,.12) 70%)}
.st-dunkel .st-kopf{background:rgba(10,24,44,.55);border-color:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.st-dunkel .st-kopf .logo span{color:#fff}
.st-dunkel .st-nav a{color:#dce9f2}
.st-dunkel .st-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.st-dunkel .st-kopf .btn-s{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.st-dunkel .st-kopf .btn-s:hover{background:rgba(255,255,255,.16)}
.st-dunkel .st-fakten{background:rgba(10,24,44,.45)}
.st-dunkel .st-block .ueber{color:#86c2d0}
.st-dunkel .st-block .st-h2{color:#fff}
.st-dunkel .st-block .st-leise{color:#c3d9e4}
.st-dunkel .st-gruppe{color:#fff}
.st-dunkel .st-gruppe .ico{color:#86c2d0}
.st-dunkel .st-gruppe .anz{background:rgba(255,255,255,.12);color:#fff}
.st-dunkel .st-gruppe::after{background:rgba(255,255,255,.18)}
.st-dunkel .hersteller-hinweis{color:#c3d9e4}
.st-dunkel .hersteller-hinweis .ico{color:#86c2d0}
.st-dunkel .st-so{background:transparent;border-color:rgba(255,255,255,.08)}
.st-dunkel .schritt h3{color:#fff}
.st-dunkel .schritt p{color:#c3d9e4}
.st-dunkel .schritt .sym{color:#86c2d0}
.st-dunkel .schritt .nr{box-shadow:0 0 0 7px #16283e}
.st-dunkel .st-vorteile{background:transparent;background-image:none}
.st-dunkel .nl-band{background:rgba(20,48,79,.72);backdrop-filter:blur(6px)}
.st-dunkel .st-fuss{background:rgba(10,24,44,.6);border-color:rgba(255,255,255,.08)}
.st-dunkel .st-fuss nav a{color:#dce9f2}
.st-dunkel .st-fuss nav a:hover{background:rgba(255,255,255,.08)}
.st-dunkel .st-fuss .logo span{color:#fff}
.st-dunkel .st-fuss .adresse,.st-dunkel .hersteller{color:#b9cfe0}
.st-dunkel .hersteller{border-color:rgba(255,255,255,.14)}
.st-dunkel .hersteller .ico{color:#86c2d0}
@media (max-width:640px){.st-dunkel .st-hero::before{background:linear-gradient(180deg,rgba(10,24,44,.35) 0%,rgba(10,24,44,.55) 100%)}}

/* Firma oder Privat: zwei Karten im Kopf (André: Variante 2) */
.st-wahl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;max-width:660px}
.st-wahl-k{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;transition:background-color .15s,border-color .15s}
.st-wahl-k:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.st-wahl-k .ico{width:30px;height:30px;grid-row:1 / 3;color:#b4dde6;margin-top:2px}
.st-wahl-k b{font:600 19px/1.2 var(--serif)}
.st-wahl-k span{font-size:14px;line-height:1.4;color:#cfe0ec}
.st-wahl-k em{grid-column:2;font-style:normal;font-weight:600;font-size:13px;color:#b4dde6;margin-top:8px}
.st-wahl-k.an{background:#fff;border-color:#fff;color:var(--n9)}
.st-wahl-k.an span{color:var(--ink2)}
.st-wahl-k.an .ico{color:var(--n7)}
.st-wahl-k.an em{color:var(--tt)}
@media (max-width:640px){.st-wahl{grid-template-columns:1fr}}

/* Kopfbereich mittig, darunter drei Karten nebeneinander: Für Firmen · Für Privatpersonen · Teilnehmer-Code (André) */
.st-hero-innen.st-hero-mitte{grid-template-columns:minmax(0,1fr);justify-items:center;gap:36px}
.st-hero-text{display:grid;justify-items:center;text-align:center}
.st-hero-mitte .st-ueber{justify-content:center}
.st-hero-mitte .st-ueber::after{content:"";width:32px;height:2px;background:var(--t3)}
.st-hero-mitte h1{max-width:42ch}
.st-drei{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;width:100%;max-width:1180px;align-items:stretch}
.st-drei .st-wahl{margin-top:0;max-width:none;gap:16px}
.st-drei .st-wahl-k{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px}
.st-drei .st-wahl-k .ico{width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(255,255,255,.12);margin:0 0 6px}
.st-drei .st-wahl-k.an .ico{background:var(--t0)}
.st-drei .st-wahl-k b{font-size:21px}
.st-drei .st-wahl-k span{font-size:14.5px}
.st-drei .st-wahl-k{justify-content:center}
.st-drei .st-wahl-k b{font-size:24px}
.st-drei .st-wahl-k em{margin-top:2px;font-size:14px}
.st-drei .st-code{max-width:none;justify-self:stretch}
@media (max-width:1000px){.st-drei{grid-template-columns:minmax(0,1fr);max-width:720px}}