/* Mastricht Startseite (Desktop-Demo) — Mischung unitedcarriers.com (Animation) × emons.de (Struktur)
   Eine Schriftfamilie (Archivo, variabel: Gewicht + Breite), eine Akzentfarbe (Trailer-Rot). */
:root{
  --bg:#0A0B0D; --ink:#111214; --paper:#FFFFFF; --soft:#F3F3F4; --grey:#6B7076;
  --line:rgba(17,18,20,.12); --line-d:rgba(255,255,255,.16); --acc:#D8232A;
  --pad:56px; --h2:clamp(44px,3vw,58px); --r:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}

/* ── Chrome ─────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;height:84px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;z-index:50;color:#fff;transition:color .35s,background .35s,backdrop-filter .35s}
.nav[data-theme=light]{color:var(--ink)}
.nav.is-scrolled{background:rgba(10,11,13,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav.is-scrolled[data-theme=light]{background:rgba(255,255,255,.8)}
.nav .logo img{height:26px;width:auto}
.nav .logo .dk{display:none}
.nav[data-theme=light] .logo .wh{display:none}
.nav[data-theme=light] .logo .dk{display:block}
.nav nav{display:flex;gap:40px}
.nav nav a{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:var(--r);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;overflow:hidden;isolation:isolate;will-change:transform;line-height:1}
.btn span{position:relative;z-index:1;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .5s cubic-bezier(.77,0,.18,1);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover span{color:#fff}
.btn-solid{background:#fff;color:var(--ink)}
.nav[data-theme=light] .btn-solid{background:var(--ink);color:#fff}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--acc)}

.tlink{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;position:relative;padding-bottom:6px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.tlink:hover::after{transform:scaleX(.35)}
.tlink::before{content:"→";font-weight:500;color:var(--acc)}

/* ── Hero ───────────────────────────────────────────── */
/* Die Partner-Leiste liegt seit 2026-09-07 als eigenes Band UNTER dem Hero; unten bleibt so viel Luft wie oben (Copy: 110 px padding-top) */
#hero{position:relative;min-height:100vh;background:var(--bg);color:#fff;overflow:hidden;display:grid;grid-template-columns:minmax(560px,46%) 1fr;align-items:center;padding:0 var(--pad) 110px}
.hero-copy{position:relative;z-index:2;max-width:780px;padding-top:110px}
.hero-copy h1{font-size:clamp(62px,4.4vw,86px);line-height:.95;font-weight:700;font-stretch:104%;letter-spacing:-.024em;text-transform:uppercase;margin:0 0 28px;hyphens:manual}
.hero-sub{font-size:26px;font-weight:500;letter-spacing:-.01em;margin:0 0 20px}
.hero-lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.74);max-width:560px;margin:0 0 40px}
.hero-actions{display:flex;gap:14px}
.globe-glow{position:absolute;right:2vw;top:8vh;width:54vw;height:54vw;border-radius:50%;background:radial-gradient(closest-side,rgba(216,35,42,.14),rgba(216,35,42,0) 72%);filter:blur(50px);z-index:0;pointer-events:none}
#globe{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 96%);mask-image:linear-gradient(to bottom,#000 78%,transparent 96%)}
#globe canvas{width:100%!important;height:100%!important;display:block}
.hud{position:absolute;left:0;top:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.82);text-shadow:0 0 6px #0a0b0d,0 0 3px #0a0b0d,0 0 1px #0a0b0d;transform:translate(12px,-50%);white-space:nowrap;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.hud.is-hub::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);margin-right:9px;vertical-align:middle;box-shadow:0 0 0 7px rgba(216,35,42,.22)}
.hud.is-hub{font-size:13px;color:#fff}
.hud.is-hub::before{animation:hubPulse 2.6s ease-out infinite}
@keyframes hubPulse{0%{box-shadow:0 0 0 4px rgba(216,35,42,.35)}70%{box-shadow:0 0 0 16px rgba(216,35,42,0)}100%{box-shadow:0 0 0 16px rgba(216,35,42,0)}}
/* Partner-Band: eigene Sektion UNTER dem Hero (Leo 2026-09-07: „nicht im Hero drinnen"), deutlich kleiner,
   mittig zusammengerückt, ohne Unterstrich. Einfarbig gedämpft; beim Zeigen auf das Band erscheinen ALLE Marken
   in Originalfarbe (Farbfassung deckungsgleich über der Vektor-Marke, make-partner-logos.py) — seit dem zweiten
   Durchgang nur die GEZEIGTE Marke, nicht alle zugleich, und mit mehr Luft dazwischen. Ersetzt die
   Leiste am Hero-Fuß von 2026-09-05 (designfuchs R1 „Monument"). */
.partner-band{background:var(--soft);padding:34px var(--pad);display:flex;justify-content:center;align-items:center;gap:clamp(88px,9vw,160px)}
.hp-c{position:relative;color:var(--ink);opacity:.62;transition:opacity .45s}
.hp-c:hover{opacity:1}
.hp-m{width:auto;display:block;transition:opacity .45s}
.hp-f{position:absolute;left:0;top:0;width:auto;display:block;opacity:0;transition:opacity .45s;pointer-events:none}
.hp-c:hover .hp-m{opacity:0}
.hp-c:hover .hp-f{opacity:1}

/* (Horizont-Übergang Hero→Statement bewusst weggelassen — Leo 2026-09-05; Pin-Variante in Git 1a3e84a) */

/* ── Sektionen ─────────────────────────────────────── */
.sec{padding:150px var(--pad)}
.sec.light{background:var(--paper);color:var(--ink)}
.sec.soft{background:var(--soft);color:var(--ink)}
.sec.dark{background:var(--bg);color:#fff}
.h2{font-size:var(--h2);line-height:1.06;font-weight:600;letter-spacing:-.02em}
.h2.big{font-size:clamp(52px,3.75vw,72px);text-transform:uppercase;font-weight:700;font-stretch:104%;letter-spacing:-.022em;line-height:.98}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px}
.intro{font-size:18px;line-height:1.6;color:var(--grey);max-width:640px}
.dark .intro{color:rgba(255,255,255,.72)}
.sub-h{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 28px}

#statement{padding-top:150px;padding-bottom:0;--thumb-w:min(764px,calc(100vw - 492px))}  /* Video-Fenster 30 % breiter als das 588-px-Foto (Leo 2026-09-07, vorher: Foto 40 % groesser als 420 px); unter ~1256 px weicht es, damit rechts >= 300 px Text bleiben */
#statement .grid{display:grid;grid-template-columns:var(--thumb-w) 1fr;gap:80px;align-items:end;margin-top:72px}
.thumb{width:var(--thumb-w);aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);margin:0;overflow:hidden;background:#0A0B0D}
.thumb video{display:block;width:100%;height:100%;object-fit:cover}
.statement{max-width:1560px;font-size:clamp(52px,3.75vw,72px);line-height:.98;text-transform:uppercase;font-weight:700;font-stretch:104%;letter-spacing:-.024em}
.statement-right p{font-size:19px;line-height:1.6;color:var(--grey);margin:0 0 28px;max-width:720px}
/* ── Fakten („Monument", Leo-Wahl 2026-09-07 aus dem designfuchs-Faecher f1/f2/f4) ──
   Eigene Sektion hinter dem Statement, 230px Luft nach oben (vorher 120px innerhalb der Sektion).
   Jede Aussage laeuft einzeilig ueber die Zeile — deshalb KEINE ch-Begrenzung, das Raster begrenzt.
   hyphens:none ist Pflicht: sonst bricht „Temperaturueberwachung" mit Trennstrich (3 Juroren).
   Die Rubrik sitzt auf Hoehe der ERSTEN Zeile, damit rechts eine ruhige Senkrechte steht. */
.fx{background:var(--paper);color:var(--ink);padding:230px var(--pad) 150px}
.fx-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.fx-row{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:72px;
  align-items:start;border-top:1px solid var(--line);padding:52px 0 60px}
/* Rot faehrt auf der UNTEREN Linie der Zeile ein (Leo 2026-09-07). bottom:-1px legt den Strich
   exakt auf die Haarlinie darunter — das ist der border-top der naechsten Zeile bzw. bei der
   letzten der border-bottom der Liste. */
.fx-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.77,0,.18,1)}
.fx-row:hover::after{transform:scaleX(1)}
.fx-c{display:block;font-size:clamp(42px,2.92vw,56px);line-height:1.06;font-weight:700;font-stretch:104%;
  text-transform:uppercase;letter-spacing:-.024em;hyphens:none;-webkit-hyphens:none;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.fx-row:hover .fx-c{transform:translateX(12px)}
.fx-side{padding-top:12px}
.fx-l{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  white-space:nowrap;transition:color .45s}
.fx-row:hover .fx-l{color:var(--acc)}

/* ── Register (ersetzt seit 2026-09-07 das Drei-Karten-Raster in #leistungen und #fahrer;
      designfuchs-Fächer aus vier Richtungen, Leo-Wahl „Register"). Hairline-Zeilen statt Kästen,
      keine Ziffern, kein Hover-Anheben. Links klebt ein Bildfenster, dessen Foto der Zeile auf
      seiner Höhe folgt — beim Scrollen wie beim Zeigen (neu.js). ── */
#leistungen .reg-body{display:grid;grid-template-columns:clamp(460px,34vw,820px) 1fr;gap:clamp(64px,6vw,110px);align-items:start}
#leistungen .reg-frame{position:sticky;top:clamp(150px,22vh,260px);margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
#leistungen .reg-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
#leistungen .reg-frame img.is-on{opacity:1}
.reg-list{list-style:none;margin:0;padding:0}
.reg-row{position:relative;transition:padding-left .6s cubic-bezier(.2,.7,.2,1)}
.reg-row{border-top:1px solid var(--line);padding:38px 0 46px}
.reg-row:last-child{border-bottom:1px solid var(--line)}
/* der rote Zustand liegt auf DERSELBEN Kante wie die Hairline der Zeile */
/* Der rote Strich faehrt UNTEN ein — gleiche Entscheidung wie im Fakten-Block (Leo 2026-09-07,
   auf Nachfrage bestaetigt: Einheitlichkeit auf der Seite geht vor). bottom:-1px legt ihn auf die
   Haarlinie UNTER der Zeile, das ist der border-top der naechsten bzw. bei der letzten der
   border-bottom der Liste. Mein Einwand war, dass er die aktive Zeile markiert und unten gesetzt
   auf den naechsten Begriff zu zeigen scheint — Leo hat das gesehen und so entschieden. */
.reg-row::before{content:"";position:absolute;left:0;bottom:-1px;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.77,0,.18,1)}
.reg-row.is-on::before{transform:scaleX(1)}
.reg-row:hover{padding-left:26px}
.reg-term{font-size:clamp(34px,2.5vw,46px);line-height:1.04;font-weight:700;font-stretch:104%;text-transform:uppercase;letter-spacing:-.022em;margin:0 0 16px}
/* 64ch ergaben gemessen 76 Zeichen pro Zeile (Spitze 84) — zu lang zum Lesen; 54ch liegen bei ~64 */
.reg-copy{font-size:16px;line-height:1.62;color:var(--grey);max-width:54ch;margin:0}

/* ── Kühlkette (gepinnt, reine f(scrollY)) ───────────── */
#kuehlkette{position:relative;height:250vh;background:var(--paper);color:var(--ink);--kk-y:34%}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.ghost{position:absolute;left:0;top:50%;transform:translate(8vw,-50%);font-size:21vw;line-height:1;font-weight:800;font-stretch:118%;letter-spacing:-.045em;text-transform:uppercase;color:#F2F3F5;white-space:nowrap;will-change:transform;user-select:none}
.kk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Station = Ankerpunkt AUF der Linie (left/top = Punktmitte: ohne JS aus dem Build in %, mit JS in px vom Pfad gemessen).
   Reveal: der Punkt wächst auf, sobald die gezeichnete Linie ihn erreicht; das Etikett folgt kurz danach. */
.kk-station{position:absolute;width:0;height:0;pointer-events:none}
.kk-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px rgba(216,35,42,.15);transform:scale(0);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.kk-label{position:absolute;left:0;top:20px;transform:translate(-50%,6px);white-space:nowrap;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.kk-station.is-on .kk-dot{transform:scale(1)}
.kk-station.is-on .kk-label{opacity:1;transform:translate(-50%,0);transition-delay:.12s}
html:not(.js) .kk-dot{transform:none}
html:not(.js) .kk-label{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.kk-dot,.kk-label{transition:none}}
/* Text und Foto stehen in EINER Zeile auf der Mitte --kk-y (Leo 07.09.2026: Text auf gleicher Höhe wie das Bild, keine
   Scroll-Drift mehr). Der Text bestimmt die Zeilenhöhe, das Foto übernimmt sie (Ober- und Unterkante bündig) und leitet
   seine Breite aus 16:9 ab (Leo: Foto kleiner, proportional zu Headline und Text). */
.kk-row{position:absolute;left:var(--pad);right:var(--pad);top:var(--kk-y);transform:translateY(-50%)}
.kk-copy{position:relative;max-width:560px}
.kk-copy .h2{margin-bottom:24px}
.kk-copy p{font-size:17px;color:var(--grey);line-height:1.6}
/* Mitte 34 % (vorher 40 %): Luft zwischen Foto-Unterkante und dem Scheitel der roten Linie (Leo 07.09.2026: die Ecke saß fast auf der Linie) */
.kk-photo{position:absolute;right:0;top:0;height:100%;aspect-ratio:16/9;margin:0;transform:translate(70vw,0);border-radius:var(--r);overflow:hidden;will-change:transform}
.kk-photo img{width:100%;height:100%;object-fit:cover}

/* ── Fahrer (dunkel) ───────────────────────────────── */
.video-wrap:last-child{margin-bottom:0}
.video-wrap{margin:64px 0 96px;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r);position:relative;background:#000 url(/neu/assets/video/highway-poster.jpg) center/cover}
.video-wrap video{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}

/* ── Über uns ──────────────────────────────────────── */
#ueber-uns .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
#ueber-uns .h2{margin-bottom:28px}
#ueber-uns .intro{margin-bottom:18px}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:8px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.collage img:first-child{grid-column:1/-1;aspect-ratio:16/9}
.collage img:nth-child(2),.collage img:nth-child(3){aspect-ratio:1/1}
.divs{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:96px;border-top:1px solid var(--line);padding-top:48px}
.divs p{max-width:640px}
.divs h3{font-size:22px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.divs p{font-size:15px;color:var(--grey);line-height:1.6;margin:0 0 20px}

/* ── Footer (Vorbild unitedcarriers.com, dunkel): schmale linke Spalte + breite rechte Fläche,
      Hairlines, Dauer-Laufleiste, Dot-Karte, Dot-Wortmarke ── */
.ft{background:var(--bg);color:#fff;padding:52px var(--pad) 54px;position:relative;z-index:1;overflow:hidden;--ft-l:clamp(240px,16.667vw,320px);--ft-gap:clamp(72px,7.084vw,136px);--ft-col:22px}
.ft a{text-decoration:none;color:inherit}
.ft-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1}
.ft-mid,.ft-main,.ft-bar{display:grid;grid-template-columns:var(--ft-l) 1fr;column-gap:var(--ft-gap)}
.ft-mid>*{border-top:1px solid var(--line-d);padding-top:72px}
.ft-icons{display:flex;gap:10px;margin-top:22px}
.ft-ic{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:color .4s,box-shadow .5s cubic-bezier(.77,0,.18,1)}
.ft-ic svg{width:19px;height:19px;display:block}
.ft-ic:hover{color:#fff;box-shadow:inset 0 0 0 24px var(--acc)}
.ft-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ft-col)}
.ft-menu{grid-column:1/3}
.ft-menu-grid{display:grid;grid-template-columns:repeat(3,min(209px,calc((100% - 2 * var(--ft-col)) / 3)));column-gap:var(--ft-col);margin-top:22px}
.ft-menu-grid a{display:block;font-size:17px;font-weight:500;line-height:1.25;color:#fff;margin-bottom:13px}
.ft-menu-grid a:last-child{margin-bottom:0}
.ft-sw{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.ft-sw span{display:block;transition:transform .55s cubic-bezier(.77,0,.18,1)}
.ft-sw span+span{position:absolute;left:0;top:100%;color:var(--acc)}
.ft-menu-grid a:hover .ft-sw span{transform:translateY(-100%)}
.ft-partner-txt{font-size:15px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.74);margin:20px 0 0}

/* Laufleiste — läuft dauerhaft, Kategorie + Schlagworte in EINER Zeile (Leo 2026-09-05) */
.ft-run{margin:86px calc(-1 * var(--pad)) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.ft-run-track{display:flex;width:max-content;animation:ftRun 64s linear infinite;user-select:none;-webkit-user-select:none;
  /* KEIN will-change: der Track ist ~11000 px breit — ein erzwungenes Layer sprengt auf Retina
     die Textur-Grenze (2x = 22000 px) und kann Teile ungerendert lassen; ohne will-change kachelt
     der Compositor und rastert nur den sichtbaren Ausschnitt. */
  backface-visibility:hidden}
.ft-run-seq{display:flex;align-items:center;flex:none;white-space:nowrap;
  font-size:clamp(21px,1.75vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:rgba(255,255,255,.26)}
.ft-run-seq i{font-style:normal;margin:0 .46em;color:rgba(216,35,42,.62)}
@keyframes ftRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
@media (prefers-reduced-motion:reduce){.ft-run-track{animation:none}
  /* steht die Leiste still, faengt sie am Anfang an — dann darf der linke Rand nicht anschneiden */
  .ft-run{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent)}}

.ft-main{border-top:1px solid var(--line-d);margin-top:86px;padding:55px 0 53px}
.ft-photo{position:relative;margin:0;width:var(--ft-l);aspect-ratio:320/226;overflow:hidden;border-radius:var(--r);background:#000}
.ft-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:inherit;pointer-events:none}
.ft-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.06) contrast(.97)}
.ft-main-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ft-col);align-items:start}
.ft-cell{display:flex;flex-direction:column;justify-content:space-between;gap:36px;height:226px}
.ft-cell .ft-lbl{margin-bottom:14px}
.ft-val{display:block;font-size:17px;font-weight:500;line-height:1.3;color:#fff;position:relative;width:max-content;max-width:100%}
a.ft-val::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.77,0,.18,1)}
a.ft-val:hover::after{transform:scaleX(1)}
.ft-dir{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:500;color:#fff}
.ft-dir svg{width:16px;height:16px;flex:none;display:block}
.ft-dir span{position:relative}
.ft-dir span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor}
.ft-dir:hover span::after{animation:ftLine .8s cubic-bezier(.77,0,.18,1)}
@keyframes ftLine{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.ft-map{position:relative;width:100%;aspect-ratio:436/226;-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%)}
.ft-map svg{width:100%;height:100%;display:block;overflow:visible}
.ft-map-lbl{position:absolute;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;transform:translate(12px,-50%);white-space:nowrap;line-height:1;text-shadow:0 0 6px var(--bg),0 0 3px var(--bg),0 0 1px var(--bg)}
.ft-pulse{transform-box:fill-box;transform-origin:center;animation:ftPulse 2.6s ease-out infinite}
@keyframes ftPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.ft-bar{grid-template-columns:var(--ft-l) 1fr auto;align-items:center;border-top:1px solid var(--line-d);padding-top:22px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1}
.ft-bar>span:first-child{white-space:nowrap}
.ft-bar nav{display:flex;gap:22px}
.ft-bar a{transition:color .3s}
.ft-bar a:hover{color:var(--acc)}
.ft-logo{margin-top:50px}
.ft-logo svg{width:100%;height:auto;display:block}

/* ── Reveals (nur mit JS aktiv — ohne JS bleibt alles sichtbar) ── */
.rv-lines .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.rv-lines .i{display:inline-block;will-change:transform}
html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}