/* ==========================================================================
   bisbald · App-Stylesheet (für alle Kunden gleich)
   Layout: Desktop = Bühne mit Intro | Handy | Team-Bereich.
           Handy   = App im Vollbild, Team-Bereich als Overlay.
   Farben und Schriften kommen aus config.js (theme) und werden beim Start
   als CSS-Variablen gesetzt. Die Werte hier sind nur Rückfallwerte.
   ========================================================================== */
:root{
  --primary:#21266B; --primary-deep:#141849; --primary-soft:#E9ECF8;
  --accent:#D6C600; --accent-deep:#B3A500;
  --ink:#23264A; --muted:#6B6F86; --surface:#F4F5FA; --paper:#FFFFFF;
  --line:#E3E6F0; --good:#1F8A4C; --good-soft:#E3F4EA; --warn:#B4610E; --warn-soft:#FBEEDD;
  --stage:#E7E9F3;
  --head:'League Spartan','Arial Narrow',Arial,sans-serif;
  --body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --shadow:0 12px 30px rgba(20,24,73,.14);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- Bühne (Desktop) ---------- */
.stage{min-height:100%;display:grid;grid-template-columns:minmax(240px,300px) 390px minmax(380px,520px);gap:48px;justify-content:center;align-items:center;padding:40px 24px}
.intro{align-self:center}
.intro-eyebrow{font-family:var(--head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--muted);margin:0 0 10px}
.intro-title{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);color:var(--primary);font-size:40px;line-height:.95;margin:0 0 14px;text-wrap:balance}
.intro-lead{margin:0 0 20px;color:var(--ink)}
.intro-steps{margin:0 0 18px;padding-left:20px;display:grid;gap:8px;color:var(--ink)}
.intro-steps b{color:var(--primary)}
.intro-note{font-size:13px;color:var(--muted);margin:0 0 28px}
.intro-brand{font-size:13px;color:var(--muted);margin:0;display:flex;align-items:center;gap:8px}
.bb-mark{font-family:var(--head);font-weight:800;font-size:18px;color:var(--primary);letter-spacing:-.01em}
.bb-mark::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:2px}

.device{width:390px;height:812px;border-radius:52px;background:#0D0F2E;padding:12px;box-shadow:0 40px 80px rgba(20,24,73,.28),inset 0 0 0 2px #2B2F63}
.device-screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:var(--paper)}
.device-screen::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:112px;height:32px;border-radius:20px;background:#0D0F2E;z-index:60;pointer-events:none}

/* ---------- App-Gerüst ---------- */
.app{position:relative;height:100%;display:flex;flex-direction:column;background:var(--surface);overflow:hidden}
.app-head{flex:none;background:var(--primary);color:#fff;padding:52px 18px 14px;display:flex;align-items:center;gap:12px}
.app-head img{height:26px;width:auto}
.app-head .spacer{flex:1}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px}
.badge-dot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--accent-ink,var(--primary));font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--body)}
.app-main{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:88px}
.screen{padding:18px 16px 28px;display:grid;gap:16px}
/* Tab-Leiste: schwebend im Milchglas (wie iOS 26 / Instagram), Beschriftung bleibt. 15.10.2026
   Dicht genug, dass Bilder dahinter die Schrift nicht stören. Ohne Unschärfe oder mit „Transparenz reduzieren“ deckend. */
.tabbar{position:absolute;left:12px;right:12px;bottom:12px;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:5px;border-radius:32px;
  border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);
  box-shadow:0 12px 32px -8px rgba(13,15,46,.28),0 2px 8px rgba(13,15,46,.08),inset 0 1px 0 rgba(255,255,255,.95)}
.tab{border:0;background:none;display:grid;justify-items:center;gap:2px;padding:7px 0 6px;min-width:0;border-radius:26px;color:var(--muted);font-size:10.5px;font-weight:500;position:relative;transition:background .25s,color .2s;-webkit-tap-highlight-color:transparent}
.tab span{max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--primary);font-weight:600;background:rgba(13,15,46,.07);background:color-mix(in srgb,var(--primary) 12%,transparent)}
.tab:active{background:rgba(13,15,46,.05)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tabbar{background:var(--paper)}}
@media (prefers-reduced-transparency:reduce){.tabbar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.tabbar{background:var(--paper);border-color:var(--line)}}

/* ---------- Typo ---------- */
.h-screen{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);color:var(--primary);font-size:26px;line-height:1;margin:4px 0 0;letter-spacing:.01em}
.h-sec{font-family:var(--head);font-weight:800;color:var(--primary);font-size:17px;margin:0;letter-spacing:.01em}
.sub{color:var(--muted);font-size:13px;margin:0}
.label{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted)}

/* ---------- Bausteine ---------- */
.panel{background:var(--paper);border-radius:var(--r-md);padding:16px;display:grid;gap:12px}
.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.btn{border:0;border-radius:999px;padding:12px 20px;font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,background .15s}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--accent);color:var(--accent-ink,var(--primary))}
.btn-navy{background:var(--primary);color:#fff}
.btn-ghost{background:var(--primary-soft);color:var(--primary)}
.btn-line{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}
.btn-block{width:100%}
.btn-red{background:#c2352b;color:#fff}
/* Mehrere Verträge: Rückfrage „Schon gespeichert?“ */
.dup-btn{justify-content:flex-start;gap:12px;border-radius:16px;padding:10px 14px;text-align:left;letter-spacing:0}
.dup-btn .ic-tile{width:38px;height:38px;border-radius:10px;background:#fff}
.dup-btn b{display:block;font-size:15px}
.dup-btn small{display:block;font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.contract-card + .contract-card{margin-top:-4px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{border:0;background:none;color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--primary-soft);color:var(--primary)}
.chip-gold{background:var(--accent);color:var(--accent-ink,var(--primary))}
.chip-good{background:var(--good-soft);color:var(--good)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.ic-tile{flex:none;width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.ic-tile svg{width:22px;height:22px}

/* ---------- Clubkarte ---------- */
.card{position:relative;border-radius:var(--r-lg);padding:20px;color:#fff;background:var(--primary);overflow:hidden;box-shadow:var(--shadow);border:0;text-align:left;width:100%;display:grid;gap:18px}
.card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-58deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--accent)}
.card > *{position:relative;z-index:1}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-club{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:20px;line-height:.95;letter-spacing:.02em}
.card-club small{display:block;font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--accent);margin-top:4px}
.lvl{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-family:var(--head);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.14)}
.lvl i{width:9px;height:9px;border-radius:50%;background:var(--lvl,#ccc)}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.card-name{font-weight:600;font-size:15px}
.card-no{font-size:12px;opacity:.75;letter-spacing:.08em}
.card-qr{width:66px;height:66px;background:#fff;border-radius:10px;padding:6px;flex:none}
.card-qr svg{width:100%;height:100%}
.card-hint{font-size:11.5px;opacity:.8;display:flex;align-items:center;gap:6px}
.card-hint svg{width:14px;height:14px}

.points{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:end}
.points-big{font-family:var(--head);font-weight:900;font-size:46px;line-height:.85;color:var(--primary)}
.points-unit{font-family:var(--head);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding-bottom:4px}
.bar{height:10px;border-radius:6px;background:var(--primary-soft);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.navy > i{background:var(--primary)}
.bar-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);gap:8px}
.bar-meta b{color:var(--primary)}

.alert{border-radius:var(--r-md);padding:16px;display:grid;gap:10px;background:var(--primary);color:#fff}
.alert .h-sec{color:#fff}
.alert p{margin:0;font-size:13.5px;opacity:.92}
.alert .count{font-family:var(--head);font-weight:900;font-size:34px;line-height:.9;color:var(--accent)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
.step{display:grid;justify-items:center;gap:6px;text-align:center;font-size:11px;color:var(--muted);position:relative}
.step::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.step:first-child::before{display:none}
.step .dot{width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--line);display:grid;place-items:center;position:relative;z-index:1}
.step .dot svg{width:14px;height:14px}
.step.done{color:var(--primary)}
.step.done::before,.step.now::before{background:var(--primary)}
.step.done .dot{background:var(--primary);box-shadow:none;color:#fff}
.step.now{color:var(--primary);font-weight:600}
.step.now .dot{background:var(--accent);box-shadow:none;color:var(--accent-ink,var(--primary))}

.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick a,.quick button{background:var(--paper);border:0;border-radius:var(--r-md);padding:14px 6px;display:grid;justify-items:center;gap:6px;color:var(--primary);text-decoration:none;font-size:12px;font-weight:600}
.quick svg{width:22px;height:22px}
.open-state{font-size:12px;font-weight:600}
.open-state.on{color:var(--good)}
.open-state.off{color:var(--warn)}

/* ---------- Aktionen ---------- */
.offer{background:var(--paper);border-radius:var(--r-md);overflow:hidden;display:grid}
.offer img{width:100%;aspect-ratio:16/8;object-fit:cover;max-width:100%}
.offer-body{padding:14px 16px 16px;display:grid;gap:6px}
.offer-body h3{font-family:var(--head);font-weight:800;color:var(--primary);font-size:19px;line-height:1.05;margin:0}
.offer-body p{margin:0;font-size:13.5px;color:var(--ink)}
.offer-mini{display:grid;grid-template-columns:96px 1fr;background:var(--paper);border-radius:var(--r-md);overflow:hidden;border:0;padding:0;text-align:left}
.offer-mini img{width:96px;height:100%;object-fit:cover}
.offer-mini div{padding:12px 14px;display:grid;gap:4px;min-width:0}
.offer-mini b{font-family:var(--head);font-weight:800;color:var(--primary);font-size:16px;line-height:1.05}
.offer-mini span{font-size:12px;color:var(--muted)}

/* ---------- Prämien ---------- */
.reward{background:var(--paper);border-radius:var(--r-md);padding:14px;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.reward h3{margin:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.reward p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.reward .cost{font-family:var(--head);font-weight:900;color:var(--primary);font-size:18px;text-align:right;line-height:1}
.reward .cost small{display:block;font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.reward.locked{opacity:.6}
.reward-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:var(--muted)}
.voucher{border-radius:var(--r-md);padding:14px;background:var(--good-soft);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.voucher b{display:block;color:var(--good);font-size:13.5px}
.voucher span{font-size:12px;color:var(--ink)}

/* ---------- Listen ---------- */
.list{display:grid;background:var(--paper);border-radius:var(--r-md)}
.li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.li small{display:block;color:var(--muted);font-size:12px}
.pts-plus{color:var(--good);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pts-minus{color:var(--warn);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.switch{position:relative;width:46px;height:28px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:1}
.switch span{position:absolute;inset:0;border-radius:14px;background:#C9CDDC;transition:background .2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.levels{display:grid;gap:10px}
.level{border-radius:var(--r-md);padding:14px;background:var(--paper);display:grid;gap:6px;box-shadow:inset 0 0 0 2px transparent}
.level.current{box-shadow:inset 0 0 0 2px var(--primary)}
.level ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink)}

.code-box{display:flex;align-items:center;gap:10px;background:var(--primary-soft);border-radius:var(--r-sm);padding:10px 12px}
.code-box code{flex:1;font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:.12em;color:var(--primary)}

/* ---------- Onboarding ---------- */
.onb{position:absolute;inset:0;background:var(--primary);color:#fff;display:flex;flex-direction:column;z-index:30;overflow-y:auto}
.onb-hero{position:relative;height:300px;flex:none}
.onb-photo{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.onb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,73,.15) 30%,var(--primary) 100%)}
.onb-logo{position:absolute;top:56px;left:20px;height:28px;width:auto;z-index:2}
.onb-body{padding:0 22px 28px;display:grid;gap:16px;margin-top:-40px;position:relative;z-index:2}
.onb-title{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:34px;line-height:.92;margin:0;text-wrap:balance}
.onb-title em{font-style:normal;color:var(--accent)}
.onb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.onb-list li{display:flex;gap:12px;align-items:center;font-size:14px}
.onb-list svg{width:20px;height:20px;color:var(--accent);flex:none}
.onb .link{color:#fff;opacity:.85;justify-self:center;font-size:13px}
.onb-form{padding:56px 22px 28px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:600;opacity:.9}
.field input{border:0;border-radius:var(--r-sm);padding:12px 14px;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.field input::placeholder{color:rgba(255,255,255,.5)}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;opacity:.95}
.check input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.err{color:var(--accent);font-size:12.5px;margin:0}
.push-ask{margin:auto 0;padding:56px 22px 28px;display:grid;gap:18px}
.push-mock{background:rgba(255,255,255,.96);color:var(--ink);border-radius:18px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.push-mock img{width:36px;height:36px;border-radius:9px}
.push-mock b{font-size:13px;display:block}
.push-mock span{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}

/* ---------- Push-Banner (simuliert) ---------- */
.push-banner{position:absolute;left:10px;right:10px;top:10px;z-index:80;border:0;text-align:left;background:rgba(250,250,253,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);border-radius:20px;padding:12px 14px;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;box-shadow:0 14px 40px rgba(13,15,46,.32);transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,.9,.25,1.1)}
.push-banner.show{transform:translateY(34px)}
.push-banner img{width:38px;height:38px;border-radius:9px}
.push-banner .pb-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.push-banner b{display:block;font-size:13.5px;line-height:1.3;margin-top:1px}
.push-banner p{margin:1px 0 0;font-size:13px;line-height:1.35;color:#3A3D5C}

/* ---------- Sheets / Overlays in der App ---------- */
.veil{position:absolute;inset:0;background:rgba(13,15,46,.5);z-index:40;display:flex;align-items:flex-end;animation:fade .2s}
.sheet{background:var(--paper);width:100%;border-radius:24px 24px 0 0;padding:10px 18px calc(22px + var(--safe-bottom));display:grid;gap:14px;max-height:92%;overflow-y:auto;animation:up .3s cubic-bezier(.2,.9,.25,1)}
.sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--line);justify-self:center}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet .x{border:0;background:var(--surface);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.sheet .x svg{width:16px;height:16px}
.qr-full{background:#fff;border-radius:var(--r-md);padding:18px;box-shadow:inset 0 0 0 2px var(--primary-soft);display:grid;justify-items:center;gap:10px}
.qr-full svg{width:220px;height:220px;max-width:100%}
.qr-full .card-no{color:var(--primary);opacity:1;font-family:var(--head);font-weight:800;font-size:18px}
.toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;z-index:90;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;animation:fade .2s}
.burst{position:absolute;inset:0;z-index:85;display:grid;place-items:center;pointer-events:none}
.burst div{font-family:var(--head);font-weight:900;font-size:56px;color:var(--accent-ink,var(--primary));background:var(--accent);padding:10px 26px;border-radius:999px;box-shadow:var(--shadow);animation:pop 1.6s cubic-bezier(.2,.9,.25,1.2) forwards}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}18%{transform:scale(1.08);opacity:1}30%{transform:scale(1)}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-60px)}}

.powered{text-align:center;font-size:12px;color:var(--muted);padding:6px 0 0}
.powered .bb-mark{font-size:14px}

/* ---------- Team-Bereich ---------- */
.team{position:relative;background:var(--paper);border-radius:28px;box-shadow:var(--shadow);height:812px;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.team-head{background:var(--primary-deep);color:#fff;padding:18px 22px 0;display:grid;gap:14px}
.team-head .row{justify-content:space-between}
.team-title{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:20px;letter-spacing:.02em;margin:0}
.team-title small{display:block;font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--accent)}
.team-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.team-tab{border:0;background:none;color:rgba(255,255,255,.7);padding:10px 10px 12px;font-weight:600;font-size:13px;border-bottom:3px solid transparent;white-space:nowrap;display:flex;gap:6px;align-items:center}
.team-tab svg{width:16px;height:16px}
.team-tab[aria-selected="true"]{color:#fff;border-color:var(--accent)}
.team-body{flex:1;overflow-y:auto;padding:20px 22px 26px;display:grid;gap:16px;align-content:start;background:var(--surface)}
.team-close{display:none}
.t-field{display:grid;gap:6px}
.t-field label,.t-label{font-size:12px;font-weight:600;color:var(--muted)}
.t-field input,.t-field select,.t-field textarea{border:0;border-radius:var(--r-sm);padding:11px 12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);width:100%}
.t-field input:focus,.t-field select:focus,.t-field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
.t-field textarea{resize:vertical;min-height:72px}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.amounts{display:flex;gap:8px;flex-wrap:wrap}
.amounts button{border:0;border-radius:999px;padding:7px 12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;font-weight:600;color:var(--primary)}
.scanner{position:relative;border-radius:var(--r-md);background:#0D0F2E;min-height:230px;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;color:#fff;text-align:center;padding:20px 16px}
.scanner .frame{position:relative;flex:none;width:120px;height:120px;border-radius:18px;box-shadow:0 0 0 3px var(--accent);display:grid;place-items:center}
.scanner .laser{position:absolute;left:-5px;top:59px;width:130px;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:scan 1s ease-in-out infinite alternate}
.scanner p{position:relative;margin:0;font-size:13px;opacity:.85;max-width:260px}
@keyframes scan{from{transform:translateY(-55px)}to{transform:translateY(55px)}}
.member-found{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:17px}
.preview-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.push-preview{background:var(--paper);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr;gap:10px;box-shadow:0 6px 18px rgba(20,24,73,.1)}
.push-preview img{width:36px;height:36px;border-radius:8px}
.push-preview b{font-size:13px;display:block}
.push-preview span{font-size:12.5px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--paper);border-radius:var(--r-md);padding:14px;display:grid;gap:2px}
.kpi b{font-family:var(--head);font-weight:900;font-size:28px;color:var(--primary);line-height:1}
.kpi span{font-size:11.5px;color:var(--muted);line-height:1.3}
.chart{background:var(--paper);border-radius:var(--r-md);padding:16px;display:grid;gap:10px}
.chart svg{width:100%;height:auto;display:block}
.auto{background:var(--paper);border-radius:var(--r-md);padding:14px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.auto h4{margin:0;font-size:14px;color:var(--ink)}
.auto small{display:block;color:var(--muted);font-size:12px}
.auto p{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--ink);background:var(--surface);border-radius:var(--r-sm);padding:8px 10px}
.auto .btn{justify-self:start}
.tag-note{font-size:12px;color:var(--muted);margin:0}
.repair-steps{display:grid;gap:8px}
.repair-steps button{border:0;border-radius:var(--r-sm);padding:11px 14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);text-align:left;font-weight:600;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.repair-steps button[aria-pressed="true"]{background:var(--primary);color:#fff;box-shadow:none}
.repair-steps button svg{width:16px;height:16px}

/* ---------- Tablet: ohne Intro ---------- */
@media (max-width:1240px){
  .stage{grid-template-columns:390px minmax(340px,520px);gap:32px}
  .intro{display:none}
}
/* ---------- Handy: App im Vollbild, Team-Bereich als Overlay ---------- */
@media (max-width:900px){
  /* Wie HOST Doku: die Seite selbst scrollt (natives iOS-Scrollen), Kopf klebt oben, Tab-Leiste fest unten */
  body{background:var(--surface)}
  .stage{display:block;padding:0;min-height:0}
  .device{position:static;width:auto;height:auto;border-radius:0;padding:0;box-shadow:none;background:none}
  .device-screen{border-radius:0;height:auto;overflow:visible;background:none}
  .device-screen::before{display:none}
  .app{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;display:block}
  .app-head{position:sticky;top:0;z-index:40;padding-top:calc(14px + var(--safe-top))}
  .app-main{overflow:visible;padding-bottom:calc(96px + var(--safe-bottom))}
  .tabbar{position:fixed;left:max(12px,calc(50% - 220px));right:max(12px,calc(50% - 220px));bottom:max(12px,calc(var(--safe-bottom) - 6px))}
  .onb,.overlay-full,.overlay-full .onb,.veil,.burst,.splash{position:fixed}
  .push-banner{position:fixed}
  .toast{position:fixed;bottom:calc(96px + var(--safe-bottom))}
  .onb-logo{top:calc(18px + var(--safe-top))}
  .onb-form,.push-ask{padding-top:calc(24px + var(--safe-top))}
  .push-banner.show{transform:translateY(calc(var(--safe-top) + 2px))}
  .team{position:fixed;inset:0;z-index:200;height:auto;border-radius:0;box-shadow:none}
  .team:not(.open){display:none}
  .team-head{padding-top:calc(14px + var(--safe-top))}
  .team-close{display:grid}
  .team-body{padding-bottom:calc(26px + var(--safe-bottom))}
}
@media (max-width:420px){ .kpis{grid-template-columns:1fr 1fr} .t-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }
.scanner .frame svg{width:44px;height:44px;opacity:.35}

/* ==========================================================================
   v2: Installation, Banner, Coupons, Adventskalender, Foto/Bon-Scan, Demo
   ========================================================================== */
.btn-lg{padding:15px 22px;font-size:16px}
.row.wrap{flex-wrap:wrap}
.li.today{font-weight:600;color:var(--primary)}
.ic-tile.gold{background:var(--accent);color:var(--accent-ink,var(--primary))}
.onb-kicker{margin:0;font-family:var(--head);font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--accent)}
.onb-note{margin:0;text-align:center;font-size:12.5px;opacity:.8}
.onb-sub{margin:0;opacity:.88;font-size:14px}
.onb-hint{margin:0;font-size:13px;background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px}
.onb-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.onb .link{color:#fff;opacity:.88;font-size:13px}

.overlay-full{position:absolute;inset:0;z-index:35}

.overlay-full .onb{position:absolute}

/* ---------- Installations-Assistent (13.10.2026): eine Seite, Film, Pfeil auf den echten Browser-Knopf ---------- */
.overlay-full{z-index:50} /* Anleitung aus dem Profil liegt über Kopf und Tab-Leiste (beide 40), sonst sind „Schließen“ und Pfeil verdeckt */
.onb.ist{display:block;padding:52px 18px calc(124px + var(--safe-bottom))}
.onb.ist.ptr-tr{padding-top:112px}
.ist-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ist-dev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:rgba(255,255,255,.12);padding:6px 11px;border-radius:999px;white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.ist-dev svg{width:15px;height:15px;flex:none}
.ist-head{display:grid;gap:6px;margin:12px 0 14px}
.ist-head h2{margin:0;font-family:var(--head);font-weight:800;font-size:24px;line-height:1.05;text-wrap:balance}
.ist-head p{margin:0;font-size:13.5px;line-height:1.4;opacity:.9}
.ist-cta{display:grid;gap:8px;margin:0 0 14px}
.ist-cta.fresh .btn{animation:istFresh 1s ease-out}
@keyframes istFresh{0%{transform:scale(.92);box-shadow:0 0 0 0 var(--accent)}55%{transform:scale(1.03);box-shadow:0 0 0 14px transparent}100%{transform:none}}
a.btn.ist-escape{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px}
.ist-escape svg{width:20px;height:20px}
.btn.btn-line.ist-escape{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);background:transparent}
.ist-man{margin:0 0 10px;font-size:13px;opacity:.85}
.ist-alt{display:grid;gap:8px;margin:0 0 14px;font-size:13px}
.ist-alt > span{opacity:.85}
.ist-sim{margin:0 0 14px}

/* Film: kleiner Bildschirm im Look von iPhone bzw. Android, im Design des Ladens */
.film{position:relative;height:200px;border-radius:26px;padding:5px;background:#0D0F2E;box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);margin:0 0 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.film-in{position:relative;height:100%;border-radius:21px;overflow:hidden;background:#F2F2F7;color:#1c1c1e;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Segoe UI",system-ui,sans-serif;font-size:11.5px;line-height:1.25;text-align:left}
.film svg{width:16px;height:16px}
.film .sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.film .sc.on{opacity:1;visibility:visible}
.film .fp{position:absolute;inset:0;padding:10px 12px;display:grid;gap:7px;align-content:start;background:#fff}
.film .sc.top .fp{padding-top:50px}
.film .fp-hero{display:flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border-radius:12px;padding:9px 10px;font-family:var(--head);font-weight:800;font-size:12px;text-transform:var(--head-tt,uppercase);overflow:hidden;white-space:nowrap}
.film .fp-hero img{width:26px;height:26px;border-radius:7px;flex:none}
.film .fp .sk{height:7px}
.film .fp .sk-card{display:block;height:40px;border-radius:10px;background:#eef0f5}
.film .fp-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;background:var(--accent);color:var(--accent-ink,var(--primary));border-radius:999px;padding:9px;font-weight:700;font-size:12px}
.film .ib{position:relative;display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%}
.film .ib.ibd{opacity:.35}
.film .ib.ibr{width:30px;height:30px;background:rgba(118,118,128,.12)}
.film .ib.ibr svg{width:18px;height:18px;stroke-width:3}
/* Leisten unten (Safari, Samsung) und oben (Chrome, iPad, Firefox, In-App) */
.film .fb{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;align-items:center;gap:6px;color:#1c1c1e}
.film .fb.fl{background:rgba(255,255,255,.94);border-radius:22px;padding:5px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.film .fb-pill{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;height:30px;padding:0 8px;border-radius:15px;background:rgba(118,118,128,.12);font-size:12px;font-weight:500;transition:background .2s,transform .2s}
.film .fb-pill > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film .fb-pill svg{width:11px;height:11px;flex:none}
.film .fb-pill.pressed{background:rgba(118,118,128,.3);transform:scale(.97)}
.film .fb.i18{left:0;right:0;bottom:0;display:block;background:#f7f7f8;border-top:1px solid #e3e3e8;padding:6px 10px 8px}
.film .fb-addr{display:flex;align-items:center;justify-content:center;gap:4px;height:26px;border-radius:9px;background:#e9e9ee;font-size:11.5px}
.film .fb-addr svg{width:11px;height:11px}
.film .fb-tools{display:flex;justify-content:space-around;align-items:center;margin-top:5px;color:#0a6cff}
.film .fb.sam{left:0;right:0;bottom:0;border-radius:0;background:#fff;border-top:1px solid #e6e6e6;justify-content:space-around;padding:5px 4px;color:#3c3c3c}
.film .ft{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border-bottom:1px solid #ececf0;color:#3c3c43}
.film .ft-pill{flex:1;min-width:0;display:flex;align-items:center;gap:5px;height:28px;padding:0 4px 0 10px;border-radius:14px;background:#eef0f3;font-size:11.5px;color:#1f1f1f}
.film .ft-pill > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film .ft-pill svg{width:11px;height:11px;flex:none}
.film .ft-in{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#1a73e8}
.film .ft-in svg{width:15px;height:15px}
.film .ft-tab{display:grid;place-items:center;width:20px;height:20px;flex:none;border:2px solid #444;border-radius:5px;font-size:10px;font-weight:700}
.film .ft.ipad{color:#0a6cff}
.film .ft.ipad .ft-pill{color:#1c1c1e}
.film .ft-t{flex:1;min-width:0;text-align:center;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Menüs, Teilen-Blatt, Dialoge */
.film .fm{position:absolute;z-index:4;background:rgba(250,250,252,.98);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.film .fm.i27{left:18%;right:18%;bottom:52px;transform-origin:50% 100%}
.film .fm.i26{right:8px;width:64%;bottom:52px;transform-origin:100% 100%}
.film .fm-r{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(60,60,67,.12);font-size:12px}
.film .fm-r:last-child{border-bottom:0}
.film .fm-r svg{width:15px;height:15px;flex:none}
.film .sc.on .fm,.film .sc.on .fmc,.film .sc.on .fx-d{animation:istMenu .28s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes istMenu{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.film .fs,.film .fa,.film .fsm{position:absolute;left:0;right:0;bottom:0;z-index:4;border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.film .sc.on .fs,.film .sc.on .fa,.film .sc.on .fsm{animation:istUp .35s cubic-bezier(.2,.9,.25,1) both}
@keyframes istUp{from{transform:translateY(60%);opacity:.3}to{transform:none;opacity:1}}
.film .fs{top:14px;background:#f2f2f7;padding:10px 10px 0;display:flex;flex-direction:column;gap:7px}
.film .fs-h{display:flex;align-items:center;gap:8px}
.film .fs-h img{width:30px;height:30px;border-radius:8px;flex:none}
.film .fs-h div{flex:1;min-width:0;display:grid}
.film .fs-h b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film .fs-h small{font-size:10.5px;color:#8a8a8e}
.film .fs-x{width:22px;height:22px;border-radius:50%;background:#e3e3e8;display:grid;place-items:center;color:#8a8a8e;flex:none}
.film .fs-x svg{width:11px;height:11px}
.film .fs-apps{display:flex;gap:10px;padding:0 2px}
.film .fs-apps i{width:28px;height:28px;border-radius:50%;background:#d1d1d6;flex:none}
.film .fs-apps i:nth-child(2){background:#9ad08e}.fs-apps i:nth-child(3){background:#7db7e8}.fs-apps i:nth-child(4){background:#f2a65a}.fs-apps i:nth-child(5){background:#e58fb0}
.film .fs-l{flex:1;overflow:hidden;border-radius:12px 12px 0 0;background:#fff}
.film .sc.on .fs-in{animation:istScroll .9s .45s cubic-bezier(.3,.7,.3,1) both}
@keyframes istScroll{to{transform:translateY(-92px)}}
.film .fs-r{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:30px;border-bottom:1px solid rgba(60,60,67,.12);font-size:12px}
.film .fs-r svg{width:15px;height:15px;flex:none}
.film .fa{top:8px;background:#f2f2f7;padding:0 10px}
.film .fa-n{display:flex;align-items:center;justify-content:space-between;gap:6px;height:40px;font-size:11.5px;color:#0a6cff}
.film .fa-n b{color:#1c1c1e;font-size:11.5px;white-space:nowrap}
.film .fa-ok{position:relative;font-weight:700;padding:3px 6px;border-radius:8px}
.film .fa-c{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:9px 10px}
.film .fa-c img{width:38px;height:38px;border-radius:10px;flex:none}
.film .fa-c div{display:grid;min-width:0}
.film .fa-c b{font-size:13px;font-weight:600}
.film .fa-c small{font-size:10.5px;color:#8a8a8e}
.film .fa-t{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:8px 10px;margin-top:8px;font-size:12px}
.film .tog{position:relative;width:34px;height:20px;border-radius:10px;background:#34c759;flex:none}
.film .tog::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.film .fx{position:absolute;inset:0;z-index:4;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:12px}
.film .fx.fxs{place-items:end stretch;padding:0}
.film .fx-d{width:100%;max-width:260px;background:#fff;border-radius:18px;padding:14px;display:grid;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);color:#1f1f1f}
.film .fx.fxs .fx-d{max-width:none;border-radius:18px 18px 0 0}
.film .fx-d > b{font-size:13px;font-weight:600}
.film .fx-a{display:flex;align-items:center;gap:10px}
.film .fx-a img{width:34px;height:34px;border-radius:50%;flex:none}
.film .fx-a div{display:grid;min-width:0}
.film .fx-a b{font-size:12px}
.film .fx-a small{font-size:10.5px;color:#5f6368}
.film .fx-b{display:flex;justify-content:flex-end;align-items:center;gap:14px;font-size:12px;font-weight:600;color:#0b57d0}
.film .fx-ok{position:relative;background:#0b57d0;color:#fff;padding:6px 12px;border-radius:999px}
.film .fmc{position:absolute;top:6px;right:6px;z-index:4;width:74%;background:#fff;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.25);padding:2px 0 4px;color:#1f1f1f;transform-origin:100% 0}
.film .fmc > div{position:relative;padding:6px 12px;font-size:11.5px}
.film .fmc > .fmc-i{display:flex;justify-content:space-around;padding:6px 6px 7px;border-bottom:1px solid #eee;color:#444}
.film .fmc-i svg{width:15px;height:15px}
.film .fsm{background:#fff;padding:10px 10px 12px;color:#1f1f1f}
.film .fsm-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.film .fsm-g > span{position:relative;display:grid;justify-items:center;gap:4px;font-size:10px;line-height:1.15;text-align:center;padding:6px 2px;border-radius:10px}
.film .fsm-g svg{width:18px;height:18px}
.film .fsm.fsl > b{display:block;font-size:12px;padding:0 4px 6px}
.film .fsm.fsl > div{position:relative;display:flex;align-items:center;gap:8px;padding:8px 6px;font-size:12px;border-top:1px solid #eee;border-radius:8px}
.film .fsm.fsl svg{width:15px;height:15px}
.film .fok{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:6px;background:#1c1c1e;color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;white-space:nowrap}
.film .fok svg{width:14px;height:14px;color:#34c759}
/* Startbildschirm mit dem neuen Symbol */
.film .fh{position:absolute;inset:0;background:linear-gradient(160deg,#5a7bd8,#2b2f73 55%,#7a4f9a);padding:20px 16px}
.film .fh.and{background:linear-gradient(160deg,#3b7d6e,#1d3557 60%,#457b9d)}
.film .fh-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;justify-items:center}
.film .fh-a{position:relative;display:grid;justify-items:center;gap:3px}
.film .fh-a i,.film .fh-a img{width:40px;height:40px;border-radius:11px;display:block}
.film .fh.and .fh-a i,.film .fh.and .fh-a img{border-radius:50%}
.film .fh-a small{font-size:9.5px;color:#fff;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film .sc.on .fh-new{animation:istPop .55s .3s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes istPop{from{transform:scale(0)}to{transform:scale(1)}}
.film .fh-open{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:8px;background:var(--primary);color:#fff;opacity:0;transform:scale(.2);font-family:var(--head);font-weight:800;font-size:13px;text-transform:var(--head-tt,uppercase)}
.film .fh-open img{width:48px;height:48px;border-radius:12px}
.film .sc.on .fh-open{animation:istOpen .45s 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes istOpen{to{opacity:1;transform:none}}
/* Finger tippt bzw. hält gedrückt, Ziel leuchtet kurz auf */
.film .tg{position:relative}
.film .fg{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid rgba(28,28,30,.5);box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;pointer-events:none;z-index:9}
.film .sc.on .fg{animation:istTap 1.1s .55s ease-in-out both}
.film .sc.on .fg.late{animation-delay:1.45s}
.film .sc.on .fg.hold{animation:istHold 2.1s .45s ease-in-out both}
@keyframes istTap{0%{opacity:0;transform:translate(26px,34px) scale(1.2)}35%{opacity:1;transform:none}55%{transform:scale(.78)}70%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes istHold{0%{opacity:0;transform:translate(26px,34px) scale(1.2)}18%{opacity:1;transform:none}28%{transform:scale(.78)}85%{opacity:1;transform:scale(.78)}100%{opacity:0;transform:none}}
.film .fg.hold::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid var(--accent);opacity:0}
.film .sc.on .fg.hold::after{animation:istRing 1.1s 1s ease-out both}
@keyframes istRing{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.9)}}
.film .sc.on .tg{animation:istHit .5s .85s both}
.film .sc.on .tg.late{animation-delay:1.75s}
.film .sc.on .tg.hold{animation:istHit 1s .9s both}
@keyframes istHit{0%{box-shadow:0 0 0 0 rgba(10,108,255,0)}50%{box-shadow:0 0 0 4px rgba(10,108,255,.4)}100%{box-shadow:0 0 0 3px rgba(10,108,255,.25)}}
/* Schritte, die mit dem Film mitlaufen */
.ist-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.ist-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:11px;align-items:center;background:rgba(255,255,255,.08);border-radius:16px;padding:10px 12px;cursor:pointer;transition:background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.ist-steps li.ist-now{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 2px var(--accent)}
.ist-steps li.ist-last{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ist-steps li.ist-last.ist-now{box-shadow:inset 0 0 0 2px var(--accent)}
.ist-n{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-family:var(--head);font-weight:800;font-size:14px;display:grid;place-items:center;transition:background .25s,color .25s}
.ist-steps li.ist-now .ist-n{background:var(--accent);color:var(--accent-ink,var(--primary))}
.ist-n svg{width:16px;height:16px}
.ist-t{font-size:14.5px;font-weight:600;line-height:1.9}
.ist-s{font-size:12px;opacity:.8;line-height:1.35}
.ist-ui{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;background:#fff;color:#0a6cff;border-radius:10px;padding:3px 9px;font-size:13.5px;font-weight:600;line-height:1.35;font-family:-apple-system,BlinkMacSystemFont,Roboto,system-ui,sans-serif;box-shadow:0 3px 10px rgba(0,0,0,.22);white-space:nowrap;margin:1px 0;max-width:100%}
.ist-ui svg{width:17px;height:17px;flex:none}
.ist-ui.round{border-radius:999px;padding:2px 11px}
.ist-ui.round svg{width:21px;height:21px;stroke-width:3}
.ist-ui.blue{background:#0a84ff;color:#fff}
.ist-ui.addr{color:#1c1c1e;background:#eef0f3;font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.ist-ui.addr svg{width:12px;height:12px}
.ist-ui.mini{padding:2px 6px;border-radius:8px}
.ist-ui.mini svg{width:15px;height:15px}
.ist-ui.and{color:#1f1f1f;border-radius:8px}
.ist-ui.and-ok{background:#0b57d0;color:#fff;border-radius:999px}
.ist-ui.gold{background:var(--accent);color:var(--accent-ink,var(--primary));border-radius:999px}
.ist-ui.icon{color:#1c1c1e;padding:2px 9px 2px 3px}
.ist-ui.icon img{width:22px;height:22px;border-radius:6px}
.ist-wait{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.4;background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;margin:0 0 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ist-wait i{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent);animation:istSpin 1s linear infinite;margin-top:1px}
@keyframes istSpin{to{transform:rotate(360deg)}}
.ist-back{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;margin:12px 0 0;box-shadow:inset 0 0 0 2px var(--accent)}
.ist-back img{width:38px;height:38px;border-radius:10px;flex:none}
.ist-back b{display:block;font-size:14px}
.ist-back div{line-height:1.35}
.ist-back span{font-size:12.5px;opacity:.9}
/* Hilfe: aufklappbar */
.ist-help{display:grid;gap:6px;margin:4px 0 12px}
.ist-help h3{margin:6px 2px 2px;font-size:13px;font-weight:700;opacity:.85}
.ist-help details{background:rgba(255,255,255,.07);border-radius:12px;padding:0 12px}
.ist-help summary{cursor:pointer;list-style:none;padding:11px 0;font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;gap:10px}
.ist-help summary::-webkit-details-marker{display:none}
.ist-help summary::after{content:"+";font-weight:700;opacity:.7}
.ist-help details[open] summary::after{content:"–"}
.ist-hb{padding:0 0 12px;font-size:13px;line-height:1.45;opacity:.92}
.ist-hb > span{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ist-sbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font:inherit;font-weight:600;font-size:13px;text-decoration:none;border:0;cursor:pointer}
.ist-sbtn svg{width:16px;height:16px}
.onb .link.ist-skip{display:block;margin:4px auto 0}
/* Erfolg (Android) und Computer */
.ist-okc{display:grid;justify-items:center;text-align:center;gap:12px;padding:30px 4px 10px}
.ist-okicon{position:relative;width:96px;height:96px}
.ist-okicon img{width:96px;height:96px;border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:istPop .5s cubic-bezier(.2,.9,.3,1.4) both}
.ist-okicon i{position:absolute;right:-8px;bottom:-8px;width:36px;height:36px;border-radius:50%;background:#34c759;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--primary);animation:istPop .4s .35s cubic-bezier(.2,.9,.3,1.4) both}
.ist-okicon i svg{width:20px;height:20px;stroke-width:3}
.ist-okc h2{margin:6px 0 0;font-family:var(--head);font-weight:800;font-size:28px}
.ist-okc p{margin:0;font-size:14px;line-height:1.7;opacity:.92;max-width:330px}
.ist-okc p.ist-s{font-size:12.5px;line-height:1.4}
.ist-okc .btn{margin-top:6px}
.ist-qr{background:#fff;border-radius:20px;padding:16px;width:210px;margin:6px auto 16px}
.ist-qr svg{width:100%;height:auto;display:block}
/* Pfeil auf den echten Knopf im Browser */
.ist-ptr{position:absolute;z-index:45;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;bottom:22px}
.ist-ptr span{background:var(--accent);color:var(--accent-ink,var(--primary));font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap}
.ist-ptr i{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:20px solid var(--accent);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));animation:istBob .9s ease-in-out infinite alternate}
@keyframes istBob{from{transform:translateY(-5px)}to{transform:translateY(4px)}}
.ist-ptr.bc{left:50%;transform:translateX(-50%)}
.ist-ptr.br{right:12px;align-items:flex-end}
.ist-ptr.br i{margin-right:8px}
.ist-ptr.tr{top:50px;bottom:auto;right:12px;align-items:flex-end;flex-direction:column-reverse}
.ist-ptr.tr i{margin-right:8px;border-top:0;border-bottom:20px solid var(--accent)}
.ist-ptr.hold span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px;animation:istPulse 1.2s ease-in-out infinite}
@keyframes istPulse{50%{transform:scale(1.6);opacity:.5}}
.ist-shelf{position:absolute;left:0;right:0;z-index:44;pointer-events:none}
.ist-shelf.b{bottom:0;height:104px;background:linear-gradient(to bottom,transparent,var(--primary) 62%)}
.ist-shelf.t{top:0;height:110px;background:linear-gradient(to top,transparent,var(--primary) 62%)}
/* Handy: Pfeil und Verlauf am echten Bildschirmrand. Demo am Computer und auf der Website: im Handy-Rahmen mit Kamera-Insel */
@media (max-width:900px){
  .ist-ptr,.ist-shelf{position:fixed}
  .onb.ist{padding-top:14px}
  .onb.ist.ptr-tr{padding-top:calc(76px + var(--safe-top))}
  .ist-ptr{bottom:calc(6px + var(--safe-bottom))}
  .ist-ptr.tr{top:calc(6px + var(--safe-top))}
  .ist-shelf.b{height:calc(86px + var(--safe-bottom))}
  .ist-shelf.t{height:calc(76px + var(--safe-top))}
}
html.embed .onb.ist{padding-top:50px}
html.embed .onb.ist.ptr-tr{padding-top:112px}
html.embed .ist-ptr{bottom:22px}
html.embed .ist-ptr.tr{top:50px}
html.embed .ist-shelf.b{height:104px}
html.embed .ist-shelf.t{height:110px}
@media (prefers-reduced-motion:reduce){ .film .fg{display:none} .film .sc.on .fh-open{animation:none} .ist-ptr i,.ist-ptr.hold span::before,.ist-wait i{animation:none} }
.demo-sel{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);font:inherit;background:#fff;color:inherit}

.ill{position:relative;width:224px;height:290px;border-radius:28px;background:#F7F8FC;color:#1d2040;box-shadow:0 24px 50px rgba(0,0,0,.35),inset 0 0 0 7px #0D0F2E;overflow:hidden;padding:7px;display:flex;flex-direction:column;animation:illIn .45s cubic-bezier(.2,.9,.25,1.1)}
@keyframes illIn{from{transform:translateY(14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.ill svg{width:18px;height:18px}
.hot{position:relative;color:var(--primary)!important}
.hot::after{content:"";position:absolute;inset:-6px;border-radius:12px;box-shadow:0 0 0 3px var(--accent);animation:ping 1.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(214,198,0,.9)}70%{box-shadow:0 0 0 10px rgba(214,198,0,0)}100%{box-shadow:0 0 0 0 rgba(214,198,0,0)}}
.hot-txt{color:var(--accent-ink,var(--primary));font-weight:700;background:var(--accent);border-radius:6px;padding:1px 6px;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{box-shadow:0 0 0 5px rgba(214,198,0,.35)}}
.sk{display:block;height:9px;border-radius:5px;background:#DCE0EC}
.sk.w40{width:40%}.sk.w60{width:60%}.sk.w75{width:75%}.sk.w90{width:90%}.sk.blk{height:70px;background:var(--primary);opacity:.85;border-radius:10px}
.sf-url{margin:12px 10px 0;background:#E6E8F0;border-radius:10px;padding:6px 10px;font-size:11px;display:flex;align-items:center;gap:6px;color:#55597a}
.sf-url svg{width:12px;height:12px}
.sf-page{flex:1;padding:14px 12px;display:grid;gap:9px;align-content:start}
.sf-bar{display:flex;justify-content:space-around;align-items:center;padding:10px 6px 14px;background:#EDEFF6;border-top:1px solid #DCE0EC;color:#2f63d6}
.sf-bar span{display:grid;place-items:center;width:30px;height:30px}
.sf-bar .dim{opacity:.35}
.sf-bar .hot::after{border-radius:50%}
.arrow-down{position:absolute;left:50%;bottom:54px;width:0;height:0;margin-left:-9px;border:9px solid transparent;border-top:12px solid var(--accent);animation:bob 1s ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(4px)}}
.ill-sheet{background:#EDEFF6;justify-content:flex-end;padding:7px 7px 14px;gap:6px}
.sh-head{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px;margin:0 6px}
.sh-head img,.ad-row img,.an-dlg img{width:34px;height:34px;border-radius:8px}
.sh-head b,.ad-row b{display:block;font-size:12px}
.sh-head small,.ad-row small,.an-dlg small{display:block;font-size:10px;color:#6B6F86}
.sh-row{display:flex;align-items:center;gap:10px;background:#fff;margin:0 6px;border-radius:12px;padding:9px 12px;font-size:12px;font-weight:500}
.sh-row.hot{font-weight:700}
.sh-row.hot::after{border-radius:14px;inset:-3px}
.ill-add{padding:7px;gap:10px}
.ad-head{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:16px 8px 8px;font-size:10.5px;color:#2f63d6}
.ad-head b{color:#1d2040;font-size:10.5px}
.ad-row{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px;margin:0 6px}
.ill-home{background:linear-gradient(160deg,#2B3C8F,#141849 60%,#3a2d6b);padding:34px 14px 14px}
.hm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px}
.hm-app{display:grid;justify-items:center;gap:4px;color:#fff;font-size:9px}
.hm-app i,.hm-app img{width:38px;height:38px;border-radius:10px;display:block}
.hm-app.hot{color:#fff!important}
.hm-app.hot::after{inset:-5px -4px auto;height:48px;border-radius:13px}
.ill-android{background:rgba(13,15,46,.55);justify-content:center;align-items:center;padding:16px}
.an-dlg{background:#fff;border-radius:22px;padding:18px 16px 12px;display:grid;justify-items:center;gap:6px;text-align:center;width:100%;transition:transform .2s}
.an-dlg b{font-size:14px}
.an-dlg.press{transform:scale(.96)}
.an-btns{display:flex;justify-content:flex-end;gap:12px;width:100%;margin-top:8px;font-size:12px;font-weight:600;color:#2f63d6}
.ill-chrome{padding:7px}
.ch-url{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:12px 6px 6px;background:#E6E8F0;border-radius:18px;padding:6px 6px 6px 10px;font-size:11px;color:#55597a}
.ch-url span{display:flex;align-items:center;gap:5px}
.ch-url svg{width:13px;height:13px}
.ch-url span.hot{width:24px;height:24px;justify-content:center;border-radius:50%}
.ch-menu{margin:4px 8px 0 auto;width:78%;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px 0;display:grid}
.ch-menu div{padding:8px 12px;font-size:12px;display:flex;gap:8px;align-items:center}
.ch-menu div.hot{font-weight:700;margin:0 6px}
.ch-menu div.hot::after{border-radius:9px;inset:-1px}
.ill-qr{background:#fff;padding:24px;justify-content:center}
.ill-qr svg{width:100%;height:auto}
.splash{position:absolute;inset:0;z-index:95;background:var(--primary);color:#fff;display:grid;place-content:center;justify-items:center;gap:14px;transition:opacity .4s}
.splash img{width:96px;height:96px;border-radius:24px;animation:splashIn .6s cubic-bezier(.2,.9,.25,1.3)}
.splash b{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:22px;letter-spacing:.04em}
.splash.out{opacity:0}
@keyframes splashIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* ---------- Banner-Karussell ---------- */
/* Banner: zum Wischen. Mehrere Banner reichen bis an den Bildschirmrand, das nächste schaut rechts heraus. */
.bn{position:relative;min-width:0}
.bn-track{position:relative;display:flex;gap:10px}
.bn-item{position:relative;flex:0 0 100%;height:150px;border:0;padding:0;text-align:left;color:#fff;background:var(--primary);overflow:hidden;border-radius:var(--r-md);-webkit-tap-highlight-color:transparent}
.bn-multi{margin:0 -16px}
.bn-multi .bn-track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 0 0 16px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bn-multi .bn-track::-webkit-scrollbar{display:none}
.bn-multi .bn-track::after{content:"";flex:0 0 6px}
.bn-multi .bn-item{flex-basis:calc(100% - 46px);scroll-snap-align:start;scroll-snap-stop:always}
.bn-multi .bn-item:last-child{scroll-snap-align:end}
.bn-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,73,.92) 0%,rgba(20,24,73,.55) 55%,rgba(20,24,73,.1) 100%)}
.bn-pattern{position:absolute;inset:0;background:radial-gradient(circle at 85% 30%,var(--accent) 0 3px,transparent 4px),radial-gradient(circle at 70% 70%,var(--accent) 0 2px,transparent 3px),radial-gradient(circle at 92% 75%,#fff 0 2px,transparent 3px),radial-gradient(circle at 60% 20%,#fff 0 1.5px,transparent 2.5px),repeating-linear-gradient(-58deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px)}
.bn-txt{position:absolute;z-index:1;left:16px;right:30%;bottom:14px;display:grid;gap:3px}
.bn-txt b{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:19px;line-height:.98}
.bn-txt span{font-size:12px;opacity:.9;line-height:1.35}
.bn-txt em{font-style:normal;font-family:var(--head);font-weight:800;font-size:13px;color:var(--accent);display:flex;align-items:center;gap:2px;margin-top:2px}
.bn-txt em svg{width:15px;height:15px}
.bn-dots{display:flex;justify-content:center;gap:2px;margin-top:6px}
.bn-dots button{display:grid;place-items:center;min-width:22px;height:22px;border:0;padding:0 4px;background:none;-webkit-tap-highlight-color:transparent}
.bn-dots button::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(35,38,74,.22);background:color-mix(in srgb,var(--ink) 22%,transparent);transition:width .3s,background .3s}
.bn-dots button[aria-current="true"]::before{width:20px;background:var(--primary)}

/* ---------- Teaser-Zeilen ---------- */
.adv-teaser,.photo-teaser,.cp-teaser{display:flex;align-items:center;gap:12px;border:0;border-radius:var(--r-md);padding:12px 14px;text-align:left;width:100%}
.adv-teaser .grow,.photo-teaser .grow,.cp-teaser .grow{flex:1;min-width:0;display:grid;gap:1px}
.adv-teaser b,.photo-teaser b,.cp-teaser b{font-family:var(--head);font-weight:800;font-size:16px;line-height:1.1}
.adv-teaser .grow > span,.photo-teaser .grow > span,.cp-teaser .grow > span{font-size:12.5px;opacity:.85}
.adv-teaser > svg,.photo-teaser > svg,.cp-teaser > svg{width:20px;height:20px;flex:none;opacity:.6}
.adv-teaser{background:linear-gradient(120deg,#141849,#2a2f7c);color:#fff;position:relative;overflow:hidden}
.adv-teaser::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),radial-gradient(circle at 92% 70%,rgba(214,198,0,.9) 0 2px,transparent 3px),radial-gradient(circle at 65% 80%,rgba(255,255,255,.6) 0 1px,transparent 2px);pointer-events:none}
.adv-num{flex:none;width:46px;height:46px;border-radius:12px;background:var(--accent);color:var(--accent-ink,var(--primary));display:grid;place-items:center;font-family:var(--head);font-weight:900;font-size:24px;position:relative}
.photo-teaser{background:var(--paper);color:var(--ink)}
.photo-teaser b{color:var(--primary)}
.cp-teaser{background:var(--accent);color:var(--accent-ink,var(--primary))}
.cp-teaser > svg:first-child{opacity:1;width:24px;height:24px}
.quick.q4{grid-template-columns:repeat(4,1fr)}
.quick.q4 a,.quick.q4 button{font-size:11px}

/* ---------- Segmente ---------- */
.seg{display:flex;background:var(--primary-soft);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:8px 10px;font-weight:600;font-size:13px;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:6px}
.seg button[aria-selected="true"]{background:var(--paper);box-shadow:0 2px 8px rgba(20,24,73,.12)}
.seg-n{min-width:18px;height:18px;border-radius:9px;background:var(--accent);font-size:11px;display:grid;place-items:center;padding:0 5px}

/* ---------- Coupon-Tickets ---------- */
.ticket{display:grid;grid-template-columns:64px 1fr;background:var(--paper);border-radius:var(--r-md);overflow:hidden;position:relative}
.tk-l{background:var(--primary);color:var(--accent);display:grid;place-items:center;position:relative}
.tk-l svg{width:28px;height:28px}
.tk-l::before,.tk-l::after{content:"";position:absolute;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--surface)}
.tk-l::before{top:-9px}.tk-l::after{bottom:-9px}
.sheet .tk-l::before,.sheet .tk-l::after{background:var(--paper)}
.sheet .ticket{box-shadow:inset 0 0 0 1.5px var(--line)}
.tk-r{padding:12px 14px;display:grid;gap:3px;border-left:2px dashed var(--line);min-width:0}
.tk-r h3{margin:0;font-family:var(--head);font-weight:800;color:var(--primary);font-size:17px;line-height:1.1}
.tk-r p{margin:0;font-size:12.5px;color:var(--muted)}
.tk-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.ticket.used{opacity:.55}
.ticket.used .tk-l{background:var(--muted)}
.reward-bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--primary-soft);overflow:hidden}
.reward-bar i{display:block;height:100%;background:var(--accent)}

/* ---------- Adventskalender ---------- */
.back-link{display:flex;align-items:center;gap:4px;justify-self:start;text-decoration:none}
.back-link svg{width:16px;height:16px}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;perspective:600px}
.adv-door{aspect-ratio:1;max-width:100%;border:0;border-radius:12px;background:var(--primary);color:var(--accent);display:grid;place-items:center;position:relative;padding:0;transition:transform .5s;transform-style:preserve-3d;background-image:radial-gradient(circle at 20% 25%,rgba(255,255,255,.35) 0 1px,transparent 2px),radial-gradient(circle at 75% 70%,rgba(255,255,255,.25) 0 1px,transparent 2px)}
.adv-door:nth-child(3n){background-color:#1b2060}
.adv-door:nth-child(4n+1){background-color:#2a3080}
.adv-n{font-family:var(--head);font-weight:900;font-size:26px;line-height:1}
.adv-door > svg{position:absolute;right:6px;top:6px;width:12px;height:12px;color:rgba(255,255,255,.45)}
.adv-door.locked{opacity:.55}
.adv-door.today{box-shadow:0 0 0 3px var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(214,198,0,.35)}}
.adv-door.opened{background:var(--paper);background-image:none;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary-soft)}
.adv-in{display:grid;justify-items:center;gap:2px}
.adv-in svg{width:20px;height:20px;color:var(--accent-deep)}
.adv-in small{font-size:10.5px;font-weight:700}
.adv-door.flip{transform:rotateY(-100deg)}
.door-big{font-family:var(--head);font-weight:900;font-size:64px;color:var(--accent-ink,var(--primary));text-align:center;line-height:1;background:var(--accent);border-radius:18px;padding:18px 0}

/* ---------- Kamera / Bon / Foto ---------- */
.cam{position:relative;height:220px;border-radius:var(--r-md);background:#0D0F2E;overflow:hidden;display:grid;place-items:center}
.cam-receipt{width:130px;background:#fff;border-radius:4px;padding:12px 10px 10px;display:grid;gap:6px;transform:rotate(-4deg);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.cam-qr{justify-self:center;width:46px;height:46px;color:#141849;margin-top:4px}
.cam-qr svg{width:100%;height:100%}
.cam-frame{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-2px 0 0 -42px;border-radius:12px;box-shadow:0 0 0 3px var(--accent),0 0 0 999px rgba(13,15,46,.45)}
.cam-frame .laser{position:absolute;left:-4px;top:40px;width:92px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:scan2 .9s ease-in-out infinite alternate}
@keyframes scan2{from{transform:translateY(-36px)}to{transform:translateY(36px)}}
.mini-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.mini-list li{display:flex;align-items:center;gap:8px}
.mini-list svg{width:18px;height:18px;color:var(--accent-deep)}
.check.ink{color:var(--ink);opacity:1}
.check.ink input{accent-color:var(--primary)}
.sheet .err{color:var(--warn)}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.scan-img{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface);max-height:260px;display:grid;place-items:center}
.scan-img img{width:100%;max-height:260px;object-fit:contain}
.fake-doc{width:70%;background:#fff;margin:18px 0;padding:16px;border-radius:6px;display:grid;gap:8px;box-shadow:0 6px 20px rgba(20,24,73,.12)}
.fake-doc b{font-size:13px;color:var(--primary)}
.scan-line{position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);box-shadow:0 0 16px 4px rgba(214,198,0,.6);animation:scan3 1.2s ease-in-out infinite alternate}
@keyframes scan3{from{top:4%}to{top:94%}}
.read-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.read-steps li{font-size:13px;padding:8px 10px;border-radius:10px;background:var(--surface);color:var(--muted);transition:all .3s}
.read-steps li.ok{background:var(--good-soft);color:var(--good);font-weight:600}
.read-steps li.ok::before{content:"✓ "}
.ph-form{display:grid;gap:12px}

/* ---------- Demo-Steuerung (Bühne) ---------- */
.demo{position:relative;background:var(--paper);border-radius:28px;box-shadow:var(--shadow);height:812px;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.demo-head{background:var(--primary-deep);color:#fff;padding:20px 22px 18px}
.demo-head h2{margin:2px 0 0;font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);font-size:22px}
.demo-body{flex:1;overflow-y:auto;padding:20px 22px 24px;display:grid;gap:18px;align-content:start;background:var(--surface)}
.demo-sec{display:grid;gap:10px}
.demo-sec h3{margin:0;font-family:var(--head);font-weight:800;color:var(--primary);font-size:15px}
.demo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-btns button{border:0;border-radius:var(--r-sm);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);padding:11px 12px;text-align:left;font-size:13px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:center}
.demo-btns button svg{width:18px;height:18px;color:var(--primary);flex:none}
.demo-btns button:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--primary)}
.demo-btns button[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:900px){ .demo{display:none} }
html.embed body{background:var(--primary)}
.chip svg{width:14px;height:14px;flex:none}

/* ---------- Flüssiger: Seitenwechsel, Antippen, Scrollen ---------- */
html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.app-main{scroll-behavior:auto}
.app-main.tab-in>*{animation:tabIn .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes tabIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

.tab:active,.btn:active,.photo-teaser:active,.card:active{transform:scale(.97);transition:transform .08s}

/* Mehrere Fotos für Vertrag/Rechnung */
.ph-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.ph-page{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--surface);display:grid;place-items:center;font-size:12px;color:var(--muted);border:1px solid var(--line)}
.ph-page img{width:100%;height:100%;object-fit:cover}
.ph-page b{position:absolute;left:6px;top:6px;background:var(--primary);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.ph-page button{position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(13,15,46,.7);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1}
.ph-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Formulare im Start-/Anmeldebildschirm nie breiter als der Bildschirm */
.onb-form,.push-ask,.onb form,.onb-body{grid-template-columns:minmax(0,1fr)}
.onb input,.onb select,.onb textarea,.onb .btn{min-width:0;max-width:100%}

/* Hinweis: neue Version */
.upd-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--safe-bottom));z-index:95;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--primary);color:#fff;padding:10px 16px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(13,15,46,.3);white-space:nowrap;animation:fade .3s}
.upd-banner svg{width:16px;height:16px;color:var(--accent)}

/* ==========================================================================
   Clubkarte im Wallet-Look: Vorderseite mit Folie, Rückseite mit QR (antippen = umdrehen)
   ========================================================================== */
.wcard{-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none;margin:2px 0 4px}
/* Umdrehen ganz ohne 3D: zusammenklappen (scaleX), Seite tauschen, aufklappen. iPhone-sicher. */
.wcard-in{position:relative;width:100%;aspect-ratio:1.586/1;transform:scaleX(1);transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.wcard-in.out{transform:scaleX(0);transition:transform .18s cubic-bezier(.6,0,.9,.6)}
.wcard-in.in-start{transform:scaleX(0);transition:none}
.wback{display:none}
.wcard.flipped .wback{display:grid}
.wcard.flipped .wfront{display:none}
.wcard:active .wcard-in{scale:.985}
.wface{position:absolute;inset:0;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(255,255,255,.06) inset,0 2px 4px rgba(13,15,46,.18),0 18px 34px -12px rgba(13,15,46,.55)}
/* Vorderseite */
.wfront{color:#F4F5FB;padding:16px 18px;display:grid;grid-template-rows:auto 1fr auto;
  --foil:linear-gradient(135deg,#7a4b2a 0%,#e3a873 28%,#9b6238 50%,#f0c497 72%,#8a5530 100%);
  background:radial-gradient(120% 140% at 0% 0%,#343b9a 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,#0e1140 0%,transparent 60%),linear-gradient(150deg,#262c7a 0%,#1b1f5c 55%,#11143f 100%)}
.lv-silber .wfront{--foil:linear-gradient(135deg,#6f7787 0%,#e9edf5 30%,#8d95a6 52%,#ffffff 70%,#7b8394 100%);
  background:radial-gradient(120% 140% at 0% 0%,#4a5170 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,#14172a 0%,transparent 60%),linear-gradient(150deg,#363c58 0%,#252a40 55%,#161a2b 100%)}
.lv-gold .wfront{--foil:linear-gradient(135deg,#8a6d00 0%,#f6e27a 28%,#b8950f 50%,#fff3a8 70%,#9c7d05 100%);
  background:radial-gradient(120% 140% at 0% 0%,#2e2a6e 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,#07081f 0%,transparent 60%),linear-gradient(150deg,#1d2060 0%,#141647 55%,#0a0b2a 100%)}
.wc-guilloche{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-radial-gradient(circle at 105% 115%,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),repeating-radial-gradient(circle at -10% -20%,rgba(255,255,255,.045) 0 1px,transparent 1px 9px)}
.wc-sheen{position:absolute;inset:-40% -60%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 52%,transparent 60%);transform:translateX(-60%);animation:wcSheen 7s ease-in-out 1.2s infinite}
.lv-gold .wc-sheen{background:linear-gradient(115deg,transparent 38%,rgba(255,240,150,.28) 48%,rgba(255,255,255,.08) 52%,transparent 62%);animation-duration:5s}
@keyframes wcSheen{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.wc-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wc-logo{height:20px;width:auto;max-width:62%}
.wc-pts{text-align:right;line-height:1}
.wc-pts small,.wc-bot small,.wb-info small{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:4px;font-weight:600}
.wc-pts b{font-family:var(--head);font-weight:900;font-size:26px;letter-spacing:.01em}
.wc-mid{align-items:center;justify-content:flex-start;gap:14px;align-self:center}
.wc-chip{width:44px;height:33px;border-radius:7px;background:var(--foil);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.35);display:grid;grid-template-rows:1fr 1fr 1fr;padding:6px 8px;gap:3px}
.wc-chip i{border-top:1px solid rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.25);border-radius:1px}
.wc-lvl{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,uppercase);letter-spacing:.14em;font-size:13px;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.wc-bot{align-items:flex-end}
.wc-name{font-size:17px;font-weight:600;letter-spacing:.01em;text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.08)}
.wc-right{text-align:right}
.wc-right b{font-size:14px;font-weight:600}
.wc-no{position:absolute;left:18px;top:50%;transform:translateY(26px);z-index:1;font-size:12.5px;letter-spacing:.22em;opacity:.78;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.wc-hint{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:1;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wc-hint svg{width:16px;height:16px;opacity:.9}
/* Rückseite */
.wback{background:linear-gradient(160deg,#ffffff 0%,#f3f4fa 100%);color:var(--ink);grid-template-columns:40% minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px}
.wback::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--lvl,var(--accent))}
.wb-qr{position:relative;width:100%;aspect-ratio:1;background:#fff;border:0;border-radius:12px;padding:8px;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(13,15,46,.08);cursor:zoom-in;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.wb-qr:active{transform:scale(.96)}
.wb-qr>svg{width:100%;height:100%;display:block}
.wb-zoom{position:absolute;right:-7px;bottom:-7px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(13,15,46,.25)}
.wb-zoom svg{width:14px;height:14px}
.wcard.flipped .wb-zoom{animation:wbZoom 1.4s ease-in-out .5s 2}
@keyframes wbZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.wb-info{display:grid;gap:3px;min-width:0}
.wb-info small{color:var(--muted);opacity:1}
.wb-info b{font-family:var(--head);font-weight:800;font-size:16px;color:var(--primary);line-height:1.15;overflow-wrap:anywhere}
.wb-info .num{font-size:12px;letter-spacing:.12em;color:var(--muted)}
.wb-lvl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:2px}
.wb-lvl i{width:8px;height:8px;border-radius:50%;background:var(--lvl)}
.wb-info p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.wb-big{justify-self:start;margin-top:4px;border:0;background:var(--surface);color:var(--primary);font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.wc-sheen{animation:none}.wcard-in,.wcard-in.out{transition:none}}


/* Aktion ohne Bild (Branchen-Vorlagen) */
.offer-mini .offer-ph{width:96px;min-height:96px;height:100%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.offer-mini .offer-ph svg{width:30px;height:30px}
.powered .bb-logo{height:11px;width:auto;display:inline-block;vertical-align:-1px;margin-left:2px;color:var(--ink)}
.bb-mark::after{background:#FFC234}
.app-head img.plate{background:#fff;padding:5px 9px;border-radius:9px;height:34px}
.wc-logo.plate{background:#fff;padding:4px 8px;border-radius:7px;height:28px}
.onb-hero.no-photo{background:radial-gradient(120% 90% at 80% 0%,var(--primary-soft) 0,transparent 55%),var(--primary)}

/* ---------- Farben des Ladens auch für Karte, Banner und Advent (theme.tint) ---------- */
.bb-tint .wfront{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--primary) 72%,#fff) 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--primary) 45%,#000) 0%,transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--primary) 88%,#fff) 0%,var(--primary) 55%,color-mix(in srgb,var(--primary) 62%,#000) 100%)}
.bb-tint .lv-gold .wfront{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--primary) 80%,#fff) 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--primary) 30%,#000) 0%,transparent 60%),linear-gradient(150deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 75%,#000) 55%,color-mix(in srgb,var(--primary) 45%,#000) 100%)}
.bb-tint .bn-item::after{background:linear-gradient(90deg,color-mix(in srgb,var(--primary-deep) 92%,transparent) 0%,color-mix(in srgb,var(--primary-deep) 55%,transparent) 55%,color-mix(in srgb,var(--primary-deep) 10%,transparent) 100%)}
.bb-tint .adv-teaser{background:linear-gradient(120deg,var(--primary-deep),var(--primary))}
.bb-tint .adv-door:nth-child(3n){background-color:var(--primary-deep)}
.bb-tint .adv-door:nth-child(4n+1){background-color:color-mix(in srgb,var(--primary) 85%,#fff)}
.bb-tint .ill-home{background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 80%,#fff),var(--primary-deep) 60%,var(--primary))}
.bb-tint .onb-hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-deep) 15%,transparent) 30%,var(--primary) 100%)}

/* Kleine Karten (schmale Handys, Vorschau im Dashboard): Kartennummer ausblenden statt überlappen */
.wcard{container-type:inline-size}
@container (max-width:330px){.wc-no{display:none}}

/* ---------- Stempelkarte (Grundlage aller Apps) ---------- */
.stamp-panel{gap:14px}
.st-goal{margin:2px 0 0;font-size:20px;line-height:1.1}
.st-count{font-family:var(--head);font-size:15px;color:var(--muted);white-space:nowrap;align-self:flex-start}
.st-count b{font-size:30px;color:var(--primary);font-weight:var(--head-w,900)}
.stamps{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:10px}
.stamps i{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:2px dashed color-mix(in srgb,var(--primary) 26%,transparent);color:color-mix(in srgb,var(--primary) 45%,transparent);font-style:normal;font-size:12px;font-weight:700;min-width:0}
.stamps i span{opacity:.75}
.stamps i svg{width:50%;height:50%}
.stamps i.on{border:0;background:var(--accent);color:var(--accent-ink,var(--primary));box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.stamps i.on svg{transform:rotate(-12deg)}
.stamps i.goal:not(.on){border-style:solid;border-color:var(--accent);color:var(--primary);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.stamps i.pop{animation:st-pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes st-pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.stamps i.pop{animation:none}}
.st-rule{color:var(--muted);font-size:12px;text-align:right}
.lv-stempel .wfront{--foil:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#000) 0%,var(--accent) 35%,color-mix(in srgb,var(--accent) 50%,#fff) 60%,var(--accent) 100%)}
.wc-dots{display:flex;flex-wrap:wrap;gap:6px;max-width:80%}
.wc-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.wc-dots i.on{background:var(--foil);box-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---------- Spiele: Glücksrad und Rubbellos ---------- */
.adv-teaser.game-teaser{background:linear-gradient(120deg,var(--primary-deep,var(--primary)),var(--primary))}
.gt-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--accent);color:var(--accent-ink,var(--primary));display:grid;place-items:center;position:relative}
.gt-ic svg{width:28px;height:28px}
.gt-rad svg{animation:gt-dreh 6s linear infinite}
@keyframes gt-dreh{to{transform:rotate(360deg)}}
.game-screen{display:grid;gap:14px}
.rad{position:relative;width:min(100%,330px);aspect-ratio:1;justify-self:center;margin:6px 0 2px}
.rad-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 24px rgba(0,0,0,.22))}
.rad-svg text{font-family:var(--body);font-weight:800}
.rad-g{transform-origin:150px 150px;transform-box:view-box}
.rad-zeiger{position:absolute;z-index:2;left:50%;top:-6px;width:30px;height:38px;margin-left:-15px;background:var(--ink,#1a1a1a);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.rad-mitte{position:absolute;left:50%;top:50%;width:27%;height:27%;transform:translate(-50%,-50%);border-radius:50%;border:4px solid #fff;background:var(--accent);color:var(--accent-ink,var(--primary));font-family:var(--head);font-weight:900;font-size:15px;text-transform:var(--head-tt,none);box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;display:grid;place-items:center}
.rad-mitte svg{width:24px;height:24px}
.rad-mitte:disabled{background:#e6e3ea;color:#8a8792;cursor:default}
.g-wieder{margin:0;text-align:center;font-weight:600;color:var(--muted)}
.g-liste{display:grid;gap:8px;background:var(--paper);border-radius:var(--r-md);padding:14px 16px}
.g-liste ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.g-liste li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px}
.g-liste li svg{width:18px;height:18px;flex:none;color:var(--primary)}
.g-liste .sub{margin:2px 0 0;font-size:12.5px}
.g-big{font-size:clamp(26px,8vw,38px);padding:22px 14px;line-height:1.1}
.g-niete{display:grid;justify-items:center;gap:6px;text-align:center;padding:12px 0}
.g-niete svg{width:40px;height:40px;color:var(--accent)}
.g-niete b{font-family:var(--head);font-size:26px;color:var(--primary)}
.g-niete span{color:var(--muted)}
.los{border-radius:20px;overflow:hidden;background:var(--primary);color:#fff;box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
.los-kopf{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px 10px}
.los-kopf span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.los-kopf b{font-family:var(--head);font-weight:var(--head-w,900);text-transform:var(--head-tt,none);font-size:20px}
.los-feld{position:relative;margin:0 14px;aspect-ratio:2/1;border-radius:14px;overflow:hidden;background:#fff;color:var(--primary)}
.los-ergebnis{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;padding:12px}
.los-gewinn,.los-niete{font-family:var(--head);font-weight:900;font-size:clamp(22px,7vw,30px);line-height:1.1}
.los-niete{color:var(--muted)}
.los-ergebnis span{font-size:13px;color:var(--muted)}
.los-warte{font-size:28px;color:var(--muted)}
.los-schicht{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.los-gesperrt{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,#eceaf0 0 10px,#f5f4f8 10px 20px);color:var(--muted);font-weight:600;font-size:14px}
.los-gesperrt svg{width:26px;height:26px}
.los.zu .los-ergebnis{display:none}
.los-fuss{padding:10px 18px 14px;font-size:12.5px;opacity:.85}
@media (prefers-reduced-motion:reduce){.gt-rad svg{animation:none}}
/* Code eingelöst: Bestätigung nach dem Scan im Laden */
.qr-done{display:grid;justify-items:center;text-align:center;gap:8px;padding:6px 0 4px}
.qr-done .h-sec{margin:4px 0 0;font-size:24px}
.qr-done p{margin:0}
.qr-done .btn{margin-top:10px}
.qr-done-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink,var(--primary));animation:qr-pop .4s cubic-bezier(.2,1.6,.4,1) both}
.qr-done-ic svg{width:32px;height:32px}
@keyframes qr-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
/* Mitteilungen einschalten (Karte unter der Clubkarte) */
.push-card{background:var(--paper);border-radius:var(--r-md);padding:16px;display:flex;gap:14px;align-items:flex-start;box-shadow:inset 0 0 0 1.5px var(--accent)}
.push-card .grow{display:grid;gap:4px;min-width:0}
.push-card b{font-family:var(--head);font-weight:800;color:var(--primary);font-size:16px}
.push-card .grow>span{font-size:13.5px;color:var(--muted)}
.push-card .row{margin-top:8px;gap:16px}
/* Freunde werben: Code aus dem Einladungslink */
.ref-hint{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:var(--r-md);padding:12px 14px;box-shadow:inset 0 0 0 1.5px var(--accent);margin:4px 0 14px}
.ref-hint>svg{width:20px;height:20px;flex:none;color:var(--primary)}
.ref-hint span{flex:1;min-width:0;display:grid;gap:2px;font-size:14px;color:var(--ink)}
.ref-hint b{word-break:break-all}
.ref-hint small{font-size:12.5px;color:var(--muted)}

/* ---------- Rechtstexte (15.10.2026) ---------- */
.sheet-recht{gap:10px}
.recht{font-size:14px;line-height:1.5;display:block}
.recht h3{font-family:var(--body);font-size:15px;font-weight:700;color:var(--primary);margin:18px 0 6px;text-transform:none;letter-spacing:0}
.recht h3:first-child{margin-top:4px}
.recht p,.recht li{margin:0 0 6px}
.recht ol,.recht ul{padding-left:20px;margin:0 0 6px}
.recht table{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0 10px}
.recht th,.recht td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.recht a{color:var(--primary);font-weight:600}
.recht-stand{color:var(--muted);font-size:12.5px}
.recht-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:6px 0 0;font-size:13px;color:var(--muted)}
.recht-links .link{font-size:13px;font-weight:500;color:var(--muted)}
.check .link{font:inherit;font-weight:600;color:inherit;vertical-align:baseline}
.onb-body .recht-links{margin-top:14px}

/* iPhone: Ist ein Eingabefeld kleiner als 16 px, vergrößert iOS beim Antippen die ganze Seite und bleibt danach vergrößert
   (rechts abgeschnitten, Tab-Leiste rutscht unten aus dem Bild; Kundenfeedback 23.10.2026). Auf Touch-Geräten daher mindestens 16 px. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em)}}