/* ============================================================================
 * BIZfit · HR Health Check™ — gemeinsames Stylesheet
 *
 * Bis hierher lag das gesamte CSS inline in index.html. Seit der Trennung von
 * Landingpage und Fragebogen brauchen beide Seiten dieselben Regeln – deshalb
 * liegt es jetzt in einer Datei statt doppelt in zwei.
 *
 * Aufbau: zuerst die Fragebogenregeln (.q-*) aus AP08, danach die Regeln der
 * neuen Landingpage und am Ende der Überschreibungsblock, der die alten
 * Landing-Regeln zurücksetzt.
 * ========================================================================== */

/* ═══════════════════════════════════════════
   PRINT PROTECTION
═══════════════════════════════════════════ */
@media print {
  body > *:not(.print-allowed) { display:none !important; }
  body::after { content:'Dieser Inhalt ist urheberrechtlich geschützt.'; display:block !important; font-size:18px; text-align:center; padding:100px 40px; }
}

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  /* BIZfit CI – Farbwerte aus dem Logo gemessen.
     Weinrot #4E6E5D · Grau #9AA79F. Ruhig, hell, professionell.
     Die Tokennamen bleiben erhalten, damit keine Regel bricht. */
  --navy:       #4E6E5D;
  --marke:      #7F2149;   /* Logo-Weinrot: nur Haupt-Aufruf */
  --on-brand:   #EAF0EA;   /* Akzent auf Markenflaeche */   /* Marke: Akzent, Aufrufe, Markenflaechen  */
  --navy-mid:   #587A69;   /* Hover, sekundaerer Akzent              */
  --navy-light: #7D9988;   /* dritter Akzent, sehr sparsam           */
  --wine-soft:  #F0F4EF;   /* sehr helle Warmflaeche                 */
  --wine-line:  #DDD8CE;   /* Linie auf Warmflaeche                  */
  --gold:       #4E6E5D;   /* frueherer Zweitakzent -> Marke         */
  --gold-light: #587A69;
  --grey:       #9AA79F;   /* Logo-Grau: Metainformation             */
  --cream:      #F6F3EE;   /* Grund: hell, warm, ruhig               */
  --cream-dark: #EFEAE2;
  --text:       #2C332E;   /* nicht schwarz                          */
  --text-mid:   #5A6A5F;
  --text-light: #5F6F64;
  --white:      #FFFFFF;
  --green:      #1E5B34;
  --red:        #8A1F1F;
  --border:     rgba(78,110,93,0.16);
  --border-light: #E4DED5;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--cream); color:var(--text); overflow-x:hidden; }
h1,h2,h3 { font-family:'Cormorant Garamond',serif; }

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 60px; height:72px;
  background:rgba(250,248,247,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(78,110,93,0.15);
}
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--grey); letter-spacing:0.5px; text-decoration:none; }
.nav-logo span { color:var(--gold); }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { color:var(--text-mid); text-decoration:none; font-size:14px; font-weight:400; transition:color 0.2s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--marke); color:var(--white) !important; padding:9px 22px; border-radius:6px; font-weight:600 !important; }
.nav-cta:hover { background:var(--gold-light) !important; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height:100vh;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--wine-soft) 0%, rgba(255,255,255,0) 60%),
    var(--cream);
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:140px 60px 80px;
}
.hero-grid-bg {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(78,110,93,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(78,110,93,0.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(78,110,93,0.08) 0%,transparent 70%); top:-100px; right:-100px; pointer-events:none; }
.hero-glow-2 { position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(46,117,182,0.12) 0%,transparent 70%); bottom:-50px; left:200px; pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:680px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(78,110,93,0.12); border:1px solid rgba(78,110,93,0.3);
  border-radius:99px; padding:6px 16px; font-size:12px; font-weight:600;
  color:#45624F; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:28px; animation:fadeUp 0.6s ease both;
}
.hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--navy); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero h1 { font-size:clamp(42px,5vw,68px); font-weight:700; line-height:1.1; color:var(--text); margin-bottom:24px; animation:fadeUp 0.6s 0.1s ease both; }
.hero h1 em { color:var(--gold); font-style:italic; }
.hero-sub { font-size:18px; line-height:1.7; color:var(--text-mid); margin-bottom:48px; max-width:540px; font-weight:300; animation:fadeUp 0.6s 0.2s ease both; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp 0.6s 0.3s ease both; }

/* ── Reifegradprofil im Hero ─────────────────────────────────────────────── */
.hero-radar {
  position:absolute; right:60px; top:50%; transform:translateY(-50%);
  margin:0; width:min(38vw,380px); z-index:2;
  animation:fadeUp 0.6s 0.4s ease both;
}
.hero-radar svg { width:100%; height:auto; display:block; overflow:visible; }
.radar-ring   { fill:none; stroke:var(--border-light); stroke-width:1; }
.radar-achse  { stroke:var(--border-light); stroke-width:1; }
.radar-benchmark {
  fill:none; stroke:var(--text-light); stroke-width:1.5;
  stroke-dasharray:5 5; opacity:0.75;
}
.radar-wert {
  fill:var(--navy-light); fill-opacity:0.22;
  stroke:var(--navy); stroke-width:2; stroke-linejoin:round;
}
.radar-punkt { fill:var(--navy); }
.hero-radar figcaption {
  margin-top:18px; text-align:center; line-height:1.5;
}
.hero-radar figcaption strong {
  display:block; font-size:14px; font-weight:600; color:var(--text);
}
.hero-radar figcaption span {
  display:block; font-size:12px; color:var(--text-light); margin-top:2px;
}
@media(max-width:1100px){ .hero-radar { position:static; transform:none; width:min(70vw,340px); margin:48px auto 0; } }
.hero-stats { position:absolute; right:60px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:20px; animation:fadeUp 0.6s 0.4s ease both; z-index:2; }
.stat-card { background:var(--white); border:1px solid rgba(78,110,93,0.2); border-radius:12px; padding:20px 28px; text-align:center; min-width:160px; backdrop-filter:blur(10px); }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:700; color:var(--gold); line-height:1; }
.stat-label { font-size:12px; color:var(--text-light); margin-top:4px; letter-spacing:0.5px; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════
   BUTTONS (global)
═══════════════════════════════════════════ */
.btn-gold {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--marke); color:var(--white);
  padding:16px 32px; border-radius:8px;
  font-size:15px; font-weight:600; cursor:pointer;
  border:none; text-decoration:none; transition:all 0.2s;
  font-family:'Outfit',sans-serif; letter-spacing:0.3px;
}
.btn-gold:hover { background:#5E1836; transform:translateY(-2px); box-shadow:0 8px 28px rgba(78,110,93,0.35); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--navy);
  padding:16px 32px; border-radius:8px; font-size:15px; font-weight:400;
  cursor:pointer; border:1px solid var(--navy); text-decoration:none; transition:all 0.2s; font-family:'Outfit',sans-serif;
}
.btn-ghost:hover { background:var(--wine-soft); color:var(--navy); }

/* ═══════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════ */
section { padding:100px 60px; }
.section-label { font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.how { background:var(--white); }
.how h2 { font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--navy); margin-bottom:60px; max-width:500px; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.steps-grid::before { content:''; position:absolute; top:32px; left:60px; right:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.step { padding:0 32px; border-right:1px solid var(--cream-dark); position:relative; }
.step:last-child { border-right:none; }
.step-num { width:64px; height:64px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--white); margin-bottom:24px; position:relative; z-index:1; border:3px solid var(--cream-dark); }
.step h3 { font-size:20px; font-weight:600; color:var(--navy); margin-bottom:10px; line-height:1.3; }
.step p { font-size:14px; color:var(--text-mid); line-height:1.7; font-weight:300; }

/* ═══════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════ */
.features { background:var(--white); position:relative; overflow:hidden; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
.features::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(78,110,93,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(78,110,93,0.03) 1px,transparent 1px); background-size:40px 40px; }
.features-inner { position:relative; z-index:1; }
.features h2 { font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--text); margin-bottom:60px; }
.features h2 em { color:var(--gold); font-style:italic; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card { background:var(--cream); border:1px solid rgba(78,110,93,0.15); border-radius:12px; padding:32px; transition:all 0.3s; }
.feature-card:hover { background:var(--wine-soft); border-color:rgba(78,110,93,0.35); transform:translateY(-4px); }
.feature-icon { font-size:28px; margin-bottom:16px; }
.feature-card h3 { font-size:20px; font-weight:600; color:var(--text); margin-bottom:10px; }
.feature-card p { font-size:14px; color:var(--text-mid); line-height:1.7; font-weight:300; }

/* ═══════════════════════════════════════════
   MODULES
═══════════════════════════════════════════ */
.modules { background:var(--cream); }
.modules h2 { font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--navy); margin-bottom:48px; }
.modules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.module-chip { background:white; border-radius:12px; padding:20px 24px; border-left:4px solid var(--navy-mid); box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:box-shadow 0.2s; }
.module-chip:hover { box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.m-num { font-size:11px; font-weight:700; color:var(--navy-mid); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.m-name { font-size:15px; font-weight:600; color:var(--navy); margin-bottom:6px; line-height:1.3; }
.m-desc { font-size:13px; color:var(--text-mid); line-height:1.55; font-weight:300; }

/* ═══════════════════════════════════════════
   PRICING
═══════════════════════════════════════════ */
.pricing { background:var(--white); padding-bottom:120px; overflow-x:hidden; }
.pricing-head { text-align:center; margin-bottom:64px; }
.pricing-head h2 { font-size:clamp(36px,4vw,54px); font-weight:700; color:var(--navy); margin-bottom:16px; }
.pricing-head p { font-size:16px; color:var(--text-mid); font-weight:300; max-width:480px; margin:0 auto; line-height:1.7; }
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1160px; margin:0 auto; align-items:stretch; }
.price-card { background:var(--cream); border-radius:16px; padding:36px 28px; border:2px solid var(--cream-dark); position:relative; transition:all 0.3s; cursor:default; display:flex; flex-direction:column; }
.price-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(78,110,93,0.12); }
.price-card.featured { background:var(--wine-soft); border-color:var(--navy); box-shadow:0 18px 48px -28px rgba(78,110,93,0.45); }
.price-card.featured:hover { transform:translateY(-6px); }
.featured-badge { display:inline-block; background:var(--navy); color:var(--white); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 16px; border-radius:99px; white-space:nowrap; margin-bottom:8px; }
.price-tag { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.price-name { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.price-card.featured .price-name { color:var(--text); }
.price-desc { font-size:13px; color:var(--text-light); margin-bottom:24px; font-weight:300; line-height:1.5; min-height:54px; }
.price-card.featured .price-desc { color:var(--text-mid); }
.price-amount { display:flex; align-items:baseline; gap:4px; margin-bottom:8px; }
.price-currency { font-size:20px; font-weight:500; color:var(--navy); }
.price-card.featured .price-currency { color:var(--gold); }
.price-num { font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:700; color:var(--navy); line-height:1; }
.price-card.featured .price-num { color:var(--gold); }
.price-vat { font-size:12px; color:var(--text-light); align-self:flex-end; padding-bottom:6px; }
.price-card.featured .price-vat { color:var(--text-light); }

/* PDF preview link */
.pdf-preview-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--gold); text-decoration:none;
  margin-bottom:20px; font-weight:500; transition:opacity 0.2s;
  border:1px solid rgba(78,110,93,0.3); border-radius:99px;
  padding:4px 12px;
}
.pdf-preview-link:hover { opacity:0.75; }
.price-card.featured .pdf-preview-link { color:var(--gold); border-color:rgba(78,110,93,0.4); }

.price-features { list-style:none; margin-bottom:28px; flex:1; }
.price-features li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-mid); padding:6px 0; border-bottom:1px solid rgba(0,0,0,0.04); line-height:1.4; font-weight:300; }
.price-card.featured .price-features li { color:var(--text-mid); border-color:var(--wine-line); }
.price-features li::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0; margin-top:1px; }
.price-features li.dimmed { opacity:0.4; }
.price-features li.dimmed::before { content:'–'; color:var(--text-light); }

.btn-buy { display:block; width:100%; padding:14px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:'Outfit',sans-serif; transition:all 0.2s; letter-spacing:0.3px; text-align:center; text-decoration:none; }
.btn-buy-outline { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-buy-outline:hover { background:var(--navy); color:white; }
.btn-buy-gold { background:var(--navy); color:var(--white); }
.btn-buy-gold:hover { background:var(--gold-light); box-shadow:0 6px 20px rgba(78,110,93,0.4); }
.btn-buy-navy { background:var(--navy); color:var(--white); border:1px solid var(--navy); }
.btn-buy-navy:hover { background:var(--navy-mid); }
.btn-buy-enterprise { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-buy-enterprise:hover { background:var(--navy); color:white; }

.payment-icons { display:flex; justify-content:center; gap:8px; margin-top:32px; align-items:center; flex-wrap:wrap; }
.payment-icons span { font-size:11px; color:var(--text-light); margin-right:4px; }
.pay-badge { background:var(--cream-dark); border-radius:5px; padding:4px 10px; font-size:11px; font-weight:600; color:var(--text-mid); letter-spacing:0.5px; }

/* ═══════════════════════════════════════════
   TRUST
═══════════════════════════════════════════ */
.trust { background:var(--cream); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:900px; margin:0 auto; text-align:center; }
.trust-item .t-icon { font-size:32px; margin-bottom:12px; }
.trust-item h4 { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.trust-item p { font-size:13.5px; color:var(--text-mid); line-height:1.65; font-weight:300; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer { background:#36443B; padding:48px 60px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid rgba(78,110,93,0.15); }
footer .f-logo { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:white; }
footer .f-logo span { color:var(--on-brand); }
footer p { font-size:13px; color:rgba(255,255,255,0.72); }
footer .f-links { display:flex; gap:24px; }
footer .f-links a { font-size:13px; color:rgba(255,255,255,0.78); text-decoration:none; transition:color 0.2s; }
footer .f-links a:hover { color:#FFFFFF; }

/* ═══════════════════════════════════════════
   QUESTIONNAIRE OVERLAY
═══════════════════════════════════════════ */
.q-overlay {
  display:none;
  position:fixed; inset:0; z-index:300;
  background:var(--cream);
  overflow-y:auto;
  animation:overlayIn 0.35s ease both;
}
.q-overlay.active { display:block; }
@keyframes overlayIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

.q-nav {
  position:sticky; top:0; z-index:10;
  background:rgba(250,248,247,0.92);
  backdrop-filter:blur(12px);
  padding:0 40px; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(78,110,93,0.15);
}
.q-nav-logo { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:var(--grey); }
.q-nav-logo span { color:var(--navy); }

.q-progress-wrap { flex:1; max-width:360px; margin:0 40px; }
.q-progress-track { background:var(--cream-dark); border-radius:99px; height:5px; overflow:hidden; }
.q-progress-fill { background:var(--navy); height:100%; border-radius:99px; transition:width 0.5s cubic-bezier(0.4,0,0.2,1); }
.q-progress-label { font-size:11px; color:var(--text-light); margin-top:5px; text-align:right; }

.q-nav-right { display:flex; align-items:center; gap:16px; }
.q-save-btn {
  font-size:12px; color:var(--text-mid); background:var(--white);
  border:1px solid var(--border-light); border-radius:6px; padding:6px 14px;
  cursor:pointer; font-family:'Outfit',sans-serif; transition:all 0.2s;
}
.q-save-btn:hover { color:var(--navy); border-color:var(--navy); }
.q-close-btn {
  color:rgba(255,255,255,0.4); background:none; border:none; cursor:pointer;
  font-size:20px; line-height:1; padding:4px; transition:color 0.2s;
}
.q-close-btn:hover { color:white; }

.q-inner { max-width:820px; margin:0 auto; padding:40px 20px 100px; }

/* Block header */
.q-block-header {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  border-radius:16px 16px 0 0;
  padding:24px 32px; color:white;
}
.q-block-tag { font-size:11px; font-weight:700; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.q-block-header h2 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; }
.q-block-intro { font-size:13.5px; color:rgba(255,255,255,0.65); margin-top:8px; line-height:1.55; max-width:620px; }

/* Questions */
.q-card { background:white; border-radius:0 0 16px 16px; box-shadow:0 4px 24px rgba(0,0,0,0.07); overflow:hidden; margin-bottom:24px; }
.q-item { padding:22px 32px; border-bottom:1px solid #F0F0F4; transition:background 0.12s; }
.q-item:last-child { border-bottom:none; }
.q-item:hover { background:#FAFBFC; }
.q-item.answered { border-left:3px solid var(--green); }
.q-label { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.q-num { background:#EEF3FB; color:var(--navy-mid); font-size:11px; font-weight:700; width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.q-text { font-size:14.5px; font-weight:500; line-height:1.55; color:var(--text); }
.q-required { color:var(--gold); margin-left:3px; }
/* Bedingtes Folgefeld (CR 27.07.2026): gehoert zur Frage darueber, wird
   eingerueckt dargestellt und erhaelt KEINE eigene Fragenummer. */
.q-item.q-sub { padding-left:56px; background:#FBFAF7; }
.q-item.q-sub .q-num { background:#F5EEDC; color:var(--gold); }

/* Scale */
.scale-wrap { padding-left:38px; }
.scale-legend { display:flex; justify-content:space-between; font-size:11px; color:var(--text-light); margin-bottom:8px; }
.scale-buttons { display:flex; gap:5px; flex-wrap:wrap; }
.scale-btn { width:42px; height:42px; border-radius:8px; border:2px solid #E0DDD5; background:white; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.12s; font-family:'Outfit',sans-serif; color:var(--text-light); }
.scale-btn:hover { border-color:var(--navy-mid); color:var(--navy); background:#EEF3FB; }
.scale-btn.selected { background:var(--navy); color:white; border-color:var(--navy); transform:scale(1.06); }

/* Dropdown */
.select-wrap { padding-left:38px; }
.q-select { max-width:380px; width:100%; padding:10px 14px; border-radius:8px; border:2px solid #E0DDD5; font-size:14px; font-family:'Outfit',sans-serif; color:var(--text); background:white; cursor:pointer; outline:none; transition:border-color 0.15s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888A8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.q-select:focus { border-color:var(--navy); }

/* Yes/No */
.radio-wrap { padding-left:38px; display:flex; gap:10px; }
.radio-btn { padding:10px 24px; border-radius:8px; border:2px solid #E0DDD5; background:white; font-size:14px; font-weight:500; cursor:pointer; font-family:'Outfit',sans-serif; color:var(--text-mid); transition:all 0.12s; }
.radio-btn:hover { border-color:var(--navy-mid); color:var(--navy); }
.radio-btn.selected { background:var(--navy); color:white; border-color:var(--navy); }

/* Multi */
.multi-wrap { padding-left:38px; display:flex; flex-wrap:wrap; gap:8px; }
.multi-btn { padding:8px 16px; border-radius:99px; border:2px solid #E0DDD5; background:white; font-size:13px; font-weight:500; cursor:pointer; font-family:'Outfit',sans-serif; color:var(--text-mid); transition:all 0.12s; }
.multi-btn:hover { border-color:var(--navy-mid); }
.multi-btn.selected { background:#EEF3FB; color:var(--navy); border-color:#FFFFFF; font-weight:600; }

/* Textarea / text */
.textarea-wrap, .text-wrap { padding-left:38px; }
textarea, .q-text-input {
  width:100%; padding:11px 14px; border-radius:8px; border:2px solid #E0DDD5;
  font-size:14px; font-family:'Outfit',sans-serif; outline:none;
  transition:border-color 0.15s; color:var(--text);
}
textarea { resize:vertical; min-height:80px; }
textarea:focus, .q-text-input:focus { border-color:var(--navy); }

/* Nav buttons */
.q-nav-buttons { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.q-block-counter { font-size:13px; color:var(--text-light); font-weight:500; }
.q-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; font-family:'Outfit',sans-serif; }
.q-btn-primary { background:var(--navy); color:white; }
.q-btn-primary:hover { background:var(--navy-light); transform:translateY(-1px); box-shadow:0 8px 24px rgba(78,110,93,0.25); }
.q-btn-gold { background:var(--navy); color:var(--white); }
.q-btn-gold:hover { background:var(--navy-mid); transform:translateY(-1px); }
.q-btn-outline { background:white; color:var(--navy); border:2px solid #E0DDD5; }
.q-btn-outline:hover { border-color:var(--navy-mid); }
.q-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }
.q-btn-lg { padding:16px 36px; font-size:16px; border-radius:10px; }

/* Package badge in questionnaire */
.q-pkg-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(78,110,93,0.12); border:1px solid rgba(78,110,93,0.3);
  border-radius:99px; padding:4px 14px; font-size:12px; font-weight:600;
  color:var(--gold); letter-spacing:0.5px; margin-left:12px;
}

/* Block 0 – contact form */
.contact-form-card { background:white; border-radius:0 0 16px 16px; box-shadow:0 4px 24px rgba(0,0,0,0.07); padding:32px; margin-bottom:24px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field label { display:block; font-size:12px; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:7px; }
.form-field input, .form-field select {
  width:100%; padding:11px 14px; border-radius:8px; border:2px solid #E0DDD5;
  font-size:14px; font-family:'Outfit',sans-serif; color:var(--text);
  background:white; outline:none; transition:border-color 0.15s;
}
.form-field input:focus, .form-field select:focus { border-color:var(--navy); }
.form-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888A8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
.hr-org-row { margin-top:16px; }
.hr-org-row label { display:block; font-size:12px; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.pill-group { display:flex; gap:8px; flex-wrap:wrap; }
.pill-btn { padding:9px 20px; border-radius:99px; border:2px solid #E0DDD5; background:white; font-size:13px; font-weight:500; cursor:pointer; font-family:'Outfit',sans-serif; color:var(--text-mid); transition:all 0.15s; }
.pill-btn:hover { border-color:var(--navy-mid); color:var(--navy); }
.pill-btn.selected { background:var(--navy); color:white; border-color:var(--navy); }
.field-error { font-size:12px; color:var(--red); margin-top:5px; display:none; }
.field-error.visible { display:block; }
.privacy-hint { background:#EEF3FB; border-radius:10px; padding:14px 18px; font-size:13px; color:var(--navy-mid); margin-top:20px; line-height:1.6; }

/* Save progress modal */
.save-modal {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(35,37,43,0.72); align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(6px);
}
.save-modal.active { display:flex; }
.save-modal-box { background:white; border-radius:20px; padding:36px; max-width:440px; width:100%; animation:fadeUp 0.3s ease; }
.save-modal-box h3 { font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--navy); margin-bottom:8px; }
.save-modal-box p { font-size:14px; color:var(--text-mid); margin-bottom:20px; line-height:1.6; font-weight:300; }
.save-modal-box input { width:100%; padding:12px 14px; border-radius:8px; border:2px solid #E0DDD5; font-size:14px; font-family:'Outfit',sans-serif; outline:none; transition:border-color 0.15s; }
.save-modal-box input:focus { border-color:var(--navy); }
.save-modal-actions { display:flex; gap:10px; margin-top:16px; }

/* Submit screen */
.submit-screen { text-align:center; padding:48px 32px; }
.submit-screen h2 { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--navy); margin-bottom:16px; }
.submit-screen p { font-size:15px; color:var(--text-mid); line-height:1.7; margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; font-weight:300; }
.delivery-info {
  background:var(--cream); border-radius:14px; padding:24px 28px;
  max-width:500px; margin:0 auto 32px; text-align:left;
  border:1px solid var(--border-light);
}
.delivery-info h4 { font-size:15px; font-weight:600; color:var(--navy); margin-bottom:12px; }
.delivery-info ul { list-style:none; }
.delivery-info li { font-size:13.5px; color:var(--text-mid); padding:5px 0; display:flex; align-items:flex-start; gap:8px; font-weight:300; line-height:1.5; }
.delivery-info li::before { content:'·'; color:var(--gold); font-size:18px; line-height:1; flex-shrink:0; }
.delivery-note { font-size:12px; color:var(--text-light); max-width:480px; margin:0 auto; line-height:1.6; }

/* Analysis animation */
.analysis-center { text-align:center; padding:80px 40px; background:white; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.07); }
.spinner { width:52px; height:52px; border:4px solid #EEF3FB; border-top-color:var(--navy); border-radius:50%; animation:spin 0.85s linear infinite; margin:0 auto 28px; }
@keyframes spin { to{transform:rotate(360deg)} }
.analysis-steps { list-style:none; text-align:left; display:inline-block; margin-top:24px; }
.analysis-steps li { padding:8px 0; font-size:14px; color:var(--text-light); display:flex; align-items:center; gap:12px; transition:color 0.3s; }
.analysis-steps li.done { color:var(--green); font-weight:500; }
.analysis-steps li.active { color:#FFFFFF; font-weight:600; }
.step-dot { width:22px; height:22px; border-radius:50%; background:#E0DDD5; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.step-dot.done { background:var(--green); color:white; }
.step-dot.active { background:var(--navy); color:white; animation:dotpulse 1.1s infinite; }
@keyframes dotpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

.q-item.kpi-q { background:#FDFAF4; }
.q-item.kpi-q:hover { background:#FAF5E8; }
.q-item.kpi-q.answered { border-left-color: #4E6E5D; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:900px) {
  nav { padding:0 24px; }
  .nav-links { display:none; }
  section { padding:60px 24px; }
  .hero { padding:120px 24px 60px; }
  .hero-stats { display:none; }
  .hero-radar { width:min(80vw,300px); }
  .steps-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .steps-grid::before { display:none; }
  .step { border-right:none; padding:0; }
  .features-grid { grid-template-columns:1fr; }
  .modules-grid { grid-template-columns:1fr 1fr; }
  .pricing-grid { grid-template-columns:1fr 1fr; }
  .price-card.featured { transform:none; }
  .trust-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; padding:32px 24px; }
}
@media(max-width:640px) {
  .pricing-grid { grid-template-columns:1fr; }
  .modules-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .q-nav { padding:0 16px; }
  .q-progress-wrap { margin:0 12px; }
  .q-inner { padding:24px 12px 80px; }
  .q-block-header { padding:18px 20px; border-radius:12px 12px 0 0; }
  .q-block-header h2 { font-size:19px; }
  .q-item { padding:18px 20px; }
  .scale-wrap { padding-left:0; }
  .select-wrap,.radio-wrap,.multi-wrap,.textarea-wrap,.text-wrap { padding-left:0; }
  .q-select { max-width:100%; }
  .scale-btn { width:36px; height:36px; font-size:13px; }
  .form-grid-2 { grid-template-columns:1fr; }
  .q-nav-buttons { gap:8px; }
  .contact-form-card { padding:20px; }
  footer .f-links { flex-wrap:wrap; justify-content:center; gap:16px; }
}

/* ═══════════════════════════════════════════
   LEGAL MODAL
═══════════════════════════════════════════ */
.legal-overlay {
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(35,37,43,0.75);
  backdrop-filter:blur(6px);
  overflow-y:auto;
  padding:40px 20px;
}
.legal-overlay.active { display:block; }
.legal-modal {
  background:var(--cream);
  border-radius:20px;
  max-width:760px;
  margin:0 auto;
  overflow:hidden;
  animation:fadeUp 0.3s ease both;
  box-shadow:0 24px 80px rgba(0,0,0,0.3);
}
.legal-modal-header {
  background:var(--navy);
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1;
}
.legal-modal-header .l-logo {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; font-weight:600; color:white;
}
.legal-modal-header .l-logo span { color:var(--gold-light); }
.legal-modal-back {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:rgba(255,255,255,0.5);
  background:none; border:none; cursor:pointer;
  font-family:'Outfit',sans-serif;
  transition:color 0.2s; padding:8px 14px;
  border-radius:6px; border:1px solid rgba(255,255,255,0.12);
}
.legal-modal-back:hover { color:var(--gold); border-color:rgba(78,110,93,0.3); }
.legal-modal-body {
  padding:48px 52px 64px;
}
.legal-modal-body h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:42px; font-weight:700; color:var(--navy);
  margin-bottom:10px; line-height:1.15;
}
.legal-modal-body .l-stand {
  font-size:13px; color:var(--text-light);
  margin-bottom:40px; padding-bottom:32px;
  border-bottom:1px solid var(--border-light);
}
.legal-modal-body h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:700; color:var(--navy);
  margin:36px 0 10px; padding-top:8px;
  border-top:1px solid var(--border-light);
}
.legal-modal-body h3 {
  font-size:15px; font-weight:600; color:var(--navy);
  margin:20px 0 8px;
}
.legal-modal-body p {
  font-size:14px; color:var(--text-mid);
  margin-bottom:12px; line-height:1.75;
  font-weight:300;
}
.legal-modal-body ul {
  margin:0 0 14px 20px;
}
.legal-modal-body li {
  font-size:14px; color:var(--text-mid);
  margin-bottom:6px; line-height:1.65;
  font-weight:300;
}
.legal-modal-body a { color:var(--navy); }
.l-address-box {
  background:white; border:1px solid var(--border-light);
  border-radius:12px; padding:20px 24px;
  margin:16px 0; font-size:14px;
  color:var(--text-mid); line-height:1.9;
}
.l-highlight {
  background:rgba(78,110,93,0.08);
  border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;
  padding:14px 18px; margin:16px 0;
  font-size:14px; color:var(--text-mid); line-height:1.65;
}
@media(max-width:640px) {
  .legal-modal-body { padding:28px 20px 48px; }
  .legal-modal-body h1 { font-size:30px; }
  .legal-modal-header { padding:16px 20px; }
}

/* ── Einladungs-Modus: Kopier- & Druckschutz (Abschreckung) ── */
.admin-protected .q-item,
.admin-protected .q-block-header,
.admin-protected .q-block-intro {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
/* Eingabefelder muessen benutzbar bleiben */
.admin-protected input, .admin-protected textarea, .admin-protected select {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}
@media print {
  .admin-protected { display: none !important; }
}

/* ══ Landing (Entwurf, Stand 05.08.2026) ══════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ZUSAMMENSTELLUNG NACH VORGABE
   Hero aus Entwurf A (Instrument) mit dem Vorspann aus Entwurf C ·
   Auswahl aus Entwurf B, im Design von A · „Fünf Dinge" aus A neben dem
   Berichtsmotiv aus D · Beispielbericht nur angedeutet, als Overlay ·
   Preis als Einstieg „ab 199 €" · FAQ · Footer mit Rechtstexten
══════════════════════════════════════════════════════════════════════ */
:root{
  --tief:#1C2621; --tief2:#243029; --tief3:#2B3A31;
  --forest:#4E6E5D; --sage:#7D9988; --glow:#9FC7AE;
  --greige:#E4DED5; --creme:#F6F3EE; --weiss:#fff;
  /* Akzente: Gold und Weinrot sparsam, damit die Seite nicht monoton grün
     wirkt. Beide Töne sind auf dem dunklen Grund lesbar aufgehellt – das
     Weinrot bleibt dabei bewusst warm und kippt nicht ins Pink. */
  --gold:#C8A96A; --gold-tief:#9C7F45; --wein:#C08098; --wein-tief:#7F2149;
  --hell:#EAF0EA; --mid:rgba(234,240,234,.7); --leise:rgba(234,240,234,.45);
  --linie:rgba(234,240,234,.12);
  --e:cubic-bezier(.22,.61,.36,1);
}

body{background:var(--tief);color:var(--hell);line-height:1.6;overflow-x:hidden}
body.fixiert{overflow:hidden}
.wrap{max-width:1280px;margin:0 auto;padding:0 44px}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.08}
a{color:inherit;text-decoration:none}
button{font-family:'Outfit',sans-serif}

/* ── Kopf ────────────────────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(28,38,33,.86);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:14px}
.logo img{height:30px;width:auto;display:block}
.logo span{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--leise);
  border-left:1px solid rgba(234,240,234,.22);padding-left:14px}
nav{display:flex;gap:32px;align-items:center}
nav a{font-size:14px;color:var(--mid);transition:color .16s}
nav a:hover{color:var(--hell)}
.navlink{background:none;border:0;color:var(--mid);font-size:14px;cursor:pointer;
  font-family:'Outfit',sans-serif;padding:0}
.navlink:hover{color:var(--hell)}
.cta{background:var(--glow);color:var(--tief)!important;padding:11px 22px;border-radius:6px;
  font-size:14px;font-weight:600}
.cta:hover{background:#B7D7C3}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;
  padding:clamp(96px,12vh,132px) 0 clamp(48px,8vh,72px)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 48% at 72% 32%,rgba(125,153,136,.3),transparent 68%)}
.hero::after{content:'';position:absolute;inset:0;opacity:.15;pointer-events:none;
  background-image:linear-gradient(rgba(234,240,234,.2) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(234,240,234,.2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 78%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center;width:100%}
.puls{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--glow);margin-bottom:18px}
.puls i{width:7px;height:7px;border-radius:50%;background:var(--wein);animation:pl 2.2s infinite}
@keyframes pl{0%,100%{opacity:.35;box-shadow:0 0 0 0 rgba(192,128,152,.5)}
  50%{opacity:1;box-shadow:0 0 0 7px rgba(192,128,152,0)}}
h1{font-size:clamp(38px,4.4vw,64px);margin-bottom:22px;letter-spacing:-.5px;line-height:1.06}
h1 em{font-style:italic;color:var(--glow)}
.lead{font-size:17px;line-height:1.6;color:var(--mid);max-width:54ch;margin-bottom:16px}
.lead strong{color:var(--hell);font-weight:500}
.knoepfe{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.b1{background:var(--glow);color:var(--tief);padding:17px 34px;border-radius:8px;
  font-weight:600;font-size:16px;transition:.18s;border:0;cursor:pointer}
.b1:hover{background:#B7D7C3;transform:translateY(-2px)}
.b2{border:1px solid rgba(234,240,234,.32);padding:17px 28px;border-radius:8px;font-size:16px;
  color:var(--hell);background:transparent;cursor:pointer}
.b2:hover{border-color:var(--glow);color:var(--glow)}
.preis-ein{font-size:14px;color:var(--leise)}
.preis-ein b{color:var(--hell);font-weight:600}
.mikro{font-size:13px;color:var(--leise);margin-top:14px}

/* Scanner */
.geraet{background:linear-gradient(160deg,rgba(36,48,41,.96),rgba(28,38,33,.96));
  border:1px solid rgba(234,240,234,.14);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -50px #000}
.geraet-kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  border-bottom:1px solid var(--linie);font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--leise)}
.geraet-kopf b{color:var(--glow);font-weight:600}
.geraet-koerper{padding:14px 18px;position:relative}
.zeile{display:grid;grid-template-columns:108px 1fr 34px;gap:11px;align-items:center;
  padding:4px 0;font-size:11.5px;color:var(--mid)}
.spur{height:7px;border-radius:4px;background:rgba(234,240,234,.1);overflow:hidden;position:relative}
.spur i{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--forest),var(--glow));
  transform-origin:left;transform:scaleX(0);animation:fuell 2.2s var(--e) both}
.zeile.krit .spur i{background:linear-gradient(90deg,#7A6A55,#C8B78E)}
@keyframes fuell{0%{transform:scaleX(0)}30%,100%{transform:scaleX(var(--v))}}
.wert{text-align:right;font-variant-numeric:tabular-nums;color:var(--hell);font-size:12.5px}
.scanline{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);opacity:.5;
  animation:scan 5.2s var(--e) infinite}
@keyframes scan{0%{top:0}50%{top:100%}100%{top:0}}
.geraet-fuss{border-top:1px solid var(--linie);padding:14px 20px;display:flex;
  justify-content:space-between;font-size:12px;color:var(--leise)}
.geraet-fuss b{color:var(--glow)}

/* ── Zwischenband ────────────────────────────────────────────────────── */
.band{position:relative;min-height:100svh;display:flex;align-items:center;padding:96px 0;text-align:center;overflow:hidden;
  border-top:1px solid var(--linie);background:linear-gradient(180deg,#202B25,#1A231E)}
.band-raster{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(159,199,174,.16) 1.5px,transparent 1.6px);
  background-size:34px 34px;
  mask-image:radial-gradient(58% 62% at 50% 50%,#000 0%,transparent 72%)}
.band-in{position:relative;width:100%}
.band-vor{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.band h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:16px}
.band h2 em{font-style:italic;color:var(--glow)}
.band-sub{color:var(--mid);font-size:17px;max-width:52ch;margin:0 auto 34px}

/* ── Standortbestimmung: geführte Strecke statt Liste ────────────────
   Die Aussagen sind thematisch gruppiert und kommen in vier Schritten.
   Jeder Schritt ist eine Bühne mit einer Frage – wie eine geführte
   Strecke, nicht wie ein Formular. Danach folgen die Themenfelder,
   bereits vorbelegt aus dem, was der Besucher angegeben hat.
   ─────────────────────────────────────────────────────────────────── */
.stand{padding:100px 0 110px;border-top:1px solid var(--linie);scroll-margin-top:74px;position:relative}
.stand::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 44% at 50% 8%,rgba(125,153,136,.16),transparent 70%)}
.stand-buehne{position:relative;max-width:920px;margin:0 auto}

.fortschritt{display:flex;gap:8px;justify-content:center;margin-bottom:44px}
.fp{width:44px;height:3px;border-radius:2px;background:rgba(234,240,234,.16);transition:.3s var(--e)}
.fp.aktiv{background:var(--glow)}
.fp.fertig{background:var(--gold-tief)}

.schritt{animation:schrittEin .38s var(--e) both;text-align:center}
@keyframes schrittEin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.schritt-kapitel{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--glow);margin-bottom:16px}
.schritt-frage{font-size:clamp(30px,3.6vw,46px);margin-bottom:12px}
.schritt-frage em{font-style:italic;color:var(--glow)}
.schritt-hinweis{color:var(--mid);font-size:16px;margin-bottom:38px}

.wahlfeld{display:grid;gap:11px;margin-bottom:34px;text-align:left}
.wahl{display:grid;grid-template-columns:22px 1fr;gap:15px;align-items:center;
  background:var(--tief2);border:1px solid var(--linie);border-radius:13px;
  padding:17px 20px;cursor:pointer;color:var(--hell);font-size:16px;line-height:1.45;
  font-family:'Outfit',sans-serif;text-align:left;transition:.16s var(--e)}
.wahl:hover{border-color:rgba(159,199,174,.55);transform:translateY(-2px);background:var(--tief3)}
.wahl .haken{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(234,240,234,.3);
  display:grid;place-items:center;font-size:12px;color:transparent;transition:.16s var(--e)}
.wahl[aria-pressed=true]{border-color:var(--glow);background:rgba(159,199,174,.13)}
.wahl[aria-pressed=true] .haken{background:var(--glow);border-color:var(--glow);color:var(--tief)}

.schritt-nav{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.weiter{background:var(--glow);color:var(--tief);border:0;border-radius:9px;
  padding:15px 32px;font-size:16px;font-weight:600;cursor:pointer;transition:.16s var(--e)}
.weiter:hover{background:#B7D7C3;transform:translateY(-2px)}
.zurueck{background:none;border:0;color:var(--leise);font-size:14.5px;cursor:pointer;padding:8px}
.zurueck:hover{color:var(--hell)}
.ueberspringen{color:var(--leise);font-size:13.5px;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.ueberspringen:hover{color:var(--hell)}

/* Themenfelder – beschrieben wie die Blöcke, mehrfach wählbar */
.felder-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;text-align:left}
.feldkarte{background:var(--tief2);border:1px solid var(--linie);border-left:3px solid rgba(234,240,234,.18);
  border-radius:11px;padding:18px 20px;cursor:pointer;transition:.16s var(--e);
  font-family:'Outfit',sans-serif;color:var(--hell);text-align:left}
.feldkarte:hover{border-color:rgba(159,199,174,.5);border-left-color:var(--sage);transform:translateY(-2px)}
.feldkarte[aria-pressed=true]{background:rgba(159,199,174,.12);border-color:rgba(159,199,174,.45);
  border-left-color:var(--glow)}
.fk-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.fk-nr{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--leise)}
.fk-marke{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--glow);opacity:0}
.feldkarte[aria-pressed=true] .fk-marke{opacity:1}
.feldkarte h3{font-family:'Cormorant Garamond',serif;font-size:19px;margin-bottom:6px;line-height:1.2}
.feldkarte p{font-size:13px;color:var(--mid);line-height:1.5}
@media(max-width:960px){.felder-gitter{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.felder-gitter{grid-template-columns:1fr}}



/* ── Aussagen mit dreistufiger Bewertung ─────────────────────────────── */
.aussage{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  background:var(--tief2);border:1px solid var(--linie);border-radius:12px;
  padding:13px 16px;transition:.16s var(--e)}
.aussage:hover{border-color:rgba(159,199,174,.35)}
.aussage.gesetzt{border-color:rgba(159,199,174,.55);background:rgba(159,199,174,.08)}
.aussage-txt{font-size:15px;line-height:1.4;color:var(--hell)}
.skala{display:flex;gap:5px;flex:0 0 auto}
.st{background:none;border:1px solid rgba(234,240,234,.2);color:var(--leise);
  border-radius:7px;padding:6px 11px;font-size:11.5px;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:.14s var(--e);white-space:nowrap}
.st:hover{border-color:var(--glow);color:var(--hell)}
.st.an{background:var(--glow);border-color:var(--glow);color:var(--tief);font-weight:600}
.st:nth-child(1).an{background:var(--gold);border-color:var(--gold)}
.st:nth-child(2).an{background:#BFD5C6;border-color:#BFD5C6}
@media(max-width:760px){.aussage{grid-template-columns:1fr;gap:10px}.skala{justify-content:flex-start}}

.opt-reihe{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.opt{background:none;border:1px dashed rgba(234,240,234,.28);color:var(--mid);
  border-radius:9px;padding:11px 16px;font-size:13.5px;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:.16s var(--e)}
.opt:hover{border-color:var(--glow);color:var(--hell)}
.opt[aria-pressed=true]{border-style:solid;border-color:var(--gold);color:var(--gold)}

/* Steuerung unter der Einordnungsbox */
.panel-nav[hidden]{display:none}
.panel-nav{display:flex;gap:10px;align-items:center;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--linie)}
.panel-nav .weiter{flex:1;padding:13px 18px;font-size:15px}
.panel-nav .zurueck{padding:8px 4px}

/* Betroffenheit farblich abgestuft – Salbei, Gold, Wein als Akzente */
.tr b.hoch{color:var(--glow)}
.tr b.mittel{color:var(--gold)}
.tr b.leicht{color:var(--mid)}
.wein-akzent{color:var(--wein)}

/* Kopf und Zweispalter der Strecke */
.stand-kopf{text-align:center;margin-bottom:40px}
.stand-vor{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--glow);margin-bottom:14px}
.stand-kopf h2{font-size:clamp(30px,3.4vw,44px)}
.stand-grid{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start;max-width:1160px;margin:0 auto}
@media(max-width:1000px){.stand-grid{grid-template-columns:1fr}}
.stand-buehne{max-width:none}
.schritt{text-align:left}
.schritt-frage{font-size:clamp(25px,2.6vw,34px);margin-bottom:10px}
.schritt-hinweis{margin-bottom:10px;font-size:15.5px}
.schritt-regel{font-size:13.5px;line-height:1.55;color:var(--leise);
  border-left:2px solid var(--gold);padding-left:14px;margin-bottom:24px;max-width:62ch}
.schritt-nav{justify-content:flex-start}
.stand-fuss{margin-top:22px;font-size:13px;color:var(--leise);max-width:60ch}

/* Einordnungsbox bleibt stehen */
.panel{position:sticky;top:96px;background:var(--tief3);border:1px solid var(--linie);
  border-radius:16px;padding:24px;box-shadow:0 30px 60px -44px #000}
.panel .t{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--leise);margin-bottom:14px}
.panel h3{font-size:21px;color:#fff;margin-bottom:6px;min-height:2.1em}
.panel .u{font-size:13.5px;color:var(--mid);margin-bottom:18px}
.treffer{display:grid;gap:7px;min-height:90px}
.panel-aktion{margin-top:20px;padding-top:18px;border-top:1px solid var(--linie)}
.panel-aktion .weiter{width:100%;font-size:15px;padding:14px 18px}
.tr{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px;
  background:rgba(234,240,234,.07);border-radius:8px;padding:9px 12px;animation:ein .28s var(--e) both}
.tr b{color:var(--glow);font-weight:600;font-size:11.5px}
@keyframes ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Auswahl klar erkennbar */
.wahl.keine{border-style:dashed;color:var(--mid)}
.feldkarte[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--glow)}
.fk-marke{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tief);
  background:var(--glow);border-radius:99px;padding:2px 9px;opacity:0}
.feldkarte[aria-pressed=true] .fk-marke{opacity:1}

/* Produktkarten in der letzten Reihe */
.produkt-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:30px}
.pkarte{background:rgba(159,199,174,.08);border:1px solid rgba(159,199,174,.3);border-radius:11px;
  padding:16px 18px;cursor:pointer;text-align:left;font-family:'Outfit',sans-serif;color:var(--hell);
  transition:.16s var(--e);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.pkarte:hover{border-color:var(--glow);transform:translateY(-2px)}
.pkarte[aria-pressed=true]{background:rgba(159,199,174,.2);border-color:var(--glow)}
.pkarte h3{font-family:'Cormorant Garamond',serif;font-size:18px;margin-bottom:3px}
.pkarte p{font-size:12.5px;color:var(--mid);line-height:1.45}
@media(max-width:640px){.produkt-reihe{grid-template-columns:1fr}}

/* Kompakter, damit alles auf einen Bildschirm passt */
.felder-gitter{gap:10px;margin-bottom:12px}
.feldkarte{padding:14px 16px}
.feldkarte h3{font-size:17px;margin-bottom:4px}
.feldkarte p{font-size:12.2px;line-height:1.42}

/* ── Fünf Dinge + Berichtsmotiv (aus A und D) ───────────────────────── */
.fuenf{padding:106px 0;border-top:1px solid var(--linie);scroll-margin-top:74px}
.fuenf-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.liste{display:grid}
.li{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--linie)}
.li:first-child{border-top:1px solid var(--linie)}
.li .n{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--glow);line-height:1.1}
.li h3{font-size:21px;margin-bottom:5px}
.li p{font-size:14px;color:var(--mid)}

/* Angedeuteter Bericht */
.doc{position:sticky;top:98px}
.blatt{background:var(--weiss);border-radius:12px;overflow:hidden;
  box-shadow:0 40px 80px -46px #000;transform:rotateY(-5deg) rotateX(1.5deg);transform-origin:left center}
.blatt-kopf{background:var(--tief3);padding:18px 22px;display:flex;justify-content:space-between;align-items:flex-start}
.blatt-kopf .t{font-size:10.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--leise)}
.blatt-kopf h3{color:#fff;font-size:20px;margin-top:5px}
.blatt-kopf .sc b{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--glow);display:block;line-height:1}
.blatt-kopf .sc span{font-size:10px;color:var(--leise);letter-spacing:1.3px;text-transform:uppercase}
.blatt-body{padding:20px 22px 22px;color:#2C332E}
.z-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--forest);margin:14px 0 7px}
.z-label:first-child{margin-top:0}
.z-text{font-size:13px;color:#5A6A5F;line-height:1.55}
.z-text b{color:#2C332E}
.bal{display:grid;grid-template-columns:104px 1fr 30px;gap:10px;align-items:center;
  font-size:11px;color:#5A6A5F;padding:3px 0}
.bal .s{height:6px;background:#EDF2EC;border-radius:3px;overflow:hidden}
.bal .s i{display:block;height:100%;width:100%;background:var(--sage);border-radius:3px;
  transform-origin:left;transform:scaleX(var(--v))}
.bal.t .s i{background:#C8B78E}
.bal .w{text-align:right;font-variant-numeric:tabular-nums}
.mass{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  background:#EDF2EC;border-radius:7px;padding:9px 11px;margin-bottom:6px;font-size:12px}
.mass .p{font-size:9.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--forest)}
.mass .z{font-size:10.5px;color:#7C8A80;white-space:nowrap}
.doc-hinweis{font-size:12.5px;color:var(--leise);margin-top:16px;text-align:center}
@media(max-width:960px){.fuenf-grid{grid-template-columns:1fr;gap:40px}.blatt{transform:none}.doc{position:static}}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{padding:106px 0;border-top:1px solid var(--linie);scroll-margin-top:74px}
.f-liste{border-top:1px solid var(--linie);max-width:900px}
details{border-bottom:1px solid var(--linie)}
summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;
  gap:20px;align-items:center;font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--hell)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--glow);font-family:'Outfit',sans-serif;font-size:20px;flex:0 0 auto}
details[open] summary::after{content:'–'}
details p{padding:0 0 22px;font-size:15px;color:var(--mid);max-width:72ch}

/* Pakete im Overlay */
.pakete{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pk{background:var(--tief3);border:1px solid var(--linie);border-radius:14px;padding:24px 22px;
  display:flex;flex-direction:column;position:relative}
.pk.hervor{border-color:rgba(159,199,174,.5);background:rgba(159,199,174,.09)}
.pk-marke{position:absolute;top:-11px;left:22px;background:var(--gold);color:var(--tief);
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 12px;border-radius:99px}
.pk-art{font-size:10.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--leise);margin-bottom:8px}
.pk h3{font-size:26px;margin-bottom:9px}
.pk-txt{font-size:13.5px;color:var(--mid);line-height:1.55;margin-bottom:18px}
.pk-preis{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--mid);margin-bottom:18px}
.pk-preis b{font-size:34px;color:var(--glow);font-weight:700}
.pk-preis span{font-family:'Outfit',sans-serif;font-size:12px;color:var(--leise);display:block;margin-top:2px}
.pk-liste{list-style:none;display:grid;gap:8px;margin-bottom:22px;flex:1}
.pk-liste li{font-size:13px;color:var(--mid);padding-left:20px;position:relative;line-height:1.45}
.pk-liste li::before{content:'✓';position:absolute;left:0;color:var(--glow);font-size:12px}
.pk-liste li b{color:var(--hell)}
.pk-liste li.aus{color:var(--leise);opacity:.6}
.pk-liste li.aus::before{content:'–';color:var(--leise)}
.pk-cta{background:none;border:1px solid rgba(234,240,234,.3);color:var(--hell);border-radius:8px;
  padding:12px;font-size:14px;cursor:pointer;font-family:'Outfit',sans-serif;transition:.16s}
.pk-cta:hover{border-color:var(--glow);color:var(--glow)}
.pk.hervor .pk-cta{background:var(--glow);color:var(--tief);border-color:var(--glow);font-weight:600}
.pk.hervor .pk-cta:hover{background:#B7D7C3}
@media(max-width:1080px){.pakete{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.pakete{grid-template-columns:1fr}}


/* Berichtsauszug im Overlay */
.liste{display:grid}
.li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--linie)}
.li:first-child{border-top:1px solid var(--linie)}
.li .n{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);line-height:1.1}
.li h3{font-size:18px;margin-bottom:4px}
.li p{font-size:13.5px;color:var(--mid)}
.blatt{background:var(--weiss);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -40px #000}
.blatt-kopf{background:var(--tief3);padding:16px 20px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:14px}
.blatt-kopf .t{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--leise)}
.blatt-kopf h3{color:#fff;font-size:18px;margin-top:5px}
.blatt-kopf .sc{text-align:right;flex:0 0 auto}
.blatt-kopf .sc b{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--gold);display:block;line-height:1}
.blatt-kopf .sc span{font-size:9.5px;color:var(--leise);letter-spacing:1.2px;text-transform:uppercase}
.blatt-body{padding:18px 20px 20px;color:#2C332E}
.z-label{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--forest);margin:14px 0 6px}
.z-label:first-child{margin-top:0}
.z-text{font-size:12.5px;color:#5A6A5F;line-height:1.55}
.z-text b{color:#2C332E}
.bal{display:grid;grid-template-columns:96px 1fr 28px;gap:9px;align-items:center;font-size:10.5px;
  color:#5A6A5F;padding:3px 0}
.bal .s{height:6px;background:#EDF2EC;border-radius:3px;overflow:hidden}
.bal .s i{display:block;height:100%;width:100%;background:var(--sage);border-radius:3px;
  transform-origin:left;transform:scaleX(var(--v))}
.bal.t .s i{background:#C8B78E}
.bal .w{text-align:right;font-variant-numeric:tabular-nums}
.mass{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;background:#EDF2EC;
  border-radius:6px;padding:8px 10px;margin-bottom:5px;font-size:11.5px}
.mass .p{font-size:9px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--forest)}
.mass .z{font-size:10px;color:#7C8A80;white-space:nowrap}
.doc-hinweis{font-size:11.5px;color:var(--leise);margin-top:12px;text-align:center}

/* ── Overlay ─────────────────────────────────────────────────────────── */
.ov{position:fixed;inset:0;z-index:200;background:rgba(16,22,19,.72);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding:32px;overflow-y:auto}
.ov[data-offen]{display:flex}
.ov-panel{background:var(--tief2);border:1px solid var(--linie);border-radius:18px;
  max-width:920px;width:100%;margin:24px 0;overflow:hidden}
.ov-kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 30px;border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--tief2);
  box-shadow:inset 0 3px 0 var(--wein-tief)}
.ov-kopf h2{font-size:26px}
.ov-zu{background:transparent;border:1px solid rgba(234,240,234,.3);color:var(--hell);
  border-radius:7px;padding:9px 16px;font-size:13.5px;cursor:pointer}
.ov-zu:hover{border-color:var(--glow);color:var(--glow)}
.ov-body{padding:28px 30px 34px}
.ov-body h3{font-size:19px;margin-bottom:4px}
.ov-body .rt{font-size:14.5px;color:var(--mid);line-height:1.75}
.ov-body .rt h4{font-family:'Outfit',sans-serif;font-size:14px;color:var(--hell);
  font-weight:600;margin:20px 0 8px}
.ov-body .rt p{margin-bottom:12px}
.ov-body .rt ul{margin:0 0 12px 20px}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:820px){.ov-grid{grid-template-columns:1fr}}
.ov-note{font-size:12.5px;color:var(--leise);border-left:2px solid var(--glow);padding-left:14px;margin-top:22px}

/* ── Fuß ─────────────────────────────────────────────────────────────── */
footer{background:#161E1A;border-top:1px solid var(--linie);padding:64px 0 32px;font-size:13.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer h4{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--leise);margin-bottom:16px;font-weight:600}
footer ul{list-style:none;display:grid;gap:9px}
footer a,footer button.link{color:var(--mid);background:none;border:0;padding:0;
  font-size:13.5px;cursor:pointer;text-align:left}
footer a:hover,footer button.link:hover{color:var(--glow)}
footer .adr{color:var(--mid);line-height:1.8}
footer .logo img{margin-bottom:16px}
.f-unten{border-top:1px solid var(--linie);padding-top:22px;color:var(--leise);font-size:12.5px}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .wrap{padding:0 20px}
  nav{gap:0}nav a:not(.cta){display:none}
  .kopf{height:64px}
  .f-grid{grid-template-columns:1fr}
  .hero-in{grid-template-columns:1fr;gap:44px}
}
@media(prefers-reduced-motion:reduce){
  .spur i{animation:none;transform:scaleX(var(--v))}.scanline,.puls i{animation:none}}

/* ══════════════════════════════════════════════════════════════════════
   ÜBERSCHREIBUNGEN AUS DER ZUSAMMENFÜHRUNG
   Die Landingpage ist neu, der Fragebogen darunter stammt aus AP08. Beide
   Stylesheets liegen in derselben Datei. Diese Regeln setzen die alten
   Landing-Regeln zurück, die jetzt an neuer Stelle greifen würden – die
   Fragebogenregeln (.q-*) bleiben unangetastet.
   ══════════════════════════════════════════════════════════════════════ */
header nav{position:static;background:none;backdrop-filter:none;height:auto;
  padding:0;border:0;box-shadow:none;z-index:auto;display:flex;gap:32px;align-items:center}
header .logo img{filter:none}
footer{position:static}
:root{--leise:rgba(234,240,234,.58)}

/* Die neuen Abschnitte tragen ihren dunklen Grund selbst. Der Fragebogen aus
   AP08 behält seinen hellen – deshalb wird body NICHT umgestellt. */
header{background:rgba(246,243,238,.96)!important;border-bottom:1px solid #E4DED5}
header .logo span{color:#5A6A5F;border-left-color:#D8D2C7}
header .navlink,header nav a:not(.cta){color:#5A6A5F}
header .navlink:hover,header nav a:not(.cta):hover{color:#2C332E}
header .cta{background:#7F2149;color:#fff!important}
header .cta:hover{background:#5E1836}
.hero{background:var(--tief)!important;color:var(--hell)}
.band{color:var(--hell)}
.stand{background:var(--tief);color:var(--hell)}
.hero .lead,.hero .lead strong{color:var(--mid)}
.hero .lead strong{color:var(--hell)}
.hero h1{color:var(--hell)}
/* Die hervorgehobene Zeile trägt Gold – das war zunächst eine Altregel aus
   AP08, wirkt an dieser Stelle aber besser als das Salbei und liefert den
   gewünschten warmen Akzent. Deshalb bewusst gesetzt statt geerbt. */
.hero h1 em{color:var(--gold)}
.band h2 em{color:var(--gold)}

/* ── Weitere Akzente ────────────────────────────────────────────────────
   Gold und Weinrot bleiben sparsam, setzen aber an wiederkehrenden Stellen
   einen warmen Gegenpunkt zum Salbei. */

/* Auszeichnungszeilen bekommen eine feine Goldlinie darunter */
.stand-vor::after,.band-vor::after{content:'';display:block;width:34px;height:2px;
  background:var(--gold);margin:10px auto 0;opacity:.7}
.puls{position:relative}

/* Die Einordnungsbox trägt oben eine schmale Weinkante */
.panel{position:relative;overflow:hidden}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--wein-tief),var(--gold));opacity:.85}

/* Fußzeilenüberschriften mit Goldpunkt */
footer h4{position:relative;padding-left:14px}
footer h4::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.85}

/* Der Berichtsauszug im Overlay erhält eine warme Kopfkante */
.blatt-kopf{border-bottom:2px solid var(--gold)}

/* Die Scanzeile im Hero läuft in Gold aus */
.geraet-fuss b{color:var(--gold)}

/* Produktkarten: die gewählte Marke in Gold statt Salbei */
.pkarte[aria-pressed=true] .fk-marke{background:var(--gold)}

/* Auf flachen Bildschirmen (Laptops um 720 px Höhe) wird der Kopfbereich
   zusätzlich verdichtet, damit er ohne Scrollen vollständig sichtbar ist. */
@media (max-height:820px) and (min-width:1000px){
  .hero{padding:84px 0 36px}
  .band{padding:64px 0}
  .hero h1{font-size:clamp(30px,2.9vw,42px);margin-bottom:14px}
  .hero .lead{font-size:15px;margin-bottom:14px}
  .hero .lead+.lead{margin-top:-8px}
  .puls{margin-bottom:12px}
  .geraet-koerper{padding:10px 16px}
  .zeile{padding:2px 0;font-size:11px}
  .knoepfe{margin-bottom:0}
  .b1,.b2{padding:13px 26px;font-size:15px}
}
/* Auf dem Telefon steht der Scan unter dem Text – dort ist Höhe kein Maß,
   sondern Lesbarkeit. */
@media (max-width:820px){ .hero{padding:84px 0 44px} }
footer{background:#161E1A;color:var(--mid)}


/* ── Kostenlose Ersteinschätzung ─────────────────────────────────────── */
.zweitweg{width:100%;margin-top:8px;background:none;border:1px solid rgba(234,240,234,.32);
  color:var(--hell);border-radius:9px;padding:12px;font-size:14px;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:.16s var(--e)}
.zweitweg:hover{border-color:var(--glow);color:var(--glow)}
.quick-grenze{font-size:13.5px;line-height:1.6;color:var(--mid);border-left:2px solid var(--gold);
  padding-left:14px;margin-bottom:24px}
.quick-grenze strong{color:var(--hell)}
.quick-label{display:block;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--leise);margin-bottom:8px}
.quick-feld{width:100%;background:var(--tief3);border:1px solid var(--linie);border-radius:9px;
  padding:14px 16px;font-size:16px;color:var(--hell);font-family:'Outfit',sans-serif}
.quick-feld:focus{outline:2px solid var(--glow);outline-offset:2px;border-color:var(--glow)}
.quick-feld[aria-invalid="true"]{border-color:#C97F7F}
.quick-fehler{color:#E2A6A6;font-size:13.5px;margin-top:8px}
/* Falle für automatisierte Einträge – für Menschen unsichtbar, für Formular-
   roboter aber ausfüllbar. Ein ausgefülltes Feld verwirft die Anfrage. */
.quick-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quick-haken{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--mid);cursor:pointer}
.quick-haken input{margin-top:3px;width:18px;height:18px;accent-color:var(--glow);cursor:pointer}
.quick-haken a{color:var(--glow);text-decoration:underline;text-underline-offset:3px}
#quick-ziel,#quick-id{color:var(--glow);font-weight:600}


/* ── Ruhe in der Standortbestimmung ──────────────────────────────────────
   Die Bereiche haben unterschiedlich viele Aussagen. Ohne Mindesthöhe ändert
   sich damit bei jedem Schritt die Höhe des Abschnitts – die Seite springt
   und die Einordnungsbox wandert mit. Beide Spalten bekommen deshalb eine
   feste Grundhöhe, und die Box bleibt an ihrem Platz stehen.
   ─────────────────────────────────────────────────────────────────────── */
.stand{min-height:100svh;display:flex;align-items:center}
.stand > .wrap{width:100%}
.stand-grid{align-items:start}
.stand-buehne{min-height:560px}
.schritt{min-height:520px;display:flex;flex-direction:column}
.wahlfeld{flex:1 0 auto;align-content:start}
.panel{position:sticky;top:96px;min-height:420px;display:flex;flex-direction:column}
.treffer{min-height:150px;align-content:start}
.panel-nav,.panel-aktion{margin-top:auto}
@media(max-width:1000px){
  .stand{min-height:auto;padding:72px 0 84px}
  .stand-buehne,.schritt{min-height:0}
  .panel{position:static;min-height:0}
  .treffer{min-height:0}
}

.weiter:disabled{opacity:.35;cursor:not-allowed;transform:none}
.weiter:disabled:hover{background:var(--glow);transform:none}


/* ── Die Strecke passt auf einen Bildschirm ──────────────────────────────
   Solange der Abschnitt höher ist als das Fenster, verschiebt sich bei jedem
   Schrittwechsel der sichtbare Ausschnitt – das ist die eigentliche Unruhe.
   Deshalb: kompaktere Zeilen, feste Grundhöhe für das Auswahlfeld (bemessen
   am längsten Bereich mit acht Aussagen) und ein ruhiger Kopf.
   ─────────────────────────────────────────────────────────────────────── */
.stand{padding:72px 0 80px}
.stand-kopf{margin-bottom:26px}
.stand-kopf h2{font-size:clamp(24px,2.4vw,32px)}
.stand-vor{margin-bottom:10px}
.fortschritt{margin-bottom:26px}
.schritt-kapitel{margin-bottom:10px}
.schritt-frage{font-size:clamp(21px,2.1vw,27px);margin-bottom:6px}
.schritt-hinweis{font-size:14.5px;margin-bottom:8px}
.schritt-regel{font-size:12.5px;margin-bottom:16px}
.wahlfeld{gap:8px;margin-bottom:18px;min-height:498px}
.aussage{padding:10px 14px;border-radius:10px}
.aussage-txt{font-size:14.5px;line-height:1.35}
.st{padding:5px 10px;font-size:11px}
.opt{padding:9px 14px;font-size:12.5px}
.schritt{min-height:0}
.stand-buehne{min-height:0}
.panel{min-height:0}
.treffer{min-height:120px}
@media(max-width:1000px){ .wahlfeld{min-height:0} }
@media(max-height:820px) and (min-width:1000px){
  .stand{padding:56px 0 60px}
  .wahlfeld{min-height:430px}
  .aussage{padding:8px 13px}
  .aussage-txt{font-size:13.5px}
  .stand-kopf{margin-bottom:18px}
  .fortschritt{margin-bottom:18px}
}


/* Die Einordnungsbox klebt nicht mehr am Fensterrand, sondern steht fest
   neben den Fragen. Mitwanderndes Verhalten wirkt bei einer Strecke, die
   ohnehin fast auf einen Bildschirm passt, unruhig statt hilfreich. */
.panel{position:static}
.stand{padding:56px 0 64px}
.stand-kopf{margin-bottom:20px}
.fortschritt{margin-bottom:20px}
.wahlfeld{min-height:470px}

/* Die Zwischenzeile bricht je nach Bereich auf eine oder zwei Zeilen um –
   ohne Mindesthöhe verschiebt das die ganze Spalte um eine Zeilenhöhe. */
.schritt-hinweis{min-height:21px}
.schritt-frage{min-height:34px}

/* Bemessen am längsten Bereich (acht Aussagen) – so bleibt die Höhe über
   alle sieben Bereiche gleich. */
.wahlfeld{min-height:490px}
@media(max-height:820px) and (min-width:1000px){ .wahlfeld{min-height:458px} }
@media(max-width:1000px){ .wahlfeld{min-height:0} }

.rueckkehr{background:rgba(159,199,174,.12);border:1px solid rgba(159,199,174,.35);
  border-radius:10px;padding:12px 16px;font-size:13.5px;line-height:1.55;
  color:var(--hell);margin-bottom:14px}
.rueckkehr strong{color:var(--glow)}


/* ══════════════════════════════════════════════════════════════════════════
   BEFUND 10.08.2026: `.schritt` bekam `display:flex`, um das Auswahlfeld zu
   strecken. Damit war das hidden-Attribut wirkungslos – Fragen UND
   Themenfelder standen gleichzeitig auf der Seite, untereinander gestapelt.
   Dieselbe Ursache wie schon bei der Kopfzeile und beim Weiter-Knopf:
   display schlaegt hidden. Deshalb steht die Regel jetzt ausdruecklich da.
   ══════════════════════════════════════════════════════════════════════════ */
.schritt[hidden],
#felder-schritt[hidden],
[hidden]{display:none!important}

/* Rolle des Beantwortenden – entscheidet später mit, wie belastbar eine
   Angabe ist. Eine Geschäftsführung sieht andere Dinge als ein HR-Team. */
.rolle{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.rolle-label{font-size:12.5px;color:var(--leise)}
.rolle-wahl{display:flex;gap:6px;flex-wrap:wrap}
.rl{background:none;border:1px solid var(--linie);color:var(--mid);border-radius:99px;
  padding:6px 14px;font-size:12.5px;cursor:pointer;font-family:'Outfit',sans-serif;transition:.14s var(--e)}
.rl:hover{border-color:var(--glow);color:var(--hell)}
.rl[aria-pressed=true]{background:var(--glow);border-color:var(--glow);color:var(--tief);font-weight:600}

/* Die Einordnungsbox waechst mit der Zahl der getroffenen Themenfelder – bis
   zu fuenf. Ohne feste Grundhoehe verschiebt sich dadurch der Bestaetigungs-
   knopf bei jedem Schritt nach unten. Bemessen an fuenf Zeilen. */
.treffer{min-height:232px}
@media(max-height:820px) and (min-width:1000px){ .treffer{min-height:210px} }
@media(max-width:1000px){ .treffer{min-height:0} }

/* Kurze Bereiche liessen unter den Aussagen eine grosse Leere stehen – die
   feste Hoehe verhinderte zwar das Springen, wirkte aber unausgewogen. Die
   Aussagen sitzen deshalb mittig in der Flaeche statt oben. */
.wahlfeld{align-content:center}
/* Auch die Einleitungszeile der Box bricht unterschiedlich um. */
.panel .u{min-height:44px}

/* Die Rolle ist Pflicht und wird deshalb deutlich hervorgehoben. Solange sie
   fehlt, ist der Kasten sichtbar markiert statt nur beilaeufig. */
.rolle{background:rgba(159,199,174,.08);border:1px solid var(--linie);
  border-radius:12px;padding:12px 18px;margin-top:20px;display:inline-flex}
.rolle-label{font-size:13.5px;color:var(--hell);font-weight:500}
.rolle-label em{color:var(--gold);font-style:normal;margin-left:2px}
.rolle.fehlt{border-color:var(--gold);background:rgba(200,169,106,.12);
  animation:rolleHinweis 2.4s ease-in-out infinite}
@keyframes rolleHinweis{0%,100%{box-shadow:0 0 0 0 rgba(200,169,106,0)}
  50%{box-shadow:0 0 0 4px rgba(200,169,106,.16)}}
@media (prefers-reduced-motion: reduce){ .rolle.fehlt{animation:none} }


/* ══════════════════════════════════════════════════════════════════════════
   DIE EINORDNUNG WANDERT ANS ENDE (10.08.2026)

   Bisher stand die Box neben den Fragen. Weil die Bereiche zwischen drei und
   acht Aussagen haben, musste die Fragenspalte auf eine feste Grundhoehe
   gezwungen werden – das beseitigte zwar das Springen, liess aber unter
   kurzen Bereichen viel Leere und wirkte weiter unruhig.

   Die Fragen bekommen deshalb die volle Breite und duerfen wieder atmen. Die
   Einordnung erscheint dort, wo sie hingehoert: am Ende, neben der
   Themenauswahl. Waehrend der Fragen zeigt eine schmale Zeile unter dem
   Fortschritt, was sich gerade abzeichnet – ohne eigene Flaeche.
   ══════════════════════════════════════════════════════════════════════════ */
.stand-grid{grid-template-columns:1fr}
.stand-buehne{max-width:860px;margin:0 auto;width:100%}
#panel{display:none}
.stand-grid.ergebnis{grid-template-columns:1fr 330px;align-items:start;max-width:1160px;margin:0 auto}
.stand-grid.ergebnis #panel{display:flex}
.stand-grid.ergebnis .stand-buehne{max-width:none;margin:0}

/* Die Fragen brauchen keine erzwungene Hoehe mehr. */
.wahlfeld{min-height:0!important;align-content:start}
.schritt-hinweis{min-height:0}
.schritt-frage{min-height:0}

/* Laufende Einordnung als schmale Zeile statt als Kasten. */
.laufband{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  min-height:30px;margin:-6px 0 22px}
.lb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  background:rgba(159,199,174,.12);border:1px solid rgba(159,199,174,.28);
  border-radius:99px;padding:5px 13px;color:var(--hell);
  animation:ein .22s var(--e) both}
.lb b{font-weight:600;font-size:11px;color:var(--glow)}
.lb.mittel b{color:var(--gold)}
.lb.leicht b{color:var(--leise)}
.laufband-leer{font-size:12.5px;color:var(--leise)}
@media(max-width:1000px){ .stand-grid.ergebnis{grid-template-columns:1fr} }

/* Die Steuerung steht jetzt wieder unter den Fragen, mittig und ruhig. */
.schritt .panel-nav{justify-content:center;border-top:0;margin-top:22px;padding-top:0}
.schritt .panel-nav .weiter{flex:0 0 auto;padding:14px 34px}

/* Die letzten 26 px Unterschied kommen von der Frage- und Hinweiszeile, die
   je nach Bereich ein- oder zweizeilig umbricht. */
.schritt-frage{min-height:36px}
.schritt-hinweis{min-height:22px}

/* Einzelne Aussagen brechen je nach Fensterbreite zweizeilig um. Eine feste
   Zeilenhoehe je Aussage haelt die Flaeche stabil, ohne Leerraum zu erzeugen –
   sechs gleich hohe Zeilen ergeben in jedem Bereich dieselbe Hoehe. */
.aussage{min-height:60px}
.aussage-txt{display:block}
@media(max-width:760px){ .aussage{min-height:0} }


/* ── Rolle als eigener erster Schritt ─────────────────────────────────── */
.rolle-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.rollkarte{background:var(--tief2);border:1px solid var(--linie);border-radius:12px;
  padding:16px 18px;text-align:left;cursor:pointer;font-family:'Outfit',sans-serif;
  color:var(--hell);transition:.16s var(--e);display:block}
.rollkarte:hover{border-color:rgba(159,199,174,.55);transform:translateY(-2px)}
.rollkarte[aria-pressed=true]{background:rgba(159,199,174,.14);border-color:var(--glow)}
.rollkarte b{display:block;font-size:16px;margin-bottom:3px}
.rollkarte span{font-size:13px;color:var(--mid);line-height:1.45}
@media(max-width:640px){.rolle-wahl{grid-template-columns:1fr}}

/* Der Hinweis nutzt die volle Breite der Fragenspalte – das spart Hoehe. */
.schritt-regel{max-width:none}

/* Der Azubi-Kompass ist ein eigenes Produkt und bekommt deshalb einen
   eigenen Knopf im Menue – zurueckhaltender als der Haupt-Aufruf, aber
   deutlich sichtbarer als ein Textlink. */
.nav-azubi{background:rgba(78,110,93,.14);border:1px solid #4E6E5D;color:#3B5445;
  border-radius:6px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:.16s}
.nav-azubi:hover{background:#4E6E5D;color:#fff}


/* ── Paketkarten sauber aneinander ausgerichtet (10.08.2026) ─────────────
   Die Beschreibungstexte sind unterschiedlich lang. Ohne feste Grundhöhe
   rutschen Preis und Leistungsliste je Karte auf eine andere Höhe – der
   Azubi-Preis stand dadurch deutlich weiter oben als die übrigen.
   ─────────────────────────────────────────────────────────────────────── */
.pk-art{min-height:16px}
.pk h3{min-height:34px}
.pk-txt{min-height:110px;margin-bottom:14px}
.pk-preis{min-height:78px;display:flex;flex-direction:column;justify-content:flex-end;
  margin-bottom:16px}
/* „Auf Anfrage" ist Text, keine Zahl – bei gleicher Schriftgröße wirkt es
   deutlich größer als die Beträge. Deshalb eine Stufe kleiner. */
.pk-preis b.wort{font-size:26px;line-height:1.15}
@media(max-width:1080px){ .pk-txt{min-height:0} .pk-preis{min-height:0} .pk h3{min-height:0} }

/* Die Betragszeile ist EIN Element – sonst bildet der Zusatz „je" eine
   eigene Zeile und schiebt den Betrag nach unten. */
.pk-preis .betrag{display:block;line-height:1.1}

/* „Auf Anfrage" ist kleiner gesetzt und saesse dadurch etwas tiefer –
   die Grundlinie wird angeglichen, damit alle vier Angaben auf einer Hoehe
   stehen. Der Knopf ebenso: die Enterprise-Liste hat eine Zeile weniger. */
.pk-preis .betrag{display:flex;align-items:baseline;min-height:40px}
.pk-cta{margin-top:auto}

/* Klare Trennung zwischen kostenfreier Ersteinschätzung und kostenpflichtiger
   Tiefenanalyse. Eine falsche Erwartung an das kostenlose Dokument wäre der
   teuerste Missverständnis, den diese Seite erzeugen kann. */
.unterscheidung{background:rgba(200,169,106,.12);border:1px solid rgba(200,169,106,.4);
  border-radius:10px;padding:13px 16px;font-size:14px;line-height:1.6;
  color:var(--hell);margin-bottom:16px}
.unterscheidung strong{color:var(--gold)}
.blatt-marke{display:inline-block;background:var(--gold);color:var(--tief);
  font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;margin-bottom:7px}

.geraet-koerper{padding:12px 18px}
.zeile{padding:3px 0}
@media(max-height:820px) and (min-width:1000px){ .zeile{padding:2px 0;font-size:10.5px} }


/* ══════════════════════════════════════════════════════════════════════════
   DER WEG IM KOPFBEREICH (11.08.2026)
   Drei Stufen: kostenfreier HR Navigator™, kostenpflichtiger HR Health Check™,
   offene Umsetzung. Die Bewegung ist zurückhaltend – sie soll die Reihenfolge
   erzählen, nicht Aufmerksamkeit vom Text stehlen: Die Stufen laufen nacheinander
   ein, die Pfeile wandern einmal mit, danach atmet nur noch die erste Stufe.
   ══════════════════════════════════════════════════════════════════════════ */
.treppe{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:stretch;gap:0}
.tr-stufe{position:relative;padding:20px 18px 18px;border-radius:14px;
  background:rgba(234,240,234,.045);border:1px solid var(--linie);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--e), transform .5s var(--e), border-color .25s, background .25s}
.treppe.an .tr-stufe{opacity:1;transform:none}
.treppe.an .tr-stufe[data-stufe="2"]{transition-delay:.18s}
.treppe.an .tr-stufe[data-stufe="3"]{transition-delay:.36s}
.tr-stufe.frei{background:rgba(159,199,174,.1);border-color:rgba(159,199,174,.45)}
.tr-stufe.check{background:rgba(200,169,106,.09);border-color:rgba(200,169,106,.4)}
.tr-stufe:hover{transform:translateY(-3px)}
.tr-stufe .pos{position:absolute;top:-10px;left:16px;font-size:9.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tr-stufe.frei .pos{background:var(--glow);color:var(--tief)}
.tr-stufe.check .pos{background:var(--gold);color:var(--tief)}
.tr-stufe.spaeter .pos{background:rgba(234,240,234,.18);color:var(--hell)}
.tr-stufe h3{font-family:'Cormorant Garamond',serif;font-size:19px;margin:8px 0 4px;line-height:1.15}
.tr-stufe > p{font-size:12.5px;color:var(--mid);line-height:1.45;margin:0 0 10px}
.tr-liste{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:4px;flex:1}
.tr-liste li{font-size:12px;color:var(--mid);padding-left:15px;position:relative;line-height:1.4}
.tr-liste li::before{content:'✓';position:absolute;left:0;font-size:10px;color:var(--glow)}
.tr-stufe.check .tr-liste li::before{color:var(--gold)}
.tr-stufe.spaeter .tr-liste li::before{color:var(--leise)}
.tr-preis{font-family:'Cormorant Garamond',serif;font-size:18px;margin-top:auto}
.tr-stufe.frei .tr-preis{color:var(--glow)}
.tr-preis.leise{color:var(--leise);font-size:14px}
.tr-link{background:none;border:0;padding:0;margin-top:auto;text-align:left;cursor:pointer;
  color:var(--gold);font-size:12.5px;font-family:'Outfit',sans-serif;
  border-bottom:1px solid transparent}
.tr-link:hover{border-bottom-color:var(--gold)}

/* Die Pfeile wandern beim Einlaufen einmal von links nach rechts. */
.tr-pfeil{display:grid;place-items:center;color:var(--leise);font-size:15px}
.tr-pfeil span{opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--e), transform .4s var(--e)}
.treppe.an .tr-pfeil:nth-of-type(2) span{opacity:1;transform:none;transition-delay:.12s}
.treppe.an .tr-pfeil:nth-of-type(4) span{opacity:1;transform:none;transition-delay:.30s}

/* Nur die erste Stufe atmet weiter – sie ist der Einstieg. */
.treppe.an .tr-stufe.frei{animation:trAtem 4.5s ease-in-out 1.2s infinite}
@keyframes trAtem{0%,100%{box-shadow:0 0 0 0 rgba(159,199,174,0)}
  50%{box-shadow:0 0 0 5px rgba(159,199,174,.09)}}
@media (prefers-reduced-motion: reduce){
  .tr-stufe,.tr-pfeil span{opacity:1;transform:none;transition:none}
  .treppe.an .tr-stufe.frei{animation:none}
}
@media(max-width:900px){
  .treppe{grid-template-columns:1fr;gap:10px}
  .tr-pfeil{transform:rotate(90deg);height:18px}
}

/* Der Brückensatz führt vom Text zum Aufruf. */
.lead-bruecke{border-left:2px solid var(--glow);padding-left:14px}

/* Zwischenband: Text links, Ergebnisbeispiel rechts. */
.band-zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:left}
.band-zwei .band-vor::after{margin-left:0}
.band-zwei .band-sub{margin-left:0}
@media(max-width:1000px){.band-zwei{grid-template-columns:1fr;gap:32px}}

/* Der Brueckensatz und die dritte Stufe machen den Kopfbereich hoeher als das
   Fenster. Deshalb hier etwas dichter setzen – der Text bleibt vollstaendig. */
.hero .lead{font-size:16px;margin-bottom:13px}
.hero .lead-bruecke{font-size:15px}
.hero h1{margin-bottom:16px}
.hero .puls{margin-bottom:14px}
.tr-stufe{padding:17px 16px 15px}
.tr-stufe h3{font-size:18px;margin:6px 0 3px}
.tr-stufe > p{margin-bottom:8px}
.tr-liste{margin-bottom:10px;gap:3px}

.hero{padding-top:clamp(88px,11vh,120px);padding-bottom:clamp(40px,6vh,56px)}

/* Der Weg braucht Breite: In der halben Spalte quetschen sich drei Karten auf
   je 170 px – lesbar, aber gedrängt. Deshalb steht der Text oben über die
   ganze Breite und der Weg darunter, ebenfalls über die ganze Breite. */
.hero-in{grid-template-columns:1fr;gap:30px}
.hero-in > div:first-child{max-width:74ch}
.hero h1{font-size:clamp(32px,3.4vw,48px)}
.hero .lead{max-width:none}
.treppe{grid-template-columns:1fr 30px 1fr 30px 1fr}
.tr-stufe{padding:18px 20px 16px}
.tr-stufe h3{font-size:19px}
.tr-liste li{font-size:12.5px}
@media(max-height:820px) and (min-width:1000px){
  .hero h1{font-size:clamp(28px,2.9vw,38px)}
  .hero .lead{font-size:14.5px;margin-bottom:10px}
  .tr-stufe{padding:14px 16px 13px}
  .tr-liste{margin-bottom:8px}
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO MIT WASSERBILD (11.08.2026)

   Der Eindruck eines Films entsteht aus drei ruhigen Bewegungen, die sich
   überlagern: Ringe laufen vom Zentrum nach außen, Lichtpunkte wandern auf den
   Verbindungslinien, die Themenfelder atmen leicht. Alles rein rechnerisch –
   kein Video, keine Bilddatei, damit die Seite schnell bleibt und bei jeder
   Auflösung scharf ist.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-in{grid-template-columns:.86fr 1.14fr;gap:40px;align-items:center}
.hero-text{max-width:52ch}
.hero h1{font-size:clamp(30px,3.2vw,46px);line-height:1.12;margin-bottom:18px}
.hero-strich{width:56px;height:2px;background:var(--gold);opacity:.75;margin-bottom:18px}
.hero .lead{font-size:15.5px;line-height:1.7;max-width:46ch}
.hero-fuss{margin-top:16px;font-size:12.5px;color:var(--leise);
  display:flex;align-items:center;gap:8px}
.hero-fuss::before{content:'⛨';color:var(--glow);font-size:13px}

/* Aufruf mit Unterzeile */
.b1-zwei{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:13px 30px;line-height:1.25}
.b1-haupt{font-size:16px;font-weight:600}
.b1-klein{font-size:11.5px;font-weight:400;opacity:.72}

/* ── Die Wasserfläche ───────────────────────────────────────────────────── */
.wasser{position:relative;width:100%;aspect-ratio:640/560;max-height:78vh;
  border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -60px #000, inset 0 0 90px rgba(0,0,0,.4)}
.wasser-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Ringe – vier gleiche Kreise, zeitversetzt gestartet: das ergibt den
   fortlaufenden Eindruck einer Wasserbewegung. */
.ring{transform-origin:320px 258px;opacity:0;stroke-width:1.1;
  animation:ringLauf 9s linear infinite}
.ring.r2{animation-delay:2.25s}
.ring.r3{animation-delay:4.5s}
.ring.r4{animation-delay:6.75s}
@keyframes ringLauf{
  0%   {transform:scale(1);   opacity:0}
  8%   {opacity:.42}
  55%  {opacity:.16}
  100% {transform:scale(3.5); opacity:0}
}

/* Zentrum: atmet ruhig, der äußere Ring pulsiert leicht nach */
.kern-innen{transform-origin:320px 258px;animation:kernAtem 6s ease-in-out infinite}
@keyframes kernAtem{0%,100%{transform:scale(1);stroke-opacity:.9}
  50%{transform:scale(1.045);stroke-opacity:.55}}

/* Lichtpunkte auf den Linien */
.funke{fill:#C8E4D2;opacity:0;animation:funkeLauf 5.5s ease-in-out infinite}
@keyframes funkeLauf{
  0%,10%{opacity:0;offset-distance:0%}
  22%{opacity:.95}
  78%{opacity:.55}
  92%,100%{opacity:0;offset-distance:100%}
}

/* ── Beschriftungen ─────────────────────────────────────────────────────── */
.knoten{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  pointer-events:none}
.kern .k-sym{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;color:var(--glow);background:rgba(27,39,33,.5)}
.kern .k-text{font-size:12.5px;color:var(--hell);letter-spacing:.3px;margin-top:-8px}

.felder{position:absolute;inset:0}
.feld{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  opacity:0;animation:feldEin .8s var(--e) forwards, feldAtem 7s ease-in-out infinite}
.feld.rechts{flex-direction:row-reverse}
.feld-kreis{width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:15px;color:var(--glow);
  background:rgba(22,31,27,.72);border:1px solid rgba(159,199,174,.45);
  box-shadow:0 0 18px -6px rgba(159,199,174,.5)}
.feld-text{font-size:11.5px;line-height:1.3;color:var(--hell);
  text-shadow:0 1px 8px rgba(0,0,0,.85);max-width:104px;white-space:normal}
.feld.rechts .feld-text{text-align:right}
@keyframes feldEin{to{opacity:1}}
@keyframes feldAtem{0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.028)}}

@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:30px}
  .hero-text{max-width:none}
  .wasser{max-height:none}
  .feld-text{font-size:10.5px;max-width:88px}
  .feld-kreis{width:32px;height:32px;font-size:13px}
}
@media(max-width:640px){
  /* Auf dem Telefon bleibt die Fläche als ruhiges Motiv, ohne Beschriftungen –
     zehn Wortgruppen wären dort nicht mehr lesbar. */
  .felder{display:none}
  .wasser{aspect-ratio:1/.72}
}
@media (prefers-reduced-motion: reduce){
  .ring,.kern-innen,.funke,.feld{animation:none}
  .ring.r1{opacity:.3;transform:scale(1.7)}
  .ring.r3{opacity:.18;transform:scale(2.6)}
  .feld{opacity:1}
}

/* Die Beschriftungen der linken Felder ragten über den Rand hinaus. Der Kreis
   wird enger gesetzt und die Fläche bekommt innen Luft. */
.wasser{padding:0}
.feld-text{max-width:96px}
.hero h1{font-size:clamp(28px,2.9vw,40px)}
.hero-in{gap:34px;grid-template-columns:.82fr 1.18fr}

/* Gezeichnete Symbole statt Schriftzeichen – die werden je nach System bunt
   dargestellt und brechen die Farbwelt. */
.feld-kreis svg{width:17px;height:17px}
.kern .k-sym svg{width:30px;height:30px}

/* „Onboarding" lief rechts über die Kante. Der Kreis wird waagerecht enger,
   und die Flaeche nutzt die volle Breite der Spalte. */
.wasser{border-radius:20px}
.feld-text{max-width:92px}
@media(min-width:1081px){ .hero-in{grid-template-columns:.78fr 1.22fr} }

/* ── Kopfbereich auf schmalen Geräten ────────────────────────────────────
   Die spätere Regel `.hero-in{grid-template-columns:.78fr 1.22fr}` hat die
   frühere Einspaltigkeit überschrieben – dadurch quetschten sich Text und
   Wasserfläche nebeneinander. Hier steht die Untergrenze eindeutig am Ende.
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr!important;gap:26px}
  .hero-text{max-width:none}
  .wasser{aspect-ratio:1/.86}
}
@media(max-width:820px){
  header nav{gap:0}
  header nav a:not(.cta),header .navlink,header .nav-azubi{display:none}
  .logo span{display:none}
  .hero h1{font-size:clamp(26px,7vw,34px)}
  .knoepfe{flex-direction:column;align-items:stretch}
  .b1-zwei,.b2{text-align:center;justify-content:center;align-items:center}
}
@media(max-width:640px){
  .wasser{aspect-ratio:1/.62}
  .kern .k-sym{width:64px;height:64px}
  .kern .k-text{font-size:11.5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   ABSCHNITT 2 · IHR WEG (12.08.2026)
   Drei Stationen, verbunden durch Linien, die beim Sichtbarwerden von links
   nach rechts wachsen. Die Kreise fahren nacheinander auf – so entsteht der
   Eindruck eines Weges statt dreier gleichrangiger Kacheln.
   ══════════════════════════════════════════════════════════════════════════ */
.band{min-height:auto;display:block;padding:88px 0 96px;text-align:left}
.weg-vor{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--glow);margin:0 0 34px}
.weg-vor i{width:7px;height:7px;border-radius:50%;background:var(--glow);flex:0 0 auto}
.weg-vor::after{display:none}

.wegband{display:grid;grid-template-columns:1fr 84px 1fr 84px 1fr;align-items:start;gap:0}
.wg-station{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:start}
.wg-kreis{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(159,199,174,.5);color:var(--glow);background:rgba(159,199,174,.06);
  box-shadow:0 0 26px -10px rgba(159,199,174,.65);
  opacity:0;transform:scale(.86);transition:.55s var(--e)}
.wg-kreis svg{width:30px;height:30px}
.wegband.an .wg-station:nth-child(1) .wg-kreis{opacity:1;transform:none}
.wegband.an .wg-station:nth-child(3) .wg-kreis{opacity:1;transform:none;transition-delay:.5s}
.wegband.an .wg-station:nth-child(5) .wg-kreis{opacity:1;transform:none;transition-delay:1s}
.wg-nr{display:block;font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold);
  line-height:1;margin-bottom:3px}
.wg-text h3{font-family:'Cormorant Garamond',serif;font-size:22px;margin:0 0 6px;line-height:1.15}
.wg-text p{font-size:13.5px;color:var(--mid);line-height:1.6;margin:0;max-width:34ch}
.wg-link{background:none;border:0;padding:0;margin-top:8px;color:var(--gold);font-size:12.5px;
  cursor:pointer;font-family:'Outfit',sans-serif;border-bottom:1px solid transparent}
.wg-link:hover{border-bottom-color:var(--gold)}

/* Die Brücke zwischen zwei Stationen: Linie wächst, Pfeil erscheint danach. */
.wg-brueck{position:relative;height:74px;display:grid;place-items:center}
.wg-linie{position:absolute;left:0;right:0;top:37px;height:1px;
  background:linear-gradient(90deg,rgba(159,199,174,.7),rgba(159,199,174,.25));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.wegband.an .wg-brueck:nth-child(2) .wg-linie{transform:scaleX(1);transition-delay:.2s}
.wegband.an .wg-brueck:nth-child(4) .wg-linie{transform:scaleX(1);transition-delay:.7s}
.wg-pfeil{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(159,199,174,.55);background:var(--tief);color:var(--glow);font-size:13px;
  opacity:0;transition:.4s var(--e)}
.wegband.an .wg-brueck:nth-child(2) .wg-pfeil{opacity:1;transition-delay:.62s}
.wegband.an .wg-brueck:nth-child(4) .wg-pfeil{opacity:1;transition-delay:1.12s}

.weg-cta{text-align:center;margin-top:44px}
@media(max-width:1000px){
  .wegband{grid-template-columns:1fr;gap:20px}
  .wg-brueck{height:34px}
  .wg-linie{left:36px;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(159,199,174,.7),rgba(159,199,174,.25));
    transform:scaleY(0);transform-origin:top}
  .wegband.an .wg-brueck .wg-linie{transform:scaleY(1)}
  .wg-pfeil{transform:rotate(90deg)}
}
@media (prefers-reduced-motion: reduce){
  .wg-kreis,.wg-pfeil{opacity:1;transform:none;transition:none}
  .wg-linie{transform:scaleX(1);transition:none}
}

/* Unser Ansatz im Über-uns-Fenster */
.ansatz{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 8px}
.an-punkt{display:grid;grid-template-columns:40px 1fr;gap:13px;align-items:start}
.an-sym{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(159,199,174,.4);color:var(--glow);background:rgba(159,199,174,.07)}
.an-sym svg{width:19px;height:19px}
.an-punkt b{display:block;font-size:14px;color:var(--gold);font-weight:600;margin-bottom:2px}
.an-punkt span{font-size:13px;color:var(--mid);line-height:1.5}
@media(max-width:700px){.ansatz{grid-template-columns:1fr}}

/* Abschnitt 2 füllt den Bildschirm – vorher blitzte darunter schon der Fuß
   durch, was den Abschluss unruhig wirken ließ. */
.band{min-height:100svh;display:flex;align-items:center;padding:96px 0}
.band > .wrap{width:100%}
.wegband{margin-top:8px}
.weg-cta{margin-top:56px}
@media(max-height:820px) and (min-width:1000px){ .band{padding:72px 0} }
@media(max-width:1000px){ .band{min-height:auto;padding:72px 0 84px} }


/* ══════════════════════════════════════════════════════════════════════════
   WASSERMOTIV IM KOPFBEREICH (12.08.2026)
   Das Foto aus dem Entwurf. Bewegung entsteht durch zwei Lichtschleier, die
   in unterschiedlichem Tempo darüber wandern, und ein sehr langsames Atmen
   der Fläche – ohne Verzerrung, damit die Beschriftungen scharf bleiben.
   ══════════════════════════════════════════════════════════════════════════ */
.wasser{position:relative;width:100%;aspect-ratio:1298/730;border-radius:18px;
  overflow:hidden;box-shadow:0 40px 90px -60px #000}
.wasser-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:wasserAtem 22s ease-in-out infinite}
@keyframes wasserAtem{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.wasser-schleier{position:absolute;top:-30%;bottom:-30%;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(200,228,210,.10) 42%,
    rgba(200,228,210,.16) 50%,rgba(200,228,210,.10) 58%,transparent);
  transform:translateX(-120%) rotate(6deg);
  animation:schleierLauf 17s ease-in-out infinite}
.wasser-schleier.zwei{width:30%;opacity:.6;animation-duration:26s;animation-delay:6s;
  background:linear-gradient(80deg,transparent,rgba(159,199,174,.12) 50%,transparent)}
@keyframes schleierLauf{
  0%{transform:translateX(-130%) rotate(6deg)}
  100%{transform:translateX(330%) rotate(6deg)}
}
@media (prefers-reduced-motion: reduce){
  .wasser-bild,.wasser-schleier{animation:none}
  .wasser-schleier{opacity:0}
}

/* Was die erste Station konkret liefert – der wichtigste Satz des Abschnitts. */
.wg-was{color:var(--glow)!important;font-weight:600;margin-bottom:5px!important;font-size:13.5px}

/* Fünf Säulen statt vier – die kostenfreie Vorstufe steht links und ist als
   solche erkennbar, ohne den kostenpflichtigen Produkten die Schau zu stehlen. */
.pakete{grid-template-columns:repeat(5,1fr);gap:12px}
.pk-frei{background:rgba(159,199,174,.08);border-color:rgba(159,199,174,.42)}
.pk-frei .pk-preis b{color:var(--glow)}
.pk-frei .pk-liste li::before{color:var(--glow)}
.pk-frei .pk-cta{border-color:var(--glow);color:var(--glow)}
.pk-frei .pk-cta:hover{background:var(--glow);color:var(--tief)}
.pk h3{font-size:22px;line-height:1.12}
.pakete .pk{padding:22px 18px}
@media(max-width:1200px){.pakete{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.pakete{grid-template-columns:1fr}}

/* Mit fünf schmaleren Säulen brechen Titel und Beschreibung unterschiedlich
   um. Feste Grundhöhen halten Preis, Liste und Knopf wieder auf einer Linie. */
.pakete .pk h3{min-height:52px;display:flex;align-items:flex-end}
.pakete .pk-txt{min-height:132px;font-size:12.5px;line-height:1.5}
.pakete .pk-art{min-height:15px;font-size:9.5px}
.pakete .pk-liste li{font-size:12px}
.pakete .pk-preis b{font-size:30px}
.pakete .pk-preis .betrag{min-height:36px}
@media(max-width:1200px){
  .pakete .pk h3{min-height:0}
  .pakete .pk-txt{min-height:0}
}

/* „Auf Anfrage" ist Text statt Zahl und sitzt dadurch höher; die Enterprise-
   Liste hat außerdem eine Zeile mehr. Beides wird angeglichen. */
.pakete .pk-preis{min-height:74px;justify-content:flex-end}
.pakete .pk-preis b.wort{font-size:22px;line-height:1.3}
.pakete .pk-liste{min-height:186px}

/* Die Listen sind unterschiedlich lang (7 bis 8 Punkte). Der Knopf sitzt
   deshalb am unteren Rand der Säule statt direkt unter der Liste. */
.pakete .pk-liste{min-height:0;flex:1}
.pakete .pk{display:flex;flex-direction:column}
.pakete .pk-cta{margin-top:16px}

/* Alle Säulen gleich hoch, damit auch die Knöpfe auf einer Linie sitzen. */
.pakete{align-items:stretch}
.pakete .pk-cta{margin-top:auto}

/* Die hervorgehobene Säule „Meistgewählt" trägt eine zusätzliche Zeile über
   dem Titel – dadurch saß ihr Knopf 18 px tiefer. Die Marke schwebt jetzt
   über der Kante statt im Textfluss zu stehen. */
.pakete .pk-marke{position:absolute;top:-11px;left:18px}
.pakete .pk.hervor{position:relative}

/* Der Zusatz „je" überlappte den Betrag, weil die Betragszeile als Flex-Kasten
   unten ausgerichtet ist. Zeile und Abstand ausdrücklich setzen. */
.pakete .pk-preis .betrag{display:flex;align-items:baseline;gap:5px;min-height:36px}
.pakete .pk-preis .betrag b{line-height:1}


/* ══════════════════════════════════════════════════════════════════════════
   KOPFBEREICH MIT WASSER ÜBER DIE VOLLE BREITE (12.08.2026)
   Das Motiv liegt als Hintergrund hinter dem gesamten Bereich. Ein Verlauf
   von links dunkelt die Textseite ab; zwei Lichtschleier wandern darüber und
   die Fläche atmet sehr langsam – so wirkt das Wasser bewegt, ohne dass der
   Text verzerrt oder unruhig wird.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:clamp(96px,12vh,132px) 0 clamp(48px,8vh,72px)}
.hero-grund{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bild{width:100%;height:100%;object-fit:cover;display:block;
  animation:heroAtem 26s ease-in-out infinite}
@keyframes heroAtem{0%,100%{transform:scale(1.02)}50%{transform:scale(1.07)}}

.hero-verlauf{position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(22,31,27,.97) 0%, rgba(22,31,27,.93) 26%,
    rgba(22,31,27,.62) 44%, rgba(22,31,27,.18) 60%, rgba(22,31,27,0) 74%),
    linear-gradient(180deg, rgba(22,31,27,.55) 0%, rgba(22,31,27,0) 22%,
    rgba(22,31,27,0) 78%, rgba(22,31,27,.55) 100%)}

.hero-schleier{position:absolute;top:-30%;bottom:-30%;width:38%;
  background:linear-gradient(100deg,transparent,rgba(200,228,210,.09) 45%,
    rgba(200,228,210,.14) 50%,rgba(200,228,210,.09) 55%,transparent);
  transform:translateX(-130%) rotate(6deg);
  animation:heroSchleier 19s ease-in-out infinite}
.hero-schleier.zwei{width:26%;opacity:.6;animation-duration:29s;animation-delay:7s;
  background:linear-gradient(80deg,transparent,rgba(159,199,174,.11) 50%,transparent)}
@keyframes heroSchleier{
  0%{transform:translateX(-130%) rotate(6deg)}
  100%{transform:translateX(330%) rotate(6deg)}
}

.hero .wrap{position:relative;z-index:1}
.hero-in{grid-template-columns:1fr;gap:0}
.hero-text{max-width:52ch}
.hero h1{font-size:clamp(30px,3.4vw,46px);line-height:1.14;margin-bottom:18px}
.hero .lead{font-size:15.5px;line-height:1.75;max-width:46ch;color:var(--mid)}
.hero-strich{width:56px;height:2px;background:var(--gold);opacity:.8;margin-bottom:20px}
.hero-fuss{margin-top:18px;font-size:12.5px;color:var(--leise);
  display:flex;align-items:center;gap:8px}
.hero-fuss::before{content:'⛨';color:var(--glow);font-size:13px}

@media(max-width:1000px){
  /* Auf schmalen Geräten steht der Text über der ganzen Fläche – der Verlauf
     dunkelt dann von unten statt von links. */
  .hero-verlauf{background:linear-gradient(180deg,
    rgba(22,31,27,.72) 0%, rgba(22,31,27,.86) 45%, rgba(22,31,27,.94) 100%)}
  .hero-text{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-bild,.hero-schleier{animation:none}
  .hero-schleier{opacity:0}
}

/* Das Motiv ist ein breites Band (3:1). Füllt es einen bildschirmhohen
   Bereich, wird es seitlich stark beschnitten und das Kreisbild rutscht aus
   dem Bild. Der Kopfbereich bekommt deshalb eine Höhe, die dem Motiv nahe
   kommt – so bleibt der Aufbau des Entwurfs erhalten. */
.hero{min-height:clamp(520px,64vh,660px);
  padding:clamp(80px,10vh,104px) 0 clamp(40px,6vh,60px)}
.hero-bild{object-position:78% center}
@media(max-width:1000px){
  .hero{min-height:auto;padding:76px 0 72px}
  .hero-bild{object-position:70% center}
}

/* Das Motiv ist 3:1. Damit oben und unten nichts vom Kreisbild abgeschnitten
   wird, richtet sich die Höhe des Bereichs nach dem Bildformat. */
.hero{min-height:0;height:auto;padding:0}
.hero-grund{position:absolute;inset:0}
.hero-in{padding:clamp(56px,7vw,96px) 0}
.hero{display:flex;align-items:center;aspect-ratio:1109/365;min-height:520px}
.hero-bild{object-position:center}
@media(max-width:1000px){ .hero{aspect-ratio:auto;min-height:auto;padding:64px 0 68px} }

/* Keine feste Mindesthöhe mehr – sie zwang das 3:1-Motiv in ein höheres
   Format und beschnitt es seitlich. Jetzt bestimmt allein das Bildformat. */
.hero{aspect-ratio:1109/365;min-height:0}
@media(max-width:1280px){ .hero{aspect-ratio:auto;min-height:0;padding:72px 0 76px} }

/* Die Kopfzeile liegt fest über der Seite. Ohne Abstand nach oben verschwand
   die Überschrift darunter. Die Höhe ergibt sich jetzt aus dem Inhalt, das
   Bild füllt den Bereich und wird seitlich nur leicht beschnitten. */
.hero{aspect-ratio:auto;min-height:0;
  padding:clamp(96px,12vh,124px) 0 clamp(52px,7vh,72px)}
.hero-in{padding:0}
.hero-bild{object-position:center}
@media(max-width:1280px){ .hero{padding:92px 0 72px} }

/* Wegweiser über den Säulen: erklärt in einem Satz, warum vier Aufrufe an
   dieselbe Stelle führen. */
.wegweiser{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  background:rgba(159,199,174,.09);border:1px solid rgba(159,199,174,.34);
  border-radius:10px;padding:12px 16px;margin:0 0 22px;
  font-size:13.5px;line-height:1.6;color:var(--mid)}
.wegweiser strong{color:var(--glow)}
.ww-punkt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--glow);color:var(--tief);font-weight:700;font-size:13px}
.ww-leise{color:var(--leise)}

/* Schrittmarke auf jeder Säule */
.pk-schritt{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-bottom:9px;
  background:rgba(234,240,234,.12);color:var(--mid)}
.pk-schritt.frei{background:var(--glow);color:var(--tief)}
.pk-schritt.eigen{background:rgba(200,169,106,.2);color:var(--gold)}
.pk-weg{margin:7px 0 0;font-size:11px;color:var(--leise);text-align:center;line-height:1.4}

/* Die Schrittmarke der ersten Säule bricht zweizeilig um („Schritt 1 · hier
   starten") und schob deren Inhalt nach unten. Feste Höhe für die Marke. */
.pakete .pk-schritt{min-height:20px;display:inline-flex;align-items:center;white-space:nowrap}
.pakete .pk-schritt.frei{font-size:9px;letter-spacing:.9px;padding:3px 8px}

/* Die Zusatzzeile unter den Aufrufen gibt es nur bei den drei Produkten, die
   über den Navigator laufen – dadurch standen die Knöpfe unterschiedlich hoch.
   Der Platz wird überall reserviert. */
.pakete .pk-cta{margin-top:auto}
.pakete .pk-weg{min-height:16px}
.pakete .pk:not(.pk-frei) .pk-cta{margin-bottom:0}
.pakete .pk-frei .pk-cta,
.pakete .pk:last-child .pk-cta{margin-bottom:23px}

/* Alle Säulen sind gleich hoch; unterschiedlich lange Listen ließen die Knöpfe
   dennoch wandern. Der untere Block (Knopf und Zusatzzeile) wird deshalb
   gemeinsam am Fuß der Säule verankert. */
.pakete .pk-liste{flex:1;min-height:0;margin-bottom:14px}
.pakete .pk-cta{margin-top:0}
.pakete .pk-weg{min-height:16px;margin-top:7px}


/* ══════════════════════════════════════════════════════════════════════════
   KOPFBEREICH OHNE FOTO (12.08.2026)
   Das aufbereitete Bildschirmfoto überzeugte nicht – zu niedrig aufgelöst und
   mit eingebrannten Beschriftungen. Bis das Originalfoto vorliegt, trägt ein
   ruhiger dunkler Grund mit weichem Lichtschein und feinem Raster. Das wirkt
   sauber statt behelfsmäßig.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{background:var(--tief);aspect-ratio:auto;min-height:0;
  padding:clamp(104px,13vh,140px) 0 clamp(72px,9vh,104px)}
.hero-bild,.hero-verlauf,.hero-schleier{display:none}
.hero-schein{position:absolute;inset:0;
  background:radial-gradient(58% 62% at 68% 42%, rgba(125,153,136,.30), transparent 68%),
             radial-gradient(40% 44% at 18% 78%, rgba(159,199,174,.10), transparent 70%)}
.hero-raster{position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(234,240,234,.2) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(234,240,234,.2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 62% 44%,#000,transparent 76%)}
.hero h1{font-size:clamp(32px,3.8vw,52px)}
.hero .lead{max-width:52ch}


/* ══════════════════════════════════════════════════════════════════════════
   KOPFBEREICH MIT ECHTEM WASSER (13.08.2026)
   Das Foto liegt über die volle Breite und wird durch den SVG-Filter
   fortlaufend verzerrt – die Oberfläche bewegt sich wie echtes Wasser.
   Beschriftungen und Text liegen außerhalb des Filters und bleiben scharf.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;background:#0F1714;
  padding:clamp(104px,13vh,140px) 0 clamp(80px,10vh,112px);
  min-height:0;aspect-ratio:auto;display:flex;align-items:center}
.hero-grund{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-filter{position:absolute;width:0;height:0}
.hero-schein,.hero-raster{display:none}

.hero-bild{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;display:block;
  filter:url(#wasserBewegung);
  animation:wasserAtem 30s ease-in-out infinite}
@keyframes wasserAtem{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* Verlauf: dunkelt die Textseite links ab und schließt oben und unten weich ab. */
.hero-verlauf{position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(15,23,20,.96) 0%, rgba(15,23,20,.90) 24%,
    rgba(15,23,20,.60) 40%, rgba(15,23,20,.20) 55%, rgba(15,23,20,0) 70%),
    linear-gradient(180deg, rgba(15,23,20,.60) 0%, rgba(15,23,20,0) 20%,
    rgba(15,23,20,0) 76%, rgba(15,23,20,.72) 100%)}
.hero-schleier{position:absolute;top:-25%;bottom:-25%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(200,228,210,.08) 46%,
    rgba(200,228,210,.13) 50%,rgba(200,228,210,.08) 54%,transparent);
  transform:translateX(-130%) rotate(5deg);
  animation:heroSchleier 21s ease-in-out infinite}

/* ── Zentrum und Themenfelder ────────────────────────────────────────── */
.hero-karte{position:absolute;inset:0;z-index:1;pointer-events:none}
.hk-kern{position:absolute;left:63%;top:45%;transform:translate(-50%,-50%);
  width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(20,32,27,.92), rgba(13,22,19,.96));
  border:1px solid rgba(159,199,174,.5);
  box-shadow:0 0 44px -10px rgba(159,199,174,.45), inset 0 0 30px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  animation:kernAtmen 7s ease-in-out infinite}
@keyframes kernAtmen{0%,100%{box-shadow:0 0 44px -10px rgba(159,199,174,.4), inset 0 0 30px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 58px -8px rgba(159,199,174,.6), inset 0 0 30px rgba(0,0,0,.55)}}
.hk-sym{color:var(--glow)}
.hk-sym svg{width:34px;height:34px}
.hk-text{font-size:12.5px;color:var(--hell);letter-spacing:.3px}

.hk-feld{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;
  opacity:0;animation:hkEin .8s var(--e) forwards, hkAtem 8s ease-in-out infinite}
.hk-feld.links{flex-direction:row-reverse}
.hk-kreis{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:var(--glow);background:rgba(14,24,20,.62);border:1px solid rgba(159,199,174,.48);
  box-shadow:0 0 20px -8px rgba(159,199,174,.6)}
.hk-kreis svg{width:19px;height:19px}
.hk-label{font-size:12px;line-height:1.32;color:#EDF3EE;max-width:112px;white-space:normal;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.hk-feld.links .hk-label{text-align:right}
@keyframes hkEin{to{opacity:1}}
@keyframes hkAtem{0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.03)}}

@media(max-width:1200px){
  .hk-label{font-size:11px;max-width:92px}
  .hk-kreis{width:38px;height:38px}
  .hk-kern{width:110px;height:110px}
}
@media(max-width:1000px){
  /* Auf schmalen Geräten bleibt das Wasser als Motiv, die Beschriftungen
     entfallen – zehn Wortgruppen wären dort nicht mehr lesbar. */
  .hero-karte{display:none}
  .hero-verlauf{background:linear-gradient(180deg,
    rgba(15,23,20,.74) 0%, rgba(15,23,20,.88) 48%, rgba(15,23,20,.95) 100%)}
  .hero-text{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-bild{animation:none;filter:none}
  .hero-schleier{display:none}
  .hk-feld{opacity:1;animation:none}
  .hk-kern{animation:none}
}

/* Der Kreis der Themenfelder liegt in der rechten Bildhälfte, damit er die
   Textspalte nicht überlagert; das Zentrum wandert mit. */
.hk-kern{left:70%;top:48%;width:118px;height:118px}
.hk-sym svg{width:30px;height:30px}
.hk-label{max-width:104px;font-size:11.5px}
/* Die Textspalte bekommt eine eigene Ebene über dem Wasser. */
.hero .wrap{position:relative;z-index:2}

/* Die linken Beschriftungen reichten bis in die Überschrift. Der Kreis rückt
   weiter nach rechts, und der Verlauf trennt die Textseite deutlicher ab. */
.hk-kern{left:73%}
.hero-verlauf{background:linear-gradient(90deg,
  rgba(15,23,20,.97) 0%, rgba(15,23,20,.93) 28%,
  rgba(15,23,20,.66) 42%, rgba(15,23,20,.22) 54%, rgba(15,23,20,0) 66%),
  linear-gradient(180deg, rgba(15,23,20,.60) 0%, rgba(15,23,20,0) 18%,
  rgba(15,23,20,0) 80%, rgba(15,23,20,.72) 100%)}

/* ── Kopfzeile und Kopfbereich füllen zusammen den Bildschirm ────────────
   Analog zu Abschnitt 2. Die Kopfzeile liegt fest über der Seite (74 px,
   auf schmalen Geräten 64 px) – ihre Höhe wird deshalb abgezogen, damit
   beide zusammen genau eine Bildschirmhöhe ergeben.
   ───────────────────────────────────────────────────────────────────────── */
.hero{min-height:calc(100svh - 74px);display:flex;align-items:center;
  padding:clamp(56px,7vh,88px) 0 clamp(48px,6vh,72px)}
@media(max-width:820px){
  .hero{min-height:calc(100svh - 64px);padding:56px 0 64px}
}

/* BEFUND 13.08.2026: Der Kopfbereich beginnt bei y = 0, also UNTER der festen
   Kopfzeile – nicht darunter anschließend. Die Höhe um deren 74 px zu kürzen
   ließ unten genau diesen Streifen frei. Richtig ist die volle Bildschirmhöhe
   plus ein Abstand nach oben, damit der Text nicht unter die Kopfzeile rutscht. */
.hero{min-height:100svh;
  padding:calc(74px + clamp(40px,5vh,64px)) 0 clamp(48px,6vh,72px)}
@media(max-width:820px){
  .hero{min-height:100svh;padding:calc(64px + 40px) 0 56px}
}

/* Summe statt Produktauswahl im letzten Schritt des HR Navigators™ */
.wahl-summe{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:rgba(159,199,174,.1);border:1px solid rgba(159,199,174,.4);
  border-radius:13px;padding:16px 20px}
.wahl-summe.leer{grid-template-columns:1fr;background:rgba(234,240,234,.05);
  border-color:var(--linie)}
.ws-zahl{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--glow);line-height:1}
.ws-text{font-size:13px;color:var(--mid);line-height:1.55}
.ws-text strong{color:var(--hell)}
.produkt-reihe{grid-template-columns:1fr!important}

/* Frist-Hinweis unter dem Weg */
.weg-frist{max-width:74ch;margin:34px auto 0;text-align:center;font-size:13.5px;
  line-height:1.65;color:var(--mid);background:rgba(159,199,174,.08);
  border:1px solid rgba(159,199,174,.3);border-radius:10px;padding:12px 18px}
.weg-frist strong{color:var(--glow)}
.wg-was{color:var(--glow)!important;font-weight:600;margin-bottom:5px!important;font-size:13px}

.bericht-vorteil{background:rgba(159,199,174,.09);border-left:2px solid var(--glow);
  border-radius:0 8px 8px 0;padding:11px 16px;font-size:13.5px;line-height:1.65;
  color:var(--mid);margin:14px 0 0}
.bericht-vorteil strong{color:var(--glow)}

.bericht-vorteil{background:rgba(159,199,174,.09);border-left:2px solid var(--glow);
  border-radius:0 8px 8px 0;padding:11px 16px;font-size:13.5px;line-height:1.65;
  color:var(--mid);margin:14px 0 0}
.bericht-vorteil strong{color:var(--glow)}

/* Umfangsleiste im Beispielbericht: macht sichtbar, dass der Auszug EIN Feld
   zeigt und wie der Bericht mit weiteren Feldern wächst. */
.umfang-leiste{margin-top:14px;border-top:1px solid var(--linie);padding-top:12px}
.ul-zeile{display:grid;grid-template-columns:64px 1fr 88px;gap:10px;align-items:center;
  font-size:11.5px;color:var(--mid);padding:3px 0}
.ul-n{color:var(--hell)}
.ul-bar{height:6px;background:rgba(234,240,234,.1);border-radius:3px;overflow:hidden}
.ul-bar i{display:block;height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--forest),var(--glow));
  transform-origin:left;transform:scaleX(var(--v))}
.ul-w{text-align:right;font-variant-numeric:tabular-nums}
.ul-hinweis{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--leise)}