/* ==========================================================================
   LORIEN — Design System
   Gebaut nach dem Erscheinungsbild «Monumental Light»:
   Boutique Brutalism × Architectural Elegance.
   Radius 0 · strukturelle Rahmen · Versalien in der Anzeige · Copper als Akzent.
   ========================================================================== */

:root {
  /* Neutrale Skala — Erscheinungsbild Kapitel 03 */
  --stone:              #fcf9f5;   /* Grundflaeche */
  --chalk:              #f5f2ec;
  --sand:               #e4e3da;
  /* Warm bei gleicher Helligkeit. Die drei Vorgaenger hatten Chroma 0 auf einem
     durchgehend warmen Grund und lasen sich dadurch leicht blau.
     L* 83.8→83.6 · 57.5→56.8 · 38.2→38.2, Kontrastverlust null. */
  --concrete:           #d4d0c7;   /* duenne Linie */
  --iron:               #8c8880;
  --carbon:             #5c5a52;   /* gedaempfter Text */
  --anthracite:         #32332d;   /* Text, Struktur */
  --obsidian:           #16160f;   /* dunkle Flaeche */

  /* Akzentskala */
  --copper-light:       #e8944d;
  --copper:             #d4702a;   /* CTA, Akzent, Highlights */
  --copper-dim:         #b85e22;   /* Knopfflaeche, unter Weiss 4.56:1 */

  /* Rollen */
  --surface:            var(--stone);
  --surface-container:  var(--chalk);
  --surface-dim:        var(--sand);
  --surface-invert:     var(--obsidian);
  --on-surface:         var(--anthracite);
  --on-surface-muted:   var(--carbon);
  --on-invert:          #f6f3ee;
  --on-invert-muted:    #a8a79e;
  --on-accent:          #ffffff;
  --accent-text:        #a9541c;   /* Textakzent auf hell, 5.04:1 */

  /* Linien — Erscheinungsbild Kapitel 05 */
  --line:               var(--concrete);
  --line-invert:        #34342c;
  --line-strong:        var(--anthracite);
  --line-field:         var(--iron);

  --wrap:               1200px;
  --measure:            60ch;      /* CI: Max Line Width */
  --nav-h:              clamp(58px, 11vw, 72px);
  --r:                  28px;      /* Grundzeile */

  /* Bewegung — CI: nichts ist schnell, alles ist bewusst */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration:           700ms;
  --duration-fast:      300ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

body {
  position: relative;
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .02em;            /* CI: Body Copy +0.02em */
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Betonstruktur — CI-Prinzip 03, feines Rauschen ueber der ganzen Seite */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; hyphens: manual; }

::selection { background: var(--copper); color: var(--on-accent); }
:target, [id] { scroll-margin-top: calc(var(--nav-h) + var(--r)); }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }

/* ---------- Typografie — CI Kapitel 04 ---------- */

h1, h2, h3, h4, .eyebrow, .nav__link, .nav__logo, .nav__tel, .footer__head, .btn,
.field label, .deflist__key {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Headlines: Versalien, 700, -0.04em */
h1, h2, h3, h4 {
  font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: 1.04;
}

h1, .hero__title { font-size: clamp(2.3rem, 7.4vw, 6.2rem); line-height: .95; }
h2, .slab__title { font-size: clamp(1.9rem, 5vw, 3.6rem); margin-bottom: var(--r);
                   max-width: 20ch; }
h3              { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.15; }
.slab__title--s { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }

/* Labels und Overlines: Versalien, 700, +0.2em */
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em;
           text-transform: uppercase; color: var(--copper); }

.lead  { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7;
         color: var(--on-surface); max-width: var(--measure); }
.small { font-size: .875rem; line-height: 1.6; color: var(--on-surface-muted); }

p { max-width: var(--measure); }

/* ---------- Raster ---------- */

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  /* Auf 360px sind zwei mal 1.5rem schon 13 % der Breite. */
  padding-left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right));
}
.stack { display: grid; gap: var(--r); }
.row   { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mt-l  { margin-top: calc(var(--r) * 1.5); }

/* ---------- Navigation ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  background: rgba(252, 249, 245, .92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line-strong);   /* CI: border-architectural */
}
.nav__inner {
  max-width: var(--wrap); margin-inline: auto; height: 100%;
  /* Gleicher Rand wie .wrap — sonst steht das Logo nicht auf derselben Kante
     wie der Text darunter. */
  padding-left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: space-between;
  /* Nur Mindestabstand — space-between verteilt den Rest. Bei 320px braucht
     Logo + Anrufen + Kontakt 274 von 285 Pixeln, da darf die Luecke nicht
     starr auf 24px stehen. */
  gap: clamp(.75rem, 3vw, 1.5rem);
}
.nav__logo {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.nav__logo img { width: 28px; height: 28px; display: block; }
.footer .nav__logo img { width: 32px; height: 32px; }

/* Zwei Ziele, immer sichtbar — kein Klappmenue. Beide Flaechen sind 44px hoch,
   das ist die Untergrenze fuer eine Fingerkuppe. */
.nav__act { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 2rem); }

.nav__link, .nav__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  transition: color var(--duration-fast) var(--ease-smooth);
}
/* Der geschriebene Weg ist die Hauptsache — er traegt darum den
   Kupferstrich, den vorher die Nummer hatte. */
.nav__link {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-surface); box-shadow: inset 0 -2px 0 var(--copper);
}
.nav__link:hover { box-shadow: inset 0 -4px 0 var(--copper); }
.nav__link[aria-current="page"] { color: var(--on-surface);
                                  box-shadow: inset 0 -2px 0 var(--copper); }

/* Das Telefon bleibt sichtbar, aber zurueckgenommen. Auf engen Geraeten steht
   «Anrufen», weil die vollstaendige Nummer dort die Zeile sprengt. */
.nav__tel {
  font-size: .95rem; letter-spacing: .01em; word-spacing: .06em; white-space: nowrap;
  color: var(--on-surface-muted); font-variant-numeric: tabular-nums lining-nums;
}
.nav__tel:hover { color: var(--on-surface); }
.nav__tel--long  { display: none; }
.nav__tel--short { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 600px) {
  .nav__tel--long  { display: inline; }
  .nav__tel--short { display: none; }
}

/* ---------- Knoepfe — CI: Versalien, 700, +0.15em ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2.2rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth);
}
.btn--primary       { background: var(--copper-dim); color: var(--on-accent); }
.btn--primary:hover { background: var(--obsidian); }
.btn--ghost         { border-color: var(--line-strong); color: var(--on-surface); }
.btn--ghost:hover   { background: var(--on-surface); color: var(--surface); }

/* Copper Dim statt Copper: #D4702A traegt weisse 11-px-Versalien nur mit 3.41:1,
   #B85E22 erreicht 4.50:1 und steht in derselben Akzentskala. */
.slab--dark .btn--primary,
.who .btn--primary              { background: var(--copper-dim); color: var(--on-accent); }
.slab--dark .btn--primary:hover,
.who .btn--primary:hover        { background: var(--on-invert); color: var(--obsidian); }
.slab--dark .btn--ghost         { border-color: var(--on-invert-muted); color: var(--on-invert); }
.slab--dark .btn--ghost:hover   { background: var(--on-invert); color: var(--obsidian); }

/* ---------- Slabs — CI: monolithische Bloecke, 4px-Trenner ---------- */

.slab {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4.5rem, 10vw, 8rem);
  border-top: 4px solid var(--line-strong);      /* CI: border-thick */
}
.slab--dark {
  background: var(--surface-invert); color: var(--on-invert);
  border-top-color: var(--surface-invert);
}
.slab--dark .lead { color: var(--on-invert); }
.slab--dark .small,
.slab--dark .deflist__val { color: var(--on-invert-muted); }

/* ---------- Hero ---------- */

.hero {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 4rem) 0 clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
@media (max-width: 700px) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 3rem) 3.5rem; }
}
.hero--flat { min-height: auto;
              padding-block: calc(var(--nav-h) + 3.5rem) clamp(2rem, 4vw, 3rem); }

.hero__title { margin-bottom: 1.8rem; }


.directline {
  margin-top: 1.4rem; font-size: .9rem; color: var(--on-surface-muted);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
}
.directline a { padding-block: 6px; border-bottom: 1px solid var(--copper);
                color: var(--on-surface); }
.directline a:hover { color: var(--copper); }
.slab--dark .directline   { color: var(--on-invert-muted); }
.slab--dark .directline a { color: var(--on-invert); }

/* ---------- Aufzaehlung und Angabenliste ---------- */


.deflist { list-style: none; border-top: 2px solid var(--line-strong); margin-top: var(--r); }
.slab--dark .deflist { border-top-color: var(--line-invert); }
.deflist__row { display: grid; gap: .3rem 2rem; padding-block: 1.15rem;
                border-bottom: 1px solid var(--line); }
.slab--dark .deflist__row { border-bottom-color: var(--line-invert); }
@media (min-width: 760px) {
  .deflist__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.deflist__key { font-weight: 700; font-size: .8rem; letter-spacing: .1em;
                text-transform: uppercase; }
.deflist__val { color: var(--on-surface-muted); }

/* ---------- Formular ---------- */

.field { display: grid; gap: .4rem; margin-bottom: var(--r); }
.field label { font-family: 'Space Grotesk', sans-serif; font-size: .65rem;
               font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
               color: var(--on-surface-muted); }

.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; line-height: 1.6; color: var(--on-surface);
  background: var(--surface-container);
  border: 2px solid var(--line-strong); border-radius: 0;
  padding: .8rem 1rem; width: 100%;
  transition: border-color var(--duration-fast) var(--ease-smooth);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--copper); background: var(--surface);
}
.field textarea { min-height: 160px; resize: vertical; }

.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--on-surface) 50%),
    linear-gradient(135deg, var(--on-surface) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

.formnote   { font-size: .85rem; line-height: 1.6; color: var(--on-surface-muted); }
.formstatus { margin-top: var(--r); font-size: 1rem; font-weight: 600; }
.formstatus[data-state="ok"]  { color: var(--on-surface);
                                border-left: 4px solid var(--on-surface); padding-left: 1rem; }
.formstatus[data-state="err"] { color: var(--on-surface);
                                border-left: 4px solid var(--copper-dim); padding-left: 1rem; }

/* ---------- Fliesstext auf den Rechtsseiten ---------- */

.prose    { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-block: 3rem 1rem; max-width: none; }
.prose h2:first-child { margin-top: 0; }
.prose p  { margin-bottom: var(--r); }
.prose a  { color: var(--accent-text); box-shadow: inset 0 -1px 0 var(--accent-text); }
.prose a:hover { box-shadow: inset 0 -2px 0 var(--accent-text); }
.slab--dark .prose a { color: var(--copper-light); box-shadow: inset 0 -1px 0 var(--copper-light); }

/* ---------- Fusszeile ---------- */

.footer { position: relative; z-index: 2;
          background: var(--surface-invert); color: var(--on-invert);
          padding-block: 4rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer a { color: var(--on-invert-muted); transition: color var(--duration-fast) var(--ease-smooth); }
.footer a:hover { color: var(--on-invert); }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr; } }
.footer__head { font-family: 'Space Grotesk', sans-serif; font-size: .65rem;
                letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
                color: var(--copper); margin-bottom: 1rem; }
.footer ul { list-style: none; display: grid; gap: .55rem; font-size: .92rem; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-invert);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .82rem; color: var(--on-invert-muted);
}

/* ---------- Fokus und Sprungmarke ---------- */

.skip {
  position: absolute; left: 50%; top: -100%; transform: translateX(-50%);
  z-index: 100; padding: .6rem 1.2rem;
  background: var(--copper-dim); color: var(--on-accent);
  font-family: 'Space Grotesk', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}
.skip:focus { top: .8rem; }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* ---------- Umgebung ---------- */

@media (prefers-color-scheme: dark) {
  html, body { background: var(--surface) !important; color: var(--on-surface) !important;
               color-scheme: light !important; }
}

input, textarea, select { font-size: 16px; -webkit-appearance: none; border-radius: 0; }
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; }
}

/* Der Visitenkarten-Entwurf (.card, .band, .facts) ist abgeloest:
   .stage traegt jetzt den Hero mit Vollbild-Video, .who den Schluss.
   96 Zeilen entfernt statt kommentiert liegengelassen. */

/* Korn: groessere Kachel auf breiten Schirmen, sonst wird der Rapport sichtbar */
@media (min-width: 1100px) {
  body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   AUFBAU — Vollbild-Hero, komponierte Abschnitte, wechselnder Rhythmus.
   Die weisse Schrift liegt auf dem abgedunkelten Video, nicht umgekehrt.
   Damit faellt der text-shadow weg, der vorher die Lesbarkeit retten musste.
   ========================================================================== */

.stage {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--obsidian);
  padding: calc(var(--nav-h) + 5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.stage__media { position: absolute; inset: 0; z-index: 0; }
.stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.42);
  transform: translateZ(0);
}
@supports (-webkit-touch-callout: none) {
  .stage__video { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
/* Zwei Schleier: einer nimmt global Licht, einer traegt den Satzblock unten. */
.stage__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(10,10,7,.92) 0%, rgba(10,10,7,.55) 42%, rgba(10,10,7,.22) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(10,10,7,.55) 0%, transparent 70%);
}
.stage__inner { position: relative; z-index: 3; width: 100%; color: var(--on-invert); }

.stage__title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 8.2vw, 6.5rem); line-height: .94; letter-spacing: -.042em;
  max-width: 18ch; margin-bottom: 1.8rem; color: #fff;
}
.stage__lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6;
               max-width: 48ch; color: rgba(255,255,255,.82); }
.stage__row { display: flex; flex-wrap: wrap; align-items: center;
              gap: 1rem 2.2rem; margin-top: 2.6rem; }
.stage__tel, .stage__mail {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1; letter-spacing: .01em;
  word-spacing: .08em; white-space: nowrap; color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: .24em;
  padding-block: 8px;
}
.stage__tel:hover, .stage__mail:hover { text-decoration-thickness: 4px; }
.stage__alt { font-size: .9rem; color: rgba(255,255,255,.62); }
.stage__alt a { box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); padding-block: 6px; }
.stage__alt a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--copper); }

/* ---------- Der Motor — Schnittbild, vom Scrollen getrieben ----------
   Kein 3D, keine Bibliothek. Eine Konstruktionszeichnung, die laeuft:
   vier kaemmende Zahnraeder, Modul 4, Achsabstand gleich Summe der
   Teilkreisradien, Drehzahl umgekehrt proportional zur Zaehnezahl.
   Drei Zustaende: laeuft — steht — auseinandergenommen. */

.motor { background: var(--obsidian); color: #fff; border-top: 4px solid var(--copper);
         position: relative; }
/* Mobil ein Block, kein Raster. Als Rasterelement ist der Bereich der
   Zeichnung nur eine Zeile hoch — position:sticky hat dann keinen Weg und die
   Zeichnung scrollt einfach weg, waehrend die Absaetze weiterlaufen. Genau
   das war auf dem Handy kaputt. Als Block ist der umgebende Kasten der ganze
   Abschnitt, und die Zeichnung bleibt stehen, bis der Text durch ist. */
.motor__grid { display: block; }

/* Die Zeichnung bleibt stehen, der Text laeuft daran vorbei. */
.motor__viz {
  position: sticky; top: var(--nav-h); z-index: 1;
  height: auto; padding-block: clamp(.9rem, 3vw, 1.4rem);
  display: flex; align-items: center; justify-content: center;
  background: var(--obsidian);
  /* Auf dem Handy schiebt sich der Text darunter durch. Ohne diese Kante
     laeuft die Schrift in die Zeichnung. */
  box-shadow: 0 18px 22px -8px var(--obsidian);
}
.motor__beat {
  min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 2.5rem; opacity: .34; transition: opacity var(--duration) var(--ease-out);
}
.motor__beat[data-on] { opacity: 1; }
.motor__beat + .motor__beat { border-top: 1px solid rgba(255,255,255,.13); }

.motor__bno {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-light);
}
.motor__ttl {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.55rem, 4vw, 2.7rem); line-height: 1.06; letter-spacing: -.038em;
  margin: .9rem 0 0; max-width: 21ch; color: #fff;
}
.motor__txt { margin-top: 1.15rem; max-width: 44ch; font-size: 1.02rem; line-height: 1.7;
              color: rgba(255,255,255,.72); }

@media (min-width: 960px) {
  /* Ab hier zwei Spalten: die Rasterzeile ist so hoch wie die Textspalte,
     damit hat die Zeichnung in ihrem Bereich wieder Weg. */
  .motor__grid { display: grid;
                 grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
                 gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .motor__viz { height: calc(100svh - var(--nav-h)); box-shadow: none; }
  /* Gleich hoch, sonst liegen die Abschnittsmitten nicht auf gleichem Abstand
     und der Wechsel kommt bei einem Absatz zu frueh, beim naechsten zu spaet. */
  .motor__beat { min-height: 82svh; }
}

/* ---- Die Zeichnung selbst ---- */
.mech { width: 100%; height: auto; max-height: 100%; overflow: visible; color: #fff; }
.mech__grid { opacity: .055; transition: opacity var(--duration) var(--ease-out); }
.mech__teeth { fill: none; stroke: rgba(255,255,255,.44); stroke-width: 1.1;
               transition: stroke var(--duration-fast) var(--ease-smooth), stroke-width var(--duration-fast) var(--ease-smooth); }
.mech__pitch { fill: none; stroke: rgba(255,255,255,.2); stroke-width: .7;
               stroke-dasharray: 8 4 1.6 4; transition: opacity var(--duration) var(--ease-out); }
.mech__hub, .mech__bore, .mech__hole { fill: none; stroke: rgba(255,255,255,.3); stroke-width: .9; }
.mech__cross { fill: none; stroke: rgba(255,255,255,.38); stroke-width: .7;
               stroke-dasharray: 6 3 1.4 3; }

/* Eigenrotation. Die Anfangsphase versetzt die Zaehne um eine halbe Zahnbreite,
   damit sie ineinanderfassen statt aufeinander zu stossen. */
.mech__spin { transform-box: fill-box; transform-origin: center;
              animation: mech-spin var(--t) linear infinite; }
@keyframes mech-spin { from { rotate: var(--ph); } to { rotate: calc(var(--ph) + 1turn); } }

/* Explosionsversatz. Getrennt von der Rotation, darum translate statt transform. */
.mech__part { transition: translate 900ms cubic-bezier(.2,.85,.15,1),
                          opacity var(--duration) var(--ease-out), filter var(--duration) var(--ease-out); }

/* Zustand 2 — es steht. Zustand 3 — es liegt auseinander. */
.motor[data-state="2"] .mech__spin,
.motor[data-state="3"] .mech__spin { animation-play-state: paused; }

.motor[data-state="2"] .mech__part:not(.mech__part--fault),
.motor[data-state="3"] .mech__part:not(.mech__part--fault) { opacity: .38; }

.motor[data-state="2"] .mech__part--fault .mech__teeth,
.motor[data-state="3"] .mech__part--fault .mech__teeth {
  stroke: var(--copper-light); stroke-width: 2;
}
.motor[data-state="2"] .mech__part--fault,
.motor[data-state="3"] .mech__part--fault {
  filter: drop-shadow(0 0 12px rgba(212,112,42,.6));
}
.motor[data-state="3"] .mech__part { translate: var(--ex) var(--ey); }
.motor[data-state="3"] .mech__pitch { opacity: 0; }
.motor[data-state="3"] .mech__grid { opacity: .09; }

.mech__call { opacity: 0; transition: opacity var(--duration) var(--ease-out); }
.motor[data-state="3"] .mech__call { opacity: 1; transition-delay: 420ms; }
.mech__leader { fill: none; stroke: var(--copper-light); stroke-width: 1.2; }
.mech__no { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px;
            letter-spacing: -.03em; fill: var(--copper-light); }
.mech__lbl { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 10px;
             letter-spacing: .16em; text-transform: uppercase; fill: #fff; }

/* Auf 390px wird die Zeichnung auf 0.77 verkleinert. Die 1.1er Strichstaerke
   landet dann bei 0.85px und die 10px-Beschriftung bei 7.7px — beides zu duenn
   und zu klein. Innerhalb des viewBox gegengerechnet, nicht die Geometrie
   veraendert: dieselben Zahnraeder, nur kraeftiger gezeichnet. */
@media (max-width: 959px) {
  .mech__teeth { stroke-width: 1.7; }
  .mech__pitch { stroke-width: 1.1; stroke-dasharray: 10 5 2 5; }
  .mech__hub, .mech__bore, .mech__hole { stroke-width: 1.4; }
  .mech__cross { stroke-width: 1.1; }
  .mech__leader { stroke-width: 1.9; }
  .mech__no  { font-size: 24px; }
  .mech__lbl { font-size: 15px; letter-spacing: .1em; }
  .motor[data-state="2"] .mech__part--fault .mech__teeth,
  .motor[data-state="3"] .mech__part--fault .mech__teeth { stroke-width: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .mech__spin { animation: none; rotate: var(--ph); }
  .mech__part, .mech__call, .mech__pitch, .mech__grid, .mech__teeth,
  .motor__beat { transition: none; }
}

/* ---------- Schluss: Gesicht, Name, Nummer ----------
   Person und Abschluss waren zwei Abschnitte. Ohne Werdegangsseite muessen sie
   zusammen den Beweis tragen, also stehen sie in einem Block: das Bild, der
   Name gross, fuenf Angaben, die Nummer. Der einzige dunkle Block nach zwei
   hellen — deshalb landet er.
   Mobil zuerst: eine Spalte, Bild zuoberst, ab 860px zwei Spalten. */

.who { background: var(--obsidian); color: var(--on-invert);
       border-top: 4px solid var(--copper); }
.who__grid { display: grid; gap: clamp(2.2rem, 7vw, 3.5rem);
             padding-top: clamp(3.2rem, 10vw, 6.5rem); }
@media (min-width: 860px) {
  .who__grid { grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
               gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}

/* Das Bild: Duplex in Kupfer statt reinem Graustich, dazu ein 2px-Rahmen.
   isolation begrenzt die Mischung auf diesen Kasten — ohne sie greift sie auf
   den Seitengrund durch. Die Quelle ist 612px breit, darum wird sie nicht
   darueber hinaus gerechnet; sonst wird sie weich. */
/* 612px ist die Quelle. Auf zwei Geraetepixel gerechnet traegt sie 306 CSS-px
   scharf, mit Reserve bis etwa 480 — darueber wird sie weich. */
.who__portrait { position: relative; isolation: isolate; max-width: 480px;
                 width: 100%; justify-self: start; }
.who__portrait::before { content: ''; position: absolute; inset: 0; z-index: 3;
                         border: 2px solid rgba(255,255,255,.18); pointer-events: none; }
.who__portrait::after { content: ''; position: absolute; inset: 0; z-index: 2;
                        background: var(--copper); mix-blend-mode: color;
                        opacity: .16; pointer-events: none; }
.who__img { width: 100%; aspect-ratio: 612 / 688; object-fit: cover;
            object-position: 50% 14%;
            filter: grayscale(1) contrast(1.14) brightness(.94); }
/* Kupferstrich unter dem Bild — dieselbe Marke wie im Schnittbild */
.who__portrait { border-bottom: 4px solid var(--copper); }

.who__rule { display: block; width: 64px; height: 4px; background: var(--copper);
             margin-bottom: clamp(1.2rem, 3vw, 1.6rem); }

.who__name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, 8.6vw, 4.4rem); line-height: .94; letter-spacing: -.042em;
  color: #fff; margin-bottom: 1.2rem; max-width: none;
}
.who__lead { max-width: 48ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7;
             color: rgba(255,255,255,.78); }

.who__facts { list-style: none; margin-top: clamp(1.8rem, 4vw, 2.6rem);
              border-top: 2px solid var(--line-invert); }
.who__fact { display: grid; gap: .25rem 2rem; padding-block: 1.1rem;
             border-bottom: 1px solid var(--line-invert); }
@media (min-width: 640px) {
  .who__fact { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}
.who__key { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .74rem;
            letter-spacing: .16em; text-transform: uppercase; color: var(--copper-light); }
.who__val { color: rgba(255,255,255,.78); font-size: .98rem; line-height: 1.65; }

/* Das Anrufband liegt quer unter beiden Spalten. Vorher stand die Nummer am
   Ende der rechten Spalte und verhungerte dort; jetzt hat sie eine Buehne. */
.who__call {
  display: grid; gap: clamp(1.6rem, 4vw, 2.5rem);
  margin-top: clamp(2.6rem, 7vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(3rem, 9vw, 5.5rem);
  border-top: 4px solid var(--copper);
}
@media (min-width: 780px) {
  .who__call { grid-template-columns: minmax(0, 1fr) auto;
               gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .who__reach { text-align: right; }
  .who__reach .who__alt { justify-content: flex-end; }
}
.who__ask { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
            text-transform: uppercase; font-size: clamp(1.5rem, 4.6vw, 2.4rem);
            line-height: 1.05; letter-spacing: -.038em; color: #fff; max-width: 22ch; }
.who__hint { margin-top: .9rem; max-width: 46ch; font-size: .97rem; line-height: 1.65;
             color: var(--on-invert-muted); }
.who__tel, .who__mail {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: clamp(1.55rem, 6.6vw, 3rem); line-height: 1; letter-spacing: .01em;
  word-spacing: .08em; white-space: nowrap; color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: .24em;
}
.who__tel:hover, .who__mail:hover { text-decoration-thickness: 4px; }
/* Der Knopf zum Formular, zwischen Adresse und Nummer */
.who__form { margin-top: 1.4rem; }
.who__alt { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0 1.6rem;
            font-size: .92rem; color: var(--on-invert-muted); }
/* 44px hoch, sonst trifft man auf dem Handy zwischen zwei Zeilen daneben. */
.who__alt a { display: inline-flex; align-items: center; min-height: 44px;
              box-shadow: inset 0 -1px 0 var(--line-invert); }
.who__alt a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--copper); }

/* Die Kopfzeile wechselt ueber dem Hero nicht die Farbe. Weisse Schrift, die
   beim Scrollen dunkel umschlaegt, liest sich als Fehler — und ueber einem
   laufenden Video ist keine Schriftfarbe dauerhaft lesbar. Die Leiste bleibt
   das, was sie ist: eine helle, gerahmte Struktur ueber dem Bild. */

/* ---------- Druck ---------- */

@media print {
  @page { margin: 18mm 16mm 20mm; }
  body { font-size: 10.5pt; line-height: 14pt; background: #fff; color: #000; }
  body::before { display: none; }
  .nav, .stage__media, .motor, .btn, .skip { display: none !important; }
  .stage { min-height: 0; padding: 0 0 12pt; background: none; }
  .stage__title, .stage__lead, .stage__tel, .who__name, .who__val,
  .who__lead, .who__ask, .who__tel { color: #000 !important; }
  .who { background: none !important; border-top: 1pt solid #000; }
  .who__facts, .who__fact { border-color: #999 !important; break-inside: avoid; }
  .hero { min-height: 0; padding: 0 0 12pt; }
  .slab { padding-block: 12pt 0; border-top: 1pt solid #000; }
  .slab--dark, .slab--dark * { background: none !important; color: #000 !important; }
  .deflist { border-top-color: #000 !important; }
  .deflist__row { border-bottom-color: #999 !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid-page; }
  p, li { orphans: 3; widows: 3; }
  a { color: #000 !important; }
  a[href^="http"]::after, a[href^="mailto"]::after, a[href^="tel"]::after {
    content: " (" attr(href) ")"; font-size: 8pt; color: #444;
  }
}