/* ERZEUGT von brand/system/tokens.py aus tokens.json. Nicht von Hand ändern. */
@font-face{font-family:Bungee;src:url(/fonts/bungee-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/rubik-var.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(/fonts/pixelify-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  color-scheme:dark;
  /* marke */
  --rot:#FD333D; --rot-unten:#DA141E; --weiss:#FFFFFF; --schwarz:#051114; --nacht:#0B1A1F;
  /* grund */
  --flaeche:#13262C; --flaeche2:#1B343B; --linie:#24393F;
  /* text */
  --text:#FFFFFF; --grau:#8A9AA0; --grau-hell:#B9C5C9;
  /* modus */
  --suro:#F27A12; --suro-unten:#CE5B09; --suro-klein:#B95D0E; --ffa:#2986FF; --ffa-unten:#1166D4; --ffa-klein:#2374DD; --kodex:#D21F3C; --kodex-unten:#93152A; --kodex-hell:#FF5468; --quick:#B565FF; --quick-unten:#9047D9; --event:#FF4DC4; --event-unten:#B33689; --event-keins:#8A8F98; --jumprun:#14A0E6; --naechste-runde:#1FAF4A;
  /* werte */
  --datum:#55E07A; --kills:#55E07A; --tode:#FF7A80; --kd:#7CC0FF; --serie:#FFA42E; --xp:#C8F54A; --gold:#FFD700; --silber:#C0C7D0; --bronze:#CD7F32;
  /* ingame */
  --schutzzeit:#FFD84A; --schutzzeit-symbol:#231B00; --border:#2EC4D6; --nether:#B565FF; --wasser:#3FA9F5; --gefahr:#FF4D4D; --hilfe:#2FA8FF; --wandel:#B98CFF;
  /* hinweis */
  --bald:#FFD84A; --bald-text:#231B00; --discord:#5865F2;
  /* halloween */
  --hw-violett:#7B4DEB; --hw-violett-unten:#5A32C4; --hw-orange:#FF8A1F; --hw-orange-unten:#D96A08; --hw-orange-klein:#C8691A; --hw-himmel:#171127; --hw-nacht:#0F1519; --hw-flaeche:#182128; --hw-flaeche2:#212B34; --hw-linie:#2A3340; --hw-schwarz:#080F12; --hw-kontur:#1A0E14; --hw-mond:#EDE8F7; --hw-knopftext:#1A0E00;
  --f-titel:"Bungee","Russo One",Impact,sans-serif; --f-display:var(--f-titel);
  --f-text:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-pixel:"Pixelify Sans","Courier New",monospace;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; --a8:64px;
  --r-karte:14px; --r-knopf:10px; --r-klein:6px;
  --ecke-s-stufe:10px; --ecke-s-k:3px; --ecke-s-r:8px;
  --ecke-m-stufe:18px; --ecke-m-k:5px; --ecke-m-r:14px;
  --ecke-l-stufe:36px; --ecke-l-k:12px; --ecke-l-r:24px;
  --kante-s:3px; --kante-m:4px; --titel-kante:0.075em; --titel-kontur:0.055em;
}
/* Halloween: nur Umfärbung (html.hw wie web/site/src/halloween.css, oder .hw an einem Block) */
html.hw,.hw{--nacht:var(--hw-nacht);--flaeche:var(--hw-flaeche);--flaeche2:var(--hw-flaeche2);--linie:var(--hw-linie);--schwarz:var(--hw-schwarz);--rot:var(--hw-violett);--rot-unten:var(--hw-violett-unten);--suro:var(--hw-orange);--suro-unten:var(--hw-orange-unten);--suro-klein:var(--hw-orange-klein);}
/* Signaturform: Eckenschnitt oben rechts. SELTEN: nur Marke + Spielmodi + Hauptüberschrift (Liste in web/sync-tokens.sh). Maske aus 7 Ebenen, braucht nur --st (Stufe) und --k (kleiner Radius).
   Drei Ecken rund per border-radius. Kante/Unterseite: .kante (innen) oder Eltern-.tief (drop-shadow, folgt der Form). */
.ecke,.ecke-s,.ecke-m,.ecke-l,.mtab,.event{
  border-radius:var(--r) 0 var(--r) var(--r);
  -webkit-mask:linear-gradient(#000 0 0) left top/calc(100% - var(--st) - var(--k)) 100% no-repeat,linear-gradient(#000 0 0) left bottom/100% calc(100% - var(--st) - var(--k)) no-repeat,radial-gradient(circle at 0 100%,#000 calc(var(--k) - .5px),#0000 var(--k)) right var(--st) top 0/var(--k) var(--k) no-repeat,linear-gradient(#000 0 0) right var(--st) top var(--k)/var(--k) var(--st) no-repeat,radial-gradient(circle at 100% 0,#0000 calc(var(--k) - .5px),#000 var(--k)) right calc(var(--st) - var(--k)) top calc(var(--st) - var(--k))/var(--k) var(--k) no-repeat,linear-gradient(#000 0 0) right var(--k) top var(--st)/calc(var(--st) - var(--k)) var(--k) no-repeat,radial-gradient(circle at 0 100%,#000 calc(var(--k) - .5px),#0000 var(--k)) right 0 top var(--st)/var(--k) var(--k) no-repeat;mask:linear-gradient(#000 0 0) left top/calc(100% - var(--st) - var(--k)) 100% no-repeat,linear-gradient(#000 0 0) left bottom/100% calc(100% - var(--st) - var(--k)) no-repeat,radial-gradient(circle at 0 100%,#000 calc(var(--k) - .5px),#0000 var(--k)) right var(--st) top 0/var(--k) var(--k) no-repeat,linear-gradient(#000 0 0) right var(--st) top var(--k)/var(--k) var(--st) no-repeat,radial-gradient(circle at 100% 0,#0000 calc(var(--k) - .5px),#000 var(--k)) right calc(var(--st) - var(--k)) top calc(var(--st) - var(--k))/var(--k) var(--k) no-repeat,linear-gradient(#000 0 0) right var(--k) top var(--st)/calc(var(--st) - var(--k)) var(--k) no-repeat,radial-gradient(circle at 0 100%,#000 calc(var(--k) - .5px),#0000 var(--k)) right 0 top var(--st)/var(--k) var(--k) no-repeat;
}
.ecke-s,.mtab{--st:var(--ecke-s-stufe);--k:var(--ecke-s-k);--r:var(--ecke-s-r)}
.ecke,.ecke-m,.event{--st:var(--ecke-m-stufe);--k:var(--ecke-m-k);--r:var(--ecke-m-r)}
.ecke-l{--st:var(--ecke-l-stufe);--k:var(--ecke-l-k);--r:var(--ecke-l-r)}
.kante{box-shadow:inset 0 calc(-1 * var(--kante-s)) 0 var(--unten,var(--schwarz))}
.tief{filter:drop-shadow(0 var(--tiefe,var(--kante-m)) 0 var(--unten,var(--schwarz)))}
/* Normale Bausteine: Token-Radius, kein Eckenschnitt (web/sync-tokens.sh) */
:where(.btn,.pille,.regel,.szenario,.podest .karte,.sdw){border-radius:var(--r-knopf)}
:where(.ziel,.konto-box,.leer,.karte){border-radius:var(--r-karte)}