/* Becherkönig – Schriften, Farben und Stil (Design: Bierpong-Seite der Timberborn-Volleys).
   Ersetzt die marke.css von Satzball; das Layout kommt unverändert aus satzball.css.
   Alle Variablen (--cv … --ret, --schrift, --kond) werden von satzball.css genutzt.
   Stil-Regeln stehen unten mit „:root“ davor – so gewinnen sie, obwohl satzball.css danach geladen wird. */

/* Oswald (SIL Open Font License, static/fonts/OFL-Oswald.txt), lokal statt Google Fonts – Datenschutz */
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url("../fonts/oswald-600.a5b43a0ccf1c.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("../fonts/oswald-700.5e79fc3b5fbd.woff2") format("woff2"); }

:root {
  --cv: #ebe1e0; --bg: #f6f2f1; --sf: #ffffff; --sf2: #f3e8e7;
  --ink: #231a1a; --mut: #76686a; --line: #eadcdd;
  --ac: #e11d2e; --aci: #ffffff; --acs: #fde8ea;
  --gr: oklch(0.6 0.15 150); --grb: oklch(0.95 0.05 150); --grt: oklch(0.42 0.12 150);
  --ye: oklch(0.8 0.15 85); --yeb: oklch(0.96 0.07 92); --yet: oklch(0.48 0.1 70);
  --re: oklch(0.58 0.19 27); --reb: oklch(0.95 0.035 25); --ret: oklch(0.5 0.17 27);
  --schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
  --kond: "Oswald", Impact, "Arial Narrow", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cv: #0f0c0a; --bg: #17130f; --sf: #241e17; --sf2: #2e261d;
    --ink: #f3ebe0; --mut: #a89883; --line: #3a3026;
    --ac: #ff4757; --aci: #ffffff; --acs: #3b1a1d;
    --gr: oklch(0.7 0.15 150); --grb: oklch(0.3 0.06 150); --grt: oklch(0.82 0.13 150);
    --ye: oklch(0.82 0.14 88); --yeb: oklch(0.33 0.06 85); --yet: oklch(0.87 0.12 90);
    --re: oklch(0.68 0.17 27); --reb: oklch(0.32 0.07 25); --ret: oklch(0.8 0.12 27);
  }
}

/* Stil: aufrechte Oswald-Versalien, fast eckige Karten mit rotem Rand links, schräge Etiketten */
:root .titel, :root .marke { font-style: normal; font-weight: 700; letter-spacing: .02em; }
:root .zwischen { font-weight: 600; letter-spacing: .05em; }
:root .karte, :root .liste, :root .partie, :root .kacheln--lose .kachel {
  border-radius: 0; border-left: 5px solid var(--ac); box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}
:root .kacheln { border-radius: 0; border-left: 5px solid var(--ac); }
:root .btn { border-radius: 3px; font-family: var(--kond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
:root .btn--hinzu { border-radius: 3px; }
:root .feld input:not([type=checkbox]), :root .spieler-zeile input { border-radius: 3px; }
:root .hinweis, :root .countdown { border-radius: 0; border-left: 5px solid currentColor; }
:root .badge { border-radius: 2px; }

/* Startseite (templates/marke/startseite_oben.html): rotes Titelbild und „So läuft’s ab“ */
.bk-hero {
  position: relative; overflow: hidden; color: #fff; padding: 26px 20px 24px;
  background: linear-gradient(135deg, rgba(157, 6, 20, .92), rgba(227, 30, 36, .85) 55%, rgba(255, 71, 87, .8)), var(--bild) center / cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 0 100%);
  display: flex; flex-direction: column; gap: 10px;
}
.bk-hero__titel { margin: 0; font: 700 30px/1.05 var(--kond); text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.bk-hero p:not(.bk-hero__titel) { margin: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.bk-hero__knopf {
  align-self: flex-start; margin-top: 4px; background: #fff; color: #c20f20; padding: 9px 20px; border-radius: 3px;
  font: 700 15px var(--kond); text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.bk-hero__knopf:hover { text-decoration: none; filter: brightness(.96); }
.bk-ablauf { display: flex; flex-direction: column; gap: 10px; }
.bk-ablauf__bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 4px; }
.bk-ablauf figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; transform: skewX(-8deg); border: 3px solid var(--sf); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); background: #222; }
.bk-ablauf img { position: absolute; inset: 0 -12%; width: 124%; height: 100%; object-fit: cover; transform: skewX(8deg); }
.bk-ablauf figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--ac); color: #fff; text-align: center; padding: 2px;
  font: 600 12px var(--kond); text-transform: uppercase; letter-spacing: .04em;
}