/* ==========================================================================
   The Health Concept  |  style.css
   Farben und Schriften stammen aus dem Quelltext der Vorgaengerseite:
   Akzentgruen #4B6A4A, Wortmarken-Braun #3F1C0F, Outfit + Inter.
   ========================================================================== */

/* ---------- Schriften, lokal ausgeliefert ------------------------------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/outfit-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/outfit-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/outfit-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/outfit-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/outfit-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/outfit-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/outfit-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/outfit-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Design-Tokens ----------------------------------------------- */
:root{
  --papier:#FBFAF7;
  --papier-2:#F3F0E9;
  --tinte:#0D141A;
  --tinte-weich:#4A5457;
  --gruen:#4B6A4A;
  --gruen-dunkel:#3A5439;
  --gruen-zart:#E7EBE3;
  --braun:#3F1C0F;
  --nacht:#141A16;
  --nacht-2:#1E2620;
  --linie:rgba(13,20,26,.12);
  --linie-hell:rgba(255,255,255,.18);

  --schrift-h:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --schrift-t:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --h1:clamp(2.2rem,1.15rem + 3.9vw,4.1rem);
  --h2:clamp(1.75rem,1.05rem + 2.5vw,3rem);
  --h3:clamp(1.3rem,1.05rem + .9vw,1.85rem);
  --h4:clamp(1.1rem,1rem + .45vw,1.35rem);
  --text:clamp(1rem,.97rem + .13vw,1.09rem);
  --klein:.875rem;

  --spur:min(1240px,100% - 2.5rem);
  --spur-eng:min(880px,100% - 2.5rem);
  --luft:clamp(3.75rem,2.2rem + 6vw,7.5rem);
  --radius:18px;
  --radius-gross:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Grundlagen --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift-t);font-size:var(--text);font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--schrift-h);line-height:1.13;letter-spacing:-.018em;margin:0 0 .55em;font-weight:600;}
h1{font-size:var(--h1);}
h2{font-size:var(--h2);}
h3{font-size:var(--h3);}
h4{font-size:var(--h4);letter-spacing:-.008em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
a{color:inherit;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px;}
ul{margin:0 0 1.15em;padding-left:1.15em;}
li{margin-bottom:.4em;}
strong{font-weight:600;}
body.gesperrt{overflow:hidden;}
.visuell-versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sprung{
  position:fixed;top:.75rem;left:.75rem;z-index:200;transform:translateY(-160%);
  background:var(--tinte);color:#fff;text-decoration:none;border-radius:999px;
  padding:.85rem 1.7rem;font-size:.9rem;font-weight:500;min-height:44px;
  display:inline-flex;align-items:center;transition:transform .24s var(--ease);
}
.sprung:focus{transform:translateY(0);}

.spur{width:var(--spur);margin-inline:auto;}
.spur-eng{width:var(--spur-eng);margin-inline:auto;}
.sektion{padding-block:var(--luft);}
.sektion-dicht{padding-block:calc(var(--luft) * .62);}

/* Pflichtregel: picture ist sonst ein Inline-Kasten ohne Hoehe,
   dadurch loest height:100% nicht auf und object-fit greift nicht. */
.bild picture,.karte-bild picture,.hero-bg picture{
  display:block;width:100%;height:100%;
}
.bild img,.karte-bild img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Kopfbereich -------------------------------------------------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(251,250,247,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.kopf-innen{
  width:var(--spur);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.15rem;transition:padding .32s var(--ease);
}
.kopf.kompakt{border-bottom-color:var(--linie);box-shadow:0 6px 30px rgba(13,20,26,.06);}
.kopf.menue-offen{background:var(--papier);backdrop-filter:none;box-shadow:none;border-bottom-color:transparent;}
.kopf.kompakt .kopf-innen{padding-block:.6rem;}
.marke{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;}
.marke img{height:clamp(38px,4.4vw,58px);width:auto;transition:height .32s var(--ease),filter .3s var(--ease);}
.kopf.kompakt .marke img{height:clamp(30px,3.2vw,40px);}
.marke:hover img{filter:drop-shadow(0 3px 10px rgba(75,106,74,.35));}

.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem);}
.nav a{
  font-size:.8rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;position:relative;
  min-height:44px;display:inline-flex;align-items:center;padding-block:.35rem;
  transition:color .22s var(--ease);
}
/* Knoepfe in der Navigation sind auch nur Links und wuerden sonst die
   Textfarbe der Navigation erben. Schwarz auf Schwarz. */
.nav a:not(.knopf){color:var(--tinte);}
.nav a:not(.knopf)::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1.5px;background:var(--gruen);
  transform:scaleX(0);transform-origin:right;transition:transform .34s var(--ease);
}
.nav a:not(.knopf):hover{color:var(--gruen-dunkel);}
.nav a:not(.knopf):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.nav a[aria-current="page"]{color:var(--gruen-dunkel);}

.menue-knopf{
  display:none;width:46px;height:46px;border:1px solid var(--linie);background:transparent;
  border-radius:50%;cursor:pointer;position:relative;flex:0 0 auto;
}
.menue-knopf span{
  position:absolute;left:13px;width:20px;height:1.6px;background:var(--tinte);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.menue-knopf span:nth-child(1){top:17px;}
.menue-knopf span:nth-child(2){top:22.2px;}
.menue-knopf span:nth-child(3){top:27.4px;}
.menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(5.2px) rotate(45deg);}
.menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg);}

/* ---------- Knoepfe ------------------------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--schrift-t);font-size:.95rem;font-weight:500;line-height:1;
  padding:1rem 2.3rem;border-radius:999px;border:1.5px solid var(--tinte);
  background:var(--tinte);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease);
}
.knopf:hover{background:var(--gruen);border-color:var(--gruen);color:#fff;transform:translateY(-2px);}
.knopf-zweit{background:transparent;color:var(--tinte);border-color:var(--tinte);}
.knopf-zweit:hover{background:var(--tinte);color:#fff;border-color:var(--tinte);}
.knopf-hell{background:#fff;color:var(--tinte);border-color:#fff;}
.knopf-hell:hover{background:var(--gruen);border-color:var(--gruen);color:#fff;}
.knopf-rand-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);}
.knopf-rand-hell:hover{background:#fff;color:var(--tinte);border-color:#fff;}
/* Der Knopf im Kopfbereich ist bewusst breiter als die uebrigen */
.nav .knopf{padding:.85rem 2.7rem;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;}
.nav .knopf::after{display:none;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.9rem;}

/* ---------- Signature: der Baum als wiederkehrendes Zeichen -------------- */
.zeichen{display:flex;align-items:center;justify-content:center;gap:1.15rem;margin-block:0 2.6rem;}
.zeichen::before,.zeichen::after{content:"";height:1px;width:min(96px,16vw);background:var(--linie);}
.zeichen img{width:34px;height:auto;opacity:.85;}
.zeichen-hell::before,.zeichen-hell::after{background:var(--linie-hell);}
.augenbraue{
  display:block;font-family:var(--schrift-t);font-size:.76rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gruen);margin-bottom:1.05rem;
}
.augenbraue-hell{color:#F0F6EE;}
.mitte{text-align:center;}
.mitte .augenbraue{text-align:center;}
.fuehrung{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:var(--tinte-weich);max-width:62ch;}
.mitte .fuehrung{margin-inline:auto;}

/* ---------- Abstands-Helfer ---------------------------------------------- */
.sektion-unterseite{padding-top:calc(var(--luft) + 4.5rem);}
.knopf-reihe-mitte{justify-content:center;}
.abstand-gross{margin-top:clamp(2rem,4vw,3rem);}
.abstand-mittel{margin-top:clamp(1.8rem,3.4vw,2.6rem);}
.abstand-klein{margin-top:clamp(1.4rem,2.6vw,2rem);}

/* ---------- Hero --------------------------------------------------------- */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:max(clamp(600px,92vh,900px),min(32vw,960px));
  padding-block:clamp(8rem,14vh,11rem) clamp(3.5rem,7vh,5.5rem);
  overflow:hidden;isolation:isolate;color:#fff;
}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
/* Ein einziger flacher Verlauf, in der Mitte nahezu transparent.
   Zwei gestapelte Verlaeufe machen aus dem Foto eine schwarze Flaeche. */
.hero-schleier{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(10,16,12,.50) 0%,
    rgba(10,16,12,.20) 34%,
    rgba(10,16,12,.30) 60%,
    rgba(10,16,12,.78) 100%);
}
.hero-innen{width:var(--spur);margin-inline:auto;position:relative;}
.hero h1{max-width:19ch;margin-bottom:1.5rem;text-shadow:0 2px 26px rgba(0,0,0,.32);}
.hero-zitat{
  max-width:44ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6;
  color:#fff;border-left:2px solid rgba(255,255,255,.5);padding-left:1.2rem;margin-bottom:2.2rem;
}
.hero-zitat cite{display:block;margin-top:.6rem;font-style:normal;font-size:.86rem;letter-spacing:.09em;
  text-transform:uppercase;color:#D8E2D4;}
.hero-runter{
  position:absolute;left:50%;bottom:clamp(1rem,2.5vh,2rem);z-index:2;
  width:30px;height:48px;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;
  transform:translateX(-50%);display:grid;place-items:center;
}
.hero-runter::after{content:"";width:3px;height:8px;border-radius:2px;background:#fff;
  animation:tropfen 1.9s var(--ease) infinite;}
@keyframes tropfen{0%{transform:translateY(-7px);opacity:0}35%{opacity:1}100%{transform:translateY(8px);opacity:0}}

/* Seiten-Hero der Unterseiten: flacher, deshalb ein eigener flacherer Verlauf */
.hero-seite{
  min-height:clamp(380px,52vh,560px);align-items:center;
  padding-block:clamp(7.5rem,13vh,9.5rem) clamp(3rem,6vh,4.5rem);
}
.hero-seite .hero-schleier{
  background:linear-gradient(to bottom,
    rgba(10,16,12,.58) 0%,
    rgba(10,16,12,.50) 50%,
    rgba(10,16,12,.68) 100%);
}
.hero-seite h1{max-width:16ch;margin-bottom:1rem;}
.hero-seite .fuehrung{color:#F4F7F2;max-width:56ch;}

/* ---------- Zahlenband: in der Spur, als Karten -------------------------- */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.5rem);}
.zahl{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem) 1.2rem;text-align:center;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.zahl:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(13,20,26,.08);border-color:rgba(75,106,74,.45);}
.zahl b{display:block;font-family:var(--schrift-h);font-size:clamp(2.1rem,1.3rem + 2.7vw,3.3rem);
  font-weight:700;line-height:1;color:var(--gruen);letter-spacing:-.03em;}
.zahl span{display:block;margin-top:.6rem;font-size:.82rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-weich);}

/* ---------- Zweispalter --------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.duo-schmal{grid-template-columns:.95fr 1.05fr;}
.duo-gedreht .duo-bild{order:2;}
.duo-bild{position:relative;border-radius:var(--radius-gross);overflow:hidden;aspect-ratio:4/5;}
.duo-bild-breit{aspect-ratio:5/4;}
.duo-bild img{transition:transform .8s var(--ease);}
.duo-bild:hover img{transform:scale(1.04);}
.duo-bild::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none;}

/* ---------- Methodenkarten ----------------------------------------------- */
.karten{display:grid;gap:clamp(1.1rem,2vw,1.8rem);}
.karten-3{grid-template-columns:repeat(3,1fr);}
.karten-4{grid-template-columns:repeat(4,1fr);}

.karte{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  text-decoration:none;color:inherit;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.karte:hover{transform:translateY(-5px);box-shadow:0 20px 52px rgba(13,20,26,.1);border-color:rgba(75,106,74,.4);}
.karte-bild{position:relative;aspect-ratio:4/3;overflow:hidden;}
.karte-bild img{transition:transform .85s var(--ease);}
.karte:hover .karte-bild img{transform:scale(1.05);}
/* Der Verlauf ueber dem Kartenbild setzt erst spaet ein und schneidet das Motiv nicht an */
.karte-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,20,26,.55) 0%,rgba(13,20,26,0) 34%);
}
.karte-text{padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;flex:1;}
.karte-text h3{margin-bottom:.5rem;}
.karte-text p{color:var(--tinte-weich);font-size:.98rem;}
.karte-hinweis{
  margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.55rem;
  font-size:.83rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gruen);
}
.karte-hinweis svg{transition:transform .32s var(--ease);}
.karte:hover .karte-hinweis svg{transform:translateX(5px);}

/* ---------- Methodenbloecke (ausfuehrlich) ------------------------------- */
.methode{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--linie);}
.methode:first-of-type{border-top:0;padding-top:0;}
.methode:nth-child(even) .methode-bild{order:2;}
.methode-bild{border-radius:var(--radius-gross);overflow:hidden;aspect-ratio:5/4;position:relative;}
.methode-nr{
  font-family:var(--schrift-h);font-size:.8rem;font-weight:600;letter-spacing:.2em;
  color:var(--gruen);display:block;margin-bottom:.85rem;
}

/* ---------- Angebote / Preise -------------------------------------------- */
.angebot{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.angebot:hover{transform:translateY(-5px);box-shadow:0 20px 52px rgba(13,20,26,.1);border-color:rgba(75,106,74,.4);}
.angebot-bild{aspect-ratio:16/10;overflow:hidden;position:relative;}
.angebot-bild img{transition:transform .85s var(--ease);}
.angebot:hover .angebot-bild img{transform:scale(1.05);}
.angebot-text{padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;flex:1;gap:.2rem;}
.angebot-text p{color:var(--tinte-weich);font-size:.98rem;}
.preis{
  font-family:var(--schrift-h);font-size:clamp(1.6rem,1.2rem + 1.3vw,2.15rem);font-weight:700;
  color:var(--braun);letter-spacing:-.02em;line-height:1;margin:.9rem 0 1.4rem;
}
.preis small{font-family:var(--schrift-t);font-size:.8rem;font-weight:400;letter-spacing:.04em;
  color:var(--tinte-weich);display:block;margin-top:.45rem;}
.angebot .knopf{margin-top:auto;width:100%;}

/* ---------- Dunkler Bereich ---------------------------------------------- */
.dunkel{background:var(--nacht);color:#fff;position:relative;overflow:hidden;}
.dunkel h2,.dunkel h3{color:#fff;}
/* Karten haben einen eigenen hellen Grund und duerfen die weisse
   Schriftfarbe der dunklen Sektion nicht erben. Sonst weiss auf weiss. */
.dunkel .karte,.dunkel .angebot,.dunkel .zahl,.dunkel .kontakt-kachel{color:var(--tinte);}
.dunkel .karte h3,.dunkel .angebot h3,.dunkel .kontakt-kachel b{color:var(--tinte);}
.dunkel .karte .karte-hinweis,.dunkel .zahl b{color:var(--gruen);}
.dunkel .zahl span{color:var(--tinte-weich);}
.dunkel .fuehrung{color:#C9D3C6;}
.dunkel-baum{
  position:absolute;right:-4%;bottom:-12%;width:min(420px,42vw);opacity:.05;pointer-events:none;
  z-index:0;
}
.dunkel > .spur,.dunkel > .spur-eng{position:relative;z-index:1;}

/* ---------- Kundenstimmen ------------------------------------------------ */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem);align-items:start;}
.stimme{
  background:rgba(255,255,255,.045);border:1px solid var(--linie-hell);border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;height:100%;
  transition:background .34s var(--ease),border-color .34s var(--ease),transform .34s var(--ease);
}
.stimme:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.32);transform:translateY(-4px);}
.sterne{display:flex;gap:3px;margin-bottom:1rem;}
.sterne svg{width:15px;height:15px;fill:#D9B45B;}
.stimme h3{font-size:1.02rem;font-weight:600;margin-bottom:.7rem;letter-spacing:-.005em;}
.stimme p{font-size:.95rem;line-height:1.68;color:#CFD8CB;}
.stimme footer{
  margin-top:auto;padding-top:1.2rem;display:flex;align-items:center;gap:.8rem;
  border-top:1px solid var(--linie-hell);
}
.stimme footer .kuerzel{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--gruen);color:#fff;font-family:var(--schrift-h);font-weight:600;font-size:.82rem;
  letter-spacing:.02em;line-height:1;
}
.stimme footer b{display:block;font-size:.9rem;font-weight:600;color:#fff;}
.stimme footer span{display:block;font-size:.76rem;color:#9BA79A;}

/* ---------- Galerie ------------------------------------------------------ */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.1vw,.9rem);}
.galerie-feld{
  position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:14px;
  border:0;padding:0;background:none;cursor:zoom-in;display:block;
}
.galerie-feld img{transition:transform .9s var(--ease),filter .5s var(--ease);}
.galerie-feld::after{
  content:"";position:absolute;inset:0;background:rgba(13,20,26,.16);
  opacity:0;transition:opacity .38s var(--ease);
}
.galerie-feld:hover img{transform:scale(1.08);}
.galerie-feld:hover::after{opacity:1;}
.galerie-feld:nth-child(1),.galerie-feld:nth-child(8){grid-column:span 2;grid-row:span 2;aspect-ratio:1/1;}

/* Leuchtkasten */
.kasten{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(9,13,10,.93);padding:clamp(1rem,4vw,3rem);
}
.kasten[open],.kasten.auf{display:grid;}
.kasten img{max-width:min(1100px,92vw);max-height:86vh;width:auto !important;height:auto !important;border-radius:12px;object-fit:contain;}
.kasten-zu{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
}
.kasten-zu:hover{background:rgba(255,255,255,.12);}

/* ---------- Siegel -------------------------------------------------------- */
.siegel{display:flex;gap:clamp(1rem,2.4vw,1.9rem);flex-wrap:wrap;align-items:center;margin-top:2rem;}
.siegel img{width:clamp(88px,10vw,116px);height:auto;border-radius:14px;}

/* ---------- Aufklapper (FAQ) --------------------------------------------- */
.klapp{border-top:1px solid var(--linie);}
.klapp:last-of-type{border-bottom:1px solid var(--linie);}
.klapp summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--schrift-h);font-size:var(--h4);font-weight:600;letter-spacing:-.008em;
}
.klapp summary::-webkit-details-marker{display:none;}
.klapp summary::after{
  content:"";position:absolute;right:.6rem;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--gruen);border-bottom:1.8px solid var(--gruen);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.klapp[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.klapp-inhalt{padding-bottom:1.5rem;color:var(--tinte-weich);max-width:72ch;}
.klapp-inhalt a{color:var(--gruen);text-underline-offset:3px;padding-block:3px;display:inline-block;}
.dunkel .klapp-inhalt a{color:#B8CDB2;}
.dunkel .klapp summary{color:#fff;}
.dunkel .klapp,.dunkel .klapp:last-of-type{border-color:var(--linie-hell);}
.dunkel .klapp-inhalt{color:#C9D3C6;}

/* ---------- Kontaktkacheln ------------------------------------------------ */
.kontakt-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem);}
.kontakt-kachel{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.3rem);text-decoration:none;color:inherit;display:flex;
  flex-direction:column;gap:.4rem;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.kontakt-kachel:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(13,20,26,.09);
  border-color:rgba(75,106,74,.45);}
.kontakt-kachel .augenbraue{margin-bottom:.5rem;}
.kontakt-kachel b{font-family:var(--schrift-h);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  font-weight:600;letter-spacing:-.01em;word-break:break-word;}
.kontakt-kachel span{font-size:.93rem;color:var(--tinte-weich);}

/* ---------- Rechtstexte --------------------------------------------------- */
.rechtstext{max-width:78ch;}
.rechtstext h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin-top:2.6rem;}
.rechtstext h2:first-child{margin-top:0;}
.rechtstext h3{font-size:var(--h4);margin-top:1.9rem;}
.rechtstext p,.rechtstext li{color:var(--tinte-weich);font-size:1rem;}
.rechtstext a{color:var(--gruen);text-underline-offset:3px;padding-block:3px;display:inline-block;}
.rechtstext .kasten-hinweis{
  background:var(--gruen-zart);border:1px solid rgba(75,106,74,.24);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin:1.8rem 0;
}
.rechtstext .kasten-hinweis p{color:var(--tinte);margin-bottom:0;}
.stand{font-size:.86rem;color:var(--tinte-weich);margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--linie);}

/* ---------- Abschluss-Aufruf --------------------------------------------- */
.aufruf{position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  padding-block:clamp(4.5rem,9vw,7.5rem);}
.aufruf-bg{position:absolute;inset:0;z-index:-2;}
.aufruf-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;}
.aufruf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(10,16,12,.72) 0%,rgba(10,16,12,.55) 50%,rgba(10,16,12,.78) 100%);
}
.aufruf h2{max-width:20ch;margin-inline:auto;}
.aufruf .fuehrung{color:#F2F6F0;margin-bottom:2.2rem;}
.aufruf .knopf-reihe{justify-content:center;}

/* ---------- Fussbereich --------------------------------------------------- */
.fuss{background:var(--nacht);color:#C9D3C6;padding-block:clamp(3.5rem,6vw,5rem) 2rem;}
.fuss-oben{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);}
.fuss img.fuss-logo{height:52px;width:auto;margin-bottom:1.3rem;}
.fuss p{font-size:.95rem;line-height:1.7;max-width:38ch;}
.fuss .fuss-titel{color:#fff;font-family:var(--schrift-h);font-size:.79rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:1.15rem;}
.fuss ul{list-style:none;margin:0;padding:0;}
.fuss li{margin-bottom:.42rem;}
.fuss a{color:#C9D3C6;text-decoration:none;font-size:.95rem;transition:color .24s var(--ease);
  min-height:26px;display:inline-flex;align-items:center;}
.fuss a:hover{color:#fff;}
.fuss-unten{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;gap:1rem 1.8rem;justify-content:space-between;align-items:center;
  font-size:.85rem;color:#8E9A8D;
}
.fuss-unten nav{display:flex;gap:1.5rem;flex-wrap:wrap;}
.fuss-unten a{font-size:.85rem;min-height:26px;display:inline-flex;align-items:center;}

/* ---------- 404 ------------------------------------------------------------ */
.vierhundert{min-height:72vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(7rem,14vh,10rem) var(--luft);}
.vierhundert b{display:block;font-family:var(--schrift-h);font-size:clamp(4rem,3rem + 7vw,9rem);
  font-weight:700;line-height:.9;color:#748A6D;letter-spacing:-.05em;margin-bottom:1rem;}

/* ---------- Einblendungen beim Scrollen ---------------------------------- */
.js .rein{opacity:0;transform:translateY(24px);}
.rein{transition:opacity .72s var(--ease),transform .72s var(--ease);}
.rein.da{opacity:1;transform:none;}
/* Gestaffelt ueber feste Klassen, damit ohne Inline-Styles gearbeitet wird */
.v1{transition-delay:.06s}.v2{transition-delay:.12s}.v3{transition-delay:.18s}
.v4{transition-delay:.24s}.v5{transition-delay:.30s}.v6{transition-delay:.36s}
.v7{transition-delay:.42s}.v8{transition-delay:.48s}

/* ---------- Breakpoints ---------------------------------------------------- */
@media (max-width:1080px){
  .karten-4{grid-template-columns:repeat(2,1fr);}
  .galerie{grid-template-columns:repeat(3,1fr);}
  .galerie-feld:nth-child(8){grid-column:span 1;grid-row:span 1;}
  .fuss-oben{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .nav{
    position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;
    padding:6.5rem 1.75rem 2.5rem;
    background:var(--papier);flex-direction:column;align-items:flex-start;gap:.35rem;
    transform:translateY(-100%);transition:transform .42s var(--ease);
    overflow-y:auto;
  }
  /* Marke und Schaltflaeche bleiben ueber dem geoeffneten Menue sichtbar */
  .marke{position:relative;z-index:70;}
  .hero-runter{display:none;}
  .nav.auf{transform:translateY(0);}
  .nav a{font-size:1.05rem;letter-spacing:.06em;padding-block:.72rem;width:100%;}
  .nav .knopf{margin-top:1.1rem;width:100%;padding-block:1rem;font-size:.86rem;}
  .menue-knopf{display:block;z-index:70;}
  .duo,.methode{grid-template-columns:1fr;gap:2.2rem;}
  .duo-gedreht .duo-bild,.methode:nth-child(even) .methode-bild{order:0;}
  .karten-3{grid-template-columns:repeat(2,1fr);}
  .stimmen{grid-template-columns:repeat(2,1fr);}
  .kontakt-gitter{grid-template-columns:1fr;}
  /* Querformat laesst sich nicht hochkant zuschneiden:
     Bild in voller Breite an die Unterkante, Text darueber. */
  .hero{align-items:flex-end;}
  .hero-bg video,.hero-bg img{object-position:center bottom;}
  /* Der Text liegt hier tiefer im Motiv, deshalb ein kraeftigerer Verlauf */
  .hero .hero-schleier{
    background:linear-gradient(to bottom,
      rgba(10,16,12,.52) 0%,
      rgba(10,16,12,.30) 26%,
      rgba(10,16,12,.56) 62%,
      rgba(10,16,12,.86) 100%);
  }
  .hero-seite .hero-schleier{
    background:linear-gradient(to bottom,
      rgba(10,16,12,.60) 0%,
      rgba(10,16,12,.46) 50%,
      rgba(10,16,12,.70) 100%);
  }
}
@media (max-width:680px){
  :root{--spur:min(1240px,100% - 2rem);--spur-eng:min(880px,100% - 2rem);}
  .zahlen{grid-template-columns:1fr;}
  .karten-3,.karten-4{grid-template-columns:1fr;}
  .stimmen{grid-template-columns:1fr;}
  .galerie{grid-template-columns:repeat(2,1fr);}
  .galerie-feld:nth-child(1){grid-column:span 2;grid-row:span 1;aspect-ratio:16/10;}
  .fuss-oben{grid-template-columns:1fr;}
  .fuss-unten{flex-direction:column;align-items:flex-start;}
  .knopf-reihe .knopf{width:100%;}
  .aufruf .knopf-reihe{flex-direction:column;}
  .duo-bild{aspect-ratio:5/4;}
}

/* ---------- Bewegung reduzieren: Inhalte bleiben sichtbar ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .rein{opacity:1 !important;transform:none !important;}
  .hero-runter::after{animation:none;}
}

/* ---------- Druck ---------------------------------------------------------- */
@media print{
  .kopf,.fuss,.hero-runter,.aufruf,.kasten{display:none !important;}
  body{background:#fff;color:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
}