/* Black Tech — Optik nach dem abgenommenen Muster (muster/blacktech-2026-11-03/style.css).
   Der erste Block ist das Muster unverändert; darunter nur Ergänzungen. */
:root{--bg:#0b0e0d;--s1:#141917;--s2:#1c2320;--line:#26302c;--tx:#eef2ef;--mu:#8b9691;--ac:#e9b44c;--ok:#46c28a;--no:#e5534b;--felt:#10261d}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--tx);font:16px/1.35 -apple-system,"SF Pro Text","Inter",system-ui,sans-serif;height:100%}
.app{min-height:100vh;padding:20px 16px 24px;display:flex;flex-direction:column;gap:16px}
.top{display:flex;justify-content:space-between;align-items:center}
.top h1{font-size:28px;letter-spacing:-.02em;font-weight:700}
.sub{color:var(--mu);font-size:13px}
.pill{font-size:12px;color:var(--mu);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.today{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;justify-content:space-between;align-items:center}
.today b{font-size:22px}.ring{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--ac) 0 40%,var(--s2) 40% 100%);display:grid;place-items:center}
.ring i{width:40px;height:40px;border-radius:50%;background:var(--s1);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--mu)}
.stage{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:14px;align-items:center}
.stage .n{width:34px;height:34px;border-radius:10px;background:var(--s2);display:grid;place-items:center;font-weight:700;color:var(--ac);flex:none}
.stage .t{flex:1}.stage .t div:first-child{font-weight:600}
.bar{height:4px;background:var(--s2);border-radius:4px;margin-top:8px;overflow:hidden}.bar span{display:block;height:100%;background:var(--ac)}
.locked{opacity:.4}.locked .n{color:var(--mu)}
.felt{background:radial-gradient(120% 80% at 50% 0%,#17382a 0%,var(--felt) 55%,var(--bg) 100%);border-radius:24px;padding:22px 16px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:20px;border:1px solid #1c3a2d}
.who{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9fb8ac;text-align:center;margin-bottom:10px}
.hand{display:flex;justify-content:center;gap:-20px}
.card{width:78px;height:110px;border-radius:10px;background:#fbfaf6;color:#15181a;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.45);margin:0 -8px}
.card.r{color:#c8302c}.card .k{position:absolute;top:6px;left:8px;font-weight:700;font-size:20px;line-height:1}
.card .k small{display:block;font-size:15px}.card .c{position:absolute;inset:0;display:grid;place-items:center;font-size:40px}
.card:nth-child(2){transform:rotate(4deg) translateY(4px)}
.total{text-align:center;margin-top:14px;font-weight:600}.total span{color:#9fb8ac;font-weight:400}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{height:58px;border-radius:14px;background:var(--s2);border:1px solid var(--line);color:var(--tx);font-size:17px;font-weight:600;display:grid;place-items:center}
.btn.dim{opacity:.3}.btn.pick{background:var(--no);border-color:var(--no)}.btn.right{background:var(--ok);border-color:var(--ok);color:#06140d}
.prog{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--mu)}
.prog b{color:var(--tx)}
.fb{background:#2a1513;border:1px solid #5a2622;border-radius:14px;padding:12px 14px;font-size:14px}
.fb b{color:#ff8a82}.fb .idx{margin-top:6px;color:var(--ac);font-size:13px}

/* ── Ergänzungen ─────────────────────────────────────────────────────── */
.app{max-width:460px;margin:0 auto;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.btn:disabled{cursor:default}
.btn:not(:disabled):active{filter:brightness(1.25)}
.btn.wide{grid-column:1/-1}
.btns.three{grid-template-columns:repeat(3,1fr)}
.btns.four{grid-template-columns:repeat(4,1fr)}
.btn.small{height:46px;font-size:15px;border-radius:12px}
.btn.big{font-size:24px}
.btn.on{background:var(--ac);border-color:var(--ac);color:#1a1306}
.prog .back{color:var(--mu)}
.prog .back:active{color:var(--tx)}
.prog button{color:var(--mu);font-size:14px}
.top .pill{cursor:pointer}
.stage{color:inherit}
a.stage:active{background:var(--s2)}
.stage .n.done{color:var(--ok)}
.note{color:var(--mu);font-size:12px;text-align:center}
.center{text-align:center}
.fb.ok{background:#11251b;border-color:#1f4a35}.fb.ok b{color:#6fdca8}
.fb .more{margin-top:6px;color:var(--mu);font-size:12px}
.tap{color:var(--mu);font-size:12px;text-align:center;margin-top:-6px}

/* Karten: Rückseite, weitere Größen, Fächer */
.card.back{background:repeating-linear-gradient(45deg,#1d4433 0 5px,#163628 5px 10px);border:4px solid #fbfaf6}
.card.big{width:104px;height:146px;border-radius:12px}
.card.big .k{font-size:26px;top:8px;left:10px}.card.big .k small{font-size:19px}.card.big .c{font-size:54px}
.card.md{width:60px;height:85px;border-radius:8px;margin:0 -6px}
.card.md .k{font-size:16px;top:5px;left:6px}.card.md .k small{font-size:12px}.card.md .c{font-size:30px}
.card.mini{width:38px;height:54px;border-radius:6px;margin:0 -7px;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.card.mini .k{font-size:12px;top:3px;left:4px}.card.mini .k small{font-size:10px}.card.mini .c{font-size:18px;padding-top:8px}
.card.back.mini,.card.back.md{border-width:3px}
.hand .card:nth-child(3){transform:rotate(-2deg) translateY(2px)}
.hand .card:nth-child(4){transform:rotate(3deg) translateY(5px)}
.hand .card:nth-child(5){transform:rotate(-1deg)}
.hand .card:nth-child(6){transform:rotate(4deg) translateY(3px)}
.hand.tight .card{margin:0 -16px}
.hand.tight .card.mini{margin:0 -11px}
@keyframes deal{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
.card.new{animation:deal .22s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,180,76,.7)}100%{box-shadow:0 0 0 14px rgba(233,180,76,0)}}

/* Startseite */
.ring{background:conic-gradient(var(--ac) 0 var(--p,0%),var(--s2) var(--p,0%) 100%)}

/* Regeln (Bogen von unten) */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet .panel{background:var(--s1);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;width:100%;max-width:460px;max-height:90dvh;overflow:auto;padding:18px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.sheet h2{font-size:20px;letter-spacing:-.01em}
.sheet .head{display:flex;justify-content:space-between;align-items:center}
.sheet h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:600;margin-top:4px}
.opt{display:flex;flex-direction:column;gap:8px}
.opt .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px}
.seg{display:flex;gap:6px}
.seg button{flex:1;min-height:40px;border-radius:10px;background:var(--s2);border:1px solid var(--line);font-size:14px;font-weight:600;padding:0 4px}
.seg button.on{background:var(--ac);border-color:var(--ac);color:#1a1306}
.ramp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ramp label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mu);text-align:center}
.ramp input{height:40px;border-radius:10px;background:var(--s2);border:1px solid var(--line);color:var(--tx);font:600 16px/1 inherit;text-align:center;width:100%}
.src{color:var(--mu);font-size:11px;line-height:1.45}

/* Zählstand eingeben */
.stepper{display:grid;grid-template-columns:58px 1fr 58px;gap:10px;align-items:center}
.stepper .val{text-align:center;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.ask{font-size:15px;text-align:center;color:var(--tx)}
.ask small{display:block;color:var(--mu);font-size:12px;margin-top:2px}

/* Stufe 2/3: eine große Karte */
.felt.solo{justify-content:center;align-items:center}
.felt.solo .hand{min-height:146px;align-items:center}
.clock{font-variant-numeric:tabular-nums}

/* Zusammenfassung */
.sum{justify-content:center;text-align:center;gap:10px}
.sum .bigv{font-size:44px;font-weight:700;letter-spacing:-.02em}
.sum .line{color:#cfdcd5;font-size:15px}
.sum .ach{color:var(--ac);font-weight:600}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.statgrid div{background:rgba(0,0,0,.18);border:1px solid #1c3a2d;border-radius:12px;padding:10px 12px}
.statgrid b{display:block;font-size:20px}
.statgrid span{color:#9fb8ac;font-size:12px}

/* Stufe 4: Ablagestapel */
.tcrow{display:flex;align-items:center;justify-content:space-around;gap:12px}
.tray{display:block}
.rcbox{text-align:center}
.rcbox .who{margin-bottom:4px}
.rcbox b{font-size:46px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chips .btn{height:46px;font-size:16px}

/* Stufe 5: Tisch */
.felt.table{padding:14px 12px 16px;gap:10px;position:relative;justify-content:flex-start}
.felt.table .who{margin-bottom:6px}
.felt.table .total{margin-top:8px;font-size:15px}
.dealer{position:relative;min-height:128px}
.dealer .tray{position:absolute;right:0;top:0}
.msg{text-align:center;font-size:14px;color:#cfdcd5;min-height:20px}
.seats{display:flex;justify-content:space-around;gap:6px;min-height:104px}
.seat{flex:1;min-width:0;text-align:center}
.seat .hand{min-height:58px}
.seat .fans{display:flex;justify-content:center;gap:16px}
.seat .tot{font-size:13px;color:#cfdcd5;margin-top:6px;font-variant-numeric:tabular-nums}
.seat.youmark{flex:.6}
.seat.youmark .who{color:var(--ac)}
.seat.youmark .slot{width:34px;height:50px;margin:2px auto 0;border:1px dashed rgba(233,180,76,.45);border-radius:6px}
.okt{color:#6fdca8;font-weight:600}.not{color:#ff8a82;font-weight:600}
.youarea{margin-top:auto}
.hands{display:flex;justify-content:center;gap:18px}
.hwrap{border-radius:14px;padding:6px 8px 4px;border:1px solid transparent}
.hwrap.active{border-color:rgba(233,180,76,.55);background:rgba(233,180,76,.06)}
.chip{display:inline-block;font-size:12px;font-weight:600;border-radius:99px;padding:2px 8px;margin-left:6px;background:rgba(0,0,0,.28);color:#cfdcd5;vertical-align:middle}
.chip.win{background:rgba(70,194,138,.18);color:#6fdca8}
.chip.lose{background:rgba(229,83,75,.18);color:#ff8a82}
.ctrl{display:flex;flex-direction:column;gap:10px;min-height:126px;justify-content:flex-end}
.errs{display:flex;flex-direction:column;gap:8px;text-align:left;max-height:none}
.err{background:rgba(0,0,0,.2);border:1px solid #1c3a2d;border-radius:12px;padding:10px 12px;font-size:14px}
.err .ty{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);margin-bottom:3px}
.err .d{color:#9fb8ac;font-size:13px;margin-top:2px}
.felt.scroll{justify-content:flex-start;overflow:visible}

/* Stufe 0: Grundlagen */
.lesson{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.lesson h2{font-size:18px;letter-spacing:-.01em}
.lesson b{color:var(--tx);font-weight:600}
.lesson p,.lesson .para,.lesson li,.lesson dd{color:#cfdcd5}
.lesson ol,.lesson ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.lesson .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);font-weight:600;margin-bottom:-6px}
.lesson .hint{color:var(--mu);font-size:12px}
.lesson .hand{justify-content:flex-start;padding:0 5px}
.lesson .hand.tight .card.mini{margin:0 -5px}
.lesson .para{display:flex;flex-direction:column;gap:8px}
.lesson b.okt{color:#6fdca8}.lesson b.not{color:#ff8a82}
.lesson .hand .card{transform:none}
.vals{display:flex;flex-direction:column;gap:10px}
.vals>div{display:flex;align-items:center;gap:14px}
.vals>div .hand{min-width:132px}
.vals span{color:#cfdcd5;font-size:14px}
.moves{display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.moves dt{font-weight:600}
.exs{display:flex;flex-direction:column;gap:8px}
.ex{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:10px;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.exh{display:flex;align-items:center;gap:8px}
.exl{color:var(--mu);font-size:13px}
.ex .vs{color:var(--mu);font-size:12px}
.ex .act{justify-self:end;font-weight:600;color:var(--ac)}
a.btn{text-decoration:none}

@media (prefers-reduced-motion:reduce){.card.new{animation:none}}
/* Auswertung (Muster ~/muster/blacktech-auswertung-2026-11-03) */
.stage .n.ev{color:var(--tx);font-size:16px}
.lesson.ev h2{font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tiles div{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:10px}
.tiles b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.tiles span{color:var(--mu);font-size:12px}
.tiles .up{color:var(--ok)}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--mu)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lesson.ev .seg button{min-height:36px}
.grid{display:grid;grid-template-columns:30px repeat(10,1fr);gap:3px;font-size:12px;font-variant-numeric:tabular-nums}
.grid .h{color:var(--mu);text-align:center;font-size:11px;padding:2px 0}
.grid .r{color:var(--mu);text-align:right;padding-right:4px;align-self:center;font-size:12px;white-space:nowrap}
.grid .c{height:28px;border-radius:5px;display:grid;place-items:center;font-weight:700;font-size:11px;padding:0}
.c.g{background:rgba(70,194,138,.22);color:#6fdca8}
.c.a{background:rgba(233,180,76,.22);color:#f0c46a}
.c.x{background:rgba(229,83,75,.32);color:#ffb0aa;outline:1px solid rgba(229,83,75,.6)}
.c.n{background:var(--s2);color:#55605b}
.grid .c.sel{outline:2px solid var(--tx);outline-offset:1px}
.cellinfo{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.cellinfo .ans{display:flex;flex-wrap:wrap;gap:6px}
.cellinfo .ans span{background:var(--s2);border-radius:8px;padding:3px 8px;font-size:12px;color:#cfdcd5}
.cellinfo .ans span.no{background:rgba(229,83,75,.22);color:#ffb0aa}
.cellinfo .ans span.ok{background:rgba(70,194,138,.16);color:#6fdca8}
.errs2{display:flex;flex-direction:column;gap:8px}
.e2{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.e2 .hand{min-width:62px;justify-content:flex-start;padding-left:5px}
.e2 .hand .card.mini{margin:0 -5px;transform:none}
.e2 .t{flex:1;font-size:14px}
.e2 .t small{display:block;color:var(--mu);font-size:12px;margin-top:1px}
.e2 .q{color:#ff8a82;font-weight:600;font-size:13px;white-space:nowrap}
.e2 .ty{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);font-weight:600;margin-bottom:1px}
.queue{display:flex;align-items:center;gap:12px;background:rgba(233,180,76,.08);border:1px solid rgba(233,180,76,.35);border-radius:12px;padding:10px 12px;font-size:14px;color:#cfdcd5}
.queue b{font-size:22px;color:var(--ac)}
.ranks{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end;height:90px}
.ranks div{background:var(--ac);border-radius:4px 4px 0 0;opacity:.85;min-height:2px}
.ranks div.slow{background:var(--no)}
.ranks div.none{background:var(--s2)}
.rl{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;text-align:center;color:var(--mu);font-size:11px;margin-top:4px}
.locked2{opacity:.45}
.cap{color:var(--mu);font-size:12px}
.dots{display:flex;flex-wrap:wrap;gap:4px}
.dots i{width:11px;height:11px;border-radius:3px;background:var(--ok)}
.dots i.half{background:var(--ac)}.dots i.no{background:var(--no)}