/* Einstieg der Vorführung. dekaru-Marke: monochrom, Bordeaux nur auf Links. */
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('schriften/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('schriften/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('schriften/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('schriften/inter-latin-500-normal.woff2') format('woff2'); }

:root {
  --bg: #f7f7f5; --surface: #ffffff; --text: #141414; --muted: #595959; --border: #dedede;
  --accent: #6e1a26; --accent-hover: #862532; --focus: #141414;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --surface: #1a1a1a; --text: #f2f2f2; --muted: #a8a8a8; --border: #2e2e2e; --accent: #cc7079; --accent-hover: #d98890; --focus: #f2f2f2; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 'Inter', system-ui, sans-serif; }
.innen { max-width: 760px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.sprung { position: absolute; left: 13px; top: -100px; background: var(--surface); color: var(--text); padding: 8px 13px; z-index: 2; }
.sprung:focus { top: 13px; }
.kopf { border-bottom: 1px solid var(--border); background: var(--surface); }
.kopf .innen { min-height: 56px; display: flex; align-items: center; }
.marke { margin: 0; font: 700 20px/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.01em; }
.marke span { font-weight: 500; color: var(--muted); }
main { padding-top: 34px; padding-bottom: 34px; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 2.4vw + 18px, 38px); margin: 0 0 13px; }
h2 { font-size: clamp(20px, 1vw + 15px, 24px); margin: 55px 0 13px; }
h3 { font-size: 18px; margin: 0 0 8px; }
.vorspann { font-size: 18px; color: var(--muted); max-width: 62ch; }
.regeln { padding-left: 21px; margin: 21px 0 0; }
.regeln li { margin-bottom: 8px; }
.karten { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.karte { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 21px; position: relative; }
.karte p { margin: 0; color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
.karte a::after { content: ''; position: absolute; inset: 0; }
.karte a:focus-visible { outline: none; }
.karte:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pin { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
details { border-top: 1px solid var(--border); }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary { cursor: pointer; padding: 13px 0; min-height: 44px; font: 500 17px/1.4 'Space Grotesk', system-ui, sans-serif; color: var(--accent); }
summary:hover { color: var(--accent-hover); }
details ol { margin: 0 0 21px; padding-left: 21px; }
details li { margin-bottom: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fuss { border-top: 1px solid var(--border); padding-top: 21px; padding-bottom: 34px; color: var(--muted); font-size: 14px; }
.fuss p { margin: 0; }
@media (min-width: 720px) { .karten { grid-template-columns: repeat(3, 1fr); } }