/* FRANKSTAHL · tokens.css
   Die eine Quelle für Schriften, Farben und Maße. Schriften selbst gehostet, keine Google Fonts.
   © 2026 000fff.studio OG · Konzept, Gestaltung und Programmierung */

@font-face{font-family:"Funnel Sans";src:url("fonts/FunnelSans.ee99f9f413fb.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/MartianMono.78331a5658d6.woff2") format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

:root{
  --sans:"Funnel Sans",-apple-system,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --bg:#2B2F34;          /* Bildebene */
  --paper:#FFFFFF;
  --line:#DFE2E5;        /* Linien */
  --box:#E4E7EA;         /* Bildplatz */
  --seal-bg:#F0F2F4;     /* Fläche um ein Siegel (Kontur) und des Kanten-Frames */
  --skf:240px;           /* Kanten-Frame eines Siegels, wie die drei Plätze in Ebene 03, Block 02 */
  --skf-gap:26px;
  --ink:#1A1E23;         /* Text */
  --mid:#6B737B;         /* Nebentext */
  --signal:#F9423A;      /* Signalfarbe, auch für alles, was wir noch nicht wissen */
  --signal-bg:#FDEDEC;   /* roter Bildplatz */
  --dark:#15181C;        /* Footer */
  --bar:min(500px,max(44vw,min(100vw - 100px,300px)));   /* Kopfleiste */
  --edge:20px;           /* Ränder */
}

/* FRANKSTAHL · base.css
   Grundlage, Kopfleiste mit Menü und Logo-Hover, Aufmacher, Card (Sheet), Footer. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg)}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.lbl{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--mid);line-height:1.9}
.tbd{color:var(--signal)}

/* ---------- Leiste und Dropdown sind EINE Fläche ----------
   Ein Element, eine Höhe, ein Schatten. */
:root{--bar-shadow:0 8px 34px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.06)}   /* auch für den Übergang (unten) */
#bar{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  width:var(--bar);height:52px;z-index:60;
  background:var(--paper);border-radius:8px;overflow:hidden;
  box-shadow:var(--bar-shadow);
  transition:height .55s cubic-bezier(.22,.61,.36,1);
}
#bar.open{height:calc(100vh - 40px);height:calc(100svh - 40px)}   /* svh: auf dem Handy nie unter die Leiste des Browsers */

#bar header{
  position:relative;height:52px;width:100%;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
}
#bar header img,#bar header svg{display:block}
.hLogoSvg{height:13px;width:auto}
.icoSvg.m{width:15px;height:15px}
.icoSvg.c{width:19px;height:19px}
#burger{position:relative;width:15px;height:15px;background:none;border:0;padding:0;cursor:pointer;display:block;color:#383838}
/* Menüknopf: statt des Burgers ein aufrechtes H-Profil; am
   Seitenanfang (#bar.top, setzt site.js nach dem Scroll) steht das Wort MENU / MENÜ. Der Knopf bleibt 15 × 15 px wie
   der Burger, damit das Logo an seinem Platz bleibt; das Wort beginnt an derselben Kante und ragt nach rechts, die
   Klickfläche (::before) deckt Wort und Profil. Wechsel als weiche Überblendung, bei reduzierter Bewegung hart. */
#burger::before{content:"";position:absolute;left:-12px;top:-14px;right:-30px;bottom:-14px;border-radius:6px}
#burger .mw{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;line-height:1;text-transform:uppercase;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .3s ease}
#burger svg{transition:opacity .3s ease}
#bar.top #burger .mw{opacity:1}
#bar.top #burger svg{opacity:0}
/* Touch-Geräte (Handy und Tablet): immer das Wort, ohne H-Profil und ohne Überblendung */
@media (hover:none){
  #bar #burger .mw{opacity:1;transition:none}
  #bar #burger svg{display:none}
}
#burger:focus{outline:none}
#burger:focus-visible::before{outline:2px solid var(--signal);outline-offset:-4px}
a.cart{display:block}

#nav{
  position:absolute;top:52px;left:0;right:0;height:calc(100vh - 92px);height:calc(100svh - 92px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 20px 34px;
}
#bar:not(.open) #nav{visibility:hidden;transition:visibility 0s linear .55s}
#nav ul{list-style:none;text-align:center}
#nav a{font-family:var(--mono);font-size:clamp(18px,1.75vw,24px);
       letter-spacing:.05em;color:#20242A;text-decoration:none;transition:color .18s ease}
#nav a:hover,#nav a[aria-current]{color:var(--signal)}
/* Seitenwechsel aus dem Menü: der geklickte Punkt wird sofort rot, nur er */
#nav.going a{transition:none}
#nav.going a[aria-current]{color:#20242A}
#nav a.go,#nav.going a.go{color:var(--signal)}

/* ---------- Übergang zwischen den Seiten ----------
   Ein Link im offenen Menü schließt die Leiste nicht per Skript (site.js). Stattdessen läuft beim Wechsel
   eine View Transition nur für die Leiste: Chrome und Safari zeichnen die alte Leiste mit dem offenen Menü und
   lassen sie auf die Höhe der neuen, geschlossenen Leiste schrumpfen, mit der Kurve und Dauer des Schließens; der Inhalt wird beschnitten, nicht gestaucht. Die Seite selbst wechselt ohne Überblendung.
   Bei geschlossener Leiste überspringt site.js den Übergang (pageswap). Firefox kennt den Übergang nicht und
   wechselt hart. Reduzierte Bewegung: kein Übergang.
   Das Menü wirkt immer wie eine ganze Karte: Die Gruppe trägt Schatten und Rundung der
   Leiste und schrumpft als eine Karte. Der Schnappschuss der neuen, geschlossenen Leiste bleibt verborgen: Er brachte
   seinen eigenen Schatten mit, der als Band unter der Kopfzeile in der schrumpfenden Karte lag. Die Kopfzeile ist
   offen und geschlossen gleich; am Ende steht die echte Leiste mit demselben Schatten an derselben Stelle. */
@view-transition{navigation:auto}
#bar{view-transition-name:bar}
/* Der Menüknopf als eigene Gruppe. Alter und neuer Zustand (Profil oder Wort) blenden ineinander, während
   die Karte schrumpft; sonst spränge am Ende des Übergangs das Profil der alten Seite hart auf das Wort der neuen. */
#burger{view-transition-name:menubtn}
::view-transition-group(menubtn){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(menubtn),::view-transition-new(menubtn){animation-duration:.55s}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(bar){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.61,.36,1);
  overflow:clip;border-radius:8px;box-shadow:var(--bar-shadow)}
::view-transition-new(bar){visibility:hidden}
::view-transition-image-pair(bar){isolation:auto}
::view-transition-old(bar),::view-transition-new(bar){animation:none;mix-blend-mode:normal;
  display:block;width:100%;height:auto;object-fit:none;object-position:top left}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:0s}
}
/* Menü: mehr Luft zwischen den Punkten, zu den Plattformen eine Zeile mehr.
   In em der Menüschrift, bei niedrigen Fenstern über vh gedeckelt. */
#nav li{font-size:clamp(18px,1.75vw,24px);margin:min(1.65em,4.1vh) 0;margin:min(1.65em,4.1svh) 0}
#nav li.gap{margin-top:min(4.4em,11vh);margin-top:min(4.4em,11svh)}
#navSocial{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center;gap:26px;
  flex-wrap:wrap;row-gap:10px;padding:0 20px}
#navSocial a,#navSocial .lang{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#7A8087;text-decoration:none}
#navSocial a:hover{color:var(--signal)}
/* Sprachumschalter: aktuelle Sprache rot wie die aktuelle Seite im Menü */
.lang a[aria-current]{color:var(--signal)}

/* ---------- Logo · Hover 2A Kursivachse, EST. 1880 ----------
   Die Wortmarke rückt 40,2 px nach links, das Datum wird an der Kursivachse (14,9 Grad)
   aufgezogen, 90 ms versetzt. Nur mit Maus und bei geschlossener Leiste; per Tastatur
   über den Fokus; bei reduzierter Bewegung ohne Animation. Maße für 13 px Logohöhe. */
.fsHome{position:relative;display:block;flex:none;width:131.73px;height:13px;outline:none}
.fsHome::after{content:"";position:absolute;inset:0}
.fsHomeGrp{position:absolute;left:0;top:0;width:131.73px;height:13px;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.fsHomeGrp svg{position:absolute;display:block}
.fsHomeGrp .fsHomeWm{left:0;top:0;width:131.73px;height:13px}
.fsHomeGrp .fsHomeDate{left:137.47px;top:4.36px;width:74.32px;height:9.35px;
  clip-path:polygon(-6px 0,-3.5px 0,-6px 100%,-8.5px 100%);
  transition:clip-path .30s cubic-bezier(.4,0,.6,1)}
@media (hover:hover) and (pointer:fine){
  #bar:not(.open) .fsHome:hover::after{left:-48px;right:-48px;top:-12px;bottom:-12px}
  #bar:not(.open) .fsHome:hover .fsHomeGrp{transform:translateX(-40.2px)}
  #bar:not(.open) .fsHome:hover .fsHomeDate{clip-path:polygon(-6px 0,77px 0,74.5px 100%,-8.5px 100%);
    transition:clip-path .52s cubic-bezier(.22,.61,.36,1) .09s}
}
#bar:not(.open) .fsHome:focus-visible .fsHomeGrp{transform:translateX(-40.2px)}
#bar:not(.open) .fsHome:focus-visible .fsHomeDate{clip-path:polygon(-6px 0,77px 0,74.5px 100%,-8.5px 100%)}
@media (prefers-reduced-motion:reduce){
  #bar,.fsHomeGrp,.fsHomeGrp .fsHomeDate,#bar:not(.open) .fsHome:hover .fsHomeDate,#burger .mw,#burger svg{transition:none}
}

/* ---------- Aufmacher: Standbild fest und randlos hinter allem, Card ab 60 vh, Label und H1 unten links ---------- */
#imgLayer{position:fixed;inset:0;z-index:1;overflow:hidden;background:#3A3F45;display:grid;place-items:center}
#imgLayer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--origin,50% 50%)}
/* Touch-Geräte: die Bildebene so hoch wie das Fenster bei eingefahrener Browserleiste; sonst skaliert das Bild beim
   ersten Scroll sichtbar nach, wenn die Leiste einfährt */
@media (hover:none){#imgLayer{bottom:auto;height:100vh;height:100lvh}}
#imgLayer.hasImg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 26vh,rgba(0,0,0,.32) 60vh),
    linear-gradient(to right,rgba(0,0,0,.26) 0,rgba(0,0,0,0) 48vw)}
/* Film im Aufmacher (site.js): das Bild ist das letzte Bild des Films und bleibt verborgen,
   bis site.js übernimmt (.run: Startbild, Film einmal, das letzte Bild bleibt; .still: kein Film, das Bild steht);
   ohne JavaScript erscheint es nach 1,2 s, bei reduzierter Bewegung sofort. Jeder Aufmacher ist für
   den vollen Ausschnitt gebaut, ohne Zoom. */
#imgLayer.mov img{opacity:0;animation:fsOpImg 0s linear 1.2s forwards}
#imgLayer.mov.run img{animation:none}
#imgLayer.mov.still img{animation:none;opacity:1}
#imgLayer > video.opv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--pos,50% 50%)}
@keyframes fsOpImg{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#imgLayer.mov img{animation:none;opacity:1}#imgLayer > video.opv{display:none}}
/* an der Unterkante des Auftakts verankert, damit die Zeilenzahl egal ist */
#opener{position:fixed;left:6vw;right:6vw;top:0;height:60vh;z-index:2;
        color:#fff;pointer-events:none;
        display:flex;flex-direction:column;justify-content:flex-end;
        padding-bottom:clamp(64px,9vh,116px)}
#opener .lbl{color:#B9C0C7;margin-bottom:20px}
#opener h1{font-size:clamp(32px,3.4vw,54px);font-weight:400;letter-spacing:-.035em;
           line-height:1.06;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
#opener.covered{visibility:hidden}

.sheet{position:relative;z-index:10;margin:60vh var(--edge) 0;background:#fff;will-change:clip-path}
/* Seiten ohne Aufmacher (Rechtliches): die Leiste sitzt in der Kerbe, 10 px Luft */
body.noOpener .sheet{margin-top:46px}

/* ---------- Footer ---------- */
footer{
  position:relative;z-index:10;margin:var(--edge);
  background:var(--dark);color:#C6CCD2;padding:110px 6vw 30px;will-change:clip-path;
}
footer .fcols{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:44px;margin-bottom:70px}
footer h4{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#7E868E;margin-bottom:20px}
footer .fl{font-size:14px;line-height:2.1;color:#B9C0C7}
footer .fl span{display:block}
footer .fcols > div:first-child > .fl{text-transform:uppercase}   /* die Firmen der Gruppe in Versalien */
footer .fl.mt{margin-top:14px}
footer .fl a{display:block;color:inherit;text-decoration:none}
footer .note{font-size:11.5px;color:#79818A;line-height:1.6;margin-top:4px}
footer .base{border-top:1px solid #262B31;padding-top:22px;display:flex;flex-wrap:wrap;gap:22px;
             justify-content:space-between;font-family:var(--mono);font-size:8.5px;
             letter-spacing:.14em;color:#6E767E}
footer .base a{color:#6E767E;text-decoration:none}
footer .base .grp{display:flex;gap:18px;flex-wrap:wrap}
footer .fl a:hover,footer .base a:hover{color:var(--signal)}
footer .lang a[aria-current]{color:var(--signal)}
/* F1880-Signet: unter der Spalte THE GROUP, Unterkante 22 px über der unteren Trennlinie,
   so weit wie der Text darunter von der Linie (padding-top der .base). Teilt sich die Zelle mit der ersten Spalte;
   deren Polster hält rund 60 px Luft zwischen Text und F (der Footer wird dafür höher).
   Breite 99 px, F rund 78 px hoch. */
footer .fcols.sig-group > div:first-child{grid-column:1;grid-row:1;padding-bottom:95px}
footer .fsig{grid-column:1;grid-row:1;align-self:end;justify-self:start;margin-bottom:-48px;line-height:0}
footer .fsig img{display:block;width:99px;height:88px;margin-left:-3.6px}
/* Hinweis auf KI-generierte Inhalte: über der Trennlinie,
   rechtsbündig an der rechten Kante der Spalten, Grundlinie auf der Grundlinie des F-Signets (Unterkante des F und
   Grundlinie von „1880“). bottom ist margin-bottom:-48px von .fsig plus 1,7 px bis zur Grundlinie; ändert sich das
   Signet, wandert der Wert mit. */
footer .fcols .ai{position:absolute;right:0;bottom:-46.3px;font-family:var(--mono);font-size:8.5px;line-height:1.6;letter-spacing:.14em;color:#6E767E;text-align:right;white-space:nowrap}

@media(max-width:980px){
  footer .fcols{grid-template-columns:1fr;gap:30px}
  footer .fcols.sig-group > div:first-child{grid-row:auto;padding-bottom:0}
  footer .fsig{grid-row:auto;grid-column:auto;order:9}
  footer .fcols .ai{white-space:normal;max-width:calc(100% - 130px);text-wrap:balance}
}

/* FRANKSTAHL · blocks.css
   Bausteine der Seiten. Statt style-Attributen Klassen (am Ende), damit die CSP ohne 'unsafe-inline' auskommt. */

/* Bildplatz */
.ph{background:var(--box);border:1px dashed #C9CED3;border-radius:3px;
    display:grid;place-items:center;text-align:center;padding:14px}
.ph .lbl{color:#98A0A8}
.ph.cut{border:0;background:var(--box)}
.ph.tbd,.ph.tbd.cut{background:var(--signal-bg)}
.ph .lbl.tbd{color:var(--signal);letter-spacing:.04em;line-height:1.7;max-width:36ch}
/* Bildplatz mit echtem Bild; Konturen wie alle .ph */
.ph.img{padding:0;position:relative;overflow:hidden;border:0}
.ph.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Bilddrift: Grundmaßstab hier, Weg und Zoom setzt site.js. Nur transform. */
.ph.img img{transform:scale(1.1);transform-origin:50% 50%;will-change:transform}

/* B · Lead */
.lead{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;padding:110px 6vw 96px}
.lead h2{font-size:clamp(24px,2.4vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.15;max-width:14ch}
.lead .body{max-width:58ch}
.lead.solo{display:block}
.lead.solo p{font-size:clamp(22px,2.05vw,31px);font-weight:400;letter-spacing:-.025em;line-height:1.22;max-width:31ch}

/* Text */
.txt{max-width:62ch}
.txt p{font-size:16px;line-height:1.62}
.txt p+p{margin-top:.9em}
.sec + .txt{margin-top:-6px}
.aside{font-family:var(--mono);font-size:9px;letter-spacing:.06em;line-height:1.8;color:var(--mid)}
h2.sec{font-size:clamp(22px,2.2vw,32px);font-weight:400;letter-spacing:-.03em;margin-bottom:30px;max-width:18ch}
.kick{margin-bottom:22px}

/* C · Kennzahlen: Wert, Beschriftung und Bezugsjahr getrennt */
.figs{padding:0 6vw 96px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fig{border-top:1px solid var(--line);padding-top:16px}
.fig .num{font-size:30px;letter-spacing:-.02em;margin-bottom:6px}
.fig .cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--mid);line-height:1.7}
.fig .yr{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;line-height:1.7;margin-top:3px}
.fig .num.tbd{font-size:14px;letter-spacing:0;line-height:1.4;margin-bottom:8px}

/* D · Nummerierte Karten */
.cards{padding:0 6vw 96px}
.cards .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;border-top:1px solid var(--line);padding-top:44px}
.cards .n{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#A8AEB5;margin-bottom:16px}
.cards h3{font-family:var(--mono);font-size:12px;letter-spacing:.1em;margin-bottom:14px}
.cards .txt p{font-size:15px}
.cards a.dim{margin-top:22px}

/* E · Schritte mit kleinem Bild (Distribution, Bilder links und Text rechts):
   je Schritt eine Zeile, links das Bild im Kanten-Frame mit Drift, rechts Label und Text; Linie zwischen den Zeilen.
   Querformat, auch auf dem Handy: Bild 4:3 wie
   „Was wir führen“ in der linken Spalte des Rasters der Blöcke (1fr zu 1.25fr, Lücke 64 px; bei 1681 px 611 × 458),
   der Text in der rechten, bündig mit dem Text der Blöcke darunter;
   unter 980 px über dem Text, auf dem Handy in voller Breite (höchstens 520 px). D und E sind Hochformat, der
   Ausschnitt 4:3 entsteht hier; C liegt als Querformat vor (pages/c-quer.jpg, nach links verlängert), weil ein
   Ausschnitt die Flansche des I abschneiden würde. */
.steprows{padding:0 6vw 96px}
.steprows .srow{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:center;border-top:1px solid var(--line);padding:52px 0}
.steprows .srow:first-child{border-top:0;padding-top:0}
.steprows .srow .ph{width:100%}
.steprows .srow p.big{font-size:clamp(19px,1.55vw,24px);letter-spacing:-.02em;line-height:1.3}

/* E2 · Vier Spalten mit Bild oben (Distribution, „Was wir führen“): Bild 4:3 im Kanten-Frame,
   Name als Label in Martian Mono, Text darunter; auf dem Handy zwei mal zwei */
.carry{padding:0 6vw 96px}
.carry h2.sec{border-top:1px solid var(--line);padding-top:32px;margin-bottom:34px;max-width:none}
.carry .cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px}
.carry .cname{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 12px}
.carry .txt p{font-size:15px}
/* Titel und Texte der Spalten auf einer Höhe, auch wenn ein Titel zwei Zeilen braucht (seit 20.10.): jede Spalte
   belegt drei Zeilen des Rasters (Bild, Titel, Text) und übernimmt sie als subgrid */
@supports (grid-template-rows:subgrid){
  .carry .cgrid>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}

/* F · Sticky-Split (Zeitleiste) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:0 6vw 96px;align-items:start}
.split .sticky{position:sticky;top:120px}
.split .steps > div{padding:52px 0;border-top:1px solid var(--line)}
.split .steps > div:first-child{border-top:0;padding-top:0}
.split .steps p.big{font-size:clamp(19px,1.55vw,24px);letter-spacing:-.02em;line-height:1.3}

/* G · Dichte Liste (Firmierungen, Verfahren, Geschäftsführung, direkte Wege) */
.list{padding:0 6vw 96px}
.list .row{display:grid;grid-template-columns:34px 1.1fr 2fr;gap:20px;border-top:1px solid var(--line);padding:16px 0;align-items:start}
.list .row .i{font-family:var(--mono);font-size:9px;color:#A8AEB5}
.list .row .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.list .row .v{font-size:15px;line-height:1.55}
.list .row a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.list .row a:hover{color:var(--signal);border-color:var(--signal)}
.list .row.two{grid-template-columns:34px 1fr}

/* H · Aussagenband */
.band{padding:0 6vw 96px}
.band .in{border-top:1px solid var(--line);padding-top:44px}
.band p{font-size:clamp(24px,2.8vw,40px);font-weight:400;letter-spacing:-.03em;line-height:1.12;max-width:20ch}

/* I · Verweis nach außen; ohne Linie darüber, die Linkzeile läuft über die ganze
   Breite und ist selbst die Linie (Gruppe, Distribution, Karriere) */
.out{padding:0 6vw 110px}
.out .in{padding-top:0}
.out a.dim{max-width:none}
.out .k{font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.out .lbl{max-width:46ch}

/* Block: Zwischentitel links, Text rechts, Linie oben */
.blk{padding:0 6vw 96px}
.blk .in{border-top:1px solid var(--line);padding-top:44px;display:grid;grid-template-columns:1fr 1.25fr;gap:64px}
.blk .in > .full{grid-column:1/-1}
.blk h2.sec{margin-bottom:0}

/* Linkzeile statt Button: Text in Martian Mono, eine 1-px-Linie, Pfeil; beim Überfahren rot */
a.dim{display:flex;align-items:center;gap:16px;max-width:880px;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;line-height:1.5}
a.dim .l{flex:1;min-width:40px;height:1px;background:var(--line);transition:background .2s ease}
a.dim .e{display:none}
a.dim .t{flex:none;white-space:nowrap}
a.dim:hover{color:var(--signal)}
a.dim:hover .l{background:var(--signal)}
.dims{display:grid;gap:14px}
/* Linkzeile klein, etwa ROUTE je Standort */
a.dim.sm{font-size:9px;letter-spacing:.14em;gap:12px;max-width:240px;margin-top:12px}
a.dim.sm .l{min-width:24px}

/* Versalien nur per CSS, im Markup steht der Text wie im Text-Doc */
.list .row .k,.ad .ty,.job .m,.fig .cap,.cards h3{text-transform:uppercase}
.list .row .k.tbd{text-transform:none}

/* Standorte */
.jump{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:28px;margin-bottom:10px}
.jump a{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:9px 13px;border:1px solid var(--line);
  border-radius:4px;color:var(--mid);text-decoration:none}
.jump a:hover{border-color:#1A1E23;color:var(--ink)}
.jump a.tbd{color:var(--signal);border-color:#F6B3AF}
.cntry{display:grid;grid-template-columns:1fr 2.6fr;gap:40px;border-top:1px solid var(--line);
  padding:34px 0 42px;scroll-margin-top:100px}
.cntry h3{font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.cntry .code{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--mid);margin-top:10px}
.addrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 44px}
.ad .nm{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;line-height:1.6}
.ad .ty{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--mid);margin:3px 0 10px}
.ad p{font-size:14.5px;line-height:1.6}
.ad p a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.ad p a:hover{color:var(--signal);border-color:var(--signal)}

/* Presse */
.profile{display:grid;grid-template-columns:1fr 1.7fr;gap:56px;border-top:1px solid var(--line);padding-top:36px}
.profile .txt p{font-size:17px;line-height:1.62}
.copyBtn{font-family:var(--mono);font-size:9px;letter-spacing:.16em;border:1px solid var(--line);background:#fff;
  padding:8px 13px;border-radius:4px;cursor:pointer;color:var(--ink);margin-top:22px}
.copyBtn:hover{border-color:var(--signal);color:var(--signal)}
.qa{display:grid;grid-template-columns:34px 1fr 1.45fr;gap:20px;border-top:1px solid var(--line);padding:22px 0}
.qa .i{font-family:var(--mono);font-size:9px;color:#A8AEB5;padding-top:6px}
.qa h3{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.qa p{font-size:15.5px;line-height:1.6}
.news .row{display:grid;grid-template-columns:34px 170px 1fr;gap:20px;border-top:1px solid var(--line);padding:18px 0;align-items:baseline}
.news .row .i{font-family:var(--mono);font-size:9px;color:#A8AEB5}
.news .row .d{font-family:var(--mono);font-size:9px;letter-spacing:.06em}
.news .row a{font-size:16px;line-height:1.4;color:var(--ink);text-decoration:none}
.news .row a:hover{color:var(--signal)}
.news .row .o{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--mid);margin-top:6px;line-height:1.7}
#contact{scroll-margin-top:100px}
/* Presse */
#answers,#news{scroll-margin-top:80px}
.sheet .blk.first{padding-top:110px}
.sheet .blk.first .in{border-top:0;padding-top:0}
.contact{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;line-height:1.3}
.contact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{color:var(--signal);border-color:var(--signal)}
.prof{max-width:66ch}
.prof p{font-size:17px}
.sheet .mt-14{margin-top:14px}
.dims .dnote{margin-top:-6px}
.sheet .list.news{padding-bottom:120px}
.news .row .nt{font-size:16px;line-height:1.4}
.news .row .tz{font-size:14.5px;line-height:1.55;color:var(--mid);margin-top:6px;max-width:62ch}
.qa .doc p+p{margin-top:.6em}
/* Meldung: Aufbau wie Rechtliches, Titel rechts über dem Text */
.newsPage .lbl.up{text-transform:uppercase}
.newsPage .nd{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;margin-top:18px}
.newsPage .back{display:inline-block;margin-top:40px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);text-decoration:none}
.newsPage .back:hover{color:var(--signal)}
/* Detailseite einer Stelle: wie die Seite einer Meldung; links Umfang, Ort, Eintritt, unten PDF und BEWERBEN */
.jobPage .jm{text-transform:uppercase;line-height:1.9;color:var(--mid)}
.jobPage .k{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:44px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;line-height:1.8}
.jobPage .k a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.1em}
.jobPage .k a:hover{color:var(--signal);border-color:var(--signal)}
.jobPage .doc ul{margin:.4em 0 .9em 1.1em}
.jobPage .doc li{font-size:15.5px;line-height:1.6}
.legal.newsPage h1{font-size:clamp(28px,2.6vw,42px);letter-spacing:-.03em;line-height:1.12;margin:0 0 34px;max-width:24ch}
/* 404: Englisch und Deutsch untereinander */
.nf .nfLang + .nfLang{border-top:1px solid var(--line);margin-top:48px;padding-top:40px}
.nf .nfH{font-size:clamp(28px,2.6vw,42px);font-weight:400;letter-spacing:-.03em;line-height:1.12}
.nf .nfLang p{font-size:16px;line-height:1.62;margin:16px 0 26px;max-width:52ch}

/* Karriere */
.job{display:grid;grid-template-columns:34px 1.3fr 1fr 1fr;gap:20px;border-top:1px solid var(--line);padding:20px 0;align-items:baseline}
.job .i{font-family:var(--mono);font-size:9px;color:#A8AEB5}
.job h3{font-size:18px;font-weight:400;letter-spacing:-.015em;line-height:1.3}
.job .m{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--mid);line-height:1.8}
.job .k{font-family:var(--mono);font-size:9px;letter-spacing:.04em;line-height:1.8}

/* Rechtliches: nur Textspalte */
.legal{display:grid;grid-template-columns:1fr 2fr;gap:56px;padding:120px 6vw 110px}
.legal h1{font-size:clamp(32px,3.4vw,54px);font-weight:400;letter-spacing:-.035em;line-height:1.06;margin-top:18px}
.legalNav{display:flex;flex-direction:column;gap:10px;margin-top:40px}
.legalNav a{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--mid);text-decoration:none}
.legalNav a:hover,.legalNav a[aria-current]{color:var(--ink)}
.imp .row{display:grid;grid-template-columns:1fr 1.8fr;gap:24px;border-top:1px solid var(--line);padding:14px 0}
.imp .row .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--mid);padding-top:4px}
.imp .row .v{font-size:15.5px;line-height:1.6}
.legalTbd{border-top:1px solid var(--line);padding-top:22px}
.legalTbd p{font-size:16px;line-height:1.62;max-width:60ch}

/* Hilfsklassen statt style-Attributen. Mit .sheet davor, damit sie über den Bausteinen stehen
   (etwa .sec + .txt). */
.sheet .ar-4-5{aspect-ratio:4/5}
.sheet .ar-4-3{aspect-ratio:4/3}
.sheet .ar-16-9{aspect-ratio:16/9}
.sheet .ar-16-10{aspect-ratio:16/10}
.sheet .ar-3-1{aspect-ratio:3/1}
.sheet .blk.last{padding-bottom:120px}
.sheet .mt-26{margin-top:26px}
.sheet .mt-30{margin-top:30px}
.sheet .mt-34{margin-top:34px}
.sheet .list.flush{padding:0}
.sheet .list.pb-30{padding-bottom:30px}
.sheet .band.last{padding-bottom:120px}

@media(max-width:980px){
  .lead,.split,.figs,.cards .grid,.steprows .srow{grid-template-columns:1fr;gap:30px}
  .steprows .srow .ph{width:100%;max-width:520px}   /* Handy volle Breite, auf dem Tablet nicht größer als nötig */
  .carry .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .list .row{grid-template-columns:1fr}
  a.dim{flex-wrap:wrap} a.dim .t{white-space:normal;flex:1 1 auto}
  .blk .in,.cntry,.addrs,.profile,.qa,.job,.legal,.imp .row,.news .row{grid-template-columns:1fr;gap:12px}
}

/* Gütesiegel: unverändert in Form und Farbe, nur gleichmäßig skaliert (TÜV-Nutzungsvereinbarung).
   Größe setzt der Baustein: höchstens 100 px breit und 96 px hoch, Seitenverhältnis der Datei.
   Bewegung nur als Ganzes (site.js, data-motion): rigid verschiebt .sfr, contour formt die helle Fläche. */
.cards .grid > div{display:flex;flex-direction:column}
.seals{display:flex;flex-wrap:wrap;align-items:flex-end;gap:26px}
.seals.in-card{margin-top:auto;padding-top:30px}
.seal{display:block;flex:none;line-height:0;text-decoration:none}
.seal .sfr{display:block;will-change:transform}
.seal img{display:block}
.seals:not(.framed)[data-motion="contour"] .sfr,.seals:not(.framed)[data-motion="step"] .sfr{padding:16px;background:var(--seal-bg);will-change:clip-path}
.extra{display:flex;align-items:flex-end;gap:26px}
.extra .seals{flex:none}
.extra .aside{margin:0}
@media (prefers-reduced-motion:reduce){.seal .sfr{transform:none!important}}

/* Kanten-Frame: Frame mit der Kontur der Bildplätze (site.js), Zeichen mittig auf 40 % der
   Kante (KFM-030b erlaubt proportionale Verkleinerung, keine Mindestgröße),
   object-fit: contain, also nur gleichmäßig skaliert. Looks über seal_look in site.php:
   line  weiße Fläche, Kontur als feine Linie · fill  helle Fläche · tile  helle Fläche, Zeichen auf weißer Kachel ·
   tile-dark  Fläche der Bildebene, Zeichen auf weißer Kachel (das TÜV-Logo braucht hellen Grund). */
.seals.framed{display:grid;grid-template-columns:repeat(3,minmax(0,var(--skf)));gap:var(--skf-gap);align-items:start}
.seals.framed.in-card{display:block;margin-top:auto;padding-top:30px}
.seals.framed .seal{width:100%;max-width:var(--skf)}
.seals.framed.in-card .seal{width:var(--skf);max-width:100%}
/* Steelgreen auf Standards: ein Zeichen unter dem Text, Frame wie in den Karten */
.seals.in-blk{margin-top:34px}
.seals.framed.in-blk{display:block}
.seals.framed.in-blk .seal{display:block;width:var(--skf);max-width:100%}
.skf{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--seal-bg)}
.skf .sfr{position:absolute;left:30%;top:30%;width:40%;height:40%;display:block}
.skf img{width:100%;height:100%;object-fit:contain;display:block}
.look-line .skf{background:#fff}
.skf .skl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.skf .skl path{fill:none;stroke:#C9CED3;stroke-width:2}
.look-tile .skf .sfr,.look-tile-dark .skf .sfr{background:#fff;padding:7%;box-sizing:border-box}
.look-tile-dark .skf{background:var(--bg)}
.seal:focus-visible .skf{outline:2px solid var(--ink);outline-offset:3px}

/* Karriere: Links je Stelle (PDF oder Ausschreibung, Bewerben) */
.job .k{display:flex;flex-wrap:wrap;gap:6px 22px}
.job .k a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.1em}
.job .k a:hover{color:var(--signal);border-color:var(--signal)}

/* Rechtstexte (Typ doc): Absätze, Zwischentitel, Aufzählungen, Links */
.doc p{font-size:15.5px;line-height:1.6}
.doc a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.doc a:hover{color:var(--signal);border-color:var(--signal)}
.imp .row .v.doc p{font-size:15.5px}
.imp .row .v.doc p+p{margin-top:.5em}
.legalDoc{border-top:1px solid var(--line);padding-top:22px;max-width:68ch}
.legalDoc p{margin:0 0 .9em}
.legalDoc h2{font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.25;margin:1.8em 0 .6em}
.legalDoc h3{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;margin:2.2em 0 .8em}
.legalDoc h2:first-child,.legalDoc h3:first-child{margin-top:0}
.legalDoc ul{margin:0 0 .9em;padding-left:1.1em}
.legalDoc li{font-size:15.5px;line-height:1.6;margin-bottom:.3em}

/* Innenschatten an sämtlichen Rahmen (Bilder, Filme, Siegel, PCF-Diagramm, rote
   Plätze). site.js legt eine SVG-Ebene über den Inhalt: die Fläche außerhalb der Kontur, nach unten versetzt und
   weichgezeichnet; der Clip des Frames lässt nur den Schatten auf dem Inhalt stehen. Die Ebene fängt keine Klicks. */
.ph.tbd.cut{position:relative}
.ph > svg.ish,.ph.pcfd > svg.ish,.skf > svg.ish{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;overflow:visible}

/* Shop-Demo in Ebene 02: Film über dem Standbild, ohne Drift und ohne Skalierung
   (gebaut gegen die Kontur des Frames); Pause-Knopf unten links im Frame, grau wie das Banner der Webanalyse. */
.ph.img.demo img,.ph.img.demo > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;will-change:auto}
.ph.demo .mot{position:absolute;left:34px;bottom:34px;z-index:2;width:30px;height:30px;padding:0;border:0;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(70,76,82,.84);opacity:0;transition:opacity .2s ease}
/* Knopf nur bei Hover über dem Film, beim Fokus mit der Tastatur und solange angehalten; ohne Maus kurz nach dem Tippen
   (WCAG 2.2.2 bleibt erfüllt) */
.ph.demo .mot:focus-visible,.ph.demo.motPaused .mot,.ph.demo.motShow .mot{opacity:1}
@media (hover:hover){.ph.demo:hover .mot{opacity:1}}
.ph.demo .mot[hidden]{display:none}
.ph.demo .mot svg{width:12px;height:12px;display:block;fill:currentColor}
.ph.demo .mot .pl,.ph.demo .mot[aria-pressed="true"] .pa{display:none}
.ph.demo .mot[aria-pressed="true"] .pl{display:inline}
.ph.demo .mot:hover{background:rgba(70,76,82,.92)}
.ph.demo .mot:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ph.demo .mot,.ph.demo > video{display:none}}

/* Bewegte Bilder: Distribution Güte, Toleranz, Oberfläche (der Film
   folgt dem Scroll) und der Heat Patch in Ebene 01 (einmal beim Hereinscrollen). Film über dem Standbild, beide ohne
   Drift und ohne Skalierung (das Standbild ist das erste Bild des Films); der Innenschatten liegt darüber, der Rahmen
   steht. Bei reduzierter Bewegung steht das Bild. */
.ph.img.mov img,.ph.img.mov > video.bewegt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){.ph.img.mov > video.bewegt{display:none}}

/* Karriere, Bildplatz 3:1: drei Bilder im selben Kanten-Frame,
   „Trennschnitt“. Jedes Bild in einer eigenen Hülle über die ganze Fläche; die Hülle eines neuen Bildes schneidet
   site.js von rechts zu (clip-path inset), eine senkrechte Kante läuft mit dem Scroll von links nach rechts, das neue
   Bild links von ihr; an der Kante eine weiße Fuge von 2 px, nur während des Schnitts. Bild 2 und 3 erst, wenn site.js
   den Rahmen freischaltet (.go): ohne JavaScript und bei reduzierter Bewegung steht nur Bild 1, die übrigen laden
   nicht. Kontur und Kerbe am Rahmen, Drift am img, der Innenschatten liegt über allem. */
.ph.img.seq .sq{position:absolute;inset:0}
.ph.img.seq .sq ~ .sq{display:none;clip-path:inset(0 100% 0 0)}
.ph.img.seq.go .sq ~ .sq{display:block}
.ph.img.seq .kerf{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ph.img.seq .sq ~ .sq,.ph.img.seq.go .sq ~ .sq,.ph.img.seq .kerf{display:none}}

/* PCF-Diagramm auf Standards:
   Fläche wie die Siegel im Kanten-Frame, waagrecht; ist der Platz schmaler als 560 px, die senkrechte Fassung.
   Die Höhe folgt der Zeichnung (16:10 waagrecht, 2:3 senkrecht). Farben der Zählung setzt site.js. */
.ph.pcfd,.ph.pcfd.cut{display:block;padding:0;background:var(--seal-bg);position:relative;container-type:inline-size;color:var(--ink)}
.pcfd svg{display:none;width:100%;height:auto;overflow:visible}
.pcfd .pcfd-wide{display:block}
@container (max-width:560px){
  .pcfd .pcfd-wide{display:none}
  .pcfd .pcfd-narrow{display:block}
}
.pcfd svg text{font-family:var(--sans);fill:var(--ink)}
.pcfd svg .own text,.pcfd svg .n,.pcfd svg .m,.pcfd svg .foot,.pcfd svg .gate text{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em}
.pcfd svg .own text{fill:var(--mid)}
.pcfd svg .own line{stroke:#C9CED3;stroke-width:1}
.pcfd svg .n{fill:#A8AEB5}
.pcfd svg .w{font-size:21px;letter-spacing:-.015em}
.pcfd svg .m{fill:var(--ink)}
.pcfd svg .s{font-size:13.5px;fill:var(--mid);letter-spacing:0}
.pcfd svg .foot{fill:#A8AEB5;font-size:9px;letter-spacing:.12em}
.pcfd svg .out text,.pcfd svg text.out{fill:#B9C0C7}
.pcfd svg line.out,.pcfd svg .own line.out{stroke:#C9CED3;stroke-dasharray:3 4}
.pcfd svg .trk .rest{stroke:#B9C0C7;stroke-width:1.2;stroke-dasharray:3 4}
.pcfd svg .trk .base,.pcfd svg .dim .base{stroke:#D5DADF;stroke-width:2.5}
.pcfd svg .trk .ink{stroke:var(--ink);stroke-width:2.5}
.pcfd svg .trk circle{fill:var(--ink);stroke:var(--ink);stroke-width:1.5}
.pcfd svg .trk circle.out{fill:var(--seal-bg);stroke:#B9C0C7}
.pcfd svg .dim .base{stroke-width:1}
.pcfd svg .dim .ink{stroke:var(--ink);stroke-width:1}
.pcfd svg .dim .ext{stroke:#C9CED3;stroke-width:1;stroke-dasharray:2 3}
.pcfd svg .dim .tick{stroke:var(--ink);stroke-width:1.2}
.pcfd svg .dim line.out{stroke:#C9CED3;stroke-width:1}
.pcfd svg .gate line{stroke:var(--signal);stroke-width:2}
.pcfd svg .gate text{fill:var(--signal)}
.pcfd svg.pcfd-narrow .w{font-size:20px}

/* ---------- Handy und Tablet (bis 980 px) ---------- */
@media(max-width:980px){
  /* Zeitleiste auf Gruppe: das Bild quer (4:3), F1880 mittig unter der Kerbe, steht oben auf einer weißen Fläche
     über die ganze Breite der Card bis unter die Kopfleiste; die Jahre laufen darunter durch und blenden an ihrer
     Unterkante weich aus. Der negative Rand hält das Bild in Ruhe an seinem Platz (die Fläche liegt im Abstand
     unter den Kennzahlen). */
  .split .sticky{top:0;z-index:3;background:#fff;margin:-84px -6vw 0;padding:84px 6vw 20px}
  .split .sticky::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;
    background:linear-gradient(#fff,rgba(255,255,255,0))}
  .split .sticky .ph{aspect-ratio:4/3}
  .split .sticky .ph img,.split .sticky .ph > video{object-position:50% 45%}
  /* Standorte: mehrere Adressen eines Landes mit dem Abstand wie am Desktop */
  .addrs{row-gap:30px}
  /* Linkzeilen (site.js setzt one, solo, two): passt alles ohne Linie in eine Zeile, steht es so, der Text links,
     Label und Pfeil rechts, ein Pfeil allein direkt nach dem Text; sonst der Text in der ersten Zeile, Linie und
     Label mit Pfeil rechts in der zweiten */
  a.dim.one{flex-wrap:nowrap}
  a.dim.one .t,a.dim.two .t{flex:none;white-space:nowrap}
  a.dim.one .l,a.dim.one:hover .l{min-width:0;background:transparent}
  a.dim.one.solo .l{display:none}
  a.dim.two{flex-wrap:wrap;row-gap:10px}
  a.dim.two > .t:first-child{flex:1 0 100%;white-space:normal}
  /* Presse, Profil: der Knopf zum Kopieren nach dem Text */
  .blk .in > div:has(> .copyBtn){display:contents}
  .blk .in .copyBtn{order:1;justify-self:start;margin-top:10px}
}
@media(max-width:700px){
  .sheet .ar-3-1{aspect-ratio:3/2}   /* Karriere: der Bildplatz am Handy höher */
}
/* Handy quer (seit 20.10.): die Zeitleiste auf Gruppe wie am Desktop, das Bild links stehend unter der Kopfleiste
   und so hoch wie das Fenster darunter, die Jahre rechts daneben. Hochkant füllte das Bild quer das ganze Fenster und
   verdeckte die Jahre. Nur bis 500 px Fensterhöhe; hochkant, Tablet und Desktop bleiben. */
@media (hover:none) and (orientation:landscape) and (max-height:500px){
  .split{grid-template-columns:1fr 1fr;gap:32px}
  .split .sticky{top:84px;z-index:auto;background:none;margin:0;padding:0}
  .split .sticky::after{display:none}
  .split .sticky .ph{aspect-ratio:auto;height:calc(100vh - 104px);height:calc(100svh - 104px)}
}
/* Handy quer (seit 20.10.): Bild und Text nebeneinander wie am Desktop, damit kein Bild höher wird als das Fenster:
   Schritte im Handel, die vier Spalten „Auf Lager“, Kennzahlen, Blöcke mit Titel links. Die Karten auf Standards
   bleiben untereinander (drei Spalten sind zu schmal). Nur bis 500 px Fensterhöhe; hochkant, Tablet und Desktop bleiben. */
@media (hover:none) and (orientation:landscape) and (max-height:500px){
  .steprows .srow{grid-template-columns:1fr 1.25fr;gap:32px;padding:32px 0}
  .steprows .srow:first-child{padding-top:0}
  .steprows .srow .ph{max-width:none}
  .lead,.blk .in,.profile{grid-template-columns:1fr 1.25fr;gap:32px}
  .carry .cgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .figs{grid-template-columns:repeat(4,1fr)}
}

/* FRANKSTAHL · landing.css
   Startseite: Bühne mit den Filmen, Texte über dem Film, Shop-Now-Card, Scroll-Hinweis, drei Cards (Ebenen) und die
   Schlusssequenz. Hilfsklassen statt style-Attributen (.mb-22, .mb-24, .g26, .marks, .ar-…). Teil von site.css, nur die Startseite nutzt es.
   © 2026 000fff.studio OG · Konzept, Gestaltung und Programmierung */

/* ---------- Bühne: alle Filme fest im Fenster, die Cards schieben sich darüber ---------- */
#stage{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden}
#stage .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none}
#stage #film01{opacity:1}                       /* bis stage.js läuft, steht das erste Bild von Film 01 */
.scrub{position:relative;pointer-events:none;height:100vh}   /* reine Abstandshalter; die Höhe setzt stage.js */
.finale{position:relative;height:100vh}

#topShade{position:absolute;left:0;right:0;top:0;height:48vh;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.24) 48%,rgba(0,0,0,0) 100%)}
#claim,#claim3{position:absolute;left:7vw;top:40%;z-index:4;pointer-events:none;color:#fff;
  font-size:clamp(34px,4.6vw,64px);font-weight:400;letter-spacing:-.03em;line-height:1.04;
  text-shadow:0 2px 34px rgba(0,0,0,.6);opacity:0;will-change:opacity,transform}
/* Nachsatz zur Zeile in Film 03: klein, Martian Mono, direkt hinter „everywhere,“ */
#claim3x{font-family:var(--mono);font-size:clamp(11px,.95vw,15px);font-weight:400;letter-spacing:.04em;
  line-height:1;white-space:nowrap;margin-left:.9em;display:inline-block;opacity:0;will-change:opacity,transform}

/* Shop-Now-Card unten in der Breite der Kopfleiste; stage.js fährt sie ein und beim ersten Scrollen aus */
#cta{position:absolute;left:50%;bottom:var(--edge);z-index:5;width:var(--bar);
  background:var(--paper);color:#15181A;border-radius:8px;padding:22px 24px;
  transform:translate(-50%,140%);will-change:transform,opacity}
#cta .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:#6A7075;margin-bottom:10px}
#cta h3{font-size:25px;font-weight:500;letter-spacing:-.02em;margin-bottom:7px}
#cta p{font-size:13.5px;color:#5C6368;line-height:1.5;margin-bottom:17px}
#cta a{display:block;text-align:center;text-decoration:none;background:#2A2F33;color:#fff;
  border-radius:5px;padding:13px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  transition:background .18s ease}
#cta a:hover{background:var(--signal)}

#scrollHint{position:fixed;left:0;top:0;z-index:20;pointer-events:none;opacity:0;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;white-space:nowrap;padding-left:22px;
  transform:translate(-400px,-400px);
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 16px rgba(249,66,58,.6),
              0 0 34px rgba(249,66,58,.35),0 2px 11px rgba(0,0,0,.8);
  will-change:transform,opacity}
#scrollHint b{font-weight:600}
/* Touch-Geräte (seit 20.10.): kein Mauszeiger; der Hinweis steht mittig über der Shop-Now-Card und geht mit ihr
   (Lage und Deckkraft setzt stage.js), darüber ein kleiner Strich, der nach oben läuft */
@media (hover:none){
  #scrollHint{padding-left:0}
  #scrollHint::before{content:'';position:absolute;left:50%;bottom:calc(100% + 8px);width:1px;height:18px;margin-left:-.5px;
    background:currentColor;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(249,66,58,.6),0 1px 8px rgba(0,0,0,.6);
    animation:hintUp 1.8s cubic-bezier(.45,0,.25,1) infinite}
}
@keyframes hintUp{0%{transform:translateY(8px);opacity:0}35%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
@media (hover:none) and (prefers-reduced-motion:reduce){#scrollHint::before{animation:none;opacity:.8}}

/* ---------- Schlusssequenz ----------
   Die Welt in Pixeln des 854er-Bildes; die Videos sind 3072 × 2088 groß und stehen im Rahmen von 1366 × 928
   (das Bild plus die in Photoshop erweiterte Szene: links und rechts je 256 px, oben 144 px, unten 304 px). */
#stage .finBox{position:absolute;inset:0;opacity:0;pointer-events:none}
#finWorld{position:absolute;left:0;top:0;width:854px;height:480px;transform-origin:0 0;will-change:transform}
.finBox video{position:absolute;left:-256px;top:-144px;width:1366px;height:928px;display:block;max-width:none}
#film04l{opacity:0}

/* ---------- Cards (Ebenen) ---------- */
.layer{position:relative;z-index:10;margin:0 var(--edge);background:#fff;padding:120px 6vw 110px;will-change:clip-path}
.layer h2{font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:-.03em;line-height:1.12;max-width:15ch;margin-bottom:40px}
.layer .block{margin-bottom:78px}
.layer .block:last-child{margin-bottom:0}
.layer .rule{height:1px;background:var(--line);margin:64px 0}
.layer .cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.layer .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.layer .cols2.g26{gap:26px}
.layer .copy{max-width:58ch}
.layer .txt p.lede{font-size:clamp(18px,1.3vw,21px);line-height:1.5;letter-spacing:-.01em}
.layer .brandRow{display:grid;grid-template-columns:1fr 2fr;gap:24px;border-top:1px solid var(--line);padding:18px 0;align-items:start}
.layer .brandRow .nm{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.layer .brandRow .nm.tbd{text-transform:none;letter-spacing:.04em}
.layer .brandRow .co{font-size:14px;color:var(--ink)}
.layer .mb-22{margin-bottom:22px}
.layer .mb-24{margin-bottom:24px}
.layer .ar-4-3{aspect-ratio:4/3}
.layer .ar-16-9{aspect-ratio:16/9}
/* Ebene 03, Block 02: die Zeichen in den Kanten-Frames nebeneinander */
.layer .marks{margin-top:40px}
/* Ebene 02: Raster wie Ebene 01 und 03; jede Linkzeile über die ganze Breite der
   Card schließt ihren Teil (TheSteel.com nach den Kennzahlen statt einer Linie, Steelcoin X am Ende); das Bild von
   Steelcoin X 4:3 und halb so breit wie die Spalte, bündig mit dem Screen von TheSteel.com */
.layer .lnk a.dim{max-width:none}
.layer .block.lnk{margin-top:-14px}
.layer .side .sideImg{width:50%}

@media(max-width:980px){
  .layer .cols2,.layer .cols4{grid-template-columns:1fr}
  .layer .side .cols2{gap:32px}
  .layer .side .sideImg{width:72%}
}

/* Handy: die Shop-Demo höher (5:4, mittig beschnitten, das Suchfeld bleibt ganz im Bild) */
@media(max-width:700px){.layer .ph.demo.ar-16-9{aspect-ratio:5/4}}
/* Touch-Geräte: die Bühne so hoch wie das Fenster bei eingefahrener Browserleiste; sonst skalieren die Filme beim
   ersten Scroll sichtbar nach, wenn die Leiste einfährt */
@media (hover:none){#stage{bottom:auto;height:100vh;height:100lvh}#cta{position:fixed}}   /* die Card am sichtbaren Fensterrand */
/* Handy quer (seit 20.10.): die Card als schmale Leiste so hoch wie die Kopfleiste, Titel links, Knopf rechts;
   Eyebrow und Satz entfallen, damit der Film frei bleibt. Nur bis 500 px Fensterhöhe, Tablets bleiben wie sie sind. */
@media (hover:none) and (orientation:landscape) and (max-height:500px){
  #cta{display:flex;align-items:center;gap:16px;height:52px;padding:0 8px 0 24px}
  #cta .eyebrow,#cta p{display:none}
  #cta h3{flex:1;min-width:0;font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #cta a{flex:none;padding:0 22px;height:36px;line-height:36px}
}
/* Handy quer (seit 20.10.): die Ebenen wie am Desktop, Text links, Bild oder Film rechts; die Shop-Demo von
   TheSteel.com bleibt in voller Breite. Nur bis 500 px Fensterhöhe. */
@media (hover:none) and (orientation:landscape) and (max-height:500px){
  .layer .cols2{grid-template-columns:1fr 1fr;gap:32px}
  .layer .cols4{grid-template-columns:repeat(4,1fr)}
  .layer .side .sideImg{width:50%}
  .layer .block.cols2:has(.ph.demo){grid-template-columns:1fr}
}

/* FRANKSTAHL · sound.css (Teil von site.css, nur wenn sound.mode 'on')
   Lautsprecher-Symbol der Startseite. Position 'bar': in der Kopfleiste rechts vor dem Warenkorb;
   Position 'stage': graues Glas unten rechts auf der Bühne wie das Cookie-Banner.
   Der Knopf steht mit hidden im HTML; sound.js zeigt ihn erst, wenn Web Audio da ist, und setzt dann an #bar die
   Klasse snd, damit das Logo in der Mitte bleibt (links 15 px Menüknopf, rechts 15 + 18 + 19 px).
   © 2026 000fff.studio OG · Konzept, Gestaltung und Programmierung */

.barR{display:flex;align-items:center;gap:18px}
#bar.snd #burger{margin-right:37px}

.soundBtn{position:relative;width:15px;height:15px;background:none;border:0;padding:0;cursor:pointer;display:block;
  color:#383838;flex:none}
.soundBtn[hidden]{display:none}
.soundBtn::before{content:"";position:absolute;left:-15px;right:-14px;top:-14.5px;bottom:-14.5px;border-radius:6px}
.soundBtn svg{position:absolute;left:0;top:0;width:15px;height:15px;display:block;pointer-events:none;
  transition:opacity .2s ease}
.soundBtn .i{opacity:0}
.soundBtn[aria-pressed="true"] .i{opacity:1}
.soundBtn[aria-pressed="true"] .o{opacity:0}
.soundBtn[aria-busy="true"] .i{opacity:.4}
.soundBtn:focus{outline:none}
.soundBtn:focus-visible::before{outline:2px solid var(--signal);outline-offset:-4px}

/* Bühne: graues Glas unten rechts, über Film und Cards */
.soundBtn.stage{position:fixed;right:var(--edge);bottom:var(--edge);z-index:55;width:40px;height:40px;border-radius:50%;
  background:rgba(110,114,118,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.soundBtn.stage svg{left:12.5px;top:12.5px}
.soundBtn.stage::before{left:-2px;right:-2px;top:-2px;bottom:-2px;border-radius:50%}

@media (prefers-reduced-motion:reduce){.soundBtn svg{transition:none}}