/* ============================================================
   CrowdWall Fanportal — helles "Liquid Glass" (wie Admin)
   Gleiche Markenwelt wie das Live-Cockpit: vivider Aurora-
   Mesh-Hintergrund, transluzente weisse Glaskarten mit
   Refraktionsrand, Rot nur als Akzent. Mobile-first.
   ============================================================ */

.fp {
  --accent-h: 357; --accent-s: 84%; --accent-l: 52%;
  --accent:        hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-bright: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 8%));
  --accent-deep:   hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 12%));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 9%));
  --accent-glow:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.4);
  --on-accent: #fff;
  /* Beschriftung auf Status-Flächen (--good/--bad): fest weiß — Statusfarben
     folgen dem Event-Akzent nicht, ihre Schrift darf nicht mitkippen (PS-6). */
  --on-status: #fff;

  --good: #34c759; --good-deep: #1e9e43;
  --warn: #ff9f0a; --warn-deep: #9a7100;
  /* Fehler-Rot — folgt bewusst NICHT dem Akzent */
  --bad-rgb: 229, 32, 43;
  --bad:      hsl(357 84% 52%);
  --bad-deep: hsl(357 84% 40%);

  /* ink (text) — light theme */
  --tx-rgb: 26, 32, 48;
  --tx:   rgb(var(--tx-rgb));
  --tx-2: rgba(var(--tx-rgb), 0.64);
  --tx-3: rgba(var(--tx-rgb), 0.45);
  --tx-4: rgba(var(--tx-rgb), 0.28);

  /* white glass surfaces */
  --surf-rgb: 255, 255, 255;
  --line-rgb: 255, 255, 255;
  --surf:    rgba(var(--surf-rgb), 0.32);
  --surf-2:  rgba(var(--surf-rgb), 0.46);
  --surf-hi: rgba(var(--surf-rgb), 0.62);
  --line:    rgba(var(--line-rgb), 0.6);
  --line-hi: rgba(var(--line-rgb), 0.85);

  /* neutrale Trennlinien/Haarlinien (Ink-Blau-Familie) */
  --hairline-rgb: 70, 90, 140;

  /* lensing rim (from admin styles.css) */
  --lens:
    inset 0 1.5px 1px rgba(255,255,255,0.95),
    inset 1.5px 0 1px -0.5px rgba(255,255,255,0.55),
    inset -1.5px 0 1px -0.5px rgba(255,255,255,0.55),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,0.65),
    inset 0 -8px 16px -10px rgba(70,100,170,0.25);
  --shadow-lg: 0 24px 50px rgba(30, 48, 100, 0.18), 0 4px 12px rgba(30, 48, 100, 0.08);
  --shadow-md: 0 10px 24px rgba(30, 48, 100, 0.14), 0 2px 5px rgba(30, 48, 100, 0.07);

  --r-card: 26px; --r-tile: 22px; --r-inner: 16px;
  --blur: 30px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* Aurora-Mesh-Hintergrund + Glanz-Schicht (pro Event übersteuerbar) */
  --fp-bg:
    radial-gradient(52% 58% at 10% 4%,  rgba(70, 144, 255, 0.92), transparent 62%),
    radial-gradient(56% 60% at 90% 0%,  rgba(120, 190, 255, 0.85), transparent 62%),
    radial-gradient(46% 50% at 50% 36%, rgba(168, 200, 255, 0.55), transparent 66%),
    radial-gradient(62% 60% at 92% 88%, rgba(255, 138, 96, 0.85), transparent 60%),
    radial-gradient(58% 60% at 6% 100%, rgba(255, 120, 120, 0.62), transparent 60%),
    linear-gradient(180deg, #d6e6fd 0%, #dee5f1 44%, #f7e7d4 100%);
  --fp-sheen:
    radial-gradient(34% 24% at 38% 16%, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(44% 30% at 52% 100%, rgba(255, 190, 130, 0.5), transparent 66%);
  --fp-sheen-opacity: 0.9;

  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.fp * { box-sizing: border-box; }
.fp button { font-family: inherit; cursor: pointer; }

/* ---------- vivid colour-mesh background (fills the phone) ---------- */
.fp::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fp-bg);
}
.fp::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: var(--fp-sheen-opacity);
  background: var(--fp-sheen);
}

/* ---------- scroll region ---------- */
.fp-scroll {
  position: relative; z-index: 1;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 58px 18px 116px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fp-scroll::-webkit-scrollbar { display: none; }
.fp-stack { display: flex; flex-direction: column; gap: 18px; }

/* ---------- glass card primitive (true lensing glass) ---------- */
.card {
  position: relative;
  background: var(--surf);
  backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.04);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  box-shadow: var(--lens), var(--shadow-lg);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.95), rgba(255,255,255,0.25) 30%,
    rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.55) 85%, rgba(255,255,255,0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card > * { position: relative; z-index: 1; }
.card.pad { padding: 18px; }

/* eyebrow / labels */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); }
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; margin-bottom: -4px; }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.section-head .all { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--accent-strong); background: none; border: none; padding: 4px 2px; }
.section-head .all svg { width: 15px; height: 15px; }

/* ---------- event header ---------- */
.ev-head { display: flex; flex-direction: column; gap: 14px; }
.ev-top { display: flex; align-items: center; gap: 12px; }
.ev-logo { height: 22px; width: auto; }
.ev-top .spacer { flex: 1; }
.icon-pill {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: grid; place-items: center; color: var(--tx);
  background: var(--surf-2);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 4px 12px rgba(30,48,100,0.12);
}
.icon-pill svg { width: 19px; height: 19px; }

.ev-title { font-size: 27px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.ev-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px; }
.ev-meta .m { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx-2); font-weight: 500; }
.ev-meta .m svg { width: 15px; height: 15px; color: var(--tx-3); }

/* live status pill */
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--on-accent); padding: 7px 13px 7px 11px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.4);
}
.live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-accent); box-shadow: 0 0 8px var(--on-accent); animation: fpulse 1.8s ease-in-out infinite; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--good-deep);
  padding: 7px 13px; border-radius: 999px;
  background: rgba(218,250,230,0.6); border: 1px solid rgba(52,199,89,0.3);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 7px rgba(52,199,89,0.7); }

@keyframes fpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- "Jetzt wichtig" hero — white glass, red accent ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-card); padding: 20px;
  background: var(--surf-hi);
  backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.05);
  border: 1px solid transparent;
  box-shadow: var(--lens), 0 20px 44px hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%) / 0.18), 0 4px 12px rgba(30,48,100,0.08);
}
.hero::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.4) 60%, rgba(255,255,255,0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hero > * { position: relative; z-index: 1; }
.hero .glow { position: absolute; right: -50px; top: -55px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--accent-h) var(--accent-s) 60% / 0.5), transparent 70%); z-index: 0; pointer-events: none; }
.hero-kick { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); }
.hero-kick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: fpulse 1.6s ease-in-out infinite; }
.hero-title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; margin: 11px 0 6px; max-width: 14ch; color: var(--tx); }
.hero-sub { font-size: 13.5px; color: var(--tx-2); line-height: 1.4; margin-bottom: 16px; max-width: 30ch; }
.hero-row { display: flex; align-items: center; gap: 12px; }

/* buttons */
.btn-fp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--tx);
  background: rgba(var(--surf-rgb), 0.4);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.95), 0 6px 16px rgba(30,48,100,0.12);
  transition: transform .12s, background .15s;
}
.btn-fp svg { width: 17px; height: 17px; }
.btn-fp:active { transform: scale(0.97); }
.btn-fp.solid {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.4);
}
.btn-fp.light { color: var(--tx); background: rgba(var(--surf-rgb), 0.62); }
.btn-fp.ghost { background: rgba(var(--surf-rgb), 0.34); }
.btn-fp.block { width: 100%; }
.btn-fp.lg { padding: 14px 20px; font-size: 15.5px; }
.hero-meta { font-size: 12.5px; color: var(--tx-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- announcement / Hinweise ---------- */
.ann {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border-radius: var(--r-tile);
  background: rgba(255, 247, 224, 0.62);
  border: 1px solid rgba(255,159,10,0.32);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 8px 20px rgba(30,48,100,0.08);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.ann.info { background: rgba(228, 238, 255, 0.66); border-color: rgba(60,130,255,0.32); }
.ann-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #ffc24d, var(--warn)); box-shadow: 0 4px 12px rgba(255,159,10,0.4), inset 0 1px 1px rgba(255,255,255,0.5); }
.ann.info .ann-ico { background: linear-gradient(180deg, #6fb0ff, #2a6fdb); box-shadow: 0 4px 12px rgba(42,111,219,0.4), inset 0 1px 1px rgba(255,255,255,0.5); }
.ann-ico svg { width: 19px; height: 19px; }
.ann-body { flex: 1; min-width: 0; }
.ann-t { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--tx); }
.ann-s { font-size: 12.5px; color: var(--tx-2); margin-top: 2px; line-height: 1.3; }
.ann-time { font-size: 11.5px; font-weight: 600; color: var(--tx-3); flex: none; }
.ann-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; flex: none; }
.ann-chev { color: var(--tx-3); display: grid; place-items: center; }
.ann-chev svg { width: 18px; height: 18px; }
.ann:active { transform: scale(0.985); }

/* horizontal scroller for notices */
.h-scroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 4px; scroll-padding: 0 18px; }
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }
.h-scroll.snap { scroll-snap-type: x mandatory; }

/* ---------- module tiles ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 15px 16px; border-radius: var(--r-tile); min-height: 104px;
  background: var(--surf);
  backdrop-filter: blur(20px) saturate(190%) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.04);
  border: 1px solid transparent;
  box-shadow: var(--lens), var(--shadow-md);
  transition: transform .12s, box-shadow .15s;
}
.tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tile > * { position: relative; z-index: 1; }
.tile:active { transform: scale(0.975); }
.tile:hover { box-shadow: var(--lens), var(--shadow-lg); }
.tile-ico {
  width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  color: var(--on-accent); background: var(--tint, var(--accent));
  box-shadow: 0 8px 18px -3px var(--tint-glow, var(--accent-glow)), inset 0 1.5px 1px rgba(255,255,255,0.5);
}
.tile-ico svg { width: 21px; height: 21px; }
.tile-name { font-size: 15.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--tx); }
.tile-sub { font-size: 12px; color: var(--tx-2); margin-top: 2px; line-height: 1.3; }
.tile-badge {
  position: absolute; top: 13px; right: 13px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(var(--surf-rgb), 0.6); border: 1px solid rgba(var(--line-rgb), 0.85); color: var(--tx-2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9);
}
.tile-badge.live { color: var(--accent-strong); background: hsl(var(--accent-h) 90% 96% / 0.85); border-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.3); }
.tile-badge.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); animation: fpulse 1.7s ease-in-out infinite; }
.tile-badge.good { color: var(--good-deep); background: rgba(218,250,230,0.8); border-color: rgba(52,199,89,0.3); }
.tile .tile-foot { margin-top: 2px; }

/* wide tile (full-width) */
.tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; gap: 14px; }
.tile.wide .tile-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile.wide .tile-sub { margin-top: 0; }
.tile.wide .chev { color: var(--tx-3); }
.tile.wide .chev svg { width: 20px; height: 20px; }

/* ---------- list rows (Mehr / module list) ---------- */
.row-list { display: flex; flex-direction: column; }
.m-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 6px; background: none; border: none; color: var(--tx);
  border-radius: 14px; transition: background .15s;
}
.m-row + .m-row { border-top: 1px solid rgba(var(--hairline-rgb), 0.14); }
.m-row:hover { background: rgba(var(--surf-rgb), 0.4); }
.m-row .tile-ico { width: 38px; height: 38px; border-radius: 11px; }
.m-row .tile-ico svg { width: 19px; height: 19px; }
.m-row .rr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-row .rn { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.m-row .rs { font-size: 12.5px; color: var(--tx-2); }
.m-row .chev { color: var(--tx-3); flex: none; }
.m-row .chev svg { width: 19px; height: 19px; }

/* ---------- language toggle ---------- */
.lang-tog {
  display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surf); border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
}
.lt-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--tx-3); padding: 5px 9px; border-radius: 999px; line-height: 1;
  transition: color .15s, background .15s, box-shadow .15s;
}
.lt-btn.on {
  color: var(--tx); background: var(--surf-hi);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 2px 6px rgba(30,48,100,0.12);
}

/* ---------- sub-page header (Glas-Leiste) ---------- */
.sub-head {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 999px; margin-bottom: 4px;
  background: var(--surf-2); border: 1px solid var(--line);
  box-shadow: var(--lens), 0 10px 26px rgba(30,48,100,0.12);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}
.sh-back {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: grid; place-items: center; color: var(--tx);
  background: var(--surf-hi); border: 1px solid var(--line-hi);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9);
}
.sh-back svg { width: 20px; height: 20px; }
.sh-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- sub-page header (alt) ---------- */
.page-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.page-top .back {
  width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center;
  color: var(--tx); background: var(--surf-2); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 4px 12px rgba(30,48,100,0.1);
}
.page-top .back svg { width: 20px; height: 20px; }
.page-top .pt-tt { flex: 1; min-width: 0; }
.page-top h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.page-top .pt-sub { font-size: 12.5px; color: var(--tx-2); margin-top: 1px; }

/* module hero banner on sub-pages — tinted white glass */
.mod-hero {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 12px;
  background: color-mix(in oklab, var(--tint) 14%, rgba(var(--surf-rgb), 0.5));
  backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.05);
  border: 1px solid color-mix(in oklab, var(--tint) 30%, rgba(var(--line-rgb), 0.7));
  box-shadow: var(--lens), 0 18px 40px rgba(30,48,100,0.16);
}
.mod-hero .glow { position: absolute; right: -34px; top: -44px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, var(--tint-glow, var(--accent-glow)), transparent 70%); pointer-events: none; z-index: 0; }
.mod-hero > * { position: relative; z-index: 1; }
.mod-hero .mh-ico {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--on-accent); background: var(--tint); box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 10px 22px var(--tint-glow);
}
.mod-hero .mh-ico svg { width: 26px; height: 26px; }
.mod-hero h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--tx); }
.mod-hero p { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.45; max-width: 32ch; }

/* ---------- module sub-page: caption + functional previews ---------- */
.mod-cap {
  margin: -2px 2px 2px; font-size: 13.5px; line-height: 1.45; color: var(--tx-2);
  max-width: 34ch; padding-left: 11px; border-left: 2.5px solid var(--tint, var(--accent));
}

/* Programm */
.tt-list { display: flex; flex-direction: column; }
.tt-row { display: flex; align-items: center; gap: 13px; padding: 12px 2px; }
.tt-row + .tt-row { border-top: 1px solid rgba(var(--hairline-rgb), 0.13); }
.tt-time { width: 46px; flex: none; font-size: 13.5px; font-weight: 700; color: var(--tx-2);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tint, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint, var(--accent)) 22%, transparent); }
.tt-name { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.tt-row.live .tt-name { font-weight: 700; }
.live-pill.sm { padding: 4px 7px; font-size: 10px; }
.live-pill.sm .dot { margin: 0; }

/* Voting */
.vote-row {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px;
  background: rgba(var(--surf-rgb), 0.42); border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7); cursor: pointer;
  transition: transform .12s;
}
.vote-row:active { transform: scale(0.985); }
.vote-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--tint, var(--accent)) 20%, transparent); }
.vote-name { position: relative; z-index: 1; flex: 1; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.vote-pct { position: relative; z-index: 1; font-size: 14px; font-weight: 750; color: var(--tx);
  font-variant-numeric: tabular-nums; }

/* Karte */
.map-panel {
  position: relative; overflow: hidden; height: 210px; border-radius: var(--r-card);
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(20,184,166,0.10), transparent 60%),
    linear-gradient(160deg, #dbe7ec, #c6d6dd);
  border: 1px solid var(--line); box-shadow: var(--lens), 0 14px 30px rgba(30,48,100,0.14);
}
.map-grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1.5px, transparent 1.5px),
    linear-gradient(rgba(120,140,160,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,160,0.16) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px; }
.map-pin { position: absolute; transform: translate(-50%, -100%); z-index: 1;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 5px; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: var(--tx); font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 6px 14px rgba(30,48,100,0.22), inset 0 1px 1px #fff; white-space: nowrap; }
.map-pin svg { width: 13px; height: 13px; color: var(--tint, var(--accent)); }
.map-cta { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }

/* Partner */
.sponsor-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px; text-align: center; }
.sp-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--tx);
  background: rgba(var(--surf-rgb), 0.7); box-shadow: inset 0 1px 1px #fff, 0 6px 14px rgba(30,48,100,0.1); }
.sp-name { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.sp-tier { font-size: 11.5px; font-weight: 600; color: var(--tx-3); }

/* Scan-Fallback (Quiz u. ä. an der Wall) */
.scan-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 22px; text-align: center; }
.scan-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--on-accent);
  background: var(--tint, var(--accent)); box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5),
  0 12px 26px color-mix(in srgb, var(--tint, var(--accent)) 45%, transparent); }
.scan-ico svg { width: 30px; height: 30px; }
.scan-hint { font-size: 13.5px; color: var(--tx-2); max-width: 26ch; line-height: 1.45; }

/* ---------- bottom navigation ---------- */
.fp-nav {
  position: relative; z-index: 5; flex: none;
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 9px 10px calc(env(safe-area-inset-bottom, 0px) + 26px);
  background: rgba(var(--surf-rgb), 0.5);
  border-top: 1px solid rgba(var(--line-rgb), 0.7);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.6), 0 -10px 30px rgba(30,48,100,0.1);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; padding: 5px 2px 2px; color: var(--tx-3);
  transition: color .15s;
}
.nav-btn svg { width: 23px; height: 23px; }
.nav-btn .nl { font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; }
.nav-btn.on { color: var(--tx); }
.nav-btn.on svg { color: var(--accent); filter: drop-shadow(0 1px 5px var(--accent-glow)); }
.nav-btn .nav-ico { position: relative; }
.nav-btn .ndot { position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 7px var(--accent); border: 1.5px solid rgba(var(--line-rgb), 0.8); }

/* small helpers */
.muted { color: var(--tx-2); }
.tiny { font-size: 12px; }
.divider { height: 1px; background: rgba(var(--hairline-rgb), 0.14); border: none; margin: 2px 0; }
.stat-inline { display: flex; gap: 18px; }
.stat-inline .s .v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-inline .s .k { font-size: 11.5px; color: var(--tx-2); margin-top: 1px; }

/* ---------- live / matchcenter ---------- */
.st-card, .pt-card, .tl-card, .ld-card { padding: 16px 18px; }
.live-cap {
  font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: 12px;
}

/* sport switcher */
.sport-switch {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sport-switch::-webkit-scrollbar { display: none; }
.sport-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--tx-2);
  background: var(--surf); border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7); transition: color .15s, background .15s, box-shadow .15s;
}
.sport-chip svg { width: 17px; height: 17px; }
.sport-chip.on {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 8px 18px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.4);
}

/* team scoreboard */
.sb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 20px 16px; }
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.sb-crest {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--on-accent);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.45), 0 8px 18px rgba(30,48,100,0.18);
}
.sb-crest.home { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); }
.sb-crest.away { background: linear-gradient(180deg, #8493ad, #5b6b86); }
.sb-name { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: var(--tx);
  text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sb-score { display: flex; align-items: baseline; gap: 9px; font-size: 40px; font-weight: 750;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tx); line-height: 1; }
.sb-colon { font-size: 26px; font-weight: 600; color: var(--tx-3); }

/* tennis scoreboard */
.ts { padding: 14px 16px 16px; }
.ts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ts-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750;
  letter-spacing: 0.04em; color: var(--tx-2); text-transform: uppercase; }
.ts-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.ts-cols { display: inline-flex; align-items: center; gap: 0; }
.ts-cols > span { width: 26px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--tx-3); }
.ts-cols .ts-pts-h { width: 36px; }
.ts-row { display: flex; align-items: center; gap: 9px; padding: 11px 0; }
.ts-row + .ts-row { border-top: 1px solid rgba(var(--hairline-rgb), 0.13); }
.ts-serve-dot { width: 16px; flex: none; color: var(--accent); display: grid; place-items: center; }
.ts-serve-dot svg { width: 15px; height: 15px; }
.ts-name { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ts-flag { font-size: 11px; font-weight: 700; color: var(--tx-3); letter-spacing: 0.03em; }
.ts-sets { display: inline-flex; align-items: center; gap: 0; }
.ts-set { width: 26px; text-align: center; font-size: 15px; font-weight: 650; color: var(--tx-2);
  font-variant-numeric: tabular-nums; }
.ts-set.win { color: var(--tx); font-weight: 800; }
.ts-pts { width: 36px; text-align: center; font-size: 15px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; }

/* stat comparison bars */
.st-row { padding: 9px 0; }
.st-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.st-val { font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--tx); }
.st-label { font-size: 12.5px; font-weight: 600; color: var(--tx-2); letter-spacing: -0.01em; }
.st-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; gap: 2px; }
.st-fill-h { background: linear-gradient(90deg, var(--accent-bright), var(--accent)); border-radius: 999px 3px 3px 999px; }
.st-fill-a { background: linear-gradient(90deg, #8493ad, #6b7c9b); border-radius: 3px 999px 999px 3px; }

/* period table */
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table th { font-size: 11px; font-weight: 700; color: var(--tx-3); padding: 4px 0 9px; text-align: center; }
.pd-table th.tot { color: var(--tx-2); }
.pd-table td { font-size: 14.5px; font-weight: 650; color: var(--tx-2); padding: 7px 0; text-align: center;
  font-variant-numeric: tabular-nums; }
.pd-table td.tot { font-weight: 800; color: var(--tx); }
.pd-table tbody tr + tr td { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.pd-team { display: flex; align-items: center; gap: 8px; font-weight: 800 !important; color: var(--tx) !important; }
.pd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pd-dot.home { background: var(--accent); }
.pd-dot.away { background: #6b7c9b; }

/* goal timeline */
.tl { display: flex; flex-direction: column; gap: 9px; }
.tl-row { display: flex; align-items: center; gap: 10px; max-width: 72%; }
.tl-row.home { align-self: flex-start; }
.tl-row.away { align-self: flex-end; flex-direction: row-reverse; }
.tl-name { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.tl-min { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 3px 8px;
  border-radius: 999px; color: var(--on-accent); }
.tl-row.home .tl-min { background: var(--accent); box-shadow: 0 3px 8px var(--accent-glow); }
.tl-row.away .tl-min { background: #6b7c9b; box-shadow: 0 3px 8px rgba(107,124,155,0.4); }

/* leaders */
.ld-grid { display: flex; flex-direction: column; gap: 12px; }
.ld-row { display: flex; align-items: center; gap: 12px; }
.ld-av { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: var(--on-accent); }
.ld-av.home { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); }
.ld-av.away { background: linear-gradient(180deg, #8493ad, #5b6b86); }
.ld-rr { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ld-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.ld-note { font-size: 12px; color: var(--tx-3); }
.ld-val { font-size: 20px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }

/* ---------- lauf / running ---------- */
.rc-head { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.rc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rc-row .live-pill { flex: 0 0 auto; white-space: nowrap; }
.rc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-name { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-dist { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--tx-3); }
.rc-dist svg { width: 13px; height: 13px; }
.rc-clock { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 4px 0 2px; }
.rc-clock svg { width: 19px; height: 19px; color: var(--accent); }
.rc-clock b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--tx);
  font-variant-numeric: tabular-nums; line-height: 1; }
.rc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px;
  border-radius: 13px; background: var(--surf); border: 1px solid var(--line); }
.rc-stat b { font-size: 16px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }
.rc-stat span { font-size: 10.5px; font-weight: 600; color: var(--tx-3); letter-spacing: 0.01em; text-align: center; }
.cat-switch { margin-top: 2px; }

/* live-rangliste */
.lb-card { padding: 4px 10px 8px; }
.lb-head { display: grid; grid-template-columns: 30px 1fr 52px 56px; align-items: center; gap: 10px;
  padding: 11px 4px 9px; }
.lb-head span { font-size: 10px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); }
.lb-h-name { text-align: left; }
.lb-h-gap, .lb-h-time { text-align: right; }
.lb-row { display: grid; grid-template-columns: 30px 1fr 52px 56px; align-items: center; gap: 10px;
  padding: 9px 4px; border-radius: 11px; }
.lb-row + .lb-row { border-top: 1px solid rgba(var(--hairline-rgb), 0.10); }
.lb-row.podium { background: linear-gradient(90deg, var(--accent-glow), transparent 70%); }
.lb-pos { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--tx-2); background: var(--surf); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
.lb-pos.p1 { background: linear-gradient(180deg, #ffd75e, #e8a900); color: #5a3e00; border-color: transparent;
  box-shadow: 0 4px 10px rgba(232,169,0,0.32); }
.lb-pos.p2 { background: linear-gradient(180deg, #e6edf5, #aab6c6); color: #38414f; border-color: transparent; }
.lb-pos.p3 { background: linear-gradient(180deg, #e9b27c, #c07f43); color: #4a2a06; border-color: transparent; }
.lb-rr { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tx-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bib { font-weight: 750; color: var(--accent); flex: none; }
.lb-gap { text-align: right; font-size: 13px; font-weight: 650; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.lb-time { text-align: right; font-size: 14.5px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }

/* zwischenzeiten */
.sp-card { padding: 16px 18px; }
.sp-leader { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: var(--tx); margin-bottom: 11px; }
.sp-leader svg { width: 15px; height: 15px; color: var(--accent); }
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th { font-size: 10px; font-weight: 700; color: var(--tx-3); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0 0 9px; text-align: right; }
.sp-table th:first-child { text-align: left; }
.sp-table td { font-size: 14px; font-weight: 650; color: var(--tx-2); padding: 8px 0; text-align: right;
  font-variant-numeric: tabular-nums; }
.sp-table td.sp-cp { text-align: left; font-weight: 750; color: var(--tx); }
.sp-table tbody tr + tr td { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.sp-table tr.pending td { color: var(--tx-3); }

/* ---------- programm / timetable ---------- */
.pg-list { padding: 6px 16px; }
.pg-act {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: none; border: none; padding: 13px 2px; position: relative;
}
.pg-act + .pg-act { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.pg-act.done { opacity: 0.5; }
.pg-time { width: 46px; flex: none; display: flex; flex-direction: column; line-height: 1.2; }
.pg-time b { font-size: 14px; font-weight: 750; color: var(--tx); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pg-time span { font-size: 11px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pg-rail { width: 12px; flex: none; display: grid; place-items: center; align-self: stretch; }
.pg-node { width: 9px; height: 9px; border-radius: 50%; background: rgba(120,140,170,0.45); }
.pg-act.live .pg-node { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.pg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-genre { font-size: 12.5px; color: var(--tx-2); font-weight: 600; }
.pg-status {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.pg-status.live { color: var(--on-accent); background: var(--accent); box-shadow: 0 4px 10px var(--accent-glow); }
.pg-status.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-accent); box-shadow: 0 0 6px var(--on-accent);
  animation: fpulse 1.8s ease-in-out infinite; }
.pg-status.next { color: var(--tx-2); background: rgba(120,140,170,0.18); }
.pg-status.done { color: var(--tx-3); background: rgba(120,140,170,0.14); }
.pg-dots { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  color: var(--tx-3); background: rgba(var(--surf-rgb), 0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.7); }
.pg-dots svg { width: 18px; height: 18px; }
.pg-act:active .pg-dots { background: rgba(var(--surf-rgb), 0.8); }

/* ---------- artist detail sheet (portal in .fp) ---------- */
.sheet-wrap { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20,30,55,0.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: sheetfade .22s ease both; }
.sheet {
  position: relative; width: 100%; z-index: 1;
  padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex; flex-direction: column; gap: 16px;
  border-radius: 28px 28px 0 0;
  background: rgba(var(--surf-rgb), 0.72);
  border-top: 1px solid rgba(var(--line-rgb), 0.85);
  box-shadow: 0 -16px 40px rgba(30,48,100,0.22);
  backdrop-filter: blur(36px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.06);
  animation: sheetup .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sheetfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 40px; height: 5px; border-radius: 999px; background: rgba(80,100,140,0.3);
  align-self: center; margin-bottom: 2px; }
.sheet-close { position: absolute; top: 16px; right: 18px; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; color: var(--tx-2); border: none;
  background: rgba(var(--surf-rgb), 0.7); box-shadow: inset 0 1px 1px rgba(255,255,255,0.8); }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-head { display: flex; align-items: center; gap: 14px; }
.sheet-av { width: 56px; height: 56px; border-radius: 18px; flex: none; display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.45), 0 10px 22px var(--accent-glow); }
.sheet-htext { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sheet-name { font-size: 21px; font-weight: 750; letter-spacing: -0.03em; color: var(--tx); }
.sheet-genre { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--tx-2);
  padding: 3px 10px; border-radius: 999px; background: rgba(120,140,170,0.16); }
.sheet-meta { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--hairline-rgb), 0.14); }
.sheet-meta-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--tx); }
.sheet-meta-row svg { width: 17px; height: 17px; color: var(--tx-3); flex: none; }
.sheet-bio p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tx-2); }

/* view toggle (Liste / Timeline) */
.pg-view {
  display: flex; gap: 3px; padding: 3px; border-radius: 999px; align-self: flex-start;
  background: var(--surf); border: 1px solid var(--line); box-shadow: inset 0 1px 1px rgba(255,255,255,0.7);
}
.pg-view-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: none; background: none; cursor: pointer; color: var(--tx-3);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; transition: color .15s, background .15s, box-shadow .15s;
}
.pg-view-btn svg { width: 15px; height: 15px; }
.pg-view-btn.on { color: var(--tx); background: var(--surf-hi);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 2px 6px rgba(30,48,100,0.12); }

/* timeline view */
.pg-tl { display: flex; flex-direction: column; }
.pg-tl-item { display: grid; grid-template-columns: 42px 22px 1fr; align-items: start; }
.pg-tl-time { padding-top: 14px; text-align: right; }
.pg-tl-time b { font-size: 13.5px; font-weight: 750; color: var(--tx); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pg-tl-rail { position: relative; align-self: stretch; display: flex; justify-content: center; }
.pg-tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(var(--hairline-rgb), 0.16); }
.pg-tl-item:first-child .pg-tl-rail::before { top: 18px; }
.pg-tl-item:last-child .pg-tl-rail::before { bottom: calc(100% - 18px); }
.pg-tl-dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; margin-top: 13px;
  background: #fff; border: 2.5px solid rgba(120,140,170,0.5); box-sizing: border-box; }
.pg-tl-item.live .pg-tl-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.pg-tl-item.done { opacity: 0.5; }
.pg-tl-card { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  margin: 0 0 12px 4px; padding: 13px 44px 13px 15px; }
.pg-tl-head { display: flex; align-items: center; gap: 9px; }
.pg-tl-sub { font-size: 12.5px; color: var(--tx-2); font-weight: 600; }
.pg-tl-card .pg-dots { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }

/* ============================================================
   Karte / Festivalgelände
   ============================================================ */
.fpmap-filter .sport-chip { padding: 9px 13px; }
.fpmap-filter .cdot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.fpmap-filter .sport-chip.on .cdot { background: rgba(255,255,255,0.9) !important; }

.fpmap.card { padding: 0; overflow: hidden; }
.fpmap-canvas {
  position: relative; width: 100%; aspect-ratio: 6 / 5;
  background: #e9ebef; overflow: hidden; isolation: isolate;
}
.fpmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Event-Bildkarte: Hintergrund im natürlichen Seitenverhältnis, Pins prozentual darauf */
.fpmap-imgcanvas { position: relative; width: 100%; background: #e9ebef; line-height: 0; overflow: hidden; isolation: isolate; }
.fpmap-img { width: 100%; height: auto; display: block; }

/* Pins */
.fpmap-pin {
  position: absolute; transform: translate(-50%, -100%); z-index: 3;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.fpmap-marker {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--tint, var(--accent)); border: 2px solid #fff;
  box-shadow: 0 5px 12px rgba(20,32,64,0.32), inset 0 1px 1px rgba(255,255,255,0.4);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}
.fpmap-marker::after {
  content: ""; position: absolute; bottom: -3.5px; left: 50%;
  width: 9px; height: 9px; background: var(--tint, var(--accent));
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 2px;
}
.fpmap-marker svg { width: 16px; height: 16px; }
.fpmap-pin:active { transform: translate(-50%, -100%) scale(0.94); }
.fpmap-pin.on { z-index: 6; }
.fpmap-pin.on .fpmap-marker { transform: scale(1.16);
  box-shadow: 0 8px 18px rgba(20,32,64,0.4), 0 0 0 4px color-mix(in srgb, var(--tint) 28%, transparent), inset 0 1px 1px rgba(255,255,255,0.4); }
.fpmap-pin.dim { opacity: 0.32; filter: saturate(0.7); }
.fpmap-pin.dim .fpmap-marker { box-shadow: 0 3px 7px rgba(20,32,64,0.22); }

.fpmap-plabel {
  margin-bottom: 5px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; font-weight: 750; letter-spacing: -0.01em; color: var(--tx);
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.96);
  box-shadow: 0 5px 12px rgba(20,32,64,0.2), inset 0 1px 1px #fff;
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .14s, transform .14s;
}
.fpmap-pin.on .fpmap-plabel { opacity: 1; transform: translateY(0); }

/* Du bist hier */
.fpmap-you { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.fpmap-you b { display: block; width: 16px; height: 16px; border-radius: 50%;
  background: #2a7fff; border: 3px solid #fff; box-shadow: 0 2px 7px rgba(20,50,120,0.5); }
.fpmap-you i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(42,127,255,0.28); }
.fpmap-you .r1 { animation: youpulse 2.4s ease-out infinite; }
.fpmap-you .r2 { animation: youpulse 2.4s ease-out 1.2s infinite; }
@keyframes youpulse { 0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0.75; }
  100% { transform: translate(-50%,-50%) scale(3.6); opacity: 0; } }

/* Maßstab + Standort-Button */
.fpmap-scale { position: absolute; left: 12px; bottom: 12px; z-index: 4;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em; color: var(--tx-2);
  background: rgba(255,255,255,0.8); padding: 4px 7px 5px; border-radius: 8px;
  box-shadow: 0 3px 8px rgba(20,32,64,0.14); }
.fpmap-scale .bar { display: block; height: 3px; width: 44px; margin-top: 3px;
  border-radius: 2px; background: var(--tx-2);
  border-left: 2px solid var(--tx-2); border-right: 2px solid var(--tx-2);
  box-sizing: border-box; }
.fpmap-locate {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  color: var(--accent-strong); background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 6px 16px rgba(20,40,90,0.2);
  transition: transform .12s, color .15s;
}
.fpmap-locate svg { width: 21px; height: 21px; }
.fpmap-locate:active { transform: scale(0.92); }
.fpmap-locate.on { color: #2a7fff; }

/* Fußzeile unter der Karte */
.fpmap-foot { display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  border-top: 1px solid rgba(var(--hairline-rgb), 0.14); font-size: 13px; font-weight: 600; color: var(--tx); }
.fpmap-foot-meta { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--good-deep);
  display: inline-flex; align-items: center; gap: 6px; }
.fpmap-foot-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 7px rgba(52,199,89,0.7); }
.fpmap-you-dot { width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: #2a7fff; border: 2.5px solid #fff; box-shadow: 0 0 0 3px rgba(42,127,255,0.22), 0 2px 5px rgba(20,50,120,0.35); }

/* Sheet: Icon-Avatar + Aktionsreihe */
.fpmap-av svg { width: 26px; height: 26px; }
.fpmap-actions { display: flex; gap: 10px; }
.fpmap-actions .btn-fp.block { flex: 1; }
.fpmap-actions .btn-fp.light { flex: none; width: 50px; padding: 12px 0; }

/* ============================================================
   Voting / Live-Abstimmungen
   ============================================================ */
.vpoll { display: flex; flex-direction: column; gap: 15px; }
.vpoll-head { display: flex; flex-direction: column; gap: 10px; }
.vpoll-q { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; color: var(--tx); }
.vpoll-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.v-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750;
  letter-spacing: 0.01em; padding: 5px 11px; border-radius: 999px; }
.v-pill svg { width: 13px; height: 13px; }
.v-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v-pill.open { color: var(--accent-strong); background: color-mix(in srgb, var(--tint) 16%, rgb(var(--surf-rgb)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 28%, transparent); }
.v-pill.open .dot { background: var(--tint); box-shadow: 0 0 8px var(--tint); animation: fpulse 1.6s ease-in-out infinite; }
.v-pill.wall { color: var(--on-accent); background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 5px 13px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.4); }
.v-pill.done { color: var(--tx-2); background: rgba(120,140,170,0.16); }

.vpoll-opts { display: flex; flex-direction: column; gap: 9px; }
.vote-row.v2 { padding: 14px 15px; cursor: pointer; }
.vote-row.v2[disabled] { cursor: default; }
.vote-row.v2 .v-check { position: relative; z-index: 1; width: 21px; height: 21px; flex: none; border-radius: 999px;
  display: grid; place-items: center; color: var(--on-accent); background: transparent;
  box-shadow: inset 0 0 0 2px rgba(var(--hairline-rgb), 0.28); transition: background .18s, box-shadow .18s; }
.vote-row.v2 .v-check svg { width: 13px; height: 13px; }
.vote-row.v2.chosen .v-check { background: var(--tint, var(--accent)); box-shadow: none; }
.vote-row.v2 .vote-fill { background: color-mix(in srgb, var(--tint, var(--accent)) 16%, transparent);
  transition: width .55s cubic-bezier(.22,1,.36,1); }
.vote-row.v2.chosen { box-shadow: var(--lens), 0 8px 20px rgba(30,48,100,0.12), inset 0 0 0 1.5px var(--tint); }
.vote-row.v2.lead .vote-fill { background: color-mix(in srgb, var(--tint, var(--accent)) 26%, transparent); }
.vote-row.v2.lead .v-check { background: var(--tint); box-shadow: none; }
.vote-row.v2.lead.reveal:not(.chosen) .vote-name { font-weight: 750; }

.vpoll-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 3px; }
.vpoll-total { font-size: 12.5px; font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.vpoll-note { font-size: 12.5px; font-weight: 650; color: var(--tx-3); }
.vpoll-note.ok { color: var(--good-deep); }

/* gemeinsamer Empty-State */
.fp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 24px; }
.fp-empty-ico { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; color: var(--tx-3);
  background: rgba(var(--surf-rgb), 0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 6px 14px rgba(30,48,100,0.1); }
.fp-empty-ico svg { width: 27px; height: 27px; }
.fp-empty b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx); }
.fp-empty-sub { font-size: 13px; color: var(--tx-2); line-height: 1.45; max-width: 28ch; }
.fp-empty .btn-fp { margin-top: 4px; }

/* ============================================================
   Fotos
   ============================================================ */
.ph-upload { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 20px; }
.ph-up-ico { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 12px 24px rgba(124,58,237,0.35); }
.ph-up-ico svg { width: 27px; height: 27px; }
.ph-up-tt { display: flex; flex-direction: column; gap: 5px; }
.ph-up-tt b { font-size: 17px; font-weight: 750; letter-spacing: -0.025em; color: var(--tx); }
.ph-up-tt span { font-size: 13px; color: var(--tx-2); line-height: 1.45; max-width: 30ch; }
.ph-upload .btn-fp { margin-top: 4px; }

/* Live-Strip */
.ph-strip-wrap { display: flex; flex-direction: column; gap: 9px; }
.ph-strip-cap { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750;
  letter-spacing: 0.02em; color: var(--tx-2); padding: 0 2px; }
.live-pill.sm-dot { padding: 5px; gap: 0; }
.live-pill.sm-dot .dot { width: 6px; height: 6px; }
.ph-strip { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ph-strip::-webkit-scrollbar { display: none; }
.ph-strip-item { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 15px; overflow: hidden; padding: 0;
  border: 2px solid #fff; background: none; cursor: pointer;
  box-shadow: 0 6px 14px rgba(30,48,100,0.18); transition: transform .12s; }
.ph-strip-item:active { transform: scale(0.95); }
.ph-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Galerie-Grid */
.ph-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ph-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-tile); padding: 0;
  border: none; cursor: pointer; background: rgba(var(--surf-rgb), 0.3); transition: transform .14s; }
.ph-item:active { transform: scale(0.975); }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-badge-wall { position: absolute; top: 9px; right: 9px; z-index: 2; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center; background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 4px 10px var(--accent-glow); }
.ph-badge-wall .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff;
  animation: fpulse 1.8s ease-in-out infinite; }
.ph-ov { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; padding: 16px 11px 9px;
  background: linear-gradient(transparent, rgba(15,22,45,0.62)); }
.ph-ov-by { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.ph-ov-like { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 750; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.ph-ov-like svg { width: 14px; height: 14px; }
.ph-ov-like.on { color: #ffd34d; }
.ph-ov-like.on svg { fill: #ffd34d; }

/* Meine Uploads — Liste */
.ph-mine .ph-mine-thumb { position: relative; width: 46px; height: 46px; border-radius: 12px; flex: none;
  background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(var(--hairline-rgb), 0.12); overflow: hidden; }
.ph-mine-spin { position: absolute; inset: 0; background: rgba(20,28,50,0.42); }
.ph-mine-spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.45); border-top-color: #fff; animation: phspin 0.8s linear infinite; }
@keyframes phspin { to { transform: rotate(360deg); } }
.ph-status { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 750;
  padding: 5px 11px; border-radius: 999px; }
.ph-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.ph-status.pending { color: var(--warn-deep); background: rgba(255,159,10,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,159,10,0.3); }
.ph-status.rejected { color: var(--bad-deep); background: rgba(var(--bad-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--bad-rgb), 0.28); }
.ph-status.wall { color: var(--on-status); background: linear-gradient(180deg, var(--good), var(--good-deep));
  box-shadow: 0 4px 11px rgba(52,199,89,0.32); }

/* Lightbox */
.ph-light { position: relative; border-radius: 20px; overflow: hidden; margin-top: 4px;
  box-shadow: 0 18px 40px rgba(20,32,64,0.28); }
.ph-light img { width: 100%; max-height: 46vh; object-fit: cover; display: block; }
.ph-wall-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; color: var(--on-accent); padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); box-shadow: 0 6px 16px var(--accent-glow); }
.ph-wall-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-accent); box-shadow: 0 0 7px var(--on-accent);
  animation: fpulse 1.8s ease-in-out infinite; }
.ph-light-bar { display: flex; align-items: center; gap: 12px; padding: 16px 2px 2px; }
.ph-av { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #a78bfa, #7c3aed);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 8px 18px rgba(124,58,237,0.3); }
.ph-light-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-by { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); }
.ph-at { font-size: 12.5px; color: var(--tx-2); }
.ph-like-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 750;
  color: var(--tx); padding: 10px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--surf-rgb), 0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.9);
  transition: transform .12s, color .15s; }
.ph-like-btn svg { width: 17px; height: 17px; }
.ph-like-btn:active { transform: scale(0.94); }
.ph-like-btn.on { color: #e8a200; }
.ph-like-btn.on svg { fill: #f5b30a; color: #f5b30a; }

/* ============================================================
   Quiz (Live-Mitspiel)
   ============================================================ */
.quiz { --qz: #F59E0B; --qz-deep: #b9760a; display: flex; flex-direction: column; gap: 14px; }
.qz-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.qz-prog { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); }
.qz-prog i { font-style: normal; font-weight: 600; color: var(--tx-3); }
.qz-score { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800;
  color: var(--qz-deep); padding: 6px 12px 6px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: rgba(245,158,11,0.14); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.28); }
.qz-score svg { width: 15px; height: 15px; fill: var(--qz); color: var(--qz); }

/* Fortschritts-Punkte */
.qz-dots { display: flex; gap: 7px; padding: 0 2px; }
.qz-dot { flex: 1; height: 5px; border-radius: 999px; background: rgba(var(--hairline-rgb), 0.16); transition: background .2s; }
.qz-dot.cur { background: var(--qz); box-shadow: 0 0 9px rgba(245,158,11,0.6); }
.qz-dot.past.ok { background: var(--good); }
.qz-dot.past.no { background: var(--accent); }

/* Frage-Bühne */
.qz-stage { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.qz-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.qz-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--qz-deep);
  padding: 6px 12px; border-radius: 999px; background: rgba(245,158,11,0.14);
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.28); }
.qz-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qz); box-shadow: 0 0 8px var(--qz);
  animation: fpulse 1.6s ease-in-out infinite; }
.qz-q { font-size: 21px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.22; color: var(--tx);
  text-wrap: pretty; }

/* Timer-Ring */
.qz-timer { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.qz-timer svg { position: absolute; inset: 0; }
.qz-timer b { position: relative; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Auflösungs-Pill */
.qz-result-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800;
  padding: 8px 14px; border-radius: 999px; color: var(--on-accent); }
.qz-result-pill svg { width: 15px; height: 15px; }
.qz-result-pill.ok { background: linear-gradient(180deg, var(--good), var(--good-deep));
  box-shadow: 0 6px 15px rgba(52,199,89,0.32); }
.qz-result-pill.no { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 6px 15px var(--accent-glow); }

/* Antwort-Optionen */
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 15px; border-radius: var(--r-inner); border: 1px solid var(--line); color: var(--tx);
  background: var(--surf-2); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 6px 16px rgba(30,48,100,0.09);
  transition: transform .12s, box-shadow .18s, background .18s; }
.qz-opt:not([disabled]):active { transform: scale(0.985); }
.qz-opt:not([disabled]):hover { box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 8px 20px rgba(30,48,100,0.14); }
.qz-letter { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: var(--qz-deep); background: rgba(245,158,11,0.16);
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.26); transition: color .18s, background .18s; }
.qz-atext { flex: 1; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.qz-mark { width: 24px; height: 24px; flex: none; border-radius: 999px; display: grid; place-items: center; color: var(--on-accent); }
.qz-mark svg { width: 14px; height: 14px; }
.qz-mark.ok { background: var(--good); }
.qz-mark.no { background: var(--accent); }

.qz-opt.right { background: rgba(52,199,89,0.14); box-shadow: inset 0 0 0 1.5px var(--good), 0 8px 20px rgba(52,199,89,0.18); }
.qz-opt.right .qz-letter { color: var(--on-status); background: var(--good); box-shadow: none; }
.qz-opt.wrong { background: rgba(var(--bad-rgb), 0.1); box-shadow: inset 0 0 0 1.5px var(--bad), 0 8px 20px rgba(var(--bad-rgb), 0.14); }
.qz-opt.wrong .qz-letter { color: var(--on-status); background: var(--bad); box-shadow: none; }
.qz-opt.dim { opacity: 0.5; }

/* Ergebnis */
.qz-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 22px; }
.qz-trophy { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; margin-bottom: 4px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 14px 28px rgba(217,119,6,0.4); }
.qz-trophy svg { width: 32px; height: 32px; }
.qz-result-t { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--tx-2); }
.qz-score-big { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--tx);
  font-variant-numeric: tabular-nums; }
.qz-score-big span { font-size: 17px; font-weight: 700; color: var(--tx-3); letter-spacing: -0.02em; }
.qz-correct { font-size: 14px; font-weight: 650; color: var(--good-deep); }
/* Finale: erreichter Platz gross als Held + Gold-Pokal fuer den Sieger */
.qz-finale-place { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--qz-deep); font-variant-numeric: tabular-nums; }
.qz-finale-place small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx-2); margin-bottom: 6px; }
.qz-finale-place span { font-size: 18px; font-weight: 700; color: var(--tx-3); letter-spacing: -0.02em; }
.qz-trophy.gold { background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 10px 26px rgba(217,119,6,0.42); }

/* Rangliste */
.qz-board { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
/* Vollbild-Rangliste (Zwischenstand, vom Operator freigegeben) */
.qz-lb-screen { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 178px); }
.qz-lb-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; text-align: center; color: var(--tx); }
.qz-lb-screen .qz-board { flex: 1; gap: 5px; margin-top: 4px; }
.qz-lb-screen .qz-rank { padding: 14px 12px; }
.qz-lb-screen .qz-av { width: 40px; height: 40px; font-size: 15px; }
.qz-lb-screen .qz-pos { width: 26px; font-size: 16px; }
.qz-lb-screen .qz-pname { font-size: 16px; }
.qz-lb-screen .qz-ppts { font-size: 16px; }
.qz-rank { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 13px; }
.qz-rank + .qz-rank { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.qz-pos { width: 22px; text-align: center; font-size: 14px; font-weight: 800; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.qz-av { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #94a3b8, #64748b);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4); }
.qz-pname { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-ppts { font-size: 14px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }
.qz-rank.top .qz-av { background: linear-gradient(180deg, #fbbf24, #d97706); }
.qz-rank.you { background: rgba(245,158,11,0.13); box-shadow: inset 0 0 0 1.5px rgba(245,158,11,0.4); border-radius: 13px; }
.qz-rank.you + .qz-rank, .qz-rank.you { border-top-color: transparent; }
.qz-rank.you .qz-pname { font-weight: 800; color: var(--qz-deep); }
.qz-rank.you .qz-av { background: linear-gradient(180deg, var(--qz), var(--qz-deep)); }

/* ============================================================
   Service / Infos vor Ort
   ============================================================ */
.sv-sec { display: flex; flex-direction: column; gap: 10px; }
.sv-sec .live-cap { padding: 0 4px; }

/* WLAN */
.sv-wifi { display: flex; flex-direction: column; gap: 15px; }
.sv-wifi-head { display: flex; align-items: center; gap: 13px; }
.sv-wifi-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 10px 22px rgba(2,132,199,0.34); }
.sv-wifi-ico svg { width: 24px; height: 24px; }
.sv-wifi-label { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); }
.sv-wifi-note { font-size: 12.5px; color: var(--tx-2); margin-top: 2px; }
.sv-wifi-rows { display: flex; flex-direction: column; gap: 1px; border-radius: 14px; overflow: hidden;
  background: rgba(var(--surf-rgb), 0.42); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb), 0.6); }
.sv-wifi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  background: rgba(var(--surf-rgb), 0.2); }
.sv-wifi-row + .sv-wifi-row { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.sv-wifi-row span { font-size: 13px; font-weight: 600; color: var(--tx-2); }
.sv-wifi-row b { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; color: var(--tx); }
.sv-wifi-row b.mono { font-family: var(--font-mono); letter-spacing: 0; }
.btn-fp.sv-ok { background: linear-gradient(180deg, var(--good), var(--good-deep)); box-shadow: 0 10px 24px rgba(52,199,89,0.32), inset 0 1px 1px rgba(255,255,255,0.4); }

/* Notfall */
.sv-calls { display: flex; flex-direction: column; gap: 10px; }
.sv-call { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--tx);
  padding: 13px 15px; border-radius: var(--r-inner); border: 1px solid var(--line);
  background: var(--surf-2); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 6px 16px rgba(30,48,100,0.09); transition: transform .12s; }
.sv-call:active { transform: scale(0.985); }
.sv-call-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #94a3b8, #64748b); box-shadow: inset 0 1px 1px rgba(255,255,255,0.4); }
.sv-call-ico svg { width: 19px; height: 19px; }
.sv-call-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-call-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sv-call-s { font-size: 12.5px; color: var(--tx-2); }
.sv-call-num { font-size: 15px; font-weight: 750; color: var(--tx-2); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sv-call.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, #fff), color-mix(in srgb, var(--accent) 6%, #fff));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 20px rgba(229,32,43,0.12); }
.sv-call.primary .sv-call-ico { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 6px 14px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.4); }
.sv-call.primary .sv-call-num { color: var(--accent-strong); font-weight: 800; font-size: 19px; }

/* FAQ */
.sv-faq-card { padding: 4px 18px; }
.sv-faq + .sv-faq { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); }
.sv-faq-q { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px 0;
  background: none; border: none; color: var(--tx); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.sv-faq-q > span:first-child { flex: 1; }
.sv-faq-chev { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--tx-3);
  background: rgba(120,140,170,0.14); transition: transform .25s ease, color .2s; }
.sv-faq-chev svg { width: 16px; height: 16px; }
.sv-faq.on .sv-faq-chev { transform: rotate(180deg); color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.sv-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.sv-faq-a-in { overflow: hidden; }
.sv-faq-a-in p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--tx-2); max-width: 40ch; }

/* ============================================================
   Fancam
   ============================================================ */
.fcam { display: flex; flex-direction: column; gap: 16px; }

/* Sucher */
.fcam-view { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2b3550, #141a2b 70%);
  box-shadow: var(--lens), 0 22px 46px rgba(20,30,60,0.3); isolation: isolate; }
.fcam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.fcam-ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 38%, rgba(255,255,255,0.08), transparent 70%); }
.fcam-ph-ico { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.fcam-ph-ico svg { width: 50px; height: 50px; }

/* Ecken-Markierungen */
.fcam-bracket { position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none; }
.fcam-bracket.tl { top: 14px; left: 14px; border-top: 3px solid rgba(255,255,255,0.85); border-left: 3px solid rgba(255,255,255,0.85); border-top-left-radius: 8px; }
.fcam-bracket.tr { top: 14px; right: 14px; border-top: 3px solid rgba(255,255,255,0.85); border-right: 3px solid rgba(255,255,255,0.85); border-top-right-radius: 8px; }
.fcam-bracket.bl { bottom: 14px; left: 14px; border-bottom: 3px solid rgba(255,255,255,0.85); border-left: 3px solid rgba(255,255,255,0.85); border-bottom-left-radius: 8px; }
.fcam-bracket.br { bottom: 14px; right: 14px; border-bottom: 3px solid rgba(255,255,255,0.85); border-right: 3px solid rgba(255,255,255,0.85); border-bottom-right-radius: 8px; }

/* Rahmen-Overlay */
.fcam-frame-ov { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.fcam-view.f-team .fcam-frame-ov { box-shadow: inset 0 0 0 7px var(--accent), inset 0 0 24px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.35); }
.fcam-view.f-flag .fcam-frame-ov { box-shadow: inset 0 0 0 5px #FFCD00, inset 0 0 0 10px #E5202B, inset 0 0 0 15px #1a1a1a; }
.fcam-view.f-confetti .fcam-frame-ov {
  background-image:
    radial-gradient(circle, #f43f5e 2.5px, transparent 3px),
    radial-gradient(circle, #facc15 2.5px, transparent 3px),
    radial-gradient(circle, #3b82f6 2.5px, transparent 3px),
    radial-gradient(circle, #22c55e 2.5px, transparent 3px);
  background-size: 90px 90px, 110px 110px, 80px 80px, 130px 130px;
  background-position: 6px 10px, 50px 36px, 30px 70px, 74px 90px;
  opacity: 0.85; }

/* Badges */
.fcam-badge { position: absolute; top: 14px; left: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em; color: #fff; padding: 7px 12px; border-radius: 999px; }
.fcam-badge.live { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); box-shadow: 0 6px 16px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.5); }
.fcam-badge.live .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: fpulse 1.4s ease-in-out infinite; }
.fcam-badge.queue { background: rgba(20,26,44,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 0; }
.fcam-spin { width: 13px; height: 13px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: phspin 0.8s linear infinite; }

/* Live-Countdown */
.fcam-count { position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; }
.fcam-count svg { position: absolute; inset: 0; }
.fcam-count b { position: relative; font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* Kamera einschalten */
.fcam-enable { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 11px; width: 78%;
  background: none; border: none; color: #fff; cursor: pointer; }
.fcam-enable-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 10px 26px rgba(0,0,0,0.3); }
.fcam-enable-ico svg { width: 30px; height: 30px; }
.fcam-enable span { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.fcam-enable small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7); max-width: 26ch; line-height: 1.4; }

/* Fertig-Overlay */
.fcam-done-ov { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 50% 45%, rgba(34,197,94,0.45), rgba(20,30,55,0.55)); backdrop-filter: blur(2px); }
.fcam-done-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #34c759, #1e9e43); box-shadow: 0 14px 30px rgba(30,160,70,0.5), inset 0 1.5px 1px rgba(255,255,255,0.5); }
.fcam-done-ico svg { width: 38px; height: 38px; }

/* Rahmen-Chips */
.fcam-frames { display: flex; flex-direction: column; gap: 9px; }
.fcam-frames-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); padding: 0 2px; }
.fcam-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fcam-chips::-webkit-scrollbar { display: none; }
.fcam-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 650; color: var(--tx-2); border: 1px solid var(--line); background: var(--surf-2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7); transition: color .15s, box-shadow .15s; }
.fcam-chip.on { color: var(--tx); box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 0 0 1.5px var(--accent-strong); }
.fcam-swatch { width: 22px; height: 22px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.fcam-swatch.f-none { background: repeating-linear-gradient(45deg, #e6e9f0 0 5px, #d4d9e6 5px 10px); }
.fcam-swatch.f-team { background: var(--accent); }
.fcam-swatch.f-flag { background: linear-gradient(90deg, #1a1a1a 33%, #E5202B 33% 66%, #FFCD00 66%); }
.fcam-swatch.f-confetti { background: conic-gradient(#f43f5e, #facc15, #3b82f6, #22c55e, #f43f5e); }

.fcam-hint { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.45; text-align: center; padding: 0 6px; }
.fcam-go svg { width: 18px; height: 18px; }

/* Status-Blöcke */
.fcam-status { display: flex; flex-direction: column; gap: 13px; align-items: center; }
.fcam-status .btn-fp.block { width: 100%; }
.fcam-pos { display: flex; align-items: center; gap: 14px; align-self: stretch; padding: 14px 16px; border-radius: var(--r-inner);
  background: var(--surf-2); border: 1px solid var(--line); box-shadow: inset 0 1px 1px rgba(255,255,255,0.8); }
.fcam-pos-num { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.4), 0 8px 18px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.34); font-variant-numeric: tabular-nums; }
.fcam-pos-tt { display: flex; flex-direction: column; gap: 2px; }
.fcam-pos-tt b { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); }
.fcam-pos-tt span { font-size: 13px; color: var(--tx-2); }
.fcam-live-tt { align-self: stretch; display: flex; justify-content: center; }
.fcam-done-tt { display: flex; align-items: center; gap: 13px; align-self: stretch; padding: 14px 16px; border-radius: var(--r-inner);
  background: rgba(52,199,89,0.12); box-shadow: inset 0 0 0 1.5px rgba(52,199,89,0.3); }
.fcam-done-emoji { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #34c759, #1e9e43); box-shadow: 0 8px 18px rgba(30,160,70,0.34); }
.fcam-done-emoji svg { width: 22px; height: 22px; }
.fcam-done-tt b { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); display: block; }
.fcam-done-tt > span > span { font-size: 13px; color: var(--tx-2); line-height: 1.4; }

/* ============================================================
   Partner — Werbemodul, Übersicht & Landingpage
   ============================================================ */
/* Werbemodul (Home) */
.ad-card { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  /* Feste helle Insel: die Fläche bleibt in JEDEM Event-Design weiß-basiert
     (Sponsor-CI via color-mix mit #fff) — deshalb Ink lokal auf den hellen
     Standard gepinnt, sonst helle Schrift auf heller Fläche im Dunkel-Design.
     Achtung Custom-Property-Semantik: --tx & Co. substituieren an ihrem
     Definitionselement (.fp) — fürs lokale Pinnen müssen die ABLEITUNGEN hier
     mit neu deklariert werden, --tx-rgb allein hätte keine Wirkung. */
  --tx-rgb: 26, 32, 48;
  --tx: rgb(var(--tx-rgb));
  --tx-2: rgba(var(--tx-rgb), 0.64);
  --tx-3: rgba(var(--tx-rgb), 0.45);
  --tx-4: rgba(var(--tx-rgb), 0.28);
  padding: 18px; border-radius: var(--r-card); border: 1px solid transparent;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, #fff), color-mix(in srgb, var(--brand) 7%, #fff)),
    var(--surf-hi);
  box-shadow: var(--lens), 0 18px 40px color-mix(in srgb, var(--brand) 24%, transparent), 0 4px 12px rgba(30,48,100,0.08);
  transition: transform .12s; }
.ad-card:active { transform: scale(0.99); }
.ad-card::after { content: ""; position: absolute; right: -40px; top: -50px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%); pointer-events: none; }
.ad-kicker { position: relative; z-index: 1; align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tx-3); padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); }
.ad-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.ad-logo { width: 52px; height: 52px; flex: none; border-radius: 15px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff; background: var(--brand);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.4), 0 10px 22px color-mix(in srgb, var(--brand) 45%, transparent); }
.ad-tt { min-width: 0; }
.ad-name { font-size: 18px; font-weight: 750; letter-spacing: -0.025em; color: var(--tx); }
.ad-tag { font-size: 13px; color: var(--tx-2); margin-top: 2px; line-height: 1.35; }
.ad-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: #fff; padding: 12px 18px; border-radius: 999px; background: var(--brand);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 1px 1px rgba(255,255,255,0.4); }
.ad-cta svg { width: 17px; height: 17px; }

/* Übersicht */
.prt-list { display: flex; flex-direction: column; gap: 12px; }
.prt-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px; border-radius: var(--r-card); border: 1px solid var(--line); color: var(--tx);
  background: var(--surf-2); backdrop-filter: blur(var(--blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--lens), var(--shadow-md); transition: transform .12s, box-shadow .18s; }
.prt-card:active { transform: scale(0.99); }
.prt-card:hover { box-shadow: var(--lens), var(--shadow-lg); }
.prt-logo { width: 50px; height: 50px; flex: none; border-radius: 14px; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #fff; background: var(--brand);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.4), 0 8px 18px color-mix(in srgb, var(--brand) 40%, transparent); }
.prt-rr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prt-name { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.prt-tier { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.prt-tag { font-size: 12.5px; color: var(--tx-2); margin-top: 2px; line-height: 1.35; }
.prt-offer-tag { align-self: flex-start; margin-top: 6px; font-size: 11px; font-weight: 750; color: var(--tx);
  padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent); }
.prt-chev { flex: none; color: var(--tx-3); }
.prt-chev svg { width: 20px; height: 20px; }

/* Landingpage (Vollbild-Overlay) */
.prt-land { position: absolute; inset: 0; z-index: 80; background: #f4f6fb; animation: prtup .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes prtup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.prt-land-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.prt-land-scroll::-webkit-scrollbar { display: none; }

.prt-hero { position: relative; padding: 58px 22px 26px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 88%, #fff) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 70%, #000) 100%); }
.prt-hero::after { content: ""; position: absolute; right: -50px; top: -30px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%); pointer-events: none; }
.prt-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center; color: #fff; border: none; background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.prt-close svg { width: 19px; height: 19px; }
.prt-hero-logo { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px;
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--brand); background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.prt-hero-tier { position: relative; z-index: 1; display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.prt-hero-name { position: relative; z-index: 1; margin: 12px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.035em; }
.prt-hero-tag { position: relative; z-index: 1; margin: 7px 0 0; font-size: 15px; font-weight: 500; opacity: 0.92; max-width: 24ch; line-height: 1.35; }

.prt-body { padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.prt-blurb { margin: 0; font-size: 15.5px; line-height: 1.5; color: #2a3346; font-weight: 500; }
.prt-sec { display: flex; flex-direction: column; gap: 6px; }
.prt-sec h3 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: #1a2030; }
.prt-sec p { margin: 0; font-size: 14px; line-height: 1.55; color: #51596b; }

/* Logos (Bild statt Kürzel) im Werbemodul / Liste / Hero.
   Mit Logo (.is-img): rahmenlos – das (meist transparente) PNG liegt frei,
   ohne Box, Hintergrund, Schatten oder abgerundete Ecken. */
.ad-logo.is-img, .prt-logo.is-img, .prt-hero-logo.is-img {
  background: none; box-shadow: none; border-radius: 0;
  /* Sicherheitskappung, falls ein Logo doch überläuft (dimensionslose SVGs). */
  overflow: hidden; }
/* Feste px-Grenzen (KEINE %-Höhe: die greift bei Grid + dimensionslosen SVGs nicht)
   + auto: das Logo skaliert seitenverhältnistreu IN die Box — kein Crop, kein Überlauf.
   Robust für Raster UND SVG. */
.ad-logo img, .prt-logo img, .prt-hero-logo img {
  display: block; width: auto; height: auto; object-fit: contain; }
.ad-logo img { max-width: 52px; max-height: 52px; }
.prt-logo img { max-width: 50px; max-height: 50px; }
/* Hero-Logo (Landingpage): deutlich größer (~3×) und linksbündig zu Name/Tagline. */
.prt-hero-logo.is-img { width: 190px; height: 86px; justify-items: start; }
.prt-hero-logo.is-img img { max-width: 190px; max-height: 86px; }

/* Event-Modus: freie Inhalts-Blöcke (Richtext + Bild) */
.prt-rt { font-size: 14.5px; line-height: 1.6; color: #2a3346; }
.prt-rt h2 { margin: 4px 0 6px; font-size: 18px; font-weight: 760; letter-spacing: -0.02em; color: #1a2030; }
.prt-rt h3 { margin: 4px 0 4px; font-size: 16px; font-weight: 740; letter-spacing: -0.02em; color: #1a2030; }
.prt-rt h4 { margin: 4px 0 4px; font-size: 14.5px; font-weight: 720; color: #1a2030; }
.prt-rt p { margin: 0 0 9px; }
.prt-rt ul, .prt-rt ol { margin: 0 0 9px; padding-left: 20px; }
.prt-rt li { margin: 2px 0; }
.prt-rt a { color: var(--brand, #2a6fdb); font-weight: 600; }
.prt-rt blockquote { margin: 0 0 9px; padding: 6px 0 6px 12px; border-left: 3px solid var(--brand, #2a6fdb); color: #51596b; }
.prt-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.prt-fig img { width: 100%; border-radius: 14px; display: block; }
.prt-fig figcaption { font-size: 12.5px; color: #6b7385; text-align: center; }
.prt-cta { width: 100%; justify-content: center; margin-top: 2px; }

.prt-offer { display: flex; flex-direction: column; gap: 9px; padding: 20px; border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 13%, #fff), #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 26%, transparent), 0 14px 30px color-mix(in srgb, var(--brand) 16%, transparent); }
.prt-offer-kick { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.prt-offer-kick svg { width: 15px; height: 15px; }
.prt-offer-title { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; color: #1a2030; line-height: 1.15; }
.prt-offer-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: #51596b; }
.prt-offer-prize { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1a2030;
  padding: 9px 13px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.prt-offer-prize svg { width: 16px; height: 16px; color: var(--brand); fill: var(--brand); }
.prt-offer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 5px;
  font-size: 15.5px; font-weight: 700; color: #fff; padding: 14px 20px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--brand); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 42%, transparent), inset 0 1px 1px rgba(255,255,255,0.4);
  transition: transform .12s; }
.prt-offer-cta svg { width: 17px; height: 17px; }
.prt-offer-cta:active { transform: scale(0.98); }
.prt-offer.done .prt-offer-cta { background: linear-gradient(180deg, #34c759, #1e9e43); box-shadow: 0 10px 22px rgba(30,160,70,0.34); cursor: default; }

.prt-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 650; color: #51596b; padding: 13px 18px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(70,90,140,0.16), 0 4px 12px rgba(30,48,100,0.06); }
.prt-link svg { width: 16px; height: 16px; }

/* ============================================================
   Gewinnspiel (Leadgenerierung, DSGVO)
   ============================================================ */
.rf-hero { --rf: #1c69d4; position: relative; overflow: hidden; border-radius: var(--r-card); padding: 0;
  display: flex; flex-direction: column; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--rf) 82%, #fff) 0%, var(--rf) 52%, color-mix(in srgb, var(--rf) 68%, #000) 100%);
  box-shadow: var(--lens), 0 20px 44px color-mix(in srgb, var(--rf) 32%, transparent), 0 4px 12px rgba(30,48,100,0.08); }
.rf-hero-img { display: block; width: 100%; height: 172px; }
.rf-hero-img image-slot { display: block; width: 100%; height: 100%; }
.rf-hero-body { position: relative; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.rf-glow { position: absolute; right: -40px; top: -50px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%); pointer-events: none; }
.rf-hero > * { position: relative; z-index: 1; }
.rf-hero-body > * { position: relative; z-index: 1; }
.rf-sponsor { display: flex; align-items: center; gap: 10px; }
.rf-sponsor-logo { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: -0.02em; color: var(--rf); background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.rf-sponsor-by { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; line-height: 1.25; opacity: 0.92; }
.rf-sponsor-by b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; opacity: 1; }
.rf-kicker { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.rf-kicker svg { width: 14px; height: 14px; }
.rf-prize { margin: 4px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; max-width: 16ch; text-shadow: 0 1px 10px rgba(120,80,0,0.25); }
.rf-prize-sub { margin: 0; font-size: 14px; font-weight: 500; opacity: 0.95; line-height: 1.4; max-width: 32ch; }
.rf-prizes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.rf-prize-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--rf) 50%, #1a2030);
  padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.92); box-shadow: 0 4px 10px rgba(20,40,90,0.18); }
.rf-prize-chip svg { width: 14px; height: 14px; }
.rf-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rf-sponsor-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 750; color: var(--rf);
  padding: 7px 13px; border-radius: 999px; border: none; cursor: pointer; background: #fff; box-shadow: 0 5px 12px rgba(20,40,90,0.2); }
.rf-sponsor-link svg { width: 15px; height: 15px; }
.rf-deadline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; opacity: 0.95; }
.rf-deadline svg { width: 15px; height: 15px; }

/* Formular */
.rf-form { display: flex; flex-direction: column; gap: 15px; }
.rf-form-title { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; color: var(--tx); }
.rf-field { display: flex; flex-direction: column; gap: 7px; }
.rf-label { font-size: 12.5px; font-weight: 700; color: var(--tx-2); padding-left: 2px; }
.rf-input { width: 100%; font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--tx);
  padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(var(--hairline-rgb), 0.2);
  background: rgba(var(--surf-rgb), 0.66); box-shadow: inset 0 1px 2px rgba(30,48,100,0.06);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; }
.rf-input::placeholder { color: var(--tx-4); }
.rf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rf-input.err { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(var(--bad-rgb), 0.16); }
.rf-err { font-size: 12px; font-weight: 600; color: var(--accent-strong); padding-left: 2px; }

/* Einwilligungs-Checkboxen */
.rf-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 12px; border-radius: 14px;
  background: rgba(var(--surf-rgb), 0.4); box-shadow: inset 0 0 0 1px rgba(var(--hairline-rgb), 0.12); transition: box-shadow .15s, background .15s; }
.rf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rf-check.on { background: rgba(var(--surf-rgb), 0.6); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.rf-check.err { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rf-box { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; margin-top: 1px; color: var(--on-accent);
  background: rgba(var(--surf-rgb), 0.7); box-shadow: inset 0 0 0 2px rgba(var(--hairline-rgb), 0.3); transition: background .15s, box-shadow .15s; }
.rf-box svg { width: 14px; height: 14px; }
.rf-check.on .rf-box { background: var(--accent); box-shadow: none; }
.rf-check-tx { font-size: 13px; line-height: 1.45; color: var(--tx-2); font-weight: 500; }
.rf-check-tx a { color: var(--accent-strong); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.rf-req { font-style: normal; color: var(--tx-3); font-weight: 600; }

/* Bestätigung */
.rf-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 28px 22px; }
.rf-done-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; margin-bottom: 3px;
  background: linear-gradient(180deg, #34c759, #1e9e43); box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 12px 26px rgba(30,160,70,0.4); }
.rf-done-ico svg { width: 30px; height: 30px; }
.rf-done-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good-deep); }
.rf-done-title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.025em; color: var(--tx); }
.rf-done-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tx-2); max-width: 34ch; }
.rf-done-note { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 12.5px; font-weight: 650; color: var(--good-deep); }
.rf-done-note svg { width: 15px; height: 15px; }
.rf-done .btn-fp { margin-top: 8px; }

/* DSGVO-Box */
.rf-dsgvo { padding: 6px 16px; }
.rf-dsgvo-head { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 14px 0;
  background: none; border: none; color: var(--tx); }
.rf-dsgvo-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--tx-2);
  background: rgba(120,140,170,0.14); }
.rf-dsgvo-ico svg { width: 17px; height: 17px; }
.rf-dsgvo-tt { flex: 1; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.rf-dsgvo-chev { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--tx-3);
  background: rgba(120,140,170,0.14); transition: transform .25s ease; }
.rf-dsgvo-chev svg { width: 16px; height: 16px; }
.rf-dsgvo-head.on .rf-dsgvo-chev { transform: rotate(180deg); }
.rf-dsgvo-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.rf-dsgvo-in { overflow: hidden; display: flex; flex-direction: column; gap: 13px; }
.rf-dsgvo-row { padding-bottom: 13px; border-bottom: 1px solid rgba(var(--hairline-rgb), 0.1); }
.rf-dsgvo-row:last-child { border-bottom: none; padding-bottom: 16px; }
.rf-dsgvo-h { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; }
.rf-dsgvo-p { font-size: 13px; line-height: 1.5; color: var(--tx-2); }

/* Foto-Upload: Einwilligungs-Checkboxen + Fehlerzeile (Event-Modus) */
.ph-consent { display: flex; align-items: flex-start; gap: 9px; width: 100%;
  text-align: left; font-size: 12.5px; line-height: 1.35; color: var(--tx-2); cursor: pointer; }
.ph-consent input { margin-top: 1px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.ph-err { width: 100%; text-align: left; font-size: 12.5px; font-weight: 600;
  color: var(--accent-deep); background: hsl(var(--accent-h) 84% 96% / 0.7);
  border-radius: 12px; padding: 8px 11px; }

/* Foto-Vorschau vor dem Hochladen (Frontkamera-Aufnahme) */
.ph-shot { position: relative; width: 100%; border-radius: var(--r-tile, 16px);
  overflow: hidden; background: #0c1222; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.ph-shot img { display: block; width: 100%; max-height: 46vh; object-fit: contain; }
.ph-shot-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(12,18,34,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ph-shot-x svg { width: 17px; height: 17px; }
.ph-shot-x:active { transform: scale(0.94); }

/* Fancam Event-Modus: eingebettete bewährte Live-Seite (voller WebRTC-Flow) */
.fcam-frame {
  width: 100%;
  height: 72vh;
  min-height: 440px;
  border: 0;
  border-radius: var(--r-card);
  background: rgba(10, 16, 38, 0.35);
  box-shadow: var(--shadow-lg);
  display: block;
}

/* ---- Native Fancam (Broadcaster-Engine live_broadcast.js im Glasdesign) ----
   Styles bewusst unter .fcam-native gescoped (die Engine hängt an IDs/Klassen,
   nicht an konkreten Styles). WICHTIG: [hidden] muss explizit auf display:none
   gesetzt werden, weil .fancam-overlay display:flex den Browser-Default überschreibt. */
.fcam-native { display: block; }
.fcam-native .fancam { display: flex; flex-direction: column; gap: 14px; }
.fcam-native .fancam-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 66vh;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #05070f;
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
}
.fcam-native #live-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fcam-native #live-preview[hidden] { display: none; }
.fcam-native .fancam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 26px;
  color: #fff;
}
.fcam-native .fancam-overlay[hidden] { display: none; }
.fcam-native .fancam-overlay h2 { margin: 0; font-size: 16px; font-weight: 800; }
.fcam-native .fancam-overlay p { margin: 0; font-size: 13px; line-height: 1.4; opacity: 0.82; max-width: 32ch; }
.fcam-native .live-tap-overlay {
  appearance: none;
  border: 0;
  min-width: 64px;
  padding: 15px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.fcam-native .live-tap-overlay[hidden] { display: none; }
.fcam-native .fancam-info { text-align: center; }
.fcam-native #live-status {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-2, #56617a);
  background: var(--surf-2, rgba(255, 255, 255, 0.5));
  padding: 8px 14px;
  border-radius: 999px;
}

/* ================= Querformat (Handy quer, Höhe knapp) =================
   Aktiv nur auf Telefonen im Landscape (max-height 480px — Tablets quer sind
   höher und bleiben unberührt). Der knappe Faktor ist die HÖHE: Paddings und
   Bottom-Nav einkürzen, Inhalte in einer zentrierten Lesespalte halten (statt
   Karten auf 800px+ Breite zu zerren), Fancam-Bühne 16/9 statt 9/16.
   Die Kamera-Drehung selbst macht die Engine (live_broadcast.js,
   orientierungsabhängige Constraints + restartTrack bei Rotation). */
@media (orientation: landscape) and (max-height: 480px) {
  .fp-scroll {
    padding-top: 14px;
    padding-bottom: 24px;
    padding-left: calc(env(safe-area-inset-left, 0px) + 18px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 18px);
  }
  /* Lesespalte: Module bleiben schmal + zentriert, nutzen aber mehr als 480px. */
  .fp-stack { max-width: 620px; margin: 0 auto; }

  /* Bottom-Nav kompakt: Icon + Label nebeneinander statt übereinander,
     Home-Indicator-Abstand (26px) braucht quer nur die Safe-Area. */
  .fp-nav { padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 5px); }
  .nav-btn { flex-direction: row; gap: 7px; padding: 7px 4px; }
  .nav-btn svg { width: 19px; height: 19px; }
  .nav-btn .nl { font-size: 11.5px; }
  .nav-btn .ndot { top: -1px; right: -6px; }

  /* Fancam nativ: Bühne folgt dem Querformat. Höhe an den Viewport gekappt,
     damit Status-Pille + Nav sichtbar bleiben; object-fit cover füllt. */
  .fcam-native .fancam-stage {
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 170px);
    min-height: 180px;
  }
  /* Demo-Fancam (Standalone-Design) analog. */
  .fcam-view { aspect-ratio: 16 / 9; max-height: calc(100dvh - 170px); }
}

/* ============================================================
   Consent-Gates & Rechtstexte (fp-consent.jsx)
   Zwischenbildschirm pro Modul, "Hinweise"-Overlay, Fußzeile,
   Willkommens-Infoblock. Nutzt ausschließlich Design-Tokens
   (Event-Branding via --accent-*), keine eigene Farbwelt.
   ============================================================ */
.cg-card { display: flex; flex-direction: column; gap: 12px; }
.cg-title { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; margin: 2px 0 0; }
.cg-short { font-size: 14.5px; line-height: 1.55; color: var(--tx); margin: 0; }
.cg-link { color: var(--accent-strong); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.cg-linkbtn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.cg-more {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-size: 14px; font-weight: 650; color: var(--accent-strong);
}
.cg-more .cg-chev { display: inline-flex; transition: transform 0.2s ease; }
.cg-more .cg-chev svg { width: 15px; height: 15px; }
.cg-more.open .cg-chev { transform: rotate(90deg); }
.cg-full {
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(var(--surf-rgb), 0.45);
  padding: 14px 15px; display: flex; flex-direction: column; gap: 12px;
}
.cg-sec h4 { margin: 0 0 4px; font-size: 14px; font-weight: 750; }
.cg-sec p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tx-2); overflow-wrap: anywhere; }
.cg-err { font-size: 13.5px; color: #c02631; font-weight: 600; }
.cg-accept { margin-top: 2px; min-height: 48px; }
.cg-back {
  background: none; border: none; align-self: center; padding: 8px 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--tx-2); text-decoration: underline; text-underline-offset: 2px;
}
.cg-sheet-body { max-height: min(70dvh, 560px); overflow-y: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.cg-sheet-title { margin: 0 0 8px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.cg-sheet-body .cg-short { margin-bottom: 12px; display: block; }
.cg-dot { color: var(--tx-4); }
.fp-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  padding: 14px 10px 6px; font-size: 12.5px; color: var(--tx-2); text-align: center; line-height: 1.5;
}
.fp-legal .cg-link { font-weight: 600; }
.cg-welcome { display: flex; flex-direction: column; gap: 8px; }
.cg-welcome b { font-size: 16px; letter-spacing: -0.01em; }
.cg-welcome p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tx-2); }
.cg-welcome-links { display: flex; gap: 6px; align-items: center; }
.cg-hint-row { text-align: center; padding: 2px 0 0; font-size: 13px; color: var(--tx-2); }
.ph-upload-hint { font-size: 13px; line-height: 1.5; color: var(--tx-2); text-align: center; margin: 0; }
.ph-upload-ok { font-size: 13.5px; line-height: 1.5; color: #178a4c; font-weight: 600; text-align: center; margin: 0; }
.ph-upload-ok small { display: block; margin-top: 2px; color: var(--tx-2); font-weight: 500; }
.cg-note {
  margin: 0; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--tx);
  background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line);
}