/* ============================================================
   INVESTOREN · ueber-uns/investoren.html
   Große Motion Graphics statt Zierkreisen. Jede Grafik erzählt das
   Argument daneben: steigende, planbare Kurve · viele kleine Betriebe ·
   ein Zyklus, der die Nachfrage nicht bewegt · Technik, die am Haus
   vorbeizieht · ein Netz, das sich knüpft · eine Kette der Gewerke ·
   ein Bau, der Stein für Stein wächst · eine Struktur, die sich zeichnet.

   Animiert wird nur transform, opacity und stroke-dashoffset. Alles
   steht still bei reduzierter Bewegung und im Sparbetrieb.
   Skript: assets/js/investoren.js
   ============================================================ */
.inv{--inv-tinte:#1E1119;--inv-dunkel:#2A1824;--inv-haar:rgba(112,72,97,.14)}

/* ---- Gemeinsame Bausteine ---- */
.inv-marke{
  display:inline-flex;align-items:center;gap:12px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--plum);
}
.inv-marke::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--orange)}
.inv-dunkel .inv-marke{color:var(--plum-soft)}
.inv-titel{
  margin:16px 0 0;font-family:var(--sans);font-weight:400;
  font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.04em;color:var(--ink);text-wrap:balance;
}
.inv-titel em{font-style:normal;color:var(--plum)}
.inv-dunkel .inv-titel{color:#fff}
.inv-dunkel .inv-titel em{color:var(--plum-soft)}
.inv-lead{margin:20px 0 0;max-width:58ch;font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.4vw,19px);line-height:1.62;color:var(--muted)}
.inv-dunkel .inv-lead{color:rgba(255,255,255,.76)}

.inv-dunkel{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background-color:#2A1824;
  background-image:linear-gradient(165deg,#3A2232 0%,#2A1824 50%,#1E1119 100%);
}

/* ============================================================
   1 · KOPF mit Karte
   Die Karte kommt aus netzwerk.html (gleiche Punkte, gleiche Bögen).
   ============================================================ */
.inv-kopf__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ============================================================
   2 · KERNTHESE
   ============================================================ */
.inv-these{padding:clamp(72px,8vw,128px) 0 clamp(56px,6vw,96px)}
.inv-these__satz{
  margin:22px 0 0;max-width:22ch;font-family:var(--sans);font-weight:400;
  font-size:clamp(38px,6.4vw,96px);line-height:1;letter-spacing:-.05em;color:var(--ink);
}
.inv-these__satz .w{color:rgba(42,24,36,.18);transition:color .5s}
.inv-these__satz .w.hot{color:var(--plum)}
/* ohne Skript und bei reduzierter Bewegung voll lesbar */
.inv-these__satz:not(.bereit) .w,.inv-these__satz.fertig .w{color:var(--ink)}
.inv-zahlen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--inv-haar);
}
.inv-zahlen > div{padding:26px 24px 8px 0;border-right:1px solid var(--inv-haar)}
.inv-zahlen > div + div{padding-left:24px}
.inv-zahlen > div:last-child{border-right:0}
.inv-zahlen b{
  display:block;font-family:var(--sans);font-weight:300;font-size:clamp(56px,7.4vw,112px);line-height:.9;
  letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.inv-zahlen span{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   3 · MARKT · Scrollytelling
   Links steht die Bühne und haftet, rechts laufen die Argumente.
   Das Argument in der Bildschirmmitte schaltet seine Szene an.
   ============================================================ */
.inv-markt{padding:clamp(72px,8vw,128px) 0}
.inv-markt__kopf{max-width:760px;margin-bottom:clamp(24px,3vw,48px)}
.inv-markt__raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,96px)}
.inv-buehne{
  position:sticky;top:calc(var(--nav-h) + 32px);
  height:min(72vh,620px);border-radius:32px;overflow:hidden;
  background-color:#2A1824;
  background-image:radial-gradient(120% 90% at 20% 10%,#4A2B41 0%,#2A1824 55%,#1E1119 100%);
  box-shadow:0 40px 90px -50px rgba(46,30,40,.55);
}
.inv-buehne__nr{
  position:absolute;left:28px;top:24px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.6);
}
.inv-buehne__nr b{color:#fff;font-weight:500}
.inv-szene{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out);pointer-events:none}
.inv-szene.an{opacity:1}
.inv-szene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.inv-szene__wort{
  position:absolute;left:28px;bottom:24px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum-soft);
}

.inv-schritte{padding:6vh 0 10vh}
.inv-schritt{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.inv-schritt__nr{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--orange-deep)}
.inv-schritt h3{
  margin:12px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(28px,3vw,44px);
  line-height:1.06;letter-spacing:-.035em;color:rgba(42,24,36,.3);transition:color .5s;
}
.inv-schritt p{
  margin:16px 0 0;max-width:46ch;font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.66;
  color:rgba(107,88,101,.45);transition:color .5s;
}
.inv-schritt.an h3{color:var(--ink)}
.inv-schritt.an p{color:var(--muted)}

/* -- Szene 1: planbar steigend -- */
.sz-raster line{stroke:rgba(255,255,255,.07);stroke-width:1}
.sz-kurve{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sz-prognose{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:.012 .018;opacity:0}
.sz-flaeche{fill:url(#szVerlauf);opacity:0}
.sz-punkt{fill:var(--orange)}
.an .sz-kurve{animation:sz-zeichnen 1.8s var(--ease-out) .2s forwards}
.an .sz-flaeche{animation:sz-ein 1.2s ease .9s forwards}
.an .sz-prognose{animation:sz-ein .6s ease 1.8s forwards,sz-laufen 6s linear 1.8s infinite}
.sz-punkt{opacity:0}
.an .sz-punkt{animation:sz-ein .3s ease 1.9s forwards}
@keyframes sz-zeichnen{to{stroke-dashoffset:0}}
@keyframes sz-ein{to{opacity:1}}
@keyframes sz-laufen{to{stroke-dashoffset:-.3}}

/* -- Szene 2: viele kleine Betriebe -- */
.sz-betrieb{fill:rgba(255,255,255,.16);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.sz-betrieb.alt{fill:var(--plum-soft)}
.an .sz-betrieb{animation:sz-auf .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .sz-betrieb.alt{animation:sz-auf .6s var(--ease-out) forwards,sz-uebergabe 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms),calc(var(--d) * 1ms + 900ms)}
@keyframes sz-auf{to{opacity:1;transform:scale(1)}}
@keyframes sz-uebergabe{0%,100%{fill:var(--plum-soft)}50%{fill:var(--orange)}}

/* -- Szene 3: Zyklus und stetige Nachfrage -- */
.sz-welle{fill:none;stroke:var(--plum-soft);stroke-width:2.5;opacity:.55}
.sz-wellenband{transform:translateX(0)}
.an .sz-wellenband{animation:sz-welle 7s linear infinite}
@keyframes sz-welle{to{transform:translateX(-400px)}}
.sz-stetig{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px rgba(240,118,47,.55))}
.an .sz-stetig{animation:sz-zeichnen 2.2s var(--ease-out) .3s forwards}
.sz-legende text{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:rgba(255,255,255,.62);text-transform:uppercase}

/* -- Szene 4: Technik zieht vorbei, das Haus bleibt -- */
.sz-bit{fill:rgba(201,167,181,.35)}
.sz-bitband{transform:translateX(0)}
.an .sz-bitband{animation:sz-bits 9s linear infinite}
.an .sz-bitband--2{animation-duration:14s;animation-direction:reverse}
@keyframes sz-bits{to{transform:translateX(-600px)}}
.sz-haus{fill:#2A1824;stroke:#fff;stroke-width:3;stroke-linejoin:round}
.sz-haus-licht{fill:var(--orange);opacity:.9}
.an .sz-haus-licht{animation:sz-glimmen 3s ease-in-out infinite}
@keyframes sz-glimmen{0%,100%{opacity:.55}50%{opacity:1}}

/* -- Szene 5: ein Netz knüpft sich -- */
.sz-faden{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.an .sz-faden{animation:sz-zeichnen 1.1s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.sz-knoten{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.sz-knoten.kern{fill:var(--orange)}
.an .sz-knoten{animation:sz-auf .5s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.sz-puls{fill:var(--orange);opacity:0}
.an .sz-puls{animation:sz-puls-lauf 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 1600ms)}
/* Die Bewegung selbst macht <animateMotion> im SVG (läuft auch in älteren Safari),
   CSS blendet nur ein und aus. */
@keyframes sz-puls-lauf{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}

/* ============================================================
   4 · MODELL · Kette der Gewerke
   ============================================================ */
.inv-modell{padding:clamp(80px,9vw,140px) 0}
.inv-kette{position:relative;margin:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.inv-kette svg{display:block;width:100%;height:auto;overflow:visible}
.kt-bahn{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.kt-zug{fill:none;stroke:url(#ktVerlauf);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.inv-kette.an .kt-zug{animation:sz-zeichnen 2.4s var(--ease-out) forwards}
.kt-glied circle.ring{fill:#2A1824;stroke:rgba(255,255,255,.28);stroke-width:2;transition:stroke .5s}
.kt-glied circle.kern{fill:var(--plum-soft);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.inv-kette.an .kt-glied circle.kern{animation:sz-auf .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.inv-kette.an .kt-glied circle.ring{animation:kt-ring 5s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms + 2400ms)}
@keyframes kt-ring{0%,100%{stroke:rgba(255,255,255,.28)}12%{stroke:var(--orange)}28%{stroke:rgba(255,255,255,.28)}}
.kt-glied text{font-family:var(--sans);font-size:17px;fill:#fff;letter-spacing:-.01em}
.kt-glied text.klein{font-family:var(--mono);font-size:10px;letter-spacing:.16em;fill:rgba(255,255,255,.55);text-transform:uppercase}
.kt-licht{fill:#fff;opacity:0;filter:drop-shadow(0 0 8px #F0762F)}
.inv-kette.an .kt-licht{animation:kt-licht 5s ease-in-out 2.4s infinite}
@keyframes kt-licht{0%{opacity:0}6%{opacity:1}94%{opacity:1}100%{opacity:0}}

.inv-unterschiede{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.inv-unterschied{
  position:relative;overflow:hidden;padding:30px 28px 32px;border-radius:26px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.inv-unterschied__nr{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#FFB38A}
.inv-unterschied h3{margin:14px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.03em;color:#fff}
.inv-unterschied p{margin:14px 0 0;font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.74)}
.inv-unterschied::after{
  content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out);
}
.inv-unterschied.in::after{transform:scaleX(1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .inv-unterschied{background:rgba(255,255,255,.08)}
}

/* ============================================================
   5 · BUY AND BUILD
   ============================================================ */
.inv-bau{padding:clamp(72px,8vw,128px) 0}
.inv-bau__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.inv-bau__grafik{position:relative;aspect-ratio:1/1;max-width:600px;width:100%}
.inv-bau__grafik svg{width:100%;height:100%;display:block;overflow:visible}
.bb-stein{
  fill:#fff;stroke:rgba(112,72,97,.28);stroke-width:1.5;
  opacity:0;transform:translateY(-90px);transform-box:fill-box;
}
.bb-stein.eigen{fill:var(--plum);stroke:var(--plum)}
.bb-stein.partner{fill:var(--plum-soft);stroke:var(--plum-soft)}
.inv-bau.an .bb-stein{animation:bb-fallen 9s cubic-bezier(.3,1.35,.5,1) infinite;animation-delay:calc(var(--d) * 1ms)}
@keyframes bb-fallen{
  0%{opacity:0;transform:translateY(-90px)}
  8%{opacity:1;transform:none}
  82%{opacity:1;transform:none}
  92%,100%{opacity:0;transform:translateY(12px)}
}
.bb-boden{stroke:var(--plum);stroke-width:2;stroke-linecap:round}
.bb-wort{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;fill:var(--muted)}
.bb-legende{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bb-legende span{display:inline-flex;align-items:center;gap:8px}
.bb-legende i{width:12px;height:12px;border-radius:3px;display:inline-block}
.inv-bau__text p{margin:18px 0 0;max-width:58ch;font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.68;color:var(--muted)}
.inv-bau__bild{margin:28px 0 0;border-radius:18px;overflow:hidden}
.inv-bau__bild img{width:100%;height:auto;display:block}
.inv-bau__bild figcaption{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   6 · STRUKTUR · zeichnet sich
   ============================================================ */
.inv-struktur{padding:clamp(72px,8vw,128px) 0}
.inv-org{position:relative;margin-top:clamp(40px,5vw,72px)}
.inv-org svg.inv-org__linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.org-linie{fill:none;stroke:var(--plum);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.inv-org.an .org-linie{animation:sz-zeichnen 1.2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.org-puls{fill:var(--orange);opacity:0}
.inv-org.an .org-puls{animation:sz-puls-lauf 3.4s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms)}
.inv-org__reihe{position:relative;z-index:1;display:grid;gap:18px;justify-content:center}
.inv-org__reihe + .inv-org__reihe{margin-top:clamp(56px,6vw,88px)}
.inv-org__reihe--1{grid-template-columns:minmax(0,520px)}
.inv-org__reihe--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.inv-org__reihe--3{grid-template-columns:repeat(5,minmax(0,1fr))}
.org-feld{
  position:relative;padding:24px 26px 26px;border-radius:24px;background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(112,72,97,.1),0 24px 50px -34px rgba(46,30,40,.3);
  opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.inv-org.an .org-feld{opacity:1;transform:none;transition-delay:calc(var(--d) * 1ms)}
.org-feld--kopf{background-color:#2A1824;background-image:linear-gradient(150deg,#4A2B41,#2A1824);color:#fff;text-align:center}
.org-feld__marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum)}
.org-feld--kopf .org-feld__marke{color:var(--plum-soft)}
.org-feld h3{margin:10px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(21px,1.9vw,26px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.org-feld--kopf h3{color:#fff}
.org-feld p{margin:10px 0 0;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;color:var(--muted)}
.org-feld--kopf p{color:rgba(255,255,255,.74)}
.org-feld--klein{padding:18px 16px;text-align:center}
.org-feld--klein h3{font-size:16px;margin:0}
.inv-org__fuss{position:relative;z-index:1;margin:clamp(40px,5vw,64px) auto 0;max-width:640px;text-align:center;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;color:var(--muted)}

/* ============================================================
   7 · FÜHRUNG
   ============================================================ */
.inv-fuehrung{padding:clamp(72px,8vw,128px) 0}
.inv-leute{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,4vw,56px)}
.inv-person{
  position:relative;overflow:hidden;border-radius:26px;background:#fff;
  box-shadow:0 0 0 1px rgba(112,72,97,.1),0 24px 50px -34px rgba(46,30,40,.28);
}
.inv-person__bild{aspect-ratio:1/1;overflow:hidden;background:var(--f2)}
.inv-person__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.inv-person:hover .inv-person__bild img{transform:scale(1.04)}
.inv-person__text{padding:20px 22px 24px}
.inv-person h3{margin:0;font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:-.015em;color:var(--ink)}
.inv-person__rolle{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.inv-person p{margin:12px 0 0;font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--muted)}
.inv-rat{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--inv-haar)}
.inv-rat__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:20px 0 0;padding:0;list-style:none}
.inv-rat__liste li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start}
.inv-rat__liste img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
.inv-rat__liste b{display:block;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)}
.inv-rat__liste span{display:block;margin-top:3px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
.inv-rat__liste em{display:block;margin-top:6px;font-style:normal;font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ============================================================
   8 · ANFRAGE · Pitch Deck und Termin
   ============================================================ */
.inv-anfrage{padding:clamp(72px,8vw,128px) 0;scroll-margin-top:calc(var(--nav-h) + 12px)}
.inv-feld{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(112,72,97,.1),0 50px 100px -56px rgba(46,30,40,.45);
}
.inv-feld__seite{position:relative;isolation:isolate;overflow:hidden;padding:clamp(32px,4vw,56px);color:#fff;
  background-color:#2A1824;background-image:linear-gradient(160deg,#4A2B41 0%,#2A1824 60%,#1E1119 100%)}
.inv-feld__seite .inv-titel{font-size:clamp(32px,3.6vw,52px)}


/* Linke Seite des Anfragefelds ist dunkel: Schrift umstellen */
.inv-feld__seite .inv-marke{color:var(--plum-soft)}
.inv-feld__seite .inv-titel{color:#fff}
.inv-feld__seite .inv-titel em{color:var(--plum-soft)}
.inv-feld__seite .inv-lead{color:rgba(255,255,255,.76)}
/* Das Deck: vier Blätter fächern sich auf und legen sich wieder zusammen */
.inv-deck{position:relative;height:clamp(180px,20vw,240px);margin:clamp(28px,3vw,40px) 0}
.inv-deck i{
  position:absolute;left:50%;bottom:0;width:clamp(150px,16vw,196px);aspect-ratio:16/10;margin-left:calc(clamp(150px,16vw,196px) / -2);
  border-radius:12px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  transform-origin:50% 120%;
}
.inv-deck i::before{content:"";position:absolute;left:12%;top:18%;width:40%;height:8%;border-radius:4px;background:var(--plum)}
.inv-deck i::after{content:"";position:absolute;left:12%;top:36%;right:12%;height:34%;border-radius:6px;
  background:linear-gradient(90deg,rgba(112,72,97,.16),rgba(240,118,47,.3))}
.inv-deck i:nth-child(1){background:#EFE5EB}
.inv-deck i:nth-child(2){background:#F6EFF3}
.inv-deck i:nth-child(3){background:#FBF8FA}
.inv-feld.an .inv-deck i{animation:deck-faechern 7s cubic-bezier(.3,1.2,.5,1) infinite}
.inv-feld.an .inv-deck i:nth-child(1){--r:-16deg;--x:-44%}
.inv-feld.an .inv-deck i:nth-child(2){--r:-6deg;--x:-15%}
.inv-feld.an .inv-deck i:nth-child(3){--r:5deg;--x:14%}
.inv-feld.an .inv-deck i:nth-child(4){--r:15deg;--x:42%}
@keyframes deck-faechern{
  0%,8%{transform:none}
  30%,70%{transform:translateX(var(--x)) rotate(var(--r))}
  92%,100%{transform:none}
}
.inv-feld__person{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;margin-top:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.inv-feld__person img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--orange)}
.inv-feld__person b{display:block;font-family:var(--sans);font-weight:500;font-size:16px}
.inv-feld__person span{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-soft)}
.inv-feld__person a{color:#fff;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.inv-feld__kontakt{margin:18px 0 0;font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.74)}
.inv-feld__kontakt a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.inv-feld__form{padding:clamp(28px,4vw,56px)}
.inv-tabs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px;border-radius:999px;background:var(--f1);box-shadow:inset 0 0 0 1px rgba(112,72,97,.1)}
.inv-tabs__marke{position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 7px);border-radius:999px;
  background-color:#704861;background-image:linear-gradient(135deg,#8A5A78,#704861 50%,#4A2B41);
  box-shadow:0 10px 24px -12px rgba(74,43,65,.7);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.inv-tabs[data-wahl="termin"] .inv-tabs__marke{transform:translateX(calc(100% + 4px))}
.inv-tabs button{
  position:relative;z-index:1;min-height:48px;margin:0;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);transition:color .35s;
}
.inv-tabs button[aria-selected="true"]{color:#fff}
.inv-tabs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.inv-form{margin-top:26px}
.inv-form__hilfe{margin:0 0 20px;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;color:var(--muted)}
.inv-form__reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inv-form label.inv-f{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink)}
.inv-form input[type="text"],.inv-form input[type="email"],.inv-form input[type="tel"],.inv-form input[type="date"],.inv-form select,.inv-form textarea{
  width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid rgba(112,72,97,.2);background:#fff;
  font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ink);
  transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none;
}
.inv-form textarea{min-height:104px;resize:vertical}
.inv-form input:focus,.inv-form select:focus,.inv-form textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(112,72,97,.16)}
.inv-form__art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px;padding:0;border:0}
.inv-form__art legend{margin-bottom:8px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink)}
.inv-form__art label{position:relative;display:block;cursor:pointer}
.inv-form__art input{position:absolute;opacity:0;pointer-events:none}
.inv-form__art span{display:block;padding:14px 16px;border-radius:16px;border:1px solid rgba(112,72,97,.2);font-family:var(--sans);font-size:14.5px;line-height:1.4;color:var(--ink);transition:border-color .3s,background .3s}
.inv-form__art span small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.inv-form__art input:checked + span{border-color:var(--plum);background:rgba(112,72,97,.06);box-shadow:inset 0 0 0 1px var(--plum)}
.inv-form__art input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.inv-form__termin[hidden],.inv-form [hidden]{display:none!important}
.inv-form__consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;margin:8px 0 18px;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted)}
.inv-form__consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--plum)}
.inv-form__consent a{color:var(--plum)}
.inv-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inv-form__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.inv-form__status{margin:14px 0 0;font-family:var(--sans);font-size:14.5px;line-height:1.5}
.inv-form__status.ok{color:#2E6B45}
.inv-form__status.err{color:#A3372A}

/* ============================================================
   Mobil
   ============================================================ */
@media(max-width:1000px){
  .inv-markt__raster{grid-template-columns:1fr;gap:0}
  .inv-buehne{top:calc(var(--nav-h) + 8px);height:min(42vh,340px);border-radius:24px;z-index:2}
  .inv-schritte{padding:4vh 0 0}
  .inv-schritt{min-height:52vh}
  .inv-unterschiede{grid-template-columns:1fr}
  .inv-bau__raster{grid-template-columns:1fr}
  .inv-bau__grafik{max-width:460px;margin-inline:auto}
  .inv-org__reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inv-leute{grid-template-columns:1fr 1fr}
  .inv-rat__liste{grid-template-columns:1fr 1fr}
  .inv-feld{grid-template-columns:1fr}
}
@media(max-width:640px){
  .inv-zahlen{grid-template-columns:1fr}
  .inv-zahlen > div{border-right:0;border-bottom:1px solid var(--inv-haar);padding:20px 0 16px!important}
  .inv-org__reihe--2{grid-template-columns:1fr}
  .inv-org__reihe--3{grid-template-columns:1fr 1fr}
  .inv-org svg.inv-org__linien{display:none}
  .inv-leute{grid-template-columns:1fr}
  .inv-rat__liste{grid-template-columns:1fr}
  .inv-form__reihe,.inv-form__art{grid-template-columns:1fr}
  .kt-glied text{font-size:20px}
  .inv-kette{overflow-x:auto;margin-inline:-16px;padding:0 16px 8px}
  .inv-kette svg{min-width:760px}
  .inv-feld{border-radius:24px}
}

/* ============================================================
   Ruhe: reduzierte Bewegung und Sparbetrieb
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .inv *,.inv *::before,.inv *::after{animation:none!important;transition:none!important}
  .sz-kurve,.sz-stetig,.sz-faden,.kt-zug,.org-linie{stroke-dashoffset:0!important}
  .sz-prognose,.sz-flaeche,.sz-punkt,.sz-betrieb,.sz-knoten,.bb-stein,.org-feld{opacity:1!important;transform:none!important}
  .kt-glied circle.kern{transform:none!important}
  .sz-puls,.org-puls,.kt-licht{display:none}
}
html.sparsam .inv-unterschied{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.08)}
html.sparsam .sz-stetig,html.sparsam .kt-licht{filter:none}

/* ============================================================
   9 · KONTAKT · Feld wie „Sprechen wir über Zahlen"
   Links die dunkle Seite mit Fächer und den drei Menschen, rechts
   das bestehende Formular in drei Schritten (formular.js).
   ============================================================ */
.kontakt-feld .inv-feld{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.kontakt-feld .inv-feld__seite .inv-titel{font-size:clamp(36px,4vw,58px)}
.kontakt-feld .inv-lead b{color:#fff;font-weight:500}
.kontakt-feld .inv-feld__form .form{margin:0;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.inv-feld__leute{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:6px 0 0;padding:24px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.14);
}
.inv-feld__leute li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.inv-feld__leute img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:8px;
  box-shadow:0 0 0 2px rgba(255,255,255,.22);transition:box-shadow .4s,transform .5s var(--ease-out);
}
.inv-feld__leute li:hover img{box-shadow:0 0 0 2px var(--orange);transform:translateY(-3px)}
.inv-feld__leute b{font-family:var(--sans);font-weight:500;font-size:14.5px;line-height:1.25;color:#fff}
.inv-feld__leute span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.45;color:var(--plum-soft)}
.inv-feld__kontakt b{color:#fff;font-weight:500}
/* Die Blätter kommen auf der Kontaktseite etwas höher, damit die Menschen darunter Platz haben */
.kontakt-feld .inv-deck{height:clamp(150px,15vw,200px);margin:clamp(22px,2.4vw,32px) 0}

/* ============================================================
   10 · ÜBER UNS · Kopf mit Bürogebäude und Verbund
   Sechzehn Häuser auf einem Bogen, Linien zum Sitz in Essen, Licht-
   punkte laufen darauf ins Gebäude. Das Foto steht frei als Abzug
   und wird nicht beschnitten (Panorama 1400 × 349).
   ============================================================ */
.ed-kopfbild--gebaeude .ed-kopfbild__in{max-width:none}
.ue-kopf__raster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,4.4vw,72px);align-items:center;
}
.ue-kopfgrafik{margin:0;position:relative;min-width:0}
.ue-netz{display:block;width:100%;height:auto;overflow:visible}
.un-linie{fill:none;stroke:rgba(112,72,97,.34);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.ue-kopfgrafik.an .un-linie{animation:sz-zeichnen 1.2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.un-haus{
  fill:#fff;stroke:var(--plum-soft);stroke-width:1.6;stroke-linejoin:round;
  opacity:0;transform:translateY(-10px) scale(.6);transform-box:fill-box;transform-origin:50% 100%;
}
.un-haus.eigen{fill:var(--plum);stroke:var(--plum)}
.ue-kopfgrafik.an .un-haus{animation:un-haus .7s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes un-haus{to{opacity:1;transform:none}}
.un-puls{fill:var(--orange);opacity:0}
.ue-kopfgrafik.an .un-puls{animation:sz-puls-lauf 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms)}
.un-sitz{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.ue-kopfgrafik.an .un-sitz{animation:sz-auf .6s var(--ease-out) 1.6s forwards}
.ue-kopfgrafik__bild{
  position:relative;margin-top:-4px;padding:8px;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px rgba(112,72,97,.08),0 34px 64px -38px rgba(46,30,40,.42);
}
.ue-kopfgrafik__bild img{display:block;width:100%;height:auto;border-radius:13px}
.ue-kopfgrafik__legende{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;padding:0 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.ue-kopfgrafik__legende span{display:inline-flex;align-items:center;gap:8px}
.ue-kopfgrafik__legende i{width:12px;height:11px;display:inline-block;border:1.5px solid var(--plum-soft);border-radius:2px;background:#fff}
.ue-kopfgrafik__legende i.eigen{background:var(--plum);border-color:var(--plum)}

/* ---- Über uns · Tisch knapper ---- */
body.ed .ed-abschnitt--tisch-knapp{padding:clamp(30px,3.4vw,50px) 0}
body.ed .ed-abschnitt--tisch-knapp .grosssatz{font-size:clamp(21px,2.4vw,32px);line-height:1.26}
body.ed .ed-abschnitt--tisch-knapp .rollen{gap:6px}
body.ed .ed-abschnitt--tisch-knapp .rollen span{font-size:10px;padding:7px 13px}
body.ed .ed-abschnitt--tisch-knapp .satz__note{font-size:14.5px;line-height:1.6}

/* ---- Über uns · Überschrift wie „Was für uns spricht" (Startseite, .nf__k--gross) ---- */
.ue-gross{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--sans);font-weight:400;font-size:clamp(23px,2.7vw,34px);line-height:1.14;
  letter-spacing:-.02em;color:var(--ink);
}
.ue-gross::before{content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--orange)}

@media(max-width:1000px){
  .kontakt-feld .inv-feld{grid-template-columns:1fr}
}
@media(max-width:900px){
  .ue-kopf__raster{grid-template-columns:1fr}
  .ue-kopfgrafik{max-width:560px;width:100%;margin-inline:auto}
}
@media(max-width:560px){
  .inv-feld__leute{grid-template-columns:1fr;gap:12px}
  .inv-feld__leute li{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center}
  .inv-feld__leute img{grid-row:1 / span 2;width:52px;height:52px;margin:0}
  .ue-kopfgrafik__bild{padding:6px;border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  .un-linie{stroke-dashoffset:0!important}
  .un-haus,.un-sitz{opacity:1!important;transform:none!important}
  .un-puls{display:none}
}

/* ============================================================
   11 · ÜBER UNS · Struktur als Fluss
   Zwei Gesellschaften nebeneinander → Themen in der Breite →
   eigene Häuser und Netzwerkpartner. Eule als Wasserzeichen unten rechts.
   ============================================================ */
.ue-struktur{position:relative}
.ue-struktur__wz{
  position:absolute;right:clamp(-40px,-2vw,0px);bottom:clamp(-60px,-3vw,-20px);z-index:0;
  width:clamp(220px,26vw,380px);height:auto;opacity:.06;pointer-events:none;
}
.inv-org--fluss .inv-org__reihe + .inv-org__reihe{margin-top:clamp(64px,7vw,104px)}
.inv-org--fluss .inv-org__reihe--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.inv-org__reihe--themen{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.org-feld--punkt{padding:14px 10px;border-radius:999px}
.org-feld--punkt h3{font-size:14px;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.org-feld--punkt::before{
  content:"";display:block;width:7px;height:7px;margin:0 auto 8px;border-radius:50%;background:var(--orange);
}
.org-feld--punkt[data-org-von="ag"]::before{background:var(--plum)}

/* Geschichte: Bild kleiner, damit das Panorama scharf bleibt */
.festung--klein{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.festung--klein .festung__bild{padding:8px;border-radius:20px;background:#fff;border:0;
  box-shadow:0 0 0 1px rgba(112,72,97,.08),0 30px 60px -36px rgba(46,30,40,.4)}
.festung--klein .festung__bild img{border-radius:13px}
.festung--klein .festung__bild figcaption{left:22px;bottom:18px}
.festung--klein .festung__text{margin-top:0;columns:1}

@media(max-width:1100px){
  .inv-org__reihe--themen{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .festung--klein{grid-template-columns:1fr}
  .festung--klein .festung__bild{max-width:560px}
}
@media(max-width:640px){
  .inv-org--fluss .inv-org__reihe--2{grid-template-columns:1fr}
  .inv-org__reihe--themen{grid-template-columns:1fr 1fr}
  .inv-org--fluss .inv-org__reihe + .inv-org__reihe{margin-top:22px}
}

/* ============================================================
   12 · ÜBER UNS · Kopf höher, Grafik kleiner, Foto schmaler
   ============================================================ */
.ed-kopfbild--gebaeude{padding-top:calc(var(--nav-h) + clamp(18px,2.6vw,40px))}
.ed-kopfbild--gebaeude .ue-kopf__raster{align-items:start}
.ed-kopfbild--gebaeude .ue-kopfgrafik{max-width:540px;width:100%;justify-self:end}
/* Das Panorama wird links angeschnitten (Wunsch des Kunden): schmaler als
   die Grafik, Gebäude und Fahnen bleiben rechts im Bild. */
.ed-kopfbild--gebaeude .ue-kopfgrafik__bild{width:78%;margin-inline:auto}
.ed-kopfbild--gebaeude .ue-kopfgrafik__bild img{aspect-ratio:2.7/1;object-fit:cover;object-position:78% 20%}
.ed-kopfbild--gebaeude .ue-kopfgrafik__legende{justify-content:center}

/* ---- Struktur: Sammelpunkt zwischen Themen und Häusern ---- */
.inv-org__reihe--mitte{display:flex;justify-content:center}
.inv-org--fluss .inv-org__reihe--mitte{margin-top:clamp(52px,5vw,76px)}
.inv-org--fluss .inv-org__reihe--nah{margin-top:clamp(52px,5vw,76px)}
.org-mitte{
  position:relative;z-index:1;display:block;width:18px;height:18px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 6px rgba(240,118,47,.16);
  opacity:0;transform:scale(0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.inv-org.an .org-mitte{opacity:1;transform:none;transition-delay:calc(var(--d) * 1ms)}
@media(max-width:640px){.inv-org__reihe--mitte{display:none}}

/* ============================================================
   13 · ÜBER UNS · Geschichte als Chronik
   ============================================================ */
.ue-geschichte{padding:clamp(72px,8vw,120px) 0}
.ue-chronik{position:relative;margin-top:clamp(40px,5vw,72px)}
.ue-chronik__linie{position:absolute;left:0;right:0;top:11px;width:100%;height:4px;overflow:visible}
.ue-chronik__linie path{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.ue-chronik.an .ue-chronik__linie path{animation:sz-zeichnen 2.2s var(--ease-out) .2s forwards}
.ue-chronik__liste{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin:0;padding:0;list-style:none}
.ue-chronik__schritt{
  position:relative;padding-top:44px;
  opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.ue-chronik.an .ue-chronik__schritt{opacity:1;transform:none;transition-delay:calc(var(--d) * 1ms)}
.ue-chronik__knoten{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:#2A1824;box-shadow:inset 0 0 0 2px var(--plum-soft)}
.ue-chronik__knoten i{position:absolute;inset:7px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.ue-chronik.an .ue-chronik__knoten i{transform:scale(1);transition-delay:calc(var(--d) * 1ms + 200ms)}
.ue-chronik__nr{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#FFB38A}
.ue-chronik__schritt h3{margin:10px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.15;letter-spacing:-.025em;color:#fff}
.ue-chronik__schritt p{margin:12px 0 0;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.64;color:rgba(255,255,255,.74)}
.ue-chronik__mauer{display:block;width:100%;height:auto;margin-top:clamp(44px,5vw,72px);max-height:160px}
.uc-stein{fill:rgba(255,255,255,.07);stroke:rgba(201,167,181,.35);stroke-width:1;opacity:0;transform:translateY(-40px);transform-box:fill-box}
.ue-chronik.an .uc-stein{animation:uc-stein .8s cubic-bezier(.3,1.35,.5,1) forwards;animation-delay:calc(var(--d) * 1ms + 1600ms)}
@keyframes uc-stein{to{opacity:1;transform:none}}
@media(max-width:900px){
  .ue-chronik__liste{grid-template-columns:1fr 1fr;row-gap:36px}
  .ue-chronik__linie{display:none}
}
@media(max-width:560px){
  .ue-chronik__liste{grid-template-columns:1fr}
  .ue-chronik__schritt{padding:0 0 0 44px}
  .ue-chronik__knoten{top:2px}
  .ue-chronik__mauer{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){
  .ue-chronik__linie path{stroke-dashoffset:0!important}
  .ue-chronik__schritt,.uc-stein,.org-mitte{opacity:1!important;transform:none!important}
  .ue-chronik__knoten i{transform:none!important}
}

/* ============================================================
   14 · NETZWERK · Stufen und Fluss der Projekte
   ============================================================ */
.nw-stufen{margin:clamp(8px,1.2vw,18px) 0 clamp(28px,3.4vw,48px)}
.nst{display:block;width:100%;height:auto;overflow:visible}
.nst-block{fill:var(--f2);stroke:rgba(112,72,97,.14);stroke-width:1.2;transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.nst-stufe:nth-child(2) .nst-block{fill:#704861;stroke:#704861}
.nst-stufe:nth-child(3) .nst-block{fill:#EDE1E8}
.nst-stufe:nth-child(4) .nst-block{fill:#E3D3DC}
.nst-nr{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;fill:var(--plum);opacity:0}
.nst-name{font-family:var(--sans);font-size:21px;letter-spacing:-.02em;fill:var(--ink);opacity:0}
.nst-stufe:nth-child(2) .nst-nr{fill:#FFD9B8}.nst-stufe:nth-child(2) .nst-name{fill:#fff}
.nw-stufen.an .nst-block{animation:nst-wachsen .9s cubic-bezier(.3,1.25,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.nw-stufen.an .nst-nr,.nw-stufen.an .nst-name{animation:sz-ein .6s ease forwards;animation-delay:calc(var(--d) * 1ms + 450ms)}
@keyframes nst-wachsen{to{transform:none}}
.nst-pfad{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;stroke-linejoin:round}
.nw-stufen.an .nst-pfad{animation:sz-zeichnen 1.6s var(--ease-out) 1.9s forwards}
.nst-licht{fill:var(--orange);opacity:0;filter:drop-shadow(0 0 8px rgba(240,118,47,.7))}
.nw-stufen.an .nst-licht{animation:sz-puls-lauf 4.6s ease-in-out 2s infinite}

.nw-fluss{margin:clamp(8px,1.2vw,18px) 0 clamp(32px,4vw,56px)}
.nfl{display:block;width:100%;height:auto;overflow:visible}
.nfl-chip rect{fill:#fff;stroke:rgba(112,72,97,.16);stroke-width:1.2}
.nfl-chip text{font-family:var(--sans);font-size:16px;fill:var(--ink)}
.nfl-chip{opacity:0;transform:translateY(10px)}
.nw-fluss.an .nfl-chip{animation:nfl-auf .7s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes nfl-auf{to{opacity:1;transform:none}}
.nfl-linie{fill:none;stroke:rgba(112,72,97,.32);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.nw-fluss.an .nfl-linie{animation:sz-zeichnen 1.1s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.nfl-puls{fill:var(--orange);opacity:0}
.nw-fluss.an .nfl-puls{animation:sz-puls-lauf 3s ease-in-out infinite;animation-delay:calc(var(--d) * 1ms)}
.nfl-hub{fill:var(--orange);opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.nw-fluss.an .nfl-hub{animation:sz-auf .6s var(--ease-out) 1s forwards}
.nw-fluss.an .un-haus{animation:un-haus .7s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.nw-fluss .ue-kopfgrafik__legende{justify-content:center}
@media(max-width:700px){
  /* Hochkant: die Treppe entfällt, die vier Karten darunter zeigen dasselbe.
     Der Fluss bleibt lesbar breit und steht beim Laden mittig im Bild. */
  .nw-stufen{display:none}
  .nw-fluss__rolle{overflow-x:auto;margin-inline:-16px;padding:0 16px 6px;scrollbar-width:none}
  .nw-fluss__rolle::-webkit-scrollbar{display:none}
  .nfl{min-width:760px}
}
@media(prefers-reduced-motion:reduce){
  .nst-block,.nst-nr,.nst-name,.nfl-chip,.nfl-hub{opacity:1!important;transform:none!important}
  .nst-pfad,.nfl-linie{stroke-dashoffset:0!important}
  .nst-licht,.nfl-puls{display:none}
}

/* ============================================================
   15 · KARRIERE · Stellenportal
   Aufbau wie bei StepStone und Indeed: Trefferliste links, offene
   Anzeige rechts mit haftendem Kopf, Eckdaten mit Symbolen,
   Bewerben-Knopf, Firmenkarte. Hochkant: Liste oben, Anzeige darunter,
   Bewerben-Leiste haftet am unteren Rand.
   ============================================================ */
.jobs-kopf{padding:calc(var(--nav-h) + clamp(28px,3.4vw,52px)) 0 clamp(26px,3vw,40px);
  background:radial-gradient(80% 90% at 85% 0%,rgba(201,167,181,.3),transparent 62%),linear-gradient(180deg,#fff,var(--f1))}
.jobs-kopf h1{margin-top:10px}
.jobs svg,.job-leiste svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.jobs{padding:clamp(24px,3vw,40px) 0 clamp(64px,7vw,104px);background:var(--f1)}
.jobs__raster{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.jobs__liste{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px}
.jobs__anzahl{margin:0 4px;font-family:var(--sans);font-size:14.5px;color:var(--muted)}
.jobs__anzahl b{color:var(--ink);font-weight:500}
.jobs__liste ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.job-karte{
  position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border-radius:16px;background:#fff;text-decoration:none;color:inherit;
  box-shadow:0 0 0 1px rgba(112,72,97,.12);transition:box-shadow .3s,transform .3s var(--ease-out);
}
.job-karte:hover{box-shadow:0 0 0 1px rgba(112,72,97,.28),0 14px 30px -20px rgba(46,30,40,.35)}
.job-karte[aria-current="true"]{box-shadow:0 0 0 2px var(--plum),0 18px 36px -22px rgba(46,30,40,.4)}
.job-karte[aria-current="true"]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.job-karte:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.job-logo{display:grid;place-items:center;width:72px;height:72px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(112,72,97,.12);padding:6px;flex:none}
.job-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.job-logo--klein{width:56px;height:56px;border-radius:12px;padding:5px}
.job-karte__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.job-karte b{font-family:var(--sans);font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink)}
.job-karte[aria-current="true"] b{color:var(--plum)}
.job-karte__firma{font-family:var(--sans);font-size:14px;color:var(--ink)}
.job-karte__ort{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.job-karte__ort svg{width:14px;height:14px}
.job-karte__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.job-karte__tags i{font-style:normal;padding:3px 9px;border-radius:6px;background:var(--f1);font-family:var(--sans);font-size:12px;color:var(--ink)}
.job-karte__tags i.neu{background:#FFE7D6;color:#8A3A10}
.job-karte__datum{margin-top:6px;font-family:var(--sans);font-size:12px;color:var(--muted)}

.job-firmenkarte{padding:14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(112,72,97,.12)}
.job-firmenkarte .ehaus__rahmen{padding:0;box-shadow:none;border-radius:10px;overflow:hidden}
.job-firmenkarte .ehaus__rahmen img{border-radius:10px;width:100%;height:auto;display:block}
.job-firmenkarte__kopf{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;margin-top:14px}
.job-firmenkarte__kopf b{display:block;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.job-firmenkarte__kopf span{font-family:var(--sans);font-size:13px;color:var(--muted)}
.job-fakten{margin:14px 0 0;display:grid;gap:0}
.job-fakten div{padding:10px 0;border-top:1px solid rgba(112,72,97,.1)}
.job-fakten dt{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink)}
.job-fakten dt svg{width:15px;height:15px;color:var(--plum)}
.job-fakten dd{margin:3px 0 0 22px;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--muted)}
.job-firmenkarte__link{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:14px;color:var(--plum);text-decoration:underline;text-underline-offset:3px}

.job{position:relative;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(112,72,97,.12),0 24px 50px -38px rgba(46,30,40,.35)}
.job + .job{margin-top:22px}
.jobs--js .job + .job{margin-top:0}
.jobs--js .job[hidden]{display:none}
.job-kopf{padding:clamp(20px,2.4vw,30px) clamp(20px,2.8vw,36px);border-bottom:1px solid rgba(112,72,97,.12)}
.job-kopf__oben{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center}
.job-kopf h2{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.job-firma{margin:6px 0 0;font-family:var(--sans);font-size:15px;color:var(--plum);font-weight:500}
.job-firma span{color:var(--muted);font-weight:400}
.job-meta{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.job-meta li{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:14.5px;color:var(--ink)}
.job-meta svg{color:var(--plum)}
.job-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.job-schnell{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13.5px;color:#2E6B45}
.job-inhalt{padding:clamp(22px,2.8vw,36px);max-width:820px}
.job-einleitung{margin:0;font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.7;color:var(--ink)}
.job-teil{margin-top:clamp(26px,3vw,36px)}
.job-teil h3{margin:0 0 12px;font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.job-teil p{margin:0 0 12px;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;color:var(--muted)}
.job-punkte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.job-punkte li{position:relative;padding-left:22px;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--muted)}
.job-punkte li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--plum)}
.job-punkte b{font-weight:600;color:var(--ink)}
.job-punkte b::after{content:": "}
.job-punkte span{font-weight:300}
.job-bewerbung{padding:22px 24px;border-radius:14px;background:var(--f1)}
.job-bewerbung p{margin:0 0 8px}
.job-bewerbung a{color:var(--plum);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.job-bewerbung__frist{display:flex;align-items:center;gap:7px;color:#2E6B45!important;font-size:14.5px!important}
.job-bewerbung__frist svg{width:16px;height:16px}
/* Bewerben-Leiste haftet am unteren Rand, solange die Anzeige im Bild ist (wie bei StepStone) */
.job-leiste{
  position:sticky;bottom:0;z-index:4;display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:12px clamp(16px,2.8vw,36px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid rgba(112,72,97,.14);border-radius:0 0 18px 18px;
  box-shadow:0 -10px 24px -18px rgba(46,30,40,.35)
}
.job-leiste__tel{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;color:var(--plum);box-shadow:inset 0 0 0 1px rgba(112,72,97,.25)}
.job-leiste__tel svg{width:20px;height:20px}
.jobs-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0}
.jobs-chips b,.jobs-chips span{padding:8px 14px;border-radius:999px;font-family:var(--sans);font-size:14px}
.jobs-chips b{background:var(--plum);color:#fff;font-weight:500}
.jobs-chips span{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(112,72,97,.14)}

@media(max-width:1000px){
  .jobs__raster{grid-template-columns:1fr}
  .jobs__liste{position:static}
  .job-firmenkarte{display:none}
  .job-leiste{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .job-leiste .ed-btn{flex:1;justify-content:center}
  .job-aktion .ed-btn{display:none}
}
@media(max-width:560px){
  .jobs-chips b,.jobs-chips span{font-size:13px;padding:7px 12px}
  .job-kopf__oben{grid-template-columns:56px minmax(0,1fr);gap:14px}
  .job-kopf .job-logo{width:56px;height:56px}
  .job-meta{gap:8px 14px}
  .job-meta li{font-size:13.5px}
  .job-bewerbung{padding:18px}
}
html.sparsam .job-leiste{background:#fff}

/* Kontakt: die drei Menschen nebeneinander (Wunsch des Kunden). Rollen
   kurz gehalten („Vorstand", „Geschäftsführer / MEMORO Vorsorge GmbH"),
   damit kein langes Einzelwort in die Nachbarspalte läuft. Ganz schmal
   (unter 560 px) stehen sie untereinander, siehe oben. */
.inv-feld__leute span{overflow-wrap:break-word;hyphens:auto}