/* ============================================================
   components.css — Sticker, Hero, Sektion-Karten, Meter, Podcast
   ============================================================ */

/* --- Generischer Sticker (weiße Karte, Album-Optik) --- */
.sticker {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-sticker);
  padding: var(--sp-6);
}
.sticker--alt { background: var(--surface-alt); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: var(--sp-12); padding-bottom: var(--sp-8); }
.hero__inner { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 880px) { .hero__inner { grid-template-columns: 1.15fr .85fr; gap: var(--sp-12); } }
.hero__claim {
  font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.02em;
  font-optical-sizing: auto; margin-block: var(--sp-4);
}
.hero__claim .accent { color: var(--pitch-deep); }
.hero__teaser { font-size: 1.15rem; color: var(--ink-soft); max-width: 40ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Favoriten-Sticker (Payoff im Hero) */
.fav { text-align: center; padding: var(--sp-8) var(--sp-6); }
.fav__label { font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.fav__label b { color: var(--pitch-deep); }
.fav__flag { margin: var(--sp-4) auto var(--sp-3); }
.fav__name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }
.fav__prob { font-size: clamp(2.8rem, 12vw, 4rem); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.03em; margin-top: var(--sp-2); }
.fav__prob span { color: var(--gold-deep); }
.fav__sub { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--sp-2); }
.fav__badges { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.fav-enter { opacity: 0; transform: translateY(10px) rotate(-4deg); }
.fav-enter.in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-spring); }

/* EPI-Badge (klein) */
.epi-badge { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 800; }
.epi-badge .n { font-size: 1.05rem; }
.epi-badge .lbl { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }

/* ============================================================
   Sektion-Einstiegskarten (der Hub-Kern)
   ============================================================ */
.section-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .section-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .section-cards { grid-template-columns: repeat(4, 1fr); } }
.scard {
  display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--pitch); }
.scard__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--pitch-tint); color: var(--pitch-deep); }
.scard__icon svg { width: 24px; height: 24px; }
.scard h3 { font-family: var(--font-display); }
.scard__desc { font-size: var(--fs-small); color: var(--ink-soft); flex: 1; }
.scard__stat { font-size: var(--fs-caption); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.scard__stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pitch); }
.scard__go { font-weight: 700; color: var(--pitch-deep); font-size: var(--fs-small); }

/* Live-/Bruch-Ticker */
.ticker { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 15px; }
.ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--edding); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ticker .dot { animation: none; } }

/* ============================================================
   Podcast-Block
   ============================================================ */
.podcast { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 820px) { .podcast { grid-template-columns: 1fr 1fr; } }
.podcast__embed { width: 100%; border-radius: 14px; overflow: hidden; min-height: 152px; }
.podcast__embed iframe { display: block; border: 0; width: 100%; }
.podcast__txt h2 { margin-bottom: var(--sp-3); }

/* Section-Kopf */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.sec-head p { color: var(--ink-soft); }

/* ============================================================
   SUBPAGE-KOMPONENTEN (Predictor, Turnierbaum, Rohdaten, …)
   ============================================================ */

/* Seiten-Kopf (Album-Reiter + Titel + Lead + Erklär-Links) */
.page-hero { position: relative; padding-block: var(--sp-8) var(--sp-6); }
.page-hero__tab {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-family: var(--font-display); text-transform: uppercase; font-size: .82rem; letter-spacing: .06em;
  padding: 5px 14px 4px; border-radius: 7px;
  transform: rotate(-3deg); transform-origin: left center; box-shadow: var(--shadow-sticker);
}
.page-hero h1 { font-size: var(--fs-h1); margin: var(--sp-3) 0; }
.page-hero__lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 54ch; }
.page-hero__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* generischer Sektions-Block auf Unterseiten */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: clamp(18px, 4vw, 32px); margin-bottom: var(--sp-6);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.panel__head h2 { font-size: var(--fs-h2); }
.panel__head p { color: var(--ink-soft); font-size: var(--fs-small); }

/* --- EPI-Badge groß --- */
.epi-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }

/* --- Leaderboard --- */
.lb { display: grid; gap: 10px; }
.lb__row {
  display: grid; grid-template-columns: 2.2em auto 1fr auto; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sticker); padding: 10px 14px; text-decoration: none; color: inherit; width: 100%; text-align: left;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lb__row:hover { transform: translateX(3px); border-color: var(--pitch); box-shadow: var(--shadow-pop); }
.lb__rank { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-soft); text-align: center; }
.lb__row--top .lb__rank { color: var(--gold-deep); }
.lb__name { font-weight: 700; }
.lb__name small { display: block; color: var(--ink-soft); font-weight: 600; font-size: .72rem; }
.lb__epi { font-family: var(--font-display); font-size: 1.5rem; color: var(--pitch-deep); }
.lb__bars { display: none; gap: 4px; }
@media (min-width: 620px) { .lb__bars { display: flex; } }
.minibar { width: 46px; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.minibar i { display: block; height: 100%; background: var(--pitch); }

/* --- W/D/L-Balken --- */
.wdl { display: flex; height: 38px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); font-weight: 800; }
.wdl span { display: grid; place-items: center; color: #fff; font-size: .8rem; min-width: 0; transition: flex-basis var(--dur) var(--ease); }
.wdl .w { background: var(--p-win); }
.wdl .d { background: var(--p-draw); color: var(--ink); }
.wdl .l { background: var(--p-loss); }
.wdl-legend { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 6px; }

/* --- Konfidenz-Pill --- */
.conf-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-small); color: #fff; }
.conf-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.85); }

/* --- Upset-Meter --- */
.upset { display: grid; gap: 6px; }
.upset__track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--pitch-tint), var(--edding-tint)); position: relative; border: 1px solid var(--line); }
.upset__fill { position: absolute; inset: 0; border-radius: 6px; background: var(--edding); opacity: .85; transform-origin: left; }
.upset__lbl { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--ink-soft); }

/* --- Battle-Balken (6 Duelle, aus der Mitte) --- */
.battle { display: grid; gap: 12px; }
.battle__row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.battle__cat { display: flex; justify-content: space-between; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); }
.battle__cat .home { color: var(--pitch-deep); } .battle__cat .away { color: var(--sky); }
.battle__bar { position: relative; height: 14px; background: var(--surface-alt); border-radius: 7px; overflow: hidden; }
.battle__bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: 2; }
.battle__home, .battle__away { position: absolute; top: 0; bottom: 0; }
.battle__home { right: 50%; background: var(--pitch); border-radius: 7px 0 0 7px; }
.battle__away { left: 50%; background: var(--sky); border-radius: 0 7px 7px 0; }

/* --- KI-Urteil (Sprechzettel-Optik) --- */
.verdict {
  position: relative; background: var(--surface-alt); border: 1px solid var(--line); border-left: 4px solid var(--pitch);
  border-radius: 10px; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
}
.verdict__who { font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; color: var(--pitch-deep); letter-spacing: .04em; }
.verdict p { margin-top: 4px; }
.verdict .honest { color: var(--edding); }

/* --- Match-Karte --- */
.match { display: grid; gap: var(--sp-4); }
.match__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.match__team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.match__team .nm { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; }
.match__team .epi { font-size: var(--fs-caption); color: var(--ink-soft); font-weight: 700; }
.match__vs { font-family: var(--font-display); color: var(--ink-soft); font-size: 1.1rem; }
.match__score { font-family: var(--font-display); font-size: 2.1rem; text-align: center; }
.match__score small { display: block; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }

/* Chip-Reihe (scrollbar) für horizontale Auswahl */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.chip-row .chip { flex: none; }

/* ============================================================
   Album-Bildwelt — Sticker-Grafiken (Panini-Optik)
   Die generierten PNGs haben einen weißen Die-Cut-Rand. Damit sie
   wie aufgeklebte Sticker wirken: dezenter Schlagschatten + leichte,
   „krumme" Drehung. site-weit wiederverwendbar.
   ============================================================ */
.sticker-img { display: block; filter: drop-shadow(0 4px 8px rgba(28,27,25,.18)); }

/* leichte Drehungen — Album-„krumm aufgeklebt"-Look */
.tilt-l  { transform: rotate(-4deg); }
.tilt-l2 { transform: rotate(-7deg); }
.tilt-r  { transform: rotate(4deg); }
.tilt-r2 { transform: rotate(7deg); }

/* Washi-Tape-Schnipsel, der ein Element „festklebt" (frei platzieren) */
.tape { position: absolute; width: 88px; height: auto; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(28,27,25,.12)); }

/* Washi-Tape über dem Kopf eines Panels — sparsam; NICHT auf overflow-Panels (würde geclippt) */
.taped { position: relative; }
.taped::before {
  content: ""; position: absolute; top: -16px; left: 22px; width: 128px; height: 44px; z-index: 4; pointer-events: none;
  transform: rotate(-3deg);
  background: url(/assets/img/ui/tape-green.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(28,27,25,.12));
}
.taped--cream::before { background-image: url(/assets/img/ui/tape-cream.png); transform: rotate(2.5deg); }

/* Foto-Eckhalter (Album): zwei diagonale Ecken via Pseudo-Elemente */
.photo-framed { position: relative; }
.photo-framed::before, .photo-framed::after {
  content: ""; position: absolute; width: 32px; height: 32px; z-index: 2; pointer-events: none;
  background: url(/assets/img/ui/photo-corner.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(28,27,25,.12));
}
.photo-framed::before { top: -7px; left: -7px; }
.photo-framed::after  { bottom: -7px; right: -7px; transform: rotate(180deg); }

/* Champion-Pokal — Finalzelle (Turnierbaum) & Platz 1 der Titel-Liste */
.champ-trophy { display: block; width: 54px; height: auto; margin: 0 auto 6px; transform: rotate(-4deg);
  filter: drop-shadow(0 4px 8px rgba(28,27,25,.2)); }