/* ============================================================
   Lewandowsky Spektakel-Studie „Die Lieferung"
   Basis-Layout = linearer Dokumentfluss (Mobile, No-JS, Reduced Motion).
   Bühnen-Layout nur unter html.js + min-width 768 + no-preference.
   Endzustand ist CSS-Default; Startzustände setzt JS.
   ============================================================ */

@font-face{
  font-family:'Bebas Neue';
  src:url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/Inter-Variable.ttf') format('truetype-variations');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --grund:#0B0D09;
  --grund2:#10130D;
  --kalk:#F2F0E9;
  --sand:#E7E0D2;
  --zink:#9AA0A4;
  --gruen:#B6D138;
  --gruen2:#8CA61F;
  --linie:rgba(242,240,233,.14);
  --linie2:rgba(242,240,233,.07);
  --font-d:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  overflow-x:clip;
  background:var(--grund);
  color:var(--kalk);
  font-family:var(--font-b);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--gruen2);color:var(--grund)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--gruen);color:var(--grund);padding:.6em 1em;font-weight:700}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- Typo-Bausteine ---------- */
.h1{font-family:var(--font-d);font-weight:400;line-height:.96;letter-spacing:.005em;font-size:clamp(44px,6vw,92px);text-transform:none}
.h1__mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h1__l{display:inline-block}
.h1__l--b{color:var(--sand)}
.h2{font-family:var(--font-d);font-weight:400;line-height:1.02;font-size:clamp(30px,3.4vw,48px)}
.h2--big{font-size:clamp(36px,4.6vw,66px)}
.h2 em,.h2--big em,.out__h em,.abspann__h em{font-style:normal;color:var(--sand)}
.copy{color:var(--zink);font-size:15px;max-width:52ch}
.lead{color:var(--sand);font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:56ch;margin-top:22px}
.eyebrow{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--zink);margin-bottom:18px}
.eyebrow .mark{color:var(--kalk);font-weight:700;display:inline-flex;align-items:center;gap:9px}
.eyebrow .mark::before{content:"";width:20px;height:2px;background:var(--gruen);box-shadow:24px 0 0 -0.5px var(--gruen);border-radius:1px;flex:none;
  background:repeating-linear-gradient(90deg,var(--gruen) 0 5px,transparent 5px 8px);box-shadow:none;height:2px}

/* ---------- Buttons / Draht ---------- */
.btn{display:inline-block;border:1px solid var(--kalk);padding:13px 26px;font-weight:700;font-size:15px;letter-spacing:.02em;transition:background .2s,color .2s}
.btn:hover{background:var(--kalk);color:var(--grund)}
.btn--draht{border-color:var(--gruen);color:var(--gruen)}
.btn--draht:hover{background:var(--gruen);color:var(--grund)}
.draht{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:15px;color:var(--kalk);margin-top:16px}
.draht::before{content:"";width:22px;height:2px;flex:none;border-radius:1px;
  background:repeating-linear-gradient(90deg,var(--gruen) 0 5px,transparent 5px 8px);
  transition:width .25s ease}
.draht:hover::before{width:40px}
.draht span{border-bottom:1px solid var(--linie)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zink);margin-right:7px;vertical-align:baseline}
.dot.is-open{background:var(--gruen);box-shadow:0 0 8px rgba(182,209,56,.55)}

/* ---------- Preloader (nur Bühnen-Modus, JS blendet ein) ---------- */
.pre{display:none;position:fixed;inset:0;z-index:200;background:var(--grund);place-items:center}
.pre__in{text-align:center}
.pre__mark{font-family:var(--font-d);font-size:30px;letter-spacing:.02em}
.pre__route{width:260px;margin:18px auto 10px;display:block;overflow:visible}
.pre__route path{stroke:var(--gruen);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.pre__route circle{fill:var(--gruen)}
.pre__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:20px;
  padding:16px 28px;background:rgba(11,13,9,.92);transition:background .3s,backdrop-filter .3s}
@media (min-width:768px) and (prefers-reduced-motion: no-preference){
  html.js .nav{background:transparent}
  html.js .nav--solid{background:rgba(11,13,9,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.nav__rail{position:absolute;left:0;right:0;top:0;height:2px;background:var(--linie2)}
.nav__rail i{display:block;height:100%;background:var(--gruen);transform:scaleX(0);transform-origin:left center}
.nav__mark{display:flex;align-items:center;flex:0 0 auto}
.nav__mark img{display:block;height:104px;width:auto}
.nav__links{display:flex;gap:18px;margin-left:auto}
.nav__links a{font-size:14px;font-weight:500;color:var(--sand);opacity:.85;transition:opacity .2s}
.nav__links a:hover{opacity:1;color:var(--kalk)}
.nav__draht{display:flex;align-items:center;gap:18px}
.nav__tel{font-weight:700;font-size:14px;color:var(--kalk)}
.nav__cta{border:1px solid var(--gruen);color:var(--gruen);font-size:13.5px;font-weight:700;padding:9px 16px;transition:background .2s,color .2s}
.nav__cta:hover{background:var(--gruen);color:var(--grund)}
/* Die Kopfmarke staffelt sich mit der Fensterbreite; unter 1320 px weichen die Bereichslinks,
   darueber bleibt die Marke so gross, wie der Platz neben Telefon und Knopf es zulaesst */
@media (max-width:1439px){.nav__mark img{height:90px}}
@media (max-width:1319px){.nav__links{display:none}}
@media (max-width:900px){.nav__mark img{height:72px}}
@media (max-width:640px){.nav{gap:12px;padding:13px 14px}.nav__tel{display:none}.nav__mark img{height:46px}}
/* Auf schmalen Handys darf die Marke den Beratungsknopf nicht aus dem Bild draengen */
@media (max-width:400px){.nav__mark img{height:42px}}

/* ---------- gemeinsame Bühnen-Zutaten ---------- */
.stage__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,13,9,.78) 0%,rgba(11,13,9,.30) 26%,rgba(11,13,9,.34) 62%,rgba(11,13,9,.88) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(11,13,9,.55) 100%)}
.stage__lese{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,13,9,.72) 0%,rgba(11,13,9,.28) 26%,transparent 44%),
    linear-gradient(270deg,rgba(11,13,9,.72) 0%,rgba(11,13,9,.25) 22%,transparent 40%),
    linear-gradient(0deg,rgba(11,13,9,.82) 0%,transparent 30%)}

/* =================================================================
   AKT 1 — DIE LADUNG · Basis (linear)
   ================================================================= */
.ladung{position:relative}
.welt{display:none}
.wort{display:none}
.rail{display:none}
.stage__scrim,.stage__lese{display:none}
.beat{padding:64px 20px 26px}
.beat--hero{padding-top:110px}
.beat__foto{margin:0 0 22px;position:relative}
.beat__foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero__meta .hint{display:none}
.panel{margin-top:26px;border:1px solid var(--linie);background:rgba(16,19,13,.85);padding:22px;max-width:420px}
.panel__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink);margin-bottom:10px}
.panel__tel{font-family:var(--font-d);font-size:clamp(24px,5.4vw,30px);display:block;margin-bottom:14px}
.panel__row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:7px 0;border-top:1px solid var(--linie2)}
.panel__row span{color:var(--zink)}
.panel__row b{font-weight:500;text-align:right}
.beat__meta{max-width:560px}
.out__h{font-family:var(--font-d);font-size:clamp(40px,6vw,84px);line-height:1.0}
.beat--out .copy{margin-top:16px}

/* =================================================================
   AKT 2 — DIE TOUR · Basis (linear)
   ================================================================= */
.tour{position:relative;padding:26px 0 8px}
.tw{display:none}
.route{display:none}
.tour__head{padding:38px 20px 8px}
.tour__sub{color:var(--zink);font-size:15px;max-width:60ch;margin-top:14px}
.station{padding:26px 20px}
.station__n{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);font-weight:700;margin-bottom:6px}
.station__t{font-family:var(--font-d);font-weight:400;font-size:clamp(28px,3.4vw,44px);margin-bottom:10px}
.station__foto{margin:14px 0}
.station__foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* =================================================================
   AKT 3 — MATERIALINDEX
   ================================================================= */
.index{position:relative;padding:96px 0 110px;background:
  linear-gradient(180deg,var(--grund) 0%,#0D100B 40%,var(--grund) 100%)}
.index__head{max-width:760px;margin-bottom:44px}
.index__sub{color:var(--zink);margin-top:14px;max-width:52ch}
.index__grid{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start}
.plan{position:sticky;top:96px;border:1px solid var(--linie);padding:18px;background:rgba(16,19,13,.6)}
.plan__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink);margin-bottom:12px}
.plan__foot{font-size:11.5px;color:var(--zink);margin-top:10px}
.plan__bay rect{fill:rgba(242,240,233,.05);stroke:var(--linie);stroke-width:1;transition:fill .25s,stroke .25s}
.plan__bay .plan__t{fill:var(--sand);font-size:12.5px;font-family:var(--font-b)}
.plan__bay .plan__n{fill:var(--zink);font-size:12.5px;font-family:var(--font-b);font-weight:700}
.plan__bay.is-hit rect{fill:rgba(140,166,31,.16);stroke:var(--gruen2)}
.plan__bay.is-hit .plan__n{fill:var(--gruen)}
.plan__bay.is-null{opacity:.35}
.finder__field{position:relative;border-bottom:2px solid var(--kalk);display:flex;align-items:center;gap:14px;padding-bottom:10px}
.finder__lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink)}
#finder-input{flex:1;background:none;border:none;color:var(--kalk);font-family:var(--font-b);font-size:clamp(20px,2vw,28px);font-weight:500;outline:none}
#finder-input::placeholder{color:rgba(154,160,164,.5)}
#finder-input::-webkit-search-cancel-button{display:none}
#finder-clear{background:none;border:1px solid var(--linie);color:var(--zink);font-size:12.5px;padding:6px 12px;cursor:pointer}
#finder-clear:hover{color:var(--kalk);border-color:var(--kalk)}
.finder__chips-lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink);margin:18px 0 0}
.finder__chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 8px}
.finder__chips button{background:none;border:1px solid var(--linie);color:var(--zink);font-size:13px;font-family:var(--font-b);padding:7px 14px;cursor:pointer;transition:all .2s}
.finder__chips button:hover{color:var(--kalk);border-color:var(--kalk)}
.finder__chips button.is-on{background:var(--kalk);color:var(--grund);border-color:var(--kalk);font-weight:700}
.finder__count{font-size:13.5px;color:var(--zink);margin:10px 0 4px}
.finder__count b{color:var(--gruen);font-size:15px}
.finder__results li{display:flex;align-items:baseline;gap:16px;padding:10px 2px;border-bottom:1px solid var(--linie2);font-size:15px}
.finder__results li[hidden]{display:none}
.finder__results .r__t{flex:1;color:var(--sand)}
.finder__results .r__t mark{background:none;color:var(--gruen);font-weight:700}
.finder__results .r__b{font-size:12px;color:var(--zink);white-space:nowrap}
.finder__results .r__a{font-size:12.5px;font-weight:700;color:var(--gruen);opacity:0;transition:opacity .15s;white-space:nowrap}
.finder__results li:hover .r__a,.finder__results .r__a:focus-visible{opacity:1}
.finder__empty{margin-top:34px;border:1px solid var(--linie);padding:28px;max-width:480px}
.finder__empty-h{font-family:var(--font-d);font-size:22px;margin-bottom:8px}
.finder__empty .btn{margin-top:16px}
@media (max-width:900px){.index__grid{grid-template-columns:1fr}.plan{display:none}}
@media (hover:none){.finder__results .r__a{opacity:1}}

/* =================================================================
   AKT 4 — MANNSCHAFT
   ================================================================= */
.crew{position:relative}
.crew__stage{position:relative;min-height:100vh;display:grid;align-content:end;overflow:clip}
.crew__welt{position:absolute;inset:0}
.crew__welt img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.crew .stage__scrim{display:block}
.crew__wort{position:absolute;left:0;right:0;top:7%;text-align:center;font-family:var(--font-d);
  font-size:clamp(64px,11vw,168px);line-height:1;color:rgba(242,240,233,.13);pointer-events:none}
.crew__rand{position:absolute;right:26px;top:110px;writing-mode:vertical-rl;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
  text-shadow:0 1px 8px rgba(0,0,0,.55);pointer-events:none}
.crew__stage{grid-template-columns:minmax(0,1fr);padding:120px 24px 64px}
.crew__meta{position:relative;max-width:560px}
.crew__sub{color:var(--sand);margin-top:14px;max-width:44ch}
.crew__register{position:relative;margin-top:44px;max-width:640px;border:1px solid var(--linie);
  background:rgba(11,13,9,.78);backdrop-filter:blur(6px);padding:26px 28px}
.register__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink);margin-bottom:8px}
.register li{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-top:1px solid var(--linie2)}
.register__n{font-weight:700;font-size:16.5px;min-width:104px}
.register__b{color:var(--zink);font-size:13.5px;flex:1;position:relative}
.register__b::after{content:"";position:absolute;left:calc(100% + 8px);right:8px;bottom:.35em;border-bottom:1px dotted rgba(154,160,164,.4)}
.register li{position:relative}
.register__d{font-size:13.5px;font-weight:500;color:var(--sand);white-space:nowrap}
.register__d:hover{color:var(--gruen)}
.register__gf{display:flex;justify-content:space-between;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linie);font-size:13.5px}
.register__gf span{color:var(--zink)}
/* Randzeile steht rechts im Bild: Textspalte hält Abstand, solange sie die volle Breite nutzt */
@media (max-width:640px){
  .crew__meta{padding-right:30px}
}
/* Schmale Handys: Durchwahl darf in die nächste Zeile, sonst sprengt das Register die Spalte */
@media (max-width:480px){
  .crew__register{padding:22px 20px}
  .register li{flex-wrap:wrap;column-gap:12px;row-gap:2px}
  .register__n{min-width:0}
  .register__b::after{display:none}
  .register__d{margin-left:auto}
}
@media (min-width:1000px){
  .crew__stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
  .crew__register{margin-top:0;justify-self:end;width:min(560px,100%)}
}

.momente{padding:8px 0 0}
.momente__grid{display:grid;gap:8px;grid-template-columns:1fr}
.mom{position:relative;overflow:clip}
.mom img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* Einblicke „Unser Lager in Mayen" — übernommen aus V9 „Aufbau" (horizontale Kamerafahrt) */
.halle{position:relative;background:var(--grund)}
.halle__stage{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding:5rem 0}
.halle__track{display:flex;gap:1rem;padding-left:max(4vw,calc((100vw - 1240px)/2));overflow-x:auto;will-change:transform;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.halle__track figure{flex:none;width:min(76vw,340px);scroll-snap-align:start}
.halle__track img{width:100%;height:44vh;object-fit:cover;filter:brightness(.86) saturate(.98)}
.halle__track figcaption{margin-top:.55rem;font-family:var(--font-b);font-weight:500;font-size:12.5px;color:var(--zink);font-variant-numeric:tabular-nums}
@media (min-width:768px){
  .halle__stage.is-stage{height:100svh;padding:0}
  .halle__stage.is-stage .halle__track{overflow-x:visible;scroll-snap-type:none}
  .halle__stage.is-stage .halle__track figure{width:clamp(240px,26vw,400px)}
  .halle__stage.is-stage .halle__track img{height:66vh}
}
.mom figcaption{position:absolute;left:18px;bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kalk);display:flex;align-items:center;gap:9px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.mom figcaption::before{content:"";width:14px;height:2px;background:repeating-linear-gradient(90deg,var(--gruen) 0 4px,transparent 4px 7px)}
@media (min-width:768px){
  /* 4-Momente-Mosaik nach V9-Vorbild (12-Spalten-Raster) */
  .momente__grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:11vh;gap:clamp(.6rem,1.2vw,1.1rem)}
  .mom--a{grid-column:1 / 5;grid-row:1 / 7}
  .mom--b{grid-column:5 / 13;grid-row:1 / 4}
  .mom--c{grid-column:5 / 8;grid-row:4 / 7}
  .mom--d{grid-column:8 / 13;grid-row:4 / 7}
  .mom img{aspect-ratio:auto;height:100%}
}

/* =================================================================
   AKT 5 — DAMALS WIE HEUTE
   ================================================================= */
.haus{position:relative;padding:110px 0;background:var(--grund);overflow:clip}
.vanta{position:absolute;inset:0;pointer-events:none;opacity:.5}
.vanta canvas{position:absolute;inset:0}
.haus__in{position:relative}
.haus__head{max-width:820px;margin-bottom:52px}
.haus__grid{display:grid;grid-template-columns:1fr;gap:48px}
.blatt{border:1px solid var(--linie);background:rgba(16,19,13,.82);padding:26px;align-self:start}
.blatt__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zink);margin-bottom:12px}
.blatt__dl div{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-top:1px solid var(--linie2);font-size:14px}
.blatt__dl dt{color:var(--zink)}
.blatt__dl dd{font-weight:500;text-align:right}
.blatt__fig{margin-top:20px}
.blatt__fig img{width:100%}
.blatt__fig figcaption{font-size:12px;color:var(--zink);margin-top:8px}
.haus__lead{font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--sand);margin-bottom:18px}
.haus__text > p{margin-bottom:16px;color:var(--zink);max-width:64ch}
.haltung{margin-top:38px;display:grid;gap:26px}
.haltung__k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);font-weight:700;margin-bottom:6px}
.haltung h3{font-family:var(--font-d);font-weight:400;font-size:22px;margin-bottom:6px}
@media (min-width:960px){.haus__grid{grid-template-columns:360px 1fr}}

/* =================================================================
   AKT 6 — PARTNER + KARRIERE
   ================================================================= */
.partner{position:relative;padding:100px 0;background:var(--grund2);overflow:clip}
.partner .vanta{opacity:.34}
.partner__in{position:relative}
.partner__head{max-width:720px;margin-bottom:40px}
.partner__head .copy{margin-top:12px}
.wand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.wand li{display:flex;align-items:center;justify-content:center;min-height:104px;
  border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:26px 30px;transition:background .25s}
/* Echte Markenlogos, weiß-monochrom auf dunkler Bühne (Muster aus V9 style.css) */
.wand li img{max-width:min(150px,100%);max-height:44px;width:auto;height:auto;
  filter:brightness(0) invert(1);opacity:.8;transition:opacity .25s}
.wand li:hover{background:rgba(242,240,233,.03)}
.wand li:hover img{opacity:1}
/* Ungerade Anzahl: letzte Zelle füllt die Reihe, sonst bleibt ein offenes Rasterfeld */
.wand li:last-child:nth-child(2n+1){grid-column:1/-1}
@media (min-width:820px){.wand{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wand li:last-child:nth-child(2n+1){grid-column:auto}
  .wand li:last-child:nth-child(4n+1){grid-column:1/-1}
  /* Rest 2 auf dem Desktop: die letzten beiden Zellen teilen sich die Reihe */
  .wand li:nth-last-child(2):nth-child(4n+1){grid-column:span 2}
  .wand li:last-child:nth-child(4n+2){grid-column:span 2}}
.job__grid{display:grid;grid-template-columns:1fr;gap:44px;margin-top:88px}
.job__text{color:var(--zink);max-width:46ch;margin-top:14px;margin-bottom:8px}
.job__karte{border:1px solid var(--linie);background:rgba(11,13,9,.72);padding:28px;align-self:start}
.job__tag{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);border:1px solid rgba(140,166,31,.45);padding:5px 10px;margin-bottom:14px}
.job__karte h3{font-family:var(--font-d);font-weight:400;font-size:24px;margin-bottom:14px}
.job__karte dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--linie2);font-size:14px}
.job__karte dt{color:var(--zink)}
@media (min-width:900px){.job__grid{grid-template-columns:1fr 420px}}

/* =================================================================
   AKT 7 — DIE ÜBERGABE (Abspann)
   ================================================================= */
.abspann{position:relative;padding:130px 0 110px;overflow:clip;background:var(--grund)}
.abspann .vanta{opacity:.6}
.abspann__in{position:relative;text-align:center;max-width:900px}
.abspann__route{width:min(640px,86%);margin:0 auto 34px;display:block;overflow:visible}
.abspann__l{stroke:var(--gruen);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.abspann__ziel circle{fill:var(--gruen)}
.abspann__ziel .ring{fill:none;stroke:var(--gruen);stroke-width:1.5;opacity:.5}
.abspann .eyebrow{justify-content:center}
.abspann__h{font-family:var(--font-d);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.05;margin-bottom:16px}
.abspann__pre{color:var(--zink);max-width:52ch;margin:0 auto}
.abspann__tel{display:inline-block;font-family:var(--font-d);font-size:clamp(52px,8.4vw,128px);line-height:1;margin:44px 0 40px;
  transition:color .2s}
.abspann__tel:hover{color:var(--gruen)}
.abspann__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px;text-align:left;max-width:820px;margin:0 auto 44px}
.abspann__grid span{display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--zink);margin-bottom:7px}
.abspann__grid a{font-weight:500}
.abspann__grid a:hover{color:var(--gruen)}
.abspann__grid p{font-size:14.5px;color:var(--sand)}
.stat{font-style:normal;font-size:13px;color:var(--zink);display:inline-flex;align-items:center;margin-top:4px}
@media (min-width:760px){.abspann__grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--linie);padding:30px 0 40px;background:var(--grund)}
.foot__in{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between}
.foot__mark{font-family:var(--font-d);font-size:17px}
.foot__adr{font-size:13px;color:var(--zink)}
.foot__adr a{color:var(--sand)}
.foot__note{font-size:12.5px;color:var(--zink);letter-spacing:.06em;border:1px solid var(--linie);padding:5px 12px}
/* Ersteller-Hinweis: eigene Schlusszeile, bewusst leiser als der übrige Footer */
.foot__von{flex-basis:100%;margin-top:12px;padding-top:14px;border-top:1px solid var(--linie);
  font-size:12px;letter-spacing:.06em;color:var(--zink);display:flex;align-items:center;justify-content:flex-end}
.foot__von a{display:inline-flex;align-items:center;gap:6px;margin-left:6px;color:var(--sand);position:relative}
.foot__von a::after{content:"";position:absolute;inset:-14px -8px}
.foot__von img{width:16px;height:16px;display:block}
.foot__von a:hover{color:var(--gruen)}
@media (max-width:640px){.foot__von{justify-content:flex-start}}

/* =================================================================
   BÜHNEN-MODUS — Desktop, JS, volle Bewegung
   ================================================================= */
@media (min-width:768px) and (prefers-reduced-motion: no-preference){

  /* ----- Akt 1: Die Ladung als gepinnte Bühne ----- */
  html.js .ladung{height:100vh}
  html.js .ladung__stage{position:relative;height:100vh;overflow:clip}
  html.js .welt{display:block;position:absolute;inset:0;overflow:clip}
  html.js .welt[data-b="1"]{z-index:2}
  html.js .welt[data-b="2"]{z-index:3}
  html.js .welt[data-b="3"]{z-index:4}
  html.js .welt[data-b="4"]{z-index:5}
  html.js .welt[data-b="5"]{z-index:6}
  html.js .welt[data-b="6"]{z-index:7}
  html.js .welt[data-b="7"]{z-index:8}
  html.js .welt__wrap{position:absolute;inset:0;overflow:clip}
  html.js .welt__wrap img{width:100%;height:100%;object-fit:cover}
  html.js .ladung .stage__scrim{display:block;z-index:10}
  html.js .wort{display:block;position:absolute;left:0;right:0;top:17%;z-index:20;text-align:center;
    font-family:var(--font-d);font-size:12.5vw;line-height:1;color:rgba(242,240,233,.94);
    letter-spacing:.01em;will-change:transform,opacity;pointer-events:none}
  html.js .wort--lang{font-size:10.2vw;top:19%}
  html.js .wort--xlang{font-size:8.6vw;top:21%}
  html.js .ladung .stage__lese{display:block;z-index:35}
  html.js .rail{display:block;position:absolute;left:44px;top:50%;transform:translateY(-50%);z-index:45;width:172px}
  html.js .rail li{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;gap:8px;
    padding:7px 0;border-top:1px solid var(--linie2);font-size:12.5px;opacity:.38}
  html.js .rail li i{font-style:normal;color:var(--zink);font-weight:500;font-size:11px}
  html.js .rail li span{color:var(--sand);font-weight:500;white-space:nowrap}
  html.js .rail li b{color:var(--zink);font-weight:700}
  html.js .rail li.rail__sum{border-top:2px solid var(--linie);margin-top:4px;padding-top:10px;opacity:1}
  html.js .rail li.rail__sum b{color:var(--gruen)}
  html.js .beat{position:absolute;inset:0;z-index:40;padding:0;pointer-events:none}
  html.js .beat > *{pointer-events:auto}
  html.js .beat__foto{display:none}
  html.js .hero__meta{position:absolute;left:64px;top:19vh;max-width:min(660px,47vw)}
  html.js .hero__meta .hint{display:flex;align-items:center;gap:10px;margin-top:40px;font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--zink)}
  html.js .hero__meta .hint::before{content:"";width:34px;height:2px;
    background:repeating-linear-gradient(90deg,var(--gruen) 0 5px,transparent 5px 8px)}
  html.js .panel{position:absolute;right:48px;top:19vh;width:332px;margin:0}
  html.js .beat__meta{position:absolute;left:240px;bottom:60px;max-width:470px}
  html.js .beat__meta .eyebrow{margin-bottom:12px}
  html.js .beat__meta .copy{max-width:44ch}
  html.js .beat--out .beat__meta--out{left:64px;bottom:auto;top:24vh;max-width:560px}

  /* ----- Akt 2: Die Tour ----- */
  html.js .tour{height:100vh;padding:0}
  html.js .tour__stage{position:relative;height:100vh;overflow:clip}
  html.js .tw{display:block;position:absolute;inset:0;overflow:clip}
  html.js .tw[data-s="2"]{z-index:2}
  html.js .tw[data-s="3"]{z-index:3}
  html.js .tw__wrap{position:absolute;inset:0;overflow:clip}
  html.js .tw__wrap img{width:100%;height:100%;object-fit:cover}
  html.js .tw::before{content:"";position:absolute;inset:0 auto 0 0;width:70px;z-index:2;
    background:linear-gradient(90deg,rgba(11,13,9,.5),transparent)}
  html.js .tour .stage__scrim{display:block;z-index:10}
  html.js .tour .stage__lese{display:block;z-index:11}
  html.js .route{display:block;position:absolute;left:0;right:0;bottom:110px;z-index:20;width:100%;height:90px}
  html.js .route__l{stroke:var(--gruen);stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round;opacity:.9}
  html.js .route__st circle{fill:var(--gruen)}
  html.js .route__st .route__puls{fill:none;stroke:var(--gruen);stroke-width:1.5;opacity:.45}
  html.js .tour__head{position:absolute;left:64px;top:12vh;z-index:30;max-width:760px;padding:0}
  html.js .tour__sub{max-width:56ch}
  html.js .station{position:absolute;left:64px;bottom:170px;z-index:30;max-width:470px;padding:0}
  html.js .station__foto{display:none}

  /* ----- ruhige Akte: Feinschliff ----- */
  html.js .crew__rand{right:-58px}
}

/* =================================================================
   KARRIERE — eigene Sektion nach der Mannschaft (Michael, 07.09.)
   ================================================================= */
.karriere{position:relative;padding:110px 0 120px;background:var(--grund);overflow:clip}
.karriere__in{position:relative}
.karriere .job__grid{margin-top:0}
.job__cta{font-family:var(--font-d);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.15;max-width:22ch;margin-top:30px;color:var(--kalk)}
.job__btns{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:26px}
.job__btns .draht{margin-top:0}

/* Register mit acht Zeilen: kompakter, damit die GF-Zeile im Viewport bleibt */
@media (min-width:1000px){
  .crew__register{padding:20px 26px}
  .register li{padding:6px 0}
  .register__n{font-size:15.5px;min-width:98px}
  .register__gf{margin-top:10px;padding-top:10px}
}

/* Ansprechpartner: Porträtreihe unter der Mannschaft */
.team{padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px)}
.team__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
.team__karte{display:flex;flex-direction:column}
.team__foto{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid var(--linie);margin-bottom:14px}
.team__n{font-family:var(--font-b);font-weight:700;font-size:17px;color:var(--kalk)}
.team__b{color:var(--zink);font-size:13.5px;margin-top:2px}
.team__d{margin-top:auto;padding-top:8px;color:var(--sand);font-size:14px;font-weight:500;border-bottom:1px solid var(--linie);align-self:flex-start;transition:color .2s,border-color .2s}
.team__d:hover{color:var(--gruen);border-color:var(--gruen)}
@media (min-width:640px){
  .team__grid{grid-template-columns:repeat(3,1fr);gap:36px 20px}
}

/* =================================================================
   BERATUNGSDIALOG
   ================================================================= */
.beratung{
  width:min(520px,calc(100% - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
  margin:auto;
  padding:32px;
  background:var(--grund2);
  border:1px solid var(--linie);
  color:var(--kalk);
  font-family:var(--font-b);
  /* Kein position-Override: showModal legt den Dialog fixed in den Top Layer */
  position:fixed;inset:0;
}
@media (max-width:520px){.beratung{padding:22px}}
.beratung::backdrop{background:rgba(11,13,9,.78)}
.beratung__zu{
  position:absolute;top:14px;right:14px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--linie);color:var(--kalk);
  font-size:20px;line-height:1;cursor:pointer;font-family:inherit;
}
.beratung__zu:hover{border-color:var(--gruen);color:var(--gruen)}
.beratung__h{
  font-family:var(--font-d);font-weight:400;line-height:1.02;
  font-size:clamp(30px,6vw,40px);margin-top:12px;padding-right:44px;
}
.beratung__lead{color:var(--zink);font-size:14.5px;margin-top:12px;max-width:44ch}
.beratung__form{margin-top:26px}
.beratung__feld{margin-bottom:17px}
.beratung__feld label{
  display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zink);margin-bottom:8px;
}
.beratung__feld input{
  width:100%;background:rgba(242,240,233,.03);border:1px solid var(--linie);
  color:var(--kalk);font:inherit;font-size:16px;padding:12px 14px;border-radius:0;
}
.beratung__feld input:focus-visible{border-color:var(--gruen2)}
.beratung__feld input:user-invalid{border-color:#C4544A}
.beratung__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.beratung__ds{color:var(--zink);font-size:13px;margin-top:4px;margin-bottom:22px}
.beratung__ds a{border-bottom:1px solid var(--linie)}
.beratung__ds a:hover{color:var(--gruen);border-color:var(--gruen)}
.beratung__senden{width:100%;text-align:center;background:none;font-family:inherit;cursor:pointer}
.beratung__senden[disabled]{opacity:.6;cursor:wait}
.beratung__status{font-size:14px;margin-top:16px;color:var(--sand)}
.beratung__status a{color:var(--gruen);border-bottom:1px solid var(--linie)}
.beratung__status a:hover{border-color:var(--gruen)}
.beratung__ok{margin-top:26px}
.beratung__ok p{color:var(--sand);font-size:16px;margin-bottom:18px}
.beratung__ok .btn{background:none;font-family:inherit;cursor:pointer}
@media (min-width:1000px){
  .team__grid{grid-template-columns:repeat(5,1fr);gap:24px}
}

/* Touch: unsichtbar vergrößerte Tippflächen (mind. ca. 44 px), Optik unverändert */
@media (hover:none){
  .draht,.register__d,.team__d{position:relative}
  .draht::after,.register__d::after,.team__d::after{content:"";position:absolute;inset:-10px -4px}
}