/* alternative_style: Outfit/Inter lokal statt über Google-Fonts-CDN (Nutzerwunsch,
   Dateien liegen in fonts/Outfit bzw. fonts/Inter). Variable Fonts statt einzelner
   Static-Weight-Dateien: je ein Dateipaar deckt die komplette Weight-Achse ab
   (Outfit 400–800, Inter 400–700 + Italic für die kursiven Testimonial-Zitate) –
   weniger Dateien/Requests als ein Static-Weight-Satz. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* alternative_style: Token-Werte an new_mockup.html angeglichen; Variablennamen
     bleiben stabil, damit alle bestehenden Referenzen unverändert funktionieren. */
  --ink: #1E2321;
  /* Dunkle Panels bewusst heller & neutraler als new_mockup.html (dort near-black,
     wirkte auf Nutzer zu dunkel/grünlich) – eigene, von --ink entkoppelte Töne,
     damit die Fließtextfarbe (--ink) davon unberührt bleibt. Deutlicherer Abstand
     zwischen Start-/End-Ton + 135deg (statt 160deg), da der Verlauf bei den breiten,
     eher flachen Panels sonst kaum wahrnehmbar war. */
  --ink-deep: #2E2C2A;  /* Start-Ton dunkler Panel-Gradienten */
  --panel-end: #6B6860; /* End-Ton dunkler Panel-Gradienten */
  --teal: #5FD8CE;      /* entspricht Mockup --turquoise (helle Akzente/Ränder) */
  --teal-dark: #1F8E85; /* entspricht Mockup --turquoise-deep (Akzenttext: Logo, Eyebrow, Preise) */
  --paper: #FFFFFF;
  --paper-soft: #F6F6F4; /* entspricht Mockup --grey-bg */
  --amber: #FF7A45;      /* entspricht Mockup --orange (CTA/Buttons) */
  --amber-dark: #E8632E; /* entspricht Mockup --orange-dark (Hover-Zustand) */
  --amber-soft: rgba(255, 122, 69, 0.14);
  --coral: var(--amber);
  --sage: rgba(95, 216, 206, 0.14);
  --line: #E6E2D8;
  --white: #FFFFFF;
  --muted: #5B615C; /* entspricht Mockup --ink-soft */
  --accent: var(--teal);

  /* Spacing-Skala (vertikaler Rhythmus & Abstände) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-20: 80px;

  /* Border-Radius (Pill vereinheitlicht 100px/999px) */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Schatten (Werte/Farbton an new_mockup.html angeglichen) */
  --shadow-sm: 0 12px 30px -18px rgba(30, 35, 33, 0.18);   /* ruhende Karten (Mockup --shadow-card) */
  --shadow-md: 0 14px 28px -12px rgba(255, 122, 69, 0.45); /* ruhende CTA-Buttons (orange getönt) */
  --shadow-lg: 0 20px 50px -25px rgba(30, 35, 33, 0.25);   /* große Panels/Karten (Mockup --shadow-soft) */
  --shadow-btn-hover: 0 18px 32px -12px rgba(255, 122, 69, 0.55); /* CTA-Button-Hover */
  --shadow-card-hover: 0 18px 40px -18px rgba(30, 35, 33, 0.22);  /* Karten-Hover-Lift */
  --shadow-active: 0 24px 50px -22px rgba(255, 122, 69, 0.35);    /* hervorgehobene Preis-Karte (orange getönt) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--paper);
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--paper-soft);
}

/* Scrollbar (Thumb/Track brauchen Kontrast zueinander, sonst verschwindet der Thumb beim Scrollen) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--paper-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: var(--radius-pill);
  border: 2px solid var(--paper-soft);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--amber);
}

/* Kein max-width mehr auf dem body: Sektions-Hintergründe (Dark-Panels, Footer,
   Hero-Glow) laufen auf Monitoren >1920px full-bleed durch, statt hart an einer
   zentrierten 1920px-Kante abzureißen; die Inhaltsbreite begrenzt stattdessen
   .container (siehe layout.css). */
body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* Geteilte Typografie – konsolidierte Single Source of Truth (früher zusätzlich
   in shared-components.css definiert; dort entfernt, um Konflikte zu vermeiden).
   style.css wird von allen Seiten und nach shared-components.css geladen. */
.generic-p {
  font-size: 18px;
  color: var(--ink);
  text-align: center;
}

.generic-h2 {
  font-family: 'Outfit', sans-serif;
  text-align: center;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 40px;
}

.generic-h3 {
  font-family: 'Outfit', sans-serif;
  text-align: center;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Lesbare Zeilenlängen auf großen Bildschirmen: Intro-/Fließtextabsätze auf
   ~70–80 Zeichen begrenzen (bei 18px ≈ 720px). Gilt nur für direkte Absatz-
   Kinder der Textblöcke – verschachtelte Karten/Grids (Boxen, FAQ, Preise)
   behalten ihre eigenen Breiten. */
.about-the-course > .generic-p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Direkteinstieg per URL-Anker (z. B. index.html#pricing von extern): Ziel-
   Überschrift nicht unter der fixen 80px-Nav verstecken. Das JS-Smooth-Scrolling
   kompensiert nur Klicks innerhalb der Seite. */
#main, #programm, #warum, #pricing, #faq, #ueber-uns, #cta, #kontakt {
  scroll-margin-top: 96px;
}

.title-light {
  color: white;
}

.title-light.generic-p {
  /* Volles Weiß statt 90% – hält AA (4,5:1) auch am hellsten Punkt des Dark-Panel-Gradienten (--panel-end) */
  color: #fff;
}

/* Abstand zwischen direkt aufeinanderfolgenden Textabsätzen innerhalb von
   .about-the-course/.about-me-content. Ohne diese Regel stapeln sich mehrere
   generic-p/generic-h3 ohne jeden Zwischenraum, da alle Margins global auf 0
   gesetzt sind (siehe * oben) – generic-h3 selbst bringt bereits einen
   margin-bottom mit, daher wird hier nur die fehlende Marge davor ergänzt. */
.about-the-course .generic-p + .generic-p,
.about-the-course .generic-p + .generic-h3,
.about-me-content .generic-p + .generic-p {
  margin-top: var(--space-4);
}

.add-gap-to-box-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Abstand zwischen Intro-Block (.about-the-course) und dem direkt darauf
   folgenden Box-Grid. Ersetzt den visuellen Puffer, den früher das
   min-height:100px von .generic-p erzeugte und der mit dessen Entfernung
   wegfiel. Nachbar-Kombinator, damit verschachtelte/kombinierte
   .add-gap-to-box-grid-Fälle unberührt bleiben. */
.about-the-course + .add-gap-to-box-grid {
  margin-top: var(--space-10);
}

.padding-bottom {
  padding-bottom: var(--space-20);
}

.margin-left {
  margin-left: 12px;
}

.back-to-main-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 8px;
}

.seal {
  padding-top: 16px;
  padding-bottom: 16px;
  color: rgb(35, 35, 133);
}