/* brand.css — CRISIO Brand-System "Cream Pop"
   Locked: Creme-BG, Hot-Magenta Held, Tinte als Partner. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --creme:   #F2ECE0;
  --creme-2: #E7DECF;   /* tiefere Fläche / Placeholder */
  --surface: #FFFFFF;
  --ink:     #141118;
  --ink-2:   #2A2630;
  --mag:     #FF3DA6;   /* HELD */
  --mag-d:   #D11385;   /* Magenta auf hellem Grund / Text */
  --shadow-col: #141118; /* Schlagschatten-Farbe (per Tweak überschreibbar) */
  --warm:    #6E685D;   /* Sekundärtext warmgrau */
  --line:    #D8CFBE;
  --white:   #FFFFFF;

  /* ---- Fonts ---- */
  --font-display: 'Anton', sans-serif;
  --font-ui: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* ---- Radien ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Spacing-Skala ---- */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 52px;
  --sp-6: 84px;
  --sp-7: 120px;
}

/* ---------- Wortmarke ---------- */
.k-mark {
  font: 400 var(--ws, 96px)/.78 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .005em;
  color: var(--mag); display: inline-block; transform: rotate(-2.5deg);
  text-shadow: calc(var(--ws,96px)*.055) calc(var(--ws,96px)*.055) 0 var(--ink);
  -webkit-text-stroke: max(2px, calc(var(--ws,96px)*.022)) var(--creme);
}
.k-mark.on-ink { -webkit-text-stroke-color: var(--ink); }

/* ---------- Bausteine ---------- */
.k-kick { font: 700 var(--ks,22px)/1 'Space Mono', monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--mag-d); }
.k-mono { font: 400 18px/1.5 'Space Mono', monospace; letter-spacing: .04em; color: var(--warm); }

.k-pill { font: 700 24px/1 'Space Grotesk', sans-serif; background: var(--mag); color: #fff; padding: 14px 24px; border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.k-pill.ink { background: var(--ink); color: var(--creme); }
.k-pill.ghost { background: transparent; color: var(--ink); border: 2.5px solid var(--ink); }

.k-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.k-dot.live { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: kpulse 1.6s infinite; }
@keyframes kpulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{box-shadow:0 0 0 10px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }

/* Platzhalter (Webcam / Gameplay) */
.k-ph { background-color: var(--creme-2);
  background-image: repeating-linear-gradient(45deg, rgba(20,17,24,.055) 0 14px, transparent 14px 28px);
  display: flex; align-items: center; justify-content: center; }
.k-ph.game { background-color: #18161e;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 16px, transparent 16px 32px); }
.k-ph-label { font: 700 20px/1.5 'Space Mono', monospace; letter-spacing: .22em; text-transform: uppercase; color: #a89e8d; text-align: center; }
.k-ph.game .k-ph-label { color: #5a5560; }

/* Sticker / Stempel */
.k-sticker { font: 700 18px/1 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--creme); padding: 11px 16px; display: inline-block; }
.k-stamp { width: 158px; height: 158px; border-radius: 50%; background: var(--mag); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transform: rotate(-12deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.k-stamp b { font: 700 17px/1 'Space Mono', monospace; letter-spacing: .12em; }
.k-stamp i { font: 400 11px/1.3 'Space Mono', monospace; letter-spacing: .18em; font-style: normal; opacity: .9; }
.k-stamp .k-stamp-rule { width: 60%; height: 2px; background: rgba(255,255,255,.6); margin: 2px 0; }

/* Socials-Leiste */
.k-soc { display: flex; gap: 14px; flex-wrap: wrap; }
.k-soc-item { display: inline-flex; align-items: baseline; gap: 9px; border: 2px solid var(--ink); border-radius: 999px; padding: 10px 18px; }
.k-soc-net { font: 700 15px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; color: var(--ink); }
.k-soc-han { font: 400 15px/1 'Space Mono', monospace; color: var(--warm); }