/* ============================================================
   base.css — Reset, Typografie, Layout, Header/Footer-Grundstil
   Laedt NACH tokens.css, VOR sections.css + skeleton.css.
   Hier KEINE Skelett-Box-Optik — nur normales, sichtbares Styling.
   Sektions-HINTERGRUENDE (Glow) kommen ausschliesslich aus sections.css.
   ============================================================ */

/* --- Reset --- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--surface-warm);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

ul,
ol{ margin:0; padding:0; list-style:none; }

button{ font-family:inherit; cursor:pointer; }

/* --- Layout --- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* --- Typografie-Stufen (Major-Third-Scale aus tokens.css) --- */
.kicker{
  font-family:var(--font-kicker);
  font-weight:600;
  font-style:italic;
  font-size:var(--t-kicker);
  line-height:1.2;
  color:var(--ink-soft);             /* gedaempft — Orange-Akzent NUR via .hl auf einzelnen Woertern */
  letter-spacing:0.01em;
}
.kicker--hero{ font-size:var(--t-kicker-hero); }

/* Orange-Highlight — NUR fuer EINZELNE Woerter in Kicker/Headline. Sehr sparsam (60-30-10). */
.hl{ color:var(--orange); }                       /* auf DUNKEL */
.section--cream .hl{ color:var(--orange-deep); }  /* auf HELL/Creme */

h1,
h2,
h3{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 0.4em;
  line-height:var(--lh-tight);
}

h1{ font-weight:700; font-size:var(--t-h1); letter-spacing:-0.015em; }
h2{ font-weight:740; font-size:var(--t-h2); letter-spacing:-0.005em; }
h3{ font-weight:700; font-size:var(--t-h3); }

/* Praesentations-Stufen als Hilfsklassen (Werte aus tokens.css / Uebergabe §3.3) */
.t-hero{
  font-family:var(--font-head); font-weight:760; font-size:var(--t-hero);
  line-height:var(--lh-tight); letter-spacing:-0.02em; margin:0 0 0.3em;
}
.t-display{
  font-family:var(--font-head); font-weight:700; font-size:var(--t-display);
  line-height:1.1; margin:0 0 0.35em;
}
.lead{ font-size:var(--t-lead); font-weight:500; line-height:1.45; }
.caption{ font-size:var(--t-caption); font-weight:500; opacity:0.7; }

p{ margin:0 0 1em; max-width:68ch; }

/* --- Sektionen --- Farb-/Textregeln; GLOW-Hintergruende liefert sections.css --- */
.section{ padding:var(--section-y) 0; }

.section--dark{ color:var(--ink-invert); }
.section--dark h1,
.section--dark h2,
.section--dark h3{ color:var(--ink-invert); }
.section--dark .kicker{ color:rgba(255,255,255,0.90); }   /* hell — NICHT orange */

.section--cream{ color:var(--ink); }
.section--cream .kicker{ color:var(--ink-soft); }          /* gedaempft — NICHT orange */

/* --- Button-System (aus index.html: Haupt-CTA = heller Pill; Orange ist KEINE Flaeche) --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;   /* UX-Regel (UEBERGABE V2 §1.8): Primaer-CTA ≥56px, Zielgruppe 50+ */
  padding:0 24px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.01em;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
/* Haupt-CTA auf DUNKEL: heller Pill */
.btn--primary{ background:rgba(255,255,255,0.96); color:var(--blue-deep); box-shadow:0 12px 30px rgba(0,0,0,0.16); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,0.22); }
/* Sekundaer auf DUNKEL: transparenter Pill mit Rand */
.btn--ghost{ background:rgba(255,255,255,0.06); color:var(--white); border-color:rgba(255,255,255,0.20); }
.btn--ghost:hover{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.30); }
/* Haupt-CTA auf CREME/HELL: dunkler Pill */
.btn--on-light{ background:var(--blue-deep); color:var(--white); box-shadow:0 12px 30px rgba(7,17,29,0.14); }
.btn--on-light:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(7,17,29,0.20); }

/* ============================================================
   HEADER — Original-Designsprache (Phase 1, 2026-06-11)
   Quelle der Sprache: site/index.html (.site-header/.main-nav/.site-footer):
   solide #13283F-Leiste, Haarlinie rgba(255,255,255,0.08), Montserrat
   0.95rem, gedaempftes Weiss, EINZIGE Orange-Stellen = aktiver/Hover-Link
   + aktiver Sprach-Button (UEBERGABE V2 §1.3/§4.4).
   Varianten:
   - Standard (Unterseiten): solide, sticky von Anfang an.
   - .site-header--transparent (Startseite, Phase 4): transparent ueber
     dem Hero, verdichtet sich per .is-scrolled zur soliden Leiste.
   - .site-header--brand-right: Wortmarke rechts, Nav links (GATE 1).
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--blue-deep);
  color:var(--ink-invert);
  border-bottom:1px solid rgba(255,255,255,0.08);   /* Haarlinie wie Original-Footer */
  transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Startseiten-Variante: schwebt transparent ueber dem Hero … */
.site-header--transparent{
  background:transparent;
  border-bottom-color:transparent;
}
/* … und verdichtet sich beim Scrollen zur soliden Leiste (V2 §4.4) */
.site-header--transparent.is-scrolled{
  background:var(--blue-deep);
  border-bottom-color:rgba(255,255,255,0.08);
  box-shadow:0 10px 28px rgba(7,17,29,0.22);
}

.site-header__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
  min-height:78px;                /* Original .header-inner */
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* Sprachen aussen | Nav zentriert | Wortmarke aussen */
  align-items:center;
  gap:24px;
}

/* Drei-Zonen-Header (Inhaber 2026-07-05): Wortmarke + Sprachen aussen, Nav mittig.
   Default = Wortmarke LINKS / Sprachen rechts; Variante B (alle Live-Unterseiten) spiegelt. */
.site-header--brand-right .site-header__brand{ grid-column:3; justify-self:end; }
.site-header--brand-right .site-header__inner .lang-switch{ grid-column:1; justify-self:start; }
/* Alle drei Zonen in EINE Zeile zwingen — sonst schiebt die Grid-Auto-Platzierung die
   Spalten 3/2/1 (DOM-Reihenfolge Wortmarke, Nav, Sprachen) in drei Zeilen (Fix 05.07.). */
.site-header__inner > *{ grid-row:1; }

.site-header__brand{
  display:inline-flex;
  align-items:center;
  min-height:48px;                /* Touch-Target (UX §2) */
  grid-column:1;                  /* aussere Zone; Variante B ueberschreibt auf 3 */
  justify-self:start;
}
.site-header__logo{
  height:34px;                    /* Wortmarke pur (~5:1) → ruhige Leisten-Groesse */
  width:auto;
  display:block;
  opacity:0.96;
}
.site-header__brand:hover .site-header__logo{ opacity:1; }

/* .site-header__right SUPERSEDED 2026-07-05: Header ist jetzt ein 3-Zonen-Grid
   (Sprachen | Nav | Wortmarke); nav + Sprach-Switcher haengen direkt im .site-header__inner.
   Regeln entfernt — kein Live-Markup erzeugt dieses Element mehr. */

.site-nav{
  display:flex;
  align-items:center;
  gap:8px;
  grid-column:2;                  /* mittige Zone */
  justify-self:center;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:48px;                /* Touch-Target ≥48px (UX §2) */
  padding:0 12px;
  color:rgba(255,255,255,0.84);   /* wie Original .main-nav */
  font-family:var(--font-head);
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.01em;
  transition:color 0.2s ease;
}
.site-nav a:hover{ color:var(--orange); }       /* erlaubte Orange-Stelle (V2 §4.4) */
.site-nav a.is-active{ color:var(--orange); }

/* --- Sprach-Switcher (Header & Footer gleich) ---
   Kein Flaechen-Orange (V2 §1.3) — aktiv = oranger TEXT (5.05:1 auf #13283F). */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
/* Header-Platzierung: Sprachen in die aussere Zone (Default rechts; Variante B links).
   Footer-.lang-switch bleibt unberuehrt (steht dort im Flex-Meta, ignoriert grid-column). */
.site-header__inner .lang-switch{ grid-column:3; justify-self:end; }

.lang-switch button{
  background:transparent;
  border:none;
  min-height:48px;                /* Touch-Target */
  min-width:44px;
  padding:0 6px;
  color:rgba(255,255,255,0.62);
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.08em;
  transition:color 0.18s ease;
}
.lang-switch button:hover{ color:var(--ink-invert); }
.lang-switch button.is-active{ color:var(--orange); }

/* ============================================================
   FOOTER — Original-Designsprache: ruhig, zentriert, blue-deep,
   Haarlinie oben, gedaempftes Weiss, Hover → Weiss (wie Original).
   Inhalt (V2 §4.4): komplette Nav + Legal + Social + Sprach-Switcher
   + Newsletter-Mini-Form (STRAT-24 Punkt 4). Keine Sackgassen.
   ============================================================ */
.site-footer{
  background:var(--blue-deep);
  color:rgba(255,255,255,0.70);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:56px 0 36px;
}

.site-footer__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}

/* Reihe 1 — Hauptnavigation (wie Original .footer-nav) */
.site-footer__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.95rem;
}
.site-footer__nav a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 10px;
  color:rgba(255,255,255,0.70);
  font-family:var(--font-head);
  font-weight:500;
  transition:color 0.2s ease;
}
.site-footer__nav a:hover{ color:var(--white); }  /* Original-Hover: WEISS */

/* Reihe 2 — Newsletter-Mini-Form (STRAT-24): max. 2 Elemente + Label */
.site-footer__newsletter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.site-footer__newsletter-label{
  font-family:var(--font-kicker);
  font-style:italic;
  font-weight:600;
  font-size:1.05rem;
  color:rgba(255,255,255,0.80);
}
.site-footer__newsletter-input{
  min-height:48px;
  width:300px;
  padding:0 18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:var(--radius-pill);
  color:var(--white);
  font-family:var(--font-body);
  font-size:0.95rem;
  outline:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.site-footer__newsletter-input::placeholder{ color:rgba(255,255,255,0.40); }
.site-footer__newsletter-input:focus{
  border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.09);
}
.site-footer__newsletter .btn{
  min-height:48px;                /* kompakter Footer-Pill (Haupt-CTA-Regel gilt fuer Hero) */
  padding:0 22px;
  font-size:0.92rem;
}

/* Reihe 3 — Meta: Legal · Social · Sprache (kleiner, leiser) */
.site-footer__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:0.85rem;
}
.site-footer__group{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.site-footer__meta a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 8px;
  color:rgba(255,255,255,0.55);
  font-family:var(--font-head);
  font-weight:500;
  transition:color 0.2s ease;
}
.site-footer__meta a:hover{ color:var(--white); }
.site-footer__dot{
  color:rgba(255,255,255,0.30);
  user-select:none;
}

/* Reihe 4 — Copyright-Caption */
.site-footer__copyright{
  margin:0;
  font-size:0.82rem;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.45);
  text-align:center;
}