/* Megacode Spielleiter · Tablet-App
   Layout: Fallübersicht als Kartenraster. Spielansicht: Phase mit Anweisungen links, Reiter rechts,
   feste Aktionsleiste unten für den Daumen. Alle Farben sind Tokens, Hell und Dunkel folgen dem System. */

@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/barlow-semi-condensed-500.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-semi-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/barlow-semi-condensed-700.woff2") format("woff2")}

:root{
  --bg:#e8ecef; --surface:#ffffff; --surface2:#f2f5f7; --ink:#0d1a24; --ink2:#37495a; --muted:#566878; --line:#cfd8de;
  --accent:#0b5a78; --accent-ink:#ffffff; --accent-soft:#d8eaf2;
  --arrest:#b52828; --arrest-soft:#f7dedb;
  --warn:#8a4e00; --warn-soft:#f9e8c8;
  --ok:#17704a; --ok-soft:#d8efe2;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-head:"Barlow Semi Condensed","Arial Narrow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --read:1;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a1116; --surface:#131d24; --surface2:#1a2630; --ink:#e7eef2; --ink2:#b9c7d0; --muted:#8a9dab; --line:#2a3944;
    --accent:#63c3e2; --accent-ink:#04202a; --accent-soft:#12303c;
    --arrest:#ff7469; --arrest-soft:#3b1c1c;
    --warn:#f2b44c; --warn-soft:#3a2d12;
    --ok:#62d395; --ok-soft:#133121;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 18px/1.45 var(--f-body);
  padding-block:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
button{font:inherit;color:inherit;touch-action:manipulation}
h1,h2,h3{font-family:var(--f-head);margin:0;text-wrap:balance;line-height:1.08;letter-spacing:.005em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
sub,sup{font-size:.68em;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.22em}
sup{top:-.5em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:12px 4px 40px}
.eyebrow{font:600 14px/1.2 var(--f-head);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 20px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font:600 19px/1 var(--f-head);letter-spacing:.01em;cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.icon{width:52px;padding:0}
.btn.sm{min-height:44px;padding:0 14px;font-size:17px}
.btn svg,.ico svg{width:22px;height:22px;flex:none}
.btn.big{min-height:64px;padding:0 26px;font-size:22px}

/* Kopfleiste */
.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line);
}
.top .ttl{flex:1 1 220px;min-width:0}
.top .ttl h2{font-size:26px}
.top .ttl .eyebrow{display:block;margin-bottom:2px}
.top .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Übersicht */
.hero{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:20px 0 14px}
.hero h1{font-size:clamp(40px,6vw,64px);font-weight:700;margin-top:6px}
.hero p{color:var(--ink2);margin-top:8px;max-width:60ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.chip{
  min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
  font:600 18px/1 var(--f-head);letter-spacing:.01em;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip small{font:inherit;opacity:.65}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:14px}
.ccard{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 14px;text-align:left;
  padding:18px 18px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;
  min-height:170px;
}
.ccard:active{transform:translateY(1px)}
.ccard .n{font:700 64px/0.95 var(--f-head);color:var(--accent);grid-row:1 / span 3;font-variant-numeric:tabular-nums}
.ccard.arrest .n{color:var(--arrest)}
.ccard h3{font-size:25px;font-weight:600}
.ccard .focus{color:var(--ink2);font-size:17px}
.ccard .meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:auto;padding-top:10px;color:var(--muted);font-size:16px}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--f-head);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tag.arrest::before{background:var(--arrest)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 14px/1.1 var(--f-head);letter-spacing:.04em;background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.arrest{background:var(--arrest-soft);color:var(--arrest);border-color:transparent}
.foot{margin-top:22px;color:var(--muted);font-size:16px;max-width:80ch}

/* Fallseite */
.crumbs{display:flex;gap:8px}
.chero{padding:22px 0 8px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:start}
.chero .bign{font:700 110px/0.85 var(--f-head);color:var(--accent);font-variant-numeric:tabular-nums}
.chero.arrest .bign{color:var(--arrest)}
.chero h1{font-size:clamp(34px,4.6vw,52px);font-weight:700}
.chero .sub{color:var(--ink2);margin-top:8px;font-size:20px}
.chero .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.fact{padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.fact .eyebrow{font-size:13px}
.fact b{display:block;font:600 24px/1.15 var(--f-head);margin-top:4px}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.card h3{font-size:24px;margin-bottom:10px}
.card + .card{margin-top:16px}
.stack > * + *{margin-top:16px}
.read{
  font-size:calc(22px * var(--read));line-height:1.55;
}
.read p + p{margin-top:.7em}
.read b{font:700 .8em/1 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:.35em}
.readhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.readhead h3{margin:0}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{min-height:44px;min-width:56px;border:0;background:var(--surface);font:600 18px/1 var(--f-head);cursor:pointer}
.seg button + button{border-left:1.5px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.goal{font-size:19px;color:var(--ink2)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 6px}

/* Spielansicht */
.steps{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 8px;scrollbar-width:thin}
.step{
  flex:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 16px 6px 12px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;
}
.step .sn{font:700 24px/1 var(--f-head);color:var(--muted);font-variant-numeric:tabular-nums;min-width:20px;text-align:center}
.step .st{font:600 16px/1.1 var(--f-head);max-width:150px;color:var(--ink2)}
.step.done .sn{color:var(--ok)}
.step.arrest .sn{color:var(--arrest)}
.step.now{background:var(--ink);border-color:var(--ink)}
.step.now .sn,.step.now .st{color:var(--bg)}
.rgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;padding-bottom:150px}
.rcol > * + *{margin-top:16px}


.eb{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.eb .eyebrow{color:var(--accent)}
.when li{border-top:1px solid var(--line)}
.when li:first-child{border-top:0}
.chk{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;width:100%;text-align:left;
  background:none;border:0;padding:12px 2px;min-height:54px;cursor:pointer;
}
.box{width:30px;height:30px;border-radius:8px;border:2px solid var(--muted);display:grid;place-items:center;color:transparent;background:var(--surface)}
.box svg{width:20px;height:20px}
.chk[aria-pressed="true"] .box{background:var(--ok);border-color:var(--ok);color:#fff}
.chk[aria-pressed="true"] .tx{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.chk .tx{font-size:20px;line-height:1.35;padding-top:2px}
.prog{font:600 16px/1 var(--f-head);color:var(--muted);letter-spacing:.04em;margin-left:auto;font-variant-numeric:tabular-nums}
.note{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);font-size:18px}
.note .eyebrow{display:block;margin-bottom:4px;font-size:13px}
.note.warn{background:var(--arrest-soft);border-color:transparent;color:var(--ink)}
.note.warn .eyebrow{color:var(--arrest)}
.evt{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1.5px dashed var(--line);font-size:17px}
.evt .cd{font:700 22px/1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--ink)}
.evt .tx{flex:1 1 220px;min-width:0}
.due{margin-bottom:12px;padding:14px 16px;border-radius:14px;background:var(--warn-soft);border:2px solid var(--warn);color:var(--ink)}
.due .eyebrow{color:var(--warn);margin-bottom:6px;display:block}
.due p{font-size:19px}
.due .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (prefers-reduced-motion:no-preference){.due{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--warn) 25%,transparent)}}
.alt{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.alt .btn{justify-content:flex-start;text-align:left;height:auto;min-height:52px;padding:10px 16px;font-size:18px;line-height:1.2}

.finds li + li{margin-top:8px}
.find{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.find.fit{border-color:var(--accent)}
.find.open{background:var(--surface)}
.fh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:12px 14px;min-height:60px;cursor:pointer}
.kind{font:700 13px/1 var(--f-head);letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);color:var(--ink2);min-width:64px;text-align:center}
.ft{font:600 20px/1.15 var(--f-head)}
.fs{display:block;font:400 15px/1.3 var(--f-body);color:var(--muted);margin-top:3px}
.fs em{font-style:normal;color:var(--accent);font-weight:700}
.chev{width:22px;height:22px;color:var(--muted);transition:transform .15s}
.find.open .chev{transform:rotate(180deg)}
.fb{padding:2px 16px 16px;font-size:21px;line-height:1.5;border-top:1px dashed var(--line);margin:0 0 0;padding-top:12px}
.hint{color:var(--muted);font-size:16px;margin-bottom:12px}

/* feste Aktionsleiste */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--surface);border-top:1.5px solid var(--line);
  box-shadow:0 -8px 24px rgb(0 0 0 / .08);
}
.clock{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.clock .t{display:flex;flex-direction:column;gap:2px}
.clock .lbl{font:600 12px/1 var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.clock b{font:700 30px/1 var(--f-head);font-variant-numeric:tabular-nums}
.clock .paused{color:var(--warn)}
.bar .go{flex:1 1 260px;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 22px}
.bar .go span{font:600 22px/1.1 var(--f-head)}
.bar .go small{font:500 15px/1.1 var(--f-body);opacity:.85}

/* Debriefing */
.dtimer{display:grid;gap:8px}
.dtime{font:700 56px/1 var(--f-head);font-variant-numeric:tabular-nums}
.dbar{position:relative;height:14px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.dbar .fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.dbar .win{position:absolute;top:0;bottom:0;left:50%;width:30%;background:color-mix(in srgb,var(--ok) 22%,transparent)}
.dscale{position:relative;height:20px;font:600 14px/1 var(--f-head);color:var(--muted)}
.dscale span{position:absolute;transform:translateX(-50%)}
.tline li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:baseline}
.tline li:first-child{border-top:0}
.tline .t{font:600 19px/1.2 var(--f-head);font-variant-numeric:tabular-nums}
.tline li.skip{color:var(--muted)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}

/* Overlays */
.ovl-back{position:fixed;inset:0;z-index:80;background:rgb(5 10 14 / .66);display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet{
  width:min(760px,100%);max-height:92%;overflow:auto;background:var(--surface);color:var(--ink);
  border-radius:20px 20px 0 0;padding:22px max(22px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){.ovl-back{align-items:center}.sheet{border-radius:20px;max-height:86%}}
.sheet h2{font-size:32px;margin-bottom:14px}
.sheet h3{font-size:22px;margin:18px 0 6px}
.sheet dl{margin:0}
.sheet dt{font:700 14px/1.2 var(--f-head);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-top:14px}
.sheet dd{margin:4px 0 0;font-size:19px}
.sheet .x{float:right}

/* Vorschau auf die nächste Phase und Drehbuch-Übersicht */
.vcs{display:flex;gap:8px;flex-wrap:wrap}
.vc{display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);font:600 20px/1.1 var(--f-head);font-variant-numeric:tabular-nums}
.vc small{font:600 13px var(--f-body);color:var(--muted)}
.vc .nt{font-weight:400}
.start .sr,.script .sr{font:600 22px/1.2 var(--f-head);margin:6px 0 10px}
.script > li{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1.5fr) minmax(0,1.3fr);gap:10px 20px;padding:16px 0;border-top:1px solid var(--line)}
.script > li:first-child{border-top:0}
.script .sh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;align-content:flex-start}
.script .pn{font:700 32px/1 var(--f-head);color:var(--accent);font-variant-numeric:tabular-nums}
.script > li.arrest .pn{color:var(--arrest)}
.script .pt{font:600 21px/1.15 var(--f-head)}
.script .sw .eyebrow{display:block;margin-bottom:4px}
.script .sw ul{list-style:disc;padding-left:20px;font-size:18px}
.script .sn,.script .se{margin-top:8px;font-size:16px;color:var(--ink2)}
.script .sn.warn{color:var(--arrest)}
@media (max-width:980px){
  .script > li{grid-template-columns:minmax(0,1fr)}
}
/* Ablauf als Flow */
.steps{gap:24px;padding-left:4px;padding-right:20px}
.step:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:9px;height:9px;border-top:2.5px solid var(--muted);border-right:2.5px solid var(--muted);transform:translateY(-50%) rotate(45deg)}

/* Phase: Anweisungen im Vordergrund */
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px 20px}
.pcard.arrest{border-color:var(--arrest);box-shadow:inset 7px 0 0 var(--arrest)}
.ph{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ph .pn{font:700 52px/0.9 var(--f-head);color:var(--accent);font-variant-numeric:tabular-nums}
.pcard.arrest .ph .pn{color:var(--arrest)}
.ph h2{font-size:32px;font-weight:700}
.pcard .when .tx{font-size:21px}
.at{margin-left:10px;font:700 16px/1 var(--f-head);color:var(--muted);text-decoration:none;display:inline-block;font-variant-numeric:tabular-nums}
.flex{margin-top:16px;color:var(--muted);font-size:15px}

/* SimPad-Infoboxen */
.info{margin:12px 0;padding:12px 14px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface2)}
.info.now{border-color:var(--accent);background:var(--accent-soft)}
.info .eyebrow{display:block;margin-bottom:8px}
.info.now .eyebrow{color:var(--accent)}
.info .rh{font:600 23px/1.2 var(--f-head);margin-bottom:6px}
.tagnew{font:700 13px/1 var(--f-head);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--accent);color:var(--accent-ink);vertical-align:middle;margin-left:6px}
.was2{font-size:15px;color:var(--muted);margin:-2px 0 8px}
.sps{display:flex;gap:8px;flex-wrap:wrap}
.sp{display:flex;flex-direction:column;gap:2px;padding:8px 12px 9px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line);min-width:104px}
.sp .l{font:700 15px/1.1 var(--f-head);letter-spacing:.04em;color:var(--muted)}
.sp .l i{font-style:normal;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.sp b{font:700 32px/1.05 var(--f-head);font-variant-numeric:tabular-nums}
.sp b small{font:600 15px var(--f-head);color:var(--muted)}
.sp > small{font-size:14px;color:var(--ink2)}
.sp .was{font-size:14px;color:var(--muted)}
.sp.chg{border-color:var(--accent);border-width:2px;padding:7px 11px 8px}
.sp.empty b{color:var(--muted)}
.keep{margin-top:10px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;color:var(--muted);font-size:16px}
.keep .kp b{font:700 15px var(--f-head);color:var(--ink2);margin-right:3px}
.keep.fine{font-size:14px}
.amber{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--warn-soft);color:var(--ink);font-size:17px}

/* Werte antippen und anpassen */
button.sp{font:inherit;color:inherit;text-align:left;align-items:flex-start;cursor:pointer}
.sp .l{display:flex;align-items:center;gap:6px;width:100%}
.sp .pen{margin-left:auto;width:15px;height:15px;color:var(--muted);flex:none}
.rh-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rh-btn .pen{width:18px;height:18px;color:var(--muted);flex:none}
button.kp{font:inherit;color:inherit;cursor:pointer;padding:6px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);min-height:40px}
.sheet.sm{width:min(520px,100%)}
.fieldrow{display:flex;align-items:center;gap:10px;margin:10px 0}
.field{flex:1;min-width:0;min-height:62px;font:700 34px/1 var(--f-head);padding:0 14px;border-radius:12px;border:2px solid var(--accent);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
.fieldrow .u{font:600 20px var(--f-head);color:var(--muted)}
.steps2{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.steps2 .btn{min-width:62px;padding:0 12px}
.sheet .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* Reiter rechts */
.tabs{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.tabbtn{flex:none;min-height:48px;padding:0 11px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 17px/1 var(--f-head);cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.tabbtn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tabbtn .cnt{font:600 14px var(--f-head);opacity:.7}
.facts.sm{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 14px}
.facts.sm .fact{padding:8px 12px}
.facts.sm .fact b{font-size:19px;margin-top:2px}
.read.sm{font-size:calc(19px * var(--read))}
.notes{width:100%;min-height:120px;margin-top:6px;border:1.5px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);color:var(--ink);font:400 18px/1.4 var(--f-body);resize:vertical}
.log li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:17px}
.log li:first-child{border-top:0}
.log .t{font:700 18px/1.3 var(--f-head);font-variant-numeric:tabular-nums;color:var(--muted)}
.log li.ph .tx{font-weight:700;color:var(--accent)}

/* Gesamtes Drehbuch (Lesen und Drucken) */

@media (max-width:980px){
  .cols,.rgrid{grid-template-columns:minmax(0,1fr)}
  .chero{grid-template-columns:minmax(0,1fr)}
  .chero .bign{font-size:72px}
}
@media (max-width:560px){
  .ccard{grid-template-columns:minmax(0,1fr)}
  .ccard .n{grid-row:auto;font-size:44px}
  .bar .go{flex-basis:100%;max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}