/* ==========================================================================
   Southframe — Base Styles
   Grundformatierung, Typografie-System, Container-System, Fokus-States.
   Mobile First: Basiswerte gelten ab 320px, Erweiterungen in responsive.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Space Grotesk (Sprint 3.5) — lokal gehostet, WOFF2, nur 3 Schnitte.
   SIL Open Font License 1.1, siehe /assets/fonts/OFL.txt.
   Kein Google-Fonts-/CDN-Request — Datei liegt vollständig lokal im Projekt.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Sprint 4 Bugfix 15: Sicherheitsnetz gegen lange deutsche Komposita
     (z. B. "Suchmaschinenoptimierung", "Unternehmenswebsites") in
     schmalen Containern (2-spaltige Mobile-Grids bei 320px). Bewusst
     KEIN overflow-x:hidden auf body/html — das würde den sticky Header
     in mehreren Browsern zerstören (bekannte CSS-Falle bei sticky
     Vorfahren mit overflow ≠ visible). overflow-wrap ist unschädlich
     für sticky/Layout und bricht nur, falls ein Wort wirklich zu breit
     für seinen Container wird. */
  overflow-wrap: break-word;
}

/* --- Typografie-System ----------------------------------------------------- */

h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

h3,
.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
}

/* Sprint 4 Bugfix 1 (KRITISCH) — Root-Cause-Fix:
   Es gab hier zuvor eine Regel "p { color: var(--color-text); }". Das war
   REDUNDANT (body setzt --color-text bereits, color vererbt sich von
   Natur aus) und gleichzeitig der Grund für einen kritischen Bug: jede
   <p>-Direktregel schlägt eine ererbte Farbe, unabhängig von der
   Spezifität des Vorfahren. Dadurch wurden ALLE <p>-Tags in dunklen
   Kontexten (Plattform-Berater: "Am besten für"/"Typischer Kunde"-Werte;
   Business-Pricing-Card-Beschreibung; Footer-Copyright) auf fast
   schwarzen Text auf fast schwarzem Hintergrund gezwungen —
   unsichtbar/unlesbar, exakt der gemeldete Bug. Einzelne <p>-Elemente
   wurden bislang mit Inline-Styles oder Einzel-Overrides notdürftig
   korrigiert (siehe .platform-panel__subline, .lead-Inline-Style im
   Markup) statt die Ursache zu beheben — das war Symptombehandlung.
   Diese Regel ist jetzt entfernt; <p> erbt seine Farbe korrekt vom
   jeweiligen Vorfahren (body = hell, .section--dark/.platform-section/
   .pricing-card--featured = dunkel). Keine funktionale Änderung für
   helle Sections (dort war/ist die geerbte Farbe ohnehin identisch). */

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 42ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

/* Eyebrow-Variante auf Dark Sections nutzt denselben Akzentton —
   Kontrast wurde gegen --color-dark geprüft (siehe README, Accessibility). */
.section--dark .eyebrow {
  color: var(--color-accent);
}

.text-muted {
  color: var(--color-muted);
}

.section--dark .text-muted {
  color: var(--color-dark-muted);
}

/* Sprint 4 Bugfix 1 (Ergänzung): fehlende Dark-Variante für .lead nachgerüstet
   — vorher wurde das nur mit einem Inline-Style an einer einzigen Stelle
   notdürftig gelöst (siehe Entfernung weiter unten im HTML). */
.section--dark .lead {
  color: var(--color-dark-muted);
}

/* --- Container-System -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* --- Section-Rhythmus (vertikaler Abstand zwischen Sections) ---------------- */

.section {
  /* Sprint 2: fluide Spacing statt fixer Breakpoint-Sprünge, siehe
     variables.css (--space-section) und Brief §5. */
  padding-block: var(--space-section);
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}

.section--soft {
  background: var(--color-bg-soft);
}

.section__head {
  margin-bottom: var(--space-lg);
}

.section__head .eyebrow {
  margin-bottom: var(--space-sm);
}

.section__head h2 {
  margin-bottom: var(--space-sm);
}

/* --- Skip Link (Accessibility §7) ------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  background: var(--color-dark);
  color: var(--color-dark-text);
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0%);
}

/* --- Sichtbare Fokus-States (Klasse-A-Anforderung, Accessibility Master) ---- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Auf dunklem Grund denselben Fokusring verwenden — Kontrastprüfung siehe
   README (Gold auf #0a0a0a erfüllt WCAG-Non-Text-Kontrast 3:1). */
.section--dark a:focus-visible,
.section--dark button:focus-visible {
  outline-color: var(--color-accent);
}

/* --- Visually hidden (für sr-only Inhalte, ARIA-Ergänzungen) ---------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Placeholder-Sections (Sprint 2+, siehe README) ------------------------- */

.section--placeholder {
  border-top: 1px solid var(--color-border);
}

.section--placeholder .section__head {
  margin-bottom: 0;
}

.section--placeholder .placeholder-note {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-muted);
}