/* =========================================================================
   CURA Chemicals GmbH – Exto-Bac Klauenhygiene
   Design-System · PK Digital
   Motive: Perforationsraster (Klauenmatte, 4 % Öffnungsanteil),
           angeschrägte Bandkante (aus dem Flyer), Outline-Pill-Badge,
           Tropfen-Blatt-Marke als Aufzählungszeichen.
   ========================================================================= */

/* ---------- Schriften ---------------------------------------------------- */
@font-face{
  font-family:'Outfit';
  src:url('../assets/fonts/outfit-var.woff2') format('woff2-variations'),
      url('../assets/fonts/outfit-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('../assets/fonts/sourcesans3-var.woff2') format('woff2-variations'),
      url('../assets/fonts/sourcesans3-var.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
}

/* ---------- Variablen ---------------------------------------------------- */
:root{
  /* Marke */
  --gruen-marke:#87A96B;      /* Logo-Grün (Blatt) */
  --gruen-hell:#A8C48F;
  --gruen-mittel:#4C7A56;
  --gruen-dunkel:#2A4A35;
  --gruen-tief:#1D3527;       /* dunkler Bandgrund */
  --cyan:#26A9E0;             /* Logo-Blau (Tropfen) = Wirkstoff/Flüssigkeit */
  --cyan-tief:#0E7FB0;

  /* Flächen */
  --papier:#F6F5F0;           /* warmes Off-White, kein Reinweiß */
  --sand:#EAE7DC;
  --weiss:#FFFFFF;

  /* Text */
  --tinte:#1C231B;
  --tinte-weich:#54604F;
  --grau:#6E6E6E;
  --auf-dunkel:#E7ECE2;
  --auf-dunkel-weich:#AFC0A6;

  /* Form */
  --radius:14px;
  --radius-gross:26px;
  --pill:999px;
  --schatten:0 18px 44px rgba(29,53,39,.13);
  --schatten-tief:0 30px 70px rgba(29,53,39,.28);
  --schatten-produkt:0 34px 46px -22px rgba(29,53,39,.55);

  /* Raster */
  --breite:1220px;
  --gutter:clamp(20px,5vw,56px);
  --sek:clamp(68px,9vw,124px);
  --schraege:clamp(28px,4.4vw,72px);   /* Höhe der angeschrägten Bandkante */
}

/* ---------- Grundlagen --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:'Source Sans 3',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(16.5px,1.06vw,18px);line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--gruen-mittel);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--gruen-dunkel);}

h1,h2,h3,h4,.display{
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;line-height:1.06;letter-spacing:-.022em;
  color:var(--tinte);margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:500;letter-spacing:-.032em;}
h2{font-size:clamp(1.95rem,3.5vw,3.05rem);letter-spacing:-.028em;}
h3{font-size:clamp(1.3rem,1.85vw,1.65rem);font-weight:600;letter-spacing:-.018em;}
h4{font-size:1.06rem;font-weight:600;letter-spacing:-.005em;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
/* Lange deutsche Komposita sauber umbrechen */
p,li,td,th,.lead,.produkt__claim,h1,h2,h3,h4{overflow-wrap:break-word;}
/* Silbentrennung nur dort, wo die Spalten wirklich schmal werden */
@media (max-width:700px){
  p,li,td{hyphens:auto;-webkit-hyphens:auto;}
  .hero__lead,.produkt__claim{hyphens:none;-webkit-hyphens:none;}
}
strong{font-weight:650;color:var(--tinte);}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--gutter);}
.sek{padding-block:var(--sek);position:relative;}
.mittig{text-align:center;}
.lead{font-size:clamp(1.1rem,1.42vw,1.28rem);line-height:1.62;color:var(--tinte-weich);}
.klein{font-size:.9rem;line-height:1.55;}

/* Skip-Link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gruen-tief);
  color:#fff;padding:12px 20px;border-radius:0 0 var(--radius) 0;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px;}

/* ---------- Motiv 1: Perforationsraster (4 % Öffnungsanteil) ------------- */
.perf{position:relative;isolation:isolate;}
.perf::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(231,236,226,.30) 1.6px, transparent 1.7px);
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);
          mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);
}
.perf--hell::before{
  background-image:radial-gradient(circle at center, rgba(42,74,53,.16) 1.6px, transparent 1.7px);
}

/* ---------- Motiv 2: Dunkles Band mit angeschrägter Kante ---------------- */
.band{
  background:var(--gruen-tief);color:var(--auf-dunkel);position:relative;
}
.band h1,.band h2,.band h3,.band h4{color:#fff;}
.band .lead{color:var(--auf-dunkel-weich);}
.band strong{color:#fff;}
.band a{color:#fff;}
/* Helle Karten im dunklen Band führen ihren eigenen Farbkontext */
.band .formular{color:var(--tinte);}
.band .formular h1,.band .formular h2,.band .formular h3,.band .formular h4{color:var(--tinte);}
.band .formular strong{color:var(--tinte);}
.band .formular a{color:var(--gruen-mittel);}
.band .formular a:hover{color:var(--gruen-dunkel);}
.band--oben{clip-path:polygon(0 var(--schraege),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--schraege) * -1);padding-top:calc(var(--sek) + var(--schraege));}
.band--unten{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--schraege)),0 100%);
  padding-bottom:calc(var(--sek) + var(--schraege) * .6);}
.band--beide{
  clip-path:polygon(0 var(--schraege),100% 0,100% calc(100% - var(--schraege)),0 100%);
  margin-top:calc(var(--schraege) * -1);
  padding-top:calc(var(--sek) + var(--schraege));
  padding-bottom:calc(var(--sek) + var(--schraege) * .6);
}

/* ---------- Motiv 3: Outline-Pill-Badge (aus dem Flyer) ------------------ */
.pill{
  display:inline-flex;flex-direction:column;align-items:center;gap:.06em;
  border:1.6px solid var(--gruen-marke);border-radius:var(--pill);
  padding:.62em 1.55em .72em;line-height:1.12;background:transparent;
}
.pill__ueber{
  font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;color:var(--gruen-mittel);
}
.pill__name{
  font-family:'Outfit',sans-serif;font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:400;letter-spacing:.02em;color:var(--gruen-dunkel);white-space:nowrap;
}
.band .pill{border-color:rgba(168,196,143,.55);}
.band .pill__ueber{color:var(--gruen-hell);}
.band .pill__name{color:#fff;}

/* Kleines Label über Überschriften */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gruen-mittel);
  margin:0 0 1.1em;
}
.eyebrow::before{content:"";width:26px;height:1.6px;background:var(--gruen-marke);flex:none;}
.band .eyebrow{color:var(--gruen-hell);}
.band .eyebrow::before{background:var(--gruen-hell);}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;letter-spacing:.005em;
  padding:.94em 1.75em;border-radius:var(--pill);border:1.7px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .22s ease,background .22s ease,
  border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.btn--primaer{background:var(--gruen-tief);color:#fff;box-shadow:0 12px 26px -12px rgba(29,53,39,.7);}
.btn--primaer:hover{background:var(--gruen-mittel);color:#fff;transform:translateY(-2px);}
.btn--linie{border-color:rgba(28,35,27,.24);color:var(--tinte);background:transparent;}
.btn--linie:hover{border-color:var(--gruen-mittel);color:var(--gruen-mittel);transform:translateY(-2px);}
.band .btn--primaer,.hero .btn--primaer{background:var(--gruen-marke);color:var(--gruen-tief);}
.band .btn--primaer:hover,.hero .btn--primaer:hover{background:#fff;color:var(--gruen-tief);}
.band .btn--linie,.hero .btn--linie{border-color:rgba(231,236,226,.4);color:#fff;}
.band .btn--linie:hover,.hero .btn--linie:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}
.btn-reihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem;}

/* ---------- Listen mit Tropfen-Marke ------------------------------------- */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:.72em;}
.liste li{position:relative;padding-left:2.05em;}
.liste li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.15em;height:1.15em;
  background:url('../assets/img/mark.png') center/contain no-repeat;opacity:.95;
}
.liste--zwei{grid-template-columns:1fr;}
@media (min-width:820px){.liste--zwei{grid-template-columns:1fr 1fr;column-gap:2.6em;}}

/* Kompakte Häkchen-Liste (dunkel) */
.liste--strich li{padding-left:1.5em;}
.liste--strich li::before{
  content:"";background:var(--gruen-marke);width:9px;height:9px;border-radius:2px;
  top:.62em;transform:rotate(45deg);
}

/* ---------- Header ------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(246,245,240,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(28,35,27,.07);
  transition:box-shadow .3s ease,background .3s ease,padding .3s ease;
}
.kopf.scrolled{background:rgba(246,245,240,.96);box-shadow:0 8px 30px -18px rgba(29,53,39,.45);}
.kopf__inner{display:flex;align-items:center;gap:22px;min-height:78px;padding-block:12px;}
.kopf__logo{flex:none;display:flex;align-items:center;}
.kopf__logo img{width:auto;height:clamp(38px,3.6vw,50px);transition:height .3s ease;}
.kopf.scrolled .kopf__logo img{height:clamp(34px,3.1vw,42px);}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px);}
.nav a{
  font-family:'Outfit',sans-serif;font-size:.97rem;font-weight:500;color:var(--tinte);
  text-decoration:none;padding:.35em 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.8px;
  background:var(--gruen-marke);transition:right .3s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover{color:var(--gruen-mittel);}
.nav a:hover::after{right:0;}
.kopf__cta{flex:none;display:flex;align-items:center;gap:12px;}
.kopf__tel{
  display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit',sans-serif;
  font-weight:600;font-size:.97rem;color:var(--gruen-tief);text-decoration:none;white-space:nowrap;
}
.kopf__tel svg{width:17px;height:17px;flex:none;color:var(--gruen-marke);}
.kopf__tel:hover{color:var(--gruen-mittel);}
.burger{
  display:none;flex:none;width:46px;height:46px;border:1px solid rgba(28,35,27,.16);
  border-radius:12px;background:transparent;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:1.8px;background:var(--tinte);position:relative;}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1.8px;background:var(--tinte);
}
.burger span::before{top:-6px;} .burger span::after{top:6px;}

@media (max-width:1000px){
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--papier);border-bottom:1px solid rgba(28,35,27,.09);
    padding:8px var(--gutter) 20px;display:none;box-shadow:var(--schatten);
  }
  .nav.open{display:flex;}
  .nav a{padding:.85em 0;border-bottom:1px solid rgba(28,35,27,.07);font-size:1.05rem;}
  .nav a::after{display:none;}
  .burger{display:inline-flex;}
  .kopf__tel span{display:none;}
  .kopf__tel{border:1px solid rgba(28,35,27,.16);border-radius:12px;width:46px;height:46px;
    justify-content:center;}
  .kopf__tel svg{width:19px;height:19px;}
}

/* ---------- Hero --------------------------------------------------------- */
.hero{
  background:var(--gruen-tief);color:var(--auf-dunkel);position:relative;overflow:hidden;
  padding-block:clamp(56px,7vw,96px) 0;
}
.hero__grid{
  display:grid;gap:clamp(34px,4.5vw,60px);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:940px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(40px,4vw,70px);}
}
.hero__text{padding-bottom:clamp(46px,6vw,82px);position:relative;z-index:2;}
.hero h1{color:#fff;}
.hero h1 em{font-style:normal;color:var(--gruen-marke);}
.hero__lead{
  font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.6;color:var(--auf-dunkel-weich);
  max-width:46ch;margin-top:1.3rem;
}
.hero__marken{
  display:flex;flex-wrap:wrap;gap:.55em .9em;margin-top:2.4rem;padding-top:1.7rem;
  border-top:1px solid rgba(231,236,226,.16);
}
.hero__marke{
  font-family:'Outfit',sans-serif;font-size:.79rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--auf-dunkel-weich);
  border:1px solid rgba(231,236,226,.22);border-radius:var(--pill);padding:.42em 1em;
}
/* Foto: bleedet nach rechts aus, linke Kante angeschrägt */
.hero__bild{position:relative;align-self:stretch;min-height:340px;}
.hero__rahmen{
  position:relative;height:100%;min-height:340px;overflow:hidden;
  border-radius:var(--radius-gross) var(--radius-gross) 0 0;
}
/* Mobil: Hochformat begrenzen, sonst füllt es den halben Bildschirm */
@media (max-width:939px){
  .hero__bild{min-height:0;}
  .hero__rahmen{height:auto;min-height:0;aspect-ratio:4/3.4;}
  .hero__rahmen img{height:112%;object-position:52% 46%;}
}
.hero__rahmen img{width:100%;height:118%;object-fit:cover;object-position:52% 42%;}
.hero__stoerer{
  position:absolute;left:clamp(-8px,-1vw,0px);bottom:clamp(22px,3vw,40px);z-index:3;
  background:var(--papier);border-radius:var(--radius);padding:.95em 1.25em;
  box-shadow:var(--schatten-tief);max-width:min(74%,300px);
}
.hero__stoerer .zahl{
  font-family:'Outfit',sans-serif;font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:600;
  color:var(--gruen-tief);line-height:1;letter-spacing:-.02em;display:block;
}
.hero__stoerer .txt{font-size:.86rem;line-height:1.42;color:var(--tinte-weich);margin-top:.3em;display:block;}
@media (min-width:940px){
  .hero__bild{margin-right:calc(var(--gutter) * -1);}
  .hero__rahmen{
    border-radius:var(--radius-gross) 0 0 0;
    clip-path:polygon(clamp(20px,3.4vw,54px) 0, 100% 0, 100% 100%, 0 100%);
  }
}
@media (min-width:1320px){
  .hero__bild{margin-right:calc((100vw - var(--breite)) / -2 - var(--gutter));}
}

/* ---------- Vertrauensstreifen ------------------------------------------- */
.trust{background:var(--sand);border-bottom:1px solid rgba(28,35,27,.06);}
.trust__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(28,35,27,.1);border-inline:1px solid rgba(28,35,27,.1);
}
@media (min-width:860px){.trust__grid{grid-template-columns:repeat(4,1fr);}}
.trust__item{background:var(--sand);padding:clamp(20px,2.6vw,32px) clamp(16px,2vw,26px);}
.trust__item svg{width:26px;height:26px;color:var(--gruen-mittel);margin-bottom:.7em;}
.trust__item h4{margin-bottom:.28em;font-size:1rem;}
.trust__item p{font-size:.9rem;line-height:1.5;color:var(--tinte-weich);margin:0;}

/* ---------- Editorial 2-Spalter ------------------------------------------ */
.editorial{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){
  .editorial{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,5vw,80px);}
  .editorial--sticky > :first-child{position:sticky;top:118px;}
}

/* ---------- Produktbänder ------------------------------------------------ */
.produkt{display:grid;gap:clamp(30px,4vw,64px);align-items:center;grid-template-columns:1fr;}
@media (min-width:900px){
  .produkt{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(44px,5.5vw,86px);}
  .produkt--gedreht .produkt__bild{order:2;}
  .produkt--gedreht .produkt__text{order:1;}
}
.produkt + .produkt{margin-top:clamp(56px,7vw,104px);padding-top:clamp(56px,7vw,104px);
  border-top:1px solid rgba(28,35,27,.1);}
.band .produkt + .produkt{border-top-color:rgba(231,236,226,.16);}
.produkt__bild{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:260px;}
/* Freigestelltes Produkt schwebt auf getönter Scheibe */
.produkt__scheibe{
  position:absolute;inset:auto;width:min(84%,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 34%, rgba(135,169,107,.30), rgba(135,169,107,.07) 62%, transparent 72%);
  z-index:0;
}
.band .produkt__scheibe{
  background:radial-gradient(circle at 42% 34%, rgba(38,169,224,.26), rgba(135,169,107,.10) 60%, transparent 72%);
}
.produkt__bild img{position:relative;z-index:1;max-height:clamp(280px,34vw,460px);width:auto;
  filter:drop-shadow(var(--schatten-produkt));}
.produkt__bild--breit img{max-height:none;width:100%;}

/* Technik-Panel: dunkler Grund für Zeichnungen mit hellen Maßangaben */
.produkt__bild--panel{
  background:var(--gruen-tief);border-radius:var(--radius-gross);
  padding:clamp(24px,3.4vw,46px) clamp(20px,3vw,40px);box-shadow:var(--schatten);
  overflow:hidden;flex-direction:column;
}
.produkt__bild--panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(231,236,226,.24) 1.5px, transparent 1.6px);
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(155deg,#000 0%,rgba(0,0,0,.3) 60%,transparent 90%);
          mask-image:linear-gradient(155deg,#000 0%,rgba(0,0,0,.3) 60%,transparent 90%);
}
.produkt__bild--panel .produkt__scheibe{
  background:radial-gradient(circle at 45% 38%, rgba(38,169,224,.28), rgba(135,169,107,.10) 58%, transparent 72%);
}
.produkt__bild--panel img{filter:none;}
.panel__fuss{
  position:relative;z-index:2;margin-top:1.1em;font-size:.79rem;line-height:1.45;
  color:var(--auf-dunkel-weich);text-align:center;
  font-family:'Outfit',sans-serif;letter-spacing:.1em;text-transform:uppercase;
}
.produkt__kopf{margin-bottom:1.5rem;}
.produkt__claim{
  font-family:'Outfit',sans-serif;font-size:clamp(1.22rem,1.9vw,1.55rem);font-weight:500;
  line-height:1.3;letter-spacing:-.018em;color:var(--gruen-dunkel);margin:0 0 1.1em;
}
.band .produkt__claim{color:var(--gruen-hell);}

/* Anwendungs-/Dosierkasten */
.dosis{
  display:grid;gap:1px;background:rgba(28,35,27,.12);border-radius:var(--radius);
  overflow:hidden;margin-top:1.8rem;grid-template-columns:1fr;
}
@media (min-width:560px){.dosis{grid-template-columns:1fr 1fr;}}
.band .dosis{background:rgba(231,236,226,.2);}
.dosis__zelle{background:var(--papier);padding:1.15em 1.3em;}
.band .dosis__zelle{background:var(--gruen-tief);}
.dosis__label{
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--grau);display:block;margin-bottom:.42em;
}
.band .dosis__label{color:var(--auf-dunkel-weich);}
.dosis__wert{
  font-family:'Outfit',sans-serif;font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:600;
  color:var(--cyan-tief);line-height:1.1;letter-spacing:-.02em;display:block;
}
.band .dosis__wert{color:var(--cyan);}
.dosis__txt{font-size:.87rem;color:var(--tinte-weich);margin-top:.35em;display:block;line-height:1.45;}
.band .dosis__txt{color:var(--auf-dunkel-weich);}

/* Registrierungs-Hinweis */
.reg{
  display:inline-flex;align-items:center;gap:.75em;margin-top:1.7rem;
  border:1px solid rgba(28,35,27,.16);border-radius:var(--radius);padding:.7em 1.1em;
  font-size:.87rem;line-height:1.4;color:var(--tinte-weich);
}
.reg svg{width:20px;height:20px;color:var(--gruen-mittel);flex:none;}
.reg b{display:block;color:var(--tinte);font-weight:650;font-size:.9rem;}
.band .reg{border-color:rgba(231,236,226,.26);color:var(--auf-dunkel-weich);}
.band .reg b{color:#fff;}
.band .reg svg{color:var(--gruen-hell);}

/* ---------- Kennzahlen --------------------------------------------------- */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px);}
@media (min-width:820px){.zahlen{grid-template-columns:repeat(4,1fr);}}
.zahl-item{border-top:2px solid var(--gruen-marke);padding-top:1.05em;}
.zahl-item .wert{
  font-family:'Outfit',sans-serif;font-size:clamp(2.1rem,4vw,3.15rem);font-weight:500;
  line-height:1;letter-spacing:-.035em;color:#fff;display:block;
}
.zahl-item .wert .einheit{font-size:.44em;font-weight:500;letter-spacing:0;margin-left:.14em;
  color:var(--gruen-hell);}
.zahl-item .bez{display:block;margin-top:.65em;font-size:.92rem;line-height:1.45;
  color:var(--auf-dunkel-weich);}

/* ---------- Gebinde ------------------------------------------------------ */
.gebinde{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,30px);}
.gebinde__item{
  background:var(--weiss);border:1px solid rgba(28,35,27,.09);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,30px) clamp(14px,2vw,22px);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.gebinde__item:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(135,169,107,.55);}
/* Höhe proportional zur echten Gebindegröße (--h = Anteil der Rasterhöhe) */
.gebinde__bild{height:clamp(130px,16vw,180px);display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:1.1em;}
.gebinde__bild img{max-height:calc(100% * var(--h,1));width:auto;
  filter:drop-shadow(0 16px 20px -14px rgba(29,53,39,.5));}
.gebinde__item h4{margin:0 0 .25em;font-size:clamp(.98rem,1.35vw,1.12rem);}
.gebinde__item p{font-size:.85rem;color:var(--tinte-weich);margin:0;line-height:1.45;}

/* Größen-Tabelle */
.groessen{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.95rem;}
.groessen caption{text-align:left;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:'Outfit',sans-serif;font-weight:600;color:var(--gruen-hell);padding-bottom:.9em;}
.groessen th,.groessen td{text-align:left;padding:.7em .9em;
  border-bottom:1px solid rgba(231,236,226,.18);}
.groessen th{font-family:'Outfit',sans-serif;font-weight:600;font-size:.79rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--auf-dunkel-weich);}
.groessen td{color:#fff;}
.groessen tr:last-child td{border-bottom:none;}

/* ---------- Ablauf / Schritte -------------------------------------------- */
.schritte{counter-reset:s;display:grid;gap:clamp(24px,3vw,38px);grid-template-columns:1fr;}
@media (min-width:800px){.schritte{grid-template-columns:repeat(3,1fr);}}
.schritt{position:relative;padding-top:1.4em;border-top:1px solid rgba(28,35,27,.14);}
.schritt::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:'Outfit',sans-serif;font-size:.86rem;font-weight:600;letter-spacing:.16em;
  color:var(--gruen-marke);display:block;margin-bottom:.9em;
}
.schritt h3{font-size:clamp(1.12rem,1.5vw,1.32rem);margin-bottom:.45em;}
.schritt p{font-size:.95rem;color:var(--tinte-weich);margin:0;}

/* ---------- Über uns / Zitat --------------------------------------------- */
.zitat{
  border-left:3px solid var(--gruen-marke);padding:.2em 0 .2em 1.5em;margin:2rem 0 0;
  font-family:'Outfit',sans-serif;font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:400;
  line-height:1.4;letter-spacing:-.015em;color:var(--gruen-dunkel);
}
.band .zitat{color:#fff;border-left-color:var(--gruen-hell);}

/* ---------- Kontakt ------------------------------------------------------ */
.kontakt__grid{display:grid;gap:clamp(34px,4.5vw,70px);grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.kontakt__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);}}
.kontakt__daten{display:grid;gap:1.35rem;margin-top:2rem;}
.kdaten{display:flex;gap:1em;align-items:flex-start;}
.kdaten svg{width:21px;height:21px;color:var(--gruen-hell);flex:none;margin-top:.28em;}
.kdaten .lbl{font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--auf-dunkel-weich);display:block;margin-bottom:.2em;}
.kdaten a,.kdaten span.val{color:#fff;text-decoration:none;font-size:1.06rem;line-height:1.45;}
.kdaten a:hover{color:var(--gruen-hell);}

.formular{background:var(--papier);border-radius:var(--radius-gross);padding:clamp(24px,3.4vw,44px);
  box-shadow:var(--schatten-tief);}
.formular h3{margin-bottom:.35em;}
.formular .klein{color:var(--tinte-weich);margin-bottom:1.7em;}
.feld-reihe{display:grid;gap:16px;grid-template-columns:1fr;}
@media (min-width:600px){.feld-reihe{grid-template-columns:1fr 1fr;}}
.feld{display:flex;flex-direction:column;gap:.42em;margin-bottom:16px;}
.feld label{font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:600;color:var(--tinte);}
.feld input,.feld select,.feld textarea{
  font-family:inherit;font-size:1rem;color:var(--tinte);background:var(--weiss);
  border:1px solid rgba(28,35,27,.2);border-radius:10px;padding:.78em .95em;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.feld textarea{min-height:120px;resize:vertical;}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--gruen-mittel);box-shadow:0 0 0 3px rgba(135,169,107,.25);
}
.check{display:flex;gap:.75em;align-items:flex-start;font-size:.87rem;line-height:1.5;
  color:var(--tinte-weich);margin:.4em 0 1.4em;}
.check input{margin-top:.28em;flex:none;width:17px;height:17px;accent-color:var(--gruen-mittel);}
.formular .btn{width:100%;}
.hinweis{font-size:.8rem;color:var(--grau);margin-top:1.1em;line-height:1.5;}

/* ---------- Footer ------------------------------------------------------- */
.fuss{background:#16281D;color:var(--auf-dunkel-weich);padding-block:clamp(48px,6vw,76px) 0;
  font-size:.94rem;}
.fuss__grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr;}
@media (min-width:760px){.fuss__grid{grid-template-columns:1.4fr 1fr 1fr;}}
.fuss img{height:44px;width:auto;margin-bottom:1.2em;}
.fuss h4{color:#fff;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.1em;font-weight:600;}
.fuss a{color:var(--auf-dunkel-weich);text-decoration:none;}
.fuss a:hover{color:#fff;}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em;}
.fuss__unten{
  margin-top:clamp(34px,4.5vw,54px);border-top:1px solid rgba(231,236,226,.14);
  padding-block:1.5em;display:flex;flex-wrap:wrap;gap:.6em 1.8em;align-items:center;
  font-size:.86rem;
}
.fuss__unten .rechts{margin-left:auto;display:flex;gap:1.4em;flex-wrap:wrap;}

/* ---------- Platzhalter-Markierung (nur für die Freigabe) ---------------- */
.ph{
  background:rgba(38,169,224,.14);box-shadow:0 0 0 1px rgba(38,169,224,.4) inset;
  border-radius:4px;padding:.05em .28em;
}

/* ---------- Bewegung ----------------------------------------------------- */
.js [data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0s);will-change:opacity,transform;
}
.js [data-reveal="left"]{transform:translateX(-34px);}
.js [data-reveal="right"]{transform:translateX(34px);}
.js [data-reveal="zoom"]{transform:scale(.95);}
.js [data-reveal].in{opacity:1;transform:none;}
[data-parallax]{will-change:transform;}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  [data-parallax]{transform:none!important;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

@media print{
  .kopf,.burger,.formular{display:none;}
  .band,.hero{background:#fff!important;color:#000!important;}
}

/* =========================================================================
   ERWEITERUNG: Unterseiten (Unternehmen, 4 Produktseiten, Kontakt)
   ========================================================================= */

/* ---------- Navigation mit Untermenü ------------------------------------ */
.nav__item{position:relative;display:flex;align-items:center;}
.nav__item > a{display:inline-flex;align-items:center;gap:.4em;}
.nav__pfeil{width:9px;height:9px;flex:none;transition:transform .25s ease;}
.nav__item:hover .nav__pfeil,.nav__item:focus-within .nav__pfeil{transform:rotate(180deg);}
.nav__sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:266px;background:var(--papier);border:1px solid rgba(28,35,27,.09);
  border-radius:var(--radius);box-shadow:var(--schatten);padding:8px;
  list-style:none;margin:0;display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.nav__sub a{
  display:block;padding:.62em .85em;border-radius:9px;font-size:.95rem;
  color:var(--tinte);text-decoration:none;line-height:1.3;
}
.nav__sub a::after{display:none;}
.nav__sub a:hover{background:var(--sand);color:var(--gruen-dunkel);}
.nav__sub .sub__ueber{
  display:block;font-family:'Outfit',sans-serif;font-size:.6rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gruen-mittel);margin-bottom:.15em;
}
/* aktiver Menüpunkt */
.nav a[aria-current="page"]{color:var(--gruen-mittel);}
.nav > .nav__item > a[aria-current="page"]::after,
.nav > a[aria-current="page"]::after{right:0;}
.nav__sub a[aria-current="page"]{background:var(--sand);color:var(--gruen-dunkel);}

@media (max-width:1000px){
  .nav__item{display:block;}
  .nav__item > a{border-bottom:1px solid rgba(28,35,27,.07);}
  .nav__pfeil{display:none;}
  .nav__sub{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 .3em 0;
  }
  .nav__sub a{padding:.62em 0 .62em 1.2em;border-bottom:1px solid rgba(28,35,27,.05);
    border-radius:0;font-size:.98rem;}
  .nav__sub a:hover{background:transparent;}
  .nav__sub .sub__ueber{display:none;}
}

/* ---------- Seitenkopf der Unterseiten ---------------------------------- */
.seitenkopf{
  background:var(--gruen-tief);color:var(--auf-dunkel);position:relative;overflow:hidden;
  padding-block:clamp(42px,5.4vw,74px) clamp(52px,6.4vw,92px);
}
.seitenkopf h1{color:#fff;margin-bottom:0;}
.seitenkopf .lead{color:var(--auf-dunkel-weich);max-width:52ch;margin-top:1.15rem;}
.seitenkopf--produkt .seitenkopf__grid{
  display:grid;gap:clamp(28px,4vw,58px);align-items:center;grid-template-columns:1fr;
}
@media (min-width:900px){
  .seitenkopf--produkt .seitenkopf__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
}
.seitenkopf__bild{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:220px;}
.seitenkopf__bild img{
  position:relative;z-index:1;max-height:clamp(230px,28vw,380px);width:auto;
  filter:drop-shadow(0 34px 46px -22px rgba(0,0,0,.6));
}
.seitenkopf__bild--panel{
  background:rgba(0,0,0,.16);border-radius:var(--radius-gross);
  padding:clamp(20px,2.6vw,34px);
}
.seitenkopf__bild--panel img{max-height:none;width:100%;filter:none;}
.seitenkopf .pill{margin-bottom:1.15rem;}

/* Brotkrumen */
.krumen{
  font-size:.83rem;color:var(--auf-dunkel-weich);margin:0 0 1.5rem;
  display:flex;flex-wrap:wrap;gap:.45em;align-items:center;
}
.krumen a{color:var(--auf-dunkel-weich);text-decoration:none;}
.krumen a:hover{color:#fff;text-decoration:underline;}
.krumen span[aria-current]{color:#fff;}
.krumen .trenn{opacity:.5;}

/* ---------- Produkt-Teaser (Startseite) --------------------------------- */
.teaser-grid{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr;}
@media (min-width:660px){.teaser-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.teaser-grid{grid-template-columns:repeat(4,1fr);}}
.teaser{
  display:flex;flex-direction:column;position:relative;
  background:rgba(255,255,255,.045);border:1px solid rgba(231,236,226,.16);
  border-radius:var(--radius-gross);padding:clamp(20px,2.4vw,28px);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),border-color .32s ease,background .32s ease;
}
.teaser:hover{transform:translateY(-5px);border-color:rgba(135,169,107,.6);
  background:rgba(255,255,255,.075);}
.teaser__bild{
  height:clamp(140px,15vw,178px);display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:1.2em;position:relative;
}
.teaser__bild::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 45% 38%, rgba(38,169,224,.30), rgba(135,169,107,.10) 58%, transparent 72%);
}
.teaser__bild img{position:relative;z-index:1;max-height:calc(100% * var(--h,1));width:auto;
  filter:drop-shadow(0 22px 26px -18px rgba(0,0,0,.75));}
.teaser__ueber{
  font-family:'Outfit',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gruen-hell);display:block;margin-bottom:.35em;
}
.teaser h3{font-size:clamp(1.15rem,1.5vw,1.32rem);color:#fff;margin-bottom:.5em;}
.teaser p{font-size:.92rem;line-height:1.55;color:var(--auf-dunkel-weich);margin:0 0 1.4em;}
.teaser .weiter{margin-top:auto;}
/* ganze Karte klickbar, Link bleibt aber ein echter Link */
.teaser__link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-gross);}

/* Weiterlesen-Link mit Pfeil */
.weiter{
  display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit',sans-serif;
  font-size:.94rem;font-weight:600;color:var(--gruen-mittel);text-decoration:none;
}
.weiter svg{width:15px;height:15px;flex:none;transition:transform .28s cubic-bezier(.22,.61,.36,1);}
.weiter:hover svg{transform:translateX(4px);}
.band .weiter,.teaser .weiter{color:var(--gruen-hell);}
.band .weiter:hover,.teaser .weiter:hover{color:#fff;}

/* ---------- Spezifikationstabelle --------------------------------------- */
.spec{width:100%;border-collapse:collapse;font-size:.96rem;}
.spec caption{
  text-align:left;font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gruen-mittel);padding-bottom:1em;
}
.band .spec caption{color:var(--gruen-hell);}
.spec th,.spec td{text-align:left;padding:.78em .2em;border-bottom:1px solid rgba(28,35,27,.12);
  vertical-align:top;}
.spec th{font-weight:600;color:var(--tinte-weich);width:44%;font-size:.9rem;}
.spec td{color:var(--tinte);font-weight:500;}
.band .spec th,.band .spec td{border-bottom-color:rgba(231,236,226,.18);}
.band .spec th{color:var(--auf-dunkel-weich);}
.band .spec td{color:#fff;}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none;}

/* ---------- Info-/Warnkasten -------------------------------------------- */
.hinweisbox{
  border-left:3px solid var(--gruen-marke);background:var(--sand);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.15em 1.4em;margin-top:1.8rem;
  font-size:.94rem;line-height:1.6;
}
.hinweisbox h4{margin-bottom:.35em;}
.band .hinweisbox{background:rgba(255,255,255,.07);border-left-color:var(--gruen-hell);
  color:var(--auf-dunkel);}

/* ---------- Abschluss-CTA ----------------------------------------------- */
.cta__grid{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:1fr;align-items:center;}
@media (min-width:840px){.cta__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);}}
.cta h2{margin-bottom:.4em;}
.cta__aktionen{display:flex;flex-direction:column;gap:12px;}
@media (min-width:520px) and (max-width:839px){.cta__aktionen{flex-direction:row;flex-wrap:wrap;}}
.cta__aktionen .btn{justify-content:center;}
.cta__tel{
  display:inline-flex;align-items:center;gap:.6em;font-family:'Outfit',sans-serif;
  font-weight:600;font-size:1.12rem;color:#fff;text-decoration:none;justify-content:center;
  padding:.6em 0;
}
.cta__tel svg{width:19px;height:19px;color:var(--gruen-hell);flex:none;}
.cta__tel:hover{color:var(--gruen-hell);}

/* ---------- Verwandte Produkte ------------------------------------------ */
.mehr-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr;}
@media (min-width:640px){.mehr-grid{grid-template-columns:repeat(3,1fr);}}
.mehr{
  position:relative;display:flex;flex-direction:column;gap:.45em;
  background:var(--weiss);border:1px solid rgba(28,35,27,.09);border-radius:var(--radius);
  padding:1.15em 1.3em;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.mehr:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(135,169,107,.55);}
.mehr .teaser__ueber{color:var(--gruen-mittel);}
.mehr strong{font-family:'Outfit',sans-serif;font-size:1.08rem;font-weight:600;
  color:var(--tinte);letter-spacing:-.01em;}
.mehr span.txt{font-size:.88rem;color:var(--tinte-weich);line-height:1.5;}

/* ---------- Kontaktseite: Karte-Platzhalter ------------------------------ */
.karte{
  border-radius:var(--radius-gross);overflow:hidden;background:var(--sand);
  border:1px solid rgba(28,35,27,.1);aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.6em;gap:.5em;
}
.karte svg{width:34px;height:34px;color:var(--gruen-mittel);}
.karte p{font-size:.9rem;color:var(--tinte-weich);margin:0;max-width:34ch;}

/* ---------- Zwei-Spalten-Fließtext -------------------------------------- */
.text-zwei{columns:1;}
@media (min-width:820px){.text-zwei{columns:2;column-gap:clamp(32px,4vw,60px);}}
.text-zwei p{break-inside:avoid;}

/* Seitenkopf: eigene, ruhigere H1-Stufe (die große H1 gehört der Startseite) */
.seitenkopf h1{font-size:clamp(2.05rem,4vw,3.35rem);letter-spacing:-.028em;font-weight:500;}
.seitenkopf--produkt h1{max-width:19ch;}
/* Der Seitenkopf ist ein Band ohne Schrägkante – Innenabstände bleiben eigen */
.seitenkopf.band{clip-path:none;margin-top:0;}

/* Kontaktdaten: standardmäßig für hellen Grund, invertiert nur im dunklen Band */
.kdaten svg{color:var(--gruen-mittel);}
.kdaten .lbl{color:var(--grau);}
.kdaten a,.kdaten span.val{color:var(--tinte);}
.kdaten a:hover{color:var(--gruen-mittel);}
.band .kdaten svg{color:var(--gruen-hell);}
.band .kdaten .lbl{color:var(--auf-dunkel-weich);}
.band .kdaten a,.band .kdaten span.val{color:#fff;}
.band .kdaten a:hover{color:var(--gruen-hell);}