/* ──────────────────────────────────────────────────────────────────────────
   Mediskill, gemeinsame Grundlage aller Seiten.

   Hier steht ausschliesslich, was auf jeder Seite gleich aussieht: Variablen,
   Reset, Kopfzeile, Navigation, Schaltflaechen, Abschnitts-Grundgeruest und
   Fusszeile. Alles, was nur eine einzelne Seite braucht, bleibt dort im
   <style>-Block. Der laedt nach dieser Datei und gewinnt deshalb bei
   gleichnamigen Regeln, was Sonderfaelle wie die abweichende Gruen-Palette
   des Kontaktformulars ohne Umwege moeglich macht.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Reset & Custom Properties ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --primary-50: #eff6ff;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
  --gray-800: #1f2937; --gray-900: #111827;
  --green-500: #22c55e; --green-50: #f0fdf4;
  --amber-500: #f59e0b; --amber-50: #fffbeb; --amber-800: #92400e;
  --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
  --shadow: 0 1px 3px rgba(0,0,0,.1); --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--gray-900); line-height: 1.6; -webkit-font-smoothing: antialiased; background: #fff; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ── */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: all .3s; }
.header.scrolled { border-bottom-color: var(--gray-200); box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: .75rem; }
.logo-icon { width: 46px; height: 46px; border-radius: var(--radius); display: block; object-fit: contain; background: #fff; padding: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.1); }
.logo-text { font-weight: 700; font-size: 1.25rem; color: var(--gray-900); }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { font-size: .9rem; font-weight: 500; color: var(--gray-600); transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--primary); }
.header-cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--primary); color: #fff; padding: .625rem 1.25rem; border-radius: var(--radius); font-size: .875rem; font-weight: 600; transition: background .2s, transform .2s; border: none; cursor: pointer; }
.header-cta:hover { background: var(--primary-dark); transform: translateY(-1px); }
.header-cta svg { width: 16px; height: 16px; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; color: var(--gray-700); }
.hamburger svg { width: 24px; height: 24px; }
.mobile-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); padding: 1rem 1.5rem; }
.mobile-nav.open { display: flex; flex-direction: column; gap: 1rem; }
.mobile-nav a { font-size: 1rem; font-weight: 500; color: var(--gray-700); padding: .5rem 0; }
.mobile-nav .header-cta { justify-content: center; margin-top: .5rem; color: #fff; }

/* ── Aufklappmenue unter "Module & Preise" ─────────────────────────────────
   Ohne JavaScript: :hover fuer die Maus, :focus-within fuer die Tastatur.
   Die Gruppe fuellt die volle Hoehe der Kopfzeile, damit zwischen Verweis und
   aufgeklapptem Feld keine Luecke entsteht, in der der Zeiger haengen bleibt.
   Auf schmalen Bildschirmen gibt es kein Hover, dort stehen die Modulseiten
   eingerückt im ausgeklappten Menue. ── */
.nav-gruppe { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-gruppe-kopf { display: inline-flex; align-items: center; gap: .3rem; }
.nav-chevron { width: 13px; height: 13px; transition: transform .2s; }
.nav-gruppe:hover .nav-chevron, .nav-gruppe:focus-within .nav-chevron { transform: rotate(180deg); }
.nav-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(.375rem); min-width: 14rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.nav-gruppe:hover .nav-panel, .nav-gruppe:focus-within .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-panel a { display: block; padding: .5rem .75rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; color: var(--gray-700); white-space: nowrap; transition: background .15s, color .15s; }
.nav-panel a:hover { background: var(--primary-50); color: var(--primary); }
.nav-panel a.active { color: var(--primary); font-weight: 700; }
.nav-panel-trenner { border: none; border-top: 1px solid var(--gray-100); margin: .375rem .5rem; }
.mobile-nav .mobile-sub { font-size: .9375rem; color: var(--gray-500); padding: .25rem 0 .25rem 1.25rem; }
.mobile-nav .mobile-sub.active { color: var(--primary); font-weight: 600; }

/* ── Breadcrumb ── */
.breadcrumb { padding: 1rem 0 0; font-size: .8125rem; color: var(--gray-400); }
.breadcrumb a { color: var(--gray-400); transition: color .2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 .375rem; }

/* ── Page Hero (Unterseiten ohne eigenes Hero-Bild) ── */
.page-hero { background: linear-gradient(135deg, var(--primary-50), #e0e7ff); padding: 7rem 0 4rem; }
.page-hero h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.15; margin-top: 1.5rem; }

/* ── Schaltflaechen ── */
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--primary); color: #fff; padding: .875rem 1.75rem; border-radius: var(--radius); font-size: 1rem; font-weight: 600; transition: all .2s; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.btn-primary svg, .btn-secondary svg, .btn-white svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-secondary { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--gray-700); padding: .875rem 1.75rem; border-radius: var(--radius); font-size: 1rem; font-weight: 600; border: 1px solid var(--gray-300); transition: all .2s; cursor: pointer; }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-white { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--primary); padding: .875rem 2rem; border-radius: var(--radius); font-size: 1rem; font-weight: 700; transition: all .2s; border: none; cursor: pointer; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* ── Abschnitts-Grundgeruest ── */
.section { padding: 6rem 0; }
.section-alt { background: var(--gray-50); }
.section-label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); margin-bottom: .75rem; text-align: center; }
.section-title { font-size: 2.25rem; font-weight: 800; text-align: center; margin-bottom: .75rem; line-height: 1.2; }
.section-subtitle { font-size: 1.1rem; color: var(--gray-500); text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.section-subtitle.tight { margin-bottom: 2.5rem; }

/* ── Schlussaufforderung ── */
.cta-section { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 5rem 0; text-align: center; color: #fff; }
.cta-section h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: .75rem; }
.cta-section p { font-size: 1.125rem; opacity: .9; margin-bottom: 2rem; }

/* ── Footer ── */
.footer { background: var(--gray-900); color: var(--gray-400); padding: 4rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-logo { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.footer-logo .logo-icon { width: 38px; height: 38px; }
.footer-logo span { color: #fff; font-weight: 700; font-size: 1.125rem; }
.footer-brand p { font-size: .875rem; line-height: 1.6; max-width: 300px; }
.footer-col h4 { color: #fff; font-size: .875rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.footer-col a { display: block; font-size: .875rem; margin-bottom: .625rem; transition: color .2s; cursor: pointer; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--gray-800); padding: 1.5rem 0; font-size: .8125rem; text-align: center; }

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── Modulseiten: Kopf, Funktionsliste, Preis ──────────────────────────────
   Geteilt von /module und den drei Detailseiten. ── */
.module-hero { background: linear-gradient(135deg, var(--primary-50), #e0e7ff); padding: 7rem 0 4rem; text-align: center; }
.module-hero h1 { font-size: 2.75rem; font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.module-hero h1 span { color: var(--primary); }
/* Nur der zentrierte Kopf von /module. Beim zweispaltigen Kopf wuerde die
   Regel sonst auch die Bildunterschrift in der Grafik treffen. */
.module-hero:not(.split) p { font-size: 1.15rem; color: var(--gray-600); max-width: 680px; margin: 0 auto; line-height: 1.7; }
.module-hero .breadcrumb { text-align: left; }

.feature-list { list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9rem; color: var(--gray-700); padding: .5rem 0; border-bottom: 1px solid var(--gray-50); line-height: 1.55; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li .check { color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.feature-list li .check svg { width: 16px; height: 16px; }
.feature-list li strong { color: var(--gray-900); font-weight: 600; }
.feature-list.breit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; max-width: 1000px; margin: 0 auto; }

.module-info-box { background: var(--primary-50); border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: .875rem 1.125rem; font-size: .8375rem; color: var(--gray-600); margin-top: 1.5rem; line-height: 1.65; }
.module-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--primary); color: #fff; padding: .875rem 1.75rem; border-radius: var(--radius); font-size: .9375rem; font-weight: 700; margin-top: 1.75rem; transition: background .2s, transform .2s; border: none; cursor: pointer; width: 100%; }
.module-cta:hover { background: var(--primary-dark); transform: translateY(-1px); }
.module-cta svg { width: 16px; height: 16px; }

/* Antwortblock ganz oben: kurze, vollstaendige Saetze, die auch ausserhalb
   der Seite zitierfaehig bleiben. */
.blick-card { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 2rem 2.25rem; box-shadow: var(--shadow); }
.blick-card dl { display: grid; grid-template-columns: 13rem 1fr; gap: .875rem 1.5rem; }
.blick-card dt { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); padding-top: .15rem; }
.blick-card dd { font-size: .9375rem; color: var(--gray-700); line-height: 1.65; }

/* Preisblock der Detailseiten */
.preis-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 2rem; text-align: center; box-shadow: var(--shadow); }
.preis-card .module-price { font-size: 2.75rem; font-weight: 800; color: var(--primary); line-height: 1; }
.preis-card .module-price-unit { font-size: 1rem; font-weight: 500; color: var(--gray-500); }
.preis-meta { list-style: none; margin: 1.5rem 0 0; text-align: left; }
.preis-meta li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: var(--gray-600); padding: .375rem 0; }
.preis-meta li svg { width: 16px; height: 16px; color: var(--green-500); flex-shrink: 0; margin-top: .2rem; }
.preis-hinweis { font-size: .8125rem; color: var(--gray-500); margin-top: 1rem; }

/* Einblick-Bereich: Bildschirmfoto oder Aufnahme, beide mit Unterschrift.
   Stand vorher als Inline-Block nur auf Seiten mit Bild, weshalb die
   Unterschrift unter dem Video ohne Zentrierung dastand. */
.bild-rahmen { max-width: 1000px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.bild-rahmen img { width: 100%; height: auto; display: block; }
.bild-caption { text-align: center; font-size: .875rem; color: var(--gray-500); margin-top: 1rem; }

/* Hochformat-Aufnahme aus dem Portal: dunkler Grund, zentriert und in der
   Hoehe begrenzt, sonst wuerde sie ueber die halbe Seite laufen. */
.video-rahmen { max-width: 1000px; margin: 0 auto; background: #0f172a; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; justify-content: center; padding: 2.5rem 1.5rem; }
.video-rahmen video { width: auto; max-width: 100%; max-height: 560px; display: block; border-radius: var(--radius-lg); }

/* Verweis ins Handbuch */
.doku-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--primary); transition: color .2s; }
.doku-link:hover { color: var(--primary-dark); }
.doku-link svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Querverweis auf ein Modul, das zusammen mit diesem mehr kann */
.cross-card { max-width: 820px; margin: 0 auto; display: flex; align-items: flex-start; gap: 1rem; background: var(--primary-50); border: 1px solid var(--primary-light); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; }
.cross-card svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.cross-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--gray-900); margin-bottom: .375rem; }
.cross-card p { font-size: .9375rem; color: var(--gray-600); line-height: 1.65; margin-bottom: .625rem; }
.cross-card a { font-size: .875rem; font-weight: 700; color: var(--primary); }

/* ── Modulseiten: zweispaltiger Kopf ───────────────────────────────────────
   Der zentrierte Nur-Text-Kopf wirkte gequetscht. Muster der Startseite:
   Text links, eine Grafik rechts, die zeigt statt beschreibt. ── */
.module-hero.split { text-align: left; }
.modul-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--primary-light); color: var(--primary); padding: .375rem .875rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600; margin-bottom: 1.25rem; }
.modul-eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.modul-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; margin-top: 1.75rem; }
.module-hero.split h1 { font-size: 2.625rem; margin-bottom: 1rem; }
.modul-hero-text p { margin: 0; max-width: 34rem; font-size: 1.0625rem; }
.modul-hero-buttons { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 2rem; align-items: center; }
.modul-hero-buttons .btn-primary { white-space: nowrap; }
.modul-hero-preis { font-size: .875rem; color: var(--gray-600); }
.modul-hero-preis strong { color: var(--gray-900); font-weight: 700; }

/* ── Nachgebaute Ansichten ──
   Bewusst kein Bildschirmfoto: bleibt scharf, laedt nichts nach und veraltet
   nicht mit dem naechsten Oberflaechen-Feinschliff. ── */
.mock { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 1.5rem; }
.mock-title { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; color: var(--gray-800); padding-bottom: .5rem; border-bottom: 1px dashed var(--gray-200); }
.mock-pill { font-family: 'SF Mono', Menlo, monospace; font-size: .6875rem; background: var(--primary-50); color: var(--primary); padding: .125rem .5rem; border-radius: 9999px; margin-left: auto; }
.mock-fuss { font-size: .6875rem; color: var(--gray-500); text-align: center; margin-top: .875rem; }

/* Stundenplan-Raster */
.sp-grid { display: grid; grid-template-columns: 1.6rem repeat(5, 1fr); grid-template-rows: auto repeat(4, 2.1rem); gap: .25rem; margin-top: .5rem; }
.sp-head { font-size: .625rem; font-weight: 700; color: var(--gray-500); text-align: center; padding-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; }
.sp-head.sp-frei { color: var(--amber-800); }
.sp-time { font-size: .625rem; color: var(--gray-400); display: flex; align-items: center; justify-content: center; }
.sp-lesson { border-radius: .25rem; font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-ferien { background: var(--amber-50); border: 1px dashed #fcd34d; border-radius: .25rem; color: var(--amber-800); font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; }
.sp-fuss { font-size: .6875rem; color: var(--gray-500); text-align: center; margin-top: .875rem; }

/* Praktikums-Planungsraster: Schueler sind Spalten, Wochen Zeilen,
   genau wie in der Anwendung. */
.pl-grid { display: grid; grid-template-columns: 2.5rem repeat(5, 1fr); grid-template-rows: auto repeat(5, 1.75rem); gap: .25rem; margin-top: .5rem; }
.pl-ecke { font-size: .5rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: flex-end; padding-bottom: .25rem; }
.pl-head { font-size: .5625rem; font-weight: 700; color: var(--gray-500); text-align: center; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .25rem; overflow: hidden; }
.pl-woche { font-size: .5625rem; color: var(--gray-400); display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.pl-block { border-radius: .25rem; font-size: .5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pl-ferien { background: var(--amber-50); border: 1px dashed #fcd34d; border-radius: .25rem; color: var(--amber-800); font-size: .5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Schüler-Portal-Ansicht */
.po-karte { background: var(--primary-50); border: 1px solid var(--primary-light); border-radius: var(--radius-lg); padding: .75rem .875rem; margin-top: .75rem; }
.po-label { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.po-stelle { font-size: .8125rem; font-weight: 700; color: var(--gray-900); margin-top: .2rem; }
.po-zeit { font-size: .6875rem; color: var(--gray-500); margin-top: .1rem; }
.po-fach { display: inline-block; font-size: .5625rem; font-weight: 700; color: #fff; border-radius: 9999px; padding: .1rem .45rem; margin-bottom: .3rem; }
.po-stand { margin-top: .875rem; }
.po-zeile { display: grid; grid-template-columns: 4.6rem 1fr 2.9rem; align-items: center; gap: .5rem; padding: .28rem 0; }
.po-zeile span:first-child { font-size: .6875rem; color: var(--gray-700); }
.po-balken { height: .4rem; background: var(--gray-100); border-radius: 9999px; overflow: hidden; }
.po-balken i { display: block; height: 100%; border-radius: 9999px; }
.po-zahl { font-size: .625rem; color: var(--gray-500); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Nutzenbloecke: was leichter wird, nicht was eingebaut ist ── */
.nutzen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.nutzen-item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem 1.625rem; display: flex; flex-direction: column; transition: box-shadow .3s, border-color .3s; }
.nutzen-item:hover { box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.nutzen-item h3 { font-size: 1.0625rem; font-weight: 700; color: var(--gray-900); line-height: 1.35; margin-bottom: .5rem; }
.nutzen-item p { font-size: .9375rem; color: var(--gray-600); line-height: 1.65; }
.nutzen-meta { margin-top: auto; padding-top: 1.125rem; font-size: .75rem; color: var(--gray-400); letter-spacing: .02em; }

/* ── FAQ-Aufklapper ── */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); margin-bottom: .75rem; overflow: hidden; transition: box-shadow .2s; background: #fff; }
.faq-item:hover { box-shadow: var(--shadow-lg); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: none; border: none; padding: 1.125rem 1.5rem; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--gray-900); cursor: pointer; }
.faq-question:hover { color: var(--primary); }
.faq-icon { flex-shrink: 0; color: var(--gray-400); transition: transform .3s, color .2s; }
.faq-icon svg { width: 20px; height: 20px; display: block; }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--primary); }
.faq-item.open .faq-question { color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 900px; }
.faq-answer-inner { padding: 0 1.5rem 1.25rem; font-size: .9375rem; color: var(--gray-600); line-height: 1.7; }
.faq-answer-inner a { color: var(--primary); font-weight: 600; }
.faq-answer-inner a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .section-title { font-size: 1.875rem; }
  .module-hero h1 { font-size: 2.25rem; }
  .module-hero.split h1 { font-size: 2.125rem; }
  .modul-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .modul-hero-visual { max-width: 480px; }
  .nutzen-grid { grid-template-columns: 1fr; }
  .feature-list.breit { grid-template-columns: 1fr; }
  .blick-card dl { grid-template-columns: 1fr; gap: .25rem; }
  .blick-card dd { margin-bottom: .75rem; }
  .page-hero h1 { font-size: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .nav, .header-cta.desktop { display: none; }
  .hamburger { display: block; }
  .page-hero { padding: 6rem 0 3rem; }
  .page-hero h1 { font-size: 1.75rem; }
  .section { padding: 4rem 0; }
  .section-title { font-size: 1.625rem; }
  .cta-section h2 { font-size: 1.625rem; }
  .module-hero { padding: 6rem 0 3rem; }
  .module-hero h1 { font-size: 1.875rem; }
  .module-hero.split h1 { font-size: 1.75rem; }
  .modul-hero-visual { max-width: none; }
  .mock { padding: 1rem; }
  .video-rahmen { padding: 1.25rem .75rem; }
  .video-rahmen video { max-height: 70vh; }
  .blick-card { padding: 1.5rem; }
  .cross-card { flex-direction: column; gap: .75rem; padding: 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}