/* Farben und Schriften aus Entwurf 1 („Marke“), von André gewählt am 26.09.2026 */
:root{--n9:#0d1f38;--n8:#14304f;--n7:#1e4066;--n6:#2b5c84;--t7:#3f8296;--t5:#5ba0b3;--t3:#86c2d0;--t1:#b4dde6;--t0:#e6f2f6;
  --ink:#12263d;--ink2:#4a6280;--ink3:#7e94ac;--tt:#2c6a7c;
  --bg:#eef4f8;--bg2:#f6f9fb;--line:#dde7ef;--line2:#c6d5e1;
  --ok:#1a6b50;--ok0:#e2f1ea;--bad:#97372f;--warn:#9a6412;--warnT:#7f520e;--warn0:#fdf5e8;
  --sh:0 1px 2px rgba(13,31,56,.05),0 12px 32px -14px rgba(13,31,56,.20);
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Cascadia Mono",Menlo,monospace;
  color-scheme:light}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
:focus-visible{outline:3px solid var(--t5);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Knöpfe, Etiketten */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;
  border:1px solid transparent;font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .15s,border-color .15s,color .15s}
.btn .ico{width:18px;height:18px}
.btn-p{background:var(--n7);color:#fff}
.btn-p:hover{background:var(--n8)}
.btn-s{background:#fff;color:var(--n7);border-color:var(--line2)}
.btn-s:hover{border-color:var(--t7);background:var(--bg2)}
.btn-t{background:var(--t1);color:var(--n9)}
.btn-t:hover{background:#c9e8ef}
.btn-rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-rand:hover{background:rgba(255,255,255,.1)}
.btn-gross{min-height:52px;padding:12px 24px;font-size:15.5px;border-radius:14px}
.btn-voll{width:100%}
.muster{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px dashed #c0913f;
  background:var(--warn0);color:var(--warnT);font-size:12px;font-weight:600;white-space:nowrap;line-height:1.5}
.ueber{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tt)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:8px;background:var(--bg);color:var(--ink2);
  font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4}
.chip b{color:var(--n9);font-weight:700;font-size:13.5px}
.chip-t{background:var(--t0);color:var(--n8);font-weight:600}

/* ========== A) START ========== */
.st-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;padding:14px 40px;background:#fff;border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--n9);min-height:44px}
.logo img{width:40px;height:40px}
.logo span{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.005em;white-space:nowrap}
.st-nav{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
.st-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink2);font-weight:500}
.st-nav a:hover{color:var(--n9);background:var(--bg)}
.st-aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.korb-knopf{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:#fff;color:var(--n7);display:grid;place-items:center;cursor:pointer}
.korb-zahl{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--n7);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;font-variant-numeric:tabular-nums}

.st-hero{position:relative;isolation:isolate;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.st-hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:-2}
.st-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,31,56,.96) 0%,rgba(13,31,56,.88) 34%,rgba(13,31,56,.48) 66%,rgba(13,31,56,.22) 100%),
             linear-gradient(0deg,rgba(13,31,56,.75) 0%,rgba(13,31,56,0) 42%)}
.st-hero-innen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:40px;align-items:end;padding:96px 56px 44px}
.st-ueber{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t1);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.st-ueber::before{content:"";width:32px;height:2px;background:var(--t3)}
.st-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4vw,58px);line-height:1.07;letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.st-lead{margin-top:20px;font-size:18px;line-height:1.5;color:#d9eaf0;max-width:44ch}
.st-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.st-code{justify-self:end;width:100%;max-width:390px;background:#fff;color:var(--ink);border-radius:18px;padding:22px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}
.st-code-kopf{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.st-code-sym{width:44px;height:44px;border-radius:12px;background:var(--t0);color:var(--n7);display:grid;place-items:center;flex:none}
.st-code-kopf div strong{display:block;font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--n9);font-weight:600}
.st-code-kopf div span{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.st-code label{font-size:13px;font-weight:600}
.st-code-zeile{display:flex;gap:8px}
.st-code input{flex:1;min-width:0;height:48px;border:1.5px solid var(--line2);border-radius:12px;padding:0 14px;font-family:var(--mono);font-size:18px;letter-spacing:.08em;color:var(--n9)}
.st-code input::placeholder{color:var(--ink2);letter-spacing:.02em;font-family:var(--sans);font-size:15px}
.st-code-fuss{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ok);font-weight:600}
.st-code-fuss .ico{width:16px;height:16px}
.st-fakten{display:flex;flex-wrap:wrap;gap:10px 36px;padding:18px 56px;border-top:1px solid rgba(180,221,230,.18);background:rgba(13,31,56,.6)}
.st-fakten li{display:flex;align-items:baseline;gap:8px;color:#d9eaf0;font-size:14.5px}
.st-fakten b{font-family:var(--serif);font-size:26px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.st-fakten .ico{color:var(--t3);align-self:center}
.st-fakten li.mit-ico{align-items:center}

.st-block{padding:76px 56px}
.st-block-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:36px}
.st-h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.12;color:var(--n9);letter-spacing:-.01em;margin-top:10px;max-width:30ch;text-wrap:balance}
.st-leise{color:var(--ink2);max-width:46ch;font-size:15.5px}
.st-gruppe{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--n8);margin:0 0 16px}
.st-gruppe .ico{color:var(--t7)}
.st-gruppe .anz{font-size:12.5px;background:var(--t0);color:var(--n8);border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
.st-gruppe::after{content:"";flex:1;height:1px;background:var(--line)}
.st-raster{display:grid;gap:24px}
.st-raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.st-raster + .st-gruppe{margin-top:52px}

.pk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);min-width:0}
.pk-bild{aspect-ratio:16/9;background:linear-gradient(160deg,#e3f0f5 0%,#f7fbfc 100%);position:relative;overflow:hidden}
.pk-bild img{width:100%;height:100%;object-fit:cover}
.pk-sym{display:grid;place-items:center;color:var(--n7)}
.pk-sym svg{width:78%;max-width:300px;height:auto;overflow:visible}
.st-raster-4 .pk-bild{aspect-ratio:auto;height:150px}
.st-raster-4 .pk-sym svg{width:auto;height:112px}
.pk-body{padding:20px 22px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.art{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px 4px 8px;border-radius:999px;line-height:1.3}
.art .ico{width:15px;height:15px}
.art-sim{background:var(--n7);color:#fff}
.art-pr{background:var(--t0);color:var(--n8);border:1px solid var(--t1)}
.pk h4{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;color:var(--n9)}
.pk h4 .zusatz{display:block;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink2);margin-top:3px}
.pk p{color:var(--ink2);font-size:14.5px}
.pk .chips{margin-top:2px}
.pk-fuss{padding:16px 22px 22px;margin-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.preis{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.preis strong{font-family:var(--serif);font-size:19px;color:var(--n9);font-weight:600}
.preis span{font-size:13px;color:var(--ink2)}
.pk-korb[aria-pressed="true"]{background:var(--ok)}

.st-so{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.schritte::before{content:"";position:absolute;left:28px;right:calc(25% - 28px);top:27px;height:2px;background:linear-gradient(90deg,var(--t3),var(--n6))}
.schritt{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.schritt .nr{width:56px;height:56px;border-radius:50%;background:var(--n7);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:24px;font-weight:600;box-shadow:0 0 0 7px #fff}
.schritt:last-child .nr{background:var(--t7)}
.schritt h3{font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--n9);font-weight:600;margin-top:6px}
.schritt p{color:var(--ink2);font-size:14.5px}
.schritt .sym{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tt)}
.schritt .sym .ico{width:18px;height:18px}

.st-vorteile{background:var(--n9);color:#fff;background-image:radial-gradient(circle at 88% 0%,rgba(91,160,179,.28),transparent 46%),radial-gradient(circle at 0% 100%,rgba(43,92,132,.5),transparent 50%)}
.st-vorteile .ueber{color:var(--t3)}
.st-vorteile .st-h2{color:#fff}
.st-vorteile .st-leise{color:#c3d9e4}
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vorteil{background:rgba(255,255,255,.05);border:1px solid rgba(180,221,230,.2);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.vorteil-kopf{display:flex;gap:14px;align-items:flex-start}
.vorteil-kopf .sym{width:44px;height:44px;border-radius:12px;background:rgba(134,194,208,.16);color:var(--t1);display:grid;place-items:center;flex:none}
.vorteil h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.28}
.mini{background:#fff;border-radius:12px;padding:14px 16px;color:var(--ink);margin-top:auto}
.mini-zeile{display:grid;grid-template-columns:minmax(0,1fr) 84px 22px;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.mini-zeile:last-child{border-bottom:0}
.mini-zeile svg.sig{width:84px;height:24px}
.mini-zeile .ok{color:var(--ok)}
.mini-balken li{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 10px;font-size:13px;padding:4px 0}
.mini-balken .spur{grid-column:1/-1;height:8px;border-radius:4px;background:#e4edf3;overflow:hidden}
.mini-balken .spur i{display:block;height:100%;width:var(--w);background:var(--t7);border-radius:4px}
.mini-balken b{text-align:right;font-variant-numeric:tabular-nums;color:var(--n9)}
.mini-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:13px;align-items:center}
.mini-dl dt{color:var(--ink2)}
.kennung{font-family:var(--mono);font-weight:600;color:var(--n9);background:var(--bg);padding:2px 8px;border-radius:6px;letter-spacing:.03em;font-size:13px;white-space:nowrap}

.st-fuss{padding:40px 56px 36px;background:var(--bg);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px;align-items:center;border-top:1px solid var(--line)}
.st-fuss nav{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.st-fuss nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;color:var(--n7);font-weight:500;text-decoration:none;border-radius:10px}
.st-fuss nav a:hover{background:#fff}
.st-fuss .adresse{font-size:13.5px;color:var(--ink2);margin-top:4px}
.hersteller{grid-column:1/-1;font-size:13.5px;color:var(--ink2);border-top:1px solid var(--line2);padding-top:18px;display:flex;gap:10px;align-items:flex-start}
.hersteller .ico{width:18px;height:18px;color:var(--t7);margin-top:1px}

/* ========== App-Rahmen ========== */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--bg)}
.app-leiste{background:linear-gradient(180deg,var(--n9) 0%,var(--n8) 100%);color:#dbe8f0;display:flex;flex-direction:column;gap:22px;padding:24px 16px 20px}
.app-logo{display:flex;align-items:center;gap:10px;padding:0 8px;color:#fff;text-decoration:none;min-height:44px}
.app-logo img{width:38px;height:38px;background:#fff;border-radius:10px;padding:3px}
.app-logo span{font-family:var(--serif);font-weight:600;font-size:19px;white-space:nowrap}
.app-rolle{margin:0 4px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(180,221,230,.15)}
.app-rolle small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.app-rolle strong{display:block;color:#fff;font-weight:600;font-size:14.5px;line-height:1.35;margin-top:2px}
.app-menue{display:flex;flex-direction:column;gap:2px}
.app-menue a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:#c9dbe7;font-weight:500;font-size:14.5px;position:relative}
.app-menue a:hover{background:rgba(255,255,255,.07);color:#fff}
.app-menue a.aktiv{background:rgba(134,194,208,.17);color:#fff;font-weight:600}
.app-menue a.aktiv::before{content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--t3)}
.app-menue .ico{color:var(--t3)}
.app-nutzer{margin-top:auto;display:flex;align-items:center;gap:12px;padding:16px 8px 0;border-top:1px solid rgba(180,221,230,.15)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--t1);color:var(--n9);flex:none}
.app-nutzer strong{display:block;color:#fff;font-size:14px;line-height:1.3}
.app-nutzer small{display:block;color:#a9c3d3;font-size:12.5px}
.app-inhalt{padding:32px 40px 48px;min-width:0;display:flex;flex-direction:column;gap:24px}
.app-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.app-kopf h1{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.12;color:var(--n9);letter-spacing:-.01em;margin-top:4px}
.app-kopf .unter{color:var(--ink2);margin-top:4px}
.kopf-rechts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.sp-4{grid-column:span 4}.sp-5{grid-column:span 5}.sp-7{grid-column:span 7}.sp-8{grid-column:span 8}.sp-12{grid-column:1 / -1}
.karte{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:24px;min-width:0}
.k-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap;margin-bottom:18px}
.k-kopf h2{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25;color:var(--n9)}
.k-kopf .leise{font-size:13px;color:var(--ink2);margin-top:2px}
.gross{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gross .zahl{font-family:var(--serif);font-size:52px;line-height:1;font-weight:600;color:var(--n9);font-variant-numeric:tabular-nums}
.gross .einheit{font-size:16px;color:var(--ink2);font-weight:500}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--n7);font-weight:600;text-decoration:none;font-size:14px}
.link:hover{color:var(--tt);text-decoration:underline}
.link .ico{width:16px;height:16px}

/* Ring */
.ring-box{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:20px}
.ring{position:relative;width:156px;height:156px;flex:none}
.ring svg{width:156px;height:156px;transform:rotate(-90deg);display:block}
.ring-mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-mitte b{font-family:var(--serif);font-size:30px;line-height:1;color:var(--n9);font-variant-numeric:tabular-nums}
.ring-mitte span{font-size:12.5px;color:var(--ink2);margin-top:4px}
.legende{display:flex;flex-direction:column;gap:12px;flex:1;min-width:170px}
.legende li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14.5px}
.legende i{width:14px;height:14px;border-radius:4px;background:var(--f)}
.legende b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--n9);font-size:17px}

/* Säulen */
.s-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2)}
.s-legende span{display:inline-flex;align-items:center;gap:6px}
.s-legende i{width:12px;height:12px;border-radius:3px;background:var(--f)}
.s-plot{position:relative;height:168px;margin:30px 0 0 30px}
.s-linie{position:absolute;left:0;right:0;top:calc((4 - var(--y)) * 42px);height:0;border-top:1px solid #e3ebf2}
.s-linie.basis{border-top:1.5px solid #9db1c4}
.s-linie em{position:absolute;right:calc(100% + 10px);top:-10px;font-style:normal;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.s-spalten{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:100%}
.s-sp{position:relative;height:100%;min-width:0}
.s-sp i{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(30px,64%);height:calc(var(--v) * 42px);background:var(--n6);border-radius:4px 4px 0 0}
.s-sp.null i{height:2px;border-radius:1px}
.s-sp.jetzt i{background:var(--t7)}
.s-w{position:absolute;left:0;right:0;text-align:center;bottom:calc(var(--v) * 42px + 6px);font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.s-kws{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:8px 0 0 30px;font-size:12px;color:var(--ink2);text-align:center;font-variant-numeric:tabular-nums}
.s-kws .jetzt{color:var(--tt);font-weight:700}
.s-achsname{margin:6px 0 0 30px;font-size:12px;color:var(--ink2);text-align:center}

/* Balken */
.balken{display:flex;flex-direction:column;gap:18px}
.balken li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:baseline}
.balken .name{font-weight:500;font-size:14.5px}
.balken .wert{font-weight:700;color:var(--n9);font-variant-numeric:tabular-nums;font-size:16px}
.balken .spur{grid-column:1/-1;height:12px;border-radius:6px;background:#e4edf3;overflow:hidden}
.balken .spur i{display:block;height:100%;width:var(--w);background:var(--t7);border-radius:6px}
.skala{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-top:10px;font-variant-numeric:tabular-nums}
.erkl-klein{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.erkl-klein i{width:22px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--t7) 60%,#e4edf3 60%)}

/* Produkte-Liste */
.prod{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.prod:first-child{border-top:0;padding-top:2px}
.prod-sym{width:42px;height:42px;border-radius:11px;background:var(--t0);color:var(--n7);display:grid;place-items:center}
.prod strong{display:block;font-weight:600;color:var(--n9);line-height:1.35}
.lizenz{font-size:13px;color:var(--ink2);display:block;margin-top:2px}
.lizenz b{color:var(--n7);font-weight:700}
.spaeter{display:inline-flex;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px dashed #c0913f;background:var(--warn0);color:var(--warnT);font-size:11.5px;font-weight:600}
.prod-ok{color:var(--ok);display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.prod-ok .ico{width:16px;height:16px}
.prod.offen .prod-sym{background:#fff;border:1.5px dashed var(--line2);color:var(--ink2)}
.prod-spalten{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 44px}
.prod-kopf{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.prod-kopf + ul .prod:first-child{padding-top:12px}
.zwischen{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--line2)}
.btn-klein{min-height:44px;padding:8px 14px;font-size:13.5px}

/* Trainer-Liste */
.tr-kopfzeile{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.5fr) 200px;gap:16px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);padding-bottom:8px}
.tr-liste > li{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.5fr) 200px;gap:10px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.tr-liste .avatar{width:44px;height:44px}
.tr-liste .avatar.gast{background:var(--n7);color:#fff}
.tr-name strong{display:block;color:var(--n9);font-weight:600}
.tr-name small{display:block;font-size:13px;color:var(--ink2)}
.tr-zahl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.tr-zahl b{font-family:var(--serif);font-size:28px;line-height:1;color:var(--n9);font-variant-numeric:tabular-nums;min-width:18px}
.tr-zahl .spur{height:10px;border-radius:5px;background:#e4edf3;overflow:hidden}
.tr-zahl .spur i{display:block;height:100%;width:var(--w);background:var(--n6);border-radius:5px}
.tr-zahl small{grid-column:1/-1;font-size:12px;color:var(--ink2);display:none}
.k-fuss{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* Termine */
.termine li{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}
.termine li:first-child{border-top:0;padding-top:2px}
.datum{border-radius:12px;background:var(--n7);color:#fff;text-align:center;padding:7px 0 8px;line-height:1.2}
.datum small{display:block;font-size:12px;color:var(--t1);font-weight:600}
.datum b{display:block;font-family:var(--serif);font-size:26px;line-height:1.05;font-variant-numeric:tabular-nums}
.termin strong{display:block;color:var(--n9);font-weight:600;line-height:1.3}
.termin .meta-k{font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px}
.termin .meta-k span{display:inline-flex;align-items:center;gap:5px}
.termin .meta-k .ico{width:14px;height:14px;color:var(--t7)}
.termine .link{white-space:nowrap}

/* ========== C) TRAINER ========== */
.pfad{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--ink2)}
.pfad a{color:var(--n7);text-decoration:none;font-weight:500;min-height:32px;display:inline-flex;align-items:center}
.pfad a:hover{text-decoration:underline}
.tk{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.tk-oben{padding:24px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:flex-start}
.tk-titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tk h1{font-family:var(--serif);font-size:38px;line-height:1.1;font-weight:600;color:var(--n9);letter-spacing:-.01em}
.art-schulung{display:inline-flex;align-items:center;gap:6px;background:var(--t0);border:1px solid var(--t1);color:var(--n8);font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--ink2);font-size:14px}
.meta span{display:inline-flex;align-items:center;gap:7px}
.meta .ico{width:17px;height:17px;color:var(--t7)}
.tk-aktionen{display:flex;flex-wrap:wrap;gap:10px}
.btn-warn{background:#fff;color:var(--bad);border-color:#dcb4af}
.btn-warn:hover{background:#fbf1f0;border-color:var(--bad)}
.status-leiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);background:var(--bg2)}
.status-leiste li{display:flex;align-items:center;gap:10px;padding:14px 22px;font-weight:500;color:var(--ink2);position:relative;min-width:0;font-size:14.5px}
.status-leiste li + li::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;border-top:1.5px solid var(--line2);border-right:1.5px solid var(--line2);transform:translateY(-50%) rotate(45deg);background:var(--bg2)}
.status-leiste .punkt{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;background:#fff;font-variant-numeric:tabular-nums}
.status-leiste .erledigt{color:var(--n7)}
.status-leiste .erledigt .punkt{background:var(--n7);border-color:var(--n7);color:#fff}
.status-leiste .erledigt .punkt .ico{width:14px;height:14px;stroke-width:2.6}
.status-leiste .jetzt{color:var(--n9);font-weight:700;background:#fff;box-shadow:inset 0 -3px 0 var(--t7)}
.status-leiste .jetzt .punkt{border-color:var(--t7);background:var(--t7);color:#fff}
.status-leiste .jetzt em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--tt);background:var(--t0);border-radius:999px;padding:1px 8px;margin-left:auto}
.tr-raster{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(300px,1fr);gap:24px;align-items:start}
.spalte{display:flex;flex-direction:column;gap:24px;min-width:0}
.qr-karte{padding:0;overflow:hidden}
.qr-oben{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;padding:28px;align-items:center}
.qr-gross{width:260px;padding:14px;background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 24px -12px rgba(13,31,56,.35)}
.qr-info h2{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--n9);line-height:1.2}
.qr-info .leise{color:var(--ink2);margin-top:6px}
.kurz{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.kurz small{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.kurzcode{font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:.06em;color:var(--n9);line-height:1.1;font-variant-numeric:tabular-nums}
.kurz-url{font-size:15px;color:var(--tt);font-weight:600}
.qr-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.zaehler{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:20px 28px;background:linear-gradient(90deg,var(--t0),#f3f9fb);border-top:1px solid var(--line)}
.zaehler .gross .zahl{font-size:46px}
.zaehler .gross .einheit{font-size:16px;color:var(--n8);font-weight:600}
.koepfe{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 300px;min-width:0}
.kopf-p{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--n7);color:#fff}
.kopf-p .ico{width:15px;height:15px;stroke-width:2.6}
.kopf-p.leer{background:#fff;border:2px dashed #c0913f;color:var(--warnT);font-size:12px;font-weight:700}
.zaehler-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2);width:100%}
.zaehler-leg span{display:inline-flex;align-items:center;gap:6px}
.zaehler-leg i{width:12px;height:12px;border-radius:50%;background:var(--n7)}
.zaehler-leg i.leer{background:#fff;border:2px dashed #c0913f}

.tab-box{overflow-x:auto;margin:0 -24px;padding:0 24px}
.tl{width:100%;border-collapse:collapse;min-width:600px;font-size:14px}
.tl th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);padding:10px 8px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tl td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle;height:54px}
.tl tr:last-child td{border-bottom:0}
.tl .nr{color:var(--ink2);font-variant-numeric:tabular-nums;width:36px}
.tl .name{font-weight:600;color:var(--n9);white-space:nowrap}
.tl .firma{color:var(--ink2)}
.tl .zeit{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tl svg.sig{width:104px;height:30px;display:block}
.tl .btn-klein{padding:6px 10px;font-size:13px;gap:6px}
.tl .btn-klein .ico{width:16px;height:16px}
.ext{display:inline-flex;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--t0);border:1px solid var(--t1);color:var(--n8);font-size:11.5px;font-weight:700}
.st-ok,.st-fehlt{display:inline-flex;align-items:center;gap:5px;font-weight:600;padding:3px 10px 3px 7px;border-radius:999px;font-size:13px;white-space:nowrap}
.st-ok{color:var(--ok);background:var(--ok0)}
.st-fehlt{color:var(--warnT);background:var(--warn0);border:1px dashed #c0913f}
.st-ok .ico,.st-fehlt .ico{width:15px;height:15px;stroke-width:2.4}
.tl tr.fehlt td{background:#fffbf4}
.tl .ohne{color:var(--ink2);font-size:13px}

.schalter-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.schalter-liste li:first-child{border-top:0;padding-top:0}
.schalter-liste strong{display:block;font-weight:600;color:var(--n9);font-size:14.5px;line-height:1.35}
.schalter-liste small{display:block;font-size:12.5px;color:var(--ink2)}
.schalter-wrap{display:flex;align-items:center;gap:4px}
.schalter-wort{font-size:13px;font-weight:700;min-width:26px;text-align:right;color:var(--n7)}
.schalter{position:relative;width:60px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.schalter::before{content:"";position:absolute;left:4px;right:4px;top:8px;height:28px;border-radius:14px;background:#aebdcb;transition:background-color .15s}
.schalter::after{content:"";position:absolute;left:8px;top:12px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,31,56,.3);transition:transform .15s}
.schalter[aria-checked="true"]::before{background:var(--t7)}
.schalter[aria-checked="true"]::after{transform:translateX(24px)}
.schalter-wrap.aus .schalter-wort{color:var(--ink2);font-weight:600}
.hinweis{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--t0);color:var(--n8);font-size:13.5px;margin-top:14px;line-height:1.4}
.hinweis .ico{width:18px;height:18px;color:var(--tt)}

.mini-folie{aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line2);overflow:hidden;background:#fff;display:flex;flex-direction:column;margin-bottom:16px}
.mini-folie .band{height:19%;background:var(--n8);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#fff;font-size:11px;font-weight:600;gap:8px}
.mini-folie .band span:last-child{color:var(--t1);font-weight:500}
.mf-inhalt{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.mf-titel{height:9px;width:72%;border-radius:4px;background:var(--n7);margin-bottom:4px}
.mf-zeile{display:flex;align-items:center;gap:6px}
.mf-zeile b{width:12px;height:12px;border-radius:3px;background:var(--n7)}
.mf-zeile i{height:8px;border-radius:4px;background:var(--t5);width:var(--w)}
.mf-zeile.ok b,.mf-zeile.ok i{background:var(--ok)}
.praes-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.knopf-stapel{display:flex;flex-direction:column;gap:10px}

.dl-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;margin-top:16px;font-size:14px;align-items:baseline}
.dl-info dt{color:var(--ink2);font-size:13px}
.dl-info dd{color:var(--ink);font-weight:500}
.protokoll{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink2);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.protokoll .ico{width:16px;height:16px;color:var(--tt);margin-top:1px}

/* ========== D) PRÄSENTATION ========== */
.pr{background:radial-gradient(ellipse at 50% -10%,#21446b 0%,var(--n9) 62%);padding:22px 32px 32px;color:#dbe8f0}
.pr-oben{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 auto 20px;max-width:1200px}
.pr-zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;color:#fff;text-decoration:none;border:1px solid rgba(180,221,230,.3);font-weight:500;font-size:14px}
.pr-zurueck:hover{background:rgba(255,255,255,.07)}
.pr-titel{margin-right:auto;font-weight:600;color:#fff;font-size:15px;display:flex;align-items:center;gap:8px}
.pr-titel .ico{color:var(--t3)}
.pr-live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#cfe4ec}
.pr-live i{width:8px;height:8px;border-radius:50%;background:#5fc49a;box-shadow:0 0 0 3px rgba(95,196,154,.25)}
.pr-rahmen{container-type:inline-size;container-name:e1folie;max-width:1200px;margin:0 auto}
.folie{aspect-ratio:16/9;background:#fff;color:var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;font-size:1.2cqw;line-height:1.45;box-shadow:0 30px 80px -24px rgba(0,0,0,.65)}
.f-band{display:flex;align-items:center;gap:1.4em;background:var(--n8);color:#fff;padding:0 2.6em;height:4.6em;flex:none}
.f-logo{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:600;font-size:1.15em;white-space:nowrap}
.f-logo img{width:2.2em;height:2.2em;background:#fff;border-radius:.5em;padding:.15em}
.f-kapitel{flex:1;min-width:0;color:#d3e6ee;font-size:1.05em;border-left:1px solid rgba(255,255,255,.25);padding-left:1.3em}
.f-nr{font-weight:600;background:rgba(134,194,208,.22);color:#fff;padding:.35em 1em;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.f-inhalt{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 17em;gap:2.6em;padding:2em 2.6em 1.4em;min-height:0}
.f-etikett{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95em;color:var(--tt);background:var(--t0);border:1px solid var(--t1);padding:.3em .9em;border-radius:999px}
.f-etikett .ico{width:1.2em;height:1.2em}
.f-frage{font-family:var(--serif);font-weight:600;font-size:1.72em;line-height:1.3;color:var(--n9);margin:.6em 0 .9em;letter-spacing:-.003em}
.f-antworten{display:flex;flex-direction:column;gap:.55em}
.f-antworten li{display:grid;grid-template-columns:2.7em 12.5em minmax(0,1fr) 6.2em;align-items:center;gap:1em;padding:.5em 1.1em .5em .5em;border-radius:.8em;border:1px solid var(--line);background:#fbfdfe}
.bu{width:2.7em;height:2.7em;border-radius:.6em;background:var(--n7);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1em;flex:none}
.f-wert{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .7em;font-weight:700;font-size:1.3em;color:var(--n9);font-variant-numeric:tabular-nums}
.f-spur{height:1.25em;background:#e5eef4;border-radius:.4em;overflow:hidden}
.f-spur i{display:block;height:100%;width:var(--w);background:var(--t7);border-radius:.4em}
.f-stimmen{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink2);white-space:nowrap}
.f-stimmen b{color:var(--n9);font-size:1.25em;margin-right:.2em}
.f-antworten li.richtig{background:var(--ok0);border:2px solid var(--ok)}
.f-antworten li.richtig .bu{background:var(--ok)}
.f-antworten li.richtig .f-spur i{background:var(--ok)}
.richtig-marke{display:inline-flex;align-items:center;gap:.3em;background:var(--ok);color:#fff;font-size:.7em;font-weight:700;padding:.25em .8em .25em .55em;border-radius:999px;letter-spacing:.02em}
.richtig-marke .ico{width:1.3em;height:1.3em;stroke-width:3}
.f-erkl{display:flex;align-items:flex-start;gap:.8em;margin-top:1em;padding:.8em 1.1em;border-radius:.8em;background:var(--bg);border-left:.3em solid var(--ok);font-size:1.08em;color:var(--ink)}
.f-erkl .ico{width:1.4em;height:1.4em;color:var(--ok);margin-top:.05em}
.f-erkl b{color:var(--n9)}
.f-mit{background:var(--bg);border:1px solid var(--line);border-radius:1em;padding:1.4em 1.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5em}
.f-mit h3{font-size:1.25em;font-weight:700;color:var(--n9);display:flex;align-items:center;gap:.4em}
.f-mit h3 .ico{width:1.2em;height:1.2em;color:var(--t7)}
.f-mit .qr{width:12.5em;padding:max(12px,1em);background:#fff;border-radius:.7em;margin:.3em 0}
.f-mit small{font-size:.9em;color:var(--ink2)}
.f-code{font-family:var(--mono);font-size:1.9em;font-weight:600;color:var(--n9);letter-spacing:.05em;line-height:1.1}
.f-antw{width:100%;margin-top:.6em;padding-top:.9em;border-top:1px solid var(--line2)}
.f-antw .gz{display:flex;align-items:baseline;justify-content:center;gap:.35em;flex-wrap:wrap}
.f-antw .gz b{font-family:var(--serif);font-size:2.3em;line-height:1;color:var(--n9);font-variant-numeric:tabular-nums}
.f-antw .gz span{color:var(--ink2);font-size:.95em}
.f-antw .spur{height:.7em;border-radius:.35em;background:#dde8f0;overflow:hidden;margin-top:.6em}
.f-antw .spur i{display:block;height:100%;width:90.5%;background:var(--n6);border-radius:.35em}
.f-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4em 2em;align-items:center;padding:.8em 2.6em;border-top:1px solid var(--line);background:#f7fafc;font-size:.92em;color:var(--ink2);flex:none}
.f-fuss b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@container e1folie (max-width: 760px){
  .folie{aspect-ratio:auto;font-size:13.5px}
  .f-band{flex-wrap:wrap;height:auto;padding:.9em 1.2em;gap:.5em 1em}
  .f-kapitel{order:3;flex-basis:100%;border:0;padding:0}
  .f-logo{margin-right:auto}
  .f-inhalt{grid-template-columns:minmax(0,1fr);padding:1.3em 1.2em;gap:1.4em}
  .f-frage{font-size:1.35em}
  .f-antworten li{grid-template-columns:2.7em minmax(0,1fr) auto;gap:.4em .8em}
  .f-antworten li .bu{grid-row:span 2}
  .f-spur{grid-column:2 / 4}
  .f-fuss{padding:.8em 1.2em}
}
.pr-steuer{max-width:1200px;margin:20px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(180,221,230,.2);border-radius:16px;padding:14px 18px}
.ps-folie{display:flex;align-items:center;gap:12px}
.ps-folie small{font-size:12px;color:#b8d1dd;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.ps-folie b{font-family:var(--mono);color:#fff;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.ps-spur{width:120px;height:6px;background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden}
.ps-spur i{display:block;height:100%;width:28.6%;background:var(--t3)}
.ps-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.btn-dunkel{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(180,221,230,.32)}
.btn-dunkel:hover{background:rgba(255,255,255,.14)}
.btn-erledigt{background:transparent;color:#b8d1dd;border-color:rgba(180,221,230,.22);cursor:default}
.btn-erledigt .ico{color:#7fd3ae}
.btn-aktiv{background:rgba(26,107,80,.35);color:#fff;border-color:#5fc49a}
.btn-aktiv .ico{color:#9fe3c4}
.ps-info{margin-left:auto;display:flex;align-items:center;gap:8px;color:#c3d9e4;font-size:13.5px}
.ps-info .ico{width:18px;height:18px;color:var(--t3)}
.pr .muster{background:rgba(253,245,232,.95)}

/* ========== E) HANDY ========== */
.hd{background:linear-gradient(180deg,var(--bg) 0%,#e2ecf3 100%);padding:36px 24px 52px}
.hd-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;text-align:center;margin-bottom:34px}
.hd-kopf h1{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.3vw,30px);color:var(--n9);line-height:1.25;text-wrap:balance}
.hd-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 20px}
.hd-schritt{display:flex;flex-direction:column;align-items:center;gap:14px;width:320px;max-width:100%}
.hd-schritt figcaption{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--n8);font-size:15px}
.hd-schritt figcaption .nr{width:30px;height:30px;border-radius:50%;background:var(--n7);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.handy{width:320px;max-width:100%;height:712px;border-radius:46px;background:var(--n9);padding:9px;box-shadow:0 34px 60px -28px rgba(13,31,56,.6),inset 0 0 0 1.5px #2b5c84}
.ph{height:100%;border-radius:38px;background:var(--bg2);overflow:hidden;display:flex;flex-direction:column}
.ph-app{display:flex;align-items:center;gap:8px;padding:16px 18px 12px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.ph-app img{width:26px;height:26px}
.ph-app > span{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--n9);margin-right:auto;white-space:nowrap}
.ph-app .muster{font-size:11px;padding:1px 8px}
.ph-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px 18px 20px;min-height:0}
.ph-event{background:linear-gradient(135deg,var(--n8),var(--n6));color:#fff;border-radius:16px;padding:14px 16px}
.ph-event small{color:var(--t1);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.ph-event b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;margin:1px 0 4px;line-height:1.2}
.ph-event span{display:block;font-size:13.5px;color:#dcebf1}
.ph-schritte{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);font-weight:600}
.ph-schritte i{flex:1;height:5px;border-radius:3px;background:var(--line2)}
.ph-schritte i.an{background:var(--t7)}
.ph-schritte span{white-space:nowrap}
.ph-h2{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--n9);line-height:1.2}
.feld{display:flex;flex-direction:column;gap:5px}
.feld label{font-size:13px;font-weight:600;color:var(--ink)}
.feld label em{font-style:normal;font-weight:500;color:var(--ink2)}
.feld 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%}
.feld input::placeholder{color:var(--ink2)}
.feld input:focus-visible{outline:3px solid var(--t5);outline-offset:1px;border-color:var(--t7)}
.feld .tipp{font-size:12px;color:var(--ink2)}
.ph-unten{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.ph-name{font-size:14px;color:var(--ink2)}
.ph-name b{color:var(--n9)}
.unterschrift{position:relative;height:268px;border:2px dashed var(--t3);border-radius:16px;background:#fff}
.unterschrift .platz{position:absolute;left:16px;top:12px;font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.unterschrift .platz .ico{width:15px;height:15px;color:var(--t7)}
.unterschrift .linie{position:absolute;left:18px;right:18px;bottom:62px;border-top:1.5px solid var(--line2)}
.unterschrift .x{position:absolute;left:18px;bottom:68px;font-size:20px;line-height:1;color:var(--ink2)}
.unterschrift > svg{position:absolute;left:14px;right:14px;bottom:44px;width:calc(100% - 28px);height:150px}
.unterschrift .unter-name{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:12px;color:var(--ink2)}
.ph-satz{font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start}
.ph-satz .ico{width:16px;height:16px;color:var(--tt);margin-top:2px}
.ph-knoepfe{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.ph-knoepfe .btn,.ph-unten .btn{min-height:52px;border-radius:14px;font-size:15.5px}
.ph-fertig{display:flex;align-items:center;gap:12px}
.ph-fertig .kreis{width:48px;height:48px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}
.ph-fertig .kreis .ico{width:26px;height:26px;stroke-width:2.6}
.ph-fertig b{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--n9);font-weight:600}
.pass{background:linear-gradient(150deg,var(--n9),var(--n7));color:#fff;border-radius:18px;padding:14px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;overflow:hidden}
.pass::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;border:18px solid rgba(134,194,208,.12)}
.pass small{letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;font-weight:600;color:var(--t1)}
.pass .qr{width:150px;padding:12px;background:#fff;border-radius:12px;position:relative;z-index:1}
.pass .gilt{font-size:13.5px;color:#e3f0f5;line-height:1.35}
.pass .gilt b{color:#fff;font-variant-numeric:tabular-nums}
.frei-titel{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.frei li{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;background:#fff;border:1px solid var(--line);border-radius:12px}
.frei li + li{margin-top:8px}
.frei .ico.sym{color:var(--t7)}
.frei .txt{flex:1;font-size:13.5px;font-weight:600;color:var(--n9);line-height:1.3;min-width:0}
.frei .btn{min-height:44px;padding:8px 14px;font-size:13.5px}
.ph-hinweis{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink2);margin-top:auto}
.ph-hinweis .ico{width:16px;height:16px;color:var(--t7)}
.ph-frage-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;background:var(--n7);color:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ph-frage-kopf small{font-size:12.5px;color:var(--ink2)}
.ph-frage{font-family:var(--serif);font-size:18.5px;line-height:1.38;color:var(--n9);font-weight:600}
.ph-antw{display:flex;flex-direction:column;gap:10px}
.ph-antw button{display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 14px 8px 8px;border-radius:14px;border:1.5px solid var(--line2);background:#fff;font-size:19px;font-weight:700;color:var(--n9);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;width:100%}
.ph-antw .bu{width:44px;height:44px;font-size:16px;background:var(--bg);color:var(--n7);border-radius:10px}
.ph-antw .gewaehlt{margin-left:auto;display:none;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--n7)}
.ph-antw .gewaehlt .ico{width:18px;height:18px;stroke-width:2.6}
.ph-antw button[aria-pressed="true"]{border:2px solid var(--n7);background:var(--t0)}
.ph-antw button[aria-pressed="true"] .bu{background:var(--n7);color:#fff}
.ph-antw button[aria-pressed="true"] .gewaehlt{display:inline-flex}
.ph-abgegeben{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--ok0);color:var(--ok);font-weight:600;font-size:14.5px}
.ph-abgegeben .ico{stroke-width:2.4}
.ph-warten{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink2);font-size:14px;margin-top:auto;padding:6px 0}
.punkte{display:inline-flex;gap:5px}
.punkte i{width:7px;height:7px;border-radius:50%;background:var(--t7);animation:e1-puls 1.4s infinite ease-in-out}
.punkte i:nth-child(2){animation-delay:.2s}
.punkte i:nth-child(3){animation-delay:.4s}
@keyframes e1-puls{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ========== Breiten ========== */
@media (max-width:1200px){
  .tr-raster{grid-template-columns:minmax(0,1fr)}
  .tr-raster > .spalte:last-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
}
@media (max-width:1100px){
  .st-raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-hero-innen{grid-template-columns:minmax(0,1fr);padding:72px 40px 36px;gap:28px}
  .st-code{justify-self:start}
  .raster > *{grid-column:1 / -1}
  .vorteile{grid-template-columns:minmax(0,1fr)}
  .vorteil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .mini{margin-top:0}
}
@media (max-width:1000px){
  .tr-kopfzeile{display:none}
  .tr-liste > li{grid-template-columns:44px minmax(0,1fr)}
  .tr-liste > li > .chips,.tr-zahl{grid-column:2}
  .tr-zahl{max-width:320px}
  .tr-zahl small{display:block}
  .prod-spalten{grid-template-columns:minmax(0,1fr)}
  .prod-spalten > div + div{margin-top:18px}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr);min-height:0}
  .app-leiste{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px}
  .app-logo{padding:0}
  .app-nutzer{margin:0 0 0 auto;border:0;padding:0}
  .app-rolle{order:3;flex-basis:100%;margin:0;padding:10px 12px}
  .app-menue{order:4;flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
  .app-menue a{background:rgba(255,255,255,.04)}
  .app-menue a.aktiv::before{display:none}
  .app-inhalt{padding:24px 20px 32px}
  .st-kopf{padding:12px 20px}
  .st-nav{order:3;flex-basis:100%;margin:0}
  .st-aktionen{margin-left:auto}
  .st-block{padding:56px 24px}
  .st-fakten{padding:16px 24px}
  .st-hero-innen{padding:64px 24px 32px}
  .st-raster-3{grid-template-columns:minmax(0,1fr)}
  .st-raster-3 .pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto}
  .st-raster-3 .pk-bild{grid-row:1 / 3;aspect-ratio:auto;height:100%;min-height:260px}
  .st-raster-3 .pk-fuss{grid-column:2}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritte::before{display:none}
  .st-fuss{padding:32px 24px;grid-template-columns:minmax(0,1fr)}
  .st-fuss nav{justify-content:flex-start;margin-left:-12px}
  .qr-oben{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .qr-knoepfe{justify-content:center}
  .status-leiste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-leiste li + li::before{display:none}
  .status-leiste li{border-top:1px solid var(--line)}
  .pr{padding:18px 16px 24px}
}
@media (max-width:640px){
  .st-kopf{gap:8px 12px}
  .logo span{font-size:19px}
  .st-aktionen{margin-left:0;flex-basis:100%;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px}
  .st-aktionen .btn:first-child{grid-column:1 / -1}
  .st-hero{min-height:0}
  .st-hero::before{background:linear-gradient(180deg,rgba(13,31,56,.55) 0%,rgba(13,31,56,.9) 38%,rgba(13,31,56,.97) 100%)}
  .st-hero-innen{padding:56px 16px 24px}
  .st-lead{font-size:16.5px}
  .st-knoepfe .btn{flex:1 1 100%}
  .st-fakten{padding:14px 16px;gap:8px 20px}
  .st-block{padding:44px 16px}
  .st-raster-4{grid-template-columns:minmax(0,1fr)}
  .st-raster-3 .pk{display:flex}
  .st-raster-3 .pk-bild{aspect-ratio:16/9;height:auto;min-height:0}
  .schritte{grid-template-columns:minmax(0,1fr);gap:22px}
  .schritt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px}
  .schritt .nr{grid-row:span 3}
  .schritt h3{margin-top:0}
  .vorteil{display:flex}
  .st-fuss{padding:28px 16px}
  .app-nutzer .txt{display:none}
  .app-inhalt{padding:20px 14px 28px}
  .app-kopf h1,.tk h1{font-size:30px}
  .karte{padding:20px 18px}
  .tab-box{margin:0 -18px;padding:0 18px}
  .tk-oben{padding:20px 18px}
  .tk-aktionen .btn{flex:1 1 auto}
  .qr-oben{padding:22px 18px}
  .qr-gross{width:236px}
  .kurzcode{font-size:38px}
  .zaehler{padding:18px}
  .status-leiste li{padding:12px 14px}
  .status-leiste .jetzt em{display:none}
  .ps-info{margin-left:0}
  .termine li{grid-template-columns:60px minmax(0,1fr)}
  .tl,.tl tbody{display:block;min-width:0}
  .tl thead{display:none}
  .tl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "firma zeit" "sig sig";gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tl tr:last-child{border-bottom:0}
  .tl td{display:block;height:auto;padding:0;border:0;background:none!important}
  .tl td:nth-child(1){grid-area:name}
  .tl td:nth-child(2){grid-area:firma;font-size:13px}
  .tl td:nth-child(3){grid-area:zeit;text-align:right}
  .tl td:nth-child(4){grid-area:sig}
  .tl td:nth-child(5){grid-area:status;text-align:right}
  .tl tr.fehlt{background:#fffbf4;margin:0 -18px;padding:12px 18px}
  .prod{grid-template-columns:42px minmax(0,1fr);gap:6px 14px}
  .prod > :last-child{grid-column:2;justify-self:start}
  .prod-sym{grid-row:span 2}
  .termine .link{grid-column:2;min-height:40px}
  .datum{grid-row:span 2}
  .ring-box{justify-content:center}
  .pr-steuer .ps-knoepfe .btn{flex:1 1 auto}
  .hd{padding:28px 12px 40px}
  .handy{height:auto;min-height:712px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}