/* Shop, Warenkorb, Kasse, Kundenbereich-Reiter: Bausteine für programme.html, kasse.html, kunde.html
   Farben und Schriften kommen aus style.css (--navy, --gold, Playfair/DM Sans). */

/* ── Schwebender Warenkorb-Knopf ───────────────────────────── */
.wk-knopf{position:fixed;right:22px;bottom:22px;z-index:1100;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid rgba(201,169,110,.5);background:#1b2040;color:#faf7f2;font:inherit;cursor:pointer;box-shadow:0 14px 40px rgba(27,32,64,.35);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,opacity .3s;opacity:0;transform:translateY(12px);pointer-events:none}
.wk.hat .wk-knopf,.wk-immer .wk-knopf{opacity:1;transform:none;pointer-events:auto}
.wk-knopf:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(27,32,64,.45)}
.wk-knopf.hopp{animation:wk-hopp .55s cubic-bezier(.2,.7,.3,1)}
@keyframes wk-hopp{0%{transform:scale(1)}30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.wk-icon{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e6cf9a 0%,#c9a96e 46%,#a68a52 100%);color:#1b2040}
.wk-icon svg{width:20px;height:20px}
.wk-zahl{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#faf7f2;color:#1b2040;font-size:.72rem;font-weight:700;display:grid;place-items:center;border:2px solid #1b2040;font-style:normal}
.wk-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.wk-titel{font-weight:600;font-size:.92rem}
.wk-sub{font-size:.74rem;color:rgba(250,247,242,.6)}
.wk-pfeil{color:#c9a96e;font-weight:600;margin-left:2px}
@media(max-width:560px){.wk-knopf{right:14px;bottom:14px;padding:8px 14px 8px 8px}.wk-text{display:none}}

/* Flugkugel */
.wk-flug{position:fixed;z-index:1150;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#e6cf9a,#c9a96e 60%,#a68a52);box-shadow:0 6px 18px rgba(201,169,110,.5);pointer-events:none}
/* fliegendes Zeichen: Modul als dunkle Kachel mit Goldlinie, Akquise als echtes Programm-Symbol */
.wk-flug.mit-symbol{border-radius:26%;display:grid;place-items:center;background:#1b2040;color:#c9a96e;box-shadow:0 0 0 1px rgba(201,169,110,.6),0 12px 28px rgba(27,32,64,.38)}
.wk-flug.mit-symbol svg{width:58%;height:58%}
.wk-flug.programm{background:none;border-radius:22%;box-shadow:0 12px 28px rgba(27,32,64,.4)}
.wk-flug.programm svg{width:100%;height:100%;display:block}

.ks-mwst{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(250,247,242,.6);padding:2px 0 8px;border-bottom:1px dashed rgba(201,169,110,.2);margin-bottom:6px}
.ks-mwst b{color:rgba(250,247,242,.85);font-weight:600}
.wk-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);z-index:1160;max-width:min(460px,calc(100% - 32px));background:#faf7f2;color:#1b2040;padding:11px 16px;border-radius:12px;font-size:.88rem;font-weight:500;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.wk-toast.auf{opacity:1;transform:translate(-50%,0)}
/* ── Seitenleiste (27.09.2026 neu: Kacheln, Gruppen, „Passt dazu“, Summenkasten, Zusagen) ── */
.wk-schleier{position:fixed;inset:0;z-index:1140;background:rgba(27,32,64,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.wk-schleier.auf{opacity:1}
.wk-leiste{position:fixed;top:0;right:0;bottom:0;z-index:1145;width:min(440px,100%);background:linear-gradient(180deg,#22284d 0%,#1b2040 42%);color:#faf7f2;border-left:1px solid rgba(201,169,110,.25);box-shadow:-24px 0 70px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wk-leiste.auf{transform:none}
.wk-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 18px;border-bottom:1px solid rgba(201,169,110,.16)}
.wk-kopf h2{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;line-height:1.1;margin:0;color:#faf7f2}
.wk-kopf h2 em{font-style:italic;font-weight:400;color:#c9a96e}
.wk-kopf-sub{font-size:.78rem;color:rgba(250,247,242,.55);margin:5px 0 0}
.wk-zu{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(201,169,110,.3);background:none;color:#faf7f2;display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,color .2s,transform .35s cubic-bezier(.22,1,.36,1)}
.wk-zu svg{width:16px;height:16px}
.wk-zu:hover,.wk-zu:focus-visible{border-color:#c9a96e;color:#c9a96e;transform:rotate(90deg)}
.wk-liste{flex:1;overflow:auto;padding:14px 24px 16px;display:flex;flex-direction:column;gap:8px}
.wk-gruppe{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#c9a96e;margin:10px 0 0}
.wk-gruppe:first-child{margin-top:0}
.wk-pos{display:grid;grid-template-columns:44px minmax(0,1fr) auto 32px;gap:12px;align-items:center;padding:10px 8px 10px 12px;border:1px solid rgba(201,169,110,.16);border-radius:14px;background:rgba(255,255,255,.03);transition:border-color .2s,background-color .2s}
.wk-pos:hover{border-color:rgba(201,169,110,.32);background:rgba(255,255,255,.045)}
.wk-pos.neu{animation:wk-neu 1.4s cubic-bezier(.22,1,.36,1)}
@keyframes wk-neu{0%{border-color:#c9a96e;background:rgba(201,169,110,.16);box-shadow:0 0 0 3px rgba(201,169,110,.18)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}
.wk-leiste.rein .wk-pos,.wk-leiste.rein .wk-dazu-zeile{animation:wk-rein .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
@keyframes wk-rein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.wk-pos-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(201,169,110,.14);color:#c9a96e}
.wk-pos.basis .wk-pos-icon{background:none;border-radius:11px;box-shadow:0 0 0 1px rgba(201,169,110,.4)}
.wk-pos-icon .sym-programm{width:100%;height:100%;display:block}
.wk-pos-icon svg{width:20px;height:20px}
.wk-pos-text{display:flex;flex-direction:column;min-width:0}
.wk-pos-text b{font-size:.94rem;font-weight:600}
.wk-pos-text small{font-size:.74rem;line-height:1.35;color:rgba(250,247,242,.55);margin-top:2px}
.wk-pos-preis{text-align:right;font-family:'Playfair Display',Georgia,serif;font-size:1.12rem;line-height:1.1;white-space:nowrap}
.wk-pos-preis small{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:.68rem;color:rgba(250,247,242,.5);margin-top:3px}
.wk-weg{background:none;border:none;color:rgba(250,247,242,.45);cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;padding:0;transition:color .2s,background-color .2s}
.wk-weg svg{width:17px;height:17px;overflow:visible}
.wk-weg:hover,.wk-weg:focus-visible{color:#f0a0a0;background:rgba(224,92,92,.12)}
.wk-weg:focus-visible{outline:2px solid rgba(240,160,160,.6);outline-offset:2px}
/* Deckel hebt sich beim Drüberfahren (Drehpunkt links am Deckel) */
.wk-deckel{transform-box:view-box;transform-origin:4px 6px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wk-weg:hover .wk-deckel,.wk-weg:focus-visible .wk-deckel{transform:translateY(-1px) rotate(-16deg)}
/* „Passt dazu“ und Hinweise */
.wk-dazu{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:12px;border-top:1px dashed rgba(201,169,110,.22)}
.wk-dazu .wk-gruppe{margin:0 0 4px}
.wk-dazu-zeile{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 6px 7px 8px;border-radius:12px;transition:background-color .2s}
.wk-dazu-zeile:hover{background:rgba(255,255,255,.04)}
.wk-dazu-zeile .wk-pos-icon{width:32px;height:32px;border-radius:9px}
.wk-dazu-zeile .wk-pos-icon svg{width:16px;height:16px}
.wk-dazu-zeile b{font-size:.86rem}
.wk-dazu-zeile small{color:#c9a96e}
.wk-dazu-knopf{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(201,169,110,.45);background:none;color:#faf7f2;border-radius:999px;padding:5px 12px;font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background-color .2s}
.wk-dazu-knopf svg{width:13px;height:13px}
.wk-dazu-knopf:hover,.wk-dazu-knopf:focus-visible{border-color:#c9a96e;color:#c9a96e;background:rgba(201,169,110,.08)}
.wk-info{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.5;color:rgba(250,247,242,.75);padding:11px 13px;border-radius:12px;background:rgba(201,169,110,.07);border:1px solid rgba(201,169,110,.2);margin-top:6px}
.wk-info svg{flex:none;width:18px;height:18px;color:#c9a96e;margin-top:1px}
.wk-info .wk-dazu-knopf{margin-top:8px}
.wk-info span{display:block}
/* leerer Warenkorb */
.wk-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:auto 0;padding:32px 12px}
.wk-leer-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.25);color:#c9a96e;margin-bottom:6px}
.wk-leer-icon svg{width:28px;height:28px}
.wk-leer b{font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;font-weight:600}
.wk-leer p{color:rgba(250,247,242,.6);font-size:.86rem;line-height:1.55;margin:0;max-width:30ch}
.wk-leer-link{margin-top:8px;color:#c9a96e;font-weight:600;font-size:.88rem;text-decoration:none}
.wk-leer-link:hover{text-decoration:underline}
/* Fuß: Summenkasten, Kasse, Zusagen */
.wk-fuss{padding:16px 24px 20px;border-top:1px solid rgba(201,169,110,.18);background:rgba(10,12,30,.22)}
.wk-fuss:empty{display:none}
.wk-hinweis{font-size:.8rem;color:#f2d9a3;background:rgba(224,180,92,.1);border:1px solid rgba(224,180,92,.35);border-radius:10px;padding:10px 12px;margin:0 0 12px;line-height:1.5}
.wk-summe{display:grid;gap:3px;margin-bottom:14px;padding:13px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(201,169,110,.16)}
.wk-summe .z{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wk-summe .z span{font-size:.78rem;color:rgba(250,247,242,.6)}
.wk-summe .z.netto span{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}
.wk-summe .z.netto b{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;line-height:1.1}
.wk-summe .z.steuer b{font-size:.8rem;font-weight:500;color:rgba(250,247,242,.65)}
.wk-summe .z.brutto{margin-top:5px;padding-top:7px;border-top:1px dashed rgba(201,169,110,.22)}
.wk-summe .z.brutto span{color:rgba(250,247,242,.8)}
.wk-summe .z.brutto b{font-size:.95rem;font-weight:700}
.wk-summe .trenn{height:1px;background:rgba(201,169,110,.2);margin:10px 0 7px}
.wk-kasse{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 18px;border-radius:12px;background:linear-gradient(135deg,#e6cf9a 0%,#c9a96e 46%,#a68a52 100%);color:#1b2040;font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgba(201,169,110,.25);transition:transform .15s,box-shadow .15s}
.wk-kasse span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.wk-kasse:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(201,169,110,.38)}
.wk-kasse:hover span{transform:translateX(4px)}
.wk-zusagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.wk-zusagen span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.68rem;line-height:1.3;color:rgba(250,247,242,.6)}
.wk-zusagen svg{width:17px;height:17px;color:#c9a96e}
@media (prefers-reduced-motion:reduce){.wk-deckel,.wk-zu,.wk-kasse span{transition:none}.wk-pos.neu,.wk-leiste.rein .wk-pos,.wk-leiste.rein .wk-dazu-zeile{animation:none}}
html.wk-offen{overflow:hidden}

/* ── Shop-Karte: Tarif wählen, Module dazulegen ─────────────── */
.pg-wahl{display:inline-flex;border:1px solid rgba(201,169,110,.35);border-radius:999px;padding:3px;margin-bottom:12px;background:rgba(0,0,0,.18)}
.pg-wahl button{background:none;border:none;color:rgba(250,247,242,.65);padding:7px 16px;border-radius:999px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.pg-wahl button.an{background:#c9a96e;color:#1b2040}
.pg-tarif{display:flex;flex-direction:column;gap:4px}
.pg-tarif.paket{border-color:#c9a96e;background:rgba(201,169,110,.08)}
.pg-tarif .pg-in{margin-top:10px;align-self:flex-start}
.pg-in{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(201,169,110,.5);background:rgba(201,169,110,.08);color:#faf7f2;border-radius:999px;padding:7px 14px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.pg-in:hover{background:#c9a96e;color:#1b2040;border-color:#c9a96e}
.pg-in.gold{background:linear-gradient(135deg,#e6cf9a 0%,#c9a96e 46%,#a68a52 100%);color:#1b2040;border-color:transparent}
.pg-in.gold:hover{box-shadow:0 8px 22px rgba(201,169,110,.35)}
.pg-in.drin{background:rgba(92,201,138,.16);border-color:rgba(92,201,138,.5);color:#b9ecd0;cursor:default}
.pg-in svg{width:14px;height:14px}
.pg-in[disabled]{opacity:.4;cursor:not-allowed}
.pg-modul{align-items:center}
.pg-modul .pg-modul-preis{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap;color:#c9a96e}
.pg-modul .pg-in{padding:5px 11px;font-size:.74rem}
.pg-modul.paket{align-items:center}
.pg-paket-knoepfe{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pg-preise .pg-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(201,169,110,.18);padding-top:14px;margin-top:4px;flex-wrap:wrap}
.pg-preise .pg-cta .btn{margin:0}

/* ── Kasse ─────────────────────────────────────────────────── */
.ks{--navy:#1b2040;--navy2:#232848;--paper:#faf7f2;--line:rgba(201,169,110,.22)}
.ks-inner{padding-top:clamp(1rem,2.5vh,1.6rem);padding-bottom:clamp(3rem,7vh,5rem)}
.ks-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:24px;align-items:start}
@media(max-width:900px){.ks-layout{grid-template-columns:1fr}.ks-summe{order:-1}}
.ks-schritt{background:var(--navy2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.ks-schritt.zu{opacity:.55}
.ks-schritt h2{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;display:flex;align-items:center;gap:12px;margin:0 0 6px;color:var(--paper)}
.ks-schritt h2 i{flex:0 0 28px;height:28px;border-radius:50%;background:rgba(201,169,110,.16);color:#c9a96e;font-style:normal;font-size:.8rem;font-weight:700;display:grid;place-items:center;font-family:'DM Sans',system-ui,sans-serif}
.ks-schritt.fertig h2 i{background:#5cc98a;color:#1b2040}
.ks-schritt .sub{color:rgba(250,247,242,.6);font-size:.86rem;margin-bottom:16px;line-height:1.55}
.ks label{display:block;font-size:.74rem;color:rgba(250,247,242,.6);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.ks input,.ks select{width:100%;background:var(--navy);border:1px solid var(--line);border-radius:10px;color:var(--paper);padding:11px 13px;font:inherit;font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s}
.ks input:focus,.ks select:focus{border-color:#c9a96e;box-shadow:0 0 0 3px rgba(201,169,110,.18)}
.ks input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--navy) inset;-webkit-text-fill-color:var(--paper)}
.ks select option{background:#1b2040}
.ks .feld{margin-bottom:13px}
.ks .zeile{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ks .zeile.plz{grid-template-columns:130px 1fr}
@media(max-width:520px){.ks .zeile,.ks .zeile.plz{grid-template-columns:1fr}}
.ks .err{color:#f0a0a0;font-size:.86rem;min-height:1.2em;margin:2px 0 8px}
.ks .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:11px 18px;font:inherit;font-size:.93rem;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.ks .btn-gold{background:linear-gradient(135deg,#e6cf9a 0%,#c9a96e 46%,#a68a52 100%);color:#1b2040;box-shadow:0 8px 24px rgba(201,169,110,.22)}
.ks .btn-line{background:transparent;border-color:rgba(201,169,110,.45);color:var(--paper)}
.ks .btn-line:hover{border-color:#c9a96e;color:#c9a96e}
.ks .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.ks .btn.block{width:100%;padding:14px 18px;font-size:1rem}
.ks .umschalt{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.ks .umschalt button{background:transparent;border:none;color:rgba(250,247,242,.6);padding:8px 16px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.ks .umschalt button.an{background:rgba(201,169,110,.14);color:#c9a96e}
.ks .konto-ok{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem;color:rgba(250,247,242,.7)}
.ks .konto-ok b{color:var(--paper)}
.ks .konto-ok a{color:#c9a96e}
.ks-summe{background:var(--navy2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;position:sticky;top:90px}
.ks-summe h2{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;margin:0 0 12px;color:var(--paper)}
.ks-pos{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(201,169,110,.12);font-size:.9rem;color:var(--paper)}
.ks-pos small{display:block;color:rgba(250,247,242,.55);font-size:.76rem}
.ks-pos b{white-space:nowrap}
.ks-pos>span:nth-child(2){flex:1;min-width:0}
.ks-sym{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(201,169,110,.14);color:#c9a96e}
.ks-sym svg{width:16px;height:16px}
.ks-sym:has(.sym-programm){background:none;border-radius:7px;box-shadow:0 0 0 1px rgba(201,169,110,.4)}
.ks-sym .sym-programm{width:32px;height:32px;display:block}
.ks-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.ks-total span{font-size:.78rem;color:rgba(250,247,242,.6);text-transform:uppercase;letter-spacing:.06em}
.ks-total b{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;color:var(--paper)}
.ks-klein{font-size:.78rem;color:rgba(250,247,242,.55);line-height:1.55;margin-top:10px}
.ks-klein a{color:#c9a96e}
.ks-leer{text-align:center;padding:40px 20px}
.ks-leer p{color:rgba(250,247,242,.65);margin-bottom:16px}
.ks label.check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:rgba(250,247,242,.8);line-height:1.5;margin:14px 0;text-transform:none;letter-spacing:0}
.ks .check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:#c9a96e}
.ks .check a{color:#c9a96e}
.ks .notice{border-radius:10px;padding:12px 14px;font-size:.88rem;line-height:1.55;margin-bottom:14px;border:1px solid rgba(224,180,92,.4);background:rgba(224,180,92,.08);color:#f2d9a3}
.ks .notice a{color:#f2d9a3;font-weight:600}
.ks .sicher{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(250,247,242,.55);margin-top:12px;justify-content:center}
.ks .sicher svg{width:14px;height:14px;color:#5cc98a}

/* ── Kundenbereich: Reiter ─────────────────────────────────── */
.kb-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.kb-nav{position:sticky;top:90px;display:flex;flex-direction:column;gap:4px;background:var(--navy2);border:1px solid var(--navy-line);border-radius:14px;padding:8px}
.kb-nav button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--paper-faint);padding:10px 12px;border-radius:10px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.kb-nav button svg{width:16px;height:16px;flex:none}
.kb-nav button:hover{color:var(--paper);background:rgba(255,255,255,.04)}
.kb-nav button.an{background:rgba(201,169,110,.14);color:var(--gold)}
.kb-nav button .punkt{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#e0b45c}
.kb-panel{display:none}
.kb-panel.an{display:block}
.kb .grid{margin-top:0}
@media(max-width:820px){
  .kb-layout{grid-template-columns:1fr}
  .kb-nav{position:static;flex-direction:row;overflow:auto;gap:2px;padding:6px}
  .kb-nav button{white-space:nowrap;padding:8px 12px;font-size:.82rem}
  .kb-nav button .punkt{margin-left:6px}
}
/* Abo-Positionen im Kundenbereich */
.kb .abo-pos{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(201,169,110,.1)}
.kb .abo-pos:last-child{border-bottom:none}
.kb .abo-pos-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(201,169,110,.14);color:var(--gold)}
.kb .abo-pos-icon svg{width:18px;height:18px}
.kb .abo-pos.basis .abo-pos-icon,.kb .abo-pos.aus.basis .abo-pos-icon{background:none;border-radius:9px;box-shadow:0 0 0 1px rgba(201,169,110,.4)}
.kb .abo-pos-icon .sym-programm{width:100%;height:100%;display:block}
.kb .abo-pos.aus.basis .abo-pos-icon .sym-programm{filter:grayscale(1);opacity:.55}
.kb .abo-pos.aus .abo-pos-icon{background:rgba(255,255,255,.05);color:var(--paper-faint)}
.kb .abo-pos-text b{display:block;font-size:.95rem}
.kb .abo-pos-text small{display:block;color:var(--paper-faint);font-size:.78rem;margin-top:2px;line-height:1.45}
.kb .abo-pos-recht{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.kb .abo-pos-recht .preis{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem}
.kb .abo-pos-recht .preis small{font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;color:var(--paper-faint)}
.kb .abo-pos-recht .st{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.kb .abo-pos-recht .st.an{color:var(--ok)} .kb .abo-pos-recht .st.aus{color:var(--paper-faint)} .kb .abo-pos-recht .st.warn{color:var(--warn)}
@media(max-width:560px){.kb .abo-pos{grid-template-columns:1fr auto}.kb .abo-pos-icon{display:none}}
.kb .price .btn{white-space:normal;line-height:1.3}
.kb .fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.kb .fakt{background:var(--navy);border:1px solid var(--navy-line);border-radius:12px;padding:14px 16px}
.kb .fakt span{display:block;font-size:.72rem;color:var(--paper-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.kb .fakt b{font-size:1.05rem}