/* Design tokens (Brief §13A D2). System font stack only (no webfont download).
   Type scale ratio 1.2 · spacing 4/8 px grid · contrast checked ≥ 4.5:1 text, ≥ 3:1 UI. */
:root {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  /* type scale 1.2, base 18px mobile */
  --fs-0: 1.125rem;   /* 18px body */
  --fs-1: 1.35rem;    /* h3 */
  --fs-2: 1.62rem;    /* h2 */
  --fs-3: 1.944rem;   /* h1 mobile */
  --fs-4: 2.333rem;   /* h1 desktop */
  --fs-small: 0.9375rem; /* 15px */
  --lh: 1.6;
  --measure: 68ch;
  /* spacing 4/8 grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --radius: 8px;
  --tap: 48px;
  /* light palette (default) – contrast on --bg: ink 15.9:1, muted 7.0:1, accent 7.4:1 */
  --bg: #fbf8f2;
  --surface: #ffffff;
  --ink: #1d1b18;
  --muted: #4f4a42;
  --line: #7a7266;      /* UI borders ≥ 3:1 */
  --accent: #1f4e79;    /* links/buttons */
  --accent-ink: #ffffff;
  --leader: #fff1c2;
  --warn: #8a1c00;
  --focus: #b34700;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614; --surface: #211f1c; --ink: #f1ede6; --muted: #c7c0b4; --line: #8d857a;
    --accent: #9cc4ec; --accent-ink: #10202f; --leader: #4a3d10; --warn: #ffb4a0; --focus: #ffb070;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-0);line-height:var(--lh);color:var(--ink);background:var(--bg);hyphens:auto;overflow-wrap:break-word}
body.large-text{font-size:1.3125rem}
.wrap{max-width:calc(var(--measure) + 2*var(--s-4));margin:0 auto;padding:0 var(--s-4)}
main{padding-bottom:var(--s-8)}
h1,h2,h3{line-height:1.25;hyphens:manual}
h1{font-size:var(--fs-3);margin:var(--s-5) 0 var(--s-3)}
h2{font-size:var(--fs-2);margin:var(--s-7) 0 var(--s-3)}
h3{font-size:var(--fs-1);margin:var(--s-5) 0 var(--s-2)}
@media (min-width:768px){h1{font-size:var(--fs-4)}}
a{color:var(--accent);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s-4);top:var(--s-2);background:var(--surface);padding:var(--s-2)}
.small{font-size:var(--fs-small);color:var(--muted)}
.lead{font-size:1.2rem}
.placeholder{color:var(--muted);font-style:italic}
.site-header{border-bottom:1px solid var(--line);background:var(--surface)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:64px}
.wordmark{font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.wordmark span{color:var(--accent)}
.site-header nav{display:flex;gap:var(--s-2)}
.site-header nav a,.site-footer nav a,.linklike{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-2)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0;margin:var(--s-3) 0 0;font-size:var(--fs-small)}
.breadcrumb li+li::before{content:"›";margin-right:var(--s-2);color:var(--muted)}
.breadcrumb a{display:inline-flex;min-height:var(--tap);align-items:center}
.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:var(--s-5) 0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.linklike{background:none;border:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 var(--s-4);border:2px solid var(--accent);border-radius:var(--radius);background:var(--surface);color:var(--accent);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-quiet{border-color:var(--line);color:var(--ink)}
.cards{list-style:none;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.card a{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);min-height:var(--tap);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none}
.card-title{font-weight:700;font-size:var(--fs-1);color:var(--accent)}
.kurzinfo{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:var(--s-4);margin:var(--s-5) 0}
.kurzinfo h2{margin:0 0 var(--s-2);font-size:var(--fs-1)}
.kurzinfo dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-4);margin:0}
.kurzinfo dt{font-weight:600}.kurzinfo dd{margin:0}
.draft-note{border-left:4px solid var(--warn);padding:var(--s-2) var(--s-3);background:var(--surface)}
details{border:1px solid var(--line);border-radius:var(--radius);padding:0 var(--s-4);margin:var(--s-2) 0;background:var(--surface)}
summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-weight:600}
/* score sheet + counter */
.counter{margin:var(--s-4) 0;min-height:36rem}
.table-scroll{overflow-x:auto}
.sheet{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;background:var(--surface)}
.sheet caption{text-align:left;font-weight:600;padding:var(--s-2) 0}
.sheet th,.sheet td{border:1px solid var(--line);padding:var(--s-2);min-width:4.5em;text-align:right;height:2.5em}
.sheet th[scope=row],.sheet thead th:first-child{text-align:center;min-width:3em}
.sheet tfoot td,.sheet tfoot th{font-weight:800;border-top:3px double var(--ink)}
.sheet .is-leader{background:var(--leader)}
.sheet input{width:100%;min-width:4.5em;min-height:var(--tap);font:inherit;text-align:right;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);padding:0 var(--s-2)}
.sheet thead input{text-align:center;font-weight:600}
.counter-bar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:var(--s-3) 0}
.stepper{display:inline-flex;align-items:center;gap:var(--s-2)}
.stepper output{min-width:2ch;text-align:center;font-weight:700}
.warn{color:var(--warn);font-weight:600}
.counter-status{min-height:1.6em}
.nojs-hint{margin-top:var(--s-2)}
.js .nojs-hint{display:none}
.related ul{padding-left:var(--s-5)}
/* consent banner: both choices identical style/size */
.consent{position:fixed;inset:auto 0 0 0;z-index:10;background:var(--surface);border-top:2px solid var(--ink);box-shadow:0 -4px 16px rgba(0,0,0,.15)}
.consent-inner{max-width:calc(var(--measure) + 2*var(--s-4));margin:0 auto;padding:var(--s-4)}
.consent-title{font-size:var(--fs-1);margin:0 0 var(--s-2)}
.consent p{margin:0 0 var(--s-3);font-size:var(--fs-small);color:var(--ink)}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.consent-actions .btn{width:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.text-table{border-collapse:collapse;width:100%;margin:var(--s-3) 0;background:var(--surface)}
.text-table th,.text-table td{border:1px solid var(--line);padding:var(--s-2);text-align:left;vertical-align:top}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:var(--s-4);margin:var(--s-3) 0}
.panel h3{margin-top:0}
.panel fieldset{border:0;padding:0;margin:0 0 var(--s-3)}
.panel legend{font-weight:700;margin-bottom:var(--s-2)}
.choice{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap)}
.choice input{width:22px;height:22px}
.grid-form{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));align-items:end}
.grid-form label{display:flex;flex-direction:column;gap:var(--s-1);font-weight:600}
.grid-form select,.grid-form input[type=number],.panel select{min-height:var(--tap);font:inherit;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);padding:0 var(--s-2)}
.dice{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0}
.die{width:var(--tap);height:var(--tap);font-size:1.4rem;font-weight:700}
.big-value{font-size:var(--fs-2);font-weight:800}