/* ERZEUGTE KOPIE, nicht hier bearbeiten. Quelle: gemeinsam/tg.css */
/* ==========================================================================
   TamanGa · Metabolic Reset  ·  Design-System
   Farben stammen aus der echten TamanGa-Seite: #423737 warmes Braunschwarz
   als Textfarbe, #8FB73E als Markengruen. Ergaenzt um Papiertoene und Messing.
   ========================================================================== */

:root{
  /* Grundflaechen */
  --paper:#FAF8F2;
  --paper-2:#FFFDF8;
  --paper-3:#F1EEE4;
  --paper-4:#E8E4D6;
  --white:#FFFFFF;

  /* Dunkel, immer warm, nie schwarz */
  --ink:#423737;
  --ink-2:#6B5D5B;
  --ink-3:#948682;
  --dark:#403634;
  --dark-2:#4C4240;

  /* Gruen */
  --green:#8FB73E;
  --green-600:#78A02D;
  --green-700:#5E7F22;
  --green-800:#3F5A18;
  --green-900:#38492B;
  --green-50:#F2F6E8;
  --green-100:#E4EDD1;

  /* Messing als Premium-Akzent */
  --brass:#B99A5B;
  --brass-2:#9C7F42;
  --brass-50:#F7F1E3;

  /* Linien */
  --line:#E3DFD3;
  --line-2:#CFC9B8;
  --line-dark:rgba(255,255,255,.16);

  /* Radien bewusst klein, das haelt die Seite erwachsen */
  /* Eine einzige Radienfamilie. Vorher war das uneinheitlich und sah gebastelt aus. */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --nav-h:70px;
  --wrap:1180px;
  --wrap-wide:1340px;
  --wrap-narrow:820px;

  --sh-1:0 1px 2px rgba(66,55,55,.04),0 6px 18px rgba(66,55,55,.05);
  --sh-2:0 2px 8px rgba(66,55,55,.05),0 18px 48px rgba(66,55,55,.08);
  --sh-3:0 36px 90px rgba(66,55,55,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--green);color:#fff}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0 0 .6em;font-weight:300;line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(2.5rem,6.2vw,5.1rem);letter-spacing:-.038em}
h2{font-size:clamp(1.95rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.25rem,2.1vw,1.72rem);line-height:1.22;letter-spacing:-.022em;font-weight:500}
h4{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
h1 strong,h2 strong,h3 strong,.em{font-weight:600;color:var(--green-700)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink-2);font-weight:400}
.big{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;font-weight:300;color:var(--ink)}
small,.small{font-size:.86rem;line-height:1.55}
.mut{color:var(--ink-2)}
.tiny{font-size:.78rem;line-height:1.5;color:var(--ink-3)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1rem;
  font-size:.71rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-700);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green);flex:none}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-light{color:var(--green)}
.eyebrow.is-light::before{background:var(--green)}
.eyebrow.no-line::before{display:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px}
.pad{padding:clamp(64px,8.5vw,124px) 0}
.pad-lg{padding:clamp(80px,11vw,164px) 0}
.pad-sm{padding:clamp(44px,5.5vw,76px) 0}
.sec{position:relative}

.dark{background:var(--dark);color:rgba(255,255,255,.82)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark h1 strong,.dark h2 strong,.dark h3 strong,.dark .em{color:var(--green)}
.dark .lead,.dark .big{color:rgba(255,255,255,.76)}
.dark .mut{color:rgba(255,255,255,.62)}
.dark .tiny{color:rgba(255,255,255,.5)}
.forest{background:var(--green-900);color:rgba(255,255,255,.84)}
.forest h1,.forest h2,.forest h3,.forest h4{color:#fff}
.forest h2 strong,.forest .em{color:var(--green)}
.forest .lead{color:rgba(255,255,255,.78)}
.soft{background:var(--paper-3)}
.cream{background:var(--paper-2)}
.leaf{background:var(--green-50)}

.sec-head{max-width:760px;margin-bottom:clamp(34px,4.4vw,60px)}
.sec-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.is-wide{max-width:920px}

.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split.is-wide-left{grid-template-columns:1.15fr .85fr}
.split.is-wide-right{grid-template-columns:.85fr 1.15fr}
.split.is-top{align-items:start}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  padding:.95em 1.8em;border:1px solid transparent;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;letter-spacing:.005em;text-decoration:none;
  cursor:pointer;transition:transform .18s ease,box-shadow .22s ease,background .18s ease,color .18s ease,border-color .18s ease;
  line-height:1.2;text-align:center;
}
.btn .arrow{transition:transform .22s ease;display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}
.btn-green{background:var(--green-600);color:#fff;box-shadow:0 2px 10px rgba(120,160,45,.28)}
.btn-green:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:0 8px 26px rgba(120,160,45,.34)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--dark);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(66,55,55,.03)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{padding:1.08em 2.15em;font-size:1rem}
.btn-sm{padding:.66em 1.2em;font-size:.82rem}
.btn-block{display:flex;width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-row.is-center{justify-content:center}
.cta-note{font-size:.83rem;color:var(--ink-3);margin-top:1rem}
.dark .cta-note,.forest .cta-note{color:rgba(255,255,255,.55)}

/* ---------- Ankuendigungsleiste ---------- */
.anno{
  background:var(--green-900);color:rgba(255,255,255,.9);
  font-size:.8rem;letter-spacing:.01em;text-align:center;padding:.6rem 20px;
  position:relative;z-index:60;
}
.anno b{color:var(--green);font-weight:600}
.anno a{color:#fff;text-underline-offset:3px}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,242,.86);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 18px rgba(66,55,55,.06)}
.hdr-in{
  max-width:var(--wrap-wide);margin:0 auto;padding:0 24px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{height:36px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.12;padding-left:12px;border-left:1px solid var(--line-2)}
.brand-name{font-size:1.02rem;font-weight:300;letter-spacing:-.01em;color:var(--ink)}
.brand-name strong{font-weight:600}
.brand-sub{font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--green-700);font-weight:600}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){
  padding:.55em .8em;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;
  font-size:.87rem;font-weight:500;color:var(--ink-2);transition:color .16s ease,background .16s ease;
}
.nav a:not(.btn):hover{color:var(--ink);background:rgba(66,55,55,.04)}
.nav .btn{margin-left:10px;white-space:nowrap}
.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;
  border-radius:var(--r-md);cursor:pointer;position:relative;flex:none;
}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);
  transition:transform .24s ease,opacity .18s ease;
}
.burger::before{top:14px}.burger span{top:20px}.burger::after{top:26px}
.burger.is-on::before{transform:translateY(6px) rotate(45deg)}
.burger.is-on span{opacity:0}
.burger.is-on::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:45;background:var(--paper);
  padding:calc(var(--nav-h) + 30px) 24px 40px;
  display:flex;flex-direction:column;gap:2px;
  transform:translateY(-100%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .24s ease,visibility 0s .32s;
  overflow-y:auto;
}
.mnav.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.mnav a{
  padding:1rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:1.16rem;font-weight:300;letter-spacing:-.015em;color:var(--ink);
}
/* .mnav a färbte den grünen Knopf dunkel und dünn, deshalb hier zurück */
.mnav .btn{margin-top:22px;border-bottom:0;color:#fff;font-weight:600;letter-spacing:0}

/* ---------- Chatfenster (GoHighLevel) ---------- */
/* Solange das Handy-Menue offen ist, ruht die Sprechblase. Sonst schwebt
   sie mit ihrer sehr hohen Ebene ueber der Navigation. */
body:has(#mnav.is-open) chat-widget{display:none}
/* Im Kopfbereich ruht der Chat, sonst liegt er auf dem Knopf «Jetzt Platz
   sichern». tg.js setzt .chat-frei, sobald jemand weitergescrollt hat. */
body:not(.chat-frei) chat-widget{display:none}

/* ---------- Sticky CTA mobil ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:44;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
  gap:10px;align-items:center;
  transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sticky-cta.is-on{transform:none}
.sticky-cta .sc-txt{flex:1;min-width:0;line-height:1.25}
.sticky-cta .sc-a{display:block;font-size:.82rem;font-weight:600;color:var(--ink)}
.sticky-cta .sc-b{display:block;font-size:.7rem;color:var(--ink-3)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--green-900);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  /* Zwei Verlaeufe: einer traegt die linksbuendige Schrift, einer haelt oben
     und unten die Kanten zusammen. So bleibt das Bild rechts sichtbar. */
  background:
    linear-gradient(90deg,rgba(22,30,17,.86) 0%,rgba(22,30,17,.66) 42%,rgba(22,30,17,.22) 100%),
    linear-gradient(180deg,rgba(22,30,17,.5) 0%,rgba(22,30,17,.22) 42%,rgba(22,30,17,.7) 100%);
}
/* Zentrierte Heros brauchen einen symmetrischen Schleier */
.hero.is-center .hero-bg::after{
  background:
    radial-gradient(120% 100% at 50% 50%,rgba(22,30,17,.55) 0%,rgba(22,30,17,.8) 100%),
    linear-gradient(180deg,rgba(22,30,17,.4) 0%,rgba(22,30,17,.3) 45%,rgba(22,30,17,.72) 100%);
}
/* Foto rechts: die Person steht in der Bildmitte, deshalb bekommt das Foto die
   rechte Seite und die Schrift steht links auf dem dunklen Grund. */
.hero.is-foto-rechts .hero-bg img{position:absolute;top:0;right:0;width:62%;height:100%;object-position:center 38%}
.hero.is-foto-rechts .hero-bg::after{
  background:
    linear-gradient(90deg,rgba(22,30,17,.94) 0%,rgba(22,30,17,.9) 38%,rgba(22,30,17,.5) 52%,rgba(22,30,17,.08) 74%,rgba(22,30,17,0) 100%),
    linear-gradient(180deg,rgba(22,30,17,.45) 0%,rgba(22,30,17,0) 28%,rgba(22,30,17,0) 72%,rgba(22,30,17,.5) 100%);
}
.hero.is-foto-rechts .hero-sub{max-width:36rem}
/* Mittlere Breiten: Foto etwas schmaler, damit der Einleitungstext auf dem Grund bleibt */
@media (min-width:901px) and (max-width:1240px){
  .hero.is-foto-rechts .hero-bg img{width:54%}
  .hero.is-foto-rechts .hero-bg::after{
    background:
      linear-gradient(90deg,rgba(22,30,17,.94) 0%,rgba(22,30,17,.9) 46%,rgba(22,30,17,.45) 60%,rgba(22,30,17,.06) 80%,rgba(22,30,17,0) 100%),
      linear-gradient(180deg,rgba(22,30,17,.45) 0%,rgba(22,30,17,0) 28%,rgba(22,30,17,0) 72%,rgba(22,30,17,.5) 100%);
  }
  .hero.is-foto-rechts .hero-sub{max-width:30rem}
}
/* Schmal: das Foto als Streifen ganz oben, die Schrift darunter auf dem Grund.
   Als Hintergrund hinter dem Text waere es hier nur noch ein dunkler Ausschnitt. */
@media (max-width:900px){
  .hero.is-foto-rechts .hero-bg{position:relative;inset:auto;z-index:0;height:calc(var(--nav-h) + clamp(220px,58vw,360px))}
  .hero.is-foto-rechts .hero-bg img{position:static;width:100%;height:100%;object-position:center 45%}
  .hero.is-foto-rechts .hero-bg::after{
    background:linear-gradient(180deg,rgba(22,30,17,.6) 0%,rgba(22,30,17,.08) 34%,rgba(22,30,17,.12) 68%,var(--green-900) 100%);
  }
  .hero.is-foto-rechts .hero-in{padding-top:clamp(16px,5vw,28px)}
}
.hero-in{
  position:relative;max-width:var(--wrap-wide);margin:0 auto;padding:0 24px;
  min-height:clamp(600px,90vh,880px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(70px,9vw,110px);padding-bottom:clamp(56px,7vw,90px);
}
.hero-col{max-width:820px}
.hero h1{color:#fff;margin-bottom:1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero h1 strong{color:var(--green);font-weight:600}
.hero-sub{
  font-size:clamp(1.06rem,1.75vw,1.42rem);line-height:1.52;font-weight:300;
  color:rgba(255,255,255,.9);max-width:640px;margin-bottom:1.9rem;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.5rem;
  padding:.42em 1em .42em .55em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.76rem;font-weight:500;letter-spacing:.02em;color:#fff;
}
.hero-kicker b{
  background:var(--green);color:var(--green-900);font-weight:700;
  padding:.3em .7em;border-radius:var(--r-pill);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(34px,4.6vw,58px);
  border-top:1px solid rgba(255,255,255,.2);padding-top:26px;
}
.hero-facts>div{padding-right:clamp(22px,3.4vw,46px);margin-right:clamp(22px,3.4vw,46px);border-right:1px solid rgba(255,255,255,.16)}
.hero-facts>div:last-child{border-right:0;margin-right:0;padding-right:0}
.hf-n{display:block;font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:300;color:#fff;line-height:1.1;letter-spacing:-.03em}
.hf-l{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:.4em;font-weight:500}
.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  color:rgba(255,255,255,.5);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.scroll-hint i{display:block;width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:sh 2.2s ease-in-out infinite}
@keyframes sh{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Vertrauensband ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--paper-2)}
.trust-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);padding:22px 0}
.trust-i{display:flex;align-items:center;gap:.65em;font-size:.83rem;color:var(--ink-2);font-weight:500}
.trust-i img{height:38px;width:auto;opacity:.9}
.trust-i svg{width:19px;height:19px;color:var(--green-600);flex:none}

/* ---------- Karten ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(22px,2.6vw,32px);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.card.is-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card h3,.card .hd-s{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.dark .card,.forest .card{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:rgba(255,255,255,.76)}
/* Kacheln auf dunklem Grund muessen mitziehen, sonst steht die weisse
   Ueberschrift aus der .dark-Regel auf weissem Kartengrund. */
.dark .tile,.forest .tile{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.dark .tile p,.forest .tile p{color:rgba(255,255,255,.72)}

.ico{
  width:52px;height:52px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--green-50);color:var(--green-700);margin-bottom:1.1rem;flex:none;
}
.ico svg{width:23px;height:23px}
.dark .ico,.forest .ico{background:rgba(143,183,62,.16);color:var(--green)}
.ico.is-brass{background:var(--brass-50);color:var(--brass-2)}

/* Problem-Karten */
.pain{
  padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  background:var(--white);border-radius:var(--r-lg);
}
.pain b{display:block;font-size:1.02rem;font-weight:600;margin-bottom:.35em;color:var(--ink)}
.pain p{font-size:.93rem;color:var(--ink-2);margin:0}

/* ---------- Zahlenband ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.nums>div{background:var(--paper-2);padding:clamp(22px,2.8vw,34px) clamp(16px,2vw,24px);text-align:center}
.num-n{display:block;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:300;letter-spacing:-.04em;color:var(--green-700);line-height:1}
.num-l{display:block;font-size:.79rem;color:var(--ink-2);margin-top:.6em;line-height:1.4}
.dark .nums,.forest .nums{background:var(--line-dark);border-color:var(--line-dark)}
.dark .nums>div,.forest .nums>div{background:rgba(255,255,255,.04)}
.dark .num-n,.forest .num-n{color:var(--green)}
.dark .num-l,.forest .num-l{color:rgba(255,255,255,.66)}

/* ---------- Wissenschaft: Bild plus Text ---------- */
.sci{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.sci-i{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .24s ease,box-shadow .24s ease}
.sci-i:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.sci-i .fig{aspect-ratio:1/1;overflow:hidden;background:var(--paper-3)}
.sci-i .fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.sci-i:hover .fig img{transform:scale(1.04)}
.sci-i .bd{padding:clamp(18px,2.2vw,26px)}
.sci-i .hd-s{margin-bottom:.45em}
.sci-i p{font-size:.9rem;color:var(--ink-2);margin:0}

/* ---------- Tagesablauf, Zeitstrahl ---------- */
.tl{position:relative;padding-left:0}
.tl-i{display:grid;grid-template-columns:78px 1fr;gap:clamp(16px,2.2vw,28px);padding:clamp(16px,1.9vw,22px) 0;border-bottom:1px solid var(--line);align-items:start}
.tl-i:last-child{border-bottom:0}
.tl-t{font-size:.82rem;font-weight:600;letter-spacing:.05em;color:var(--green-700);padding-top:.22em;font-variant-numeric:tabular-nums}
.tl-c .hd-s{margin-bottom:.25em}
.tl-c p{font-size:.92rem;color:var(--ink-2);margin:0}
.dark .tl-i,.forest .tl-i{border-bottom-color:var(--line-dark)}
.dark .tl-t,.forest .tl-t{color:var(--green)}
.dark .tl-c p,.forest .tl-c p{color:rgba(255,255,255,.7)}

/* ---------- Vergleich ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
.vs-c{border-radius:var(--r-md);padding:clamp(24px,3vw,36px);border:1px solid var(--line);background:var(--white)}
.vs-c.is-bad{background:var(--paper-3);border-color:var(--line-2)}
.vs-c.is-good{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--sh-1)}
.vs-h{display:flex;align-items:center;gap:.6em;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.vs-h h3{margin:0;font-size:1.1rem;font-weight:600}
.vs-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.vs-c li{display:flex;gap:.7em;font-size:.93rem;line-height:1.5;color:var(--ink-2)}
.vs-c li svg{width:17px;height:17px;flex:none;margin-top:.22em}
.vs-c.is-bad li svg{color:var(--ink-3)}
.vs-c.is-good li svg{color:var(--green-600)}

/* ---------- Listen mit Haken ---------- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.checks li{display:flex;gap:.8em;font-size:.97rem;line-height:1.55}
.checks li svg{width:18px;height:18px;color:var(--green-600);flex:none;margin-top:.24em}
.dark .checks li svg,.forest .checks li svg{color:var(--green)}
.checks.is-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem clamp(20px,3vw,40px)}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px)}
.tm{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .24s ease,box-shadow .24s ease}
.tm:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tm .fig{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.tm .fig img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.tm:hover .fig img{transform:scale(1.045)}
.tm .bd{padding:clamp(18px,2vw,24px)}
.tm-n{font-size:1.06rem;font-weight:600;margin:0 0 .18em;letter-spacing:-.015em}
.tm-r{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green-700);font-weight:600;margin:0 0 .8em}
.tm p{font-size:.88rem;color:var(--ink-2);margin:0;line-height:1.58}

/* ---------- Zitat ---------- */
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote-t{font-size:clamp(1.35rem,2.8vw,2.15rem);font-weight:300;line-height:1.34;letter-spacing:-.025em;margin:0 0 1.3rem}
.quote-c{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green-700);font-weight:600}
.forest .quote-c,.dark .quote-c{color:var(--green)}

/* ---------- Preis ---------- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px);align-items:start}
.pk{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(26px,3.2vw,40px);
  transition:transform .24s ease,box-shadow .24s ease;
}
.pk.is-best{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 20px 60px rgba(66,55,55,.11)}
.pk:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pk.is-best:hover{box-shadow:0 0 0 1px var(--green),var(--sh-3)}
.pk-tag{
  position:absolute;top:-13px;left:clamp(26px,3.2vw,40px);
  background:var(--green-600);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:.5em 1.1em;border-radius:var(--r-pill);
}
.pk-n{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);font-weight:700;margin:0 0 .5em}
.pk-d{font-size:1.02rem;color:var(--ink-2);margin:0 0 1.4rem}
.pk-p{display:flex;align-items:baseline;gap:.4em;margin-bottom:.3em}
.pk-p b{font-size:clamp(2.2rem,4vw,3.05rem);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.pk-p span{font-size:.9rem;color:var(--ink-3)}
.pk-sub{font-size:.83rem;color:var(--ink-3);margin:0 0 1.6rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.pk .checks li{font-size:.9rem}
.pk .btn{margin-top:1.7rem}
.pk-fine{font-size:.76rem;color:var(--ink-3);margin-top:1rem;line-height:1.5}

/* ---------- Enthalten-Liste, Wertaufladung ---------- */
.incl{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.incl-r{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:1rem clamp(18px,2.2vw,26px);border-bottom:1px solid var(--line)}
.incl-r:last-of-type{border-bottom:0}
.incl-r.is-sum{background:var(--green-50);border-top:2px solid var(--green)}
.incl-l{display:flex;gap:.8em;align-items:flex-start}
.incl-l svg{width:17px;height:17px;color:var(--green-600);flex:none;margin-top:.3em}
.incl-l b{font-weight:600;font-size:.96rem;display:block;line-height:1.4}
.incl-l span{font-size:.84rem;color:var(--ink-2);display:block;margin-top:.14em;line-height:1.45}
.incl-v{font-size:.92rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.incl-r.is-sum .incl-v{color:var(--green-700);font-weight:700;font-size:1.02rem}
.incl-r.is-sum .incl-l b{font-size:1.04rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.fq{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:1.35rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.03rem;font-weight:500;color:var(--ink);letter-spacing:-.012em;line-height:1.4;
}
.fq:hover{color:var(--green-700)}
.fq i{
  width:24px;height:24px;flex:none;border:1px solid var(--line-2);border-radius:50%;
  position:relative;transition:transform .28s ease,border-color .2s ease,background .2s ease;
}
.fq i::before,.fq i::after{content:"";position:absolute;background:var(--ink-2);border-radius:2px;transition:opacity .2s ease}
.fq i::before{left:6px;right:6px;top:11px;height:1.5px}
.fq i::after{top:6px;bottom:6px;left:11px;width:1.5px}
.faq-i.is-open .fq i{transform:rotate(180deg);border-color:var(--green);background:var(--green-50)}
.faq-i.is-open .fq i::after{opacity:0}
.fa{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.fa-in{padding:0 0 1.5rem;font-size:.96rem;color:var(--ink-2);line-height:1.68;max-width:800px}
.fa-in p:last-child{margin-bottom:0}
.dark .faq,.dark .faq-i,.forest .faq,.forest .faq-i{border-color:var(--line-dark)}
.dark .fq,.forest .fq{color:#fff}
.dark .fa-in,.forest .fa-in{color:rgba(255,255,255,.72)}

/* ---------- Slider ---------- */
.sld-wrap{position:relative}
.sld{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);
  gap:clamp(14px,1.8vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sld::-webkit-scrollbar{display:none}
.sld>*{scroll-snap-align:start}
.sld-nav{display:flex;gap:8px}
.snav{
  width:44px;height:44px;border:1px solid var(--line-2);background:var(--white);
  border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;
  color:var(--ink);transition:border-color .18s ease,background .18s ease,opacity .18s ease;
}
.snav:hover{border-color:var(--ink);background:var(--paper-3)}
.snav:disabled{opacity:.32;cursor:default}
.snav svg{width:17px;height:17px}
.sld-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,38px)}
.dark .snav,.forest .snav{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#fff}
.dark .snav:hover,.forest .snav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

/* Bildkachel im Slider */
.tile{border-radius:var(--r-md);overflow:hidden;background:var(--white);border:1px solid var(--line);height:100%;display:flex;flex-direction:column}
.tile .fig{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.tile .fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.tile:hover .fig img{transform:scale(1.05)}
.tile .bd{padding:clamp(16px,2vw,22px);flex:1}
.tile .hd-s{margin-bottom:.35em}
.tile p{font-size:.88rem;color:var(--ink-2);margin:0}

/* ---------- Galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:10px}
.gal a,.gal div{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;background:var(--paper-3)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.3,1)}
.gal a:hover img,.gal div:hover img{transform:scale(1.06)}
.gal .is-tall{grid-row:span 2;aspect-ratio:1/2.04}
.gal .is-wide{grid-column:span 2;aspect-ratio:2.04/1}

/* ---------- Bildrahmen ---------- */
.shot{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2);background:var(--paper-3)}
.shot img{width:100%;display:block}
.shot.is-tall img{aspect-ratio:3/4;object-fit:cover}
.shot.is-cap img{max-height:680px;object-fit:cover;width:100%}
.shot.is-wide img{aspect-ratio:16/10;object-fit:cover}
.shot.is-sq img{aspect-ratio:1/1;object-fit:cover}
.cap{font-size:.79rem;color:var(--ink-3);margin-top:.7rem;line-height:1.5}

/* ---------- Hinweisbox ---------- */
.note{
  border:1px solid var(--line-2);border-left:3px solid var(--brass);
  background:var(--brass-50);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
}
.note b{display:block;margin-bottom:.4em;font-weight:600}
.note p{font-size:.9rem;color:var(--ink-2);margin:0 0 .6em}
.note p:last-child{margin-bottom:0}
.note.is-plain{background:var(--paper-3);border-left-color:var(--ink-3)}

/* ---------- Footer ---------- */
.ft{background:var(--dark);color:rgba(255,255,255,.62);padding:clamp(48px,6vw,76px) 0 30px;font-size:.88rem}
/* Fusszeilen-Label liegen jetzt als .ft-h vor, siehe unten */
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,50px);padding-bottom:clamp(32px,4vw,50px);border-bottom:1px solid var(--line-dark)}
.ft a{color:rgba(255,255,255,.62);text-decoration:none;display:block;padding:.3rem 0;transition:color .16s ease}
.ft a:hover{color:#fff}
.ft-bot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;padding-top:24px;font-size:.8rem;color:rgba(255,255,255,.45)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:18px}
.ft-bot a{display:inline;padding:0}
.ft-logo{height:40px;width:auto;margin-bottom:1.1rem;opacity:.92}

/* ---------- Reveals, Progressive Enhancement ---------- */
[data-rev]{opacity:1;transform:none}
.js-rev [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .68s cubic-bezier(.2,.6,.3,1),transform .68s cubic-bezier(.2,.6,.3,1)}
.js-rev [data-rev].is-in{opacity:1;transform:none}
.js-rev [data-rev-d="1"]{transition-delay:.08s}
.js-rev [data-rev-d="2"]{transition-delay:.16s}
.js-rev [data-rev-d="3"]{transition-delay:.24s}
.js-rev [data-rev-d="4"]{transition-delay:.32s}
.js-rev [data-rev-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .js-rev [data-rev]{opacity:1;transform:none;transition:none}
}

/* ---------- Formular und Checkout ---------- */
.fld{margin-bottom:1.05rem}
.fld label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.42em;color:var(--ink)}
.fld .hint{font-weight:400;color:var(--ink-3);font-size:.78rem}
/* Eingabefelder bleiben immer weiss mit dunkler Schrift, auch auf dunklem Grund */
.fld input,.fld select,.fld textarea{
  width:100%;padding:.85em 1em;font-family:inherit;font-size:max(16px,.95rem);
  background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-md);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(143,183,62,.16);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.fld.is-err input,.fld.is-err select{border-color:#C0453C;box-shadow:0 0 0 3px rgba(192,69,60,.12)}
.err-msg{display:none;font-size:.79rem;color:#C0453C;margin-top:.35em}
.fld.is-err .err-msg{display:block}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.f-row-3{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:0 16px}

.opt{
  display:flex;gap:.9em;align-items:flex-start;padding:1rem 1.1rem;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;margin-bottom:10px;
}
.opt:hover{border-color:var(--green-600)}
.opt input{margin:.28em 0 0;accent-color:var(--green-600);flex:none;width:17px;height:17px}
.opt.is-on{border-color:var(--green);box-shadow:0 0 0 1px var(--green);background:var(--green-50)}
.opt-b{flex:1;min-width:0}
.opt-t{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.opt-t b{font-size:.97rem;font-weight:600}
.opt-t span{font-size:.92rem;color:var(--green-700);font-weight:600;white-space:nowrap}
.opt-d{font-size:.84rem;color:var(--ink-2);margin-top:.22em;line-height:1.5}
/* Hinweis in Schritt 1, dass beide Preise auch in Raten gehen */
.opt-raten{display:block;margin-top:.45em;font-size:.8rem;font-weight:500;color:var(--green-700)}

.steps{display:flex;gap:0;margin-bottom:clamp(24px,3vw,38px);border-bottom:1px solid var(--line)}
.step{
  flex:1;padding:.9rem .5rem;text-align:center;font-size:.79rem;font-weight:600;
  color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;
  letter-spacing:.02em;
}
.step.is-on{color:var(--green-700);border-bottom-color:var(--green)}
.step.is-done{color:var(--ink-2)}
.step i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper-3);font-size:.7rem;margin-right:.45em;font-style:normal;vertical-align:-3px}
.step.is-on i{background:var(--green-600);color:#fff}
.step.is-done i{background:var(--green-100);color:var(--green-700)}

.sum{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.4vw,28px);position:sticky;top:calc(var(--nav-h) + 20px)}
.sum-r{display:flex;justify-content:space-between;gap:16px;padding:.5rem 0;font-size:.9rem;border-bottom:1px solid var(--line)}
.sum-r:last-of-type{border-bottom:0}
.sum-r span:first-child{color:var(--ink-2)}
.sum-r span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-tot{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:1rem;padding-top:1rem;border-top:2px solid var(--green)}
.sum-tot b:first-child{font-size:.95rem;font-weight:600}
.sum-tot b:last-child{font-size:1.5rem;font-weight:300;letter-spacing:-.03em;color:var(--green-700);font-variant-numeric:tabular-nums}

/* ---------- Entwurfs-Kennzeichnung ---------- */
.draft{
  background:#3A3030;color:rgba(255,255,255,.88);text-align:center;
  padding:.62rem 20px;font-size:.79rem;letter-spacing:.01em;position:relative;z-index:60;
}
.draft b{color:var(--brass);font-weight:600}

/* ---------- Hilfsklassen ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
/* Abstandsklassen muessen gewinnen. Regeln wie h2.hd-m{margin:0} sind
   staerker und haben sie vorher stillschweigend ausgehebelt. */
.mt-s{margin-top:1rem!important}.mt-m{margin-top:1.8rem!important}.mt-l{margin-top:2.8rem!important}
.hide{display:none}
.nowrap{white-space:nowrap}
.rule{height:1px;background:var(--line);border:0;margin:clamp(34px,4vw,56px) 0}
.dark .rule,.forest .rule{background:var(--line-dark)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  /* Unterhalb dieser Breite passt die Leiste nicht mehr nebeneinander,
     «Warum es wirkt» brach vorher auf drei Zeilen. Ab hier das Menue. */
  .nav{display:none}
  .burger{display:block}
}
@media (max-width:1080px){
  .team{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1.4fr 1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sticky-cta{display:flex}
  .split,.split.is-wide-left,.split.is-wide-right{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .split.is-rev>*:first-child{order:2}
  .sci{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .checks.is-2{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .f-row-3{grid-template-columns:1fr}
  .sum{position:static}
  body{padding-bottom:66px}
}
@media (max-width:640px){
  body{font-size:16px}
  :root{--nav-h:62px}
  .g-2,.g-3,.g-4,.sci,.team{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .is-wide{grid-column:span 2}
  .gal .is-tall{grid-row:span 1;aspect-ratio:1/1}
  .f-row{grid-template-columns:1fr}
  .hero-in{min-height:auto;padding-top:clamp(58px,14vw,84px);padding-bottom:clamp(48px,12vw,72px)}
  .hero-facts{gap:22px 0}
  .hero-facts>div{width:50%;padding-right:14px;margin-right:0;border-right:0}
  .hero-facts>div:nth-child(odd){border-right:1px solid rgba(255,255,255,.16);padding-right:18px}
  .scroll-hint{display:none}
  .tl-i{grid-template-columns:1fr;gap:.3rem}
  .tl-t{padding-top:0}
  .sld{grid-auto-columns:minmax(250px,84%)}
  .incl-r{grid-template-columns:1fr;gap:6px}
  .incl-v{text-align:left}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .steps{font-size:.7rem}
  .step span{display:none}
  .step i{margin-right:0}
  .trust-in{gap:16px 22px}
  .btn{width:auto}
  .cta-row .btn{flex:1 1 auto;min-width:200px}
}
@media (max-width:400px){
  .cta-row .btn{width:100%;min-width:0}
}
@media print{
  .hdr,.mnav,.sticky-cta,.anno,.scroll-hint{display:none!important}
}

/* ---------- Vergleichstabelle ---------- */
.cmp{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.cmp-head{display:grid;grid-template-columns:200px 1fr 1fr;background:var(--paper-3);border-bottom:1px solid var(--line)}
.cmp-head::before{content:"";display:block}
.cmp-h{padding:1.1rem clamp(16px,2vw,24px)}
.cmp-h h3{margin:0;font-size:.98rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cmp-h.is-b{background:var(--green-50);box-shadow:inset 2px 0 0 var(--green)}
.cmp-h.is-b h3{color:var(--green-800)}
.cmp-row{display:grid;grid-template-columns:200px 1fr 1fr;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-k{
  margin:0;padding:1.15rem clamp(16px,2vw,24px);
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper-2);border-right:1px solid var(--line);
}
.cmp-a,.cmp-b{padding:1.15rem clamp(16px,2vw,24px)}
.cmp-a p,.cmp-b p{margin:0;font-size:.92rem;line-height:1.6}
.cmp-a{color:var(--ink-2)}
.cmp-b{background:var(--green-50);box-shadow:inset 2px 0 0 var(--green);color:var(--ink)}

/* ---------- Passt / passt weniger ---------- */
.fit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.fit li{
  padding:clamp(18px,2.2vw,24px);background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r-lg);
}
.fit li b{display:block;font-size:1rem;font-weight:600;margin-bottom:.4em;line-height:1.35}
.fit li p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.fit.is-off{grid-template-columns:repeat(3,1fr)}
.fit.is-off li{border-left-color:var(--line-2);background:var(--paper-3)}
.fit.is-off li b{color:var(--ink-2)}

/* ---------- Offene Punkte, bewusst ohne Alarmfarbe ---------- */
.checks.is-open li svg{color:var(--brass)}
.dark .checks.is-open li svg,.forest .checks.is-open li svg{color:var(--brass)}

@media (max-width:900px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;border-bottom:0;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .cmp{border:0;background:transparent}
  .cmp-k{border-right:0;border-bottom:1px solid var(--line)}
  .cmp-a,.cmp-b{position:relative;padding-top:2.4rem}
  .cmp-a::before,.cmp-b::before{
    content:"Der Weg, den du kennst";position:absolute;top:.9rem;left:clamp(16px,2vw,24px);
    font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  }
  .cmp-b::before{content:"Metabolic Reset";color:var(--green-700)}
  .cmp-a{border-bottom:1px solid var(--line)}
  .fit,.fit.is-off{grid-template-columns:1fr}
}

/* Einzeiliges Zitatband: die Zeile muss die Flaeche tragen */
.quote.is-band .quote-t{font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0;font-weight:200;letter-spacing:-.03em}

/* Der Kopf darf auf schmalen Geraeten nicht breiter werden als das Fenster.
   Die Marke war auf flex:none gesetzt und hat den Balken aufgeblasen. */
@media (max-width:600px){
  .brand{flex:1 1 auto;min-width:0}
  .brand img{height:27px}
  .brand-txt{padding-left:9px;min-width:0}
  .brand-name{font-size:.86rem;white-space:nowrap}
  .brand-sub{display:none}
  .hdr-in{gap:12px;padding:0 16px}
  .burger{width:38px;height:38px}
  .burger span,.burger::before,.burger::after{left:10px;width:18px}
  .burger::before{top:12px}.burger span{top:18px}.burger::after{top:24px}
  .anno,.draft{font-size:.72rem;padding-left:14px;padding-right:14px}
  .wrap,.wrap-wide,.wrap-narrow{padding-left:18px;padding-right:18px}
}
/* Zusatztext in den Hinweisleisten weicht auf kleinen Geraeten */
@media (max-width:600px){ .sm-hide{display:none} }

/* Karten- und Kacheltitel sind semantisch h3, sollen aber klein bleiben.
   So springt die Ueberschriftenebene nicht von h2 auf h4. */
h3.hd-s{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin:0 0 .6em}
.ft-h{color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:600}

/* ---------- Zugaenglichkeit ---------- */
.skip{
  position:absolute;left:12px;top:-56px;z-index:100;
  background:var(--green-700);color:#fff;padding:.7em 1.2em;border-radius:var(--r-pill);
  font-size:.87rem;font-weight:600;text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;border-radius:2px}
.dark :focus-visible,.forest :focus-visible,.hero :focus-visible{outline-color:var(--green)}

/* Wer weniger Bewegung eingestellt hat, bekommt gar keine */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}
/* Zwischenueberschriften der Buchungsstrecke: semantisch h2, optisch ruhig */
h2.hd-m{font-size:clamp(1.15rem,1.8vw,1.42rem);font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:0 0 .6em}

/* ==========================================================================
   Zweite Ausbaustufe: Texturen, Medaillons, Infografiken, Galerie
   ========================================================================== */

/* ---------- Hintergrund-Textur statt Farbverlauf ----------
   Die Textur liegt als eigene Ebene hinter dem Inhalt. Sie darf nie den
   Text stoeren, deshalb sitzt sie unter einer sehr niedrigen Deckkraft. */
.sec{position:relative;isolation:isolate}
.tex::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--tex);background-size:cover;background-position:center;
  opacity:var(--tex-o,.5);pointer-events:none;
}
.tex.is-fixed::before{background-attachment:fixed}
/* Ein zarter Verlauf an den Kanten laesst die Textur in die Flaeche auslaufen */
.tex::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--tex-fade,rgba(250,248,242,.85)) 0%,transparent 22%,transparent 78%,var(--tex-fade,rgba(250,248,242,.85)) 100%);
}
.dark.tex::after,.forest.tex::after{--tex-fade:rgba(64,54,52,.8)}
.forest.tex::after{--tex-fade:rgba(56,73,43,.8)}

/* ---------- Medaillon, nach dem Vorbild der Wildniswind-Illustrationen ---------- */
.med{
  /* Grundgroesse bewusst kraeftig, die Strichzeichnung braucht Flaeche.
     display ist Pflicht: als inline-Element wuerde ein span Breite und
     Hoehe ignorieren und das Bild in die Laenge ziehen. */
  display:block;
  width:var(--med-s,104px);height:var(--med-s,104px);border-radius:50%;
  overflow:hidden;flex:none;background:var(--paper-3);
  box-shadow:0 2px 10px rgba(66,55,55,.08);
}
.med img{width:100%;height:100%;object-fit:cover;display:block}
.med.is-lg{--med-s:132px}
.med.is-sm{--med-s:68px}

/* Karte mit Medaillon oben */
.mcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.mcard .med{margin-bottom:1.2rem}
.mcard h3{margin-bottom:.45em}
.mcard p{font-size:.93rem;color:var(--ink-2);margin:0;line-height:1.62}
.dark .mcard,.forest .mcard{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.dark .mcard p,.forest .mcard p{color:rgba(255,255,255,.74)}

/* Medaillon links, Text rechts */
.mrow{display:flex;gap:clamp(16px,2vw,22px);align-items:flex-start}
.mrow .bd{flex:1;min-width:0}
.mrow h3{margin-bottom:.3em}
.mrow p{font-size:.93rem;color:var(--ink-2);margin:0;line-height:1.6}
.dark .mrow p,.forest .mrow p{color:rgba(255,255,255,.72)}

/* ---------- Infografik: Bild plus echte Beschriftung ---------- */
.info{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,52px);
  align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,44px);
}
.info.is-plain{background:transparent;border:0;padding:0}
.info-fig{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3)}
.info-fig img{width:100%;display:block}
.info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.info-list li{display:flex;gap:1rem;align-items:flex-start}
.info-n{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-100);color:var(--green-800);
  font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.info-list b{display:block;font-size:1rem;font-weight:600;margin-bottom:.16em;line-height:1.35}
.info-list p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.dark .info,.forest .info{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.dark .info-n,.forest .info-n{background:rgba(143,183,62,.2);color:var(--green)}
.dark .info-list p,.forest .info-list p{color:rgba(255,255,255,.72)}

/* ---------- Galerie, echtes Mosaik statt Zufallsraster ---------- */
.mosaik{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;
  grid-auto-rows:clamp(96px,10vw,150px);gap:clamp(8px,1vw,14px);
}
.mosaik figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--paper-3);position:relative}
.mosaik img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.mosaik figure:hover img{transform:scale(1.05)}
/* Bildunterschriften stehen dauerhaft, sonst weiss niemand, was er sieht */
.mosaik figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .8rem;
  background:linear-gradient(0deg,rgba(30,26,25,.84),rgba(30,26,25,.4) 60%,transparent);
  color:#fff;font-size:.79rem;font-weight:500;letter-spacing:.01em;line-height:1.4;
  transition:padding-bottom .3s ease;
}
.mosaik figure:hover figcaption{padding-bottom:1.1rem}
.m-a figcaption,.m-f figcaption{font-size:.88rem}
.m-a{grid-column:span 3;grid-row:span 3}
.m-b{grid-column:span 3;grid-row:span 2}
.m-c{grid-column:span 2;grid-row:span 2}
.m-d{grid-column:span 2;grid-row:span 2}
.m-e{grid-column:span 2;grid-row:span 3}
.m-f{grid-column:span 4;grid-row:span 2}

/* ---------- Zeitstrahl, waagrecht ---------- */
.steps-h{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);position:relative;counter-reset:st}
.steps-h::before{
  content:"";position:absolute;left:calc(16.66% );right:calc(16.66%);top:26px;height:2px;
  background:linear-gradient(90deg,var(--green-100),var(--green),var(--green-100));
  z-index:0;
}
.st{position:relative;z-index:1;text-align:center}
.st-n{
  width:54px;height:54px;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;
  background:var(--white);border:2px solid var(--green);color:var(--green-800);
  font-size:1.05rem;font-weight:600;box-shadow:0 0 0 6px var(--paper-3);
}
.st h3{margin-bottom:.4em}
.st p{font-size:.9rem;color:var(--ink-2);margin:0;line-height:1.6}
.soft .st-n{box-shadow:0 0 0 6px var(--paper-3)}
.cream .st-n{box-shadow:0 0 0 6px var(--paper-2)}

/* ---------- Bewegung ---------- */
.js-rev [data-rev]{transform:translateY(24px)}
.js-rev [data-rev-s].is-in{animation:pop .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.js-rev [data-rev-d="6"]{transition-delay:.48s}
.js-rev [data-rev-d="7"]{transition-delay:.56s}
.js-rev [data-rev-d="8"]{transition-delay:.64s}
/* Linien, die sich beim Sichtbarwerden zeichnen */
.draw path,.draw line,.draw circle,.draw polyline{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
}
.draw.is-in path,.draw.is-in line,.draw.is-in circle,.draw.is-in polyline{
  animation:draw 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

@media (max-width:900px){
  .info{grid-template-columns:1fr;gap:24px}
  .steps-h{grid-template-columns:1fr;gap:26px}
  .steps-h::before{left:26px;right:auto;top:26px;bottom:26px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--green-100),var(--green),var(--green-100))}
  .st{text-align:left;padding-left:76px}
  .st-n{margin:0;position:absolute;left:0;top:0}
  .mosaik{grid-template-columns:repeat(4,1fr)}
  .m-a{grid-column:span 4;grid-row:span 3}
  .m-b,.m-f{grid-column:span 4;grid-row:span 2}
  .m-c,.m-d,.m-e{grid-column:span 2;grid-row:span 2}
}
@media (max-width:640px){
  .mosaik{grid-template-columns:repeat(2,1fr)}
  .m-a,.m-b,.m-f{grid-column:span 2;grid-row:span 2}
  .m-c,.m-d,.m-e{grid-column:span 1;grid-row:span 2}
  .mosaik figcaption{opacity:1;transform:none;font-size:.72rem}
}
/* Die Texturebene folgt dem Scrollen um wenige Pixel */
.tex::before{transform:translate3d(0,var(--tex-y,0),0);will-change:transform}
/* Die Hero-Eckdaten tragen jetzt Worte statt blosser Zahlen */
.hf-n{font-size:clamp(1.02rem,1.45vw,1.28rem);font-weight:500;letter-spacing:-.015em;line-height:1.25}
.hf-l{font-size:.73rem;letter-spacing:.05em;text-transform:none;margin-top:.45em;line-height:1.4}

/* ---------- Bildband: Sektion mit vollflaechigem Foto dahinter ----------
   Der Kunde mag den Schluss-Hero. Dieses Muster bringt denselben Effekt
   an weitere Stellen, ohne dass die Seite laut wird. */
.band{position:relative;overflow:hidden;isolation:isolate;color:rgba(255,255,255,.84)}
.band-bg{position:absolute;inset:0;z-index:-2}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.band-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(46,38,36,.9) 0%,rgba(46,38,36,.76) 45%,rgba(46,38,36,.92) 100%);
}
.band.is-side .band-bg::after{
  background:linear-gradient(90deg,rgba(46,38,36,.94) 0%,rgba(46,38,36,.82) 48%,rgba(46,38,36,.5) 100%);
}
.band h1,.band h2,.band h3,.band h4{color:#fff}
.band h2 strong,.band h3 strong,.band .em{color:var(--green)}
.band .lead{color:rgba(255,255,255,.8)}
.band .mut{color:rgba(255,255,255,.66)}
.band .tiny{color:rgba(255,255,255,.54)}
.band .eyebrow{color:var(--green)}
.band .eyebrow::before{background:var(--green)}
.band .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.78);backdrop-filter:blur(3px)}
.band .checks li svg{color:var(--green)}
.band .checks.is-open li svg{color:var(--brass)}
.band .rule{background:rgba(255,255,255,.16)}
.band .glass{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* Leistungsblock mit Bildkopf, damit die Wertaufladung nicht als Textwand liest */
.incl-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:var(--r-lg);
}
.incl-card .fig{aspect-ratio:21/9;overflow:hidden;background:rgba(0,0,0,.2)}
.incl-card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.incl-card:hover .fig img{transform:scale(1.04)}
.incl-card .bd{padding:clamp(20px,2.4vw,30px);flex:1}
.incl-card .checks{gap:.75rem}
.incl-card .checks li{font-size:.92rem}

/* Hero-Eckdaten als festes Vierer-Raster, vorher haben sie unsauber umgebrochen */
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-facts>div{
  padding:0 clamp(16px,2.2vw,30px);margin:0;
  border-right:1px solid rgba(255,255,255,.18);
}
.hero-facts>div:first-child{padding-left:0}
.hero-facts>div:last-child{border-right:0;padding-right:0}
@media (max-width:900px){
  .hero-facts{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .hero-facts>div{padding-left:0;padding-right:18px}
  .hero-facts>div:nth-child(2n){border-right:0}
  .hero-facts>div:nth-child(2n+1){border-right:1px solid rgba(255,255,255,.18);padding-right:18px}
}
@media (max-width:520px){
  .hero-facts{grid-template-columns:1fr;gap:16px}
  .hero-facts>div,.hero-facts>div:nth-child(2n+1){border-right:0;padding:0}
}
/* Der Schleier im Bildband muss auch rechts noch tragen */
.band.is-side .band-bg::after{
  background:linear-gradient(90deg,rgba(46,38,36,.94) 0%,rgba(46,38,36,.86) 55%,rgba(46,38,36,.66) 100%);
}
/* Kleingedrucktes in der Glasflaeche darf nicht verschwinden */
.band .glass .tiny{color:rgba(255,255,255,.7)}

/* ---------- Foto als ruhiger Hintergrund einer hellen Sektion ----------
   Das echte Bild bleibt erkennbar, der Text bleibt uneingeschraenkt lesbar. */
.photo-bg{position:relative;isolation:isolate}
.photo-bg .pb{position:absolute;inset:0;z-index:-2;overflow:hidden}
.photo-bg .pb img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform:translate3d(0,var(--tex-y,0),0);will-change:transform}
.photo-bg .pb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(250,248,242,.93) 30%,rgba(250,248,242,.93) 70%,var(--paper) 100%);
}

/* ---------- Koerperzusammensetzung, zwei Saeulen gleicher Hoehe ---------- */
.komp{margin:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px)}
.komp svg{width:100%;height:auto;display:block}
.komp .k-fett{fill:var(--brass);opacity:.55}
.komp .k-rest{fill:var(--line-2)}
.komp .k-musk{fill:var(--green-600)}
.komp .k-top{fill:var(--ink);font-size:15px;font-weight:600;font-family:var(--sans)}
.komp .k-unten{fill:var(--ink-3);font-size:13px;font-family:var(--sans)}
.komp .k-linie{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4}
.komp-leg{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.1rem;font-size:.82rem;color:var(--ink-2)}
.komp-leg span{display:flex;align-items:center;gap:.5em}
.komp-leg i{width:13px;height:13px;border-radius:4px;flex:none}
.k-i-fett{background:var(--brass);opacity:.55}
.k-i-rest{background:var(--line-2)}
.k-i-musk{background:var(--green-600)}

/* ---------- Zimmer: ein grosses Bild fuehrt, zwei begleiten ---------- */
.zi-lay{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(12px,1.6vw,20px)}
.zi-neben{display:grid;grid-rows:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.zi-lay figure{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3)}
.zi-lay img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.zi-gross img{aspect-ratio:4/3}
.zi-neben img{aspect-ratio:16/10}
.zi-lay figure:hover img{transform:scale(1.04)}
.zi-lay figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem 1.1rem .9rem;
  background:linear-gradient(0deg,rgba(30,26,25,.82),rgba(30,26,25,.45) 55%,transparent);
  color:#fff;font-size:.83rem;line-height:1.45;font-weight:500;
}
.zi-neben figcaption{font-size:.78rem;padding:1.6rem .9rem .7rem}
@media (max-width:900px){
  .zi-lay{grid-template-columns:1fr}
  .zi-neben{grid-template-columns:1fr 1fr;grid-rows:none}
}

/* ---------- Zimmerkategorien: eine Karte je Kategorie, Bilder im Blaetterlauf ---------- */
.zk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px)}
.zk-i{
  margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
}
.zk-med{position:relative;background:var(--paper-3)}
/* Eine Aufnahme fuellt die Spur, deshalb keine Luecke und kein Innenabstand */
.zk-track{grid-auto-columns:100%;gap:0;padding:0;margin:0}
.zk-track figure{margin:0}
.zk-track img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.zk-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;background:rgba(255,255,255,.92);border-color:transparent;
  box-shadow:0 2px 10px rgba(30,26,25,.18);
}
.zk-nav:hover{background:#fff;border-color:transparent}
.zk-nav.is-prev{left:12px}
.zk-nav.is-next{right:12px}
.zk-nav:disabled{opacity:0;pointer-events:none}
.zk-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:6px}
.zk-dot{
  width:6px;height:6px;padding:0;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(30,26,25,.35);
  transition:width .22s ease,background .22s ease;
}
.zk-dot.is-on{width:20px;background:#fff}
.zk-bd{padding:clamp(18px,2.2vw,26px)}
.zk-bd h4{font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.015em;margin:0}
.zk-sub{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);margin-bottom:.45em;font-weight:600}
.zk-bd p{font-size:.9rem;color:var(--ink-2);margin:.6em 0 0}
.zk-hin{font-size:.78rem;color:var(--ink-3);margin-top:1.4rem;text-align:center}
@media (max-width:900px){ .zk{grid-template-columns:1fr} }
/* Der Rahmen macht sichtbar, dass beide Saeulen exakt gleich hoch sind */
.komp .k-rahmen{fill:none;stroke:var(--line-2);stroke-width:1.5}
/* Hochformat ohne Beschnitt, fuer gezeichnete Motive */
.shot.is-portrait{background:var(--paper-2)}
.shot.is-portrait img{aspect-ratio:939/1400;object-fit:contain;width:100%}

/* ---------- Freigestellte Strich-Icons ----------
   Als Vektor statt als generiertes Bild: transparent, scharf in jeder Groesse,
   und die Farbe folgt der Sektion. */
.ic-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{
  display:block;width:var(--ic-s,56px);height:var(--ic-s,56px);
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--green-700);
}
.ic.is-lg{--ic-s:68px;stroke-width:1.3}
.ic.is-sm{--ic-s:42px;stroke-width:1.7}
.ic.is-brass{color:var(--brass-2)}
.ic.is-ink{color:var(--ink-2)}
.dark .ic,.forest .ic,.band .ic{color:var(--green)}
.mcard .ic{margin-bottom:1.3rem}
.mrow .ic{flex:none;margin-top:.15rem}

/* ---------- Kopf: transparent ueber dem Hero, fest ab dem ersten Scrollen ----------
   Ueber dem Bild traegt die weisse Originalmarke, danach die gruene Wortmarke. */
.hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.hdr.is-stuck{
  background:rgba(250,248,242,.92);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);box-shadow:0 1px 18px rgba(66,55,55,.06);
}
.brand img{height:34px;width:auto;transition:opacity .25s ease}
.lg-dunkel{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.brand{position:relative}
.hdr.is-stuck .lg-hell{opacity:0}
.hdr.is-stuck .lg-dunkel{opacity:1}
/* Navigation liegt zuerst auf dem Bild, deshalb hell */
.hdr .nav a:not(.btn){color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hdr .nav a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.12)}
.hdr.is-stuck .nav a:not(.btn){color:var(--ink-2);text-shadow:none}
.hdr.is-stuck .nav a:not(.btn):hover{color:var(--ink);background:rgba(66,55,55,.04)}
.brand-name{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.brand-sub{color:rgba(255,255,255,.75);text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hdr.is-stuck .brand-name{color:var(--ink);text-shadow:none}
.hdr.is-stuck .brand-sub{color:var(--green-700);text-shadow:none}
.brand-txt{border-left-color:rgba(255,255,255,.35)}
.hdr.is-stuck .brand-txt{border-left-color:var(--line-2)}
.burger{border-color:rgba(255,255,255,.4)}
.burger span,.burger::before,.burger::after{background:#fff}
.hdr.is-stuck .burger{border-color:var(--line-2)}
.hdr.is-stuck .burger span,.hdr.is-stuck .burger::before,.hdr.is-stuck .burger::after{background:var(--ink)}
/* Der Hero beginnt jetzt unter dem transparenten Kopf */
.hero-in{padding-top:calc(var(--nav-h) + clamp(50px,7vw,90px))}
/* Auf der Buchungsseite gibt es kein Bild hinter dem Kopf */
body.plain .hdr{background:rgba(250,248,242,.92);backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--line)}
body.plain .hdr .nav a:not(.btn){color:var(--ink-2);text-shadow:none}
body.plain .brand-name{color:var(--ink);text-shadow:none}
body.plain .brand-sub{color:var(--green-700);text-shadow:none}
body.plain .brand-txt{border-left-color:var(--line-2)}

/* ---------- Galerie als Slider, alle Bilder gleich beschnitten ----------
   Einheitliches Seitenverhaeltnis loest die Luecken des Mosaiks. */
.gs{position:relative}
.gs-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:1.1rem}
.gs-track{
  grid-auto-columns:minmax(260px,clamp(300px,30vw,400px));
  padding:4px 4px 24px;
}
.gs-i{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-3);box-shadow:var(--sh-1);
}
.gs-i img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.6,.3,1)}
.gs-i:hover img{transform:scale(1.05)}
.gs-i figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.1rem 1rem;
  background:linear-gradient(0deg,rgba(28,24,23,.88),rgba(28,24,23,.45) 55%,transparent);
  color:#fff;
}
.gs-i figcaption b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.gs-i figcaption span{display:block;font-size:.79rem;color:rgba(255,255,255,.78);margin-top:.2em;line-height:1.4}
@media (max-width:640px){
  .gs-track{grid-auto-columns:minmax(240px,82%)}
  .gs-head{flex-direction:column;align-items:flex-start;gap:12px}
}
/* Freigestellte Illustrationen stehen auf der Sektionsflaeche, ohne eigenes Feld */
.sci-i .fig{background:transparent;aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(14px,2vw,24px)}
.sci-i .fig img{width:100%;height:100%;object-fit:contain}
.sci-i:hover .fig img{transform:scale(1.03)}
.shot.is-frei{background:transparent;box-shadow:none;border-radius:0}
.shot.is-frei img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

/* ---------- Beschriftete Illustration ----------
   Das Bild steht frei, die Erklaerung daneben oder darunter als echter Text. */
.bgraf{margin:0}
.bgraf-bild{width:100%;height:auto;display:block}
.bgraf-leg{display:flex;flex-direction:column;gap:.85rem;margin-top:1.2rem}
.bgraf-leg span{display:block;position:relative;padding-left:2.1rem;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.bgraf-leg i{
  position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--green-100);color:var(--green-800);
  font-size:.7rem;font-weight:700;font-style:normal;
}
.bgraf-leg b{color:var(--ink);font-weight:600;margin-right:.35em}
.bgraf-leg.is-reihe{flex-direction:row;gap:clamp(14px,2vw,26px)}
.bgraf-leg.is-reihe span{flex:1;padding-left:0;padding-top:2.1rem}
.bgraf-leg.is-reihe i{top:0}
.bgraf-leg.is-reihe b{display:block;margin:0 0 .2em}
.dark .bgraf-leg span,.forest .bgraf-leg span,.band .bgraf-leg span{color:rgba(255,255,255,.72)}
.dark .bgraf-leg b,.forest .bgraf-leg b,.band .bgraf-leg b{color:#fff}
.dark .bgraf-leg i,.forest .bgraf-leg i,.band .bgraf-leg i{background:rgba(143,183,62,.22);color:var(--green)}
@media (max-width:640px){
  .bgraf-leg.is-reihe{flex-direction:column}
  .bgraf-leg.is-reihe span{padding-left:2.1rem;padding-top:0}
}
.sum-raten{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line-2)}
.sum-raten .sum-r{font-size:.85rem;border-bottom:0;padding:.32rem 0}
/* Der Hero beginnt unter dem transparenten Kopf, deshalb nach oben ziehen */
.hero:first-of-type{margin-top:calc(var(--nav-h) * -1)}
/* Beschriftungen stehen immer linksbuendig, auch in schmalen Spalten */
.bgraf-leg,.bgraf-leg span{text-align:left}
/* Das Foto hinter der ersten Sektion darf nicht mit dem Text konkurrieren */
.photo-bg .pb::after{
  background:linear-gradient(180deg,var(--paper) 0%,rgba(250,248,242,.965) 26%,rgba(250,248,242,.965) 74%,var(--paper) 100%);
}

/* ---------- Bedingungen ---------- */
.agb h2{font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:600;letter-spacing:-.015em;margin:2.2rem 0 .7rem;color:var(--ink)}
.agb h2:first-child{margin-top:0}
.agb p{font-size:.95rem;line-height:1.7;color:var(--ink-2);margin-bottom:.9rem}
.agb a{color:var(--green-700);font-weight:600}
.agb-t{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-size:.92rem}
.agb-t td{padding:.7rem .9rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.agb-t tr:first-child td{border-top:1px solid var(--line)}
.agb-t td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
/* Lange Rechtstexte in der rechten Spalte muessen umbrechen duerfen */
.agb-t.is-breit td:first-child{width:38%;font-weight:500;color:var(--ink)}
.agb-t.is-breit td:last-child{white-space:normal}
@media (max-width:560px){
  .agb-t.is-breit td{display:block;width:auto;text-align:left;border-bottom:0;padding:.55rem .2rem}
  .agb-t.is-breit td:first-child{width:auto;padding-bottom:.1rem}
  .agb-t.is-breit td:last-child{text-align:left;padding-top:0;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
  .agb-t.is-breit tr:first-child td:first-child{border-top:0}
}
/* Der Tagespreis steht unter dem Gesamtpreis, weil sich das jeder ausrechnet */
.opt-tag{display:block;font-style:normal;font-size:.74rem;font-weight:500;color:var(--ink-3);margin-top:.15em;text-align:right}
.sum-tag{margin:.45rem 0 0;font-size:.79rem;color:var(--ink-3);text-align:right;line-height:1.4}
/* Der Hinweis steht unter dem Knopf, nicht daneben */
.cta-note{margin:.9rem 0 0;font-size:.83rem;color:var(--ink-3);line-height:1.5}
/* ---------- Die beiden Zahlungswege ---------- */
.zw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,20px)}
.zw-k{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;
}
/* Der empfohlene Weg traegt den gruenen Rand, nicht nur ein Wort */
.zw-k.is-haupt{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset,var(--sh-1)}
.zw-l{
  display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--green-700);margin-bottom:.5em;
}
.zw-k p{font-size:.88rem;color:var(--ink-2);margin:.4em 0 0;line-height:1.6}
/* Der Knopf sitzt unten, damit beide Karten auf gleicher Hoehe enden.
   Der Abstand darueber darf dabei nie unter diesen Wert fallen. */
.zw-k .btn{margin-top:auto}
.zw-k p:last-of-type{margin-bottom:1.5rem}
/* Einzelne Zahlungskarte in Schritt 4. Der Raten-Satz ist bei Einmalzahlung
   ausgeblendet, deshalb haengt der Abstand am Knopf statt am letzten Absatz. */
.zw-k.is-einzeln p:last-of-type{margin-bottom:0}
.zw-k.is-einzeln .btn{margin-top:1.4rem}
.zw-k .zw-zusatz{margin-top:.8em;padding-top:.8em;border-top:1px dashed var(--line-2)}
/* In der schmalen Karte stehen die beiden Konten untereinander, sonst
   zerreisst die IBAN ueber drei Zeilen */
.zw-k .bank{font-size:.8rem;grid-template-columns:1fr;gap:.9rem}
@media (max-width:760px){ .zw{grid-template-columns:1fr} }

/* ---------- Ablauf nach der Anmeldung, Bankangaben ---------- */
.abl{list-style:none;counter-reset:abl;padding:0;margin:0}
.abl li{
  counter-increment:abl;position:relative;padding:0 0 1.1rem 2.6rem;
  font-size:.92rem;color:var(--ink-2);line-height:1.6;
}
.abl li::before{
  content:counter(abl);position:absolute;left:0;top:.05em;
  width:1.7rem;height:1.7rem;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font-size:.8rem;font-weight:700;
  display:grid;place-items:center;
}
.abl li:last-child{padding-bottom:0}
.abl b{color:var(--ink);font-weight:600}
.bank{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin-top:.7rem;font-size:.85rem;line-height:1.55}
.bank b{font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow-wrap:anywhere}
.bank-l{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.25em}
@media (max-width:560px){ .bank{grid-template-columns:1fr;gap:1rem} }
/* Anklickbare Rufnummer im Fliesstext */
.tel-link{color:var(--green-700);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(94,127,34,.35);transition:border-color .18s ease}
.tel-link:hover{border-bottom-color:var(--green-700)}
.dark .tel-link,.forest .tel-link{color:#C7DE8A;border-bottom-color:rgba(199,222,138,.4)}
.dark .tel-link:hover,.forest .tel-link:hover{border-bottom-color:#C7DE8A}
.center .cta-note{margin-left:auto;margin-right:auto}
/* Illustration statt Icon auf den Problemkarten */
.pfig{display:block;margin-bottom:1.15rem;height:132px}
.pfig img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:left center;display:block}

/* ==========================================================================
   Mobil: Feinschliff
   ========================================================================== */
@media (max-width:640px){
  /* Die Ankuendigungsleiste brach in drei Zeilen um und wirkte gedraengt */
  .sm-weg{display:none}
  /* Ohne haengendes Band braucht der Rumpf unten keinen Platz mehr */
  body{padding-bottom:0}
  /* Hero ruhiger: weniger Sprung in der Schrift, mehr Luft */
  .hero h1{font-size:clamp(2.1rem,8.4vw,2.9rem);line-height:1.12;letter-spacing:-.03em}
  .hero-sub{font-size:1rem;line-height:1.6}
  .hero-kicker{font-size:.7rem;padding:.36em .8em .36em .45em;gap:.5em}
  .hero-kicker b{font-size:.6rem;padding:.28em .6em}
  .hero-in{min-height:auto;padding-top:calc(var(--nav-h) + 44px);padding-bottom:44px}
  .hero-facts{gap:14px 0;margin-top:30px;padding-top:20px}
  .hf-n{font-size:1rem}
  .hf-l{font-size:.72rem}
  .cta-row .btn{width:100%;min-width:0}
  /* Problem-Illustrationen kleiner, damit die Karte nicht auseinanderfaellt */
  .pfig{height:104px}
  /* Die Wertaufladung war als zweispaltige Zeile mobil unlesbar */
  .incl-r{grid-template-columns:1fr;gap:.5rem;padding:1.1rem 1.1rem}
  .incl-v{text-align:left;font-size:1.05rem;font-weight:600;color:var(--green)}
  .incl-r.is-sum .incl-v{font-size:1.25rem}
}
/* Die Blaetter-Knoepfe gehoeren unter die Bilder und in die Mitte,
   sonst merkt niemand, dass sich wischen laesst. */
@media (max-width:900px){
  .sld-head{flex-direction:column;align-items:stretch;gap:14px}
  .sld-head .sld-nav{order:2}
  .gs-head{flex-direction:column;align-items:stretch;gap:10px}
  .sld-wrap .sld-nav,
  .gs .sld-nav{justify-content:center}
  .sld-nav.is-unten{justify-content:center;margin-top:.2rem}
}

/* Galerie: auf schmalen Geraeten wandern die Blaetter-Knoepfe unter die Bilder */
@media (max-width:900px){
  .gs{display:flex;flex-direction:column}
  .gs-head{order:2;margin:.4rem 0 0;align-items:center}
  .gs-head .tiny{order:2;text-align:center;margin-top:.5rem}
  .gs-head .sld-nav{order:1;justify-content:center}
  .gs-track{order:1;padding-bottom:14px}
}
/* Der Bildkopf der Leistungskarten war mobil ein zu flacher Streifen */
@media (max-width:900px){
  .incl-card .fig{aspect-ratio:16/9}
}
@media (max-width:640px){
  .incl-card .fig{aspect-ratio:4/3}
}
/* Telefonfeld mit Vorwahl */
.tel-feld{display:grid;grid-template-columns:auto 1fr;gap:10px}
.tel-feld select{
  width:auto;min-width:118px;padding-left:.7em;padding-right:.5em;
  font-variant-numeric:tabular-nums;
}
/* Die Vorwahl bleibt auch auf schmalen Geraeten links neben der Nummer */
@media (max-width:480px){
  .tel-feld{gap:8px}
  .tel-feld select{min-width:0;width:auto;padding-left:.5em;padding-right:.3em;font-size:max(16px,.88rem)}
}

/* Fehlermeldung als Kasten, die kleine rote Zeile wurde uebersehen */
.err-box{
  display:flex;gap:.8em;align-items:flex-start;
  background:#FBEDEB;border:1px solid #E3B4AE;border-left:3px solid #C0453C;
  border-radius:var(--r-lg);padding:1rem 1.1rem;margin:.4rem 0 1.2rem;
  font-size:.92rem;line-height:1.55;color:#8A3129;
}
.err-box svg{width:20px;height:20px;flex:none;margin-top:.15em;color:#C0453C}
.err-box b{display:block;font-weight:600;margin-bottom:.15em;color:#7A2A22}
/* Blaetter-Knoepfe des Essen-Sliders: rechts am Desktop, mittig darunter mobil */
.sld-nav.is-unten{justify-content:flex-end}
@media (max-width:900px){ .sld-nav.is-unten{justify-content:center} }
@media (max-width:640px){
  .hero-kicker{white-space:nowrap;font-size:.68rem}
  .hero-kicker b{white-space:nowrap}
}

/* ---------- Tagesbogen ----------
   Das Motiv ist sehr breit. Es darf nie beschnitten werden, sonst fehlen
   die aeusseren Punkte. Deshalb kein fester Rahmen, nur die eigene Form. */
.bogen{margin:0}
.bogen img{width:100%;height:auto;display:block}
.bogen figcaption{
  display:flex;justify-content:space-between;
  margin-top:.5rem;padding:0 2%;
  font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
/* Hochformatiges Portraet in einem flachen Bildkopf: der Ausschnitt muss oben sitzen */
/* Mobil gehoert der Tagespreis unter den Gesamtpreis, sonst bricht das Eurozeichen um */
@media (max-width:640px){
  .pk-p{flex-direction:column;align-items:flex-start;gap:.15rem}
  .pk-p span{font-size:.88rem}
}

/* ---------- Preisblock: eine Zahl fuehrt, der Tagespreis ordnet sich unter ---------- */
.pk-p{display:block;margin-bottom:.1rem}
.pk-p b{font-weight:600;letter-spacing:-.04em}
.pk-protag{
  margin:0 0 .5rem;font-size:1.12rem;font-weight:400;color:var(--ink-2);
  letter-spacing:-.01em;line-height:1.3;
}
.pk-protag b{font-weight:600;color:var(--green-700)}
.pk-sub{font-size:.85rem;margin-bottom:1.5rem;padding-bottom:1.4rem}
@media (max-width:640px){
  .pk-protag{font-size:1.05rem}
}
.ad-nr{margin-top:.9rem;font-size:.92rem;font-weight:600;color:var(--green-700);
  background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--r-pill);
  display:inline-block;padding:.5em 1.2em}

/* ---------- Koerperzusammensetzung: Ueberschrift ueber der Grafik ----------
   Am Desktop steht die Grafik links, Ueberschrift und Liste rechts.
   Auf dem Handy fuehrt die Ueberschrift, dann kommt die Grafik, dann die Liste. */
.info{
  grid-template-areas:"fig kopf" "fig liste";
  grid-template-rows:auto 1fr;
  align-items:start;
}
.info .komp{grid-area:fig;align-self:center}
.info-kopf{grid-area:kopf;align-self:end}
.info-kopf h3{margin-bottom:0}
.info-text{grid-area:liste;padding-top:1.4rem}
@media (max-width:900px){
  .info{
    grid-template-columns:1fr;
    grid-template-areas:"kopf" "fig" "liste";
    grid-template-rows:auto auto auto;
  }
  .info-text{padding-top:.4rem}
}
/* Der Handlungsaufruf nach dem Tagesablauf sass zu tief, die Sektion davor
   bringt schon Bodenabstand mit. */
/* Der Knopf gehoert zur Sektion darueber, nicht in die Luecke dazwischen.
   Teilt er ihren Grund, faellt deren Fussabstand weg und das Band setzt
   einen eigenen, immer gleichen. Vorher schwankte der Abstand ueber dem
   Knopf zwischen 108 und 273 Pixeln, je nachdem was darueber stand. */
.sec:has(+ .cta-sec:not(.is-eigen)){padding-bottom:0}
.cta-sec{padding:clamp(34px,4vw,52px) 0 clamp(48px,6vw,84px)}
/* Steht das Band auf einem anderen Grund als die Sektion darueber, braucht es mehr Luft */
.cta-sec.is-eigen{padding-top:clamp(44px,5.5vw,72px)}
@media (max-width:640px){ .cta-sec{padding-bottom:clamp(36px,8vw,56px)} }
/* Der Markenname im Kopf traegt jetzt zwei Teile, deshalb etwas kompakter */
.brand-name{font-size:.94rem;white-space:nowrap}
.bn-sep{color:var(--ink-3);margin:0 .12em;font-weight:300}
.hdr .bn-sep{color:rgba(255,255,255,.55)}
.hdr.is-stuck .bn-sep{color:var(--ink-3)}
@media (max-width:1080px){ .brand-name{font-size:.88rem} }
@media (max-width:600px){
  /* Der Name bleibt auch auf dem Handy stehen, dafuer kleiner und
     das Logo etwas schmaler. Ausblenden waere der einfachere Weg,
     aber der Programmname gehoert in den Kopf. */
  .brand img{height:24px}
  .brand-name{font-size:.68rem;letter-spacing:-.005em}
  .bn-sep{margin:0 .08em}
  .brand-txt{padding-left:7px}
  .hdr-in{gap:8px;padding:0 12px}
}
@media (max-width:340px){
  .brand-name{font-size:.62rem}
}

/* ==========================================================================
   Danke-Seite nach der Zahlung (go/danke-abnehmbootcamp.html)
   Eine Seite für alle vier Kassen. Die Karte «Deine Buchung» erscheint nur,
   wenn die Weiterleitung Programm und Zahlungsart mitgibt.
   ========================================================================== */
/* Eigene display-Regeln weiter unten würden .hide sonst überstimmen */
.dk .hide{display:none!important}
.dk-kopf{max-width:740px;margin:0 auto clamp(38px,4.8vw,64px);text-align:center}
.dk-haken{
  position:relative;display:grid;place-items:center;
  width:72px;height:72px;margin:0 auto 1.5rem;border-radius:var(--r-pill);
  background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);
}
.dk-haken::after{content:"";position:absolute;inset:-10px;border-radius:inherit;border:1px solid var(--green-100)}
.dk-haken svg{width:32px;height:32px}
@media (prefers-reduced-motion:no-preference){
  .dk-haken svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:dk-zug .6s .2s cubic-bezier(.65,0,.35,1) forwards}
  .dk-haken::after{animation:dk-ring 1.2s .15s ease-out both}
}
@keyframes dk-zug{to{stroke-dashoffset:0}}
@keyframes dk-ring{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.dk-kopf h1{font-size:clamp(1.9rem,3.8vw,3rem);margin:0 0 1rem;text-wrap:balance}
.dk-kopf .lead{max-width:600px;margin:0 auto}
.dk-nr{
  display:inline-flex;align-items:center;gap:.5em;margin:1.4rem 0 0;
  padding:.45rem 1rem;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);font-size:.82rem;color:var(--ink-2);
}
.dk-nr b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.03em}

.dk-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"schritte karte" "schritte bild";
  column-gap:clamp(28px,4vw,64px);row-gap:clamp(20px,2.4vw,28px);align-items:start;
}
.dk-grid.ohne-karte{grid-template-areas:"schritte bild"}
.dk-schritte{grid-area:schritte}
.dk-karte{
  grid-area:karte;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-1);
}
.dk-l{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.dk-karte .sum-r:last-child{border-bottom:0}
.dk-summe{margin:.7rem 0 0;padding-top:.7rem;border-top:1px dashed var(--line-2)}
.dk-bild{grid-area:bild;margin:0}
.dk-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.dk-fragen{margin-top:clamp(28px,3.4vw,40px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.dk-fragen p{font-size:.92rem;color:var(--ink-2);margin:0 0 1.2rem}
.dk-fragen b{color:var(--ink);font-weight:600}
.dk-fragen .tel-link{white-space:nowrap}
/* Nebeneinander teilen sich die Knöpfe die Zeile, untereinander sind beide gleich breit */
.dk-fragen .cta-row .btn{flex:1 1 220px;justify-content:center}
@media (max-width:860px){
  .dk-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"karte" "schritte" "bild"}
  .dk-grid.ohne-karte{grid-template-areas:"schritte" "bild"}
  .dk-bild{margin-top:.6rem}
}
@media (max-width:520px){
  .dk-fragen .cta-row .btn{white-space:normal}
}
/* Ratenhinweis in den Preiskarten, sonst geht er in der grauen Zeile unter */
.pk-sub b{color:var(--green-700);font-weight:600}

/* =========================================================================
   Anmeldeschluss mit Countdown (go/assets/kontakt.js)
   Ohne Skript bleibt alles mit data-frist versteckt, die Seite sieht aus
   wie vorher. Nach Ablauf blendet das Skript die Hinweise wieder aus.
   ========================================================================= */
[data-frist][hidden],[data-frist-sonst][hidden]{display:none !important}
.anno .frist-rest{color:var(--green);font-weight:600;white-space:nowrap}
.frist-zeile{margin:1rem 0 0;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.78)}
.frist-zeile b{color:#fff;font-weight:600}
.frist-zeile .frist-rest{color:var(--green);font-weight:600;white-space:nowrap}
/* Im Kopf eines Abschnitts: richtet sich nach dessen Ausrichtung */
.frist-wrap{margin:1.25rem 0 0}
.frist{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em .7em;
  padding:.6em 1.2em;border-radius:999px;background:var(--green-50);border:1px solid var(--green-100);
  font-size:.88rem;line-height:1.45;color:var(--ink)}
.frist b{font-weight:600}
.frist .frist-rest{color:var(--green-700);font-weight:600;white-space:nowrap}
.dark .frist,.forest .frist{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86)}
.dark .frist b,.forest .frist b{color:#fff}
.dark .frist .frist-rest,.forest .frist .frist-rest{color:var(--green)}

/* =========================================================================
   Kontakt-Popup «Jetzt Kontakt aufnehmen»
   ========================================================================= */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--green-700);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* CTA am Ende eines Abschnitts, im selben Hintergrund wie der Abschnitt */
.sec-cta{margin-top:clamp(40px,5vw,64px);text-align:center}
.sec-cta .cta-note{margin-left:auto;margin-right:auto}
.band .cta-note{color:rgba(255,255,255,.6)}
.pk-kontakt{text-align:center;margin:clamp(18px,2.4vw,26px) auto 0;max-width:48rem;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.kt{width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;
  border-radius:22px;background:var(--white);color:var(--ink);box-shadow:var(--sh-3);overflow:hidden}
.kt::backdrop{background:rgba(31,40,24,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.kt-in{position:relative;padding:clamp(26px,4vw,40px);overflow:auto;max-height:calc(100dvh - 24px)}
.kt-zu{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--paper-3);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.kt-zu:hover{background:var(--green-100)}
.kt h2{margin:.25em 2.4rem .5em 0;font-size:clamp(1.35rem,2.6vw,1.7rem)}
.kt-text{font-size:.94rem;color:var(--ink-2);line-height:1.6;margin:0 0 1.3rem}
.kt textarea{min-height:76px;resize:vertical}
.kt-falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kt-klein{font-size:.76rem;color:var(--ink-3);line-height:1.5;margin:.85rem 0 0}
.kt-klein a{color:var(--green-700)}
.kt-tel{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem;text-align:center;color:var(--ink-2)}
.kt-tel a{color:var(--green-700);font-weight:600;text-decoration:none;white-space:nowrap}
.kt-fehler{margin:0 0 .9rem;padding:.75em 1em;border-radius:12px;background:#FDF6F5;border:1px solid #E3B4AE;
  font-size:.86rem;line-height:1.5;color:#9A3A2A}
.kt-fehler a{color:#9A3A2A;font-weight:600}
.kt .eyebrow{margin-right:2.8rem}
.kt-danke{text-align:center;padding:clamp(10px,2vw,20px) 0 0}
.kt-danke h2{margin-right:0}
.kt-danke h2:focus{outline:none}
.kt-danke p{color:var(--ink-2);line-height:1.6;margin:0 auto 1.4rem;max-width:26rem}
.kt-danke a{color:var(--green-700);font-weight:600;white-space:nowrap}
.kt-haken{width:58px;height:58px;border-radius:50%;background:var(--green-50);color:var(--green-700);
  display:grid;place-items:center;margin:0 auto 1rem}
.kt-haken svg{width:28px;height:28px}
.kt button[type="submit"][disabled]{opacity:.65;cursor:progress}
body.kt-offen{overflow:hidden}
@media (max-width:560px){
  .kt{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:18px}
  .kt-in{max-height:calc(100dvh - 16px)}
  .cta-sec .cta-row .btn{width:100%;justify-content:center}
}