/* ============================================================================
 * header.css — tc-page-header
 * ----------------------------------------------------------------------------
 * FUNDAMENT-KOMPONENTE (Schicht 0, PRIO 1). Ersetzt 13+ Seiten-Header.
 * Abstrahiert aus der Best-Practice-Vorlage .pf-campaign-header.pf-hero
 * (pathfinder.css) — von Tim als verbindlich bestimmt.
 *
 * THEME-GETRIEBEN: alle Farben aus --tc-* / dem aktiven .theme-* Block.
 * KEINE harten Hex (Ausnahme: neutrale Schwarz-Tints fuer Overlay-Tiefe).
 *
 * FARB-ROLLEN (Drei-Rollen-System, 07.06.2026):
 *   --tc-accent     = Primaer  -> Flaechen/Wash/Identitaet (AoS: Rot)
 *   --tc-secondary  = Sekundaer-> Tiefe (AoS: Petrol)
 *   --tc-highlight  = Auszeichnung/Glanz -> Titel, Badge, Progress, Akzent-Leiste
 *                     (AoS: Gold). Sparsam, fuer Lesbarkeit + Hierarchie.
 *
 * DEFAULT = Gradient (--plain-Verhalten). Banner-Bild ist OPT-IN via
 * Modifier --banner + Inline-Background ODER .has-bg (Tims Entscheidung
 * 07.06.2026: bildlose Bereiche bleiben Gradient, Banner wo Asset existiert).
 *
 * Struktur (BEM):
 *   .tc-page-header                     Block
 *     .tc-page-header__banner-img       (optional) <img> Hintergrund-Layer
 *     .tc-page-header__icon             (optional) Icon/Swords vor dem Titel
 *     .tc-page-header__logo             (optional) <img> System-Logo statt Titel (--logo)
 *     .tc-page-header__title            Pflicht — Cinzel, Auszeichnungsfarbe
 *     .tc-page-header__subtitle         (optional) gedaempfte Unterzeile
 *     .tc-page-header__meta             (optional) Chapter/Level/Stats-Zeile
 *     .tc-page-header__actions          (optional) Button-Reihe
 *     .tc-page-header__progress         (optional) Fortschrittsleiste
 *     .tc-page-header__tabs             (optional) eingebettete Tab-Leiste
 *
 * Modifier (kombinierbar):
 *   --plain        nur Titel (+Subtitle) ueber Gradient   [Default-Verhalten]
 *   --banner       erwartet Banner-Bild + staerkeres Overlay
 *   --logo         zeigt zentrales __logo-Bild statt Text-Titel (Banner-Unterseiten)
 *   --with-meta    Meta-Zeile sichtbar
 *   --with-actions Action-Reihe sichtbar
 *   --with-progress Progress sichtbar
 *   --with-tabs    Tabs sichtbar
 *   --compact      reduziertes Padding (Sub-Pages)
 * ============================================================================ */

/* === BLOCK ================================================================ */
.tc-page-header {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 20px 28px;
  margin-bottom: var(--tc-space-5, 24px);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-xl, 16px);
  /* DEFAULT: reiner Gradient (kein Bild noetig) — Primaer-Wash + dunkler Verlauf.
     Theme-getrieben ueber --tc-accent-rgb (Primaer-Farbe, AoS: Rot). */
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.78) 70%,
      rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(135deg,
      rgba(var(--tc-accent-rgb), 0.18) 0%,
      rgba(var(--tc-accent-rgb), 0.05) 100%),
    var(--tc-bg-surface-1);
  background-size: cover;
  background-position: center top;
}

/* Obere Akzent-Leiste — Gold-Glanz (Auszeichnung) um den Primaer-Akzent.
   AoS: Gold -> Rot -> Gold (Logo-Look). */
.tc-page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--tc-highlight),
    var(--tc-accent),
    var(--tc-highlight),
    transparent);
  opacity: 0.9;
}

/* Untere Ornament-Linie (dezent) */
.tc-page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--tc-deco-ornament-border, rgba(255,255,255,0.12)),
    transparent);
}

/* === BANNER-VARIANTE ====================================================== */
/* --banner: staerkeres Overlay, damit Text auf dem Bild lesbar bleibt.
   Das eigentliche Bild kommt entweder als Inline-background-image auf dem
   Block ODER als __banner-img <img>-Layer (siehe unten).

   FESTE HERO-HOEHE (Tim 15.06.2026): Der Banner wirkt als grossflaechiger
   thematischer Hintergrund (~300px Desktop). Das Bild fuellt diese feste
   Hoehe (object-fit: cover), der Inhalt (Logo/Titel/Subtitle/Meta) wird
   vertikal UND horizontal darin zentriert. Steuerbar ueber --tc-header-banner-h.
   Zusammen mit dem Failsafe an __banner-img kann kein Bild den Header sprengen. */
.tc-page-header--banner {
  --tc-header-banner-h: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--tc-header-banner-h);
  padding: 32px 20px;
  background:
    var(--tc-deco-banner-overlay,
      linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.55) 55%,
        rgba(0,0,0,0.75) 100%)),
    var(--tc-bg-surface-1);
}

/* Bild-Layer-Variante: <img class="tc-page-header__banner-img"> als Hintergrund.
   So kann das Markup ein echtes <img> nutzen (Alt-Text, Lazy-Load) statt
   CSS-background. Liegt HINTER dem Inhalt.

   FAILSAFE (Tim 15.06.2026): Bild ist absolut positioniert + auf die Header-Box
   begrenzt, damit ein FALSCH DIMENSIONIERTES Bild (z.B. 4000x1600 statt 1600x400)
   den Header NIEMALS aufblaehen kann. Selbst wenn die absolute Positionierung
   ausfiele, deckeln max-height + object-fit die Darstellung. Der Header behaelt
   seine durch Padding/Inhalt definierte Hoehe; das Bild fuellt nur diese Flaeche
   (object-fit: cover -> beschneidet ueberstehende Bildanteile statt zu strecken). */
.tc-page-header__banner-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.tc-page-header--banner .tc-page-header__banner-img { opacity: 0.55; }
/* Alle direkten Inhalts-Slots ueber das Bild heben */
.tc-page-header > *:not(.tc-page-header__banner-img) { position: relative; z-index: 1; }

/* === COMPACT ============================================================== */
.tc-page-header--compact {
  padding: 22px 16px 16px;
  border-radius: var(--tc-radius-lg, 12px);
}

/* === SLOTS ================================================================ */

/* Icon (z.B. gekreuzte Schwerter) — inline vor/ueber dem Titel */
.tc-page-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  font-size: var(--tc-text-2xl, 1.6rem);
  line-height: 1;
}
.tc-page-header__icon img,
.tc-page-header__icon svg {
  height: 1.6em;
  width: auto;
  display: block;
}

/* === LOGO-SLOT + --logo-VARIANTE ========================================= *
 * --logo (Tim 15.06.2026): Eine Unterseite zeigt statt eines Text-Titels ihr
 * System-/Bereichs-LOGO gross zentral ueber dem Banner-Bild. Vorbild: der
 * Blood-Bowl-Hub. Damit alle Unterseiten konsistent denselben Logo-Hero nutzen.
 *
 * Markup-Konvention:
 *   <header class="tc-page-header tc-page-header--banner tc-page-header--logo ...">
 *     <img class="tc-page-header__banner-img" src="..." alt="" style="opacity:.28">
 *     <img class="tc-page-header__logo" src="logo.png" alt="Bereichsname">
 *     <p class="tc-page-header__subtitle">...</p>
 *     <div class="tc-page-header__meta ...">...</div>
 *   </header>
 *
 * Das Logo ersetzt den __title (kein Text-Titel noetig). Hoehe ueber
 * --tc-header-logo-h steuerbar (Default 84px, mobil kleiner). Drop-Shadow
 * hebt es vom Banner ab. */
.tc-page-header__logo {
  --tc-header-logo-h: 84px;
  display: block;
  height: var(--tc-header-logo-h);
  width: auto;
  max-width: min(90%, 520px);
  margin: 0 auto 10px;
  object-fit: contain;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.75));
}

/* Titel — Cinzel, Auszeichnungsfarbe (Gold, theme-getrieben) */
.tc-page-header__title {
  margin: 0 0 6px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-3xl, 2.2rem);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tc-highlight);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}
.tc-page-header--compact .tc-page-header__title {
  font-size: var(--tc-text-2xl, 1.6rem);
  letter-spacing: 0.5px;
}

/* Subtitle — gedaempfte Unterzeile */
.tc-page-header__subtitle {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base, 0.95rem);
  letter-spacing: 0.5px;
  color: var(--tc-text-default);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.tc-page-header__subtitle span { margin: 0 8px; color: var(--tc-text-muted); }
/* Link im Subtitle (z.B. "Termin vereinbaren → Zur Liga"). Theme-getrieben,
   gut lesbar auf dem dunklen Banner via Glanzfarbe. Generisch — nicht BB-lokal. */
.tc-page-header__subtitle a {
  color: var(--tc-highlight);
  text-decoration: none;
  font-weight: var(--tc-weight-semibold, 600);
  border-bottom: 1px solid rgba(var(--tc-highlight-rgb), 0.4);
  transition: border-color var(--tc-motion-fast, 150ms), opacity var(--tc-motion-fast, 150ms);
}
.tc-page-header__subtitle a:hover {
  border-bottom-color: var(--tc-highlight);
  opacity: 0.85;
}

/* Meta-Zeile — Chapter/Level/Stats (sichtbar nur mit --with-meta) */
.tc-page-header__meta {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base, 1rem);
  color: var(--tc-text-default);
}
.tc-page-header--with-meta .tc-page-header__meta { display: flex; }

/* Level-/Status-Badge innerhalb der Meta-Zeile — Gold-Auszeichnung */
.tc-page-header__badge {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tc-highlight);
  background: rgba(var(--tc-highlight-rgb), 0.08);
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.3);
  border-radius: var(--tc-radius-sm, 4px);
}

/* Actions — Button-Reihe (sichtbar nur mit --with-actions) */
.tc-page-header__actions {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.tc-page-header--with-actions .tc-page-header__actions { display: flex; }

/* Progress — Fortschrittsleiste (sichtbar nur mit --with-progress) */
.tc-page-header__progress {
  display: none;
  max-width: 700px;
  margin: 14px auto 0;
  height: 6px;
  border-radius: var(--tc-radius-full, 9999px);
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.tc-page-header--with-progress .tc-page-header__progress { display: block; }
/* Progress-Fill — Gold-Glanz (Auszeichnung) */
.tc-page-header__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tc-highlight), var(--tc-accent-light, var(--tc-highlight)));
  box-shadow: 0 0 8px rgba(var(--tc-highlight-rgb), var(--tc-glow-intensity, 0.3));
  transition: width var(--tc-motion-normal, 200ms);
}

/* Tabs — eingebettete Tab-Leiste (sichtbar nur mit --with-tabs).
   Nutzt die fertige tc-tabs-Komponente; hier nur Abstand + Zentrierung. */
.tc-page-header__tabs {
  display: none;
  justify-content: center;
  margin-top: 18px;
}
.tc-page-header--with-tabs .tc-page-header__tabs { display: flex; }

/* === MOBILE =============================================================== */
@media (max-width: 900px) {
  .tc-page-header {
    padding: 34px 14px 20px;
    border-radius: var(--tc-radius-lg, 12px);
  }
  .tc-page-header--banner { padding: 28px 14px; min-height: 200px; }
  .tc-page-header__logo { --tc-header-logo-h: 60px; }
  .tc-page-header--compact { padding: 18px 12px 12px; }
  .tc-page-header__title { font-size: var(--tc-text-2xl, 1.6rem); letter-spacing: 0.5px; }
  .tc-page-header__meta { font-size: var(--tc-text-sm, 0.88rem); gap: 8px; }
  .tc-page-header__actions { width: 100%; }
}

/* Reduced motion: Progress-Transition aus (Token ist dort schon 0ms,
   diese Regel ist Sicherheitsnetz fuer Direkt-Transitions) */
@media (prefers-reduced-motion: reduce) {
  .tc-page-header__progress-fill { transition: none; }
}

/* === STOERER ==============================================================
 * .tc-page-header__nudge — kleiner Hinweis, der IM Seitenkopf liegt
 *
 * Fuer Angebote, die nicht dringend sind, aber sichtbar bleiben sollen:
 * Push einrichten, neue Version, Termin offen. Vorher war das ein eigener
 * Kasten unter dem Kopf — der kostete eine volle Zeile fuer eine Sache,
 * die niemand angefordert hat.
 *
 * Tim am 12.08.2026: "Push Ding kannst du als Störer drauflegen ODER als
 * Modal aufmachen." Stoerer, weil ein Modal beim Betreten der Seite fuer
 * ein Angebot unterbricht, das warten kann. Die ausfuehrliche Anleitung
 * oeffnet sich beim Antippen ohnehin als Modal — die Tiefe ist da, sie
 * draengt sich nur nicht auf.
 *
 * Sitzt oben RECHTS: Banner-Motive haben ihr Hauptmotiv links (so die
 * Bildvorgabe in Taskwerk #227), und der Titel steht darunter.
 *
 * Markup:
 *   <div class="tc-page-header__nudge">
 *     <button class="tc-page-header__nudge-btn">🔔 <span>Text</span></button>
 *     <button class="tc-page-header__nudge-zu" aria-label="Ausblenden">×</button>
 *   </div>
 * ========================================================================= */

/* Der Kind-Selektor ist Absicht und kein Zierrat: Weiter oben steht
   `.tc-page-header > *:not(.tc-page-header__banner-img) { position: relative }`,
   um die Inhalte ueber das Bild zu heben. Diese Regel hat zwei Klassen und
   schlaegt ein einfaches `.tc-page-header__nudge` — der Stoerer landete
   dadurch mittig im Fluss statt in der Ecke. */
.tc-page-header > .tc-page-header__nudge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: stretch;
  max-width: calc(100% - 24px);
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  overflow: hidden;
  animation: tc-nudge-auf 320ms var(--tc-ease-out, ease-out) 600ms backwards;
}

.tc-page-header__nudge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tc-touch-min, 36px);
  padding: 0 4px 0 12px;
  border: 0;
  background: none;
  color: var(--tc-text-default, #ddd);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm, 0.85rem);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color var(--tc-motion-fast, 160ms) var(--tc-ease-out, ease);
}

.tc-page-header__nudge-btn:hover,
.tc-page-header__nudge-btn:focus-visible {
  color: var(--tc-highlight, #d4c4a0);
  outline: none;
}

.tc-page-header__nudge-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das Schliessen-Kreuz traegt volle Trefferbreite, sieht aber schmal aus. */
.tc-page-header__nudge-zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tc-touch-min, 36px);
  min-height: var(--tc-touch-min, 36px);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  background: none;
  color: var(--tc-text-muted, #999);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--tc-motion-fast, 160ms) var(--tc-ease-out, ease),
              background var(--tc-motion-fast, 160ms) var(--tc-ease-out, ease);
}

.tc-page-header__nudge-zu:hover,
.tc-page-header__nudge-zu:focus-visible {
  color: var(--tc-text-strong, #fff);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

@keyframes tc-nudge-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Am Handy bleibt nur das Symbol: Ein Stoerer, der ueber die halbe Breite
   laeuft, ist kein Stoerer mehr, sondern ein Banner mit anderer Optik.
   Der Text steht weiter im aria-label und im title. */
@media (max-width: 600px) {
  .tc-page-header__nudge-btn {
    padding: 0 2px 0 10px;
    font-size: 1.1rem;
  }
  .tc-page-header__nudge-btn > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-page-header__nudge { animation: none; }
  .tc-page-header__nudge-btn,
  .tc-page-header__nudge-zu { transition: none; }
}