/*
 * GO:BETTER — Shell (Nav + Footer)
 * gb-shell.css · v1.0 · lädt NACH tokens.css und web.css
 *
 * Globale Kopfzeile und Fußzeile für alle Nicht-Startseiten.
 * Startseite hat ihre eigene, inline gehaltene Fassung — die hier greift auf
 * allen anderen Seiten (Produkt, Legal, Akademie, Beta, Styleguide).
 * Farben stammen aus tokens.css; die Shell ist theme-neutral: sie folgt der
 * aktiven Palette der Seite. Auf Seiten die dark bleiben (z. B. Product-Seiten
 * mit data-level="product") sitzen Nav und Footer im dunklen Guss;
 * auf Seiten die im Light-Mode laufen, kippen sie automatisch mit.
 */

/* ── Wortmarke ── */
.gb-wm { display: inline-flex; align-items: baseline; font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); text-decoration: none; }
.gb-wm .k { margin-right: -0.01em; }
.gb-wm svg { display: block; height: 0.71em; width: 0.33em; margin: 0 0.045em 0 0.055em; }
.gb-wm svg circle { fill: currentColor; }

/* ── Nav ──
 * fixed positioniert: die Bestandsseiten reservieren im Content-padding-top
 * bereits Platz für eine fest oben stehende Leiste (alte `nav { position: fixed }`).
 * Sitzt die neue Shell im Flow, verdoppelt sich der Freiraum oben.
 */
.gb-nav-wrap { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.gb-nav { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gb-nav-left { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.gb-nav-wm { font-size: 19px; padding: 22px 0; }
.gb-nav-links { display: flex; gap: 22px; align-self: stretch; flex-wrap: wrap; }
.gb-nav-links > a, .gb-nav-item > a { display: flex; align-items: center; font-size: 14px; color: var(--color-text-muted); box-shadow: inset 0 -2px 0 transparent; transition: color 200ms var(--motion-ease, cubic-bezier(0.2,0,0,1)); text-decoration: none; }
.gb-nav-links > a:hover, .gb-nav-item > a:hover { color: var(--color-text); }
.gb-nav-right { display: flex; align-items: center; gap: 20px; padding: 14px 0; margin-left: auto; }
.gb-nav-right a:not(.gb-btn) { font-size: 14px; color: var(--color-text-muted); text-decoration: none; }
.gb-nav-right a:not(.gb-btn):hover { color: var(--color-text); }

/* Dropdown (Fair Value Pro → Übersicht/Pro Mode/Daten-Quelle) */
.gb-nav-item { position: relative; align-self: stretch; display: flex; align-items: center; }
.gb-nav-item > a::after { content: '⌄'; font-size: 12px; margin-left: 4px; color: var(--color-text-disabled); transition: transform 200ms var(--motion-ease, cubic-bezier(0.2,0,0,1)); display: inline-block; }
.gb-nav-item:hover > a::after, .gb-nav-item:focus-within > a::after { transform: rotate(180deg); color: var(--color-text); }
.gb-nav-dropdown { display: none; position: absolute; top: 100%; left: -16px; min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 6px 0; z-index: 110; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.gb-nav-item:hover .gb-nav-dropdown, .gb-nav-item:focus-within .gb-nav-dropdown { display: block; }
.gb-nav-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.gb-nav-dropdown a { display: block; padding: 10px 16px; font-size: 14px; color: var(--color-text-muted); text-decoration: none; transition: color 150ms, background 150ms; }
.gb-nav-dropdown a:hover { color: var(--color-text); background: var(--color-surface-2); }

/* Burger (schlicht, ohne Rahmen) */
.gb-nav-burger { display: none; background: transparent; border: none; color: var(--color-text); width: 44px; height: 40px; border-radius: var(--radius-2, 4px); align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.gb-nav-burger:hover { color: var(--color-accent); }
.gb-nav-burger svg { display: block; }
/* .gb-nav-mobile ist ein <nav>-Element und darf NICHTS aus dem alten
 * nav-Reset in style.css (fixed, grid, height 58px, backdrop-filter) erben.
 * Alle betroffenen Properties werden explizit auf sinnvolle Werte gesetzt.
 */
.gb-nav-mobile {
  display: none;
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  height: auto;
  padding: 8px 20px 20px;
  border-top: 1px solid #DEE1E6; border-bottom: none;
  background: #F7F8FA; backdrop-filter: none;
  flex-direction: column;
  grid-template-columns: none;
  align-items: stretch;
  font-family: var(--font-sans);
}
.gb-nav-mobile a {
  display: block;
  color: #0B0D10;
  font-family: var(--font-sans); font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid #DEE1E6;
  text-decoration: none;
}
.gb-nav-mobile a.sub { padding-left: 20px; font-size: 14px; font-weight: 400; color: #555A62; }
.gb-nav-mobile a:last-child { border-bottom: none; }
.gb-nav-mobile a:hover { color: #555A62; }

/* ── Footer ── */
.gb-foot-wrap { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.gb-foot { max-width: 1280px; margin: 0 auto; padding: 48px 32px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.gb-foot-bar { display: flex; gap: 4px; height: 4px; width: 120px; }
.gb-foot-bar span { flex: 1; }
.gb-foot-bar span.fvp { background: var(--web-field-fvp, #2EE59D); }
.gb-foot-bar span.pt  { background: var(--web-field-pt, #F0B42A); }
.gb-foot-bar span.td  { background: var(--web-field-td, #5B8CFF); }
.gb-foot-links { display: flex; gap: 28px; font-size: 13px; color: var(--color-text-muted); flex-wrap: wrap; }
.gb-foot-links a { color: var(--color-text-muted); text-decoration: none; }
.gb-foot-links a:hover { color: var(--color-text); }
.gb-foot-note { font-size: 12px; color: var(--color-text-muted); max-width: 360px; line-height: 1.5; }

/* ── Product-Hero (Fair Value Pro, Portfolio Tracker, Trading Desk) ──
 * Zwei Ausprägungen:
 *   Default (Sub-Seiten pro-mode, daten-quelle, akademie, plaene): textbasiert,
 *   zentriert, ohne Card.
 *   Split (die drei Haupt-Produktseiten): asymmetrisch — links Text-Block,
 *   rechts Product-Card mit Mockup, Product-Farb-Streifen unten.
 * Accent-Farbe kommt aus data-product="fvp|pt|td" via web.css → --web-mood.
 */
.gb-hero-product { background: var(--color-bg); color: var(--color-text); padding: 0; position: relative; border-bottom: 1px solid var(--color-border); overflow: hidden; }
section.gb-hero-product { padding: 0; }
.gb-hero-product .gb-hero-inner { max-width: 900px; margin: 0 auto; padding: 144px 32px 128px; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.gb-hero-product .gb-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.gb-hero-product h1.gb-h1-product { font-family: var(--font-sans); font-size: clamp(44px, 6vw, 80px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; margin: 0; max-width: 820px; text-wrap: balance; color: var(--color-text); }
.gb-hero-product h1.gb-h1-product .accent { color: var(--web-mood, var(--color-accent)); }
.gb-hero-product .gb-hero-sub { font-family: var(--font-sans); font-size: 19px; line-height: 1.5; color: var(--color-text-muted); max-width: 620px; margin: 0; }
.gb-hero-product .gb-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.gb-hero-product .gb-hero-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.gb-hero-product .gb-hero-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; }
.gb-hero-product .gb-hero-pill.is-active { color: var(--web-mood, var(--color-accent)); border-color: var(--web-mood, var(--color-accent)); }
@media (max-width: 719px) {
  .gb-hero-product .gb-hero-inner { padding: 80px 20px 56px; gap: 20px; }
  .gb-hero-product h1.gb-h1-product { font-size: clamp(36px, 10vw, 52px); }
  .gb-hero-product .gb-hero-sub { font-size: 17px; }
}
/* Nur die drei Feature-Produktseiten + FVP-Sub bekommen mehr Luft
 * (FVP/PT/TD/pro-mode/daten-quelle setzen .gb-hero-product--breathe).
 * plaene und akademie behalten die kompakte Default-Variante. */
@media (max-width: 719px) {
  .gb-hero-product--breathe .gb-hero-inner {
    padding: 128px 20px 120px;
    gap: 32px;
    min-height: calc(100dvh - var(--nav-h, 68px));
    justify-content: center;
  }
  .gb-hero-product--breathe h1.gb-h1-product { font-size: clamp(36px, 9vw, 48px); line-height: 1.06; }
  .gb-hero-product--breathe .gb-hero-sub { font-size: 17px; line-height: 1.55; }
  .gb-hero-product--breathe .gb-hero-btns { width: 100%; }
  .gb-hero-product--breathe .gb-hero-btns .gb-btn { flex: 1 1 100%; }
}

/* ── Split-Hero (Haupt-Produktseiten FVP · PT · TD) ── */
.gb-hero-split { position: relative; background: var(--color-bg); color: var(--color-text); overflow: hidden; border-bottom: 1px solid var(--color-border); }
.gb-hero-split .gb-hero-inner-split { max-width: 1280px; margin: 0 auto; padding: 128px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; text-align: left; }
.gb-hero-split .gb-hero-left { display: flex; flex-direction: column; gap: 28px; padding-bottom: 128px; }
.gb-hero-split .gb-eyebrows { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.gb-hero-split .gb-eyebrow-brand { color: var(--web-mood, var(--color-accent)); display: inline-flex; align-items: center; gap: 8px; }
.gb-hero-split .gb-eyebrow-brand::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--web-mood, var(--color-accent)); }
.gb-hero-split h1.gb-h1-product { font-family: var(--font-sans); font-size: clamp(44px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; color: var(--color-text); }
.gb-hero-split .gb-hero-sub { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; color: var(--color-text-muted); max-width: 520px; margin: 0; }
.gb-hero-split .gb-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Rechte Card mit Product-Farb-Rahmen und Mockup-Karte innen */
.gb-hero-split .gb-hero-card-frame { background: var(--web-mood, var(--color-accent)); padding: 40px 24px 0; margin-bottom: -1px; }
.gb-hero-split .gb-hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); font-family: var(--font-sans); }
.gb-hero-split .gb-mockup-topbar { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 20px; }
.gb-hero-split .gb-mockup-topbar-brand { color: var(--web-mood, var(--color-accent)); display: inline-flex; align-items: center; gap: 8px; }
.gb-hero-split .gb-mockup-topbar-brand::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--web-mood, var(--color-accent)); }
.gb-hero-split .gb-mockup-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.gb-hero-split .gb-mockup-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.gb-hero-split .gb-mockup-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); text-align: right; }
.gb-hero-split .gb-mockup-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.gb-hero-split .gb-mockup-value { font-family: var(--font-mono); font-size: 40px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: 20px; }
.gb-hero-split .gb-mockup-chart { position: relative; height: 96px; margin: 8px 0 20px; }
.gb-hero-split .gb-mockup-chart svg { display: block; width: 100%; height: 100%; }
.gb-hero-split .gb-mockup-kpi { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.gb-hero-split .gb-mockup-kpi:last-child { border-bottom: 1px solid var(--color-border); }
.gb-hero-split .gb-mockup-kpi-label { color: var(--color-text-muted); }
.gb-hero-split .gb-mockup-kpi-val { font-family: var(--font-mono); color: var(--color-text); font-variant-numeric: tabular-nums; }
.gb-hero-split .gb-mockup-kpi-val.up { color: #2EE59D; }
.gb-hero-split .gb-mockup-kpi-val.down { color: #F87171; }

/* Farb-Streifen unter dem Hero: schmaler Balken in Product-Farbe */
.gb-hero-split::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--web-mood, var(--color-accent)); }

/* Mobile: Split kollabiert zu Stack */
@media (max-width: 899px) {
  .gb-hero-split .gb-hero-inner-split { grid-template-columns: 1fr; gap: 40px; padding: 80px 20px 0; }
  .gb-hero-split .gb-hero-left { padding-bottom: 32px; gap: 20px; }
  .gb-hero-split h1.gb-h1-product { font-size: clamp(36px, 9vw, 52px); }
  .gb-hero-split .gb-hero-card-frame { padding: 24px 16px 0; }
  .gb-hero-split .gb-mockup-value { font-size: 32px; }
  .gb-hero-split::after { height: 14px; }
}

/* Nav-Aktiv-Indikator: farbiger Unterstrich in Product-Farbe */
.gb-nav-links > a.is-active,
.gb-nav-item.is-active > a { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--web-mood, var(--color-accent)); }

/* ── Section-Bands (Rhythmus für Produktseiten: dark ↔ light ↔ color) ──
 * Als Utility-Klassen an eine <section> gelegt. Sie überschreiben lokal
 * die Farb-Rollen (--color-bg, --color-text, --color-text-muted, --color-
 * border), damit alle Kind-Elemente automatisch mit der Ground-Palette
 * mitgehen — ohne dass jedes einzelne <p>, <h2> etc. angefasst werden
 * muss. Bereits gegen den vererbten var(--bg)-Alias in tokens.css robust.
 */
section.gb-band-dark {
  background: #0B0D10; color: #ECEDEF;
  --color-bg: #0B0D10; --color-surface: #12151A; --color-surface-2: #191D23;
  --color-text: #ECEDEF; --color-text-muted: #9A9FA7; --color-text-disabled: #5A6068;
  --color-border: #262B33; --color-border-strong: #68707B;
  --bg: #0B0D10; --bg2: #12151A; --bg3: #191D23;
  --text: #ECEDEF; --text-2: #9A9FA7; --text-3: #9A9FA7;
  --border: #262B33; --border2: #262B33;
}
section.gb-band-light {
  background: #F7F8FA; color: #111317;
  --color-bg: #F7F8FA; --color-surface: #FFFFFF; --color-surface-2: #EEF0F3;
  --color-text: #111317; --color-text-muted: #555A62; --color-text-disabled: #A3A8AF;
  --color-border: #DEE1E6; --color-border-strong: #7E858F;
  --bg: #F7F8FA; --bg2: #FFFFFF; --bg3: #EEF0F3;
  --text: #111317; --text-2: #555A62; --text-3: #7E858F;
  --border: #DEE1E6; --border2: #DEE1E6;
}
/* Color-Band: Product-Farbe als Grund, Tinte als Text.
 * Setzt --neon-Aliase auf Tinte, damit die Content-Elemente die noch
 * .n-Highlight-Spans nutzen nicht unlesbar werden (grün auf grün etc.). */
section.gb-band-color {
  background: var(--web-mood, var(--color-accent)); color: #0B0D10;
  --color-bg: var(--web-mood, var(--color-accent));
  --color-surface: rgba(11,13,16,0.06); --color-surface-2: rgba(11,13,16,0.10);
  --color-text: #0B0D10; --color-text-muted: rgba(11,13,16,0.78); --color-text-disabled: rgba(11,13,16,0.55);
  --color-border: rgba(11,13,16,0.20); --color-border-strong: #0B0D10;
  --bg: var(--web-mood, var(--color-accent)); --bg2: rgba(11,13,16,0.06); --bg3: rgba(11,13,16,0.10);
  --text: #0B0D10; --text-2: rgba(11,13,16,0.78); --text-3: rgba(11,13,16,0.60);
  --neon: #0B0D10; --mid: #0B0D10;
  --border: rgba(11,13,16,0.20); --border2: rgba(11,13,16,0.28);
  /* Product-Aliase und accent-Tokens auf Tinte biegen, damit Legacy-Klassen
     mit color:var(--pt|--td|--fvp) oder color:var(--color-accent) auf dem
     Product-Band nicht in der Hintergrundfarbe verschwinden. */
  --color-accent: #0B0D10; --color-accent-text: #0B0D10;
  --color-accent-soft: rgba(11,13,16,0.10); --color-accent-border: rgba(11,13,16,0.30);
  --fvp: #0B0D10; --fvp-dim: rgba(11,13,16,0.10); --fvp-border: rgba(11,13,16,0.28);
  --pt:  #0B0D10; --pt-dim:  rgba(11,13,16,0.10); --pt-border:  rgba(11,13,16,0.28);
  --td:  #0B0D10; --td-dim:  rgba(11,13,16,0.10); --td-border:  rgba(11,13,16,0.28);
}
/* PT-Color-Band: Text bleibt schwarz (Base-Regel), aber die Karten-/
 * Surface-Hintergründe kippen auf weiß-transparent — auf dem PT-Gelb
 * wirken schwarze Card-Overlays matschig, weiße Overlays heben die
 * Karten sichtbar ab. */
[data-product="pt"] section.gb-band-color,
section.gb-band-color[data-product="pt"] {
  --color-surface: rgba(255,255,255,0.35); --color-surface-2: rgba(255,255,255,0.50);
  --color-border: rgba(255,255,255,0.35); --color-border-strong: rgba(255,255,255,0.55);
  --bg: rgba(255,255,255,0.35); --bg2: rgba(255,255,255,0.35); --bg3: rgba(255,255,255,0.50);
  --border: rgba(255,255,255,0.35); --border2: rgba(255,255,255,0.50);
}
/* TD-Color-Band: Product-Farbe als Hintergrund bleibt erhalten,
 * die Tinte wechselt auf Weiß (auf dem hellen Blau besser lesbar als
 * Schwarz). FVP-Grün bleibt bei der Base-Regel (schwarze Tinte). */
[data-product="td"] section.gb-band-color,
section.gb-band-color[data-product="td"] {
  color: #FFFFFF;
  --color-surface: rgba(255,255,255,0.10); --color-surface-2: rgba(255,255,255,0.16);
  --color-text: #FFFFFF; --color-text-muted: rgba(255,255,255,0.88); --color-text-disabled: rgba(255,255,255,0.65);
  --color-border: rgba(255,255,255,0.28); --color-border-strong: #FFFFFF;
  --color-accent: #FFFFFF; --color-accent-text: #FFFFFF;
  --color-accent-soft: rgba(255,255,255,0.15); --color-accent-border: rgba(255,255,255,0.40);
  --bg2: rgba(255,255,255,0.10); --bg3: rgba(255,255,255,0.16);
  --text: #FFFFFF; --text-2: rgba(255,255,255,0.88); --text-3: rgba(255,255,255,0.72);
  --neon: #FFFFFF; --mid: #FFFFFF;
  --border: rgba(255,255,255,0.28); --border2: rgba(255,255,255,0.38);
  --td: #FFFFFF; --td-dim: rgba(255,255,255,0.15); --td-border: rgba(255,255,255,0.40);
}
/* Der Wechsel zwischen dark und color-Sektionen bekommt keinen Border
 * (sonst zwei Linien im Farbkontrast); die light-Sektion bekommt einen
 * dezenten oberen Rand als sanfter Übergang. */
section.gb-band-dark + section.gb-band-color, section.gb-band-color + section.gb-band-dark { border-top: none; }
section.gb-band-light { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* Responsive */
@media (max-width: 719px) {
  .gb-nav { padding: 0 20px; gap: 16px; }
  .gb-nav-links { display: none; }
  .gb-nav-right { gap: 10px; }
  .gb-nav-right > a:not(.gb-btn) { display: none; }
  .gb-nav-burger { display: inline-flex; }
  .gb-nav-mobile.is-open { display: flex; }
  /* Nav-CTA auf Mobile schlanker als der Standard-Button —
   * angeglichen an die Homepage-Version (36 px statt 48 px). */
  .gb-nav-right .gb-btn { height: 36px; min-height: 36px; padding: 0 14px; font-size: 13px; }
  .gb-foot { padding: 32px 20px; }
}