/* ==========================================================================
   AUFSTIEGSCODE – Landingpage Stylesheet (Redesign v3)
   ==========================================================================

   Inhaltsverzeichnis:
    1.  CSS Custom Properties (Design Tokens)
    2.  Reset & Base
    3.  Typografie
    4.  Utility-Klassen
    5.  Buttons
    6.  Layout (Container, Section)
    7.  Navigation / Site Header (inkl. CSS-only Hamburger)
    8.  Hero Section
    9.  Buchcover-Mockup (3D-Effekt – 1:1 beibehalten)
   10.  Über das Buch (Checkmark-Liste)
   11.  Testimonials (3 statische Cards)
   12.  Newsletter / Email Sektion
   13.  SCIL + Bundle (Card Pair)
   14.  Autoren Section
   15.  Events Section
   16.  Abschluss-CTA
   17.  Footer
   18.  Keyframe-Animationen
   19.  Media Queries (Responsive)
   20.  Reduced Motion (Barrierefreiheit)
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   Alle Werte zentral definiert – Änderungen hier gelten überall.
   ========================================================================== */
:root {
  /* ── Markenfarben ── */
  --color-blue:        #1a7bbf;   /* Hauptfarbe Hellblau */
  --color-blue-dark:   #0d2f45;   /* Dunkelblau für Footer / CTAs */
  --color-accent:      #200FCA;   /* Akzentfarbe Blau-Violett */
  --color-accent-dark: #1a0da8;   /* Hover-Zustand Accent */
  --color-gray:        #9c9c9c;   /* Sekundärtext, Borders */
  --color-gray-light:  #f5f6f8;   /* Heller Sektionshintergrund */
  --color-gray-line:   #e8eaed;   /* Dünne Trennlinien */
  --color-text:        #1c1c1e;   /* Haupttext – fast schwarz */
  --color-text-muted:  #6b7280;   /* Sekundärtext */
  --color-white:       #ffffff;
  --color-hero-bg:     #f8f9fa;   /* Hero-Hintergrund – sehr helles Grau */
  --color-light-blue:  #f0f7ff;   /* Testimonial-Hintergrund */

  /* ── Typografie ── */
  /* System-Font-Stack: nutzt die native Systemschrift des Betriebssystems.
     Kein externer Font-Request → schnelleres Laden, konsistentes Aussehen. */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Schriftgrößen-Skala (rem-basiert, 1rem = 16px Browserddefault) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.375rem;   /*  22px */
  --text-xl:   1.75rem;    /*  28px */
  --text-2xl:  2.25rem;    /*  36px */
  --text-3xl:  3rem;       /*  48px */
  --text-4xl:  3.75rem;    /*  60px */

  /* ── 8px Spacing-System ──
     Alle Abstände sind Vielfache von 8px.
     Das erzeugt ein konsistentes visuelles Raster. */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ── Border-Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;   /* Cards, Inputs */
  --radius-xl:  24px;
  --radius-full: 9999px; /* Kreise, Pills */

  /* ── Schatten (subtil, mehrschichtig) ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.07);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.10);

  /* ── Transitions ──
     all 0.2s ease: alle interaktiven Elemente reagieren einheitlich schnell */
  --transition: all 0.2s ease;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leichter Überschwung für Buch-Hover */

  /* ── Layout ── */
  --max-width:         1280px;
  --max-width-narrow:   720px;
  --header-height:       68px;
}


/* ==========================================================================
   2. RESET & BASE
   Browser-Defaults normalisieren für konsistentes Verhalten.
   ========================================================================== */
*,
*::before,
*::after {
  /* box-sizing: border-box = Padding und Border werden in die Breite eingerechnet.
     Ohne diese Regel würden padding + width die Gesamtbreite überschreiten. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth = Sanftes Scrollen für alle Anker-Links (#id) */
  scroll-behavior: smooth;
  /* Verhindert horizontalen Scroll durch zu breite Elemente */
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  /* line-height: 1.5 = Gemäß Design-System */
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-white);
  /* Schriftglättung: schärferes Rendering auf macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Verhindert, dass Content unter der fixed Navbar verschwindet */
  padding-top: var(--header-height);
}

img {
  max-width: 100%;
  /* display: block entfernt den Standard-Inline-Abstand unter Bildern */
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul { list-style: none; }

/* Einheitliches Fokus-Styling für Tastaturnavigation (Barrierefreiheit).
   :focus-visible = nur bei Tastatur-Fokus, nicht bei Mausklick */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   3. TYPOGRAFIE
   Starke Hierarchie. Maximal 2 Gewichte: 400 (regular) und 700 (bold).
   ========================================================================== */
h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-blue-dark);
  /* letter-spacing: leichtes Zusammenrücken bei großen Fonts → wirkt professioneller */
  letter-spacing: -0.02em;
}

/* clamp(min, preferred, max): Fluid Typography – skaliert zwischen Breakpoints.
   Kein Media Query nötig für Schriftgrößenanpassungen. */
h1 { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-xl),  3vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
  margin-bottom: var(--sp-2);
  color: var(--color-text-muted);
  line-height: 1.5;
}
p:last-child { margin-bottom: 0; }

/* ── Eyebrow Label ──
   Kleiner Text über Sektionsüberschriften. Typisch für Premium-Publishing. */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--sp-1);
}

/* ── Lead-Text ──
   Etwas größerer Einleitungstext unter dem Sektions-H2 */
.lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Akzentfarbe für Teile der Headline (z.B. "Code" in "AufstiegsCode") */
.accent { color: var(--color-blue); }


/* ==========================================================================
   4. UTILITY-KLASSEN
   ========================================================================== */

/* Nur für Screen Reader sichtbar – visuell versteckt */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }


/* ==========================================================================
   5. BUTTONS
   Alle interaktiven Links/Buttons: transition: all 0.2s ease (Design-System).
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 14px 28px;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: 700;
  /* border-radius: 8-12px (Design-System) */
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

/* Primär: Blauer gefüllter Button */
.btn-primary {
  background: var(--color-blue);
  color: white;
  border-color: var(--color-blue);
}
.btn-primary:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 123, 191, 0.35);
}

/* Outline: transparenter Hintergrund mit blauem Rand */
.btn-outline {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-outline:hover {
  background: var(--color-blue);
  color: white;
  transform: translateY(-1px);
}

/* Weiß: für blaue Hintergründe */
.btn-white {
  background: white;
  color: var(--color-blue);
  border-color: white;
}
.btn-white:hover {
  background: var(--color-light-blue);
  transform: translateY(-1px);
}

/* Outline-White: Ghost-Variante für blaue Hintergründe */
.btn-outline-white {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
}

/* Klein: für Header-CTA */
.btn-sm {
  padding: 8px 20px;
  font-size: var(--text-sm);
}

/* Gruppen-Container: Buttons nebeneinander */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}


/* ==========================================================================
   6. LAYOUT (Container, Sektionen)
   ========================================================================== */

/* Container: zentriert, max. 1280px, mit seitlichem Padding */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* Schmaler Container: für Über-das-Buch und Events */
.container--narrow {
  max-width: var(--max-width-narrow);
}

/* Standard-Sektion: 80px vertikales Padding */
.section {
  padding: var(--sp-10) 0;
}

/* Sektionsvarianten (Hintergründe) */
.section--gray-light  { background: var(--color-gray-light); }
.section--light-blue  { background: var(--color-light-blue); }
.section--blue-solid  { background: var(--color-blue); position: relative; overflow: hidden; }

/* Sektionskopf mit Abstand nach unten */
.section-header {
  margin-bottom: var(--sp-6);
}
.section-header h2 {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-3);
}


/* ==========================================================================
   7. NAVIGATION / SITE HEADER
   Sticky: bleibt beim Scrollen oben.
   CSS-only Hamburger: <input type="checkbox"> steuert Nav-Sichtbarkeit
   per :checked-Selektor – kein JavaScript benötigt.
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid var(--color-gray-line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Innerer Flex-Container: Logo links, CTA-Button rechts. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-3);
  min-height: var(--header-height);
}

/* ── Logo ── */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-logo-img {
  height: 60px;
  width: auto;
  display: block;
}

/* CTA-Button im Header – immer sichtbar */
.nav-cta {
  flex-shrink: 0;
}


/* ==========================================================================
   SCROLL DOTS – Positions-Indikator, rechts vertikal zentriert
   ========================================================================== */
.scroll-dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
}

.scroll-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 51, 102, 0.20);
  border: 1.5px solid rgba(0, 51, 102, 0.35);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  position: relative;
  cursor: pointer;
  outline-offset: 3px;
}

.scroll-dot:hover,
.scroll-dot.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  transform: scale(1.5);
}

/* Tooltip-Label beim Hover */
.scroll-dot::before {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-blue);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.scroll-dot:hover::before {
  opacity: 1;
}

/* Auf sehr kleinen Displays ausblenden */
@media (max-width: 480px) {
  .scroll-dots { display: none; }
}


/* ==========================================================================
   8. HERO SECTION
   Zweispaltiges Layout: links Buchcover-Animation, rechts Text.
   Hintergrund: #f8f9fa (sehr helles Grau laut Design-System).
   Vertikaler Blau-Balken links: ::before Pseudo-Element.
   Mobile: Einspaltig, Text oben / Buch unten (CSS order).
   ========================================================================== */
.hero {
  background: var(--color-hero-bg);
  padding: var(--sp-10) 0;
  position: relative;
  overflow: hidden;
}

/* Vertikaler Blau-Balken am linken Rand der Hero-Sektion */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--color-blue);
}

/* Zweispalten-Grid: Mobile = 1 Spalte, Desktop = 1fr 1fr */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}

/* Mobile: Buchcover oben (order:1), Text darunter (order:2).
   Desktop (900px): per Media Query umgekehrt – Text rechts, Buch links. */
.hero-content { order: 2; }
.hero-book    { order: 1; display: flex; justify-content: center; }

/* ── Hero-Badge (kleines Label oben) ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: var(--color-blue);
  border: 1.5px solid var(--color-gray-line);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

/* ── Hero Headline ── */
.hero-title {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-blue-dark);
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
  line-height: 1.1;
}

/* ── Hero Subline ── */
.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}

/* ── Sterne-Bewertung ── */
.hero-stars {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.hero-stars-icons {
  color: #f59e0b;  /* Goldgelb für Sterne */
  font-size: var(--text-lg);
  line-height: 1;
}
.hero-stars-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Testimonial-Zitat im Hero ──
   <blockquote> ist das semantisch korrekte Element für Zitate.
   Blauer linker Rand als visueller Hinweis auf Zitat-Charakter. */
.hero-quote {
  background: white;
  border-left: 3px solid var(--color-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.hero-quote p {
  font-style: italic;
  color: var(--color-text);
  font-size: var(--text-md);
  margin-bottom: var(--sp-1);
}
.hero-quote footer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Hero Intro Text (QR-Code Info) ── */
.hero-intro-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.hero-anchor-link {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-anchor-link:hover {
  color: var(--color-dark);
}


/* ==========================================================================
   9. BUCHCOVER-MOCKUP (3D-Effekt – 1:1 aus Vorgängerversion übernommen)
   Technik:
   - .book-wrapper:  perspective: 800px → erzeugt 3D-Raum (ohne perspective
                     wirkt rotateY nur wie scaleX, kein echter Tiefeneffekt)
   - .book-img-wrap: transform: rotateY(-15deg) → leichtes Kippen nach links
   - ::before:       Buchbinderstreifen (linker dunkler Rand)
   - ::after:        Glanzlicht oben rechts (helles Gradient-Dreieck)
   - :hover:         Buch dreht sich fast gerade → Cover besser sichtbar
   ========================================================================== */
.book-wrapper {
  /* perspective: simuliert einen Blickpunkt für den 3D-Effekt */
  perspective: 800px;
  display: inline-block;
}

.book-img-wrap {
  /* -15° Kippung nach links: Buchbinderstreifen sichtbar, realistisch */
  transform: rotateY(-15deg);
  transform-style: preserve-3d;
  /* Sanfter Hover-Übergang mit leichtem Überschwung (ease-spring) */
  transition: transform 0.5s var(--ease-spring),
              box-shadow 0.5s ease;
  border-radius: var(--radius-md);
  /* Mehrstufiger Schatten: Tiefe + Bodenschatten */
  box-shadow:
    -6px  6px 20px rgba(0, 0, 0, 0.25),
     6px  6px 40px rgba(0, 0, 0, 0.15),
     0   20px 60px rgba(0, 0, 0, 0.20);
  /* CSS-Fallback wenn Bild nicht lädt: sichtbarer blauer Platzhalter */
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
  min-height: 240px;
  position: relative;
  /* Desktop-Breite: in Media Queries skaliert */
  width: 290px;
}

/* Buchbinderstreifen: linker dunkler Rand = Buchrücken */
.book-img-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  z-index: 1;
}

/* Glanzlicht: helles Gradient oben rechts = Lichtreflexion auf Buchcover */
.book-img-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 60%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  border-radius: 0 var(--radius-md) 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Hover: Buch dreht sich fast gerade + hebt sich leicht an */
.book-img-wrap:hover,
.hero-book:hover .book-img-wrap {
  transform: rotateY(-5deg) translateY(-4px);
  box-shadow:
    -4px 12px 30px rgba(0, 0, 0, 0.20),
     8px 12px 50px rgba(0, 0, 0, 0.12),
     0   30px 70px rgba(0, 0, 0, 0.18);
}

/* Das echte Buchcover-Bild */
.book-img {
  width: 100%;
  height: auto;
  /* aspect-ratio: 2:3 (typisches Buchformat) → verhindert Layout Shift (CLS) */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}


/* ==========================================================================
   10. ÜBER DAS BUCH (Checkmark-Liste)
   ========================================================================== */

/* Checkmark-Liste: vertikal, zentriert */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 560px;
  /* margin: auto = zentriert wenn text-align:center auf dem Parent */
  margin: var(--sp-5) auto 0;
}

/* Einzelner Checkmark-Eintrag */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-md);
  color: var(--color-text);
}

/* ✓ in #1a7bbf (Design-System Vorgabe) */
.check-mark {
  color: var(--color-blue);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  flex-shrink: 0;
}


/* ==========================================================================
   11. TESTIMONIALS (3 statische Cards)
   Hintergrund: #f0f7ff. Großes dekoratives Anführungszeichen,
   kursives Zitat, 5 Sterne, Name + Titel.
   Desktop: 3-spaltig. Mobile: 1-spaltig. Tablet (640px): 2-spaltig.
   ========================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.testimonial-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: var(--transition);
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Großes dekoratives Anführungszeichen (Georgia-Serif für typografischen Charakter) */
.testimonial-quote-mark {
  font-size: 64px;
  line-height: 1;
  color: var(--color-blue);
  opacity: 0.2;
  font-family: Georgia, 'Times New Roman', serif;
  display: block;
  /* Negativer Margin: Zitat rückt näher → enger Look */
  margin-bottom: -12px;
}

/* Großes kursives Zitat – flex-grow: 1 = füllt verfügbare Höhe */
.testimonial-text {
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 0;
}

/* Sterne */
.testimonial-stars {
  color: #f59e0b;
  font-size: var(--text-md);
}

/* Autorenzeile: trennt vom Zitat durch Border-Top */
.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--color-gray-line);
  padding-top: var(--sp-2);
  margin-top: auto;
}
.testimonial-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.testimonial-role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Profil-Karten (Prominente Vorbilder) ── */
.profile-card {
  text-align: left;
}
.profile-icon {
  font-size: 1.5rem;
  color: var(--color-blue);
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.profile-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}
.profile-card .testimonial-text {
  font-style: normal;
  color: var(--color-text-muted);
}
.profiles-closing {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ── SCIL Feature List ── */
.scil-feature-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.scil-feature-list li {
  padding-left: var(--sp-4);
  position: relative;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.scil-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}
.scil-discount-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: #f0f7ff;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* ── Bundle Subtitle ── */
.bundle-subtitle {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin-bottom: var(--sp-3);
  margin-top: calc(var(--sp-1) * -1);
}


/* ==========================================================================
   12. NEWSLETTER / EMAIL SEKTION
   Voller blauer Hintergrund (#1a7bbf).
   Zweispaltig: links Text, rechts Formular + dekoratives CSS-Muster.
   .newsletter-pattern: radial-gradient erzeugt Punkteraster (rein dekorativ).
   ========================================================================== */
.newsletter-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
  padding: var(--sp-6) 0;
}

.newsletter-layout h2 {
  color: white;
  font-size: var(--text-3xl);
  margin: 0;
  line-height: 1.2;
}
.newsletter-layout p {
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
  max-width: 420px;
  font-size: var(--text-base);
  line-height: 1.6;
}
.newsletter-layout .btn {
  margin-top: var(--sp-2);
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}

/* Dekoratives CSS-Punkteraster im Hintergrund */
.newsletter-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Formular: Stack auf Mobile, Reihe auf Desktop (per Media Query) */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}

/* E-Mail-Input: halbtransparenter weißer Hintergrund auf blauem Grund */
.newsletter-input {
  width: 100%;
  padding: 14px 20px;
  font-size: var(--text-base);
  font-family: var(--font-family);
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  outline: 2px solid transparent;
  transition: var(--transition);
}
.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.newsletter-input:focus {
  outline-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.22);
}


/* ==========================================================================
   13. SCIL + BUNDLE (Card Pair)
   Zwei gleich hohe Cards nebeneinander.
   align-items: stretch = beide Cards gleiche Höhe.
   .card--blue: Bundle-Card mit blauem Hintergrund, hervorgehoben.
   ========================================================================== */
.card-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}

/* Standard-Card: weiß, Schatten, 12px border-radius, 48px padding */
.card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-gray-line);
  /* Mobile: 16px padding; Desktop: 48px (var(--sp-6)) per Media Query */
  padding: var(--sp-2);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Verhindert, dass langer Text die Card sprengt */
  min-width: 0;
  overflow-wrap: break-word;
}

/* Bundle-Card: blauer Hintergrund, weißer Text, hervorgehoben */
.card--blue {
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.card--blue h2,
.card--blue h3 { color: white; }
.card--blue p   { color: rgba(255, 255, 255, 0.85); }
.card--blue .eyebrow { color: rgba(255, 255, 255, 0.7); }

/* CTA ans Kartenende drücken: margin-top: auto füllt den verfügbaren Raum.
   Auf Mobile: volle Breite (width: 100%) laut Anforderung. */
.card-cta {
  margin-top: auto;
  align-self: flex-start;
  width: 100%;
  justify-content: center;
}

/* ── Bundle-spezifische Elemente ── */
.bundle-icons {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 2rem;
}

/* Bundle-Inhaltsliste mit automatischen weißen Checkmarks */
.bundle-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.bundle-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
}
/* ✓ per ::before erzeugt, kein extra HTML-Element nötig */
.bundle-list li::before {
  content: '✓';
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  flex-shrink: 0;
}

/* Preisblock */
.bundle-price {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.price-old {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-md);
}
.price-new {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: white;
  line-height: 1;
}
.savings-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
}
.price-vat {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* ── Service-Grid (2×2 Kacheln in der SCIL-Card) ──
   Mobile (<480px): 1 Spalte
   Tablet (480px+): 2 Spalten (per Media Query unten)
   Desktop: bleibt 2 Spalten = 2×2 Grid */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;   /* Mobile: 1 Spalte */
  gap: var(--sp-2);
}
.service-card {
  background: none;
  border-radius: 0;
  padding: var(--sp-2);
  min-width: 0;
  overflow-wrap: break-word;
}
.service-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.service-card h3 {
  font-size: var(--text-base);
  margin-bottom: 4px;
  color: var(--color-blue-dark);
}
.service-card p {
  font-size: var(--text-sm);
  margin: 0;
}


/* ==========================================================================
   14. AUTOREN SECTION
   Heller Hintergrund, zwei Autoren-Blöcke nebeneinander.
   Rundes Foto-Platzhalter (border-radius: 50%).
   Name in Akzentfarbe (#200FCA).
   ========================================================================== */
.authors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* Autor-Block: zentriert, Card-Stil */
.author-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-gray-line);
}

/* Rundes Foto-Platzhalter (border-radius: 50% = Kreis) */
.author-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-light-blue);
  border: 3px solid var(--color-gray-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  flex-shrink: 0;
  overflow: hidden;
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Name in Akzentfarbe (#200FCA laut Design-System) */
.author-name {
  color: var(--color-accent);
  font-size: var(--text-xl);
  margin: 0;
}

.author-role {
  font-size: var(--text-sm);
  color: var(--color-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.author-bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 360px;
  line-height: 1.6;
}

.author-link {
  color: var(--color-blue);
  font-weight: 600;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.author-link:hover {
  border-bottom-color: var(--color-blue);
}


/* ==========================================================================
   15. EVENTS SECTION
   Event-Karte mit prominentem Datum-Block links (Kalender-Stil).
   Desktop: Datum links + Info rechts (flex-row).
   Mobile: Datum oben + Info unten (flex-column).
   ========================================================================== */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--color-gray-line);
}

/* Prominenter Kalender-Block: blauer Hintergrund, weißer Text */
.event-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: white;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  min-width: 100px;
  flex-shrink: 0;
  text-align: center;
}
.event-month {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.event-day {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
}
.event-year {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.event-title {
  font-size: var(--text-xl);
  color: var(--color-blue-dark);
  margin: 0;
}
.event-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.event-description {
  color: var(--color-text-muted);
  margin: 0;
}


/* ==========================================================================
   16. ABSCHLUSS-CTA
   ========================================================================== */
.cta-final {
  text-align: center;
}
.cta-final .lead {
  max-width: 480px;
}


/* ==========================================================================
   17. FOOTER
   Dunkelblauer Hintergrund (#0d2f45).
   Logo links, Linkliste rechts. Einfach und klar.
   ========================================================================== */
.site-footer {
  background: var(--color-blue-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--sp-10) 0 var(--sp-4);
}

/* Footer-Innerer Bereich: Brand + Nav */
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Footer-Logo: Text-basiert mit Akzentfarbe für "Code" */
.footer-logo {
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  transition: var(--transition);
}
.footer-logo span { color: var(--color-blue); }
.footer-logo:hover { opacity: 0.8; }

.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
}

/* Footer-Links horizontal */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  transition: var(--transition);
}
.footer-links a:hover { color: white; }

/* Copyright-Zeile */
.footer-bottom {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
}
.footer-bottom p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  text-align: center;
}


/* ==========================================================================
   18. KEYFRAME-ANIMATIONEN
   Nur für Hero-Einblend-Animation beim Laden der Seite.
   ========================================================================== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero-Elemente blenden sequenziell ein */
.hero-content {
  animation: fade-up 0.55s ease both;
}
.hero-book {
  animation: fade-up 0.55s 0.15s ease both;
}


/* ==========================================================================
   19. MEDIA QUERIES (RESPONSIVE)
   Mobile-first: Base-CSS = Mobile.
   Breakpoints: 640px (kleines Tablet), 900px (Desktop), 1200px (groß).
   ========================================================================== */

/* ── 640px: Kleines Tablet ─────────────────────────────────────────────── */
@media (min-width: 640px) {

  /* Newsletter: Input und Button nebeneinander */
  .newsletter-form {
    flex-direction: row;
  }
  .newsletter-input {
    flex: 1;
  }

  /* Testimonials: 2 Spalten */
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Events: Datum und Info nebeneinander */
  .event-card {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Autoren: 2 Spalten */
  .authors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: Row-Layout */
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}


/* ── 480px: Service-Grid 2 Spalten (Tablet) ───────────────────────────── */
@media (min-width: 480px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ── 768px: SCIL + Bundle zwei Spalten ────────────────────────────────── */
@media (min-width: 768px) {
  .card-pair {
    grid-template-columns: 1fr 1fr;
  }
  .card {
    padding: var(--sp-6);
  }
  .card-cta {
    width: auto;
    justify-content: flex-start;
  }
}


/* ── 900px: Desktop ────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* ── Hero: 2 Spalten ── */
  .hero-layout {
    grid-template-columns: 1fr 1fr;
  }
  /* Buchcover links (order: 1), Text rechts (order: 2) */
  .hero-book    { order: 1; }
  .hero-content { order: 2; }

  /* ── Buchcover Desktop-Breite ── */
  .book-img-wrap { width: 300px; }

  /* ── Testimonials: 3 Spalten ── */
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Newsletter bleibt zentriert – kein Grid-Override nötig */
}


/* ── Mobile (max-width: 899px) ────────────────────────────────────────── */
@media (max-width: 899px) {

  /* Logo auf Mobile etwas kleiner */
  .site-logo-img { height: 50px; }

  /* Buttons auf Mobile: volle Breite */
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── 1200px: Großer Desktop ────────────────────────────────────────────── */
@media (min-width: 1200px) {
  /* Größeres Buchcover auf großen Bildschirmen */
  .book-img-wrap { width: 340px; }
}


/* ==========================================================================
   20. REDUCED MOTION (Barrierefreiheit)
   Benutzer können in ihrem Betriebssystem "Animationen reduzieren" aktivieren.
   prefers-reduced-motion: reduce → alle Animationen und Übergänge deaktivieren.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Buchcover-3D-Effekt deaktivieren */
  .book-img-wrap,
  .book-img-wrap:hover,
  .hero-book:hover .book-img-wrap {
    transform: none;
    transition: none;
  }
}


/* Unsichtbarer Scroll-Anker – kompensiert den sticky Header */
.scroll-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  margin-top: calc(var(--header-height) * -1);
  padding-top: var(--header-height);
}


/* ==========================================================================
   LESEPROBE MODAL
   ========================================================================== */

/* Dunkles Overlay – standardmäßig unsichtbar */
.lp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.72);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lp-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Modal-Karte */
.lp-modal {
  position: relative;
  background: #fefcf8;
  border-radius: var(--radius-lg);
  max-width: 680px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
}
.lp-overlay.is-open .lp-modal {
  transform: translateY(0) scale(1);
}

/* Buchbinderstreifen links */
.lp-spine {
  flex-shrink: 0;
  width: 10px;
  background: var(--color-blue);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Text-Bereich */
.lp-content {
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  flex: 1;
}

/* Kapitel-Label */
.lp-chapter {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--sp-2);
}

/* Überschrift */
.lp-heading {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--sp-5);
  line-height: 1.25;
}

/* Fließtext */
.lp-content p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}

/* Zitat-Hervorhebung */
.lp-pullquote {
  border-left: 4px solid var(--color-blue);
  padding-left: var(--sp-4);
  font-style: italic;
  font-size: var(--text-lg) !important;
  color: var(--color-blue) !important;
  margin: var(--sp-6) 0 !important;
}

/* Quellenangabe */
.lp-meta {
  font-size: var(--text-xs) !important;
  color: rgba(0,0,0,0.35) !important;
  text-align: center;
  margin-top: var(--sp-6) !important;
}

/* CTA am Ende */
.lp-actions {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: center;
}

/* Schließen-Button (×) */
.lp-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 1;
}
.lp-close:hover {
  background: var(--color-gray-line);
}

@media (max-width: 599px) {
  .lp-content {
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
  }
  .lp-heading {
    font-size: var(--text-xl);
  }
}