/* =========================================================
   Gesundheitszirkel Schrobenhausen — Global Stylesheet
   Stil: ruhig, hochwertig, japandi-inspiriert
   ========================================================= */

:root{
  /* Farben */
  --olive-900:#333a25;
  --olive-800:#454d33;
  --olive-700:#565f3f;
  --olive-600:#6b7550;   /* Primärfarbe */
  --olive-500:#828d64;
  --olive-300:#aab392;
  --olive-200:#c9d0b8;
  --olive-100:#e3e7d8;
  --olive-50: #f1f3e9;

  --cream:      #faf9f4;
  --white:      #ffffff;
  --ink:        #2b2e22;
  --ink-soft:   #565a4a;
  --ink-faint:  #8a8d7c;
  --line:       #e2e2d6;

  --wa:#3fa373; /* dezentes WhatsApp-Grün, gedämpft auf Markenlinie */
  --wa-rgb: 63,163,115;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;

  --shadow-soft: 0 12px 40px rgba(51,58,37,0.08);
  --shadow-hover: 0 16px 48px rgba(51,58,37,0.14);

  --container: 1180px;
  --space-section: clamp(72px, 9vw, 140px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Urbanist', sans-serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .6em;
  color:var(--olive-900);
  letter-spacing:-0.01em;
}

h1{ font-size:clamp(2.4rem, 4.8vw, 3.8rem); font-weight:700; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); }

p{ margin:0 0 1.1em; color:var(--ink-soft); }

.eyebrow{
  display:inline-block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olive-600);
  margin-bottom:1rem;
}

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

section{ padding:var(--space-section) 0; }

.section-head{
  max-width:680px;
  margin:0 0 56px;
}
.section-head.center{ margin-inline:auto; text-align:center; }

.lede{
  font-size:1.15rem;
  color:var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; flex-shrink:0; }

.btn-primary{
  background:var(--olive-600);
  color:var(--white);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{
  background:var(--olive-700);
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

.btn-whatsapp{
  background:var(--wa);
  color:var(--white);
  box-shadow:var(--shadow-soft);
}
.btn-whatsapp:hover{
  background:#358f63;
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

.btn-outline{
  background:transparent;
  border-color:var(--olive-300);
  color:var(--olive-800);
}
.btn-outline:hover{
  border-color:var(--olive-600);
  background:var(--olive-50);
}

.btn-ghost{
  background:var(--olive-50);
  color:var(--olive-800);
}
.btn-ghost:hover{ background:var(--olive-100); }

.btn-sm{ padding:11px 20px; font-size:.9rem; }

/* ---------- Announcement Bar: schmale Laufschrift oberhalb der Navigation,
   ausschließlich auf Desktop sichtbar (siehe Media Query), ruhige performante
   CSS-Marquee-Animation. Sitzt über dem .site-header, ersetzt ihn nicht. ---------- */
.announce-bar{
  display:none;
}
@media (min-width:1181px){
  .announce-bar{
    display:block;
    background:var(--olive-900);
    overflow:hidden;
    white-space:nowrap;
    position:relative;
    z-index:210;
  }
  .announce-track{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:9px 0;
    animation:announce-scroll 34s linear infinite;
    will-change:transform;
  }
  .announce-track a,
  .announce-sep{
    margin-right:96px;
  }
  .announce-track a{
    font-size:.83rem;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--olive-100);
    white-space:nowrap;
  }
  .announce-track a:hover{ color:var(--white); }
  .announce-sep{
    width:15px;
    height:15px;
    flex-shrink:0;
    opacity:.75;
    filter:brightness(0) invert(1);
  }
  @keyframes announce-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .announce-track{ animation:none; }
  }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(250,249,244,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:74px;
  max-width:none;
  padding:0 clamp(24px, 4vw, 56px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand .header-logo{
  height:37px;
  width:auto;
}
/* Unterseiten nutzen dasselbe Nav wie die Startseite, das Logo ist dort
   jedoch bewusst 30% größer (Startseite bleibt bei 37px). */
.brand .header-logo-lg{
  height:48px;
  width:auto;
  display:block;
}
.footer-brand .brand .footer-logo{
  height:34px;
  width:auto;
  display:block;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:28px;
  flex-shrink:1;
  min-width:0;
}
.main-nav ul{
  display:flex;
  gap:24px;
  flex-shrink:0;
}
.main-nav a{
  font-size:.96rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  white-space:nowrap;
  transition:color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--olive-700); }
.main-nav a.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--olive-600);
  border-radius:2px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.header-actions .btn{
  flex-shrink:0;
}
.header-actions .btn-whatsapp{
  padding:13px 30px;
  color:var(--white);
  box-shadow:0 0 10px 0px rgba(var(--wa-rgb),0.32), var(--shadow-soft);
  transition:transform .45s cubic-bezier(.25,.9,.35,1), box-shadow .45s cubic-bezier(.25,.9,.35,1), background .3s ease;
}
.header-actions .btn-whatsapp:hover{
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 0 14px 1px rgba(var(--wa-rgb),0.4), var(--shadow-hover);
}
.header-actions .btn-whatsapp:active{
  transform:translateY(-1px);
  transition-duration:.15s;
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ display:none; }
.nav-toggle .bars{
  display:block !important;
  position:relative;
  width:22px; height:16px;
}
.nav-toggle .bars span{
  display:block !important;
  position:absolute;
  left:0; right:0;
  height:2px;
  background:var(--olive-600);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:7px; }
.nav-toggle .bars span:nth-child(3){ top:14px; }

.nav-toggle.open .bars span:nth-child(1){ top:7px; transform:rotate(45deg); }
.nav-toggle.open .bars span:nth-child(2){ opacity:0; }
.nav-toggle.open .bars span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  --hero-gap: clamp(20px,3vw,36px);
  padding:var(--hero-gap) var(--hero-gap) var(--space-section);
}

.hero-card{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas:
    "heading media"
    "lede    media"
    "cta     media"
    "trust   media";
  align-items:stretch;
  background:var(--white);
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.hero-heading{
  grid-area:heading;
  padding:clamp(32px,4vw,64px) clamp(28px,3.5vw,56px) 0;
}
.hero-h1{ margin:0; }
.hero-h2{
  margin:clamp(4px,.6vw,10px) 0 0;
  color:var(--olive-600);
  font-weight:100;
}
.hero-lede{
  grid-area:lede;
  margin:0;
  padding:clamp(18px,2.2vw,28px) clamp(28px,3.5vw,56px) 0;
  max-width:46ch;
}
.hero-cta-btn{
  grid-area:cta;
  align-self:start;
  justify-self:start;
  margin:clamp(22px,2.6vw,32px) clamp(28px,3.5vw,56px) clamp(20px,2.4vw,28px);
}
.hero-trust{
  grid-area:trust;
  align-self:end;
  display:flex;
  gap:28px;
  margin:clamp(28px,3.2vw,40px) clamp(28px,3.5vw,56px) clamp(28px,3.5vw,48px);
  padding-top:24px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.hero-trust div{
  font-size:.86rem;
  color:var(--ink-faint);
  padding-left:16px;
  border-left:2px solid var(--olive-200);
}
.hero-trust strong{
  display:block;
  color:var(--olive-800);
  font-size:1.05rem;
  font-weight:700;
}

/* =========================================================
   Startseiten-Hero (kein Standort-Hero) — eigenständig gestaltet:
   ruhige, großzügige Zwei-Spalten-Komposition mit viel Weißraum,
   Video mit deutlich mehr Präsenz (60% Breite am Desktop), klar
   strukturierte Textspalte (Headline → Subheadline → kurze
   Beschreibung → 3 Benefit-Karten → Primary/Secondary-CTA).
   Eigene, zusätzliche Klassen (.hero-benefits, .hero-cta-row …),
   daher keine Überschneidung mit dem Standort-Hero, der weiterhin
   .hero-trust/.hero-cta-btn nutzt.
   ========================================================= */
.hero:not(.hero-standort) .hero-card{
  border-radius:32px;
  box-shadow:0 32px 80px rgba(51,58,37,.10), 0 4px 16px rgba(51,58,37,.05);
}
.hero:not(.hero-standort) .hero-heading{
  padding:clamp(40px,5.5vw,88px) clamp(36px,4.2vw,64px) 0;
  min-width:0;
}
.hero:not(.hero-standort) .hero-logo{
  display:block;
  height:clamp(51px,4.8vw,66px);
  width:auto;
  margin-bottom:clamp(18px,2.2vw,26px);
}

/* Klickbarer Promo-Ribbon im Hero, springt per Anchor zur Eröffnungsangebot-Sektion */
.hero-promo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(14px,1.8vw,20px);
  padding:8px 16px;
  border-radius:999px;
  background:var(--olive-100);
  color:var(--olive-800);
  font-size:.84rem;
  font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.hero-promo:hover{ background:var(--olive-200); transform:translateY(-1px); }
.hero-promo .dot{ width:7px; height:7px; border-radius:50%; background:var(--olive-600); flex-shrink:0; }
.hero-promo svg{ width:14px; height:14px; flex-shrink:0; }
.hero:not(.hero-standort) .hero-h1{
  font-size:clamp(2.5rem,4.4vw,3.6rem);
  line-height:1.12;
}
.hero:not(.hero-standort) .hero-h2{
  font-size:clamp(1.2rem,1.8vw,1.5rem);
  font-weight:300;
  margin-top:clamp(10px,1.2vw,16px);
}
.hero:not(.hero-standort) .hero-lede{
  padding:clamp(20px,2.4vw,28px) clamp(36px,4.2vw,64px) 0;
  font-size:clamp(1.05rem,1.2vw,1.18rem);
  line-height:1.7;
  max-width:44ch;
  min-width:0;
}

/* Video: dezenter dunkler Verlauf am unteren Rand für ruhige, hochwertige
   Bildwirkung (unabhängig vom Text-Overlay der Tablet-Zwischengröße). */
.hero:not(.hero-standort) .hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(20,20,15,0) 55%, rgba(20,20,15,.24) 100%);
  pointer-events:none;
}

/* Drei Benefit-Karten statt Pillen: Icon, Titel, kurze Beschreibung.
   min-width:0 auf allen Grid-Items ist hier Pflicht — sonst verweigern
   sich die Karten dem Schrumpfen (Grid-Item-Default ist min-width:auto,
   also die Breite des längsten Worts), was bei mittleren Desktop-Breiten
   (~1025-1300px, linke Spalte nur ~40%) dazu führt, dass die dritte Karte
   über die Spalte hinaus- und unter das Video rutscht. Gleiche Bugklasse
   wie beim Zeitstrahl. */
.hero-benefits{
  grid-area:benefits;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:clamp(28px,3.2vw,40px) clamp(36px,4.2vw,64px) 0;
  min-width:0;
}
.hero-benefit{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 16px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  min-width:0;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hero-benefit:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-soft);
  border-color:var(--olive-200);
}
.hero-benefit-icon{
  width:38px; height:38px;
  border-radius:var(--radius-s);
  background:var(--white);
  border:1px solid var(--line);
  color:var(--olive-700);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-benefit-icon svg{ width:19px; height:19px; }
.hero-benefit-text h4{
  margin:0 0 4px;
  font-size:.96rem;
  font-weight:700;
  color:var(--olive-900);
  overflow-wrap:break-word;
}
.hero-benefit-text p{
  margin:0;
  font-size:.84rem;
  line-height:1.5;
  color:var(--ink-faint);
  overflow-wrap:break-word;
}

/* CTA-Zeile: großer Primary-Button, dezenter Secondary-Link (WhatsApp) */
.hero-cta-row{
  grid-area:cta;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin:clamp(32px,3.6vw,44px) clamp(36px,4.2vw,64px) clamp(40px,4.4vw,56px);
  min-width:0;
}
.btn-lg{
  padding:19px 38px;
  font-size:1.02rem;
}
.hero-cta-secondary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:.92rem;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.hero-cta-secondary svg{ width:19px; height:19px; color:var(--wa); flex-shrink:0; }
.hero-cta-secondary:hover{ color:var(--olive-800); }

/* Scroll-Cue: dezenter Hinweistext + animierter Pfeil unter der Hero-Karte,
   erklärt kurz, wieso man weiterscrollen sollte (springt sanft auf und ab). */
.hero-scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:fit-content;
  margin:clamp(24px,3vw,32px) auto 0;
  text-decoration:none;
}
.hero-scroll-cue-label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.hero-scroll-cue-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--olive-700);
  animation:heroScrollBounce 2.4s ease-in-out infinite;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.hero-scroll-cue-icon svg{ width:18px; height:18px; }
.hero-scroll-cue:hover .hero-scroll-cue-label{ color:var(--olive-800); }
.hero-scroll-cue:hover .hero-scroll-cue-icon{
  border-color:var(--olive-300);
  color:var(--olive-900);
  background:var(--cream);
}
@keyframes heroScrollBounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue{ animation:none; }
}

@media (min-width:1025px){
  .hero:not(.hero-standort) .hero-card{
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    grid-template-areas:
      "heading  media"
      "lede     media"
      "benefits media"
      "cta      media";
  }
}

/* Zwischenbreite (~1025-1320px): linke Spalte ist nur ~40% breit, dafür
   reicht es für 3 Karten nebeneinander nicht komfortabel — Benefits
   stapeln sich hier einspaltig (Icon links, Text rechts) statt eng
   nebeneinander gequetscht zu werden. */
@media (min-width:1025px) and (max-width:1320px){
  .hero-benefits{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-benefit{
    flex-direction:row;
    align-items:center;
    padding:12px 16px;
  }
}

.hero-media{
  grid-area:media;
  position:relative;
  min-height:clamp(380px,38vw,560px);
  background:linear-gradient(145deg,var(--olive-200),var(--olive-500));
}
.hero-media video,
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
/* Hero-Video ist reines Hintergrundvideo ohne Ton/Bedienelemente — nicht antippbar/pausierbar */
.hero-media video{ pointer-events:none; }
.hero-media .hero-poster-img{ display:none; }

/* ---------- Hero-Bildslideshow (Startseite): mehrere Bilder in Dauerschleife,
   sanfte Crossfade-Überblendung, reines CSS (keine Abhängigkeit von JS). ---------- */
.hero-media-slideshow img{
  opacity:0;
  animation-name:hero-slideshow-fade;
  animation-duration:20s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.hero-media-slideshow img:nth-child(1){ animation-delay:0s; }
.hero-media-slideshow img:nth-child(2){ animation-delay:5s; }
.hero-media-slideshow img:nth-child(3){ animation-delay:10s; }
.hero-media-slideshow img:nth-child(4){ animation-delay:15s; }
@keyframes hero-slideshow-fade{
  0%{ opacity:0; }
  6%{ opacity:1; }
  20%{ opacity:1; }
  26%{ opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-media-slideshow img{ animation:none; opacity:0; }
  .hero-media-slideshow img:first-child{ opacity:1; }
}
.hero-media .ph-caption{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:28px;
  color:var(--white);
  font-size:.85rem;
  background:linear-gradient(0deg, rgba(43,46,34,.55), transparent 50%);
}

/* ---------- Placeholder media block (used when no photo available) ---------- */
.ph-block{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  background:linear-gradient(150deg, var(--olive-100), var(--olive-300));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--olive-800);
  text-align:center;
  padding:24px;
}
.ph-block .ph-inner{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
}

/* ---------- Cards / Grids ---------- */
.grid{
  display:grid;
  gap:28px;
}
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:36px 32px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
  border-color:var(--olive-200);
}
.card .icon{
  width:52px; height:52px;
  border-radius:var(--radius-s);
  background:var(--olive-50);
  color:var(--olive-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.card .icon svg{ width:26px; height:26px; transform-box:fill-box; transform-origin:center; }
.card h3{ margin-bottom:.5em; }
.card p{ margin-bottom:0; font-size:.97rem; }

/* ---------- Leistungen: Icon-Animationen beim Hover ---------- */
@keyframes icon-heartbeat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.22); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.16); }
  60%{ transform:scale(1); }
}
.card:hover .icon-heart svg{ animation:icon-heartbeat .9s ease-in-out; }

@keyframes icon-spin-once{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.card:hover .icon-arrow svg{ animation:icon-spin-once .6s ease; }

@keyframes icon-slide-in-up{
  0%{ transform:translateY(10px); opacity:.35; }
  60%{ transform:translateY(-2px); opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}
.card:hover .icon-person svg{ animation:icon-slide-in-up .45s ease-out; }

@keyframes icon-draw-line{
  from{ stroke-dashoffset:44; }
  to{ stroke-dashoffset:0; }
}
.card:hover .icon-pulse svg path{
  stroke-dasharray:44;
  animation:icon-draw-line .8s ease-in-out;
}

@keyframes icon-draw-check{
  from{ stroke-dashoffset:55; }
  to{ stroke-dashoffset:0; }
}
.card:hover .icon-check svg path{
  stroke-dasharray:55;
  animation:icon-draw-check .6s ease-in-out;
}

@keyframes icon-clock-minute{
  to{ transform:rotate(360deg); }
}
.card:hover .icon-clock svg .clock-minute{
  transform-box:view-box;
  transform-origin:12px 12px;
  animation:icon-clock-minute 1s linear;
}

/* ---------- Karten-Akkordeon (Beschreibung nur auf Mobile aufklappbar, Desktop immer sichtbar) ---------- */
.card-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  background:none;
  border:none;
  padding:0;
  margin:0;
  text-align:left;
  cursor:default;
  color:inherit;
  font-family:inherit;
}
.card-toggle h3{ margin:0; min-height:2.4em; }
.card-toggle .chevron{ display:none; }
.card-desc p{ margin:14px 0 0; font-size:.97rem; min-height:4.8em; }

/* alternating tinted section backgrounds */
.section-tint{ background:var(--olive-50); }
.section-line-top{ border-top:1px solid var(--line); }

/* ---------- Concept split ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media .ph-block{ aspect-ratio:4/3; }
.split-media img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-soft);
}
.split-media .image-cta{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:2;
  background:var(--white);
  border-color:transparent;
  color:var(--olive-800);
  box-shadow:var(--shadow-soft);
}
.split-media .image-cta:hover{
  background:var(--olive-50);
  border-color:transparent;
}

.checklist li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
  color:var(--ink-soft);
}
.checklist li svg{
  flex-shrink:0;
  width:20px; height:20px;
  color:var(--olive-600);
  margin-top:3px;
}

/* ---------- Quote / storytelling ---------- */
.quote-block{
  border-left:3px solid var(--olive-500);
  padding-left:28px;
  margin:28px 0;
}
.quote-block p{
  font-size:1.15rem;
  font-style:italic;
  color:var(--olive-900);
}

/* ---------- Location cards ---------- */
.loc-card{
  display:block;
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.loc-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
  border-color:var(--olive-200);
}
/* Stretched-link: macht die ganze Karte klickbar, ohne verschachtelte <a>-Tags
   (für Karten, die zusätzlich einen eigenen WhatsApp-Button enthalten) */
.loc-card-link{
  position:absolute;
  inset:0;
  z-index:1;
}
.loc-card .hero-cta{ position:relative; z-index:2; }
.loc-card .loc-media{ aspect-ratio:16/9; }
.loc-card .loc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.loc-card .loc-body{ padding:32px; }

/* ---------- Standort-Vorschau (Link zum jeweils anderen Standort, mit Thumbnail) ---------- */
.loc-preview{
  display:flex;
  align-items:center;
  gap:18px;
  max-width:480px;
  margin:36px auto 0;
  padding:12px 22px 12px 12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  color:inherit;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.loc-preview:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:var(--olive-200);
}
.loc-preview-img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.loc-preview-text{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.loc-preview-text small{
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--olive-500);
  margin-bottom:3px;
}
.loc-preview-text strong{
  font-size:1.05rem;
  font-weight:700;
  color:var(--olive-900);
}
.loc-preview-arrow{
  width:20px;
  height:20px;
  color:var(--olive-600);
  flex-shrink:0;
  transition:transform .25s ease;
}
.loc-preview:hover .loc-preview-arrow{ transform:translateX(4px); }

@media (max-width:480px){
  .loc-preview{ gap:14px; padding:10px 18px 10px 10px; }
  .loc-preview-img{ width:50px; height:50px; }
  .loc-preview-text strong{ font-size:.98rem; }
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.status-badge.active{ background:#eaf3e6; color:#3f6b34; }
.status-badge.upcoming{ background:var(--olive-50); color:var(--olive-700); }
.status-badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

.loc-meta{ margin-top:20px; }
.loc-meta div{
  display:flex; gap:10px;
  font-size:.92rem;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.loc-meta svg{ width:18px; height:18px; color:var(--olive-500); flex-shrink:0; margin-top:2px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--olive-800);
  color:var(--white);
  border-radius:var(--radius-l);
  padding:64px;
  text-align:center;
}
.cta-band h2, .cta-band p{ color:var(--white); }
.cta-band p{ color:var(--olive-100); max-width:560px; margin-inline:auto; }
.hero-cta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.cta-band .hero-cta{ justify-content:center; margin-top:36px; }
.cta-band .btn-outline{
  border-color:rgba(255,255,255,.35);
  color:var(--white);
}
.cta-band .btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--olive-900);
  color:var(--olive-100);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer h4{
  color:var(--white);
  font-size:.95rem;
  margin-bottom:1.1em;
}
.site-footer p{ color:var(--olive-200); font-size:.92rem; }
.site-footer a{ color:var(--olive-200); font-size:.92rem; }
.site-footer a:hover{ color:var(--white); }
.footer-links li{ margin-bottom:10px; }
.footer-brand .brand{ color:var(--white); margin-bottom:14px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--olive-100);
  transition:background .2s ease, color .2s ease;
}
.footer-social a:hover{ background:rgba(255,255,255,.16); color:var(--white); }
.footer-social svg{ width:18px; height:18px; }
.theme-dark .footer-social a{ background:rgba(76,54,37,.08); color:var(--dt-text-faint); }
.theme-dark .footer-social a:hover{ background:rgba(76,54,37,.16); color:var(--dt-text); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  font-size:.82rem;
  color:var(--olive-300);
  flex-wrap:wrap;
  gap:12px;
}

.footer-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--olive-300);
}
.footer-credit a{
  display:flex;
  align-items:center;
  transition:opacity .2s ease;
}
.footer-credit a:hover{ opacity:.7; }
.footer-credit .credit-logo{
  height:13px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.8;
}

/* ---------- Sticky WhatsApp (mobile) ---------- */
.sticky-wa{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:300;
  display:none;
  align-items:center;
  gap:10px;
  background:var(--wa);
  color:var(--white);
  padding:15px 22px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(63,163,115,.4);
  font-weight:600;
  font-size:.92rem;
  animation:pop-in .4s ease .6s both;
  /* Erzwingt eine eigene Compositing-Ebene: verhindert einen bekannten iOS-Safari-Bug,
     bei dem position:fixed-Elemente durch den backdrop-filter im Header falsch
     gestapelt werden und ihr Schatten/Glow von normalem Seiteninhalt "angeschnitten" wirkt.
     (kein "transform" hier, da die pop-in-Animation bereits transform:scale() animiert –
     will-change/isolation reichen aus und kollidieren nicht damit) */
  will-change:transform;
  isolation:isolate;
}
.sticky-wa svg{ width:20px; height:20px; }

@keyframes pop-in{
  from{ transform:scale(.85); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

@keyframes nav-drop{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero p.lede{ max-width:620px; }

/* ---------- Sub-Navigation (Anker-Sprungmarken auf Sammelseiten) ---------- */
.subnav{
  position:sticky;
  top:74px;
  z-index:150;
  background:rgba(250,249,244,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.subnav .container{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.subnav a{
  padding:9px 20px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
  color:var(--olive-700);
  background:var(--olive-50);
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.subnav a:hover{ background:var(--olive-100); }
.subnav a.active{ background:var(--olive-600); color:var(--white); }

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:stretch;
}
.pricing-grid-single{
  grid-template-columns:1fr;
  max-width:420px;
  margin-inline:auto;
}
.pricing-grid-aresing{
  grid-template-columns:repeat(3,1fr);
}
.pricing-grid-aresing .pricing-card{
  padding-left:22px;
  padding-right:22px;
}

/* ---------- Gründerangebot: eigene, volle Breite unter den 3 Haupttarifen ---------- */
.founder-offer{
  margin-top:28px;
  background:var(--white);
  border:1.5px solid var(--olive-300);
  border-radius:var(--radius-m);
  padding:36px 40px;
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  position:relative;
}
.founder-offer .pricing-badge{ position:static; transform:none; margin-bottom:14px; display:inline-block; }
.founder-offer-main{
  flex:0 0 220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-right:32px;
  border-right:1px solid var(--line);
}
.founder-offer-main .plan-name{ display:block; margin-bottom:8px; }
.founder-offer-main .price{ font-size:2.1rem; margin-bottom:6px; }
.founder-offer-main .offer-savings{ margin:10px 0 0; }
.founder-offer-list{
  flex:1 1 340px;
  display:flex;
  align-items:center;
  padding:0 32px;
  border-right:1px solid var(--line);
}
.founder-offer-list ul{ text-align:left; margin:0; width:100%; }
.founder-offer-list ul li{ margin-bottom:11px; }
.founder-offer-list ul li:last-child{ margin-bottom:0; }
.founder-offer-cta{
  flex:0 0 200px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:32px;
}
.founder-offer-cta .btn{ width:100%; justify-content:center; }
.theme-dark .founder-offer{ background:var(--dt-surface); border-color:var(--dt-line); }
.theme-dark .founder-offer-main,
.theme-dark .founder-offer-list{ border-color:var(--dt-line); }
.pricing-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:44px 32px 36px;
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s cubic-bezier(.22,1,.36,1);
}
.pricing-card:hover{
  transform:translateY(-4px) scale(1.035);
  box-shadow:var(--shadow-soft);
}
.pricing-card.featured{
  border-color:var(--olive-600);
  box-shadow:var(--shadow-soft);
}
.pricing-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--olive-600);
  color:var(--white);
  padding:6px 18px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pricing-card .plan-name{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--olive-600);
  margin-bottom:14px;
}
.pricing-card .price{
  font-size:2.5rem;
  font-weight:700;
  color:var(--olive-900);
  margin-bottom:2px;
  line-height:1.1;
}
.pricing-card .price small{
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-faint);
}
.pricing-card .term{
  font-size:.9rem;
  color:var(--ink-soft);
  margin-bottom:26px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.pricing-card ul{
  text-align:left;
  margin-bottom:28px;
  flex-grow:1;
}
.pricing-card ul li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:12px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.pricing-card ul li svg{
  width:18px; height:18px;
  color:var(--olive-600);
  flex-shrink:0;
  margin-top:2px;
}
.pricing-card .btn{
  align-self:center;
  justify-content:center;
  width:auto;
}
.pricing-note{
  text-align:center;
  font-size:.86rem;
  color:var(--ink-faint);
  max-width:640px;
  margin:36px auto 0;
}

/* ---------- Eröffnungsangebot (zwei Karten, monatlich vs. 5-Jahres-Angebot) ---------- */
.offer-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:32px;
  align-items:stretch;
  margin-top:8px;
}
.offer-card-primary{
  border-width:2px;
  box-shadow:0 24px 56px rgba(51,58,37,.14);
}
.offer-savings{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  align-self:center;
  margin:18px 0 20px;
  padding:8px 18px;
  border-radius:999px;
  border:2px solid var(--olive-600);
  background:transparent;
  color:var(--olive-800);
  font-weight:400;
  font-size:.98rem;
  white-space:nowrap;
}
.offer-savings strong{ font-weight:800; font-size:1.25rem; }

.offer-card .plan-name{ margin-bottom:22px; }
.offer-card .price{ font-size:2.8rem; }
.price-strike{
  font-size:1.15rem;
  font-weight:500;
  color:var(--ink-faint);
  text-decoration:line-through;
  margin-right:2px;
}

/* ---------- Startseite Eröffnungsangebot: Ersparnis über dem Preis, prominenter ---------- */
#eroeffnungsangebot .offer-card .offer-savings-lead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  border:none;
  background:none;
  padding:0;
  margin:2px 0 18px;
}
#eroeffnungsangebot .offer-card .offer-savings-label{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--olive-600);
}
#eroeffnungsangebot .offer-card .offer-savings-lead strong{
  font-size:2.6rem;
  font-weight:800;
  color:var(--olive-900);
  line-height:1.1;
}
#eroeffnungsangebot .offer-card .price.price-secondary{
  font-size:1.4rem;
  font-weight:600;
  color:var(--olive-700);
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
#eroeffnungsangebot .offer-card .price.price-secondary .price-strike{ font-size:.95rem; }
#eroeffnungsangebot .offer-card .price.price-secondary small{ font-size:.85rem; }
#eroeffnungsangebot.theme-dark .offer-card .offer-savings-lead strong,
.theme-dark #eroeffnungsangebot .offer-card .offer-savings-lead strong{ color:var(--dt-text); }
#eroeffnungsangebot.theme-dark .offer-card .offer-savings-label,
.theme-dark #eroeffnungsangebot .offer-card .offer-savings-label{ color:var(--dt-text-soft); }
#eroeffnungsangebot.theme-dark .offer-card .price.price-secondary,
.theme-dark #eroeffnungsangebot .offer-card .price.price-secondary{ color:var(--dt-text-soft); border-bottom-color:var(--dt-line); }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- "Mehr anzeigen" Textklappe (nur mobil aktiv, siehe Media Query) ---------- */
.readmore-toggle{ display:none; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.center-clamp{ max-width:620px; margin-inline:auto; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.tag{
  font-size:.8rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  background:var(--olive-50);
  color:var(--olive-700);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
}

/* Wechsel zur mobilen Navigation bewusst früher als die übrigen
   Tablet-Anpassungen, damit Nav-Links und Anrufen/WhatsApp-Buttons
   nie in einer zu schmalen Zwischenbreite zusammengequetscht werden. */
@media (max-width:1180px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }

  .main-nav.mobile-open{
    display:flex;
    position:fixed;
    top:74px;
    left:0; right:0;
    bottom:auto;
    max-height:calc(100vh - 74px);
    background:var(--cream);
    flex-direction:column;
    padding:20px 28px 28px;
    gap:20px;
    z-index:199;
    overflow-y:auto;
    box-shadow:0 20px 40px rgba(43,46,34,.14);
    border-bottom:1px solid var(--line);
    border-radius:0 0 var(--radius-m) var(--radius-m);
    animation:nav-drop .3s cubic-bezier(.25,.9,.35,1) both;
  }
  .main-nav.mobile-open ul{ flex-direction:column; gap:4px; }
  .main-nav.mobile-open a{
    display:block;
    padding:16px 4px;
    font-size:1.15rem;
    border-bottom:1px solid var(--line);
  }
  .main-nav.mobile-open .header-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:8px;
  }
  .main-nav.mobile-open .header-actions .btn{
    justify-content:center;
    width:100%;
    padding:15px 20px;
    font-size:1rem;
  }
}

@media (max-width:960px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .split-media{ order:99; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .cta-band{ padding:48px 28px; }
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .offer-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .founder-offer{ flex-direction:column; align-items:stretch; text-align:center; padding:32px 24px; }
  .founder-offer-main{ flex:none; text-align:center; padding-right:0; padding-bottom:24px; border-right:none; border-bottom:1px solid var(--line); }
  .founder-offer-list{ flex:none; padding:24px 0; border-right:none; border-bottom:1px solid var(--line); }
  .founder-offer-list ul{ text-align:left; max-width:360px; margin-inline:auto; }
  .founder-offer-cta{ flex:none; margin-left:0; padding-left:0; padding-top:24px; width:100%; }
  .founder-offer-cta .btn{ width:100%; justify-content:center; }
  .theme-dark .founder-offer-main,
  .theme-dark .founder-offer-list{ border-color:var(--dt-line); }
  .subnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  .sticky-wa{ display:flex; }
}

/* Hero — Zwischengröße (ab ca. halber Bildschirmbreite bis knapp über Mobil):
   Video liegt oben (Querformat, volle Breite), H1+H2 als Overlay auf dem Video,
   darunter Text, Vertrauenselemente und CTA. Gilt bis zur Mobile-Grenze (768px). */
@media (max-width:1024px){
  .hero-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "lede"
      "trust"
      "cta";
    align-items:start;
  }
  .hero-media{
    z-index:1;
    width:100%;
    height:clamp(300px,42vw,480px);
    align-self:start;
    justify-self:stretch;
  }
  .hero-media::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(0deg, rgba(43,46,34,.78) 0%, rgba(43,46,34,.2) 55%, transparent 78%);
  }
  .hero-heading{
    grid-area:media;
    position:relative;
    z-index:2;
    align-self:end;
    padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,32px);
  }
  .hero-h1{ color:var(--white); }
  .hero-h2{ color:var(--olive-100); }
  .hero-lede{
    grid-area:lede;
    margin-top:0;
    padding:clamp(20px,3vw,32px) clamp(20px,3vw,40px) 0;
    max-width:none;
  }
  .hero-cta-btn{
    margin-left:clamp(20px,3vw,40px);
    margin-right:clamp(20px,3vw,40px);
    min-height:44px;
    align-items:center;
  }
  .hero-trust{
    margin-left:clamp(20px,3vw,40px);
    margin-right:clamp(20px,3vw,40px);
    gap:20px;
  }
}

/* Startseiten-Hero unter 1025px: eigene, ruhige gestapelte Variante ohne
   Text-Overlay auf dem Video (bessere Lesbarkeit als die Tablet-Overlay-
   Lösung des Standort-Heros) — gilt einheitlich von Tablet bis Mobil,
   Reihenfolge: Headline/Subheadline → Video → Beschreibung → Benefits → CTA. */
@media (max-width:1024px){
  .hero:not(.hero-standort) .hero-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "heading"
      "media"
      "lede"
      "benefits"
      "cta";
    align-items:start;
    border-radius:var(--radius-l);
  }
  .hero:not(.hero-standort) .hero-heading{
    grid-area:heading;
    position:static;
    z-index:auto;
    align-self:auto;
    padding:clamp(28px,4vw,40px) clamp(24px,3.4vw,40px) 0;
  }
  .hero:not(.hero-standort) .hero-h1{
    color:var(--olive-900);
    font-size:clamp(2.1rem,4.6vw,2.8rem);
  }
  .hero:not(.hero-standort) .hero-h2{ color:var(--olive-600); }
  .hero:not(.hero-standort) .hero-media{
    grid-area:media;
    position:relative;
    z-index:auto;
    width:100%;
    height:auto;
    min-height:0;
    align-self:auto;
    justify-self:auto;
    aspect-ratio:16/9;
    margin:clamp(24px,3.4vw,32px) 0 0;
  }
  .hero:not(.hero-standort) .hero-lede{
    grid-area:lede;
    padding:clamp(20px,3vw,28px) clamp(24px,3.4vw,40px) 0;
    max-width:none;
  }
  .hero:not(.hero-standort) .hero-benefits{
    margin:clamp(24px,3.4vw,32px) clamp(24px,3.4vw,40px) 0;
  }
  .hero:not(.hero-standort) .hero-cta-row{
    margin:clamp(28px,3.6vw,36px) clamp(24px,3.4vw,40px) clamp(32px,4vw,40px);
  }
}

/* Hero — Mobil (unter 768px): eigenständige Variante, kein Overlay, kein CTA.
   Reihenfolge: H1 - H2 - Video (Querformat) - Text - Vertrauenselemente */
@media (max-width:768px){
  .hero-card{
    grid-template-areas:
      "heading"
      "media"
      "lede"
      "trust";
    border-radius:var(--radius-m);
    align-items:start;
  }
  .hero-heading{
    grid-area:heading;
    position:static;
    z-index:auto;
    align-self:auto;
    padding:28px 20px 0;
  }
  .hero-h1{ color:var(--olive-900); }
  .hero-h2{ margin-top:10px; color:var(--olive-600); }
  .hero-media{
    z-index:auto;
    width:100%;
    height:auto;
    min-height:0;
    align-self:start;
    justify-self:stretch;
    aspect-ratio:16/9;
    margin-top:clamp(20px,4vw,28px);
  }
  .hero-media::after{ content:none; }
  .hero-lede{
    padding-left:20px;
    padding-right:20px;
    line-height:1.65;
  }
  .hero-cta-btn{ display:none; }
  .hero-trust{
    margin-left:20px;
    margin-right:20px;
    margin-bottom:24px;
    gap:16px;
  }
}

@media (max-width:640px){
  .container{ padding:0 20px; }
  section{ padding:56px 0; }
  .site-header .container{ height:68px; }
  .main-nav.mobile-open{ top:68px; max-height:calc(100vh - 68px); }
  .subnav{ top:68px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .grid{ gap:14px; }
  .section-head{ margin-bottom:32px; }

  .pricing-toggle{ flex-direction:column; width:100%; max-width:320px; margin-inline:auto; }
  .pricing-toggle button{ padding:12px 20px; font-size:.92rem; justify-content:center; width:100%; }
  .founder-offer{ padding:28px 20px; }

  /* Leistungen-Karten (Akkordeon) kompakter, da sie auf Mobile einspaltig
     untereinander stehen und sonst viel vertikalen Platz beanspruchen */
  .card{ padding:20px 22px; }
  .card .icon{ width:42px; height:42px; margin-bottom:12px; }
  .card .icon svg{ width:21px; height:21px; }
  .card-toggle h3{ min-height:0; font-size:1.08rem; }

  /* Hero: noch kompakter auf kleinen Displays (links/rechts Abstand bleibt erhalten) */
  .hero{ padding:20px var(--hero-gap) 40px; }
  .hero-lede{ font-size:1.02rem; }

  /* Startseiten-Hero auf kleinen Displays: passt komplett auf einen
     Bildschirm — Eyebrow, Subheadline und Beschreibung werden ausgeblendet
     (unnötiger Text entfällt), die Benefit-Karten zeigen nur noch Icon
     und kurzen Titel statt der ausführlichen Beschreibung. */
  .hero:not(.hero-standort) .hero-h2,
  .hero:not(.hero-standort) .hero-lede{
    display:none;
  }
  .hero:not(.hero-standort) .hero-heading{
    padding:20px 20px 0;
  }
  .hero:not(.hero-standort) .hero-logo{
    height:42px;
    margin-bottom:14px;
  }
  .hero-promo{
    padding:6px 12px;
    font-size:.72rem;
    gap:6px;
    margin-bottom:10px;
  }
  .hero-promo svg{ width:12px; height:12px; }
  .hero:not(.hero-standort) .hero-h1{
    font-size:clamp(1.7rem,7vw,2.1rem);
    line-height:1.18;
  }
  .hero:not(.hero-standort) .hero-media{ margin-top:16px; }
  .hero:not(.hero-standort) .hero-benefits{
    gap:8px;
    margin:16px 20px 0;
  }
  .hero:not(.hero-standort) .hero-benefit{
    align-items:center;
    text-align:center;
    padding:12px 6px;
    gap:6px;
  }
  .hero:not(.hero-standort) .hero-benefit-icon{ width:32px; height:32px; }
  .hero:not(.hero-standort) .hero-benefit-icon svg{ width:16px; height:16px; }
  .hero:not(.hero-standort) .hero-benefit-text p{ display:none; }
  .hero:not(.hero-standort) .hero-benefit-text h4{ font-size:.78rem; }
  .hero-scroll-cue{ gap:6px; margin:16px auto 0; }
  .hero-scroll-cue-label{ font-size:.7rem; }
  .hero-scroll-cue-icon{ width:36px; height:36px; }
  .hero-scroll-cue-icon svg{ width:15px; height:15px; }
  .hero:not(.hero-standort) .hero-cta-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin:20px 20px 28px;
  }
  .hero:not(.hero-standort) .hero-cta-row .btn-lg{
    width:100%;
    justify-content:center;
    padding:17px 24px;
  }
  .hero:not(.hero-standort) .hero-cta-secondary{
    justify-content:center;
    font-size:.88rem;
  }

  .cta-band{ padding:40px 22px; border-radius:var(--radius-m); }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .loc-card .loc-body{ padding:24px; }

  /* Konsistente Linksbündigkeit */
  .section-head.center,
  .cta-band{
    text-align:left;
    margin-inline:0;
  }
  .cta-band p,
  .center-clamp{
    margin-inline:0;
    max-width:none;
  }
  .hero-cta.center,
  .hero-trust.center,
  .cta-band .hero-cta{
    justify-content:flex-start;
  }

  /* Subnav: alle Punkte in einer Reihe */
  .subnav{ padding:12px 0; }
  .subnav .container{ flex-wrap:nowrap; gap:6px; }
  .subnav a{ padding:7px 13px; font-size:.76rem; }

  /* "Mehr anzeigen" Textklappe */
  .readmore-body{
    position:relative;
    max-height:4.9em;
    overflow:hidden;
  }
  .readmore-body.expanded{ max-height:1000px; }
  .readmore-body:not(.expanded)::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:1.6em;
    background:linear-gradient(0deg, var(--cream), rgba(250,249,244,0));
  }
  .section-tint .readmore-body:not(.expanded)::after{
    background:linear-gradient(0deg, var(--olive-50), rgba(241,243,233,0));
  }
  .readmore-toggle{
    display:inline-block;
    margin:2px 0 1.1em;
    background:none;
    border:none;
    padding:0;
    color:var(--olive-700);
    font-weight:700;
    font-size:.92rem;
    text-decoration:underline;
    text-underline-offset:2px;
  }

  /* Karten-Akkordeon: nur auf Mobile aktiv */
  .card-toggle{ cursor:pointer; }
  .card-toggle .chevron{
    display:block;
    width:20px; height:20px;
    color:var(--olive-500);
    flex-shrink:0;
    transition:transform .3s ease;
  }
  .card-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }
  .card-desc{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .card-toggle[aria-expanded="true"] + .card-desc{ max-height:220px; }
}

/* =========================================================
   Standort-Hero (Schrobenhausen & Aresing)
   Eigenständiger, in sich geschlossener Block für alle
   Breakpoints — unabhängig vom Startseiten-Hero, da hier
   andere Textlängen (Status-Badge, längere H1/H2) und ein
   dauerhaft sichtbarer CTA nötig sind.
   ========================================================= */
@media (max-width:1024px){
  .hero-standort .hero-h1{ font-size:clamp(1.9rem,4.4vw,2.6rem); }
  .hero-standort .hero-h2{ font-size:clamp(1.15rem,2.6vw,1.5rem); }
}

@media (max-width:768px){
  .hero-standort .hero-card{
    grid-template-areas:
      "heading"
      "media"
      "lede"
      "cta"
      "trust";
  }
  /* Verhindert, dass ein einzelnes breites Grid-Item (v.a. der CTA-Button
     mit langem, nicht-umbrechendem Text) die gesamte Karte über die
     Bildschirmbreite hinaus aufzieht. */
  .hero-standort .hero-heading,
  .hero-standort .hero-media,
  .hero-standort .hero-lede,
  .hero-standort .hero-cta-btn,
  .hero-standort .hero-trust{
    min-width:0;
  }
  .hero-standort .hero-heading{
    padding:28px 20px 0;
  }
  .hero-standort .hero-h1{
    font-size:clamp(1.6rem,6.5vw,2rem);
    color:var(--olive-900);
  }
  .hero-standort .hero-h2{
    font-size:clamp(1.05rem,4.2vw,1.25rem);
    margin-top:10px;
    color:var(--olive-600);
  }
  .hero-standort .hero-media{
    grid-area:media;
    width:100%;
    aspect-ratio:16/9;
    margin-top:clamp(20px,4vw,28px);
  }
  .hero-standort .hero-lede{
    grid-area:lede;
    padding:clamp(18px,3vw,24px) 20px 0;
    line-height:1.65;
  }
  .hero-standort .hero-cta-btn{
    grid-area:cta;
    display:flex;
    justify-content:center;
    text-align:center;
    white-space:normal;
    margin:20px 20px 0;
    min-height:44px;
  }
  .hero-standort .hero-trust{
    grid-area:trust;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin:28px 20px 24px;
  }
  .hero-standort .hero-trust div{
    width:100%;
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--olive-100);
    padding-top:12px;
  }
  .hero-standort .hero-trust div:first-child{
    border-top:none;
    padding-top:0;
  }
  .hero-standort .hero-leistungen{
    padding:14px 20px 24px;
  }
}

/* Standort-Hero: Leistungen vor Ort kompakt im Hero-Rahmen. Als Fallback
   (Tablet/Mobil, einspaltiges Grid) spannt der Block die volle Kartenbreite
   unterhalb der übrigen Inhalte; am Desktop wird er per grid-area gezielt
   in die linke Textspalte gestellt (siehe Media-Query unten), sodass das
   Bild rechts die gesamte Höhe der Karte vollflächig einnimmt. */
.hero-standort .hero-leistungen{
  grid-column:1 / -1;
  padding:16px clamp(28px,3.5vw,56px) clamp(28px,3.2vw,40px);
  border-top:1px solid var(--line);
}
.hero-standort .hero-leistungen .eyebrow{
  display:block;
  margin:0 0 10px;
}
.hero-standort .hero-leistungen .checklist li{
  margin-bottom:8px;
  font-size:.92rem;
}
.hero-standort .hero-leistungen .checklist li:last-child{ margin-bottom:0; }
.hero-standort .hero-leistungen .checklist li svg{ width:16px; height:16px; margin-top:2px; }

/* Hero-Rahmen: beginnt direkt unter der Nav (kein Abstand nach oben) */
.hero-standort{ padding-top:0; }

/* Hero-Rahmen am Desktop vollflächig (randlos, ohne Rundung). Das Bild
   nimmt die komplette rechte Spalte über die volle Kartenhöhe ein,
   links stehen Überschrift, Text, CTA, Trust und Leistungen kompakt
   gestapelt. */
@media (min-width:1025px){
  .hero-standort{
    padding-left:0;
    padding-right:0;
  }
  .hero-standort .hero-card{
    border-radius:0;
    min-height:calc(100vh - 74px);
    grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:
      "heading    media"
      "lede       media"
      "cta        media"
      "trust      media"
      "leistungen media";
  }
  .hero-standort .hero-leistungen{
    grid-area:leistungen;
    grid-column:auto;
    padding:18px clamp(28px,3.5vw,56px) clamp(30px,3.2vw,44px);
  }
}

/* =========================================================
   Kundenreise (Startseite)
   ========================================================= */
/* Interaktiver Zeitstrahl: Mobil-Basis ist eine kompakte, vertikale
   Anordnung; ab 861px wird auf eine horizontale Linie umgeschaltet, die
   exakt am ersten Punkt beginnt und am letzten endet. Sobald die Sektion
   ins Sichtfeld scrollt, setzt main.js einmalig .is-active auf .journey —
   die Linie zeichnet sich nach (Breite/Höhe 0 → 100%) und die Punkte
   blenden gestaffelt (nth-child-Delay) mit einem kleinen Bounce ein.
   Die Punkte selbst sind randlos (volltonig gefüllt). */
/* .journey liegt jetzt außerhalb von .container (volle Sektionsbreite),
   damit der Zeitstrahl am Desktop fast bildschirmbreit laufen kann.
   Mobil sorgt eigenes Padding für Abstand zum Rand; am Desktop übernimmt
   stattdessen eine gedeckelte, zentrierte Breite (kein Padding), damit
   die Prozent-Positionierung der Linie exakt mit den Punkten übereinstimmt. */
.journey{
  position:relative;
  --journey-pad: clamp(20px,5vw,32px);
  padding:0 var(--journey-pad);
}

.journey-line{
  position:absolute;
  left:calc(var(--journey-pad) + 17px);
  /* 17px = halbe Punktgröße, +12px = vertikales Padding von .journey-step
     (erster/letzter Punkt sitzt nicht direkt an der Kante, sondern innerhalb
     dieses Innenabstands) — sonst läuft die Linie über Punkt 1/8 hinaus. */
  top:calc(12px + 17px);
  bottom:calc(12px + 17px);
  width:2px;
  background:var(--line);
  z-index:0;
  overflow:hidden;
}
.journey-line-fill{
  position:absolute;
  left:0; top:0; right:0;
  height:0;
  background:var(--olive-600);
  transition:height 1.3s cubic-bezier(.4,0,.2,1);
}
.journey.is-active .journey-line-fill{ height:100%; }

.journey-steps{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.journey-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:12px 0;
}
.journey-dot{
  position:relative;
  z-index:2;
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--olive-600);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.45);
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.journey.is-active .journey-dot{ opacity:1; transform:scale(1); }
.journey-step:nth-child(1) .journey-dot{ transition-delay:.05s; }
.journey-step:nth-child(2) .journey-dot{ transition-delay:.15s; }
.journey-step:nth-child(3) .journey-dot{ transition-delay:.25s; }
.journey-step:nth-child(4) .journey-dot{ transition-delay:.35s; }
.journey-step:nth-child(5) .journey-dot{ transition-delay:.45s; }
.journey-step:nth-child(6) .journey-dot{ transition-delay:.55s; }
.journey-step:nth-child(7) .journey-dot{ transition-delay:.65s; }
.journey-step:nth-child(8) .journey-dot{ transition-delay:.75s; }

.journey-step .num{ font-size:.85rem; font-weight:700; }

.journey-card{
  padding:6px 10px;
  border-radius:var(--radius-m);
  flex:1 1 0;
  min-width:0;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.journey-step:hover .journey-card,
.journey-step:focus-within .journey-card{
  background:var(--cream);
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}
.journey-step:hover .journey-dot,
.journey-step:focus-within .journey-dot{ box-shadow:0 0 0 6px rgba(107,117,80,.16); }

/* overflow-wrap: einzelne lange Wörter (z.B. "Geräteeinstellungen") sind
   sonst unteilbar und sprengen die schmale Spalte — genau die Bugklasse,
   die beim Hero schon behoben wurde. */
.journey-card h4{ margin:0 0 2px; font-size:.98rem; color:var(--olive-900); overflow-wrap:break-word; }
.journey-card p{ margin:0; font-size:.86rem; line-height:1.5; color:var(--ink-soft); overflow-wrap:break-word; }
.journey-cta{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  margin-top:12px;
  padding:12px 16px;
  border-radius:var(--radius-m);
  font-size:.84rem;
  white-space:normal;
  text-align:center;
}

/* Desktop ab 861px: Linie und Punkte laufen horizontal, Karten stehen
   zentriert unter jedem Punkt. Die Linie beginnt exakt am horizontalen
   Zentrum des ersten Punkts und endet am letzten (bei 8 gleich breiten
   Spalten liegt das Zentrum jeweils bei 1/16 bzw. 15/16 der Breite). */
@media (min-width:861px){
  /* Kein Padding mehr, sondern eine gedeckelte, zentrierte Breite — so
     bleibt .journey selbst exakt die Bezugsbox für die Prozent-Werte der
     Linie (sonst würde ein Padding die Linie gegenüber den tatsächlichen
     Punktmitten verschieben). Nutzt fast die gesamte Bildschirmbreite,
     auf sehr breiten Screens gedeckelt. */
  .journey{
    padding:0;
    width:min(94vw, 1600px);
    margin:0 auto;
  }
  .journey-line{
    left:calc(100% / 16);
    right:calc(100% / 16);
    top:22px;
    bottom:auto;
    width:auto;
    height:2px;
  }
  .journey-line-fill{
    left:0; top:0; right:auto; bottom:0;
    width:0;
    height:auto;
    transition:width 1.6s cubic-bezier(.4,0,.2,1);
  }
  .journey.is-active .journey-line-fill{ width:100%; height:100%; }

  .journey-steps{
    flex-direction:row;
    align-items:flex-start;
    gap:0;
  }
  .journey-step{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:0;
    padding:0 clamp(6px,1.2vw,14px);
  }
  .journey-dot{ align-self:center; width:44px; height:44px; margin-bottom:18px; flex-shrink:0; }
  .journey-step .num{ font-size:.95rem; }
  /* Karte exakt auf die verfügbare Spaltenbreite zwingen (statt an ihrem
     Inhalt/dem Button auszurichten) — verhindert, dass ein langes Wort
     oder der CTA-Button die Spalte sprengt und Punkte aus dem Bild
     schiebt. */
  .journey-card{ width:100%; min-width:0; }
  .journey-card h4{ font-size:clamp(.86rem,1vw,1.02rem); }
  .journey-card p{ font-size:clamp(.76rem,.85vw,.9rem); }
  .journey-cta{
    max-width:100%;
    margin-top:14px;
    padding:9px clamp(10px,1.4vw,20px);
    font-size:clamp(.72rem,.78vw,.84rem);
  }
}

/* =========================================================
   Standorte — zwei abgerundete Karten nebeneinander (eigene Seite
   standorte.html). Statt randloser Vollflächen-Panels jetzt klar
   abgesetzte Karten mit Radius, Schatten und Abstand zueinander.
   ========================================================= */
.standorte-hero{
  padding:clamp(28px, 3.4vw, 48px) 0 var(--space-section);
}
/* Deutlich größer als der normale Content-Container, damit die Karten
   den gesamten Hero-Bereich einnehmen — dabei per clamp()/vh weiterhin
   responsive (wächst mit der Bildschirmhöhe, aber gedeckelt). */
.standorte-intro{
  max-width:720px;
  margin:0 auto 20px;
  text-align:center;
}
.standorte-intro h1{ margin-bottom:.3em; font-size:clamp(1.9rem, 3vw, 2.6rem); }
.standorte-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:1600px;
}
.standort-panel{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(420px, 58vh, 680px);
  padding:56px;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .25s ease, transform .25s ease;
}
.standort-panel:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
}
.standort-panel img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
  z-index:-2;
}
.standort-panel::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,16,10,.8) 0%, rgba(20,16,10,.32) 55%, rgba(20,16,10,.08) 100%);
  z-index:-1;
}
.standort-panel:hover img{ transform:scale(1.05); }
.standort-panel-body{ position:relative; max-width:480px; }
.standort-panel-body .status-badge{ margin-bottom:16px; }
.standort-panel-body h2{ color:var(--white); margin-bottom:.3em; font-size:clamp(1.9rem,3vw,2.6rem); }
.standort-panel-body p{ color:rgba(255,255,255,.82); margin-bottom:24px; font-size:1.05rem; }
.standort-panel-link{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:.98rem;
  color:var(--olive-900);
  background:var(--white);
  padding:13px 24px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.standort-panel-link svg{ width:18px; height:18px; transition:transform .25s ease; flex-shrink:0; }
.standort-panel:hover .standort-panel-link{
  background:var(--olive-600);
  color:var(--white);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  transform:translateY(-2px);
}
.standort-panel:hover .standort-panel-link svg{ transform:translateX(4px); }

@media (max-width:768px){
  .standorte-hero-inner{ grid-template-columns:1fr; gap:20px; }
  .standort-panel{ min-height:clamp(420px, 62vh, 620px); padding:32px 24px; }
  .standort-panel-body{ max-width:none; }
  .standort-panel-body h2{ font-size:clamp(1.7rem,7vw,2.1rem); }
}

/* =========================================================
   Preise: Standort-Toggle (Angebot-Seite)
   ========================================================= */
.pricing-toggle-wrap{ text-align:center; margin-bottom:40px; }
.pricing-toggle-label{
  display:block;
  font-size:.86rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.pricing-toggle{
  display:inline-flex;
  gap:6px;
  padding:6px;
  background:var(--olive-50);
  border:1.5px solid var(--olive-200);
  border-radius:999px;
}
.pricing-toggle button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:13px 30px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  color:var(--olive-700);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pricing-toggle button svg{ width:18px; height:18px; flex-shrink:0; opacity:.8; }
.pricing-toggle button:hover:not(.active){ background:rgba(107,117,80,.1); }
.pricing-toggle button.active{
  background:var(--olive-600);
  color:var(--white);
  box-shadow:var(--shadow-soft);
}
.pricing-toggle button.active svg{ opacity:1; }
[data-pricing-panel]{ display:none; }
[data-pricing-panel].active{ display:block; }

/* =========================================================
   Dark Theme
   Aktivierung über Klasse .theme-dark — entweder auf <body>
   (Standort Aresing, durchgängig) oder auf einer einzelnen
   Sektion (Angebot-Preise, nur bei ausgewähltem Standort
   Aresing). Eigene dt-* Variablen, da --olive-900 etc. an
   anderer Stelle bereits als Hintergrundfarbe (Footer,
   CTA-Band) dienen und nicht einfach umdefiniert werden
   können, ohne die helle Version zu brechen.
   ========================================================= */
.theme-dark{
  --dt-bg:#efece6;
  --dt-bg-alt:#e5e1da;
  --dt-surface:#e3dcd4;
  --dt-surface-hover:#ddd4cb;
  --dt-line: rgba(76,54,37,.16);
  --dt-text:#4c3625;
  --dt-text-soft:#6d5a4c;
  --dt-text-faint:#857669;
  --dt-accent:#c4b2a5;
  --dt-accent-strong:#ae9c8e;
  --dt-shadow: 0 16px 44px rgba(76,54,37,.18);
  background:var(--dt-bg);
  color:var(--dt-text-soft);
}

.theme-dark .site-header{
  background:rgba(239,236,230,.9);
  border-bottom-color:var(--dt-line);
}
.theme-dark .main-nav a{ color:var(--dt-text-soft); }
.theme-dark .main-nav a:hover,
.theme-dark .main-nav a.active{ color:var(--dt-text); }
.theme-dark .main-nav a.active::after{ background:var(--dt-text); }
.theme-dark .nav-toggle .bars span{ background:var(--dt-text); }
.theme-dark .main-nav.mobile-open{ background:var(--dt-bg); border-bottom-color:var(--dt-line); }
.theme-dark .main-nav.mobile-open a{ border-bottom-color:var(--dt-line); }

.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4{ color:var(--dt-text); }
.theme-dark p{ color:var(--dt-text-soft); }
.theme-dark .eyebrow{ color:var(--dt-text); }

.theme-dark .hero-card{ background:var(--dt-surface); box-shadow:var(--dt-shadow); }
.theme-dark .hero-h2{ color:var(--dt-text); }
.theme-dark .hero-trust{ border-top-color:var(--dt-line); }
.theme-dark .hero-trust div{ color:var(--dt-text-faint); border-left-color:var(--dt-text); }
.theme-dark .hero-trust strong{ color:var(--dt-text); }
.theme-dark .hero-standort .hero-trust div{ border-top-color:var(--dt-line); }

.theme-dark .status-badge.active{ background:rgba(76,54,37,.14); color:var(--dt-text); }
.theme-dark .status-badge.upcoming{ background:rgba(76,54,37,.08); color:var(--dt-text-soft); }

.theme-dark .section-tint{ background:var(--dt-bg-alt); }
.theme-dark .section-line-top{ border-top-color:var(--dt-line); }

.theme-dark .card{ background:var(--dt-surface); border-color:var(--dt-line); }
.theme-dark .card:hover{ border-color:var(--dt-text); box-shadow:var(--dt-shadow); }
.theme-dark .card .icon{ background:var(--dt-bg-alt); color:var(--dt-text); }

.theme-dark .checklist li{ color:var(--dt-text-soft); }
.theme-dark .checklist li svg{ color:var(--dt-text); }

.theme-dark .readmore-body:not(.expanded)::after{
  background:linear-gradient(0deg, var(--dt-bg), rgba(239,236,230,0));
}
.theme-dark .section-tint .readmore-body:not(.expanded)::after{
  background:linear-gradient(0deg, var(--dt-bg-alt), rgba(229,225,218,0));
}
.theme-dark .readmore-toggle{ color:var(--dt-text); }

.theme-dark .loc-card{ background:var(--dt-surface); border-color:var(--dt-line); }
.theme-dark a.loc-card:hover{ border-color:var(--dt-text); }
.theme-dark .loc-meta div{ color:var(--dt-text-soft); }
.theme-dark .loc-meta svg{ color:var(--dt-text); }

.theme-dark .loc-preview{ background:var(--dt-surface); border-color:var(--dt-line); box-shadow:var(--dt-shadow); }
.theme-dark .loc-preview:hover{ border-color:var(--dt-text); }
.theme-dark .loc-preview-text small{ color:var(--dt-text); }
.theme-dark .loc-preview-text strong{ color:var(--dt-text); }
.theme-dark .loc-preview-arrow{ color:var(--dt-text); }

.theme-dark .quote-block{ border-left-color:var(--dt-text); }
.theme-dark .quote-block p{ color:var(--dt-text); }

.theme-dark .btn-primary{ background:var(--dt-accent); color:var(--dt-text); }
.theme-dark .btn-primary:hover{ background:var(--dt-accent-strong); }
.theme-dark .btn-outline{ border-color:var(--dt-line); color:var(--dt-text); }
.theme-dark .btn-outline:hover{ border-color:var(--dt-text); background:rgba(76,54,37,.08); }
.theme-dark .btn-ghost{ background:var(--dt-surface); color:var(--dt-text); }
.theme-dark .btn-ghost:hover{ background:var(--dt-surface-hover); }

.theme-dark .cta-band{ background:var(--dt-accent); color:var(--dt-text); }
.theme-dark .cta-band h2, .theme-dark .cta-band p{ color:var(--dt-text); }
.theme-dark .cta-band p{ opacity:.82; }
.theme-dark .cta-band .btn-outline{ border-color:rgba(76,54,37,.4); color:var(--dt-text); }
.theme-dark .cta-band .btn-outline:hover{ background:rgba(76,54,37,.1); border-color:var(--dt-text); }

.theme-dark .site-footer{ background:var(--dt-bg-alt); color:var(--dt-text-soft); }
.theme-dark .site-footer h4{ color:var(--dt-text); }
.theme-dark .site-footer p, .theme-dark .site-footer a{ color:var(--dt-text-faint); }
.theme-dark .site-footer a:hover{ color:var(--dt-text); }
.theme-dark .footer-grid{ border-bottom-color:var(--dt-line); }
.theme-dark .footer-bottom{ color:var(--dt-text-faint); }
.theme-dark .footer-credit{ border-top-color:var(--dt-line); color:var(--dt-text-faint); }

.theme-dark .subnav{ background:rgba(239,236,230,.94); border-bottom-color:var(--dt-line); }
.theme-dark .subnav a{ background:var(--dt-surface); color:var(--dt-text-soft); }
.theme-dark .subnav a:hover{ background:var(--dt-surface-hover); }
.theme-dark .subnav a.active{ background:var(--dt-accent); color:var(--dt-text); }

.theme-dark .pricing-toggle-label{ color:var(--dt-text-soft); }
.theme-dark .pricing-toggle{ background:var(--dt-bg-alt); border-color:var(--dt-line); }
.theme-dark .pricing-toggle button{ color:var(--dt-text-soft); }
.theme-dark .pricing-toggle button:hover:not(.active){ background:rgba(76,54,37,.08); }
.theme-dark .pricing-toggle button.active{ background:var(--dt-accent); color:var(--dt-text); }

.theme-dark .pricing-card{ background:var(--dt-surface); border-color:var(--dt-line); }
.theme-dark .pricing-card.featured{ border-color:var(--dt-text); }
.theme-dark .pricing-card:hover{ box-shadow:0 16px 44px rgba(76,54,37,.22); }
.theme-dark .pricing-badge{ background:var(--dt-accent); color:var(--dt-text); }
.theme-dark .pricing-card .plan-name{ color:var(--dt-text); }
.theme-dark .pricing-card .price{ color:var(--dt-text); }
.theme-dark .pricing-card .price small{ color:var(--dt-text-faint); }
.theme-dark .pricing-card .term{ color:var(--dt-text-soft); border-bottom-color:var(--dt-line); }
.theme-dark .pricing-card ul li{ color:var(--dt-text-soft); }
.theme-dark .pricing-card ul li svg{ color:var(--dt-text); }
.theme-dark .pricing-note{ color:var(--dt-text-faint); }

.theme-dark .offer-card-primary{ box-shadow:0 24px 56px rgba(76,54,37,.16); }
.theme-dark .offer-savings{ border-color:var(--dt-text); background:transparent; color:var(--dt-text); }
.theme-dark .price-strike{ color:var(--dt-text-faint); }

.theme-dark .sticky-wa{ box-shadow:0 10px 30px rgba(0,0,0,.5); }