/* Landingpages O.K. Haus Gesundheitsbau — baut auf variables.css (Design-System 09) auf */

/* ---------- Fonts (selbst gehostet, wie Relaunch) ---------- */
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo-v20-latin-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo-v20-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("../assets/fonts/open-sans-v43-latin-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("../assets/fonts/open-sans-v43-latin-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("../assets/fonts/open-sans-v43-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

/* ---------- Basis ---------- */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  font-family: var(--font-sans);
  font-size: 1rem; line-height: var(--lh-body);
  color: var(--neutral-900); background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
.container { max-width: var(--container-max); margin:0 auto; padding:0 var(--gutter); }
.container-text { max-width: 820px; margin:0 auto; padding:0 var(--gutter); }

h1,h2,h3 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing:-.01em; margin:0; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.3rem); font-weight:700; text-wrap:balance; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.15rem); font-weight:700; margin-bottom: var(--space-4); text-wrap:balance; }
h3 { font-size: 1.12rem; font-weight:700; }
p { margin:0 0 var(--space-4); }
.lead { font-size: var(--fs-lead); color: var(--braun-700); }
.small { font-size: var(--fs-small); color: var(--neutral-600); }

.kicker {
  font-family: var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color: #4E6C12; /* statt --gruen-700: Kontrast 5.4 auf hellen Flaechen (Lighthouse) */
  margin-bottom: var(--space-3);
}
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--neutral-100); }
.section-gruen { background: var(--gruen-050); }
.section-dunkel { background: var(--braun-900); color:#F2EFE8; }
.section-dunkel h2, .section-dunkel h3 { color: var(--weiss); }
.section-dunkel .kicker { color:#CDE39B; }
.section-dunkel .small { color:#C8C3B5; }

/* Markenmotiv: Diagonal-Maske */
.maske { border-radius: var(--maske-diagonal-klein); overflow:hidden; }
@media (min-width:1024px){ .maske { border-radius: var(--maske-diagonal); } }
.maske img { width:100%; height:100%; object-fit:cover; }

/* Platzhalter sichtbar (Build-Konvention) */
.platzhalter { background:#FFF3C4; border-radius:3px; padding:0 .3em; font-size:.9em; }

/* ---------- Topbar ---------- */
.topbar { background: var(--weiss); border-bottom:1px solid var(--neutral-200); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:var(--space-4); }
.topbar img { height:34px; width:auto; }
.topbar .quelle {
  font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.04em;
  color:var(--gruen-800); background:var(--gruen-050); padding:.45em 1em; border-radius:0 12px 0 12px;
  text-align:right;
}
@media (max-width:560px){ .topbar .quelle { font-size:.68rem; } .topbar img{ height:28px; } }

/* ---------- Hero ---------- */
.hero { position:relative; background: var(--braun-900); color:#fff; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,42,32,.55) 0%, rgba(46,42,32,.35) 40%, rgba(38,36,31,.88) 100%); }
.hero .container { position:relative; padding-top:clamp(56px,9vw,110px); padding-bottom:clamp(56px,9vw,110px); max-width:900px; }
.hero .kicker { color:#CDE39B; }
.hero h1 { color:#fff; margin-bottom: var(--space-4); }
.hero .lead { color:#EDEAE2; max-width:38em; }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin: var(--space-5) 0; }
.chip {
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  border:1.5px solid rgba(255,255,255,.55); color:#fff; border-radius:0 12px 0 12px; padding:.5em 1em;
}
.chip b { font-weight:700; }
.chips-hell .chip { border-color: var(--gruen-600); color: var(--gruen-800); background: var(--gruen-050); border-width:0; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  padding:.9em 1.7em; border-radius:0 16px 0 16px; text-decoration:none; text-align:center;
  border:2px solid transparent; cursor:pointer; transition:background var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.btn:focus-visible { outline:3px solid var(--gruen-600); outline-offset:3px; }
.btn-primaer { background: var(--gruen-600); color:#fff; }
.btn-primaer:hover { background: var(--gruen-700); transform:translateY(-1px); }
.btn-sekundaer { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-sekundaer:hover { border-color:#fff; }
.btn-sekundaer-dunkel { background:transparent; color:var(--gruen-800); border-color:var(--gruen-600); }
.btn-sekundaer-dunkel:hover { background: var(--gruen-050); }
.btn-gross { font-size:1.1rem; padding:1em 2em; }
.cta-zeile { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.cta-hinweis { font-size:.85rem; color:#C8C3B5; margin-top:var(--space-3); }
.section .cta-hinweis { color: var(--neutral-600); }

/* ---------- Karten & Grids ---------- */
.grid { display:grid; gap:var(--space-4); }
@media (min-width:760px){ .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } }
.karte { background:var(--weiss); border-radius:0 22px 0 22px; padding:var(--space-5); border:1.5px solid var(--neutral-200); border-top:3px solid var(--gruen-600); }
.section-gruen .karte { border-color:var(--gruen-600); border-top-width:3px; }
.karte h3 { margin-bottom:var(--space-2); }
.karte p:last-child { margin-bottom:0; }
.karte .num {
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--gruen-600);
  display:block; margin-bottom:var(--space-2);
}
.karte-gruen { background: var(--gruen-050); }

/* Tick-Liste */
.tick { list-style:none; padding:0; margin:0 0 var(--space-4); }
.tick li { position:relative; padding-left:2em; margin-bottom:var(--space-3); }
.tick li::before {
  content:""; position:absolute; left:0; top:.32em; width:.95em; height:.95em;
  background:var(--gruen-600); border-radius:0 6px 0 6px;
}
.section-dunkel .tick li::before { background:#CDE39B; }

/* Highlight-Box */
.hlbox { background:var(--braun-900); color:#F2EFE8; border-radius:0 26px 0 26px; padding:var(--space-6); }
.hlbox .big { font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; display:block; margin-bottom:var(--space-2); }
.hlbox p:last-child { margin-bottom:0; }

/* Fakten (Leuchtturm) */
.fakten { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.fakt { border:1.5px solid var(--neutral-200); border-radius:0 14px 0 14px; padding:var(--space-3) var(--space-5); background:var(--weiss); }
.fakt b { font-family:var(--font-display); font-size:1.35rem; display:block; color:var(--gruen-800); }
.fakt span { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--neutral-600); }

/* Zweispalter Media/Text */
.media-split { display:grid; gap:var(--space-6); align-items:center; }
@media (min-width:900px){ .media-split { grid-template-columns:1.05fr .95fr; } .media-split.rev > .media { order:2; } }
.media-split .media { aspect-ratio:4/3; }

/* Timeline */
.timeline { border-left:4px solid var(--gruen-600); margin-left:.5rem; padding-left:var(--space-6); }
.timeline .step { position:relative; padding-bottom:var(--space-6); }
.timeline .step:last-child { padding-bottom:0; }
.timeline .step::before { content:""; position:absolute; left:calc(-1 * var(--space-6) - 11px); top:.3em; width:14px; height:14px; border-radius:50%; background:var(--gruen-600); border:3px solid var(--weiss); }
.section-alt .timeline .step::before { border-color: var(--neutral-100); }
.timeline h3 { margin-bottom:var(--space-1); }
.timeline .aufwand { font-size:.82rem; font-weight:700; color:var(--gruen-800); background:var(--gruen-050); display:inline-block; padding:.2em .8em; border-radius:0 10px 0 10px; margin-bottom:var(--space-2); }

/* FAQ */
.faq details { border-bottom:1px solid var(--neutral-200); }
.faq summary {
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; padding:var(--space-4) 2.2em var(--space-4) 0;
  cursor:pointer; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:.2em; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--gruen-600); font-weight:600; transition:transform var(--dur-ui) var(--ease-out); }
.faq details[open] summary::after { content:"–"; }
.faq .faq-body { padding:0 0 var(--space-4); max-width:60em; }
.faq .faq-body p:last-child { margin-bottom:0; }

/* Leitfaden-Modul */
.leitfaden { display:grid; gap:var(--space-6); align-items:center; }
@media (min-width:900px){ .leitfaden { grid-template-columns:minmax(240px,340px) 1fr; } }
.leitfaden .cover { box-shadow:var(--shadow-card); border-radius:0 18px 0 18px; overflow:hidden; transform:rotate(-1.2deg); }
.leitfaden .cover img { width:100%; height:auto; }

/* Code-Modul */
.code-modul { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.code-wert {
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.06em;
  background:var(--weiss); border:2px dashed var(--gruen-600); color:var(--gruen-800);
  padding:.6em 1.2em; border-radius:0 12px 0 12px;
}
.btn-copy { font-size:.9rem; padding:.7em 1.3em; }

/* ---------- Formular ---------- */
.formkarte { background:var(--weiss); color:var(--neutral-900); border-radius:0 26px 0 26px; box-shadow:var(--shadow-card); padding:clamp(20px,4vw,40px); }
.formkarte a { color:var(--gruen-800); }
.formfeld { margin-bottom:var(--space-4); }
.formfeld label { display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; margin-bottom:var(--space-1); }
.formfeld label .opt { font-weight:400; color:var(--neutral-600); font-size:.8rem; }
.formfeld input[type=text], .formfeld input[type=email], .formfeld input[type=tel], .formfeld select, .formfeld textarea {
  width:100%; font:inherit; padding:.75em .9em; border:1.5px solid var(--neutral-200); border-radius:var(--radius-s);
  background:var(--weiss); color:var(--neutral-900);
}
.formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus { outline:2px solid var(--gruen-600); outline-offset:1px; border-color:var(--gruen-600); }
.formfeld .fehler-text { display:none; color:var(--fehler); font-size:.82rem; margin-top:.3em; }
.formfeld.hat-fehler input, .formfeld.hat-fehler select { border-color:var(--fehler); }
.formfeld.hat-fehler .fehler-text { display:block; }
.form-grid { display:grid; gap:0 var(--space-4); }
@media (min-width:640px){ .form-grid { grid-template-columns:1fr 1fr; } .form-grid .voll { grid-column:1 / -1; } }
.intent { display:grid; gap:var(--space-2); margin-bottom:var(--space-4); }
@media (min-width:640px){ .intent { grid-template-columns:repeat(var(--intent-cols,3),1fr); } }
.intent label {
  border:1.5px solid var(--neutral-200); border-radius:0 12px 0 12px; padding:var(--space-3);
  display:flex; gap:.6em; align-items:flex-start; cursor:pointer; font-size:.92rem; font-weight:600;
  font-family:var(--font-display); background:var(--weiss);
}
.intent input { accent-color: var(--gruen-600); margin-top:.2em; }
.intent label:has(input:checked) { border-color:var(--gruen-600); background:var(--gruen-050); }
.check-zeile { display:flex; gap:.6em; align-items:flex-start; font-size:.92rem; margin-bottom:var(--space-4); }
.check-zeile input { accent-color:var(--gruen-600); margin-top:.25em; flex:none; }
.check-zeile.fastlane { background:var(--gruen-050); padding:var(--space-3); border-radius:0 12px 0 12px; font-weight:600; font-family:var(--font-display); }
.datenschutz-note { font-size:.8rem; color:var(--neutral-600); margin-top:var(--space-3); }
.form-erfolg { display:none; text-align:center; padding:var(--space-6) var(--space-4); }
.form-erfolg .haken { width:56px; height:56px; margin:0 auto var(--space-4); background:var(--gruen-600); border-radius:0 18px 0 18px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem; font-family:var(--font-display); font-weight:700; }
.formkarte.gesendet form { display:none; }
.formkarte.gesendet .form-erfolg { display:block; }

/* Siegel */
.siegelrow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); }
.siegelrow img { height:46px; width:auto; }
@media (max-width:560px){ .siegelrow img { height:36px; } .siegelrow{ gap:var(--space-4);} }

/* Pfad-Weiche (LP3) */
.weiche { display:grid; gap:var(--space-4); }
@media (min-width:760px){ .weiche { grid-template-columns:1fr 1fr; } }
.weiche a { text-decoration:none; color:inherit; }
.weiche .karte { border:2px solid var(--neutral-200); transition:border-color var(--dur-ui) var(--ease-out); height:100%; }
.weiche a:hover .karte, .weiche a:focus-visible .karte { border-color:var(--gruen-600); }
.weiche .pfeil { font-family:var(--font-display); font-weight:700; color:var(--gruen-700); }

/* Sticky Mobile CTA */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--weiss);
  border-top:1px solid var(--neutral-200); padding:10px var(--gutter); box-shadow:0 -4px 16px rgba(38,36,31,.12);
  display:flex; gap:var(--space-3); transform:translateY(110%); transition:transform .3s var(--ease-out); }
.sticky-cta.sichtbar { transform:none; }
.sticky-cta .btn { flex:1; font-size:.95rem; padding:.8em 1em; }
@media (min-width:900px){ .sticky-cta { display:none; } }
body.hat-sticky { padding-bottom:0; }
@media (max-width:899px){ body.hat-sticky { padding-bottom:70px; } }
@media (prefers-reduced-motion: reduce){ .sticky-cta { transition:none; } }

/* Footer */
.footer { background:var(--braun-900); color:#C8C3B5; padding:var(--space-7) 0; font-size:.88rem; }
.footer .container { display:flex; flex-wrap:wrap; gap:var(--space-5); justify-content:space-between; align-items:center; }
.footer img { height:30px; }
.footer a { color:#EDEAE2; }
.footer .legal { display:flex; gap:var(--space-4); flex-wrap:wrap; }

/* Reveal (dezent, nach 10-INTERACTION-SPEC-Logik) */
.reveal { opacity:0; transform:translateY(14px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.sichtbar { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ---------- Bauzeit-Rechner (Kunden-Wissensbasis: Rechenrahmen 1) ---------- */
.rechner { display:grid; gap:var(--space-4); border:1.5px solid var(--neutral-200); border-top:3px solid var(--gruen-600); border-radius:0 22px 0 22px; padding:var(--space-5); background:var(--neutral-100); }
@media (min-width:760px){ .rechner { grid-template-columns:1fr 1fr; align-items:center; } }
.rechner-felder { display:grid; gap:var(--space-3); }
.rechner-felder label { font-family:var(--font-display); font-weight:600; font-size:.9rem; display:grid; gap:.3em; }
.rechner-felder input { font:inherit; font-size:1.05rem; padding:.6em .8em; border:1.5px solid var(--neutral-200); border-radius:var(--radius-s); background:var(--weiss); width:100%; }
.rechner-felder input:focus { outline:2px solid var(--gruen-600); border-color:var(--gruen-600); }
.rechner-ergebnis { display:grid; gap:.3em; background:var(--weiss); border-radius:0 16px 0 16px; padding:var(--space-4) var(--space-5); border:1.5px solid var(--gruen-600); }
.rechner-label { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--neutral-600); font-weight:700; }
.rechner-wert { font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem, 4vw, 2.4rem); color:var(--gruen-800); font-variant-numeric:tabular-nums; }
.form-erfolg [data-download] { margin-top:var(--space-2); }

/* =====================================================================
   v3 Ordinations-LP (2026-09-09): heller Split-Hero, Beweis-Leiste, Konvergenz,
   Referenz-Bento, horizontale Ablauf-Achse, Fixpreis+Rechner, Effekte nach 10-INTERACTION-SPEC.
   Nur additiv (LP1/LP3 unveraendert); Reduced-Motion-Varianten am Ende. */

/* Rhythmus: luftiger (Density 3) */
body.v3 .section { padding: clamp(56px, 8vw, 104px) 0; }
body.v3 h2 { max-width: 22em; }
body.v3 .lead { max-width: 36em; }
body.v3 .tick li b, body.v3 b { font-weight:700; }

/* Topbar mit Telefon + CTA (Desktop) */
.topbar-v3 { position: sticky; top:0; z-index:40; box-shadow: var(--shadow-header); }
.topbar-v3 .container { min-height:68px; }
.topbar-aktion { display:none; align-items:center; gap:var(--space-4); }
.topbar-tel { font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--neutral-900); text-decoration:none; white-space:nowrap; }
.topbar-tel:hover { color:var(--gruen-800); }
.btn-klein { font-size:.9rem; padding:.7em 1.15em; white-space:nowrap; }
@media (min-width:1000px){ .topbar-aktion { display:flex; } .topbar-v3 .quelle { margin-left:auto; margin-right:var(--space-3); } }

/* Buttons: Pfeil-Shift (Spec 9) + Druckgefuehl */
.btn-pfeil::after { content:"→"; display:inline-block; margin-left:.5em; transition: transform var(--dur-ui) var(--ease-out); }
.btn-pfeil:hover::after, .btn-pfeil:focus-visible::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.99); }

/* Hero: hell, asymmetrisch, Bild in Diagonal-Maske haengt in die Beweis-Leiste (Design-System v9) */
.hero.hero-split { background: var(--weiss); color: var(--neutral-900); overflow: visible; }
.hero.hero-split .hero-grid { display:grid; gap:var(--space-6); padding-top: clamp(28px, 5vw, 64px); padding-bottom: var(--space-6); align-items:center; max-width: var(--container-max); }
.hero-split .hook { font-family:var(--font-display); font-weight:600; font-size: clamp(1rem, .92rem + .5vw, 1.2rem); color: var(--gruen-700); margin-bottom: var(--space-4); }
.hero-split h1 { color: var(--neutral-900); font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.5rem); letter-spacing:-.02em; margin-bottom: var(--space-4); }
.hero-split .lead { color: var(--braun-700); max-width: 30em; margin-bottom: var(--space-5); }
.hero-bild { position:relative; margin:0; aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); }
.hero-bild img { width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){
  .hero.hero-split .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }
  .hero-text { padding-bottom: calc(64px + var(--space-6)); }
  .hero-bild { aspect-ratio: 1 / 1; margin-bottom: -64px; z-index: 2; align-self: end; }
}
@media (max-width:520px){
  .hero-split .cta-zeile .btn { width:100%; font-size:1rem; padding:.9em 1.2em; }
  .hero-split .btn-pfeil::after { display:none; }
}

/* Beweis-Leiste */
.beweise { background: var(--neutral-100); padding: var(--space-6) 0; border-bottom: 1px solid var(--neutral-200); }
@media (min-width:900px){ .beweise { padding-top: calc(64px + var(--space-6)); } }
.zahlen { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
.zahlen li { display:grid; gap:.35em; align-content:start; padding-left: var(--space-4); border-left: 3px solid var(--gruen-600); }
.zahlen b { font-family:var(--font-display); font-weight:700; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height:1; color: var(--gruen-800); font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.zahlen li > span { font-size:.92rem; color: var(--neutral-600); max-width: 17em; line-height:1.4; }
@media (min-width:900px){ .zahlen { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

/* Schnittstellen: Konvergenz (viele Beteiligte -> ein Verantwortlicher) */
.schnittstellen-kopf { max-width: 44em; margin-bottom: var(--space-6); }
.konvergenz { display:grid; gap: var(--space-5); align-items:center; }
@media (min-width:900px){ .konvergenz { grid-template-columns: 1.15fr 88px 1fr; gap: var(--space-5); } }
.gewerke { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: var(--space-2); }
.gewerke li { font-family:var(--font-display); font-weight:600; font-size:.9rem; padding:.55em 1em; border:1.5px solid var(--neutral-200); border-radius: 0 12px 0 12px; background: var(--weiss); color: var(--braun-700); }
.konvergenz-pfeil { display:none; }
@media (min-width:900px){
  .konvergenz-pfeil { display:block; height:3px; background: var(--gruen-600); position:relative; transform-origin:left; }
  .konvergenz-pfeil::after { content:""; position:absolute; right:-3px; top:-6px; border: 7.5px solid transparent; border-left: 10px solid var(--gruen-600); border-right:0; }
}
.einer { background: var(--gruen-050); border: 1.5px solid var(--gruen-600); border-radius: 0 28px 0 28px; padding: var(--space-5) var(--space-6); }
.einer img { width:96px; height:auto; margin-bottom: var(--space-3); }
.einer-titel { font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1.25; margin-bottom: var(--space-2); color: var(--neutral-900); }
.einer p:last-child { margin:0; color: var(--braun-700); }
html.js .konvergenz .gewerke li { opacity:0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .konvergenz.sichtbar .gewerke li { opacity:1; transform:none; }
html.js .konvergenz .konvergenz-pfeil { transform: scaleX(0); transition: transform .5s var(--ease-out) .7s; }
html.js .konvergenz.sichtbar .konvergenz-pfeil { transform: scaleX(1); }
html.js .konvergenz .einer { opacity:0; transform: translateY(10px); transition: opacity .5s var(--ease-out) 1.1s, transform .5s var(--ease-out) 1.1s; }
html.js .konvergenz.sichtbar .einer { opacity:1; transform:none; }
@media (max-width:899px){ html.js .konvergenz .einer { transition-delay: .6s; } }

/* Referenz-Bento */
.bento { display:grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width:900px){
  .bento { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .bento-a { grid-column: 1 / 3; } .bento-b { grid-column: 3; } .bento-c { grid-column: 1; } .bento-d { grid-column: 2 / 4; }
}
.bento-bild { margin:0; display:grid; gap: var(--space-3); align-content:start; }
.bento-bild .bild-rahmen { border-radius: 0 28px 0 28px; overflow:hidden; aspect-ratio: 16 / 9; background: var(--neutral-200); }
.bento-bild img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease-out); }
.bento-bild:hover img { transform: scale(1.03); }
.bento-bild figcaption { font-size:.92rem; color: var(--neutral-600); line-height:1.45; }
.bento-bild figcaption b { display:block; font-family:var(--font-display); font-weight:700; color: var(--neutral-900); font-size:1.05rem; margin-bottom:.15em; }
.bento-text { border-radius: 0 28px 0 28px; padding: var(--space-5) var(--space-6); background: var(--gruen-050); display:grid; align-content:center; gap: var(--space-2); }
.bento-text.dunkel { background: var(--braun-900); color:#F2EFE8; }
.bento-text.dunkel h3 { color:#fff; }
.bento-zahl { font-family:var(--font-display); font-weight:700; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height:1; color: var(--gruen-700); letter-spacing:-.02em; }
.bento-text.dunkel .bento-zahl { color:#CDE39B; }
.bento-text p { margin:0; }
.bento-text.dunkel p { color:#DDD8CC; }
.weitere { margin-top: var(--space-5); max-width: 60em; }

/* Ablauf: fuenf Schritte mit Fortschrittslinie (Spec 8), vertikal mobil, horizontal ab 900px */
ol.schritte { list-style:none; margin: var(--space-6) 0 0; padding: 0 0 0 52px; display:grid; gap: var(--space-5); position:relative; counter-reset: schritt; }
.schritte li { position:relative; counter-increment: schritt; }
.schritte .marke { position:absolute; left:-52px; top:.05em; width:34px; height:34px; border-radius: 0 11px 0 11px; background: var(--neutral-200); color: var(--neutral-900); font-family:var(--font-display); font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; transition: background .35s var(--ease-out), color .35s var(--ease-out); }
.schritte .marke::before { content: counter(schritt); }
.schritte li.aktiv .marke, html:not(.js) .schritte .marke { background: var(--gruen-600); color:#fff; }
.schritte h3 { margin-bottom:.25em; }
.schritte .aufwand { display:inline-block; font-size:.8rem; font-weight:700; color: var(--gruen-800); background: var(--gruen-050); padding:.2em .8em; border-radius: 0 10px 0 10px; margin-bottom: var(--space-2); font-family: var(--font-display); }
.schritte p:last-child { margin:0; color: var(--braun-700); font-size:.95rem; }
.schritte::before { content:""; position:absolute; left:16px; top:10px; bottom:10px; width:2px; background: var(--neutral-200); }
.schritte::after { content:""; position:absolute; left:16px; top:10px; width:2px; height: calc(100% - 20px); background: var(--gruen-600); transform: scaleY(var(--fortschritt, 0)); transform-origin: top; transition: transform .7s var(--ease-out); }
html:not(.js) .schritte { --fortschritt: 1; }
@media (min-width:900px){
  ol.schritte { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); padding: 0; margin-top: var(--space-7); }
  .schritte li { display:grid; align-content:start; }
  .schritte .marke { position:relative; left:auto; top:auto; z-index:1; margin-bottom: var(--space-4); }
  .schritte::before { left:0; right:0; top:16px; bottom:auto; width:auto; height:2px; }
  .schritte::after { left:0; top:16px; height:2px; width:100%; transform: scaleX(var(--fortschritt, 0)); transform-origin: left; }
}

/* Fixpreis + Rechner */
.fixpreis-grid { display:grid; gap: var(--space-6); align-items:start; }
@media (min-width:1000px){ .fixpreis-grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); } }
.fixpreis .lead { color: var(--gruen-800); font-weight:600; }
.callout { display:grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items:start; background: var(--weiss); border: 1.5px solid var(--gruen-600); border-radius: 0 22px 0 22px; padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.callout img { width:64px; height:auto; margin-top:.2em; }
.callout p { margin:0; font-size:.95rem; }
.callout a { color: var(--gruen-800); font-weight:600; }
@media (max-width:480px){ .callout { grid-template-columns: 1fr; } .callout img { width:52px; } }
.rechner-wrap { background: var(--weiss); border-radius: 0 28px 0 28px; padding: var(--space-5); box-shadow: var(--shadow-card); }
.rechner-wrap h3 { margin-bottom: var(--space-2); }
.rechner-wrap > p { color: var(--braun-700); font-size:.95rem; }
.rechner-wrap .rechner { background: var(--neutral-100); border-top-width: 1.5px; border-color: var(--neutral-200); padding: var(--space-4); grid-template-columns: 1fr; }
.rechner-wrap .rechner-felder { grid-template-columns: 1fr 1fr; }
.rechner-wrap .rechner-wert { white-space: nowrap; font-size: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width:420px){ .rechner-wrap .rechner-felder { grid-template-columns: 1fr; } }
/* Bento: Faktenzeile am Kachelfuss */
.bento-fakten { display:flex; flex-wrap:wrap; gap: var(--space-4) var(--space-5); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(38,36,31,.12); }
.bento-text.dunkel .bento-fakten { border-top-color: rgba(255,255,255,.18); }
.bento-fakten span { display:grid; font-size:.78rem; color: var(--neutral-600); letter-spacing:.03em; }
.bento-fakten b { font-family: var(--font-display); font-size:1.15rem; color: var(--neutral-900); letter-spacing:0; }
.bento-text.dunkel .bento-fakten span { color:#C8C3B5; }
.bento-text.dunkel .bento-fakten b { color:#fff; }
.rechner-wert.puls { animation: puls .35s var(--ease-out); }
@keyframes puls { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Holz + Ehrlichkeit */
.holz .tick li { margin-bottom: var(--space-3); }
.ehrlich { border-left: 3px solid var(--gruen-600); background: var(--neutral-100); padding: var(--space-3) var(--space-4); border-radius: 0 14px 0 14px; margin-top: var(--space-4); }

/* FAQ v3: Chevron statt Plus, Inhalt blendet ein (Spec 5) */
.faq-v3 summary::after { content:""; width:.55em; height:.55em; border-right: 2px solid var(--gruen-700); border-bottom: 2px solid var(--gruen-700); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out); }
.faq-v3 details[open] summary::after { content:""; transform: translateY(-30%) rotate(225deg); }
.faq-v3 details[open] .faq-body { animation: faqIn .25s var(--ease-out); }
@keyframes faqIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }

/* Ueber uns kompakt */
.ueber-grid { display:grid; gap: var(--space-6); align-items:center; }
.ueber-bild { margin:0; aspect-ratio: 3 / 2; }
.ueber-bild img { width:100%; height:100%; object-fit:cover; }
.ueber-grid .siegelrow { padding-top: var(--space-5); border-top: 1px solid var(--neutral-200); }
@media (min-width:1000px){ .ueber-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); } .ueber-grid .siegelrow { grid-column: 1 / -1; justify-content:space-between; } }

/* Hero-Einstieg: gestaffelt (Hierarchie: Hook -> Versprechen -> Beleg -> Handlung) */
html.js .hero-split .hero-text > * { opacity:0; transform: translateY(12px); animation: heroIn .6s var(--ease-out) forwards; }
html.js .hero-split .hero-text > :nth-child(1) { animation-delay: .05s; }
html.js .hero-split .hero-text > :nth-child(2) { animation-delay: .15s; }
html.js .hero-split .hero-text > :nth-child(3) { animation-delay: .25s; }
html.js .hero-split .hero-text > :nth-child(4) { animation-delay: .35s; }
html.js .hero-split .hero-bild { opacity:0; transform: translateY(16px); animation: heroIn .8s var(--ease-out) .2s forwards; }
@keyframes heroIn { to { opacity:1; transform:none; } }

/* Reduced Motion: alles steht sofort */
@media (prefers-reduced-motion: reduce){
  html.js .hero-split .hero-text > *, html.js .hero-split .hero-bild { animation:none; opacity:1; transform:none; }
  html.js .konvergenz .gewerke li, html.js .konvergenz .konvergenz-pfeil, html.js .konvergenz .einer { opacity:1; transform:none; transition:none; }
  .schritte::after, .schritte .marke { transition:none; }
  .schritte { --fortschritt: 1; }
  .bento-bild img, .btn-pfeil::after { transition:none; }
  .rechner-wert.puls, .faq-v3 details[open] .faq-body { animation:none; }
}

/* =====================================================================
   v4 Verkaufspsychologie (2026-09-09): Hero-Microcopy, Voice-of-Customer,
   Modellvergleich, Angebots-Modul, kompaktes Leitfaden-Modul, Formular mit
   Optional-Gruppe, Ansprechpartner. Nur additiv. */
.cta-micro { font-size:.88rem; color: var(--neutral-600); margin-top: var(--space-3); max-width: 36em; line-height:1.5; }
.cta-micro b { color: var(--gruen-800); }
.link-sekundaer { display:inline-block; margin-top: var(--space-2); font-family: var(--font-display); font-weight:600; color: var(--gruen-800); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-sekundaer:hover, .link-sekundaer:focus-visible { color: var(--gruen-700); }
.hero-split .cta-zeile { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* Problem: Voice of Customer + Konsequenzen */
.zitate { list-style:none; margin: var(--space-5) 0 var(--space-2); padding:0; display:grid; gap: var(--space-3); }
@media (min-width:760px){ .zitate { grid-template-columns: 1fr 1fr; } }
.zitate li { font-family: var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.4; color: var(--neutral-900); background: var(--neutral-100); border-left: 3px solid var(--gruen-600); border-radius: 0 16px 0 16px; padding: var(--space-4) var(--space-5); }
.zitate li::before { content: "\201E"; } .zitate li::after { content: "\201C"; }
.zitate-quelle { font-size:.85rem; color: var(--neutral-600); margin-bottom: var(--space-6); }
.folgen { list-style:none; margin: var(--space-4) 0 0; padding:0; display:grid; gap: var(--space-3); }
@media (min-width:760px){ .folgen { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); } }
.folgen li { position:relative; padding-left: 1.6em; color: var(--braun-700); }
.folgen li::before { content:""; position:absolute; left:0; top:.45em; width:.75em; height:.75em; background: var(--braun-900); border-radius: 0 5px 0 5px; }
.folgen li b { color: var(--neutral-900); }
.problem-grid { display:grid; gap: var(--space-6); }
@media (min-width:1000px){ .problem-grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items:start; } }
.konvergenz-titel { margin-top: var(--space-7); }

/* Loesung: Folgen + Modellvergleich */
.loesung-grid { display:grid; gap: var(--space-6); }
@media (min-width:1000px){ .loesung-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items:start; } }
.vergleich-wrap { overflow-x:auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-6); }
.vergleich { width:100%; min-width: 620px; border-collapse: separate; border-spacing:0; font-size:.93rem; }
.vergleich th, .vergleich td { text-align:left; padding: .75em .9em; border-bottom: 1px solid var(--neutral-200); vertical-align: top; }
.vergleich th { font-family: var(--font-display); font-weight:700; font-size:.88rem; }
.vergleich thead th { border-bottom: 2px solid var(--neutral-900); }
.vergleich thead th.ok { background: var(--gruen-600); color:#fff; border-bottom-color: var(--gruen-600); border-radius: 0 14px 0 0; }
.vergleich td.ok { background: var(--gruen-050); font-weight:600; color: var(--gruen-800); }
.vergleich tbody tr:last-child td { border-bottom:0; }
.vergleich tbody tr:last-child td.ok { border-radius: 0 0 0 14px; }
.vergleich-note { font-size:.8rem; color: var(--neutral-600); margin-top: var(--space-2); }

/* Beweise: Ergaenzungen */
.beweis-satz { margin-top: var(--space-5); max-width: 60em; font-size:1.05rem; color: var(--neutral-900); }
.beweis-satz b { font-family: var(--font-display); }

/* Angebot */
.angebot-grid { display:grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width:900px){ .angebot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.angebot-karte { background: var(--weiss); border-radius: 0 28px 0 28px; padding: var(--space-6); box-shadow: var(--shadow-card); display:grid; align-content:start; gap: var(--space-3); }
.angebot-karte.vorteil { background: var(--braun-900); color:#F2EFE8; }
.angebot-karte.vorteil h3 { color:#fff; }
.angebot-label { font-family: var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform: uppercase; color: var(--gruen-700); }
.angebot-karte.vorteil .angebot-label { color:#CDE39B; }
.angebot-karte h3 { font-size:1.3rem; line-height:1.25; }
.angebot-karte .tick { margin:0; }
.angebot-karte .tick li { margin-bottom: var(--space-2); }
.angebot-karte.vorteil .tick li::before { background:#CDE39B; }
.angebot-karte p { margin:0; }
.angebot-karte.vorteil p { color:#DDD8CC; }
.angebot-karte.vorteil p b { color:#fff; }
.preis-zeile { display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-4); align-items: baseline; }
.preis-zeile .alt { text-decoration: line-through; color:#B8B2A3; }
.preis-zeile .neu { font-family: var(--font-display); font-weight:700; font-size:1.4rem; color:#CDE39B; }
.angebot-karte.vorteil .code-wert { background: transparent; color:#fff; border-color:#CDE39B; }
.angebot-karte.vorteil .btn-copy { background:#fff; color: var(--gruen-800); }
.angebot-karte.vorteil .btn-copy:hover { background:#F2F7E6; }
.angebot-karte.vorteil .platzhalter { color: var(--neutral-900); }
.angebot-cta { margin-top: var(--space-6); display:grid; gap: var(--space-2); justify-items:start; }
.sektion-cta { margin-top: var(--space-6); display:grid; gap: var(--space-2); justify-items:start; }
.sektion-cta .cta-micro { margin:0; }

/* Leitfaden kompakt */
.leitfaden-kompakt { display:grid; gap: var(--space-5); align-items:center; }
@media (min-width:760px){ .leitfaden-kompakt { grid-template-columns: 128px 1fr auto; gap: var(--space-6); } }
.leitfaden-kompakt .cover { width:128px; box-shadow: var(--shadow-card); border-radius: 0 14px 0 14px; overflow:hidden; transform: rotate(-1.2deg); }
.leitfaden-kompakt .cover img { width:100%; height:auto; }
.leitfaden-kompakt h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); margin-bottom: var(--space-2); }
.leitfaden-kompakt p { margin:0; color: var(--braun-700); }

/* Formular v4 */
.intent label { align-items: flex-start; }
.intent-text { display:grid; gap:.15em; }
.intent-hinweis { font-size:.8rem; font-weight:400; color: var(--neutral-600); font-family: var(--font-sans); line-height:1.35; }
.intent-empfohlen { font-size:.72rem; letter-spacing:.06em; text-transform: uppercase; color: var(--gruen-700); font-family: var(--font-display); font-weight:700; }
.optional-gruppe { border: 1.5px dashed var(--neutral-200); border-radius: 0 16px 0 16px; padding: 0 var(--space-4); margin-bottom: var(--space-4); }
.optional-gruppe summary { font-family: var(--font-display); font-weight:600; font-size:.95rem; padding: var(--space-3) 2em var(--space-3) 0; cursor:pointer; list-style:none; position:relative; }
.optional-gruppe summary span { display:block; font-family: var(--font-sans); font-weight:400; font-size:.82rem; color: var(--neutral-600); }
.optional-gruppe summary::-webkit-details-marker { display:none; }
.optional-gruppe summary::after { content:""; position:absolute; right:.3em; top:1.4em; width:.55em; height:.55em; border-right:2px solid var(--gruen-700); border-bottom:2px solid var(--gruen-700); transform: rotate(45deg); transition: transform .25s var(--ease-out); }
.optional-gruppe[open] summary::after { transform: rotate(225deg); }
.optional-gruppe .form-grid { padding-bottom: var(--space-2); }
.form-alternativ { display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-4); align-items:center; font-size:.92rem; color: var(--neutral-600); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--neutral-200); }
.form-alternativ a { color: var(--gruen-800); font-weight:600; }
.form-alternativ .code-wert { font-size:.85rem; padding:.2em .6em; }
.form-erfolg .naechste { text-align:left; max-width: 34em; margin: var(--space-4) auto 0; }
.form-erfolg .naechste li { margin-bottom: var(--space-2); }

/* Ansprechpartner (dunkle Sektion) */
.ansprechpartner { display:grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width:640px){ .ansprechpartner { grid-template-columns: 1fr 1fr; } }
.ap { display:grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items:center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 0 18px 0 18px; padding: var(--space-4); }
.ap img { width:72px; height:72px; object-fit:cover; border-radius: 0 20px 0 20px; }
.ap b { display:block; font-family: var(--font-display); color:#fff; font-size:1.02rem; }
.ap span { font-size:.85rem; color:#C8C3B5; display:block; }
.ap a { color:#fff; font-weight:600; text-decoration:none; }
.ap a:hover { text-decoration: underline; }
.ansprechpartner-note { font-size:.85rem; color:#C8C3B5; margin-top: var(--space-3); }
/* Platzhalter im dunklen Angebots-Modul lesbar halten (bis echte Werte gesetzt sind) */
.angebot-karte.vorteil .code-wert.platzhalter, .angebot-karte.vorteil .preis-zeile .platzhalter { background:#FFF3C4; color: var(--neutral-900); }
/* Grid-Kinder duerfen schrumpfen, sonst sprengt die Vergleichstabelle mobil das Raster */
.loesung-grid > *, .fixpreis-grid > *, .angebot-grid > * { min-width: 0; }

/* =====================================================================
   v5 nach externem Review (2026-09-09): Kontrast, Ankerabstand, Projektkarten,
   Risiken, Pruefragen, Leistungsabgrenzung, Formular je Anliegen, Sticky mit einem Button. */
.btn-primaer { background: var(--gruen-700); }                 /* Weiss auf #5C7F17 = 4,66:1 (WCAG AA) */
.btn-primaer:hover, .btn-primaer:focus-visible { background: var(--gruen-800); }
section[id], .beweise, #formular { scroll-margin-top: 84px; }
.sticky-cta { justify-content: center; }
.sticky-cta .btn { flex: 1; max-width: 480px; }
@media (min-width:900px){ .hero.hero-split .hero-grid { align-items: start; } .hero-bild { aspect-ratio: 4 / 5; align-self: start; margin-top: var(--space-2); } }
@media (max-width:899px){ .hero-bild { aspect-ratio: 16 / 10; } }

/* Projektkarten: Foto, Name, Kennzahlen desselben Projekts */
.projekte { display:grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width:900px){ .projekte { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.projekt { border-radius: 0 28px 0 28px; overflow:hidden; background: var(--weiss); display:grid; align-content:start; box-shadow: var(--shadow-card); }
.projekt-foto .bild-rahmen { aspect-ratio: 16 / 9; background: var(--neutral-200); }
.projekt-foto .bild-rahmen img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease-out); }
.projekt-foto:hover .bild-rahmen img { transform: scale(1.03); }
.projekt-text, .projekt-text-only { padding: var(--space-5) var(--space-6); display:grid; gap: var(--space-2); align-content:start; }
.projekt h3 { font-size:1.2rem; }
.projekt p { margin:0; color: var(--braun-700); }
.projekt-text-only { background: var(--gruen-050); }
.projekt-text-only.dunkel { background: var(--braun-900); color:#F2EFE8; }
.projekt-text-only.dunkel h3 { color:#fff; }
.projekt-text-only.dunkel p { color:#DDD8CC; }
.projekt-text-only.dunkel .bento-zahl { color:#CDE39B; }
.projekt-text-only.dunkel .bento-fakten { border-top-color: rgba(255,255,255,.18); }
.projekt-text-only.dunkel .bento-fakten span { color:#C8C3B5; }
.projekt-text-only.dunkel .bento-fakten b { color:#fff; }
.projekt .zitat { border-left: 3px solid var(--gruen-600); padding-left: var(--space-3); font-style: normal; color: var(--neutral-900); }
.projekt .zitat cite { display:block; font-style: normal; font-size:.85rem; color: var(--neutral-600); margin-top:.3em; }

/* Drei Risiken mit Antwort */
.risiken { list-style:none; margin: var(--space-6) 0 0; padding:0; display:grid; gap: var(--space-5); }
@media (min-width:900px){ .risiken { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.risiken li { border-left: 3px solid var(--gruen-600); padding-left: var(--space-4); display:grid; gap: var(--space-2); align-content:start; }
.risiken h3 { font-size:1.15rem; }
.risiken p { margin:0; }
.risiken .risiko { color: var(--braun-700); }
.risiken .antwort b { color: var(--gruen-800); }
.risiken + .konvergenz { margin-top: var(--space-7); }

/* Pruefragen statt Vergleichstabelle */
.pruef { margin:0; display:grid; gap: var(--space-3); }
.pruef > div { background: var(--weiss); border-radius: 0 16px 0 16px; padding: var(--space-4) var(--space-5); }
.pruef dt { font-family: var(--font-display); font-weight:700; margin-bottom:.3em; }
.pruef dd { margin:0; color: var(--braun-700); }
.pruef dd b { color: var(--gruen-800); }

/* Leistungsabgrenzung Fixpreis */
.abgrenzung { background: var(--weiss); border-radius: 0 22px 0 22px; padding: var(--space-5); margin: var(--space-5) 0; }
.abgrenzung h3 { margin-bottom: var(--space-3); }
.abgrenzung-grid { display:grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width:640px){ .abgrenzung-grid { grid-template-columns: repeat(3, 1fr); } }
.abgrenzung-grid > div { border-top: 3px solid var(--gruen-600); padding-top: var(--space-2); }
.abgrenzung-grid b { display:block; font-family: var(--font-display); margin-bottom:.3em; }
.abgrenzung-grid p { margin:0; font-size:.92rem; }
.abgrenzung .small { margin:0 0 var(--space-2); }

/* Ablauf: ab wann Kosten entstehen */
.kosten-tag { display:inline-block; font-size:.78rem; font-weight:600; color: var(--neutral-600); border:1px solid var(--neutral-200); padding:.15em .7em; border-radius: 0 10px 0 10px; margin: 0 0 var(--space-2) .3em; font-family: var(--font-display); }

/* Ansprechpartner in heller Karte */
.ansprechpartner.hell { margin-top: var(--space-3); grid-template-columns: 1fr; }
.ansprechpartner.hell .ap { background: var(--neutral-100); border-color: var(--neutral-200); }
.ansprechpartner.hell .ap b { color: var(--neutral-900); }
.ansprechpartner.hell .ap span { color: var(--neutral-600); }

/* Formular je Anliegen */
.form-fehler { display:block; color: var(--fehler); font-size:.9rem; margin: var(--space-2) 0 0; }
.form-erfolg [data-erfolg] p { text-align:left; }
.form-erfolg [data-erfolg] h3 { margin-bottom: var(--space-2); }
/* Buttons in der Formularkarte behalten weisse Schrift (.formkarte a faerbt sonst gruen) */
.formkarte .btn-primaer, .formkarte .btn-primaer:hover { color:#fff; }
.form-erfolg:focus { outline: none; }
/* Mobil kompakter: Abstaende und Kartenraender (Seitenlaenge) */
@media (max-width:899px){
  body.v3 .section { padding: clamp(40px, 7vw, 64px) 0; }
  .hero-split .cta-zeile { gap: var(--space-1); }
  .cta-micro { margin-top: var(--space-2); }
  .projekte, .risiken, .angebot-grid { gap: var(--space-4); }
  .projekt-text, .projekt-text-only, .angebot-karte { padding: var(--space-4) var(--space-5); }
  .einer { padding: var(--space-4) var(--space-5); }
  .faq-v3 summary { font-size: 1rem; }
}
/* Projekte: drei Fotokarten oben, zwei Faktenkacheln darunter (Desktop) */
@media (min-width:900px){
  .projekte { grid-template-columns: repeat(6, 1fr); }
  .projekte .projekt-foto { grid-column: span 2; }
  .projekte .projekt-text-only { grid-column: span 3; }
  .projekte.zwei-fotos .projekt-foto { grid-column: span 3; }
}
/* Bildreihe (Planungskompetenz sichtbar machen) */
.bildreihe { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.bildreihe figure { margin:0; }
.bildreihe img { width:100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 14px 0 14px; }
.bildreihe figcaption { font-size:.78rem; color: var(--neutral-600); margin-top:.35em; }
.bildreihe-quelle { margin-top: var(--space-2); }
@media (max-width:520px){ .bildreihe { grid-template-columns: 1fr 1fr; } .bildreihe figure:last-child { grid-column: span 2; } }

/* ===== v6: E-Book-LP (Squeeze Page, ein Ziel: Download) ===== */
.hero.hero-split.hero-ebook .hero-grid { align-items: center; padding-bottom: clamp(28px, 5vw, 56px); } /* center: Textspalte vertikal mittig zur Formularkarte (Tommi 10.09.) */
.hero-ebook h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); }
.hero-ticks { margin: 0; }
.hero-ticks li { font-size: .98rem; margin-bottom: var(--space-2); }
.hero-ticks li b { color: var(--neutral-900); }
.formkarte-ebook { padding: clamp(18px, 3vw, 28px); border: 1.5px solid var(--neutral-200); }
.ebook-kopf { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--neutral-200); }
.ebook-kopf img { width: 72px; height: auto; border-radius: 0 10px 0 10px; box-shadow: var(--shadow-card); flex: none; }
.ebook-kopf b { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; margin-bottom: .25em; }
.ebook-kopf span { font-size: .88rem; color: var(--neutral-600); line-height: 1.4; }
.formkarte-ebook .btn-primaer, .lp-ebook #formular .btn-primaer[type=submit] { width: 100%; }
.lp-ebook .beweise { padding-top: var(--space-6); }
html.js .hero-ebook .hero-form { opacity: 0; transform: translateY(16px); animation: heroIn .8s var(--ease-out) .25s forwards; }
@media (min-width: 900px) { .hero.hero-split.hero-ebook .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.inhalt-grid { display: grid; gap: var(--space-6); align-items: start; }
.inhalt-cover { margin: 0; max-width: 340px; box-shadow: var(--shadow-card); border-radius: 0 14px 0 14px; overflow: hidden; border: 1px solid var(--neutral-200); }
.inhalt-cover img { display: block; width: 100%; height: auto; }
.fehler-liste { list-style: none; counter-reset: fehler; margin: var(--space-4) 0; padding: 0; display: grid; gap: 0 var(--space-5); }
.fehler-liste li { counter-increment: fehler; display: grid; grid-template-columns: 40px 1fr; gap: 0 var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--neutral-200); }
.fehler-liste li::before { content: counter(fehler, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--gruen-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fehler-liste b { font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.fehler-liste span { font-size: .9rem; color: var(--neutral-600); line-height: 1.45; }
@media (min-width: 700px) { .fehler-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .inhalt-grid { grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--space-8); } .inhalt-cover { position: sticky; top: 96px; } }
.warum-grid { display: grid; gap: var(--space-6); align-items: center; margin-bottom: var(--space-6); }
@media (min-width: 1000px) { .warum-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.section-alt .siegelrow { padding-top: var(--space-5); border-top: 1px solid var(--neutral-200); justify-content: space-between; }
@media (prefers-reduced-motion: reduce) { html.js .hero-ebook .hero-form { animation: none; opacity: 1; transform: none; } }

/* ===== v7: E-Book-LP nach LP-Review (10.09.2026) ===== */
.situation-liste { list-style:none; margin: var(--space-5) 0 0; padding:0; display:grid; gap: var(--space-3); }
.situation-liste li { background: var(--weiss); border-radius: 0 16px 0 16px; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--gruen-600); font-size: 1.02rem; line-height: 1.5; }
@media (min-width:900px){ .situation-liste { grid-template-columns: repeat(3, 1fr); } }
.vorschau { display:grid; gap: var(--space-4); }
.vorschau figure { margin:0; }
.vorschau a { display:block; border-radius: 0 14px 0 14px; overflow:hidden; border:1px solid var(--neutral-200); box-shadow: var(--shadow-card); background:#fff; }
.vorschau img { display:block; width:100%; height:auto; }
.vorschau figcaption { font-size:.85rem; color: var(--neutral-600); margin-top: var(--space-2); line-height:1.45; }
@media (min-width:600px) and (max-width:899px){ .vorschau { grid-template-columns: 1fr 1fr; align-items:start; } }
@media (min-width:900px){ .inhalt-grid { grid-template-columns: minmax(260px, 360px) 1fr; } .vorschau-spalte { position: sticky; top: 96px; } }
.lightbox { border:0; padding:0; background:transparent; max-width: min(96vw, 1000px); width: auto; }
.lightbox::backdrop { background: rgba(38,36,31,.85); }
.lightbox img { display:block; max-width: min(96vw, 1000px); max-height: 88vh; width:auto; height:auto; margin:0 auto; border-radius: 0 14px 0 14px; background:#fff; }
.lightbox-schliessen { position:absolute; top: -4px; right: -4px; width:40px; height:40px; border:0; border-radius: 0 12px 0 12px; background: var(--gruen-700); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; }
.zitat-karte { background: var(--weiss); border-radius: 0 22px 0 22px; padding: clamp(20px, 4vw, 40px); border-left: 4px solid var(--gruen-600); margin-top: var(--space-4); }
.zitat-karte blockquote { font-family: var(--font-display); font-weight:600; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height:1.4; margin:0 0 var(--space-3); }
.zitat-karte blockquote::before { content:"\201E"; } .zitat-karte blockquote::after { content:"\201C"; }
.zitat-karte cite { font-style:normal; color: var(--neutral-600); font-size:.92rem; }
.ansprech { display:grid; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
@media (min-width:600px){ .ansprech { grid-template-columns: 1fr 1fr; } }
.ansprech .ap { display:flex; align-items:center; gap: var(--space-3); }
.ansprech .ap img { width:64px; height:64px; border-radius: 0 12px 0 12px; object-fit:cover; flex:none; }
.ansprech .ap b { display:block; font-family: var(--font-display); }
.ansprech .ap span { font-size:.88rem; color: var(--neutral-600); }
.zahlen-inline { margin: var(--space-6) 0 var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--neutral-200); }
.quelle-link { font-size:.8rem; white-space:nowrap; }
.siegel-hinweis { font-size:.8rem; color: var(--neutral-600); margin-top: var(--space-3); }
.check-zeile.zustimmung { background: none; padding: 0; font-family: var(--font-sans); font-weight: 400; font-size:.88rem; color: var(--neutral-600); margin: var(--space-2) 0 var(--space-4); }
.erfolg-weiter { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--neutral-200); }
.erfolg-weiter p { text-align:center; }
.datenschutz-note a { color: var(--gruen-800); }
/* Ansprechpartner-Karten auf hellem Grund (die .ap-Basisregeln stammen aus der dunklen Angebotskarte) */
.ansprech .ap { grid-template-columns: 64px 1fr; background: var(--neutral-100); border-color: var(--neutral-200); padding: var(--space-3) var(--space-4); }
.ansprech .ap b { color: var(--neutral-900); font-size: 1rem; }
.ansprech .ap span { color: var(--neutral-600); }

/* v8: kompaktere Abstaende auf der E-Book-LP (LP-Review, Punkt 8) */
body.v3.lp-ebook .section { padding: clamp(44px, 6vw, 72px) 0; }
.hero.hero-split.hero-ebook .hero-grid { padding-bottom: clamp(20px, 4vw, 40px); }
.lp-ebook .zahlen-inline { margin: var(--space-5) 0 var(--space-4); }

/* Testimonial mit Portraet */
.zitat-karte { display:grid; gap: var(--space-4) var(--space-5); align-items:start; }
.zitat-karte .zitat-foto { width: 96px; height: 96px; border-radius: 0 16px 0 16px; object-fit: cover; }
@media (min-width:700px){ .zitat-karte { grid-template-columns: 120px 1fr; } .zitat-karte .zitat-foto { width: 120px; height: 120px; } .zitat-karte blockquote, .zitat-karte cite { grid-column: 2; } .zitat-karte .zitat-foto { grid-row: 1 / span 2; } }

/* ===== v9: Raumprogramm-Planauszuege + Gruenderkarte (10.09.2026) ===== */
.grundrisse { display:grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width:900px){ .grundrisse { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.grundriss { margin:0; }
.grundriss a { display:block; background:#fff; border:1px solid var(--neutral-200); border-radius: 0 14px 0 14px; overflow:hidden; box-shadow: var(--shadow-card); }
.grundriss img { display:block; width:100%; height:auto; }
.grundriss figcaption { margin-top: var(--space-3); font-size:.9rem; line-height:1.45; color: var(--neutral-600); }
.grundriss figcaption b { display:block; color: var(--neutral-900); font-family: var(--font-display); font-weight:700; margin-bottom:.3em; }
#raumprogramm .small { margin-top: var(--space-4); }
.gruender { display:grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items:start; margin: var(--space-5) 0 var(--space-4); padding: var(--space-4); background: var(--neutral-100); border-radius: 0 18px 0 18px; }
.gruender img { width:72px; height:72px; border-radius: 0 14px 0 14px; object-fit:cover; }
.gruender blockquote { font-family: var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.4; margin:0 0 var(--space-2); }
.gruender cite { font-style:normal; font-size:.88rem; color: var(--neutral-600); display:block; }
.gruender .small { margin-top: var(--space-2); }
@media (min-width:700px){ .gruender { grid-template-columns: 96px 1fr; } .gruender img { width:96px; height:96px; } }

/* ===== v10: Fuenf Dinge (USP-Block), Testimonial auf der Ordinations-LP, Bot-Schutz, Double-Opt-in (10.09.2026) ===== */
.fuenf { list-style:none; counter-reset: ding; margin: var(--space-5) 0 0; padding:0; display:grid; gap: var(--space-4); }
@media (min-width:700px){ .fuenf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1000px){ .fuenf { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.fuenf li { counter-increment: ding; background: var(--gruen-050); border-radius: 0 20px 0 20px; padding: var(--space-5); display:grid; gap: var(--space-2); align-content:start; }
.fuenf li::before { content: counter(ding, decimal-leading-zero); font-family: var(--font-display); font-weight:700; font-size: 1.9rem; line-height:1; color: var(--gruen-600); }
.fuenf li b { font-family: var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.3; color: var(--neutral-900); }
.fuenf li span { color: var(--braun-700); }
#fuenf .sektion-cta { justify-items:center; }
#stimme .zitat-karte { max-width: 820px; margin-left:auto; margin-right:auto; }
/* Honeypot: fuer Menschen unsichtbar und nicht fokussierbar, fuer Bots ein normales Feld */
.hp { position:absolute !important; left:-10000px !important; top:auto; width:1px; height:1px; overflow:hidden; }
/* Turnstile-Container: leer = kein Platz; mit Widget (nur bei Verdacht sichtbar) etwas Abstand */
.turnstile { margin: 0 0 var(--space-3); }
.turnstile:empty { display:none; }
.form-erfolg [data-email-echo] { word-break: break-all; }
.form-erfolg [data-erfolg] .small { color: var(--neutral-600); }
/* Rueckkehr vom Bestaetigungslink (?bestaetigt=1) */
.bestaetigt { background: var(--gruen-600); color:#fff; padding: var(--space-3) 0; font-size:.95rem; line-height:1.5; }
.bestaetigt b { font-family: var(--font-display); }
.bestaetigt a { color:#fff; text-decoration: underline; }
/* Gutschein-Hinweis (E-Book-LP, 10.09.2026) */
.gutschein-zeile { margin: var(--space-3) 0 var(--space-4); padding: var(--space-2) var(--space-3); background: var(--gruen-050); border-left: 3px solid var(--gruen-600); border-radius: 0 10px 0 10px; font-size: .9rem; line-height: 1.45; }
.gutschein-zeile b { font-family: var(--font-display); color: var(--gruen-800); }
.hero-ticks li b { color: var(--gruen-800); }

/* ===== v11: E-Book-LP Feinschliff (Tommi 10.09.2026): Namensfelder, groessere Fotos, Kennzahl-Karten, Siegel zentriert, FAQ-Karten ===== */
.form-grid-namen { display:grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--space-4); }
.form-grid-namen .formfeld { margin-bottom: 0; } /* gleiche Abstaende, ob neben- oder untereinander (Tommi 10.09.) */
@media (max-width:420px){ .form-grid-namen { grid-template-columns: 1fr; } }
.form-grid .formfeld-voll { grid-column: 1 / -1; }
.form-grid .form-grid-namen { grid-column: 1 / -1; }
.lp-ebook .warum-grid { grid-template-columns: 1fr; gap: var(--space-6); align-items:start; }
.lp-ebook .warum-grid > div:first-child { max-width: 860px; }
.lp-ebook .bildreihe { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: 0; }
.lp-ebook .bildreihe img { aspect-ratio: 3 / 2; }
.lp-ebook .bildreihe figcaption { font-size:.88rem; margin-top:.5em; }
.lp-ebook .zahlen-inline { border-top: 0; padding-top: 0; margin: var(--space-6) 0 0; gap: var(--space-4); }
.lp-ebook .zahlen-inline li { background: var(--gruen-050); border-left: 4px solid var(--gruen-600); border-radius: 0 16px 0 16px; padding: var(--space-4) var(--space-5); }
.lp-ebook .zahlen-inline li > span { max-width:none; }
.lp-ebook .siegelrow { justify-content: center; gap: var(--space-6) var(--space-7); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--neutral-200); }
.lp-ebook .siegelrow img { height: 56px; }
.lp-ebook .siegel-hinweis { text-align:center; max-width: 60em; margin-left:auto; margin-right:auto; }
.lp-ebook .faq-v3 details { background: var(--weiss); border: 1px solid var(--neutral-200); border-radius: 0 14px 0 14px; padding: 0 var(--space-5); margin-bottom: var(--space-3); }
.lp-ebook .faq-v3 summary { padding: var(--space-4) 2em var(--space-4) 0; }
.lp-ebook .faq-v3 .faq-body { padding: 0 0 var(--space-4); }
/* Ergebnis-Block (Outcome, E-Book-LP 10.09.2026) */
.section.ergebnis { background: var(--gruen-050); }
.ergebnis-liste { display:grid; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); }
@media (min-width:800px){ .ergebnis-liste { grid-template-columns: 1fr 1fr; } }
.ergebnis-liste li { font-size: 1.02rem; line-height: 1.5; }
.ergebnis .cta-zeile { margin-top: var(--space-6); }

/* ===== v12: Grafik-Pass E-Book-LP (10.09.2026): Bildband, weniger Text, kompakte Listen ===== */
.bildband { position:relative; overflow:hidden; background: var(--braun-900); }
.bildband img { display:block; width:100%; height: clamp(280px, 38vw, 480px); object-fit: cover; }
.bildband-text { position:absolute; left:0; right:0; bottom:0; padding: var(--space-7) 0 var(--space-5); background: linear-gradient(180deg, rgba(38,36,31,0) 0%, rgba(38,36,31,.74) 100%); color:#fff; }
.bildband-text b { display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); line-height:1.2; max-width: 22em; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bildband-text span { display:block; margin-top: var(--space-2); font-size:.88rem; opacity:.85; }
@media (max-width:767px){ .hero-ebook .hero-ticks { display:none; } }
.lp-ebook .fehler-liste li { padding: var(--space-2) 0; grid-template-columns: 36px 1fr; align-items: center; }
.lp-ebook .fehler-liste li::before { grid-row: 1; }

/* ===== v13: Team-Karten mit Kontakt + E-Book-Mockup (Tommi 10.09.2026) ===== */
.lp-ebook .warum-grid > div:first-child { max-width: none; }
.lp-ebook .warum-grid > div:first-child > .lead, .lp-ebook .warum-grid > div:first-child > h2 { max-width: 860px; }
.team { display:grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width:760px){ .team { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.tk { background: var(--weiss); border: 1px solid var(--neutral-200); border-radius: 0 20px 0 20px; padding: var(--space-5); display:grid; gap: .35em; align-content:start; box-shadow: var(--shadow-card); }
.tk img { width:120px; height:120px; border-radius: 0 16px 0 16px; object-fit: cover; margin-bottom: var(--space-3); }
.tk b { font-family: var(--font-display); font-size: 1.12rem; color: var(--neutral-900); }
.tk > span { color: var(--neutral-600); font-size: .92rem; }
.tk q { display:block; quotes: "\201E" "\201C"; font-size: .95rem; line-height:1.5; color: var(--braun-700); margin-top: var(--space-2); }
.tk-kontakt { display:grid; gap: .3em; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--neutral-200); font-size: .95rem; }
.tk-kontakt a { color: var(--gruen-800); font-weight: 600; text-decoration: none; }
.tk-kontakt a:hover { text-decoration: underline; }
.tk-kontakt a.platzhalter { font-weight: 400; }
.mockup { position:relative; display:flex; flex-direction:column; align-items:center; padding: var(--space-6) var(--space-4) var(--space-4); }
.mockup::before { content:""; position:absolute; top:10%; left:50%; width: min(340px, 92%); aspect-ratio: 1; transform: translateX(-56%); border-radius: 50%; background: var(--gruen-050); z-index:0; }
.buch { position:relative; z-index:1; width: min(300px, 78%); transform: perspective(1200px) rotateY(-16deg) rotateX(2deg); border-radius: 4px 12px 12px 4px; box-shadow: 30px 36px 54px -24px rgba(38,36,31,.6), 0 2px 6px rgba(38,36,31,.18); background: var(--braun-900); }
.buch img { display:block; width:100%; height:auto; border-radius: 4px 12px 12px 4px; }
.buch::after { content:""; position:absolute; top:0; bottom:0; left:0; width:7%; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,0)); }
.buch::before { content:""; position:absolute; top:5px; bottom:5px; right:-8px; width:8px; background: repeating-linear-gradient(180deg, #F3F0E8 0 2px, #D6D1C4 2px 3px); border-radius: 0 3px 3px 0; }
.mockup-caption { position:relative; z-index:1; margin-top: var(--space-5); font-size:.92rem; color: var(--neutral-600); text-align:center; }
@media (prefers-reduced-motion: reduce){ .buch { transform:none; } }
.bildband-text .bb-sub { font-size: clamp(1rem, .9rem + .5vw, 1.2rem); opacity: 1; margin-top: var(--space-2); max-width: 30em; }
.bildband-text .bb-sub + span { font-size: .82rem; opacity: .8; }
/* Mobil: Referenzfotos untereinander in voller Breite statt zwei kleiner Kacheln */
@media (max-width:520px){ .lp-ebook .bildreihe { grid-template-columns: 1fr; gap: var(--space-4); } .lp-ebook .bildreihe figure:last-child { grid-column: auto; } }

/* ===== v14: Cookie-Banner (js/consent.js), Go-live-Runde 10.09. ===== */
.cookie-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); background: #fff; color: var(--neutral-900); border-radius: 14px; box-shadow: 0 12px 40px rgba(20,18,12,.28); padding: 22px 24px 20px; z-index: 9000; font-size: .95rem; line-height: 1.5; }
.cookie-banner:focus { outline: 3px solid #4E6C12; outline-offset: 2px; }
.cookie-banner h2 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; margin: 0 0 .45em; }
.cookie-banner p { margin: 0 0 .9em; }
.cookie-banner a { color: #4E6C12; text-decoration: underline; }
.cb-details { margin: 0 0 1em; border-top: 1px solid var(--neutral-200); padding-top: .55em; }
.cb-details summary { cursor: pointer; font-weight: 700; padding: .2em 0; }
.cb-details label { display: flex; gap: .6em; align-items: flex-start; margin: .55em 0; font-size: .92rem; }
.cb-details input { margin-top: .3em; flex: none; width: 18px; height: 18px; accent-color: #4E6C12; }
.cb-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner button { font: inherit; font-weight: 700; font-size: .98rem; padding: .85em 1.2em; border-radius: 8px; border: 0; cursor: pointer; line-height: 1.2; }
.cb-aktionen button { flex: 1 1 200px; }
.cb-ja { background: #5C7F17; color: #fff; }
.cb-nein { background: var(--neutral-900); color: #fff; }
.cb-auswahl { background: #fff; border: 1.5px solid var(--neutral-900) !important; color: var(--neutral-900); margin-top: .3em; }
.cookie-banner button:hover { filter: brightness(1.08); }
.cookie-banner button:focus-visible { outline: 3px solid #4E6C12; outline-offset: 2px; }
body.cookie-offen .sticky-cta { display: none; }
@media (max-width: 560px) { .cookie-banner { left: 0; bottom: 0; transform: none; width: 100%; border-radius: 14px 14px 0 0; padding: 18px 16px 18px; max-height: 88vh; overflow: auto; } }