/* ============================================================
   LOKAL GEHOSTETE SCHRIFTEN
   Ersetzt die vorherige Einbindung ueber fonts.googleapis.com.
   Die acht .woff2-Dateien muessen im Ordner "schriften" liegen,
   auf derselben Ebene wie diese Datei (stil.css).
   ============================================================ */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("schriften/bricolage-grotesque-v9-latin-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("schriften/bricolage-grotesque-v9-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("schriften/bricolage-grotesque-v9-latin-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("schriften/source-serif-4-v14-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("schriften/source-serif-4-v14-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("schriften/source-serif-4-v14-latin-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("schriften/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================
   DESIGN-TOKENS
   Farbwelt: Wiese und Leinen – Beige, Hellgrün, tiefes Laubgrün
   ============================================================ */
:root{
  --ink:        #2B3A28;   /* tiefes Laubgrün, Text + Hauptbuttons */
  --ink-soft:   #5C6B54;   /* Fließtext sekundär */
  --paper:      #F2ECDD;   /* Beige, Seitenhintergrund */
  --card:       #FAF6EC;   /* helleres Beige für Karten */
  --heide:      #4F6C2E;   /* Hellgrün, Akzent (dunkel genug zum Lesen) */
  --heide-tint: #E4EDD3;   /* Hellgrün als Fläche */
  --line:       #DCD2BC;   /* Linien auf Beige */
  --line-dark:  #43563E;   /* Linien auf dunklem Grund */

  --f-display: "Bricolage Grotesque", "Segoe UI", Roboto, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-util:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --wrap: 1140px;
  --r: 4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.62;
  font-optical-sizing:auto;
}
img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.06; letter-spacing:-.022em; margin:0}
h1{font-size:clamp(2.4rem,6vw,4.15rem); font-weight:800}
h2{font-size:clamp(1.85rem,4vw,2.85rem)}
h3{font-size:1.24rem; line-height:1.22; letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.eyebrow{
  font-family:var(--f-util); font-size:.86rem; text-transform:uppercase;
  letter-spacing:.17em; color:var(--heide); margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:30px; height:2px; background:var(--heide); flex:none;
}
@media(max-width:600px){ .eyebrow{font-size:.76rem; letter-spacing:.14em} }
.lede{font-size:1.16rem; color:var(--ink-soft)}

/* --- Platzhalter-Markierung: nach dem Ausfüllen diese Regel löschen --- */
.todo{
  background:#FFE9A8; color:#5C4200; padding:0 .32em;
  border-bottom:2px solid #E0B429; font-family:var(--f-util); font-size:.86em;
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:700; font-size:1rem;
  padding:15px 26px; border-radius:var(--r); border:2px solid var(--ink);
  text-decoration:none; cursor:pointer; transition:transform .16s ease, background .16s ease;
}
.btn--primary{background:var(--ink); color:var(--paper)}
.btn--primary:hover{background:#0B1712; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:rgba(20,35,28,.07)}
.btn--light{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn--light:hover{transform:translateY(-2px)}
.btn--wide{width:100%; padding:18px 26px; font-size:1.08rem}

:focus-visible{outline:3px solid var(--heide); outline-offset:3px}

/* ============================================================
   KOPFZEILE
   ============================================================ */
.top{
  position:sticky; top:0; z-index:50; background:rgba(239,241,234,.94);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--line);
}
.top__in{display:flex; align-items:center; gap:26px; height:70px}
.brand{font-family:var(--f-display); font-weight:800; font-size:1.2rem; letter-spacing:-.03em; text-decoration:none}
.brand span{color:var(--heide)}
.nav{display:flex; gap:24px; margin-left:auto; font-size:.95rem}
.nav a{text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent}
.nav a:hover{border-color:var(--heide)}
.top .btn{padding:11px 19px; font-size:.92rem}
.top__tel{
  font-family:var(--f-util); font-size:.86rem; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap; padding-bottom:2px;
  border-bottom:1.5px solid var(--heide);
}
@media(max-width:1040px){ .top__tel{display:none} }
@media(max-width:900px){ .nav{display:none} .top__in{gap:14px} }

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:64px 0 54px}
.hero__grid{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal; color:var(--heide)}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero__note{margin-top:18px; font-size:.9rem; color:var(--ink-soft)}
@media(max-width:900px){
  .hero{padding:38px 0 34px}
  .hero__grid{grid-template-columns:1fr; gap:36px}
}

/* --- Signature: Rationsrechner --- */
.calc{
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r); padding:28px 26px 26px;
  box-shadow:0 18px 44px -30px rgba(20,35,28,.55);
}
.calc__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:22px}
.calc__title{font-family:var(--f-display); font-weight:700; font-size:1.1rem}
.calc__tag{
  font-family:var(--f-util); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em;
  background:var(--heide-tint); color:var(--heide); padding:5px 9px; border-radius:2px; white-space:nowrap;
}
.calc__label{font-family:var(--f-util); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); display:block; margin-bottom:10px}
.calc__weight{font-family:var(--f-display); font-weight:800; font-size:2.5rem; letter-spacing:-.03em; line-height:1}
.calc__weight small{font-size:1rem; font-weight:500; color:var(--ink-soft); margin-left:.2em}

input[type=range]{width:100%; margin:16px 0 4px; accent-color:var(--heide); height:26px}
.calc__scale{display:flex; justify-content:space-between; font-family:var(--f-util); font-size:.66rem; color:var(--ink-soft)}

.calc__out{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0 20px}
.calc__cell{background:var(--card); padding:15px 16px}
.calc__cell b{display:block; font-family:var(--f-display); font-weight:800; font-size:1.55rem; letter-spacing:-.02em; line-height:1.15}
.calc__cell span{font-family:var(--f-util); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft)}
.calc__fine{font-size:.8rem; color:var(--ink-soft); margin-top:14px; line-height:1.45}

/* ============================================================
   VERTRAUENSLEISTE
   ============================================================ */
.facts{border-block:1.5px solid var(--line); background:var(--card)}
.facts__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.facts__item{background:var(--card); padding:26px 22px}
.facts__item b{display:block; font-family:var(--f-display); font-weight:800; font-size:1.7rem; letter-spacing:-.02em; margin-bottom:3px}
.facts__item span{font-size:.9rem; color:var(--ink-soft)}
@media(max-width:820px){ .facts__grid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   ABSCHNITTE
   ============================================================ */
.sec{padding:82px 0}
.sec--tint{background:var(--card); border-block:1.5px solid var(--line)}
.sec__head{max-width:660px; margin-bottom:46px}
.sec__head p{margin-top:14px}
@media(max-width:900px){ .sec{padding:56px 0} }

.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
@media(max-width:900px){ .cols{grid-template-columns:1fr; gap:30px} }
.col__img{aspect-ratio:4/3; background:var(--heide-tint); border:1.5px solid var(--line); margin-bottom:18px; object-fit:cover; width:100%}
.col h3{margin-bottom:10px}
.col p{font-size:1rem; color:var(--ink-soft)}

/* Bild-Platzhalter */
.ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(135deg,#E6E2D6 0 12px,#EDEAE0 12px 24px);
  border:1.5px dashed #B9B29E; color:#6E6650;
  font-family:var(--f-util); font-size:.72rem; line-height:1.5; padding:16px;
}

/* --- Über mich --- */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start}
.about__fig{margin:0}
.about__photo{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; border:1.5px solid var(--line)}
.about__fig figcaption{
  font-family:var(--f-util); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-soft); margin-top:12px;
}
@media(max-width:900px){ .about{grid-template-columns:1fr; gap:30px} }

/* --- Ablauf (echte Reihenfolge → Nummerierung trägt Information) --- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--line); background:var(--line)}
.step{background:var(--paper); padding:30px 28px}
.sec--tint .step{background:var(--card)}
.step__n{font-family:var(--f-util); font-size:.72rem; color:var(--heide); letter-spacing:.14em; display:block; margin-bottom:16px}
.step h3{margin-bottom:9px}
.step p{font-size:.98rem; color:var(--ink-soft)}
@media(max-width:820px){ .steps{grid-template-columns:1fr} }

/* --- Video --- */
.video{position:relative; aspect-ratio:16/9; border:1.5px solid var(--line); overflow:hidden; background:var(--ink)}
.video button{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:var(--paper); font-family:var(--f-display); font-weight:700; font-size:1.02rem;
}
.video__play{width:70px; height:70px; border-radius:50%; background:var(--heide); display:grid; place-items:center; transition:transform .18s ease}
.video button:hover .video__play{transform:scale(1.08)}
.video__play::after{content:""; border-left:19px solid #fff; border-block:12px solid transparent; margin-left:5px}
.video small{font-family:var(--f-body); font-weight:400; font-size:.8rem; opacity:.75; max-width:33ch; text-align:center}
.video iframe{width:100%; height:100%; border:0}

/* --- Stimmen --- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){ .quotes{grid-template-columns:1fr} }
.quote{background:var(--paper); border:1.5px solid var(--line); padding:28px 26px}
.sec--tint .quote{background:var(--card)}
.quote p{font-size:1.04rem; margin-bottom:18px}
.quote footer{font-family:var(--f-util); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); line-height:1.6}

/* --- FAQ --- */
.faq{max-width:820px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{
  font-family:var(--f-display); font-weight:700; font-size:1.1rem; letter-spacing:-.01em;
  padding:22px 44px 22px 0; cursor:pointer; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; translate:0 -50%;
  font-size:1.6rem; font-weight:500; color:var(--heide); line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 24px; color:var(--ink-soft); max-width:70ch}

/* ============================================================
   TEAMPARTNER-BAND
   ============================================================ */
.team{background:var(--ink); color:var(--paper); padding:82px 0}
.team .eyebrow{color:#D9A9C4}
.team__grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.team p{color:#C3D0C7}
.team ul{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:13px}
.team li{padding-left:26px; position:relative; color:#C3D0C7}
.team li::before{content:"→"; position:absolute; left:0; color:#D9A9C4; font-family:var(--f-util)}
.team__actions{margin-top:30px}
@media(max-width:900px){ .team{padding:56px 0} .team__grid{grid-template-columns:1fr; gap:32px} }

/* ============================================================
   FORMULAR
   ============================================================ */
.form-sec{padding:82px 0 96px}
.form-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start}
@media(max-width:960px){ .form-sec{padding:56px 0 70px} .form-grid{grid-template-columns:1fr; gap:34px} }

.form-side ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px}
.form-side li{padding-left:28px; position:relative; color:var(--ink-soft); font-size:1rem}
.form-side li::before{content:"✓"; position:absolute; left:0; color:var(--heide); font-weight:700}

form{background:var(--card); border:1.5px solid var(--line); padding:32px 30px 30px}
@media(max-width:520px){ form{padding:24px 20px} }

.fieldset{border:0; padding:0; margin:0 0 26px}
.fieldset legend, .flabel{
  font-family:var(--f-util); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-soft); padding:0; margin-bottom:11px; display:block;
}
.req{color:var(--heide)}

.field{margin-bottom:18px}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r);
  padding:13px 14px;
}
.field textarea{min-height:104px; resize:vertical}
.field input:focus, .field textarea:focus{border-color:var(--heide); outline:none}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:520px){ .row{grid-template-columns:1fr} }

/* Segmentierte Auswahl */
.seg{display:flex; flex-wrap:wrap; gap:9px}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{
  border:1.5px solid var(--line); border-radius:var(--r); padding:11px 18px;
  cursor:pointer; font-size:.97rem; background:var(--paper); transition:.14s ease;
}
.seg input:checked + label{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.seg input:focus-visible + label{outline:3px solid var(--heide); outline-offset:2px}

.checks{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:520px){ .checks{grid-template-columns:1fr} }
.check{display:flex; gap:10px; align-items:flex-start; font-size:.97rem; cursor:pointer}
.check input{margin-top:.32em; accent-color:var(--heide); width:17px; height:17px; flex:none}

.consent{display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--ink-soft); line-height:1.5; margin-bottom:22px}
.consent input{margin-top:.25em; accent-color:var(--heide); width:18px; height:18px; flex:none}

.formnote{font-size:.82rem; color:var(--ink-soft); margin-top:15px; text-align:center}
.formmsg{
  display:none; margin-bottom:20px; padding:14px 16px; border-radius:var(--r);
  font-size:.94rem; border:1.5px solid;
}
.formmsg--err{display:block; background:#FDECEC; border-color:#C9534E; color:#7A2C29}
.formmsg--ok{display:block; background:#E6F1E9; border-color:#2F7A4C; color:#1D4A2F}

/* ============================================================
   FUSSZEILE
   ============================================================ */
.foot{background:var(--ink); color:#C3D0C7; padding:60px 0 34px; font-size:.95rem}
.foot__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:44px}
@media(max-width:820px){ .foot__grid{grid-template-columns:1fr; gap:30px} }
.foot h4{font-family:var(--f-util); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#D9A9C4; margin:0 0 14px; font-weight:500}
.foot a{color:#E4EAE4}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot__brand{font-family:var(--f-display); font-weight:800; font-size:1.25rem; color:var(--paper); margin-bottom:12px}
.foot__bar{border-top:1px solid var(--line-dark); padding-top:22px; font-size:.84rem; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

/* ============================================================
   MOBILE AKTIONSLEISTE
   ============================================================ */
.bar{
  position:fixed; bottom:0; left:0; right:0; z-index:60; display:none; gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(239,241,234,.97); border-top:1.5px solid var(--line);
}
.bar .btn{flex:1; padding:14px 12px; font-size:.95rem}
@media(max-width:900px){ .bar{display:flex} body{padding-bottom:78px} }

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ============================================================
   RECHTSSEITEN (Impressum, Datenschutz)
   ============================================================ */
.legal{padding:64px 0 86px}
.legal__in{max-width:760px; margin-inline:auto}
.legal h1{font-size:clamp(2rem,4.5vw,3rem); margin-bottom:12px}
.legal__meta{font-family:var(--f-util); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-soft); margin-bottom:44px}
.legal h2{font-size:1.35rem; margin:44px 0 14px; padding-top:22px; border-top:1.5px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:34px}
.legal h3{font-size:1.05rem; margin:26px 0 8px}
.legal p, .legal address{color:var(--ink-soft); font-style:normal}
.legal address{margin:0 0 1em; line-height:1.7}
.legal a{color:var(--ink); text-decoration-color:var(--heide); text-underline-offset:3px}
.legal__back{display:inline-block; margin-top:44px}
.legal ul{margin:0 0 1em; padding-left:22px; color:var(--ink-soft)}
.legal li{margin-bottom:8px}

/* ============================================================
   PARTNER-ABZEICHEN
   ============================================================ */
.badge{
  display:flex; align-items:center; gap:16px;
  border:1.5px solid var(--line); background:var(--card);
  padding:12px 18px 12px 12px; border-radius:var(--r);
  margin:22px 0 26px; width:fit-content; max-width:100%;
}
.badge img{width:58px; height:58px; border-radius:3px; flex:none}
.badge strong{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:1rem; letter-spacing:-.01em; line-height:1.2;
}
.badge span{display:block; font-size:.88rem; color:var(--ink-soft); margin-top:3px}

.team__logo{
  width:74px; height:74px; border-radius:4px; margin-bottom:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}

/* Direktwege neben dem Formular */
.side-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}

/* ============================================================
   DEKLARATION / DOSENANGABEN
   ============================================================ */
.label-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
@media(max-width:900px){ .label-grid{grid-template-columns:1fr; gap:34px} }

.label{
  background:var(--paper); border:1.5px solid var(--ink);
  padding:24px 24px 20px; border-radius:var(--r);
}
.label__head{border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:16px}
.label__head strong{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:1.2rem; letter-spacing:-.02em;
}
.label__head span{
  display:block; margin-top:5px; font-family:var(--f-util);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.11em; color:var(--heide);
}
.label__list{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px}
.label__list dt{
  font-family:var(--f-util); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-soft); padding-top:.25em;
}
.label__list dd{margin:0; font-size:.97rem; line-height:1.5}
.label__note{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-soft);
}

/* Lebensphase im Rechner */
.seg--calc{margin-bottom:22px}
.seg--calc label{padding:9px 15px; font-size:.9rem}

/* Haltungs-Abschnitt: These links, Ausführung rechts */
.these{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
.these h2{margin-top:4px}
@media(max-width:900px){ .these{grid-template-columns:1fr; gap:26px} }

/* Hervorgehobene Stimme, z. B. von Fachleuten */
.quote--lead{border-color:var(--ink); border-left-width:5px; border-left-color:var(--heide)}
.quote--lead p{font-family:var(--f-display); font-weight:500; font-size:1.12rem; line-height:1.35; letter-spacing:-.01em}

/* Einzelne Stimme: breiter und größer statt verloren im Dreierraster */
.quotes--single{grid-template-columns:1fr; max-width:820px}
.quotes--single .quote{padding:36px 38px}
.quotes--single .quote--lead p{font-size:1.4rem; line-height:1.28; margin-bottom:24px}
@media(max-width:600px){ .quotes--single .quote{padding:26px 24px} .quotes--single .quote--lead p{font-size:1.18rem} }

/* ============================================================
   HINWEISLEISTE ÜBER DER KOPFZEILE
   ============================================================ */
.topbar{background:var(--ink); color:#B9CBBF; font-family:var(--f-util); font-size:.68rem;
  letter-spacing:.04em}
.topbar__in{display:flex; justify-content:space-between; align-items:center; gap:16px;
  min-height:34px; padding-block:8px}
.topbar a{color:#F0DCE8; text-decoration:none; border-bottom:1px solid rgba(240,220,232,.45);
  white-space:nowrap}
.topbar a:hover{border-color:#F0DCE8}
@media(max-width:640px){
  .topbar__in{flex-direction:column; align-items:flex-start; gap:5px; text-align:left}
  .topbar{font-size:.62rem}
}

/* Shop-Knopf in der Kopfzeile */
.btn--shop{padding:11px 17px; font-size:.92rem}
@media(max-width:760px){ .btn--shop{display:none} }

/* ============================================================
   HERO MIT BILD
   ============================================================ */
.hero__fig{margin:0}
.hero__fig img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border:1.5px solid var(--line); border-radius:var(--r)}
.hero__fig figcaption{font-family:var(--f-util); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-top:11px}
.hero__note a{color:var(--ink); text-decoration-color:var(--heide)}

/* ============================================================
   WARUM-ABSCHNITT (dunkel, direkt nach dem Hero)
   ============================================================ */
.warum{background:var(--heide-tint); color:var(--ink); padding:86px 0;
  border-block:1.5px solid #CBDCB0}
.warum .eyebrow{color:#4A6A28}
.warum__head{max-width:720px; margin-bottom:52px}
.warum__head .lede{color:var(--ink-soft); margin-top:18px}
.warum__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#CBDCB0;
  border:1.5px solid #CBDCB0}
.warum__grid article{background:#EEF4E4; padding:30px 26px 32px}
.warum__n{font-family:var(--f-util); font-size:.72rem; color:#4A6A28; letter-spacing:.14em;
  display:block; margin-bottom:18px}
.warum h3{font-size:1.14rem; margin-bottom:10px}
.warum p{font-size:.98rem; color:var(--ink-soft)}
.warum__fuss{margin-top:36px; max-width:70ch; font-size:.95rem; color:var(--ink-soft);
  border-left:3px solid var(--heide); padding-left:18px}
@media(max-width:1000px){ .warum__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .warum{padding:58px 0} .warum__grid{grid-template-columns:1fr} }

/* ============================================================
   VORTEILE
   ============================================================ */
.vorteile{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1.5px solid var(--line)}
.vorteile .vorteil{background:var(--paper); padding:30px 28px}
.sec--tint .vorteile .vorteil{background:var(--card)}
.vorteil h3{margin-bottom:10px}
.vorteil p{font-size:.98rem; color:var(--ink-soft); margin:0}
.nahrung__band{margin-bottom:40px; border:1.5px solid var(--line); border-radius:var(--r);
  overflow:hidden; aspect-ratio:21/8}
.nahrung__band img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:1000px){ .vorteile{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .vorteile{grid-template-columns:1fr}
  .nahrung__band{aspect-ratio:16/9} }

/* Bild im Dosen-Abschnitt */
.dose__bild{width:100%; max-width:340px; height:auto; margin-top:26px;
  border:1.5px solid var(--line); border-radius:var(--r)}

/* ============================================================
   DIREKTVERTRIEB
   ============================================================ */
.regal{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.regal__fig{margin:0}
.regal__fig img{width:100%; height:auto; border:1.5px solid var(--line); border-radius:var(--r)}
.regal__fig figcaption{font-family:var(--f-util); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-top:11px}
@media(max-width:900px){ .regal{grid-template-columns:1fr; gap:30px} }

/* ============================================================
   BEDARFSRECHNER IM EIGENEN ABSCHNITT
   ============================================================ */
.bedarf{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media(max-width:900px){ .bedarf{grid-template-columns:1fr; gap:32px} }

/* ============================================================
   ÜBER MICH: Text links, Bild und Stimme rechts
   ============================================================ */
.about{grid-template-columns:1.05fr .95fr}
.about__seite{display:grid; gap:24px}
.about__bild{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border:1.5px solid var(--line); border-radius:var(--r)}
.about .badge{margin-top:20px}

/* Teampartner-Bild */
.team__bild{width:100%; height:auto; border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}


/* Teampartner als Symbol in der Kopfzeile */
/* Auf sehr schmalen Handys wird das Icon-Paar kompakter, damit Logo
   und Beratung-Button nicht in eine zweite Zeile rutschen. */
@media(max-width:400px){
  .top__icon{width:34px; height:34px}
  .top__icon svg{width:17px; height:17px}
  .top .btn--primary{padding:9px 13px; font-size:.85rem}
  .top__in{gap:8px}
}

.top__icon{display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1.5px solid var(--line); border-radius:var(--r);
  color:var(--ink); text-decoration:none; flex:none; transition:.16s ease}
.top__icon:hover{background:var(--heide-tint); border-color:var(--heide)}
.top__icon svg{width:20px; height:20px}

/* Hinweis unter dem Video */
.video__link{margin-top:12px; font-size:.9rem; color:var(--ink-soft)}
.video__link a{color:var(--ink); text-decoration-color:var(--heide); text-underline-offset:3px}

/* ============================================================
   AUFSCHLÜSSELUNG DER DOSE (animiert beim Scrollen)
   ============================================================ */
.split{background:var(--ink); color:#C7D4C1; padding:88px 0}
.split .eyebrow{color:#A9C486}
.split h2{color:var(--paper)}
.split__head{max-width:640px; margin-bottom:44px}

.split__zahl{display:flex; align-items:baseline; gap:14px; margin-bottom:26px}
.split__zahl b{
  font-family:var(--f-display); font-weight:800; font-size:clamp(3.6rem,11vw,7rem);
  line-height:.9; letter-spacing:-.04em; color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.split__zahl span{
  font-family:var(--f-util); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.13em; color:#A9C486;
}

.split__bar{display:flex; height:62px; border-radius:var(--r); overflow:hidden;
  border:1.5px solid #43563E; background:#22301F}
.split__bar i{
  display:block; width:0; background:var(--ton); height:100%;
  transition:width 1.5s cubic-bezier(.25,.9,.3,1);
}
.split.ist-da .split__bar i{width:calc(var(--anteil) * 1%)}
.split__bar i:nth-child(1){transition-delay:.2s}
.split__bar i:nth-child(2){transition-delay:1.5s}
.split__bar i:nth-child(3){transition-delay:2.6s}
.split__bar i:nth-child(4){transition-delay:3.6s}
.split__bar i:nth-child(5){transition-delay:4.6s}
.split__bar i:nth-child(6){transition-delay:5.3s}
.split__bar i:nth-child(7){transition-delay:5.9s}
.split__bar i:nth-child(8){transition-delay:6.4s}

.split__liste{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px 26px;
}
.split__liste li{
  display:flex; align-items:center; gap:9px; font-size:.92rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease;
}
.split.ist-da .split__liste li{opacity:1; transform:none}
.split.ist-da .split__liste li:nth-child(1){transition-delay:.4s}
.split.ist-da .split__liste li:nth-child(2){transition-delay:1.7s}
.split.ist-da .split__liste li:nth-child(3){transition-delay:2.8s}
.split.ist-da .split__liste li:nth-child(4){transition-delay:3.8s}
.split.ist-da .split__liste li:nth-child(5){transition-delay:4.8s}
.split.ist-da .split__liste li:nth-child(6){transition-delay:5.5s}
.split.ist-da .split__liste li:nth-child(7){transition-delay:6.1s}
.split.ist-da .split__liste li:nth-child(8){transition-delay:6.6s}
.split__fuss{opacity:0; transition:opacity .8s ease 7.4s}
.split.ist-da .split__fuss{opacity:1}
.split__liste span{width:13px; height:13px; border-radius:2px; flex:none}
.split__liste b{font-weight:600; color:var(--paper); margin-left:auto;
  font-family:var(--f-util); font-size:.8rem}

.split__fuss{margin-top:34px; max-width:66ch; font-size:.95rem; color:#9FB39A;
  border-left:3px solid #A9C486; padding-left:18px}
.split__zahl b{transition:none}

@media(max-width:900px){
  .split{padding:60px 0}
  .split__liste{grid-template-columns:repeat(2,1fr)}
  .split__bar{height:48px}
}
@media(max-width:520px){ .split__liste{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .split__bar i{transition:none; width:calc(var(--anteil) * 1%)}
  .split__liste li, .split__fuss{opacity:1; transform:none; transition:none}
}

/* ============================================================
   INSTAGRAM-FOLGEN-HINWEIS
   ============================================================ */
.insta-follow{
  display:flex; align-items:center; gap:12px; margin-top:20px;
  padding:13px 18px; border:1.5px solid var(--line); border-radius:var(--r);
  background:var(--card); text-decoration:none; color:var(--ink);
  width:fit-content; max-width:100%; transition:.16s ease;
}
.insta-follow:hover{border-color:var(--heide); background:var(--heide-tint)}
.insta-follow svg{width:24px; height:24px; color:var(--heide); flex:none}
.insta-follow span{font-size:.94rem; line-height:1.35}
.insta-follow strong{color:var(--heide)}
@media(max-width:480px){ .insta-follow{padding:11px 14px} .insta-follow span{font-size:.88rem} }