/* Boxenfunk — Ebene 4: Startseite (Plan 2026-10-01, Schritt 3).
   DachView.js (Kopf, „Unsere Bereiche", Info-Kaesten), _dach_cards.js (Bereichskacheln),
   _dach_live.js (Podest je Kachel). Nur unter html[data-design="boxenfunk"]; keine
   Abstaende/Hoehen — die Kartenmasse in dach.css sind auf „alle Bereiche ohne Scrollen"
   abgestimmt (Marc 13.08./01.09.) und gelten weiter.
   Bild: TV-Programmtafel — jede Kachel eine Vollflaeche mit Teamfarben-Kante, die
   Dachzeile als Bauchbinden-Schild in Bereichsfarbe, das Podest als Zeitenschilder. */

/* ---------- Schriftboden 13 px (Heute: 10,5–12,5 px) ---------- */
html[data-design="boxenfunk"] :where(
  .landing-hero__eyebrow, .landing-credit, .landing-credit b, .dach-card__kicker, .dach-chip, .dach-card__lock,
  .dach-pod__kopf, .dach-pod__n, .dach-pod__t, .zurueck
) { font-size: 13px; }

/* ---------- Kopf ---------- */
html[data-design="boxenfunk"] .landing-hero__logo { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
html[data-design="boxenfunk"] .landing-hero__eyebrow {
  font-family: var(--bf-display); font-weight: 700; font-style: italic; letter-spacing: .18em;
  color: var(--bereich, var(--bf-gelb));
}
html[data-design="boxenfunk"] .landing-hero__title {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em; color: #fff;
}
html[data-design="boxenfunk"] .landing-hero__title .grad-text { filter: none; }
html[data-design="boxenfunk"] .dach .landing-hero__title .grad-text { color: var(--bf-gelb); }
html[data-design="boxenfunk"] .landing-hero__sub { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .zurueck {
  font-family: var(--bf-display); font-weight: 700; font-style: italic; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .zurueck:hover { color: var(--bf-gelb); }

/* ---------- Bereichskacheln ---------- */
html[data-design="boxenfunk"] .dach-card { --bx-ac: var(--bx-neutral); }
html[data-design="boxenfunk"] .dach-card[data-key="nordschleife"] { --bx-ac: var(--bx-b-lizenz); }
html[data-design="boxenfunk"] .dach-card[data-key="ram"] { --bx-ac: var(--bx-b-ram); }
html[data-design="boxenfunk"] .dach-card[data-key="academy"] { --bx-ac: var(--bx-b-academy); }
html[data-design="boxenfunk"] :is(.dach-card[data-key="eventboards"], .dach-card[data-key="events"]) { --bx-ac: var(--bx-b-sonst); }

html[data-design="boxenfunk"] .dach-card {
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--bx-flaeche);
}
html[data-design="boxenfunk"] .dach-card--zeile { border-left: 6px solid var(--bx-ac); }
html[data-design="boxenfunk"] .dach-card:hover {
  background: var(--bx-flaeche); filter: brightness(1.12);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .85); border-left-color: var(--bx-ac);
}
html[data-design="boxenfunk"] .dach-card--locked:hover { filter: none; box-shadow: none; }
html[data-design="boxenfunk"] .dach-card__img { background: #0b0e16; }
html[data-design="boxenfunk"] .dach-card__ph {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--bx-ac) 26%, #121722), #07090e);
}
html[data-design="boxenfunk"] .dach-card--zeile .dach-card__img::after {
  background: linear-gradient(to right, transparent 55%, rgba(7, 9, 14, .55) 100%);
}
/* Dachzeile = Bauchbinden-Schild in Bereichsfarbe, dunkle Schrift. */
html[data-design="boxenfunk"] .dach-card__kicker {
  align-self: flex-start; justify-self: start; width: max-content; max-width: 100%;
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .1em;
  color: var(--bf-dunkel); background: var(--bx-ac);
  padding: 1px 18px 0 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .dach-card__title {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em; color: #fff;
}
html[data-design="boxenfunk"] .dach-card:hover .dach-card__title { color: #fff; }
html[data-design="boxenfunk"] .dach-card__teaser { font-family: var(--bf-text); color: var(--bf-ink-dim); }
@media (min-width: 981px) {
  html[data-design="boxenfunk"] .dach-card__title { font-size: clamp(20px, 1.8vw, 26px); }
}
/* Kennzahlen + Sperre: flache Schilder. */
html[data-design="boxenfunk"] .dach-chip {
  font-family: var(--bf-display); font-weight: 700; letter-spacing: .03em;
  border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .dach-chip b { font-weight: 800; font-style: italic; color: #fff; }
html[data-design="boxenfunk"] .dach-card__lock {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .06em; text-transform: uppercase;
  border: 0; border-radius: 0; color: var(--bf-dunkel); background: var(--bx-ac);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .dach-card__go { font-family: var(--bf-display); font-style: italic; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .dach-card:hover .dach-card__go { color: var(--bx-ac); }

/* Podest je Kachel: Zeitenschilder mit Medaillen-Kante links. */
html[data-design="boxenfunk"] .dach-pod { border-top-color: rgba(255, 255, 255, .08); }
html[data-design="boxenfunk"] .dach-pod__kopf {
  font-family: var(--bf-display); font-weight: 700; letter-spacing: .12em; color: #8f9ab0;
}
html[data-design="boxenfunk"] .dach-pod__it {
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .06);
  box-shadow: inset 4px 0 0 var(--pl, var(--bf-knopf-hell));
}
html[data-design="boxenfunk"] .dach-pod__it[data-fahrer]:hover {
  background: rgba(255, 255, 255, .12); box-shadow: inset 4px 0 0 var(--pl, var(--bf-gelb)); transform: none;
}
html[data-design="boxenfunk"] .dach-pod__n { font-family: var(--bf-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .dach-pod__t { font-family: var(--bf-display); font-weight: 700; font-style: italic; color: var(--bf-ink); }

/* ---------- Info-Kaesten unten ---------- */
html[data-design="boxenfunk"] .linfo { border: 0; border-radius: 0; background: var(--bx-flaeche); }
html[data-design="boxenfunk"] .linfo h3 {
  display: inline-block; margin-left: -22px; padding: 3px 24px 2px 22px;
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em;
  color: var(--bf-dunkel); background: var(--bf-gelb); clip-path: var(--bx-tab);
}
html[data-design="boxenfunk"] .linfo p { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .linfo b { color: #fff; }
html[data-design="boxenfunk"] .cta-btn {
  border-radius: 0; box-shadow: none; clip-path: var(--bx-schraeg);
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em;
}
html[data-design="boxenfunk"] .cta-btn:hover { transform: none; filter: brightness(1.12); }
html[data-design="boxenfunk"] .cta-btn--server { background: var(--bx-b-lizenz); color: var(--bf-dunkel); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .cta-btn { padding: 11px 26px; font-size: 17px; }
}
html[data-design="boxenfunk"] .landing-credit { font-family: var(--bf-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8f9ab0; }
html[data-design="boxenfunk"] .landing-credit b { color: var(--bf-gelb); }