/* ═══════════════════════════════════════════════════════════════════
   SuppTree App-Header-System — Cross-App-Konsistenz
   ═══════════════════════════════════════════════════════════════════
   Stand 12.05.2026

   Verwendung:
   <link rel="stylesheet" href="../shared/supp-header.css?v=1">

   2 Header-Typen:
   1. .supp-hero-header     — Tab-Root-Screens (große Hauptsection)
   2. .supp-sub-header      — Sub-Screens (zurück + Titel + optional Action)

   CSS-Custom-Properties (überschreibbar):
   --supp-hero-pad-y, --supp-hero-pad-x
   --supp-sub-pad-y, --supp-sub-pad-x
   --supp-hero-title-size, --supp-sub-title-size
   --supp-hero-gradient
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --supp-hero-pad-y: 26px;
  --supp-hero-pad-x: 22px;
  --supp-sub-pad-y: 14px;
  --supp-sub-pad-x: 16px;
  --supp-hero-title-size: 28px;
  --supp-hero-subtitle-size: 13px;
  --supp-sub-title-size: 17px;
  --supp-hero-gradient: linear-gradient(135deg,#0b1220 0%,#1a2845 45%,#0d4a3c 100%);
  --supp-hero-min-h: 96px;
  --supp-sub-min-h: 56px;
  --supp-display-font: 'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ─── HERO-HEADER (Tab-Root) ─── */
.supp-hero-header {
  background: var(--supp-hero-gradient);
  padding: var(--supp-hero-pad-y) var(--supp-hero-pad-x) calc(var(--supp-hero-pad-y) + 6px);
  position: relative;
  overflow: hidden;
  min-height: var(--supp-hero-min-h);
  display: flex;
  align-items: center;
  color: #fff;
  box-sizing: border-box;
}
.supp-hero-header::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(16,185,129,0.22), transparent 70%);
  pointer-events: none;
}
.supp-hero-header > * {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.supp-hero-header h1,
.supp-hero-header .supp-hero-title {
  font-family: var(--supp-display-font);
  font-size: var(--supp-hero-title-size);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
.supp-hero-header p,
.supp-hero-header .supp-hero-subtitle {
  font-size: var(--supp-hero-subtitle-size);
  opacity: 0.78;
  margin: 4px 0 0;
  color: #fff;
}
.supp-hero-header .supp-hero-back,
.supp-hero-header > button:first-child {
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  color: #fff;
  flex: 0 0 auto;
}

/* ─── SUB-HEADER (Sub-Screens) ─── */
.supp-sub-header {
  padding: var(--supp-sub-pad-y) var(--supp-sub-pad-x);
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--supp-sub-min-h);
  box-sizing: border-box;
}
.supp-sub-header > button:first-child,
.supp-sub-header .supp-sub-back {
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  color: #64748b;
  flex: 0 0 auto;
}
.supp-sub-header > div[class*="flex"],
.supp-sub-header .supp-sub-titles {
  flex: 1;
  min-width: 0;
}
.supp-sub-header h1,
.supp-sub-header .supp-sub-title,
.supp-sub-header [class*="title"] {
  font-family: var(--supp-display-font);
  font-size: var(--supp-sub-title-size);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  color: #0b1220;
}
.supp-sub-header .supp-sub-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}

/* Dark-Mode Sub-Header */
body.dark-mode .supp-sub-header {
  background: #0f1525;
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .supp-sub-header > button:first-child { color: rgba(255,255,255,0.7); }
body.dark-mode .supp-sub-header h1,
body.dark-mode .supp-sub-header .supp-sub-title { color: #fff; }
body.dark-mode .supp-sub-header .supp-sub-eyebrow { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════════════════════
   CROSS-APP-NORMALISIERUNG: alle existierenden Header-Klassen
   ueber alle Sub-Apps auf 108px Standard-Hoehe bringen.
   ═══════════════════════════════════════════════════════════════════ */

/* fit          → .fit-header                                            */
/* shop, kunde,
   gesundheit,
   seele        → .supptree-app-bar (shared component)                   */
/* partner      → .header (top-level only, .header-top sub)              */
/* ernaehrung   → .nut-header                                            */
/* beratung,
   connect      → header.topbar                                          */
/* admin        → .header                                                */
/* bgm          → .bgm-topbar                                            */
/* gesundheit   → .today-header (sub-screen)                             */

.fit-header,
.supptree-app-bar,
.nut-header,
.today-header,
.bgm-topbar,
header.topbar,
.screen > .header,
.screen.active > .header {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
/* Header-Innencontent muss flex sein damit Layout passt */
.screen > .header > .header-top,
.screen.active > .header > .header-top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Inner-Padding bleibt App-spezifisch (Gradient sollte sichtbar bleiben) */
.fit-header        { padding-left: 22px !important; padding-right: 22px !important; }
.supptree-app-bar  { padding-left: 18px !important; padding-right: 18px !important; }
.nut-header        { padding-left: 18px !important; padding-right: 18px !important; }
.today-header      { padding-left: 18px !important; padding-right: 18px !important; }
.bgm-topbar        { padding-left: 20px !important; padding-right: 20px !important; }
header.topbar      { padding-left: 18px !important; padding-right: 18px !important; }

/* Title-Sizes konsistent (Shop-Standard 21px, gleiche Hoehe ueberall) */
.fit-header h1,
.supptree-app-bar h1,
.supptree-app-bar [class*="title"],
.nut-header h1,
.today-header h1,
.bgm-topbar h1,
header.topbar h1,
header.topbar [class*="title"],
.screen > .header h1,
.screen.active > .header h1 {
  font-family: var(--supp-display-font) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Subtitle konsistent (11.5px — kompakter, gut lesbar) */
.fit-header p,
.supptree-app-bar p,
.supptree-app-bar [class*="subtitle"],
.nut-header p,
.today-header p,
.bgm-topbar p,
header.topbar p,
.screen > .header p,
.screen.active > .header p {
  font-size: 11.5px !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  opacity: 0.82 !important;
  line-height: 1.25 !important;
}

/* Header bekommt automatisch radial-glow wenn er dark ist */
.fit-header::before,
.supptree-app-bar::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(16,185,129,0.18), transparent 70%);
  pointer-events: none;
}
.supptree-app-bar { position: relative; overflow: hidden; }

/* ─── STATUS-BAR-SPACER cross-app vereinheitlichen ─── */
/* Hoehe, Position und SICHTBARKEIT ueberall gleich.
   Manche Apps hatten display:none default — durch !important + block
   zwingen wir konsistente Sichtbarkeit ueber alle 11 Apps. */
.status-bar-spacer,
body .status-bar-spacer {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 33px !important;
  z-index: 999999 !important;
  background: #0b1220 !important;
  box-sizing: border-box !important;
}
/* Body braucht 33px padding-top damit Content nicht unter dem Spacer
   verschwindet. Niedrige Spezifitaet — wird von App-eigenem padding-top
   (z.B. gesundheit 113px fuer mehrere fixed Bars) ueberschrieben. */
body { padding-top: 33px; }

/* ─── Inline-Title-Styles cross-app ueberschreiben ─── */
/* Sicherheit: alle h1/title innerhalb der bekannten Header-Klassen
   bekommen mit hoher Spezifitaet die Standard-Groesse 19px. Selbst
   wenn sie inline-styles haben, gewinnt unser CSS dank doppelter
   Klassen-Selektoren (Spezifitaet 0,1,1) gegen den inline-style + !important. */
div.supptree-app-bar h1,
div.supptree-app-bar [class*="title"],
div.fit-header h1,
div.nut-header h1,
div.today-header h1,
div.bgm-topbar h1,
header.topbar h1,
.screen > div.header h1,
.screen.active > div.header h1 {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
div.supptree-app-bar p,
div.supptree-app-bar [class*="subtitle"],
div.fit-header p,
div.nut-header p,
div.today-header p,
div.bgm-topbar p,
header.topbar p,
.screen > div.header p,
.screen.active > div.header p {
  font-size: 11.5px !important;
  margin: 2px 0 0 !important;
  opacity: 0.82 !important;
  line-height: 1.25 !important;
  /* Subtitle bekommt einen festen max-Wert damit sie bei allen drei
     Apps gleichmäßig 2-zeilig wrappt — ungeachtet der Container-Breite. */
  max-width: 140px;
  white-space: normal;
}

/* Body-Padding adjustment: wegen 33px status-bar-spacer + 108px Header = 141px gesamt
   Aber app-bars sind nicht fixed sondern static — also keine padding noetig.
   Falls Apps fixed-Header haben, brauchen sie eigenes margin-top auf body. */

/* ═══════════════════════════════════════════════════════════════════
   EINHEITLICHES TITLE-LAYOUT: 'SuppTree' (klein, oben) + AppName (groß, unten)
   Markup-Pattern (in allen 3 Apps konsistent):
     <h1>
       <span class="st-brand st-brand-on-dark">SuppTree</span>
       <span class="header-app-name">Fit/Shop/Seele</span>
     </h1>
   ═══════════════════════════════════════════════════════════════════ */
div.fit-header h1,
div.supptree-app-bar h1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* "SuppTree" — Fraunces-Serif-Wordmark (einheitlich mit ernaehrung/shop). */
div.fit-header h1 .st-brand,
div.supptree-app-bar h1 .st-brand {
  font-family: 'Fraunces','Georgia',serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  opacity: 0.92;
  display: inline-flex !important;
  align-items: center;
  line-height: 1.1 !important;
}
/* AppName — Fraunces Serif, gleich groß, fett — hebt sich durch Schrift ab.
   padding-left gleicht den Logo-Icon-Versatz vor 'SuppTree' aus (1em Icon
   + 0.32em margin-right = 1.32em), damit beide Zeilen bündig starten. */
div.fit-header h1 .header-app-name,
div.supptree-app-bar h1 .header-app-name {
  font-family: 'Fraunces','Georgia',serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.1 !important;
  color: #fff !important;
  padding-left: 1.32em !important;
}

/* fit-header folgt dem 88px-Standard (siehe Hoehen-Block oben) — der frueher
   hier gesetzte Sonderfall (96px + padding-top 18+33) machte den Balken doppelt
   so hoch wie bei allen anderen Apps (33px Status-Clearance lief schon ueber
   body padding-top + fixed .status-bar-spacer, war also doppelt gezaehlt). */

/* App-Switcher-Trigger (shared/app-dropdown.js legt Titel + Subtitle + Pfeil in
   eine Flex-Zeile): der Titel darf NIE schrumpfen, sonst laeuft "SuppTree" ueber
   den Subtitle (passierte in beratung: langer Subtitle + zwei Action-Buttons →
   zu wenig Platz → h1 gestaucht). Titel behaelt volle Breite, Subtitle weicht. */
.supptree-app-dd-trigger h1 { flex-shrink: 0 !important; }
.supptree-app-dd-trigger p { min-width: 0 !important; }