/* =========================================================
   Rehbaum Garten- und Landschaftsbau
   Gestaltung: warm, erdig, editorial – Farben aus dem Logo
   ========================================================= */

/* ---------- Schriften (self-hosted, DSGVO-konform) ---------- */
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight:200 600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Grün aus der Wortmarke */
  --forest-deep:#1b2415;
  --forest:#2b3a21;
  --moss:#55772f;
  --moss-dark:#456226;
  --leaf:#8ca85e;
  --leaf-bright:#a8c47a;

  /* Erde und Stein aus der Bildmarke */
  --bark:#6b5a34;
  --clay:#b5714a;
  --clay-deep:#9a5c39;
  --stone:#a8a89c;
  --stone-light:#c9c2b6;

  /* Papier */
  --cream:#f7f4ed;
  --cream-2:#f1ece1;
  --sand:#e6dcc6;
  --ink:#23291d;

  --ink-72:rgba(35,41,29,.72);
  --ink-52:rgba(35,41,29,.52);
  --ink-16:rgba(35,41,29,.16);
  --ink-09:rgba(35,41,29,.09);

  --light-76:rgba(247,244,237,.76);
  --light-52:rgba(247,244,237,.52);
  --light-20:rgba(247,244,237,.20);
  --light-11:rgba(247,244,237,.11);

  --f-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --f-sans:'Instrument Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --shell:1280px;
  --pad:clamp(20px,5vw,60px);
  --sec-y:clamp(84px,11vw,168px);

  /* weiche, organische Radien */
  --r-xs:8px;
  --r-sm:14px;
  --r:22px;
  --r-lg:34px;
  --r-arch:min(50%,240px);

  --sh-soft:0 2px 8px rgba(35,41,29,.04),0 12px 34px rgba(35,41,29,.07);
  --sh-lift:0 4px 14px rgba(35,41,29,.07),0 26px 60px rgba(35,41,29,.13);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  /* Z-Index-Skala */
  --z-grain:5;
  /* Der Kopf muss ÜBER dem Menü liegen: Sonst verdeckt das Menü den
     eigenen Knopf, und es gibt keinen Weg mehr heraus. */
  --z-head:80;
  --z-mobnav:70;
  --z-lb:90;
  --z-modal:100;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Klassen wie .lb{display:grid} würden sonst das hidden-Attribut aushebeln –
   das Overlay bliebe unsichtbar, finge aber alle Klicks ab. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(16.5px,1.03vw,18px);
  line-height:1.66;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0 0 1.15em}
::selection{background:var(--leaf);color:var(--forest-deep)}

h1,h2,h3,h4{
  margin:0;font-family:var(--f-serif);font-weight:400;
  letter-spacing:-.022em;line-height:1.04;
  /* verteilt die Zeilen gleichmäßig, statt das letzte Wort allein
     stehen zu lassen */
  text-wrap:balance;
}

/* Fließtext: verhindert, dass ein einzelnes Wort in die letzte Zeile
   rutscht. Browser ohne Unterstützung ignorieren die Angabe. */
p,li,address,dd,figcaption,small,label,.lead,.note,.card__meta{
  text-wrap:pretty;
}
/* kurze, freistehende Absätze wie Überschriften behandeln */
.sechead__note,.lead,.cc__t,.modal__intro,.hero__sub{
  text-wrap:balance;
}
em{font-style:italic}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--moss);color:#fff;padding:12px 18px;border-radius:var(--r-xs)}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px}

/* ---------- Papierkorn ---------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:var(--z-grain);opacity:.05;mix-blend-mode:multiply;
}
@media (max-width:760px){.grain{opacity:.03}}

/* =========================================================
   Typografie-Helfer
   ========================================================= */
.h1{font-size:clamp(2.9rem,7.6vw,6.4rem);line-height:.98;letter-spacing:-.03em}
.h2{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.026em}
.h3{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.14}
.lead{font-size:clamp(1.14rem,1.62vw,1.42rem);line-height:1.56;color:var(--ink-72)}
.ital{font-style:italic;font-weight:350}

/* Randnotiz – wie mit Bleistift an den Plan geschrieben */
.note{
  font-family:var(--f-serif);font-style:italic;font-size:1.02rem;
  color:var(--ink-52);line-height:1.5;
  padding-left:18px;border-left:1.5px solid var(--leaf);
}
.sec--dark .note{color:var(--light-52);border-left-color:var(--leaf)}

/* Kapitelmarke */
.kap{
  display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(18px,2.4vw,30px);
  font-family:var(--f-sans);font-size:.76rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--moss);
}
.kap b{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:1.28rem;letter-spacing:0;text-transform:none;color:var(--clay);
}
.kap::after{content:"";flex:1;height:1px;background:currentColor;opacity:.24;max-width:90px}
.sec--dark .kap{color:var(--leaf)}
.sec--dark .kap b{color:var(--leaf-bright)}

.sechead{max-width:min(100%,900px);margin-bottom:clamp(40px,5.4vw,76px)}
.sechead .h2{margin-bottom:.42em}
.sechead__note{max-width:56ch;color:var(--ink-72);font-size:1.06rem}
.sec--dark .sechead__note{color:var(--light-76)}
.sec--dark .h2,.sec--dark .h3{color:var(--cream)}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.02em 1.85em;border:1.5px solid var(--moss);border-radius:100px;
  background:var(--moss);color:#fff;
  font-family:var(--f-sans);font-size:.94rem;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease),transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--forest);
  transform:translateY(102%);transition:transform .45s var(--ease-out);
}
.btn:hover{border-color:var(--forest);box-shadow:var(--sh-soft)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(1px)}

.btn--clay{background:var(--clay);border-color:var(--clay)}
.btn--clay::before{background:var(--clay-deep)}
.btn--clay:hover{border-color:var(--clay-deep)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-16)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--cream);border-color:var(--ink)}

.btn--onDark{background:transparent;color:var(--cream);border-color:var(--light-20)}
.btn--onDark::before{background:var(--cream)}
.btn--onDark:hover{color:var(--forest-deep);border-color:var(--cream)}

.btn--light{background:var(--cream);color:var(--forest-deep);border-color:var(--cream)}
.btn--light::before{background:var(--leaf)}
.btn--light:hover{color:var(--forest-deep)}

.btn--sm{padding:.72em 1.3em;font-size:.87rem}
.btn__ar{transition:transform .4s var(--ease-out)}
.btn:hover .btn__ar{transform:translateX(4px)}

.linklike{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--leaf);
  transition:color .3s var(--ease);
}
.linklike:hover{color:var(--moss)}

/* =========================================================
   Kopfzeile
   ========================================================= */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-head);
  transition:transform .5s var(--ease),background .45s var(--ease),
             box-shadow .45s var(--ease),padding .45s var(--ease);
  padding:clamp(10px,1.5vw,20px) 0;
}
.hd.is-hidden{transform:translateY(-104%)}
.hd__bar{
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2.6vw,40px);
}
.hd__inner{
  display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);width:100%;
  padding:10px 10px 10px 20px;border-radius:100px;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),
             backdrop-filter .45s var(--ease),border-color .45s var(--ease);
  border:1px solid transparent;
}
.hd.is-stuck .hd__inner{
  background:rgba(247,244,237,.86);backdrop-filter:blur(16px) saturate(1.4);
  border-color:var(--ink-09);box-shadow:var(--sh-soft);
}

.hd__logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.hd__logo img{width:clamp(132px,13vw,168px);height:auto}
.hd__logo .lg-dark{display:none}
.hd.is-stuck .hd__logo .lg-dark{display:block}
.hd.is-stuck .hd__logo .lg-light{display:none}

.hd__nav{display:flex;gap:clamp(10px,1.5vw,26px);margin-left:auto;align-items:center}
.hd__nav a{
  position:relative;text-decoration:none;color:var(--cream);
  font-size:.92rem;padding:.5em .2em;display:inline-flex;align-items:baseline;gap:.42em;
  opacity:.84;transition:opacity .3s var(--ease),color .45s var(--ease);
}
.hd.is-stuck .hd__nav a{color:var(--ink)}
.hd__nav a i{
  font-family:var(--f-serif);font-style:italic;font-size:.82rem;opacity:.62;
}
.hd__nav a::after{
  content:"";position:absolute;left:.2em;right:.2em;bottom:.24em;height:1.5px;
  background:var(--leaf);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.hd__nav a:hover{opacity:1}
.hd__nav a:hover::after,.hd__nav a.is-cur::after{transform:scaleX(1);transform-origin:left}
.hd__nav a.is-cur{opacity:1}
.hd__cta{flex-shrink:0}

.burger{
  display:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(247,244,237,.14);border:1px solid var(--light-20);
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  margin-left:auto;transition:background .35s var(--ease),border-color .35s var(--ease);
}
.hd.is-stuck .burger{background:transparent;border-color:var(--ink-16)}
.burger span{
  display:block;height:1.8px;width:20px;background:var(--cream);border-radius:2px;
  transition:transform .42s var(--ease-out),opacity .3s;
}
.hd.is-stuck .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.9px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.9px) rotate(-45deg)}

.mobnav{
  position:fixed;inset:0;z-index:var(--z-mobnav);background:var(--forest-deep);
  display:flex;justify-content:center;
  /* Oben bleibt die Kopfleiste frei, sonst liegt der erste Punkt hinter
     dem Logo. Passt die Liste nicht in die Höhe – etwa auf kleinen Geräten
     oder im Querformat –, lässt sie sich scrollen. */
  padding:clamp(88px,13vh,116px) 0 40px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .42s var(--ease);
}
.mobnav.is-open{opacity:1}
/* margin statt align-items: zentriert bei genug Platz, schneidet aber bei
   zu wenig Platz nichts oben ab – anders als align-items:center */
.mobnav nav{
  display:flex;flex-direction:column;gap:.05em;padding:0 var(--pad);
  width:100%;max-width:520px;margin:auto 0;
}
.mobnav a{
  text-decoration:none;color:var(--cream);font-family:var(--f-serif);
  font-size:clamp(1.9rem,8vw,2.7rem);padding:.28em 0;
  display:flex;align-items:baseline;gap:.6em;
  border-bottom:1px solid var(--light-11);
}
.mobnav a i{font-style:italic;font-size:.44em;color:var(--leaf);opacity:.9}
.mobnav__cta{border-bottom:0 !important;margin-top:1.2em;color:var(--leaf-bright) !important}

@media (max-width:1060px){
  .hd__nav,.hd__cta{display:none}
  .burger{display:flex}
  .hd__inner{padding-right:6px}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--forest-deep);
  padding-top:clamp(110px,15vh,170px);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 54%;
  transform:scale(1.1);animation:kb 26s var(--ease-out) forwards;
}
@keyframes kb{to{transform:scale(1)}}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(27,36,21,.76) 0%,rgba(27,36,21,.18) 30%,
                    rgba(27,36,21,.42) 58%,rgba(27,36,21,.93) 100%),
    linear-gradient(100deg,rgba(27,36,21,.80) 0%,rgba(27,36,21,.34) 45%,rgba(27,36,21,.04) 72%);
}
.hero__inner{position:relative;z-index:2;color:var(--cream);padding-bottom:clamp(38px,6vw,74px)}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.5em 1.05em .55em;border:1px solid var(--light-20);border-radius:100px;
  background:rgba(247,244,237,.08);backdrop-filter:blur(8px);
  font-size:.83rem;letter-spacing:.02em;color:var(--cream);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--leaf-bright);flex-shrink:0}

.hero__h1{
  font-size:clamp(2.9rem,7.9vw,7rem);line-height:.99;letter-spacing:-.032em;
  margin:0 0 clamp(20px,2.6vw,32px);max-width:17ch;font-weight:350;
}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero__h1 .line>span{
  display:block;transform:translateY(106%);
  animation:lineUp 1.25s var(--ease-out) forwards;
}
.hero__h1 .line:nth-child(1)>span{animation-delay:.2s}
.hero__h1 .line:nth-child(2)>span{animation-delay:.33s}
.hero__h1 .line:nth-child(3)>span{animation-delay:.46s}
@keyframes lineUp{to{transform:translateY(0)}}
.hero__h1 em{color:var(--leaf-bright);font-weight:300}

.hero__sub{max-width:48ch;font-size:clamp(1.04rem,1.35vw,1.22rem);color:var(--light-76);line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}

.hero__foot{position:relative;z-index:2;border-top:1px solid var(--light-20)}
.hero__foot-in{display:flex;align-items:center;gap:26px;padding-block:clamp(16px,2.1vw,26px)}
.hero__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.6vw,38px);margin:0;flex:1}
.hero__facts dt{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leaf-bright);margin-bottom:.5em;font-weight:500;
}
.hero__facts dd{margin:0;font-size:.94rem;color:var(--cream);line-height:1.35}
.scrollcue{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--light-76);flex-shrink:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.scrollcue__c{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--light-20);
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.scrollcue__c svg{animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-9px);opacity:0}40%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@media (max-width:920px){
  .hero__facts{grid-template-columns:repeat(2,1fr);gap:16px 22px}
  .scrollcue{display:none}
}

/* =========================================================
   Laufband – nahtlose Endlosschleife
   ========================================================= */
.ticker{
  background:var(--forest-deep);color:var(--cream);
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;padding:clamp(13px,1.6vw,19px) 0;
}
.ticker__track{display:flex;width:max-content;will-change:transform}
/* Jede Gruppe ist exakt gleich breit; die Animation verschiebt um genau
   eine Gruppenbreite – dadurch entsteht kein Sprung und keine Lücke. */
.ticker__group{
  display:flex;align-items:center;flex-shrink:0;
  animation:tick 40s linear infinite;
}
.ticker__group span{
  display:inline-flex;align-items:center;gap:1.6rem;
  padding-right:1.6rem;white-space:nowrap;
  font-family:var(--f-serif);font-size:clamp(1rem,1.55vw,1.32rem);
  letter-spacing:-.01em;color:var(--light-76);
}
.ticker__group span::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);
  flex-shrink:0;opacity:.85;
}
@keyframes tick{to{transform:translateX(-100%)}}
.ticker:hover .ticker__group{animation-play-state:paused}

/* =========================================================
   Abschnitte
   ========================================================= */
.sec{padding-block:var(--sec-y);position:relative}
.sec--dark{background:var(--forest-deep);color:var(--cream)}
.sec--sand{background:var(--cream-2)}

/* Kapitel-Anzeige am linken Rand */
.chapters{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.chapters.is-on{opacity:1;pointer-events:auto}
.chapters a{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink-52);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
}
.chapters a .bar{
  width:16px;height:2px;border-radius:2px;background:currentColor;opacity:.4;
  transition:width .45s var(--ease-out),opacity .35s,background .35s;
}
.chapters a .txt{
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out);
  white-space:nowrap;
}
.chapters a:hover .txt{opacity:1;transform:none}
.chapters a.is-cur .bar{width:30px;opacity:1;background:var(--clay)}
.chapters a.is-cur{color:var(--clay)}
.chapters.on-dark a{color:var(--light-52)}
.chapters.on-dark a.is-cur{color:var(--leaf-bright)}
.chapters.on-dark a.is-cur .bar{background:var(--leaf-bright)}
@media (max-width:1320px){.chapters{display:none}}

/* ---------------- Kapitel I – Betrieb ---------------- */
.story{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,86px);align-items:start}
.story__text p{max-width:56ch}
.story__text p:first-of-type{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55}
.story__sign{
  display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--ink-16);
}
.story__sign strong{font-family:var(--f-serif);font-weight:500;font-size:1.06rem;display:block}
.story__sign span{font-size:.88rem;color:var(--ink-52)}

/* Bild im Torbogen – Anklang an den Kreis der Bildmarke */
.arch{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--r-arch) var(--r-arch) var(--r) var(--r);
  box-shadow:var(--sh-lift);
}
.arch img{width:100%;aspect-ratio:4/5;object-fit:cover}
.arch--wide img{aspect-ratio:16/10}
.arch figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 24px 20px;
  background:linear-gradient(180deg,transparent,rgba(27,36,21,.86));
  color:var(--cream);font-size:.86rem;line-height:1.45;
}
.story__figwrap{position:relative}
.story__stamp{
  position:absolute;right:-14px;top:-14px;z-index:2;
  width:clamp(96px,11vw,128px);height:clamp(96px,11vw,128px);border-radius:50%;
  background:var(--clay);color:var(--cream);
  display:grid;place-items:center;text-align:center;
  font-family:var(--f-serif);font-style:italic;font-size:.94rem;line-height:1.24;
  padding:14px;box-shadow:var(--sh-soft);transform:rotate(-7deg);
}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(48px,6.5vw,96px);
}
.fact{
  background:var(--cream-2);border:1px solid var(--ink-09);
  border-radius:var(--r);padding:clamp(22px,2.6vw,32px);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.fact:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.fact dt{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--moss);margin-bottom:.8em;font-weight:500}
.fact dd{
  margin:0;font-family:var(--f-serif);font-size:clamp(2.3rem,4vw,3.4rem);
  line-height:1;letter-spacing:-.03em;color:var(--forest);
}
.fact dd i{font-style:italic;color:var(--clay);font-size:.72em}
@media (max-width:960px){
  .story{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
}

/* ---------------- Kapitel II – Leistungen ---------------- */
.lst{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.lst__row{border-top:1px solid var(--light-20)}
.lst__row:last-child{border-bottom:1px solid var(--light-20)}
.lst__head{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(14px,2.4vw,34px);
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(20px,2.7vw,32px) 0;
  transition:padding-left .55s var(--ease-out);
}
.lst__row:hover .lst__head,.lst__row.is-open .lst__head{padding-left:clamp(10px,1.5vw,24px)}
.lst__no{
  font-family:var(--f-serif);font-style:italic;font-size:1.05rem;
  color:var(--leaf);opacity:.8;
}
.lst__name{
  font-family:var(--f-serif);font-weight:350;letter-spacing:-.025em;
  font-size:clamp(1.62rem,4.1vw,3.1rem);line-height:1.04;color:var(--cream);
  transition:color .4s var(--ease);
}
.lst__row:hover .lst__name,.lst__row.is-open .lst__name{color:var(--leaf-bright)}
/* Hinweistext und Vorschaubild liegen übereinander im selben Feld –
   dadurch wechselt beim Überfahren nur der Inhalt, nichts springt. */
.lst__side{display:grid;justify-items:end;align-items:center}
.lst__side>*{grid-area:1/1}
.lst__hint{
  font-size:.88rem;color:var(--light-52);text-align:right;
  transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.lst__thumb{
  width:clamp(104px,10vw,152px);aspect-ratio:3/2;overflow:hidden;
  border-radius:var(--r);pointer-events:none;
  opacity:0;transform:scale(.82) rotate(-3deg);
  clip-path:inset(0 100% 0 0);
  transition:opacity .4s var(--ease),transform .6s var(--ease-out),clip-path .6s var(--ease-out);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}
.lst__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lst__row:hover .lst__hint{opacity:0;transform:translateX(10px)}
.lst__row:hover .lst__thumb{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* geöffnet zeigt ohnehin das große Bild im Feld darunter */
.lst__row.is-open .lst__thumb{opacity:0;clip-path:inset(0 100% 0 0)}
.lst__row.is-open .lst__hint{opacity:1;transform:none}
@media (max-width:820px){.lst__thumb{display:none}}
.lst__ico{
  position:relative;width:42px;height:42px;border:1px solid var(--light-20);border-radius:50%;
  flex-shrink:0;
  transition:border-color .4s var(--ease),transform .55s var(--ease-out),background .4s var(--ease);
}
.lst__ico::before,.lst__ico::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--cream);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .5s var(--ease-out),background .4s;
}
.lst__ico::before{width:14px;height:1.7px}
.lst__ico::after{width:1.7px;height:14px}
.lst__row:hover .lst__ico{border-color:var(--leaf)}
.lst__row.is-open .lst__ico{background:var(--leaf);border-color:var(--leaf);transform:rotate(135deg)}
.lst__row.is-open .lst__ico::before,.lst__row.is-open .lst__ico::after{background:var(--forest-deep)}
.lst__row.is-open .lst__ico::after{transform:translate(-50%,-50%) scaleY(0)}

.lst__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.lst__row.is-open .lst__panel{grid-template-rows:1fr}
.lst__panel-in{overflow:hidden;opacity:0;transition:opacity .45s var(--ease) .08s}
.lst__row.is-open .lst__panel-in{opacity:1}
.lst__grid{
  display:grid;grid-template-columns:1.05fr .95fr .8fr;gap:clamp(20px,3vw,50px);
  padding:0 0 clamp(28px,3.4vw,44px) clamp(10px,1.5vw,24px);
  align-items:start;
}
.lst__fig{margin:0;overflow:hidden;border-radius:var(--r-lg)}
.lst__fig img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.1s var(--ease-out);
}
.lst__row.is-open .lst__fig img{transform:none}
.lst__grid>p{color:var(--light-76);margin:0;font-size:1.04rem;line-height:1.6}
/* einspaltig: in zwei schmalen Spalten brachen die Einträge sonst
   ständig um und ließen ein einzelnes Wort in der zweiten Zeile */
.lst__grid ul{list-style:none;padding:0;margin:0}
.lst__grid li{
  break-inside:avoid;padding:.4em 0 .4em 1.5em;position:relative;
  font-size:.95rem;color:var(--cream);opacity:.85;
}
.lst__grid li::before{
  content:"";position:absolute;left:0;top:.92em;width:7px;height:7px;
  border-radius:50%;background:var(--leaf);
}
@media (max-width:1000px){
  .lst__grid{grid-template-columns:1fr 1fr}
  .lst__fig{grid-column:1/-1;max-width:520px}
}
@media (max-width:820px){
  .lst__head{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .lst__side{display:none}
  .lst__grid{grid-template-columns:1fr;padding-left:0}
  .lst__fig{max-width:none}
}

/* ---------------- Kapitel V – Projekte ---------------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px)}
.filter__b{
  background:transparent;border:1px solid var(--ink-16);border-radius:100px;cursor:pointer;
  padding:.62em 1.25em;font-size:.9rem;color:var(--ink-72);
  transition:all .32s var(--ease);
}
.filter__b:hover{border-color:var(--moss);color:var(--moss)}
.filter__b.is-on{background:var(--forest);border-color:var(--forest);color:var(--cream)}

/* dense füllt entstehende Löcher mit nachfolgenden kleinen Karten auf */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-flow:dense;gap:clamp(12px,1.5vw,20px);
}
/* Sobald gefiltert wird, sind alle Karten gleich groß – so kann in keiner
   Auswahl eine Lücke mitten im Raster stehen bleiben. */
.grid.is-filtered .card--wide{grid-column:span 1;aspect-ratio:4/3}
.card{
  position:relative;overflow:hidden;cursor:pointer;background:var(--forest-deep);
  border-radius:var(--r);aspect-ratio:4/3;border:0;padding:0;text-align:left;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
/* Die breite Karte bringt keine eigene Höhe mit, sondern wird auf die Höhe
   der Reihe gedehnt – sonst bleibt unter der schmaleren Nachbarkarte eine
   leere Fläche stehen. Dafür darf auch das Bild die Höhe nicht bestimmen. */
.card--wide{grid-column:span 2;aspect-ratio:auto;align-self:stretch;min-height:200px}
.card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.15s var(--ease-out);
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,36,21,0) 40%,rgba(27,36,21,.9) 100%);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.card:hover img{transform:scale(1.06)}
.card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,28px);color:var(--cream)}
.card__tag{
  display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-deep);background:var(--leaf-bright);
  padding:.3em .8em;border-radius:100px;margin:0 0 .8em;font-weight:500;
}
.card__body h3{font-size:clamp(1.1rem,1.7vw,1.42rem);margin-bottom:.3em;font-weight:400}
.card__meta{
  margin:0;font-size:.84rem;color:var(--light-52);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease-out),opacity .4s var(--ease);
}
.card:hover .card__meta,.card:focus-visible .card__meta{max-height:3.2em;opacity:1}
.card.is-hidden{display:none}
/* Unterhalb der Desktop-Breite sind alle Karten gleich groß. Die breite
   Karte stünde in einem zweispaltigen Raster allein in ihrer Reihe und
   wäre dadurch immer anders hoch als die übrigen – auf kleinen Bildschirmen
   wirkt ein gleichmäßiges Raster ruhiger. */
@media (max-width:920px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 1;aspect-ratio:4/3;min-height:0}
}
@media (max-width:580px){
  .grid{grid-template-columns:1fr}
  .card__meta{max-height:3.2em;opacity:1}
}

/* ---------------- Kapitel VI – Ablauf (gestapelte Karten) ---------------- */
/* Jede Karte bleibt beim Scrollen kurz oberhalb der Bildmitte stehen, die
   nächste schiebt sich darüber. So legen sich die fünf Schritte nach und
   nach zu einem Stapel zusammen. Reines CSS, kein Skript nötig. */
.steps{list-style:none;margin:0;padding:0}
.steps li{
  position:sticky;top:calc(50vh - clamp(150px,22vh,215px));
  background:var(--cream);border:1px solid var(--ink-09);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,52px);margin-bottom:clamp(16px,2vw,26px);
  box-shadow:var(--sh-soft);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,52px);align-items:start;
}
/* Jede folgende Karte hält ein Stück tiefer – dadurch bleibt vom Stapel
   darunter immer ein schmaler Rand sichtbar. */
.steps li:nth-child(1){top:calc(50vh - clamp(150px,22vh,215px) + 0px)}
.steps li:nth-child(2){top:calc(50vh - clamp(150px,22vh,215px) + 14px)}
.steps li:nth-child(3){top:calc(50vh - clamp(150px,22vh,215px) + 28px)}
.steps li:nth-child(4){top:calc(50vh - clamp(150px,22vh,215px) + 42px)}
.steps li:nth-child(5){top:calc(50vh - clamp(150px,22vh,215px) + 56px)}
.steps__n{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(2.6rem,5vw,4rem);
  line-height:.9;color:var(--clay);
}
.steps h3{font-size:clamp(1.5rem,2.7vw,2.2rem);margin-bottom:.4em}
.steps p{margin:0;color:var(--ink-72);max-width:52ch}
.steps__tag{
  display:inline-block;margin-top:1.2em;font-size:.8rem;
  padding:.4em .9em;border-radius:100px;background:var(--cream-2);
  border:1px solid var(--ink-09);color:var(--ink-52);
}
@media (max-width:700px){
  /* auf dem Telefon fehlt die Höhe für den Stapel – dort einfach untereinander */
  .steps li{grid-template-columns:1fr;gap:12px;position:static;top:auto !important}
}

/* =========================================================
   Formular
   ========================================================= */
.form{max-width:1020px;position:relative}
.form__rail{margin-bottom:clamp(28px,3.6vw,46px)}
.form__dots{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,32px);margin:0 0 18px;padding:0}
.form__dots li{
  display:flex;align-items:center;gap:.6em;font-size:.86rem;
  color:var(--light-52);transition:color .4s var(--ease);
}
.form__dots li span{
  width:30px;height:30px;border:1px solid var(--light-20);border-radius:50%;
  display:grid;place-items:center;font-size:.82rem;
  font-family:var(--f-serif);font-style:italic;
  transition:all .4s var(--ease);
}
.form__dots li.is-on{color:var(--leaf-bright)}
.form__dots li.is-on span{border-color:var(--leaf);background:var(--leaf);color:var(--forest-deep)}
.form__dots li.is-done span{border-color:var(--leaf);color:var(--leaf)}
.form__barwrap{height:2px;background:var(--light-11);border-radius:2px;overflow:hidden}
.form__bar{height:100%;width:25%;background:linear-gradient(90deg,var(--moss),var(--leaf));transition:width .6s var(--ease-out)}

.step{border:0;margin:0;padding:0;display:none}
.step.is-active{display:block;animation:fadeUp .55s var(--ease-out)}
.step__title{
  font-family:var(--f-serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.8vw,2.15rem);color:var(--cream);
  padding:0;margin-bottom:.4em;display:block;
}
.step__title i{
  display:block;font-style:italic;font-size:.44em;color:var(--leaf-bright);
  margin-bottom:1em;letter-spacing:0;
}
.step__sub{color:var(--light-52);font-size:.95rem;margin-bottom:2em;max-width:56ch}
.step__nav{display:flex;gap:12px;margin-top:clamp(26px,3.4vw,42px);flex-wrap:wrap}

.opts{display:grid;gap:12px}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;cursor:pointer;margin:0}
.opt__box{
  display:block;padding:clamp(17px,2vw,23px);
  border:1px solid var(--light-20);border-radius:var(--r-sm);
  background:rgba(247,244,237,.03);height:100%;pointer-events:none;
  transition:border-color .32s var(--ease),background .32s var(--ease),transform .32s var(--ease-out);
}
.opt__box strong{
  display:block;font-family:var(--f-serif);font-weight:500;font-size:1.1rem;
  color:var(--cream);margin-bottom:.35em;
}
.opt__box small{display:block;font-size:.83rem;color:var(--light-52);line-height:1.45}
.opt:hover .opt__box{border-color:var(--light-52);transform:translateY(-2px)}
.opt input:checked + .opt__box{border-color:var(--leaf);background:rgba(140,168,94,.15)}
.opt input:checked + .opt__box strong{color:var(--leaf-bright)}
.opt input:focus-visible + .opt__box{outline:2.5px solid var(--clay);outline-offset:2px}
@media (max-width:840px){.opts--3{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.opts--3{grid-template-columns:1fr}}

.cond{
  margin-top:22px;padding:clamp(18px,2.2vw,26px);
  border:1px dashed var(--light-20);border-radius:var(--r-sm);
  background:rgba(140,168,94,.06);
}
.hint{font-size:.86rem;color:var(--light-52);margin:14px 0 0}
.hint a{color:var(--leaf-bright)}

.f2,.f3{display:grid;gap:14px;margin-bottom:14px}
.f2{grid-template-columns:1fr 1fr}
.f3{grid-template-columns:repeat(3,1fr)}
@media (max-width:840px){.f3{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.f2,.f3{grid-template-columns:1fr}}

.fld{display:block;margin-bottom:14px}
.fld>span{
  display:block;font-size:.82rem;color:var(--light-52);margin-bottom:.6em;
}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.95em 1.05em;border:1px solid var(--light-20);
  border-radius:var(--r-xs);background:rgba(247,244,237,.05);color:var(--cream);
  font-family:var(--f-sans);font-size:1rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.fld textarea{resize:vertical;min-height:130px;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(247,244,237,.3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--leaf);background:rgba(247,244,237,.09);
}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--clay)}
.fld select{
  appearance:none;cursor:pointer;padding-right:2.7em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8c47a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;background-size:11px;
}
.fld select option{background:var(--forest-deep);color:var(--cream)}

.blk{
  border:1px solid var(--light-20);border-radius:var(--r-sm);
  padding:clamp(20px,2.4vw,30px);margin-bottom:16px;
  background:rgba(247,244,237,.03);animation:fadeUp .45s var(--ease-out);
}
.blk__h{
  font-family:var(--f-serif);font-size:1.16rem;color:var(--leaf-bright);
  margin-bottom:1.2em;padding-bottom:.7em;border-bottom:1px solid var(--light-11);
}
.empty{
  color:var(--light-52);font-size:.96rem;padding:clamp(24px,3vw,40px);
  border:1px dashed var(--light-20);border-radius:var(--r-sm);text-align:center;
}

.check{display:flex;gap:13px;align-items:flex-start;margin-top:22px;cursor:pointer}
.check input{
  appearance:none;width:22px;height:22px;flex-shrink:0;margin-top:2px;
  border:1px solid var(--light-52);border-radius:6px;cursor:pointer;
  transition:all .3s var(--ease);
}
.check input:checked{background:var(--leaf);border-color:var(--leaf)}
.check input:checked::after{
  content:"";display:block;width:6px;height:11px;margin:2px auto 0;
  border:solid var(--forest-deep);border-width:0 2.2px 2.2px 0;transform:rotate(45deg);
}
.check span{font-size:.88rem;color:var(--light-76);line-height:1.55}
.check .linklike{color:var(--leaf-bright);text-decoration-color:var(--leaf)}

.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form__status{margin-top:18px;font-size:.95rem;min-height:1.4em}
.form__status.is-ok{color:var(--leaf-bright)}
.form__status.is-err{color:#e5a184}

/* =========================================================
   Fußzeile
   ========================================================= */
.ft{background:var(--forest-deep);color:var(--cream);padding-top:clamp(56px,7vw,96px);border-top:1px solid rgba(255,255,255,.08)}
.ft__top{display:grid;grid-template-columns:.9fr 1.6fr;gap:clamp(34px,5vw,76px);padding-bottom:clamp(38px,5vw,68px)}
.ft__logo{width:clamp(180px,20vw,244px);height:auto}
.ft__claim{margin-top:22px;font-family:var(--f-serif);font-style:italic;font-size:1.12rem;color:var(--light-76);max-width:24ch;line-height:1.45}
.ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,42px)}
.ft__cols h3{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf);margin-bottom:1.5em;font-family:var(--f-sans);font-weight:500}
.ft__cols ul{list-style:none;margin:0;padding:0}
.ft__cols li{margin-bottom:.7em}
.ft__cols a{text-decoration:none;font-size:.94rem;color:var(--light-76);transition:color .3s var(--ease)}
.ft__cols a:hover{color:var(--leaf-bright)}
.ft address{font-style:normal;font-size:.94rem;color:var(--light-76);line-height:1.7;margin-bottom:1.2em}
.ft__mail{display:inline-block;font-size:.94rem;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--leaf);padding-bottom:2px;margin-bottom:1.4em}
.ft__mail:hover{color:var(--leaf-bright)}
.ft__ig{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;font-size:.92rem;
  color:var(--light-76);padding:.55em 1.05em;border:1px solid var(--light-20);
  border-radius:100px;transition:all .35s var(--ease);
}
.ft__ig:hover{color:var(--forest-deep);background:var(--leaf-bright);border-color:var(--leaf-bright)}
.ft__bot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);padding-block:24px;
}
.ft__bot p{margin:0;font-size:.84rem;color:var(--light-52)}
.ft__legal{display:flex;gap:22px}
.ft__legal .linklike{font-size:.84rem;color:var(--light-52)}
.ft__legal .linklike:hover{color:var(--leaf-bright)}
@media (max-width:920px){.ft__top{grid-template-columns:1fr}.ft__cols{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ft__cols{grid-template-columns:1fr}}

/* =========================================================
   Lightbox
   ========================================================= */
.lb{
  position:fixed;inset:0;z-index:var(--z-lb);background:rgba(27,36,21,.97);
  display:grid;place-items:center;padding:clamp(16px,4vw,58px);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb.is-open{opacity:1}
.lb__fig{margin:0;max-width:min(1180px,92vw);display:flex;flex-direction:column;gap:16px}
.lb__fig img{max-height:74vh;width:auto;max-width:100%;object-fit:contain;margin-inline:auto;border-radius:var(--r-sm)}
.lb__fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em;color:var(--cream)}
.lb__fig strong{font-family:var(--f-serif);font-size:1.16rem;font-weight:500}
.lb__fig span{font-size:.88rem;color:var(--light-52)}
.lb__count{margin-left:auto;font-family:var(--f-serif);font-style:italic}
.lb__x,.lb__nav{
  position:absolute;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(247,244,237,.08);border:1px solid var(--light-20);color:var(--cream);
  display:grid;place-items:center;transition:all .3s var(--ease);
}
.lb__x:hover,.lb__nav:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest-deep)}
.lb__x{top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--prev{left:clamp(10px,2vw,28px)}
.lb__nav--next{right:clamp(10px,2vw,28px)}
@media (max-width:640px){.lb__x,.lb__nav{width:44px;height:44px}}

/* =========================================================
   Modale Fenster
   ========================================================= */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);background:rgba(27,36,21,.72);
  backdrop-filter:blur(7px);overflow-y:auto;padding:clamp(16px,5vh,66px) clamp(12px,4vw,38px);
  opacity:0;transition:opacity .4s var(--ease);
}
.modal.is-open{opacity:1}
.modal__panel{
  position:relative;max-width:820px;margin-inline:auto;background:var(--cream);
  padding:clamp(30px,5vw,62px);border-radius:var(--r-lg);
  transform:translateY(20px);transition:transform .5s var(--ease-out);
}
.modal.is-open .modal__panel{transform:none}
.modal__x{
  position:absolute;top:18px;right:18px;width:44px;height:44px;
  background:none;border:1px solid var(--ink-16);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;transition:all .3s var(--ease);
}
.modal__x:hover{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.modal h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:.9em}
.modal h3{
  font-family:var(--f-sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);margin:2.2em 0 .8em;font-weight:500;
}
.modal p{font-size:.96rem;color:var(--ink-72);max-width:66ch}
.modal a{color:var(--moss);text-underline-offset:3px}

/* =========================================================
   Einblendungen beim Scrollen
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease-out)}
.js .reveal-img.is-in{clip-path:inset(0 0 0 0)}

.rl-line{display:block;overflow:hidden;padding-bottom:.03em}
.rl-line>span{display:block;transform:translateY(104%);transition:transform .95s var(--ease-out)}
.reveal-lines.is-in .rl-line>span{transform:none}
.reveal-lines.is-in .rl-line:nth-child(2)>span{transition-delay:.09s}
.reveal-lines.is-in .rl-line:nth-child(3)>span{transition-delay:.18s}
/* ohne JavaScript bleibt alles sichtbar – die Regeln oben greifen nur unter html.js */

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-img,.rl-line>span,.hero__h1 .line>span{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .hero__media img{transform:none}
  .steps li{position:static}
}

/* ---------- Druck ---------- */
@media print{
  .hd,.mobnav,.ticker,.lb,.modal,.scrollcue,.form__rail,.grain,.chapters{display:none !important}
  body{background:#fff;color:#000}
  .sec--dark{background:#fff;color:#000}
  .steps li{position:static;page-break-inside:avoid}
}

/* =========================================================
   Einwilligungsverwaltung
   ========================================================= */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-modal);
  padding:clamp(12px,2vw,26px);
  display:flex;justify-content:center;
  pointer-events:none;
}
.cc__panel{
  pointer-events:auto;
  width:100%;max-width:640px;
  background:var(--cream);
  border:1px solid var(--ink-16);border-radius:var(--r-lg);
  box-shadow:var(--sh-lift);
  padding:clamp(22px,3vw,34px);
  transform:translateY(18px);opacity:0;
  transition:transform .5s var(--ease-out),opacity .4s var(--ease);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.cc.is-open .cc__panel{transform:none;opacity:1}

.cc__h{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.6em}
.cc__t{font-size:.92rem;color:var(--ink-72);margin-bottom:1.4em}

.cc__cats{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5em}
.cc__cat{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:14px 16px;border:1px solid var(--ink-09);border-radius:var(--r-sm);
  background:var(--cream-2);cursor:pointer;
  transition:border-color .3s var(--ease);
}
.cc__cat:hover{border-color:var(--ink-16)}
.cc__cat input{position:absolute;opacity:0;width:0;height:0}
.cc__box{
  width:22px;height:22px;border-radius:6px;margin-top:2px;
  border:1.5px solid var(--ink-16);background:#fff;
  display:grid;place-items:center;flex-shrink:0;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.cc__box::after{
  content:"";width:6px;height:11px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .2s var(--ease),transform .25s var(--ease-out);
}
.cc__cat input:checked ~ .cc__box{background:var(--moss);border-color:var(--moss)}
.cc__cat input:checked ~ .cc__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.cc__cat input:disabled ~ .cc__box{background:var(--stone);border-color:var(--stone)}
.cc__cat input:focus-visible ~ .cc__box{outline:2.5px solid var(--clay);outline-offset:2px}
.cc__cat:has(input:disabled){cursor:default;opacity:.85}

.cc__txt strong{display:block;font-size:.95rem;margin-bottom:.25em}
.cc__txt small{display:block;font-size:.82rem;color:var(--ink-52);line-height:1.5}

.cc__actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.2em}
.cc__actions .btn{flex:1 1 auto;min-width:140px}

.cc__legal{font-size:.8rem;color:var(--ink-52);margin:0;text-align:center}
.cc__legal .linklike{font-size:inherit}

@media (max-width:520px){
  .cc__actions .btn{flex:1 1 100%}
}
@media print{.cc{display:none !important}}

/* =========================================================
   Kapitel III – Karriere
   ========================================================= */
.jobs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.2vw,28px);align-items:start;
}
.job{
  background:var(--cream);border:1px solid var(--ink-09);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--sh-soft);
  display:flex;flex-direction:column;height:100%;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease-out);
}
.job:hover{box-shadow:var(--sh-lift);transform:translateY(-3px)}
.job__tag{
  display:inline-block;align-self:flex-start;
  font-family:var(--f-sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--moss);
  padding:.4em .9em;border:1px solid var(--moss);border-radius:100px;
  margin:0 0 1.4em;
}
.job h3{font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:.35em}
.job__sub{
  font-family:var(--f-serif);font-style:italic;font-size:1.02rem;
  color:var(--clay);margin-bottom:1.3em;
}
.job p{color:var(--ink-72)}
.job__list{list-style:none;padding:0;margin:0 0 1.4em}
.job__list li{
  position:relative;padding:.42em 0 .42em 1.6em;
  font-size:.95rem;color:var(--ink);
}
.job__list li::before{
  content:"";position:absolute;left:0;top:.95em;
  width:8px;height:8px;border-radius:50%;background:var(--leaf);
}
.job__want{
  font-size:.92rem;padding:1em 1.2em;border-radius:var(--r-sm);
  background:var(--cream-2);border:1px solid var(--ink-09);
}
.job .btn{align-self:flex-start;margin-top:auto}
.jobs__note{
  margin:clamp(26px,3vw,40px) 0 0;text-align:center;
  font-size:.95rem;color:var(--ink-52);
}
.jobs__note a{color:var(--moss);text-underline-offset:4px}
@media (max-width:880px){.jobs{grid-template-columns:1fr}}

/* =========================================================
   Verbandszeichen
   ========================================================= */
.verband{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(30px,4vw,52px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--ink-09);
}
.verband img{width:clamp(150px,17vw,215px);height:auto;flex-shrink:0}
.verband p{
  margin:0;font-size:.9rem;color:var(--ink-52);line-height:1.55;max-width:44ch;
}
.verband strong{color:var(--ink);font-weight:500}
@media (max-width:600px){
  .verband{flex-direction:column;align-items:flex-start;gap:16px}
}
/* im dunklen Fußbereich */
.ft__verband{margin-top:clamp(22px,2.6vw,32px)}
.ft__verband img{width:clamp(140px,15vw,180px);height:auto;opacity:.9}

/* Kampagnenmotiv des Fachverbands im Karriere-Kapitel */
.karrierehead{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(24px,4vw,64px);align-items:start;
}
.karrierehead .sechead{margin-bottom:clamp(30px,4vw,54px)}
.zeichen{margin:0;max-width:300px;justify-self:end}
.zeichen img{width:100%;height:auto}
.zeichen figcaption{
  margin-top:14px;font-size:.82rem;line-height:1.5;color:var(--ink-52);
  padding-left:14px;border-left:2px solid var(--leaf);
}
@media (max-width:860px){
  .karrierehead{grid-template-columns:1fr}
  .zeichen{justify-self:start;max-width:240px}
}

/* der regionale Vorsatz im Hero – gleiche Größe, nur etwas kräftiger */
.hero__sub strong{font-weight:500;color:var(--cream)}

/* =========================================================
   Häufige Fragen
   ========================================================= */
.sec--faq{background:var(--cream-2)}
.faq{max-width:920px;border-top:1px solid var(--ink-09)}
.faq__item{border-bottom:1px solid var(--ink-09)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.4vw,28px) 0;cursor:pointer;list-style:none;
  transition:padding-left .45s var(--ease-out);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{
  font-size:clamp(1.12rem,1.9vw,1.5rem);font-weight:400;
  transition:color .35s var(--ease);
}
.faq__item:hover summary{padding-left:10px}
.faq__item:hover summary h3,.faq__item[open] summary h3{color:var(--moss)}
.faq__ico{
  position:relative;width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--ink-16);border-radius:50%;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease-out);
}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transform:translate(-50%,-50%);border-radius:2px;transition:transform .45s var(--ease-out),background .35s;
}
.faq__ico::before{width:13px;height:1.6px}
.faq__ico::after{width:1.6px;height:13px}
.faq__item[open] .faq__ico{background:var(--moss);border-color:var(--moss);transform:rotate(135deg)}
.faq__item[open] .faq__ico::before,.faq__item[open] .faq__ico::after{background:#fff}
.faq__item[open] .faq__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{padding:0 clamp(46px,6vw,80px) clamp(22px,2.6vw,32px) 0;max-width:70ch}
.faq__a p{color:var(--ink-72);margin-bottom:.9em}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--moss);text-underline-offset:4px}
.faq__a strong{color:var(--ink);font-weight:500}
@media (max-width:600px){
  .faq__a{padding-right:0}
  .faq__item summary{gap:14px}
}

/* =========================================================
   Mobilgeräte: ruhigeres Verhalten

   Weichzeichner (backdrop-filter), Mischmodi und Freistellungs-
   animationen (clip-path) sind auf dem Telefon die teuersten
   Effekte überhaupt – sie lassen das Scrollen haken. Auf kleinen
   Bildschirmen ersetzen wir sie durch billigere Varianten, die
   fast gleich aussehen.
   ========================================================= */
@media (max-width:860px){

  /* Einblendungen: kürzerer Weg, kürzere Dauer – wirkt ruhiger */
  .js .reveal{
    transform:translateY(14px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  }
  /* clip-path durch eine einfache Deckkraft ersetzen */
  .js .reveal-img{clip-path:none;opacity:0;transition:opacity .55s var(--ease-out)}
  .js .reveal-img.is-in{opacity:1}

  /* gestaffelte Verzögerungen weglassen: auf kurzen Bildschirmen
     kommen die Elemente ohnehin fast gleichzeitig ins Bild */
  .reveal-lines.is-in .rl-line:nth-child(2)>span,
  .reveal-lines.is-in .rl-line:nth-child(3)>span{transition-delay:0s}
  .rl-line>span{transition-duration:.6s}

  /* Weichzeichner kosten am meisten – durch deckende Flächen ersetzen */
  .hd.is-stuck{backdrop-filter:none;background:rgba(247,244,237,.97)}
  .modal{backdrop-filter:none;background:rgba(27,36,21,.86)}
  .hero__foot{backdrop-filter:none}

  /* Papierkorn: der Mischmodus zwingt zu ständigem Neuzeichnen */
  .grain{display:none}

  /* langsames Heranfahren im Hero bringt auf dem Telefon wenig,
     kostet aber durchgehend Rechenzeit */
  .hero__media img{animation:none;transform:none}
}

/* Tippziele: Finger brauchen mehr Fläche als ein Mauszeiger.
   Empfehlung von Apple und Google sind rund 44 Pixel. */
@media (hover:none){
  .ft__cols a,.ft__legal .linklike,.mobnav a{
    display:inline-block;padding-block:.45em;
  }
  .filter__b{padding:.85em 1.25em}
  .faq__item summary{padding-block:clamp(18px,4vw,24px)}
}

/* =========================================================
   Offenes Menü: der Knopf wird zum Schließkreuz

   Solange das Menü offen ist, bleibt der Kopf durchsichtig und
   liegt über dem Menü – nur so ist der Knopf erreichbar, der sich
   dabei zum Kreuz dreht.
   ========================================================= */
.menu-offen .hd,
.menu-offen .hd.is-stuck{
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  transform:none;
}
/* helles Logo, weil das Menü dunkel ist */
.menu-offen .hd__logo .lg-dark{display:none}
.menu-offen .hd__logo .lg-light{display:block}
/* Striche hell, damit das Kreuz auf dunklem Grund sichtbar ist */
.menu-offen .burger span{background:var(--cream)}
.menu-offen .burger{background:rgba(247,244,237,.14);border-color:var(--light-20)}
/* der Kopf darf sich bei offenem Menü nicht wegschieben */
.menu-offen .hd.is-hidden{transform:none}

/* zusätzlicher Hinweis unter den Menüpunkten */
.mobnav__zu{
  margin-top:1.6em;align-self:center;
  font-family:var(--f-sans);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--light-52);
  background:none;border:0;cursor:pointer;padding:.9em 1.4em;
  display:inline-flex;align-items:center;gap:.7em;
}
.mobnav__zu::before{
  content:"";width:16px;height:16px;flex-shrink:0;
  background:currentColor;
  clip-path:polygon(9% 0,50% 41%,91% 0,100% 9%,59% 50%,100% 91%,91% 100%,50% 59%,9% 100%,0 91%,41% 50%,0 9%);
}
.mobnav__zu:hover{color:var(--leaf-bright)}

/* Die Leistungsnamen sind Überschriften (h3), damit Suchmaschinen sie als
   solche werten. Optisch soll sich dadurch nichts ändern. */
.lst__h{margin:0;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit}
.lst__h>.lst__head{width:100%}

/* =========================================================
   Formularfelder: Überlauf auf schmalen Bildschirmen

   Felder in einem Raster schrumpfen von sich aus nicht unter die
   Eigenbreite ihres Inhalts (min-width hat den Vorgabewert auto).
   Safari gibt Datumsfeldern eine feste Eigenbreite – dadurch sprengte
   das Feld "Abgabefrist" auf dem iPhone die Spalte, während Chrome
   dieselbe Stelle unauffällig darstellt.
   ========================================================= */
.fld{min-width:0}
.f2>*,.f3>*,.opts>*,.blk .f2>*,.blk .f3>*{min-width:0}
/* min-width sticht in CSS sowohl width als auch max-width aus. Der Schutz
   muss deshalb auch auf dem Feld selbst stehen, nicht nur am Rasterfeld. */
.fld input,.fld select,.fld textarea{max-width:100%;min-width:0}

/* Datums- und Zeitfelder in Safari auf die Containerbreite zwingen und
   einheitlich hoch machen – sonst sitzt der Text dort anders als in den
   übrigen Feldern. */
.fld input[type="date"],
.fld input[type="time"],
.fld input[type="month"]{
  -webkit-appearance:none;appearance:none;
  min-width:0;width:100%;
  min-height:3.1em;line-height:1.2;
}
/* iOS zentriert den Wert sonst nicht senkrecht */
.fld input[type="date"]::-webkit-date-and-time-value{text-align:left}

/* Auf flachen Bildschirmen (kleine Geräte, Querformat) das Menü kompakter,
   damit möglichst alles ohne Scrollen sichtbar bleibt. */
@media (max-height:700px){
  .mobnav{padding-top:clamp(92px,11vh,104px)}
  .mobnav a{font-size:clamp(1.4rem,5.5vw,1.9rem);padding:.2em 0}
  .mobnav__zu{margin-top:1em;padding:.7em 1.2em}
}
@media (max-height:520px){
  .mobnav a{font-size:1.25rem;padding:.14em 0}
}