/* ==========================================================================
   Entenmann Haustechnik GmbH & Co. KG — Weilheim i.OB

   CI DIREKT AUS DEM LOGO ABGELEITET (ENTENMANN_4c):
   · Grüne Sichel  #78B74A  → Grün ist Hauptträger: große Flächen, Sichel-Deko
   · Orange Flamme #F29400  → Energie-Akzent: Marker, Nummern, Notdienst
   · Anthrazit     #575759  → Sekundärtext (wie die Wortmarke)
   · Runde Formen: Pill-Buttons (999px), Bilder mit „Flammen-Ecke"
     (drei Ecken rund, eine offen — echot Sichel + Flamme)
   · Schrift: Hanken Grotesk in allen Schnitten — runde humanistische
     Grotesk, passend zu den kleingeschriebenen Logo-Lettern. KEINE Serife.
   · Grund ist WEISS wie im Logo, nicht Beige.

   KONTRAST-REGELN (berechnet, nicht geraten):
   · Auf Logo-Grün #78B74A steht IMMER dunkle Schrift (6,08:1) — nie Weiß (2,4:1)
   · Auf Orange ebenso dunkle Schrift (6,32:1)
   · Orange als TEXT nur für große Ziffern (#C25F00, 4,26:1 = nur ab 24px)
   · Dunkle Sektionen sind TIEFGRÜN #1E2A14, nicht Schwarz — auch das ist CI

   LAYOUT-REGELN (Symmetrie — nicht "korrigieren"):
   · Zweispalter IMMER 1fr/1fr, Bilder füllen die volle Zeilenhöhe
   · Raster haben feste Spaltenzahlen, Elementanzahl füllt Reihen restlos

   ANIMATION: Grundzustand fertig + lesbar; alles Weitere additiv in
   @supports + prefers-reduced-motion. Firefox (ohne scroll-driven
   animations) bekommt die statische, vollständige Seite.
   ========================================================================== */

:root{
  --weiss:#FFFFFF;
  --hell:#F4F7F0;              /* hellgrün angehauchte Fläche */
  --hell-tief:#E9EFE1;
  --tinte:#212B1A;             /* dunkelgrünes Fast-Schwarz */
  --grau:#575759;              /* Logo-Anthrazit */
  --linie:#DDE3D5;

  --gruen:#78B74A;             /* Logo-Grün — Flächen, Sichel, aktive Zustände */
  --gruen-text:#3E6B1F;        /* als Textfarbe auf Weiß (6,31:1) */
  --gruen-hover:#8CC960;
  --tiefgruen:#1E2A14;         /* dunkle Sektionen */
  --orange:#F29400;            /* Logo-Orange — Marker, Notdienst */
  --orange-text:#AC5600;       /* Orange als Text - AA-fest auf Weiss UND Hellgruen */

  --wrap:1240px;
  --flaeche:28px;   /* DIE Rundung - fuer ALLES: Fotos, Karten, Baender.
                       Ein System, symmetrisch, aus den Logo-Boegen. (Noahs Entscheidung 09.08.) */
  --rund:999px;     /* Pills: Buttons, Chips - wie die Logo-Boegen */
  --feld:14px;      /* Eingabefelder */
  --inset:clamp(12px,1.5vw,24px);  /* Aussenabstand der Farbbaender */
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;font-family:var(--sans);color:var(--tinte);
  font-size:17px;line-height:1.65;background:var(--weiss);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.04;margin:0 0 .45em;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(2.4rem,4.8vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.12;letter-spacing:-.02em}
p{margin:0 0 1.15em}
:target,[id]{scroll-margin-top:7rem}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:28px}
.wrap--schmal{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kapitelzeile: kleingeschrieben wie die Wortmarke, Flammen-Marker ---------- */
.kapitel{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.92rem;font-weight:700;color:var(--gruen-text);
  text-transform:lowercase;letter-spacing:.01em;margin:0 0 1.1rem;
}
.kapitel::before{
  content:'';width:.72em;height:.72em;background:var(--orange);
  border-radius:50%;flex-shrink:0;
}
.kapitel b{font-weight:700;color:var(--tinte)}

.lead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.6;color:var(--grau);max-width:56ch}

/* ==========================================================================
   ANIMATION
   ========================================================================== */
.rv{opacity:1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv-auf 1ms linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
  }
}
@keyframes rv-auf{from{opacity:.45;transform:translateY(22px)}to{opacity:1;transform:none}}

.wort-in > span{display:inline-block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wort-in{view-timeline-name:--wi}
    .wort-in > span{
      animation:wort 1ms linear both;animation-timeline:--wi;
      animation-range:entry calc(10% + var(--i,0) * 3%) entry calc(58% + var(--i,0) * 3%);
    }
  }
}
@keyframes wort{from{opacity:.45;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* clip-rv war eine scroll-gekoppelte Bild-Maske. ENTFERNT: sie ließ Bilder
   als leere Kästen zurück, wenn die Timeline nicht griff. Bilder sind statisch. */
.clip-rv{overflow:clip}

@property --n{syntax:"<integer>";initial-value:0;inherits:false}
.zaehl{counter-reset:n var(--n)}
.zaehl::after{content:counter(n)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .zaehl{animation:zaehl 1ms linear both;animation-timeline:view();animation-range:entry 16% cover 48%}
  }
}
@keyframes zaehl{to{--n:var(--ziel)}}

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ==========================================================================
   Buttons — Pills, rund wie das Logo
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.8em;font-family:var(--sans);font-weight:700;font-size:.97rem;
  text-decoration:none;border:2px solid var(--tinte);background:none;color:var(--tinte);
  cursor:pointer;line-height:1.2;border-radius:var(--rund);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn::after{content:'→';transition:translate .25s var(--ease)}
.btn:hover::after{translate:.28em 0}
.btn:hover{transform:translateY(-2px)}
.btn--voll{background:var(--tinte);border-color:var(--tinte);color:var(--weiss)}
.btn--voll:hover{background:var(--tiefgruen);border-color:var(--tiefgruen)}
.btn--gruen{background:var(--gruen);border-color:var(--gruen);color:var(--tinte)}
.btn--gruen:hover{background:var(--gruen-hover);border-color:var(--gruen-hover)}
.btn--orange{background:var(--orange);border-color:var(--orange);color:var(--tinte)}
.btn--orange:hover{background:#FFA724;border-color:#FFA724}
.btn--hell{border-color:rgba(255,255,255,.6);color:var(--weiss)}
.btn--hell:hover{background:var(--weiss);border-color:var(--weiss);color:var(--tinte)}
.btn--blank::after{content:none}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-gruppe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* ==========================================================================
   Kopf
   ========================================================================== */
.topbar{background:var(--tiefgruen);color:rgba(255,255,255,.85);font-size:.83rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem;flex-wrap:wrap}
.topbar__links{display:flex;gap:1.8rem;flex-wrap:wrap}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__notdienst{color:var(--orange);font-weight:700}

.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);transition:box-shadow .3s}
.header.geklebt{box-shadow:0 10px 30px rgba(33,43,26,.08)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:.9rem}
.logo{display:block;flex-shrink:0}
.logo img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:.4rem}
.nav a:not(.btn){
  text-decoration:none;font-size:.95rem;font-weight:600;color:var(--tinte);
  white-space:nowrap;padding:.5em 1em;border-radius:var(--rund);
  transition:background .2s,color .2s;
}
.nav a:not(.btn):hover{background:var(--hell)}
.nav a:not(.btn)[aria-current="page"]{background:var(--gruen);color:var(--tinte)}
.nav .btn{padding:.65em 1.35em;font-size:.92rem;margin-left:.5rem}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--tinte);transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.bildband{position:relative;overflow:clip;background:var(--tiefgruen)}
.bildband__bild{position:relative;aspect-ratio:21/9;opacity:0;transition:opacity 1.4s ease}
.bildband__bild:first-child{opacity:1}
.bildband__bild:not(:first-child){position:absolute;inset:0}
.bildband__bild.an{opacity:1}
.bildband__bild img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
@media (prefers-reduced-motion:no-preference){
  .bildband__bild.an img{animation:langsam-zoom 13s ease-out forwards}
}
@keyframes langsam-zoom{from{transform:scale(1.01)}to{transform:scale(1.1)}}
.bildband__unterschrift{
  position:absolute;left:28px;bottom:24px;z-index:2;
  background:var(--weiss);color:var(--tinte);padding:.6rem 1.3rem;font-size:.82rem;font-weight:600;
  border-radius:var(--rund);max-width:min(85%,520px);
}
.bildband__punkte{position:absolute;right:28px;bottom:28px;z-index:2;display:flex;gap:.45rem;margin:0;padding:0;list-style:none}
.bildband__punkte button{width:12px;height:12px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.45);border-radius:50%;transition:background .3s,transform .3s}
.bildband__punkte button[aria-current="true"]{background:var(--orange);transform:scale(1.25)}
.bildband__punkte button:focus-visible{outline:2px solid #fff;outline-offset:3px}



/* ==========================================================================
   Buehne - der Hero. Vollflaechiges Bild, Text unten links (Referenz-DNA),
   eingerueckt mit der Flammen-Ecke wie alle Farbflaechen.
   ========================================================================== */
.buehne{padding:var(--inset) var(--inset) 0}
.buehne__band{
  position:relative;overflow:clip;border-radius:var(--flaeche);
  height:min(80vh,720px);background:var(--tiefgruen);
}
.buehne__band .bildband__bild{position:absolute;inset:0;aspect-ratio:auto}
.buehne__band::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(16,24,9,.88) 0%,rgba(16,24,9,.45) 44%,rgba(16,24,9,.10) 100%);
}
.buehne__text{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:clamp(1.6rem,4vw,3.4rem);max-width:54rem;color:#fff;
}
.buehne__kicker{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;font-size:.92rem;color:#C9E8B0;
  text-transform:lowercase;margin-bottom:1rem;
}
.buehne__kicker::before{
  content:'';width:.7em;height:.7em;background:var(--orange);
  border-radius:50%;flex-shrink:0;
}
.buehne__text h1{color:#fff;font-size:clamp(2.3rem,4.4vw,3.8rem);margin-bottom:.3em}
.buehne__text .lead{color:rgba(255,255,255,.88);max-width:50ch}
.buehne__text .btn-gruppe{margin-top:1.6rem}
.buehne--klein .buehne__band{height:min(58vh,520px)}
.buehne .bildband__punkte{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:2}

/* Leistungs-Leiste direkt unter der Buehne - vier GLEICHE Kacheln */
.leisten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 0;padding:0;list-style:none}
.leisten a{display:flex;flex-direction:column;gap:.3rem;background:var(--hell);
  border-radius:var(--flaeche);padding:1.4rem 1.5rem 1.3rem;text-decoration:none;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.leisten a:hover{background:var(--gruen);transform:translateY(-3px)}
.leisten b{font-weight:800;font-size:.85rem;color:var(--orange-text);font-variant-numeric:tabular-nums}
.leisten a:hover b{color:var(--tiefgruen)}
.leisten span{font-weight:700;font-size:1.04rem;letter-spacing:-.01em;color:var(--tinte)}
.leisten i{font-style:normal;font-size:.85rem;font-weight:600;color:var(--gruen-text);margin-top:.25rem}
.leisten a:hover i{color:var(--tinte)}

/* ==========================================================================
   Kennzahlen — GROSSE Fläche im echten Logo-Grün, dunkle Schrift
   ========================================================================== */
.zahlen{margin-top:clamp(3rem,6vw,5rem)}
.zahlen__reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zahlen__feld{background:var(--hell);border-radius:var(--flaeche);padding:1.8rem 1.7rem 1.6rem}
.zahlen__feld:last-child{background:var(--gruen)}
.zahlen__feld:last-child .zahlen__text{color:rgba(33,43,26,.8)}
.zahlen__wert{
  font-weight:800;font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:.95;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:.5rem;
}
.zahlen__text{font-size:.9rem;font-weight:600;color:rgba(33,43,26,.78);line-height:1.45;max-width:24ch}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.abschnitt{padding-block:clamp(4rem,7.5vw,6.5rem)}
.abschnitt--beton{background:var(--hell)}
.abschnitt--gruen{background:var(--gruen);color:var(--tinte);overflow:clip}
.abschnitt--gruen .kapitel{color:var(--tinte)}
.abschnitt--gruen .kapitel::before{background:var(--tiefgruen)}
.abschnitt--gruen .lead{color:rgba(33,43,26,.78)}
.abschnitt--tinte{background:var(--tiefgruen);color:var(--weiss);overflow:clip}
.abschnitt--tinte .lead{color:rgba(255,255,255,.72)}
.abschnitt--tinte .kapitel{color:#8FCB66}
.abschnitt--tinte .kapitel b{color:var(--weiss)}
.abschnitt__kopf{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* ==========================================================================
   Einträge — nummerierte Kapitel, Bild mit Flammen-Ecke
   ========================================================================== */
.eintraege{display:flex;flex-direction:column;gap:clamp(3.5rem,7vw,6rem)}
.eintrag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.eintrag > *{min-width:0}
.eintrag:nth-child(even) .eintrag__bild{order:-1}
.eintrag__bild{position:relative;overflow:clip;background:var(--hell);border-radius:var(--flaeche)}
.eintrag__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.eintrag:hover .eintrag__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.eintrag__nr{
  font-weight:800;font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1;
  color:var(--orange-text);display:block;margin-bottom:.4rem;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.eintrag h3{margin-bottom:.5rem}
.eintrag p{color:var(--grau);max-width:46ch}
.eintrag__link{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.6rem;
  font-weight:700;font-size:.95rem;text-decoration:none;color:var(--gruen-text);
  transition:gap .25s var(--ease);
}
.eintrag__link::after{content:'→'}
.eintrag:hover .eintrag__link{gap:.85em}

/* ==========================================================================
   Porträt
   ========================================================================== */
.portraet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.portraet > *{min-width:0}
.portraet__bild{overflow:clip;background:var(--hell);border-radius:var(--flaeche)}
.portraet__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Personenportraets: Hochformat-Rahmen - ein Gesicht gehoert nicht in 4:3 quer */
.portraet__bild--hoch img{aspect-ratio:4/5;object-position:50% 18%}
.zitat{
  font-weight:800;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.22;
  margin:0 0 1.6rem;letter-spacing:-.025em;
}
.zitat--klein{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.zitat cite{display:block;margin-top:1.1rem;font-size:.87rem;font-style:normal;color:var(--grau);font-weight:600;letter-spacing:0}

/* ==========================================================================
   Ablauf — gepinnt, dunkelgrüne Sektion
   ========================================================================== */
.ablauf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ablauf__pin{position:sticky;top:7rem}
.ablauf__medien{position:relative;aspect-ratio:4/5;background:#000;overflow:clip;border-radius:var(--flaeche);}
.ablauf__medien img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ablauf__medien img:first-child{opacity:1}
.ablauf__medien img.an{opacity:1}
.ablauf__medien img:first-child:not(.an){opacity:0}
.ablauf__medien:not(:has(img.an)) img:first-child{opacity:1}
.ablauf__marke{
  position:absolute;left:20px;bottom:20px;z-index:2;background:var(--orange);color:var(--tinte);
  padding:.5rem 1.1rem;font-weight:800;font-size:1.4rem;line-height:1;
  font-variant-numeric:tabular-nums;border-radius:var(--rund);
}
.ablauf__schritte{list-style:none;margin:0;padding:0}
.ablauf__schritt{padding:clamp(1.8rem,4.5vh,3rem) 0;border-top:1px solid rgba(255,255,255,.18);opacity:.4;transition:opacity .45s ease}
.ablauf__schritt:first-child{border-top-color:rgba(255,255,255,.45)}
.ablauf__schritt[data-aktiv]{opacity:1}
.ablauf__schritt h3{display:flex;align-items:baseline;gap:1rem;margin-bottom:.4rem;color:var(--weiss)}
.ablauf__schritt h3 span{font-size:.85rem;color:#8FCB66;font-weight:800;font-variant-numeric:tabular-nums}
.ablauf__schritt p{margin:0;color:rgba(255,255,255,.7);max-width:48ch}

/* ==========================================================================
   Werkverzeichnis
   ========================================================================== */
.werke{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem 1.4rem}
.werk{border:0;padding:0;background:none;cursor:zoom-in;text-align:left;font:inherit;color:inherit;display:block}
.werk__bild{overflow:clip;background:var(--hell);margin-bottom:.8rem;border-radius:var(--flaeche);}
.werk__bild img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s var(--ease)}
.werk:hover .werk__bild img{transform:scale(1.05)}
/* Fallback: migrierte Galerien haben das <img> direkt im Button */
.werk > img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--flaeche);transition:transform .7s var(--ease)}
.werk:hover > img{transform:scale(1.05)}
.abschnitt--gruen .werk__ort{color:var(--tiefgruen)}
.werk__titel{font-size:.95rem;font-weight:700;display:block;margin-top:.1rem}
.werk__ort{font-size:.84rem;color:var(--grau);display:block}
.werk:focus-visible{outline:3px solid var(--gruen);outline-offset:4px}

/* ==========================================================================
   Ortsleiste
   ========================================================================== */
.orte{border-block:1px solid var(--linie);padding-block:1.4rem;overflow:hidden;position:relative;background:var(--hell)}
.orte__spur{display:flex;gap:2.4rem;width:max-content;align-items:center}
@media (prefers-reduced-motion:no-preference){.orte__spur{animation:orte-lauf 46s linear infinite}}
.orte:hover .orte__spur,.orte:focus-within .orte__spur,.orte[data-pause] .orte__spur{animation-play-state:paused}
@keyframes orte-lauf{to{transform:translateX(-50%)}}
.orte__ort{font-weight:700;font-size:1.1rem;color:var(--grau);white-space:nowrap;display:inline-flex;align-items:center;gap:2.4rem}
.orte__ort::after{content:'';width:.55em;height:.55em;background:var(--gruen);border-radius:50%;}
.orte__stop{
  position:absolute;right:28px;top:50%;translate:0 -50%;z-index:2;
  background:var(--weiss);border:1px solid var(--linie);width:32px;height:32px;
  cursor:pointer;color:var(--grau);font-size:.7rem;border-radius:50%;
}
@media (prefers-reduced-motion:reduce){.orte{overflow-x:auto}.orte__stop{display:none}}

/* ==========================================================================
   Notdienst — Orange, dunkle Schrift
   ========================================================================== */
.notdienst{background:var(--orange);color:var(--tinte);overflow:clip}
.notdienst .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:2.5rem}
.notdienst h2{margin-bottom:.2rem;font-size:clamp(1.5rem,2.8vw,2.2rem)}
.notdienst p{margin:0;font-weight:600;color:rgba(33,43,26,.82)}
.notdienst__nummer{
  font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);text-decoration:none;white-space:nowrap;
  background:var(--tinte);color:var(--weiss);padding:.55em 1.3em;border-radius:var(--rund);
  transition:transform .22s var(--ease);letter-spacing:-.02em;
}
.notdienst__nummer:hover{transform:translateY(-2px)}

/* ==========================================================================
   Listen + Werteraster
   ========================================================================== */
.liste{list-style:none;padding:0;margin:1.6rem 0}
.liste li{position:relative;padding-left:1.9rem;margin-bottom:.75rem;color:var(--grau)}
.liste li::before{
  content:'';position:absolute;left:2px;top:.42em;width:.62em;height:.62em;
  background:var(--gruen);border-radius:50%;
}
.abschnitt--gruen .liste li{color:rgba(33,43,26,.85)}
.abschnitt--gruen .liste li::before{background:var(--tiefgruen)}
.abschnitt--tinte .liste li{color:rgba(255,255,255,.75)}
.abschnitt--tinte .liste li::before{background:var(--gruen)}

.werte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none;padding:0;margin:0}
.werte__feld{background:var(--weiss);border-radius:var(--flaeche);padding:1.7rem 1.6rem 1.8rem}
.abschnitt--gruen .werte__feld{background:var(--weiss);border-radius:var(--flaeche);padding:1.7rem 1.6rem 1.8rem}
.werte__feld h3{font-size:clamp(1.1rem,1.7vw,1.35rem);margin-bottom:.5rem}
.werte__feld p{font-size:.9rem;color:var(--grau);margin:0;line-height:1.5}
.abschnitt--gruen .werte__feld p{color:rgba(33,43,26,.75)}


/* ==========================================================================
   Icons - handgesetzt, runde Strichfuehrung wie die Logo-Boegen.
   Zeichnen sich beim Scrollen (pathLength=1 im Markup).
   ========================================================================== */
.ikone{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:rgba(120,183,74,.16);color:var(--gruen-text);
  transition:background .25s var(--ease),color .25s var(--ease),transform .35s var(--ease);
}
.ikone svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.werte__feld{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.werte__feld:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(33,43,26,.12)}
.werte__feld:hover .ikone{background:var(--gruen);color:var(--tiefgruen);transform:rotate(-8deg) scale(1.06)}
.werte__feld .ikone{margin-bottom:1rem}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ikone svg [pathLength]{stroke-dasharray:1;animation:zeichnen 1ms linear both;animation-timeline:view();animation-range:entry 12% cover 46%}
  }
}
@keyframes zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Leisten-Icons */
.leisten svg{width:26px;height:26px;fill:none;stroke:var(--gruen-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.4rem;transition:stroke .2s,transform .3s var(--ease)}
.leisten a:hover svg{stroke:var(--tiefgruen);transform:scale(1.12) rotate(-6deg)}

/* Der Logo-Schwung unter Sektions-Ueberschriften - DAS Wiedererkennungszeichen */
.abschnitt__kopf h2::after{
  content:'';display:block;width:104px;height:14px;margin-top:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M3 12C32 3 76 2 117 9' stroke='%23F29400' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:contain;transform-origin:left center;
}
.zentriert.abschnitt__kopf h2::after{margin-inline:auto;transform-origin:center}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .abschnitt__kopf h2::after{animation:schwung 1ms linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
  }
}
@keyframes schwung{from{scale:0 1;opacity:0}to{scale:1 1;opacity:1}}

/* Gestaffelte Einblendung fuer Raster-Kinder */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .werte__feld,.leisten a,.werk,.zahlen__feld,.datenblatt{
      animation:rv-auf 1ms linear both;animation-timeline:view();animation-range:entry 4% cover 26%;
    }
    .werte__feld:nth-child(2),.leisten a:nth-child(2),.zahlen__feld:nth-child(2),.werk:nth-child(4n+2){animation-range:entry 9% cover 31%}
    .werte__feld:nth-child(3),.leisten a:nth-child(3),.zahlen__feld:nth-child(3),.werk:nth-child(4n+3){animation-range:entry 14% cover 36%}
    .werte__feld:nth-child(4),.leisten a:nth-child(4),.zahlen__feld:nth-child(4),.werk:nth-child(4n+4){animation-range:entry 19% cover 41%}
  }
}


/* ==========================================================================
   EXTRAVAGANZ - die Schaustuecke
   ========================================================================== */

/* 1) Lese-Fortschritt als oranger Faden oben */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::before{
      content:'';position:fixed;top:0;left:0;height:4px;width:100%;z-index:200;
      background:var(--orange);transform-origin:left center;scale:0 1;
      animation:lesefaden 1ms linear both;animation-timeline:scroll();
    }
    @keyframes lesefaden{to{scale:1 1}}
  }
}

/* 2) Leistungs-Kapitel als STAPEL-PANELS: jedes Panel bleibt kleben,
      das naechste schiebt sich darueber - das Schaustueck der Seite */
@media (min-width:901px){
  .eintraege{display:block}
  .eintrag{
    position:sticky;top:104px;
    background:var(--hell);border-radius:var(--flaeche);
    padding:clamp(1.8rem,3.2vw,3rem);margin-bottom:26px;
  }
  .eintrag:nth-child(even){background:var(--hell-tief)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .eintrag{animation:panel-weg 1ms linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
      @keyframes panel-weg{to{transform:scale(.95) translateY(-10px);opacity:.55}}
    }
  }
}

/* 3) Orte als Riesen-Typo-Laufband - Konturschrift, Marke pur */
.orte{padding-block:2rem;border-block:0;background:var(--weiss)}
.orte__ort{
  font-size:clamp(2rem,4.6vw,3.8rem);font-weight:800;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:2px var(--gruen);text-stroke:2px var(--gruen);
}
.orte__ort::after{width:.32em;height:.32em;background:var(--orange)}
.orte:hover .orte__ort{-webkit-text-stroke-color:var(--gruen-text)}

/* 4) Sichel-Parallax im Hero - das Logo schwebt mit */
.buehne__band::before{
  content:'';position:absolute;z-index:2;right:-6%;top:-22%;
  width:54vmin;height:54vmin;border:5vmin solid rgba(120,183,74,.4);border-radius:50%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(210deg,#000 48%,transparent 74%);
          mask-image:linear-gradient(210deg,#000 48%,transparent 74%);
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .buehne__band::before{animation:sichel-drift 1ms linear both;animation-timeline:view();animation-range:cover}
    @keyframes sichel-drift{from{translate:0 -36px}to{translate:0 64px}}
  }
}

/* 5) Werk-Kacheln: gruener Schleier + Zoom beim Drueberfahren */
.werk__bild{position:relative;display:block}
.werk__bild::after{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(to top,rgba(62,107,31,.8),transparent 55%);
  transition:opacity .3s var(--ease);
}
.werk:hover .werk__bild::after{opacity:1}

/* ==========================================================================
   Formulare
   ========================================================================== */
.formular{display:grid;gap:1.3rem}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld label{font-size:.85rem;font-weight:700;color:var(--tinte)}
.feld label .pflicht{color:var(--orange-text)}
.feld input,.feld select,.feld textarea{
  font-family:inherit;font-size:1rem;padding:.8em 1.1em;border:2px solid var(--linie);
  background:var(--weiss);color:var(--tinte);width:100%;border-radius:var(--feld);
  transition:border-color .2s;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--gruen)}
.feld textarea{resize:vertical;min-height:130px;border-radius:var(--feld)}
.feld-hinweis{font-size:.83rem;color:var(--grau)}
.checkbox{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;color:var(--grau)}
.checkbox input{width:18px;height:18px;flex-shrink:0;margin-top:.2rem;accent-color:var(--gruen-text)}
.formular__hinweis{background:var(--hell);border-left:2px solid var(--gruen);padding:1rem 1.2rem;font-size:.9rem;color:var(--grau);margin:0}

.datenblatt{background:var(--hell);border-radius:var(--flaeche);padding:1.6rem 1.7rem}
.datenblatt + .datenblatt{background:var(--hell);border-radius:var(--flaeche);padding:1.6rem 1.7rem}
.datenblatt h3{font-size:1.1rem;margin:0 0 .8rem}
.datenblatt dl{margin:0;font-size:.95rem}
.datenblatt div{display:flex;justify-content:space-between;gap:1.4rem;padding:.55rem 0;border-bottom:1px solid var(--linie)}
.datenblatt div:last-child{border-bottom:0}
.datenblatt dt{color:var(--grau)}
.datenblatt dd{margin:0;font-weight:700;text-align:right}

.stelle{background:var(--hell);border-radius:var(--flaeche);padding:1.8rem 1.9rem;margin-bottom:1.4rem}
.stelle h3{margin-bottom:.5rem}
.stelle__meta{font-size:.86rem;font-weight:600;color:var(--gruen-text);margin-bottom:1rem}

.fliesstext h2{margin-top:2.8rem;font-size:clamp(1.35rem,2.2vw,1.8rem)}
.fliesstext h3{margin-top:2rem;font-size:1.12rem}
.fliesstext p,.fliesstext li{color:var(--grau)}
.fliesstext ul{padding-left:1.2rem}
.fliesstext a{color:var(--gruen-text);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(30,42,20,.96);display:none;place-items:center;padding:28px}
.lightbox.offen{display:grid}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;width:auto;border-radius:var(--flaeche);}
.lightbox__zu{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.lightbox__nav{position:absolute;top:50%;translate:0 -50%;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:1.5rem;width:48px;height:48px;cursor:pointer;border-radius:50%}
.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__nav--zurueck{left:26px}
.lightbox__nav--vor{right:26px}

/* ==========================================================================
   Fuß — Tiefgrün
   ========================================================================== */
.footer{background:var(--tiefgruen);color:rgba(255,255,255,.72);font-size:.92rem;padding-block:4rem 0}
.footer__raster{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2.6rem}
.footer h4{color:#8FCB66;font-size:.82rem;font-weight:700;margin-bottom:1.1rem;text-transform:lowercase}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.55rem}
.footer a{text-decoration:none}
.footer a:hover{color:var(--gruen)}
.footer__marke{font-weight:800;font-size:1.4rem;color:var(--weiss);margin-bottom:.8rem;display:block;letter-spacing:-.02em}
.footer__unten{border-top:1px solid rgba(255,255,255,.16);margin-top:3.2rem;padding-block:1.5rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.5)}
.footer__unten a{color:rgba(255,255,255,.72)}

.hinweis{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -8px 30px rgba(33,43,26,.1);padding:.9rem 0;display:none}
.hinweis.offen{display:block}
.hinweis__innen{max-width:var(--wrap);margin-inline:auto;padding-inline:28px;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.hinweis p{font-size:.86rem;color:var(--grau);margin:0;max-width:76ch}
.hinweis .btn{padding:.55em 1.3em;font-size:.88rem}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .werke{grid-template-columns:repeat(3,1fr)}
  .footer__raster{grid-template-columns:1fr 1fr}
  .zahlen__reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .zahlen__feld:nth-child(3){border-left:0}
  .werte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .eintrag{grid-template-columns:1fr;gap:1.6rem}
  .eintrag:nth-child(even) .eintrag__bild{order:0}
  .portraet{grid-template-columns:1fr;gap:2rem}
  .portraet__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Personenportraets: Hochformat-Rahmen - ein Gesicht gehoert nicht in 4:3 quer */
.portraet__bild--hoch img{aspect-ratio:4/5;object-position:50% 18%}
  .eintrag__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
  .ablauf{grid-template-columns:1fr;gap:2rem}
  .ablauf__pin{position:static}
  .ablauf__medien{aspect-ratio:16/10}
  .ablauf__schritt{opacity:1;padding:1.5rem 0}
  .bildband__bild{aspect-ratio:16/9}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(330px,86vw);background:var(--weiss);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:5.5rem 1.8rem 2rem;gap:.3rem;box-shadow:-12px 0 40px rgba(33,43,26,.16);
    transform:translateX(100%);visibility:hidden;
    transition:transform .3s var(--ease),visibility 0s .3s;overflow-y:auto;
  }
  .nav.offen{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  .nav a:not(.btn){padding:.9em 1em;font-size:1.05rem}
  .nav .btn{margin:1.4rem 0 0;justify-content:center}
  .nav-overlay{position:fixed;inset:0;background:rgba(30,42,20,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-overlay.offen{opacity:1;pointer-events:auto}
  body.nav-auf{overflow:hidden}
}
@media (max-width:680px){
  body{font-size:16px}
  .leisten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 0;padding:0;list-style:none}
  .buehne__text{padding:1.3rem}
  .buehne__band{height:min(74vh,540px)}
  .wrap,.hinweis__innen{padding-inline:20px}
  .topbar .wrap{justify-content:center}
  .topbar__links{gap:1rem;font-size:.78rem}
  .werke{grid-template-columns:repeat(2,1fr)}
  .zahlen__reihe,.werte{grid-template-columns:1fr}
  .zahlen__feld{background:var(--hell);border-radius:var(--flaeche);padding:1.8rem 1.7rem 1.6rem}
  .zahlen{margin-top:clamp(3rem,6vw,5rem)}
  .footer__raster{grid-template-columns:1fr;gap:2rem}
  .feld-reihe{grid-template-columns:1fr}
  .notdienst .wrap{flex-direction:column;align-items:flex-start}
  .btn-gruppe .btn{flex:1 1 100%;justify-content:center}
  .bildband__unterschrift{font-size:.76rem;left:16px;bottom:16px;padding:.5rem 1rem}
  .bildband__punkte{right:16px;bottom:18px}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__nav--zurueck{left:10px}
  .lightbox__nav--vor{right:10px}
  .hinweis .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.wort-in > span,.clip-rv > img,.zaehl,.werte__feld,.leisten a,.werk,.zahlen__feld,.datenblatt,.ikone svg [pathLength],.abschnitt__kopf h2::after,.eintrag,.buehne__band::before,body::before{animation-timeline:none!important}
  .bildband__bild{opacity:1}
  .bildband__bild:not(:first-child){display:none}
}
@media print{
  .header,.topbar,.footer,.hinweis,.nav-toggle,.btn,.orte{display:none!important}
  body{font-size:11pt;background:#fff}
}