/* =============================================================
   Vortrieb Gruppe · Corporate Design
   Die Radberater (B2C) + Vortrieb Gruppe (B2B)
   WCAG 2.1 Level AA konform
   ============================================================= */

/* ── Fonts (selbst gehostet, DSGVO-konform) ───────────────────
   Variable Fonts – decken alle Schnitte in je einer Datei ab.
   Dateien liegen in /fonts/. Kein externer Request an Google. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/saira-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/saira-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Angepasste Ersatzschriften ───────────────────────────────
   Bis Manrope und Saira geladen sind, zeigt der Browser Arial
   (bzw. die maßgleichen Liberation Sans / Arimo unter Linux).
   Die Overrides bringen Laufweite und Höhe auf die Maße der
   Webfonts, damit beim Schriftwechsel nichts verrutscht
   (Cumulative Layout Shift). Werte im Browser gegen Arial gemessen. */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102%;
  ascent-override: 105%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Saira Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 99%;
  ascent-override: 114%;
  descent-override: 44%;
  line-gap-override: 0%;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:      #1A1A1A;
  --paper:    #FAFAF8;
  --paper2:   #FFFFFF;
  --grey:     #6E6E6E;
  --grey-a11y:#595959;   /* AA-konform für Fließtext auf --paper */
  --line:     #E6E4DE;
  --signal:      #0E7490;   /* Petrol – einziger Akzent laut CD-Manual (04 · Farbe) */
  --signal-dark: #0B5C73;   /* dunklere Variante für Hover-Zustände */
  --on-signal:   #FAFAF8;   /* Textfarbe auf Signal-Flächen (heller Text auf Petrol) */

  /* Typography */
  --font-display: 'Saira', 'Saira Fallback', sans-serif;
  --font-body:    'Manrope', 'Manrope Fallback', sans-serif;

  /* Layout */
  --max-width: 1080px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(var(--line) 0.5px, transparent 0.5px);
  background-size: 26px 26px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Accessibility: Skip Link ─────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 9999;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ── Focus styles (WCAG 2.4.11) ──────────────────────────── */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Remove default focus ring when focus-visible handles it */
:focus:not(:focus-visible) { outline: none; }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
section { padding: 88px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }

/* ── Navigation ───────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,250,248,0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  position: relative;
}
.nav-logo img { height: 28px; width: auto; }
/* Hover-Unterstreichung wie bei einem Textlink. Das Logo ist ein Bild,
   deshalb als Linie darunter: Schrift endet 4px über der Bildkante,
   Farbe = Logo-Ton (#1A1A1A, 80 % deckend) */
.nav-logo::after {
  content: "";
  position: absolute; left: 4px; right: 4px; bottom: -1px;
  border-top: 1.5px solid rgba(26,26,26,0.8);
  visibility: hidden;
}
.nav-logo:hover::after { visibility: visible; }

/* CSS text logo fallback */
.logo-text {
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1;
  display: inline-flex; flex-direction: column;
  color: var(--ink);
}
.logo-text .die {
  font-weight: 600; font-size: 0.55rem; letter-spacing: 0.18em;
  margin-bottom: 0.12em; text-transform: lowercase;
}
.logo-text .nm { font-size: 1rem; letter-spacing: -0.02em; }
.logo-text .nm b { font-weight: 800; }
.logo-text .nm s { font-weight: 200; text-decoration: none; }

/* Vortrieb Gruppe wordmark */
.vortrieb-mark {
  display: flex; align-items: center; gap: 12px;
}
.vortrieb-mark svg { flex-shrink: 0; }
.vortrieb-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.vortrieb-wordmark s { font-weight: 200; text-decoration: none; }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
  font-family: var(--font-body);
  color: var(--grey-a11y); font-size: 0.85rem; font-weight: 500;
  padding: 6px 14px; border-radius: 4px; transition: all 0.15s;
  white-space: nowrap; text-decoration: none;
}
.nav-links a:hover { color: var(--ink); background: rgba(26,26,26,0.05); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-cta {
  background: var(--ink) !important; color: var(--paper) !important;
  font-weight: 600 !important; padding: 8px 18px !important; border-radius: 4px !important;
}
.nav-cta:hover { background: #333 !important; }

/* Menü-Button – nur unterhalb 900px sichtbar (siehe Responsive) */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin: 0; border-radius: 4px;
  color: var(--ink);
  align-items: center; justify-content: center;
  transition: background 0.15s;
}
.nav-toggle:hover { background: rgba(26,26,26,0.05); }
.nav-toggle:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.nav-toggle svg { width: 26px; height: 26px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  padding: 112px 0 96px;
  background: var(--paper);
  text-align: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,77,20,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--grey-a11y);
  margin-bottom: 24px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; display: block; width: 22px; height: 1.5px; background: var(--grey);
}

.hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 1000px; margin-left: auto; margin-right: auto;
}
.hero h1 em { font-style: normal; color: var(--signal); }
.hero p {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--grey-a11y);
  max-width: 520px; margin: 0 auto 40px;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.2s;
  white-space: nowrap; letter-spacing: 0.01em;
  text-decoration: none;
}
/* Signal button: heller Text auf Petrol → 5,13:1 Kontrast ✓ (WCAG AA) */
.btn-primary {
  background: var(--signal); color: var(--on-signal);
}
.btn-primary:hover { background: var(--signal-dark); transform: translateY(-1px); }

/* Secondary: ink on paper2, bordered */
.btn-secondary {
  background: var(--paper2); color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover { background: #f0ede5; border-color: #ccc; }

/* Ghost */
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Inverted (on dark bg) */
.btn-inv { background: var(--paper); color: var(--ink); border: none; }
.btn-inv:hover { background: var(--paper2); }

/* ── Eyebrow / Section Labels ─────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--grey-a11y); margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px; background: var(--ink); flex-shrink: 0;
}

/* ── Section Typography ───────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 14px; color: var(--ink);
}
.section-body {
  font-size: 1rem; color: var(--grey-a11y);
  max-width: 56ch; line-height: 1.7;
}
.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.section-header.center .section-body,
.section-header.center .eyebrow { margin-left: auto; margin-right: auto; justify-content: center; }

/* ── Stats row ────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--paper2);
}
.stats > * + * { border-left: 1px solid var(--line); }
.stat { padding: 44px 32px; text-align: center; }
.stat-num {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
  margin-bottom: 8px;
}
.stat-label { font-size: 0.82rem; color: var(--grey-a11y); font-weight: 500; }

/* ── Feature Cards ────────────────────────────────────────── */
.feature-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.features-3 { grid-template-columns: repeat(3, 1fr); }
.features-2 { grid-template-columns: repeat(2, 1fr); }

.feature-card {
  background: var(--paper2);
  padding: 36px 32px;
  transition: background 0.2s;
}
.feature-card:hover { background: #fefefe; }

.feature-icon {
  font-size: 1.4rem; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--paper); border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.feature-icon svg { width: 24px; height: 24px; stroke: var(--signal); }
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 10px; color: var(--ink);
}
.feature-card p { font-size: 0.875rem; color: var(--grey-a11y); line-height: 1.65; }
.feature-note {
  font-size: 0.78rem; font-weight: 700; color: var(--signal);
  margin-top: 12px; letter-spacing: 0.01em;
}

/* ── Split section ────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* Zweispaltiges Textlayout (Ablauf-/Buchungs-Sektionen).
   Ersetzt frühere Inline-Styles auf den Seiten – nur so lässt sich
   die Spalte auf schmalen Viewports zentral umbrechen. */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.split-img {
  aspect-ratio: 4/5; background: var(--paper2);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; overflow: hidden;
}
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.1; margin-bottom: 16px;
}
.split-text p {
  color: var(--grey-a11y); font-size: 0.9rem;
  line-height: 1.72; margin-bottom: 13px;
}
.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 22px 0 28px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.875rem; color: var(--grey-a11y);
}
.check-icon {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-size: 0.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* ── Process steps ────────────────────────────────────────── */
.process { display: flex; flex-direction: column; }
.process-step {
  display: grid; grid-template-columns: 40px 1fr;
  gap: 18px; padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.process-step:last-child { border-bottom: none; }
.process-num {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  font-style: italic;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.process-body h3 {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; margin-bottom: 5px;
}
.process-body p { font-size: 0.85rem; color: var(--grey-a11y); line-height: 1.65; }

/* ── Offer cards ──────────────────────────────────────────── */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.offer-card {
  background: var(--paper2); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 0.2s;
}
.offer-card:hover { background: #fefefe; }
.offer-card.featured { background: var(--ink); }
.offer-card.featured * { color: rgba(250,250,248,0.85) !important; }
.offer-card.featured h3 { color: var(--paper) !important; }
.offer-icon { font-size: 1.5rem; margin-bottom: 6px; }
.offer-card h3 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
}
.offer-card p { font-size: 0.85rem; color: var(--grey-a11y); line-height: 1.65; flex: 1; }
.offer-price { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-top: 6px; }
.offer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.offer-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--paper); color: var(--grey-a11y);
  padding: 3px 9px; border-radius: 2px; border: 1px solid var(--line);
}
.offer-card.featured .offer-tag {
  background: rgba(250,250,248,0.12); color: rgba(250,250,248,0.7);
  border-color: rgba(250,250,248,0.2);
}

/* Leistungen & Preise – kombinierte Karten (Flexbox füllt jede Zeile, keine leeren Kacheln) */
.service-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-card { flex: 1 1 300px; min-width: 260px; background: var(--paper2); padding: 32px 28px; display: flex; flex-direction: column; }
.service-card:hover { background: #fefefe; }
.service-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 16px 0 8px; }
.service-card p { font-size: 0.875rem; color: var(--grey-a11y); line-height: 1.65; flex: 1; margin: 0 0 16px; }
.service-price { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; }

/* ── Ratgeber-Teaser auf den Service-Seiten ───────────────────
   Führt von der Angebotsseite zu den fachlich passenden Artikeln.
   Steht bewusst UNTER dem Anfrageformular, damit er den CTA nicht abzieht.
   Flexbox wie .service-grid – keine leeren Kacheln in der letzten Zeile. */
.teaser-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.teaser-card {
  flex: 1 1 300px; min-width: 260px; background: var(--paper2);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit; transition: background 0.2s;
}
.teaser-card:hover { background: #fefefe; }
.teaser-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.teaser-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); margin: 0; }
.teaser-card p { font-size: 0.85rem; color: var(--grey-a11y); line-height: 1.6; margin: 0; }

/* ── Price box ────────────────────────────────────────────── */
.price-box {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px 28px; background: var(--paper2); margin-top: 32px;
}
.price-box .amount {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: 2.4rem; letter-spacing: -0.03em;
  color: var(--ink); line-height: 1; margin-bottom: 4px;
}
.price-box .caption { font-size: 0.82rem; color: var(--grey-a11y); margin-bottom: 12px; }
.price-box .note { font-size: 0.82rem; color: var(--grey-a11y); line-height: 1.6; }
.price-box .note em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ── Form ─────────────────────────────────────────────────── */
.form-wrap {
  background: var(--paper2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px 36px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-a11y);
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: var(--font-body);
  background: var(--paper); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,26,26,0.1);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.76rem; color: var(--grey-a11y); }
.form-error {
  font-size: 0.78rem; color: #b3261e; font-weight: 600; margin-top: 3px; display: none;
}
.form-success {
  display: none; background: #f0faf4; color: #1a5c35;
  border: 1px solid #a3d9b8; border-radius: var(--radius-sm);
  padding: 14px 18px; margin-top: 14px;
  font-size: 0.88rem; font-weight: 600;
  role: "status";
}
.form-submit {
  width: 100%; padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--signal); color: var(--on-signal); /* 5,13:1 Kontrast ✓ (WCAG AA) */
  border: none; font-size: 0.9rem; font-weight: 700;
  font-family: var(--font-body); letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.form-submit:hover { background: var(--signal-dark); transform: translateY(-1px); }
.form-submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ── Banner ───────────────────────────────────────────────── */
.banner {
  background: var(--paper2); border-bottom: 1px solid var(--line);
  padding: 80px 32px; text-align: center;
}
.banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px;
}
.banner p { color: var(--grey-a11y); font-size: 1rem; max-width: 48ch; margin: 0 auto 32px; line-height: 1.7; }
.banner-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Quote / Dark section ─────────────────────────────────── */
.section-dark {
  background: var(--ink); padding: 80px 32px; text-align: center;
  border-bottom: none;
}
.section-dark blockquote {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--paper); max-width: 680px; margin: 0 auto 16px;
  line-height: 1.5; letter-spacing: -0.01em;
  quotes: "„" """ "‚" "'";
}
.section-dark blockquote::before { content: open-quote; }
.section-dark blockquote::after { content: close-quote; }
.section-dark cite {
  font-size: 0.8rem; color: var(--grey);
  font-style: normal; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Page hero (inner pages) ──────────────────────────────── */
.page-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em; margin-bottom: 12px; line-height: 0.95;
}
.page-hero p { font-size: 1rem; color: var(--grey-a11y); }

/* ── Prose ────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; letter-spacing: -0.01em;
  margin: 40px 0 12px; color: var(--ink);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; margin: 24px 0 8px;
}
.prose p { color: var(--grey-a11y); font-size: 0.9rem; line-height: 1.72; margin-bottom: 12px; }
.prose ul { color: var(--grey-a11y); font-size: 0.9rem; padding-left: 20px; margin-bottom: 14px; }
.prose li { margin-bottom: 6px; line-height: 1.65; }
/* Links im Fließtext müssen ohne Farbe erkennbar sein (WCAG 1.4.1), deshalb
   unterstrichen. Gilt für Ratgeber-Artikel (.article-body), Fließtext-Absätze
   in <main> (Über mich, FAQ der Service-Seiten) und .prose (Impressum).
   Buttons sind ausgenommen – die tragen die Klasse .btn. */
.prose a,
.article-body a:not(.btn),
main p a:not(.btn),
main li a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover,
.article-body a:not(.btn):hover,
main p a:not(.btn):hover,
main li a:not(.btn):hover { color: var(--signal); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }
/* Quellenblock der Ratgeber-Artikel. Mit .article-body davor, damit die Regeln
   die Inline-Styles .article-body h2/li/p der Artikel überstimmen. */
.article-body .sources { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 36px; }
.article-body .sources h2 { font-size: 0.95rem; margin: 0 0 12px; }
.article-body .sources li,
.article-body .sources p { font-size: 0.82rem; color: var(--grey-a11y); line-height: 1.6; }

/* ── Endorsement line ─────────────────────────────────────── */
.endorsement {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey);
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: var(--paper2);
  border-top: 1px solid var(--line);
  padding: 56px 32px 32px;
}
.footer-grid {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { margin-bottom: 8px; }
.footer-tagline { font-size: 0.8rem; color: var(--grey-a11y); margin-top: 4px; }
.footer-col h4 {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 0.85rem; color: var(--grey-a11y);
  margin-bottom: 9px; transition: color 0.15s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); }
/* Social-Links mit Icon. Monochrom über currentColor – das Icon erbt die
   Textfarbe und den Hover, damit keine Fremdfarbe ins CD kommt. */
.footer-col a.footer-social { display: flex; align-items: center; gap: 8px; }
.footer-col a.footer-social svg { width: 16px; height: 16px; flex: none; }
.footer-bottom {
  max-width: var(--max-width); margin: 28px auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.76rem; color: var(--grey);
}
.footer-bottom a { color: var(--grey); text-decoration: none; }
.footer-bottom a:hover { color: var(--grey-a11y); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .features-3 { grid-template-columns: repeat(2, 1fr); }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .grid-2col { grid-template-columns: 1fr; gap: 48px; }
  .split-img { aspect-ratio: 3/2; font-size: 4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile-Navigation: Links wandern ins aufklappbare Panel.
   Eigener Breakpoint – die Desktop-Nav braucht rund 895px, 960px lässt Reserve
   für abweichendes Schriftrendering. Wert auch in js/main.js (resize) anpassen. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(26,26,26,0.10);
    padding: 6px 20px 18px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 15px 4px; font-size: 0.95rem;
    border-radius: 0; border-bottom: 1px solid var(--line);
  }
  .nav-links a:hover { background: transparent; color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .nav-cta {
    margin-top: 14px; text-align: center;
    border-bottom: none !important;
    padding: 14px 18px !important;
  }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .features-3, .features-2, .offer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-wrap { padding: 24px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: 1fr; }
  .stats > * + * { border-left: none; border-top: 1px solid var(--line); }
}

/* ── FAQ Akkordeon ────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  gap: 16px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.2rem; font-weight: 300;
  color: var(--grey-a11y);
  flex-shrink: 0; transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  font-size: 0.875rem; color: var(--grey-a11y);
  line-height: 1.72; padding-bottom: 18px;
  max-width: 64ch;
}

/* ── Pre-launch Banner ────────────────────────────────────── */
.prelaunch-bar {
  background: var(--signal);
  padding: 16px 32px;
  border-bottom: 2px solid rgba(0,0,0,0.12);
}
.prelaunch-bar-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.prelaunch-bar-text {
  font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 700;
  color: var(--on-signal); flex: 1 1 280px;
}
.prelaunch-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 380px;
}
.prelaunch-form input[type="email"] {
  padding: 8px 12px;
  border: 1.5px solid rgba(26,26,26,0.35);
  border-radius: var(--radius-sm);
  font-size: 0.85rem; font-family: var(--font-body);
  background: rgba(255,255,255,0.88);
  color: var(--ink); min-width: 200px; flex: 1 1 200px;
  transition: border-color 0.15s;
}
.prelaunch-form input[type="email"]:focus {
  outline: 3px solid var(--ink); outline-offset: 2px;
  border-color: var(--ink);
}
.prelaunch-bar { scroll-margin-top: 72px; } /* unter der Sticky-Navigation sichtbar bleiben */
.prelaunch-note, .prelaunch-status {
  flex-basis: 100%; margin: 0;
  font-size: 0.78rem; line-height: 1.5; color: var(--on-signal);
}
.prelaunch-note a { color: var(--on-signal); text-decoration: underline; }
.prelaunch-status { font-weight: 700; }
.prelaunch-status:empty { display: none; }
.prelaunch-form.is-done input[type="email"],
.prelaunch-form.is-done .prelaunch-submit,
.prelaunch-form.is-done .prelaunch-note { display: none; }
/* Honeypot gegen Spam-Bots: für Menschen unsichtbar */
.prelaunch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prelaunch-submit:disabled { opacity: 0.7; cursor: wait; }
.vormerken-page { max-width: 640px; }
.vormerken-page p { margin-bottom: 20px; line-height: 1.7; }
.vormerken-confirm { margin: 28px 0; }
.prelaunch-submit {
  padding: 9px 20px;
  background: var(--paper); color: var(--ink);
  border: none; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: background 0.2s;
  white-space: nowrap;
}
.prelaunch-submit:hover { background: #fff; }
.prelaunch-submit:focus-visible {
  outline: 3px solid var(--on-signal); outline-offset: 3px;
}

/* Versteckt Buchungsformulare bis 1.1.2027 */
/* Zum Start: Klasse .prelaunch-hidden entfernen */
.prelaunch-hidden { display: none !important; }
.prelaunch-placeholder {
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
  text-align: center;
  color: var(--grey-a11y);
  font-size: 0.9rem; line-height: 1.7;
}
.prelaunch-placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}

@media (max-width: 640px) {
  .prelaunch-bar { padding: 14px 20px; }
  .prelaunch-bar-inner { flex-direction: column; align-items: flex-start; }
  /* In der Spalte wäre flex-basis eine Höhe, deshalb hier auf auto */
  .prelaunch-bar-text, .prelaunch-form { flex: 0 0 auto; }
  .prelaunch-form { width: 100%; }
  .prelaunch-form input[type="email"] { width: 100%; min-width: 0; }
}

/* ── Artikel-CTA (Ratgeber) – Überlaufschutz ──────────────────
   .article-cta ist nicht hier, sondern im seiteneigenen <style>-Block
   jedes Artikels definiert. Dieser steht nach dem Stylesheet-Link,
   gewinnt bei gleicher Spezifität also über die Reihenfolge. Die
   doppelte Klasse hebt die Spezifität an (0,2,0 bzw. 0,3,0) und setzt
   die zentrale Regel unabhängig von der Reihenfolge durch.
   Ohne das läuft der CTA-Button (.btn hat white-space: nowrap) bei
   375 px Viewport rund 24 px über den Bildschirmrand hinaus. */
.article-cta.article-cta .btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  max-width: 100%;
  min-height: 44px;              /* WCAG 2.1 AA: Touch-Target */
  white-space: normal;           /* hebt nowrap aus .btn auf */
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .article-cta.article-cta { padding: 32px 20px; }
}


/* ── Nur für Screenreader ─────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Kriterientabelle (Hub-Seiten) ────────────────────────── */
.criteria-wrap { overflow-x: auto; margin: 28px 0 0; }
.criteria-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.criteria-table th,
.criteria-table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: var(--ink);
}
.criteria-table thead th { background: var(--paper2); font-weight: 700; }
.criteria-table tbody th { background: transparent; font-weight: 700; width: 26%; }

@media (max-width: 600px) {
  .criteria-wrap { overflow-x: visible; }
  .criteria-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .criteria-table,
  .criteria-table tbody,
  .criteria-table tr,
  .criteria-table th,
  .criteria-table td { display: block; width: auto; }
  .criteria-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    padding: 6px 0;
  }
  .criteria-table th, .criteria-table td { border: 0; padding: 8px 14px; font-size: 0.86rem; }
  .criteria-table tbody th { width: auto; font-size: 0.95rem; padding-bottom: 2px; }
  .criteria-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--grey-a11y); margin-bottom: 4px;
  }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  nav, .prelaunch-bar, .hero-actions, .banner, footer { display: none; }
  body { background: white; background-image: none; }
  .hero { padding: 32px 0; }
}