/* ============================================================================
 * 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)
 *   --szene        ein gemaltes Szenenbild, der Text unten davor (#789)
 * ============================================================================ */

/* === 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 als __banner-img <img>-Layer (siehe unten).
   ⚠️ NICHT als Inline-`background-image` am Block (#1009, 09.10.2026): Das
   ersetzt die Bildliste unten, in der die Abdunklung steht — uebrig bleibt
   das blanke Bild in voller Helligkeit unter hellem Text. So stand es auf
   der Spielerseite, bis Tim fragte, warum sein Profil so aussieht.

   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);
}

/* ⚠️ `[hidden]` VERLIERT GEGEN DAS `display: flex` DARUEBER (#733). Der
   Untergrund blendet sein Banner ueber einem Raum aus; mit dem Attribut allein
   stand es gemessen weiter da (200 px). Dieselbe Falle wie beim
   Geburtstagskuchen — die Zeile ist Pflicht, nicht Zierrat. */
.tc-page-header[hidden] { display: none; }

/* 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);
}

/* === SZENE (26.09.2026, #789) ============================================= */
/* Ein geliefertes Szenenbild (TC.Szenenbild in js/tc-ui.js) als Kopf: das
   Bild steht oben klar, nach unten laeuft es in den dunklen Grund aus, und
   dort stehen Titel und Unterzeile. Benutzt im Friedhof-Fenster des
   Mordheim-Kaders und auf join.html / activate.html.

   ⚠️ DIE DECKKRAFT ALLEIN REICHT NICHT — gemessen, nicht geschaetzt. Mit
   `opacity` auf dem ganzen Bild stand die Unterzeile im Friedhof bei 1,7 : 1:
   Die Kreidestriche an der Mauer sind fast weiss, und gelesen wird auch das
   Zeichen ueber dem hellsten Strich. Eine Deckkraft, die DAS dunkel genug
   macht, laesst vom Bild nichts uebrig. Deshalb eine Maske: oben das Bild,
   hinter der Schrift fast nur noch der Grund.
   Gemessen am hellsten Bildpunkt hinter jeder Textzeile, bei 375 und
   1280 px, mit ausgeblendeter Schrift (Abnahme #789). Wer die Maske
   aufhellt oder ein helleres Bild einsetzt, misst neu. */
.tc-page-header--szene {
  justify-content: flex-end;
}
.tc-page-header--szene .tc-page-header__banner-img {
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 22%,
    rgba(0, 0, 0, 0.30) 52%,
    rgba(0, 0, 0, 0.10) 72%,
    rgba(0, 0, 0, 0.06) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 22%,
    rgba(0, 0, 0, 0.30) 52%,
    rgba(0, 0, 0, 0.10) 72%,
    rgba(0, 0, 0, 0.06) 100%);
}
.tc-page-header--szene .tc-page-header__subtitle { text-wrap: balance; }

/* === 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;
}

/* Das Beiwort hinter dem Namen („Timmay, Unsterblich", #1119) steht als
   .tc-page-header__beiwort in schmuck.css: Gebaut wird es von
   TC.Schmuck.kopfName (js/tc-ui.js), und schmuck.css liegt auf jeder Seite,
   die tc-ui.js lädt (tools/reichweite.py). */

/* 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-duration-fast, 120ms) 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-duration-fast, 120ms) var(--tc-ease-out, ease),
              background var(--tc-duration-fast, 120ms) 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-duration: 0.01ms;
 animation-iteration-count: 1;
 animation-delay: -1ms; }
  .tc-page-header__nudge-btn,
  .tc-page-header__nudge-zu { transition: none; }
}