/* =========================================================================
   HARTMANN TRANSPORT
   Umsetzung nach "Technische Umsetzung – FINAL".
   Leitsatz §23: Die Website wird nicht aus Komponenten zusammengesetzt,
   sondern wie eine digitale Editorial-Strecke inszeniert.

   Bewusst NICHT enthalten (§1, §5, §23): Iconboxen, Feature-Cards,
   Kachelraster, Kennzahlenband, Pill-Buttons, Mitarbeiter-Cards,
   Kontaktboxen, überflüssige Container.
   ========================================================================= */

/* ---------- 1. Fonts ---------------------------------------------------- */
@font-face{font-family:"Oswald";src:url("../fonts/oswald-var.woff2") format("woff2-variations"),url("../fonts/oswald-var.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Tokens (§2) ---------------------------------------------- */
:root{
  --o:#ee7c1f;               /* Hartmann-Orange – nur Akzent, nie Fläche */
  --o-hi:#ff9647;
  --o-lo:#c9600d;

  --ink-950:#07090c;
  --ink-900:#0b0f13;
  --ink-850:#0f151b;
  --ink-800:#131a21;

  --fg:#ffffff;
  --fg-soft:#c8d1d9;
  --fg-mut:#8d99a4;
  --line:rgba(255,255,255,.13);
  --line-fine:rgba(255,255,255,.08);

  --f-disp:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1340px;
  --gut:clamp(22px,5.6vw,80px);
  --edge:max(var(--gut),calc((100vw - var(--wrap))/2));
  --hd-h:clamp(66px,6.4vw,100px);

  /* Negativraum ist Gestaltungsmittel (§14, §23) */
  --sec:clamp(84px,11.5vw,190px);

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. Reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-900);color:var(--fg);
  font-family:var(--f-body);font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.66;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:600;line-height:1.02;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--o);outline-offset:4px}
::selection{background:var(--o);color:#fff}

/* Flächenfüllende Bildcontainer: <picture> reicht die Höhe durch */
.fill picture,.fill>span,.fill img{display:block;width:100%;height:100%}
.fill img{object-fit:cover}

/* ---------- 4. Raster & Typografie -------------------------------------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.sec{position:relative;padding-block:var(--sec)}
.sec--dark{background:var(--ink-850)}
.sec--deep{background:var(--ink-900)}
.sec--top{padding-top:calc(var(--hd-h) + var(--sec)*.55)}

/* Kleine Vorzeile – Orange, nur Text, keine Box */
.kicker{
  font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--o);margin:0 0 clamp(18px,2.2vw,30px)
}
.kicker--mut{color:var(--fg-mut)}

.h-xl{font-size:clamp(3rem,10.5vw,8rem);font-weight:700;text-transform:uppercase;line-height:.86;letter-spacing:-.012em}
.h-lg{font-size:clamp(2.1rem,5.6vw,4.6rem);font-weight:600;text-transform:uppercase;line-height:.98;letter-spacing:-.006em}
.h-md{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:600;line-height:1.04}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:600;line-height:1.16}
.lead{color:var(--fg-soft);font-size:clamp(1.02rem,.55vw + .9rem,1.22rem);max-width:54ch;line-height:1.62}
.lead+.lead{margin-top:1.1em}
.mut{color:var(--fg-mut)}
.o{color:var(--o)}

/* Editorial-Kopf: Headline links, ruhiger Fließtext rechts */
.split-head{display:grid;gap:clamp(22px,3.4vw,64px);grid-template-columns:1fr;align-items:end}
@media(min-width:920px){.split-head{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

/* ---------- 5. CTA + Textlinks (§4, §16) -------------------------------- */
.cta{
  display:inline-flex;align-items:center;gap:.85em;
  padding:1.15em 2em;border-radius:6px;                 /* leicht gerundet, kein Pill */
  background:var(--o);color:#fff;border:0;cursor:pointer;
  font-family:var(--f-body);font-weight:700;font-size:.87rem;
  letter-spacing:.15em;text-transform:uppercase;line-height:1;
  transition:background-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
  box-shadow:0 12px 30px -14px rgba(238,124,31,.7)
}
.cta .arw{width:26px;height:10px}
.cta:hover{background:var(--o-lo);transform:translateY(-2px);box-shadow:0 18px 38px -16px rgba(238,124,31,.8)}
.cta:hover .arw{transform:translateX(6px)}
.cta:active{transform:translateY(0)}

/* Sekundär: reine Textlinks, keine Rahmen, keine Icons */
.lnk{
  position:relative;display:inline-block;padding:0 0 .35em;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-soft);transition:color .3s
}
.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--o);transition:right .4s var(--ease)}
.lnk:hover{color:#fff}
.lnk:hover::after{right:0}
.lnk--big{font-size:.92rem}

/* Trennstriche zwischen Textlinks */
.lnk-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em clamp(16px,2vw,30px)}
.lnk-row li{position:relative}
.lnk-row li+li::before{
  content:"";position:absolute;left:calc(clamp(16px,2vw,30px)/-2);top:.15em;bottom:.45em;
  width:1px;background:var(--line)
}
@media(max-width:479px){.lnk-row li+li::before{display:none}}

/* Linienpfeil – Bestandteil der Vorgabe, kein Zierelement */
.arw{display:inline-block;width:1.85em;height:.66em;flex:none;
  transition:transform .34s var(--ease)}

/* ---------- 6. Header (§3) ---------------------------------------------- */
.hd{
  position:fixed;inset:0 0 auto;z-index:80;padding-block:clamp(16px,1.7vw,26px);
  transition:background-color .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease)
}
.hd__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px)}
.hd.is-stuck{
  background:rgba(8,11,15,.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-fine);padding-block:11px
}

/* Logo oben RECHTS – §3, nicht links, nicht mittig */
.brand{
  display:inline-flex;align-items:center;gap:.6em;color:var(--fg);margin-left:auto;
  font-size:clamp(14px,1.15vw,18px);line-height:1;flex:none;
  transition:opacity .3s,font-size .45s var(--ease)
}
.hd.is-stuck .brand{font-size:clamp(13px,1vw,16px)}
.brand:hover{opacity:.82}
.brand__mark{width:auto;height:2.35em;flex:none}
.brand__wm{display:grid;gap:.06em;font-family:var(--f-body);font-weight:700;text-transform:uppercase;line-height:.96}
.brand__l1{letter-spacing:.015em;color:var(--o)}
.brand__l2{letter-spacing:-.012em;color:currentColor}
.brand--sm{font-size:clamp(13px,1vw,15px)}

/* Navigation links davon */
.nav{display:none;gap:clamp(16px,2.1vw,34px);align-items:center}
@media(min-width:1060px){.nav{display:flex}}
.nav a{
  position:relative;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-soft);padding:.4em 0;transition:color .28s
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--o);transition:right .38s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--o)}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;flex:none}
.burger span{display:block;height:1.5px;background:#fff;transition:transform .38s var(--ease),opacity .2s,width .38s var(--ease)}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger span:nth-child(3){width:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:26px}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* §3: Auf Desktop zeigt der Header die Navigation – dann KEIN Burger daneben.
   Diese Regel muss nach dem Basisblock stehen: Media Queries erhöhen die
   Spezifität nicht, bei Gleichstand gewinnt die spätere Regel. */
@media(min-width:1060px){.burger{display:none}}

/* Overlaymenü – rein typografisch */
.menu{
  position:fixed;inset:0;z-index:79;background:rgba(7,9,12,.98);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:grid;align-content:center;padding:calc(var(--hd-h) + 24px) var(--gut) 48px;
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s
}
.menu[data-open]{opacity:1;visibility:visible}
.menu__grid{width:min(100%,var(--wrap));margin-inline:auto;display:grid;gap:clamp(30px,4vw,70px);grid-template-columns:1fr}
@media(min-width:860px){.menu__grid{grid-template-columns:1.25fr .75fr}}
.menu__list li{border-bottom:1px solid var(--line-fine)}
.menu__list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  font-family:var(--f-disp);font-size:clamp(1.5rem,4.4vw,2.5rem);font-weight:500;
  text-transform:uppercase;padding:.4em 0;transition:color .3s,padding-left .35s var(--ease)
}
.menu__list a:hover{color:var(--o);padding-left:.2em}
.menu__no{font-family:var(--f-body);font-size:.66rem;letter-spacing:.22em;color:var(--fg-mut)}
.menu__side{align-self:center;display:grid;gap:20px;color:var(--fg-soft);font-size:.95rem}
.menu__side dt{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--o);margin-bottom:.4em}
.menu__side dd{margin:0}
body.is-locked{overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--o);color:#fff;padding:12px 20px;font-weight:600}
.skip:focus{left:0}

/* ---------- 7. Hero (§4, §19) ------------------------------------------- */
/* Mobil eigenständig komponiert: Headline -> Bild -> Sub -> CTA -> Textlinks.
   Desktop: Bild als vollflächige Bühne, Text links darüber. */
.hero{position:relative;isolation:isolate;overflow:clip;background:var(--ink-950)}
.hero__grid{
  position:relative;width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  padding-top:calc(var(--hd-h) + clamp(18px,4vw,40px));padding-bottom:clamp(52px,9vw,86px)
}
.hero__h1{margin-bottom:clamp(22px,4vw,34px)}

/* Mobil: Bild als eigenständiges, randlos laufendes Element */
.hero__media{
  position:relative;margin:0 calc(var(--gut)*-1) clamp(26px,5vw,38px);
  aspect-ratio:1/.86;overflow:hidden
}
.hero__media img{object-position:52% 54%}
.hero__sub{color:#e8eef3;font-size:clamp(1.08rem,3.4vw,1.3rem);line-height:1.42;max-width:24ch;margin-bottom:clamp(26px,4.5vw,38px)}
.hero__cta{margin-bottom:clamp(26px,4vw,36px)}
.hero__links{margin:0}

@media(min-width:860px){
  .hero{display:flex;align-items:flex-end;min-height:100svh}
  /* static, damit das absolut gesetzte Bild die volle Sektionsbreite bekommt */
  .hero__grid{position:static;padding-top:calc(var(--hd-h) + 8vh);padding-bottom:clamp(64px,9vh,120px)}
  .hero__co{max-width:min(100%,58ch)}
  /* Bild wird zur ganzflächigen Bühne, LKW dominant und angeschnitten */
  .hero__media{position:absolute;inset:0;margin:0;aspect-ratio:auto;z-index:-2;width:100%;height:100%}
  .hero__media img{
    object-position:58% 60%;transform-origin:62% 60%;
    animation:heroDrift 30s var(--slow) forwards
  }
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(95deg,rgba(7,9,12,.93) 0%,rgba(7,9,12,.76) 30%,rgba(7,9,12,.14) 62%,rgba(7,9,12,.30) 100%),
      linear-gradient(to bottom,rgba(7,9,12,.72) 0%,rgba(7,9,12,0) 30%,rgba(7,9,12,0) 52%,rgba(7,9,12,.80) 100%)
  }
  .hero__sub{max-width:30ch;font-size:clamp(1.15rem,1.35vw,1.45rem)}
}
@keyframes heroDrift{from{transform:scale(1.24)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none}
}

/* Startseiten-Hero: Dom-Motiv im Abendlicht. Der Zug reicht im Foto fast bis an
   die Unterkante, deshalb wird der Ausschnitt nach unten verankert und der
   Zoom-Drift des Standard-Heros hier abgeschaltet - sonst werden die Raeder
   angeschnitten. */
.hero__media--dom img{object-position:50% 55%}
@media(min-width:860px){
  .hero__media--dom img{object-position:50% 86%;animation:none;transform:none}
}

.hero__tag{margin-bottom:clamp(12px,1.6vw,18px);font-size:.8rem;letter-spacing:.2em}
.ft__tag{margin-top:1em;font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--o)}

/* ---------- 8. Geschichte (§6, §7) -------------------------------------- */
.story{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(96px,13vw,200px)}
.story__media{position:absolute;inset:-10% 0;z-index:-2}
.story__media img{object-position:50% 58%}
.story::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(97deg,rgba(7,9,12,.92) 0%,rgba(7,9,12,.72) 40%,rgba(7,9,12,.22) 74%,rgba(7,9,12,.40) 100%),
    linear-gradient(to bottom,rgba(7,9,12,.60) 0%,rgba(7,9,12,0) 24%,rgba(7,9,12,.66) 100%)
}

/* Historie: große Jahreszahlen, dezente Linien, viel Abstand – keine Karten */
.years{margin-top:clamp(56px,8vw,110px)}
.years li{position:relative;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line-fine)}
.years li:last-child{border-bottom:1px solid var(--line-fine)}
.years b{
  display:block;font-family:var(--f-disp);font-weight:600;color:var(--o);
  font-size:clamp(2rem,6vw,3.1rem);line-height:.9;margin-bottom:.35em;letter-spacing:-.01em
}
.years p{color:var(--fg-soft);font-size:1rem;max-width:38ch;line-height:1.55}
@media(min-width:880px){
  .years ol{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(24px,3vw,48px)}
  .years li,.years li:last-child{border-bottom:0}
  .years li{padding-top:clamp(26px,2.6vw,38px)}
  .years li::before{content:"";position:absolute;left:0;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--o)}
}

/* ---------- 9. Leistungen als Editorial-Index (§8) ---------------------- */
/* Große horizontale Zeilen statt Kachelraster. */
.index{margin-top:clamp(48px,6.5vw,96px);border-top:1px solid var(--line-fine)}
.idx{position:relative;display:block;overflow:hidden;border-bottom:1px solid var(--line-fine);isolation:isolate}

/* Mobil: Bild liegt hinter der Zeile, deutlich sichtbar, links abgedunkelt */
.idx__bg{position:absolute;inset:0;z-index:-2;opacity:.40;transition:opacity .8s var(--slow)}
.idx__bg img{object-position:var(--pos,50% 45%);transform:scale(1.04);transition:transform 1.6s var(--slow)}
.idx::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,15,19,.94) 0%,rgba(11,15,19,.86) 40%,
                                    rgba(11,15,19,.62) 78%,rgba(11,15,19,.44) 100%)
}
.idx__in{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:clamp(14px,2.4vw,40px);padding:clamp(30px,5vw,58px) 0;
  min-height:clamp(150px,19vw,250px);align-content:center;
  transition:padding-left .55s var(--ease)
}
.idx__no{font-family:var(--f-disp);font-weight:500;font-size:clamp(.8rem,1.05vw,.95rem);
  letter-spacing:.16em;color:var(--o);padding-top:.7em}
.idx__t{display:block;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.5rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.008em;
  text-shadow:0 2px 18px rgba(7,9,12,.55)}
.idx__s{display:block;margin-top:.7em;font-family:var(--f-body);font-size:.98rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg-soft);
  max-width:38ch;line-height:1.5;text-shadow:0 1px 12px rgba(7,9,12,.6)}
.idx__a{display:flex;align-items:center;color:var(--o);padding-top:.5em;
  transition:transform .45s var(--ease)}
.idx__a .arw{width:clamp(30px,3vw,44px);height:auto;transition:none}

@media(min-width:860px){
  /* Desktop: Bild als eigene Fläche rechts, links weich in die Typografie auslaufend */
  .idx__bg{left:34%;opacity:.78}
  .idx::after{
    background:linear-gradient(90deg,#0b0f13 0%,#0b0f13 32%,rgba(11,15,19,.90) 44%,
                                     rgba(11,15,19,.55) 64%,rgba(11,15,19,.14) 100%)
  }
  .idx__t,.idx__s{text-shadow:none}
  .idx:hover .idx__in{padding-left:clamp(10px,1.4vw,22px)}
}

.idx:hover .idx__bg{opacity:1}
.idx:hover .idx__bg img{transform:scale(1)}
.idx:hover .idx__a{transform:translateX(12px)}

/* ---------- 10. Unternehmensaussagen (§11) ------------------------------ */
/* Große Aussagen zwischen Bildern – ausdrücklich keine Icon+Zahl+Text-Boxen. */
.stmt{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,64px);align-items:center}
.stmt+.stmt{margin-top:clamp(72px,10vw,150px)}
.stmt__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.stmt__media img{transition:transform 1.8s var(--slow)}
.stmt:hover .stmt__media img{transform:scale(1.045)}
.stmt h2{font-size:clamp(1.9rem,4.6vw,3.6rem);text-transform:uppercase;line-height:.98}
.stmt h2 .o{display:block}
.stmt p{margin-top:1.1em}
@media(min-width:920px){
  .stmt{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5.5vw,90px)}
  .stmt--rev{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .stmt--rev .stmt__media{order:2}
  /* Asymmetrie: Bilder brechen wechselseitig aus dem Satzspiegel aus */
  .stmt__media{aspect-ratio:5/4;margin-left:calc(var(--edge)*-1)}
  .stmt--rev .stmt__media{margin-left:0;margin-right:calc(var(--edge)*-1)}
}

/* ---------- 11. Karriere (§12) ------------------------------------------ */
.career{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(84px,11vw,180px)}
.career__media{position:absolute;inset:0;z-index:-2}
.career__media img{object-position:60% 42%}
.career::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(93deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.80) 38%,rgba(7,9,12,.30) 78%,rgba(7,9,12,.50) 100%)
}
/* Typografische Navigation 01 JOBS -> – keine Karten, keine Icons */
.big-nav{margin-top:clamp(40px,5.5vw,72px);border-top:1px solid var(--line-fine);max-width:820px}
.big-nav a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(14px,2.2vw,32px);
  padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--line-fine);
  transition:padding-left .5s var(--ease),color .35s
}
.big-nav .no{font-family:var(--f-disp);font-size:.85rem;letter-spacing:.16em;color:var(--o)}
.big-nav .t{font-family:var(--f-disp);font-size:clamp(1.4rem,3.4vw,2.3rem);font-weight:600;text-transform:uppercase;line-height:1}
.big-nav .a{display:flex;align-items:center;color:var(--o);transition:transform .42s var(--ease)}
.big-nav .a .arw{width:clamp(28px,2.6vw,38px);height:auto;transition:none}
.big-nav a:hover{padding-left:clamp(8px,1.2vw,18px)}
.big-nav a:hover .a{transform:translateX(10px)}

/* ---------- 12. Ansprechpartner (§13) ----------------------------------- */
/* Foto + rein typografische Kontaktangaben. Keine Cards, keine Kreise. */
.people{position:relative;background:var(--ink-850)}
.people__in{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(min-width:960px){
  .people__in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .people__media{margin-left:calc(var(--edge)*-1);margin-block:clamp(-90px,-6vw,-40px)}
}
.people__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.people__media img{object-position:50% 26%}
.duo{display:grid;gap:clamp(30px,4vw,54px);margin-top:clamp(34px,4.4vw,56px)}
@media(min-width:640px){.duo{grid-template-columns:repeat(2,1fr)}}
.duo h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.duo .role{color:var(--o);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:.55em}
.duo ul{margin-top:1.3em;display:grid;gap:.6em;justify-items:start}
.duo a{color:var(--fg-soft);font-size:1rem;transition:color .28s;border-bottom:1px solid transparent;padding-bottom:.12em}
.duo a:hover{color:var(--o);border-bottom-color:var(--o)}

/* Zwischen-Handlungspunkt (§16) – Haarlinie statt Kasten, kein Banner */
.cta-line{
  background:var(--ink-950);
  border-block:1px solid var(--line-fine);
  padding-block:clamp(58px,7.5vw,120px)
}
.cta-line .h-md{margin-top:.2em;max-width:20ch}
.cta-line .lead{max-width:52ch}

/* ---------- 13. Abschluss (§14) ----------------------------------------- */
/* Sehr viel Negativraum, keine Kontaktboxen. */
.close{background:var(--ink-950);padding-block:clamp(110px,16vw,240px)}
.close h2{margin-bottom:clamp(34px,4.6vw,60px)}
.close .cta{margin-bottom:clamp(30px,3.8vw,48px)}

/* ---------- 14. Footer (§15) -------------------------------------------- */
.ft{background:var(--ink-950);border-top:1px solid var(--line-fine);padding-block:clamp(44px,5.5vw,72px)}
.ft__top{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;
  padding-bottom:clamp(30px,3.6vw,48px);margin-bottom:clamp(24px,2.8vw,34px);
  border-bottom:1px solid var(--line-fine)}
@media(min-width:760px){.ft__top{grid-template-columns:1.4fr 1fr 1fr}}
.ft h2{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mut);
  font-family:var(--f-body);font-weight:600;margin-bottom:1.3em}
.ft address,.ft li{font-style:normal;font-size:.94rem;color:var(--fg-mut);line-height:1.85}
.ft a{transition:color .28s}
.ft a:hover{color:var(--o)}
.ft__bar{display:flex;flex-wrap:wrap;gap:.6em 1.3em;align-items:center;font-size:.8rem;color:var(--fg-mut)}
.ft__sep{opacity:.3}
.ft__bar .right{margin-left:auto;display:flex;gap:1.3em}

/* ---------- 15. Landingpage-Bausteine ----------------------------------- */
.crumbs{font-size:.74rem;letter-spacing:.06em;color:var(--fg-mut);
  padding-block:clamp(16px,1.8vw,22px);border-bottom:1px solid var(--line-fine)}
.crumbs--top{padding-top:calc(var(--hd-h) + clamp(14px,1.6vw,20px))}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.crumbs a:hover{color:var(--o)}
.crumbs [aria-current]{color:var(--fg-soft)}

/* Bild/Text-Komposition, Bilder ohne Rahmen und ohne Radius */
.duoblock{display:grid;gap:clamp(30px,4.5vw,80px);grid-template-columns:1fr;align-items:center}
@media(min-width:920px){
  .duoblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duoblock--rev .duoblock__media{order:2}
  .duoblock--bleed .duoblock__media{margin-left:calc(var(--edge)*-1)}
  .duoblock--rev.duoblock--bleed .duoblock__media{margin-left:0;margin-right:calc(var(--edge)*-1)}
}
.duoblock__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.duoblock__media img{transition:transform 1.8s var(--slow)}
.duoblock:hover .duoblock__media img{transform:scale(1.04)}

/* Aufzählung als typografische Zeilen mit Haarlinie – keine Haken, keine Icons */
.lines{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line-fine)}
.lines li{padding:.75em 0;border-bottom:1px solid var(--line-fine);color:var(--fg-soft);font-size:1rem}
@media(min-width:640px){
  .lines{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,3vw,52px)}
}

/* Ablauf: nummerierte Zeilen statt Karten */
.flow{margin-top:clamp(34px,4.4vw,60px);border-top:1px solid var(--line-fine)}
.flow li{display:grid;grid-template-columns:auto 1fr;gap:.4em clamp(16px,2.4vw,44px);
  align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--line-fine)}
@media(min-width:760px){.flow li{grid-template-columns:auto minmax(0,17ch) minmax(0,1fr)}}
.flow .no{font-family:var(--f-disp);font-size:.85rem;letter-spacing:.16em;color:var(--o)}
.flow h3{font-family:var(--f-disp);font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em}
.flow p{grid-column:2/-1;color:var(--fg-mut);font-size:.98rem;line-height:1.55;max-width:52ch}
@media(min-width:760px){.flow p{grid-column:3}}

/* FAQ – native <details>, nur Haarlinien */
.faq{margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--line-fine);max-width:900px}
.faq details{border-bottom:1px solid var(--line-fine)}
.faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.4em;cursor:pointer;
  padding:clamp(18px,2.3vw,26px) 0;list-style:none;
  font-family:var(--f-disp);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.28rem);transition:color .3s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-disp);color:var(--o);font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--o)}
.faq__a{padding:0 0 clamp(20px,2.4vw,30px);color:var(--fg-soft);max-width:72ch}

/* Abschluss-CTA-Bahn auf Unterseiten */
.band{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(96px,13vw,190px)}
.band__media{position:absolute;inset:-6% 0;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(7,9,12,.90),rgba(7,9,12,.84))}

/* ---------- 16. Formular (§10) ------------------------------------------ */
/* Ohne Karte, ohne Rahmenkasten: Felder als Schreiblinien. */
.form{display:grid;gap:clamp(22px,2.6vw,30px);grid-template-columns:1fr;margin-top:clamp(30px,3.6vw,48px)}
@media(min-width:640px){.form{grid-template-columns:repeat(2,1fr)}.f-full{grid-column:1/-1}}
.field{display:grid;gap:.5em}
.field label{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mut)}
.field .req{color:var(--o)}
.field input,.field select,.field textarea{
  width:100%;padding:.6em 0;background:transparent;color:#fff;
  border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:1.05rem;transition:border-color .3s
}
.field select option{background:var(--ink-850);color:#fff}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--o)}
.field input::placeholder,.field textarea::placeholder{color:#5d6a76}
.field[data-err] input,.field[data-err] textarea,.field[data-err] select{border-bottom-color:#ff6b5e}
.err{display:none;font-size:.78rem;color:#ff8a80}
.field[data-err] .err{display:block}
.consent{display:flex;gap:.8em;align-items:flex-start;font-size:.86rem;color:var(--fg-mut);line-height:1.5}
.consent input{width:18px;height:18px;flex:none;margin-top:.22em;accent-color:var(--o)}
.consent a{color:var(--o);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.8rem;color:var(--fg-mut);margin-top:1.2em;max-width:56ch}
.form-note a{color:var(--o)}
.form-msg{display:none;font-size:.95rem;padding:1em 0;border-top:1px solid var(--line);grid-column:1/-1}
.form-msg[data-state="ok"]{display:block;color:#8fe6b4;border-top-color:rgba(37,211,102,.5)}
.form-msg[data-state="fail"]{display:block;color:#ffb3ab;border-top-color:rgba(255,107,94,.5)}

/* News- und Bildergalerie */
.news-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;
  margin-top:clamp(44px,5.5vw,80px)}
@media(min-width:700px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.news-grid{grid-template-columns:repeat(3,1fr)}}
/* Nur zwei Meldungen: keine leere dritte Spalte stehen lassen */
@media(min-width:1080px){.news-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.news__media{position:relative;overflow:hidden;aspect-ratio:4/3;margin-bottom:1.3em}
.news__media img{transition:transform 1.8s var(--slow)}
.news:hover .news__media img{transform:scale(1.05)}
.news__meta{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-mut);display:flex;gap:.9em;align-items:baseline}
.news__meta span{color:var(--o)}
.news__t{font-size:clamp(1.2rem,1.7vw,1.5rem);text-transform:uppercase;margin:.55em 0 .5em;
  letter-spacing:.01em}
.news__x{color:var(--fg-soft);font-size:.98rem;line-height:1.6}

/* Bildnachweistabelle */
.nachweis{width:100%;border-collapse:collapse;margin-top:1.4em}
.nachweis td{border-bottom:1px solid var(--line-fine);padding:.8em 0;
  color:var(--fg-soft);font-size:.96rem;vertical-align:top}
.nachweis td:last-child{text-align:right;color:var(--fg-mut);padding-left:1.5em}
@media(max-width:600px){
  .nachweis td{display:block;border:0;padding:.2em 0}
  .nachweis td:last-child{text-align:left;padding:0 0 .9em;border-bottom:1px solid var(--line-fine)}
}

/* Downloadzeile */
.dl{display:inline-flex;align-items:center;gap:.8em;margin-top:1.6em;padding:.9em 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:100%;
  font-weight:600;letter-spacing:.04em;transition:color .3s}
.dl:hover{color:var(--o)}
.dl .dl__x{margin-left:auto;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mut)}

/* ---------- 17. Rechtstexte --------------------------------------------- */
.legal{max-width:76ch}
.legal h2{font-size:clamp(1.15rem,1.7vw,1.4rem);text-transform:uppercase;margin-top:2.4em;letter-spacing:.02em}
.legal p{margin-top:1em;color:var(--fg-soft)}
.legal a{color:var(--o);text-decoration:underline;text-underline-offset:2px}
.legal em{color:var(--fg-mut)}

/* ---------- 18. Consent ------------------------------------------------- */
.cc{
  position:fixed;left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);
  z-index:90;max-width:500px;background:rgba(11,15,19,.98);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);
  transform:translateY(150%);transition:transform .55s var(--ease)
}
.cc.is-on{transform:none}
.cc h2{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--o);
  font-family:var(--f-body);font-weight:600;margin-bottom:.9em}
.cc p{font-size:.87rem;color:var(--fg-mut);line-height:1.55;margin-bottom:1.3em}
.cc p a{color:var(--o);text-decoration:underline}
.cc__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cc .cta{padding:.9em 1.4em;font-size:.76rem}

/* ---------- 19. Bewegung (§17) ------------------------------------------ */
/* Nur: langsame Bildbewegung, dezentes Parallax, Text-Reveal, Linien. */
[data-reveal]{opacity:0;transform:translateY(30px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--slow),transform 1s var(--slow)}
[data-reveal][data-d="1"].is-in{transition-delay:.1s}
[data-reveal][data-d="2"].is-in{transition-delay:.2s}
[data-reveal][data-d="3"].is-in{transition-delay:.3s}
[data-reveal][data-d="4"].is-in{transition-delay:.4s}
[data-reveal][data-d="5"].is-in{transition-delay:.5s}

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

/* ---------- 20. Print --------------------------------------------------- */
@media print{
  .hd,.menu,.cc,.hero__media,.story__media,.career__media,.band__media{display:none!important}
  body{background:#fff;color:#000}
}