/* main0.css - Design 0: Systemseite dentalspezialisten.de (Anbieterseite, keine Praxis)
   ============================================================================
   Farbschema-Begründung (siehe auch v3/NOTES.md):
   - Primär: tiefes Petrol/Teal statt Navy/Gold. Teal ist im Dental-/Healthcare-
     Umfeld kategorie-kongruent (klinisch-ruhig, aber wärmer/eigenständiger als
     das generische Marineblau, das v1 aus dem Handwerk-Template geerbt hat).
   - CTA: gebranntes Orange (#c2410c) — taucht NIRGENDS sonst auf der Seite auf
     (Von-Restorff-/Isolationseffekt: der Handlungs-Button ist das einzige
     Element dieser Farbe). Weiß auf #c2410c erfüllt WCAG AA (~5:1).
   - Alle Text/Hintergrund-Kombinationen auf WCAG-2.1-AA-Kontrast geprüft.
   - Keine Webfonts (Core Web Vitals, wie v1/v2), Systemschrift mit klarer
     typografischer Skala.
   --color-navy bleibt als Alias definiert, damit aus v2 übernommene
   Nebenseiten (Impressum/Datenschutz mit Inline-Styles) ohne Umbau rendern.
   ============================================================================ */

:root {
  --teal-950: #062b29;
  --teal-900: #0b3f3c;   /* Primär dunkel: Hero-Hintergrund, Überschriften */
  --teal-800: #0f4f4a;
  --teal-700: #12655f;   /* Links, sekundäre Interaktion */
  --teal-100: #d5eae6;
  --mint-50:  #f4f9f7;   /* Seitenhintergrund */
  --ink:      #1c2b2a;   /* Fließtext */
  --ink-muted:#46605d;   /* gedämpfter Text, AA auf Weiß & mint-50 */
  --cta:      #c2410c;   /* NUR für Call-to-Action-Buttons */
  --cta-dark: #9a3412;
  --warn-bg:  #fdf1d6;   /* Sommerspecial-Badge (Amber-Familie, kein Button) */
  --warn-text:#7c4a03;
  --border:   #d9e5e2;
  --white:    #ffffff;
  --color-navy: #0b3f3c; /* Alias für übernommene Nebenseiten */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --max-width: 1160px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(6, 43, 41, 0.10);
  --shadow-soft: 0 3px 14px rgba(6, 43, 41, 0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--mint-50);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); }
a:hover { color: var(--teal-900); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 { color: var(--teal-900); line-height: 1.22; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; }
h3 { font-size: 1.13rem; }

/* Barrierefreiheit: Skip-Link + sichtbarer Fokus */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal-900); color: #fff;
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1.02rem;
  padding: 15px 26px; border-radius: var(--radius-sm);
  border: 0; cursor: pointer; font-family: inherit;
  transition: background .15s ease, transform .1s ease;
}
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 4px 14px rgba(194, 65, 12, .28); }
.btn-primary:hover { background: var(--cta-dark); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--teal-900);
  border: 2px solid var(--teal-100); font-weight: 600;
}
.btn-ghost:hover { border-color: var(--teal-700); }
.btn-block { display: block; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.site-header .container {
  display: flex; align-items: center; gap: 26px; min-height: 64px;
}
.logo {
  font-size: 1.22rem; font-weight: 800; text-decoration: none;
  color: var(--teal-900); letter-spacing: -0.02em;
}
.logo span { color: var(--teal-700); font-weight: 600; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
}
.main-nav a:hover { color: var(--teal-700); }
.header-cta {
  background: var(--cta); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: .92rem;
  padding: 10px 18px; border-radius: var(--radius-sm); white-space: nowrap;
}
.header-cta:hover { background: var(--cta-dark); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: 8px; font-size: 1.4rem; padding: 4px 12px; cursor: pointer;
  color: var(--teal-900);
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(18, 101, 95, .55), transparent 60%),
    linear-gradient(160deg, var(--teal-900) 0%, var(--teal-950) 78%);
  color: #eef7f5;
  padding: 58px 0 46px;
}
.hero .container {
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px 48px; align-items: start;
  grid-template-areas: "copy card" "extras card";
}
.hero-copy { grid-area: copy; }
.hero-card { grid-area: card; }
.hero-extras { grid-area: extras; }
.hero-eyebrow {
  display: inline-block; font-size: .86rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #a8d5cd; margin-bottom: 16px;
}
.hero h1 {
  color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800; margin: 0 0 16px; letter-spacing: -0.02em;
}
.hero h1 em { font-style: normal; color: #ffd9a8; }
.hero .lead {
  font-size: 1.1rem; color: #cfe5e0; margin: 0 0 22px; max-width: 34em;
}
.hero-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.hero-checks li { display: flex; gap: 10px; align-items: baseline; color: #e4f2ef; font-weight: 600; }
.hero-checks .check { color: #7fd4c5; font-weight: 800; }
.hero-langs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font-size: .9rem; color: #a8d5cd; margin-top: 6px;
}
.hero-langs img { width: 21px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); display: inline-block; }
.hero-langs .lang { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #d6ebe6; }

/* Hero-Formularkarte — der visuelle Ankerpunkt der Seite */
.hero-card {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 26px 20px;
}
.hero-card h2 {
  font-size: 1.22rem; margin: 0 0 4px;
}
.hero-card .hero-card-sub { margin: 0 0 18px; color: var(--ink-muted); font-size: .95rem; }
.hero-card-footer {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: .85rem; color: var(--ink-muted);
}
.hero-card-footer strong { color: var(--teal-900); }
.hero-alt-link { margin: 12px 0 0; font-size: .92rem; text-align: center; }

/* ---------- Formulare ---------- */
.form-group { margin-bottom: 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 5px; color: var(--teal-900); }
.req { color: var(--cta-dark); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%; padding: 12px 13px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--teal-700); }
.help { display: block; margin-top: 5px; font-size: .84rem; color: var(--ink-muted); font-weight: 400; }
.consent-note { font-size: .84rem; color: var(--ink-muted); margin: 10px 0 0; text-align: center; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; }
.consent-row input { margin-top: 4px; }
.consent-row label { font-weight: 400; font-size: .88rem; margin: 0; color: var(--ink); }
.toggle-row { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.toggle-hint { font-size: .84rem; color: var(--ink-muted); margin: 5px 0 0 28px; }
.rueckruf-details, .color-custom { margin-top: 12px; }
.step-label {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--teal-700);
  margin: 22px 0 12px; padding-top: 16px; border-top: 1px dashed var(--border);
}
.step-label:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Abschnitte allgemein ---------- */
section { padding: 64px 0; }
section.tight { padding: 40px 0; }
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--ink-muted); margin: 8px 0 0; }
.kicker {
  display: inline-block; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700);
  margin-bottom: 8px;
}
.alt { background: var(--white); }

/* ---------- Beweis-Leiste ---------- */
.proof-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.proof {
  text-align: center; padding: 18px 10px;
}
.proof-num { font-size: 1.9rem; font-weight: 800; color: var(--teal-900); letter-spacing: -0.02em; }
.proof-num .star { color: var(--teal-700); font-size: 1.1rem; vertical-align: super; }
.proof-label { font-size: .92rem; color: var(--ink-muted); }
.proof-flags { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; padding-top: 10px; }
.proof-flags img { width: 26px; height: 19px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.proof-footnote { text-align: center; font-size: .8rem; color: var(--ink-muted); margin: 14px 0 0; }

/* ---------- Ablauf ---------- */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  counter-reset: step;
}
.process-step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-soft);
  position: relative;
}
.process-step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal-900); color: #fff; font-weight: 800; font-size: 1.05rem;
  margin-bottom: 12px;
}
.process-step h3 { margin: 0 0 6px; }
.process-step p { margin: 0; font-size: .94rem; color: var(--ink-muted); }
.process-step .step-time {
  display: inline-block; font-size: .78rem; font-weight: 700;
  color: var(--teal-700); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}

/* Warum-kostenlos-Box */
.why-free {
  margin-top: 42px;
  display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: center;
  background: var(--teal-900); color: #dcefeb;
  border-radius: var(--radius); overflow: hidden;
}
.why-free img { width: 100%; height: 100%; object-fit: cover; }
.why-free-body { padding: 28px 32px 28px 4px; }
.why-free h3 { color: #fff; font-size: 1.25rem; margin: 0 0 8px; }
.why-free p { margin: 0 0 8px; }
.why-free p:last-child { margin: 0; }

/* ---------- Problem/Lösung-Karten ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit-card {
  background: var(--mint-50); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.alt .benefit-card { background: var(--mint-50); }
.benefit-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--teal-100); color: var(--teal-800);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.benefit-card .icon svg { width: 24px; height: 24px; }
.benefit-card h3 { margin: 0 0 8px; }
.benefit-card p { font-size: .93rem; margin: 0 0 10px; color: var(--ink-muted); }
.benefit-card p.solution { color: var(--ink); margin: 0; }
.benefit-card p.solution strong { color: var(--teal-800); }

/* ---------- Preise ---------- */
.pricing-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: start; }
.price-card {
  background: var(--white); border: 2px solid var(--teal-800);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
  position: relative;
}
.price-promo-badge {
  display: inline-block; background: var(--warn-bg); color: var(--warn-text);
  font-weight: 700; font-size: .84rem; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 12px;
}
.price-card h3 { font-size: 1.4rem; margin: 0 0 4px; }
.price-sub { color: var(--ink-muted); margin: 0 0 14px; }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.price-old { text-decoration: line-through; color: var(--ink-muted); font-size: 1.05rem; }
/* Kuenftiger Preis statt frueherer (16.09.2026): bewusst OHNE Durchstreichung.
   Ein Streichpreis behauptet, dass dieser Betrag einmal verlangt wurde - das
   Komplettpaket wurde aber nie fuer 2.500 EUR verkauft. Hier steht der Preis,
   der NACH der Aktion gilt; durchgestrichen waere das schlicht falsch. */
.price-next { color: var(--ink-muted); font-size: 1.05rem; }
.price-amount { font-size: 2.3rem; font-weight: 800; color: var(--teal-900); letter-spacing: -0.02em; }
.price-amount small { font-size: .95rem; font-weight: 600; color: var(--ink-muted); }
.feature-group { margin-bottom: 18px; }
.feature-group h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--teal-700); margin: 0 0 8px;
}
.feature-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.feature-group li { display: flex; gap: 9px; align-items: baseline; font-size: .94rem; }
.feature-group .check { color: var(--teal-700); font-weight: 800; flex: 0 0 auto; }
.lang-flags { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lang-flags img { width: 18px; height: 13px; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.price-card .btn { margin-top: 8px; }

.rent-card, .pricing-addons {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-soft);
}
.rent-card { margin-bottom: 20px; }
.optional-badge {
  display: inline-block; background: var(--teal-100); color: var(--teal-800);
  font-weight: 800; font-size: .78rem; padding: 5px 12px; border-radius: 999px;
  margin-bottom: 10px;
}
.rent-card h3, .pricing-addons h3 { margin: 0 0 8px; font-size: 1.12rem; }
.rent-card p, .pricing-addons > p { font-size: .92rem; color: var(--ink-muted); margin: 0 0 10px; }
.rent-card .price-amount { font-size: 1.7rem; }
.rent-terms { font-size: .84rem; color: var(--ink-muted); margin: 6px 0 0; }
.addon-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.addon-row strong { display: block; font-size: .95rem; color: var(--teal-900); }
.addon-row span { font-size: .85rem; color: var(--ink-muted); }
.addon-price { font-weight: 800; color: var(--teal-900); white-space: nowrap; }
.addon-price small { font-weight: 600; color: var(--ink-muted); }
.addon-bundle {
  margin: 12px 0 0; padding: 10px 14px; background: var(--mint-50);
  border-radius: var(--radius-sm); font-size: .9rem;
}
.pricing-note { font-size: .82rem; color: var(--ink-muted); margin: 22px auto 0; max-width: 860px; text-align: center; }

/* ---------- Technik (AEO + Barrierefreiheit) ---------- */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tech-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-soft);
}
.tech-card h3 { font-size: 1.2rem; margin: 0 0 10px; }
.tech-card p { font-size: .95rem; color: var(--ink-muted); }
.tech-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tech-card li { display: flex; gap: 9px; align-items: baseline; font-size: .93rem; }
.tech-card .check { color: var(--teal-700); font-weight: 800; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 20px;
}
.faq-item summary {
  cursor: pointer; font-weight: 700; padding: 16px 0; color: var(--teal-900);
  list-style: none; position: relative; padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%); font-size: 1.3rem; color: var(--teal-700);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p, .faq-item div { padding-bottom: 16px; margin: 0; color: var(--ink-muted); font-size: .95rem; }
.faq-rueckruf-form { padding-bottom: 16px; }

/* ---------- Haupt-Anfrage ---------- */
#anfrage { background: linear-gradient(160deg, var(--teal-900), var(--teal-950)); }
#anfrage .section-head h2, #anfrage .section-head { color: #fff; }
#anfrage .section-head p { color: #cfe5e0; }
#anfrage .kicker { color: #a8d5cd; }
.lead-form-wrap {
  max-width: 720px; margin: 0 auto; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
}
.strang-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: var(--mint-50); border-radius: var(--radius-sm); padding: 6px;
  margin-bottom: 6px;
}
.strang-tab {
  border: 0; background: transparent; padding: 11px 10px; font-family: inherit;
  font-size: .95rem; font-weight: 700; color: var(--ink-muted);
  border-radius: 7px; cursor: pointer;
}
.strang-tab[aria-selected="true"] { background: var(--teal-900); color: #fff; }
.form-reassure {
  text-align: center; font-size: .86rem; color: var(--ink-muted); margin: 10px 0 18px;
}
.hint { font-size: .9rem; color: var(--ink-muted); background: var(--mint-50);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 18px; }
.wa-alt {
  max-width: 720px; margin: 18px auto 0; text-align: center;
  font-size: .92rem; color: #cfe5e0;
}
.wa-alt a { color: #a8d5cd; font-weight: 700; }

/* ---------- Unterseite social-dent.php (nutzt v2-Struktur) ---------- */
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.pricing-single { display: grid; gap: 20px; margin-top: 10px; }
.price-card > ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.price-card > ul > li { padding-left: 22px; position: relative; font-size: .94rem; }
.price-card > ul > li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-700); font-weight: 800; }

/* ---------- Social-Dent-Bonus ---------- */
.bonus-band {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-soft);
}
.bonus-band .bonus-tag {
  background: var(--teal-100); color: var(--teal-800); font-weight: 800;
  padding: 8px 14px; border-radius: 999px; font-size: .85rem; white-space: nowrap;
}
.bonus-band h3 { margin: 0 0 4px; }
.bonus-band p { margin: 0; font-size: .92rem; color: var(--ink-muted); }

/* ---------- Sticky Mobile CTA ---------- */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(6, 43, 41, .12);
}
.sticky-cta.is-hidden { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-950); color: #a9c6c1; padding: 44px 0 26px; }
.site-footer h4 { color: #fff; margin: 0 0 10px; font-size: 1rem; }
.site-footer p { font-size: .9rem; margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: #a9c6c1; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-bottom: 28px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: .85rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Mobile: Formularkarte direkt nach der Lead-Zeile, Checks/Sprachen danach */
  .hero .container { grid-template-columns: 1fr; gap: 26px; grid-template-areas: "copy" "card" "extras"; }
  .hero { padding: 40px 0 36px; }
  .proof-bar { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .why-free { grid-template-columns: 1fr; }
  .why-free img { max-height: 240px; }
  .why-free-body { padding: 24px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bonus-band { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 700px) {
  section { padding: 46px 0; }
  .pricing-single { grid-template-columns: 1fr !important; }
  /* Mobile Kopfzeile: die Menuepunkte sind hier ausgeblendet und stecken
     komplett hinter dem Burger - wie in der abgenommenen Vorlage. */
  .main-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 22px 18px;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 12px; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header .header-cta { display: none; }
  .process-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .sticky-cta { display: block; }
  body { padding-bottom: 74px; }
  .hero-card { padding: 20px 18px 16px; }
  .lead-form-wrap { padding: 18px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Ergaenzungen fuer den Betrieb im CMS (2026-09-01)
   Das Stylesheet oben ist unveraendert aus /v4/ uebernommen. Alles ab
   hier kommt neu dazu, weil die Seite jetzt nicht mehr eine einzelne
   statische index.php ist, sondern aus dem Baukasten heraus gerendert
   wird (Menue aus der Datenbank, Inhalte aus dem Admin).
   ===================================================================== */

/* Anker-Sprungziele: der Header ist sticky (min-height 64px) und wuerde
   sonst die Ueberschrift der angesprungenen Section verdecken. */
main > section[id] { scroll-margin-top: 80px; }

/* Aktiver Menuepunkt beim Scrollen (wird von js/main0.js gesetzt).
   Rein additiv - ohne JavaScript sieht die Navigation aus wie bisher. */
.main-nav a.aktiv {
  color: var(--teal-900);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--cta);
}

/* Sicherheitsnetz: die geteilten CMS-Inhaltsvorlagen liefern teilweise
   ein <div class="container"> INNERHALB eines bereits containerten
   Bereichs. Ohne diese Regel entstuende eine doppelte Einrueckung mit
   halber Textbreite (bekanntes Muster aus den Praxis-Designs). */
.container .container { max-width: none; padding: 0; margin: 0; }

/* Der Baukasten gibt auf jeder Seite einen Breadcrumb aus. Auf einer
   One-Page-Seite gibt es keine Hierarchie, die er abbilden koennte -
   das Geruest (geruest0.tpl.htm) laesst ihn deshalb ganz weg. Diese
   Regel faengt nur den Fall ab, dass er ueber einen anderen Weg doch
   im Markup landet. */
main > .breadcrumb { display: none; }