/* ═══════════════════════════════════════════════════════════════════════════
   WIRTHGRUPPE
   Schrift: Instrument Sans (eine Familie, keine Monospace-Labels).
   Inhalt entspricht wirthgruppe.com.

   PERFORMANCE: Die Seite lief mit ~12 fps. Ursachen waren ein
   vollflächiger Blend-Mode-Rauschfilter mit Dauer-Animation, ein
   dauerhaft skalierender 72px-Blur, 31 will-change-Ebenen und sieben
   backdrop-filter. Alles davon ist hier entfernt oder eingedämmt.
   Bitte nicht ohne erneute Messung wieder einbauen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Schrift liegt lokal (assets/fonts). Vorher kam sie von Google Fonts, dabei
   ging bei jedem Seitenaufruf die IP-Adresse des Besuchers an Google. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal;
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal;
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Blau der Referenz-Unterseiten (#0E172D, radial nach #0E1B3B),
     verbunden mit unserem Markenton aus dem Favicon (#162944). */
  --blue-deep: #0E172D;
  --blue-lift: #17294C;
  --blue-low:  #070C1A;

  --ink:      #0A1120;   /* Grundton der Flächen */
  --ink-2:    #0D172C;
  --navy:     #111E36;
  --navy-2:   #162944;   /* Markenton aus dem Favicon */
  --navy-3:   #24406A;

  /* Alle Texte sind WEISS. Die Abstufung läuft über Deckkraft, nicht über
     Farbe, damit sich kein Blaustich einschleicht. */
  --text:     #FFFFFF;
  --ice:      rgba(255,255,255,.88);   /* Fließtext */
  --muted:    rgba(255,255,255,.62);   /* Kleintext, Footer */

  /* Akzent ist Weiß. Kein Gold: Texte und Hervorhebungen bleiben durchgehend
     hell, die Farbe kommt allein aus dem blauen Verlauf. */
  --gold:     #FFFFFF;
  --gold-hi:  #E6EEF9;
  --gold-dim: rgba(255,255,255,.10);

  --line:     rgba(255,255,255,.13);
  --line-2:   rgba(255,255,255,.26);

  --sans: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1280px;
  --pad: clamp(20px, 4.5vw, 80px);
  --nav-h: 80px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 4px;
}

/* ───────────────────────────── Reset ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--navy-3) var(--ink); }

body {
  margin: 0;
  /* Durchgehender Farbverlauf über alle Seiten, oben rechts aufgehellt */
  background-color: var(--blue-deep);
  background-image:
    radial-gradient(125% 105% at 88% 0%,
                    var(--blue-lift) 0%, var(--blue-deep) 52%, var(--blue-low) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(15.5px, .42vw + 14px, 18px);
  font-weight: 400;
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
address { font-style: normal; }

::selection { background: #fff; color: #141414; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 10px 18px; background: #fff; color: #141414;
  font-weight: 600; border-radius: var(--r);
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ───────────────────────────── Preloader ───────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 980;
  background: var(--blue-deep); display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

/* Das Original-Logo baut sich auf: erst die drei Balken des W nacheinander
   von oben, dann der Schriftzug von links, zuletzt die Zeile darunter.
   Die Teile liegen deckungsgleich uebereinander (assets/img/logo/, aus
   wirthgruppe_logo.png geschnitten) und ergeben zusammen genau das Logo.
   Bewusst nur Wischen und Einblenden, keine Bewegung: so darf die Folge
   auch bei reduzierter Bewegung laufen (Ausnahme unten im Reduced-Block). */
.preloader__logo { position: relative; width: min(360px, 72vw); aspect-ratio: 2 / 1; }
.preloader__logo .pl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: var(--a) var(--d) var(--ease-pl, cubic-bezier(.65, 0, .35, 1)) var(--t) both;
}
/* Der W-Teil reicht bis 59 % der Hoehe, weiter muss der Wisch nicht laufen. */
.pl--w1    { --a: plDraw; --d: .62s; --t: .15s; }
.pl--w2    { --a: plDraw; --d: .62s; --t: .38s; }
.pl--w3    { --a: plDraw; --d: .36s; --t: .66s; }
.pl--wort  { --a: plWipe; --d: .85s; --t: .95s; --ease-pl: cubic-bezier(.22, 1, .36, 1); }
.pl--claim { --a: plFade; --d: .6s;  --t: 1.6s; }

@keyframes plDraw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 40% 0); } }
@keyframes plWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes plFade { from { opacity: 0; } to { opacity: 1; } }

/* Die Startseite ist nur das Karussell und scrollt nicht.
   Zu den Inhalten führen die Links oben rechts. */
body.page-home { overflow: hidden; height: 100dvh; }

/* ───────────────────────────── Typografie ───────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sec { position: relative; padding-block: clamp(84px, 11vw, 168px); }

/* ───────────────────────────── Video-Kopf (Das Unternehmen) ─────────────────────────────
   Cine-Mode: Die Farben des Films strahlen hinter dem Bild aus. Ein echtes
   Ambilight, das dem laufenden Video folgt, ist nicht möglich: der Vimeo-Player
   läuft in einem fremden iframe, dessen Pixel darf die Seite nicht auslesen. */
.vhero {
  position: relative; padding-top: var(--nav-h);
  isolation: isolate; overflow: hidden;
}
.vhero::before {
  content: ''; position: absolute; inset: -12% -6%; z-index: -1;
  background: url('../img/unternehmen-video-poster.jpg') center / cover no-repeat;
  filter: blur(90px) saturate(1.9) brightness(.62);
  opacity: .75;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 88%);
          mask-image: radial-gradient(72% 62% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 88%);
}

/* Der Film ist immer vollständig sichtbar: die Breite hängt an der freien
   Höhe unter der Kopfzeile. */
.vhero__frame {
  position: relative;
  width: min(100%, calc((100dvh - var(--nav-h) - 34px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #06101F url('../img/unternehmen-video-poster.jpg') center / cover no-repeat;
}
.vhero__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vor der Einwilligung steht hier nur das Standbild mit einem Knopf. Erst
   danach wird der Player von Vimeo geladen. */
.vhero__gate {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: rgba(6,10,22,.8);
}
.vhero__gate p { max-width: 44ch; font-size: 13.5px; line-height: 1.5; color: var(--ice); margin: 0; }
.vhero__gate[hidden] { display: none; }

/* ───────────────────────── Einwilligung (externe Dienste) ─────────────────────────
   Kleine Tafel unten links, kein Vollbild und kein backdrop-filter. */
.consent {
  position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 790;
  width: min(430px, calc(100vw - 24px));
  padding: 22px 22px 20px;
  background: #0A1020; border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  font-size: 14px; line-height: 1.55; color: var(--ice);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }
.consent h2 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: 0; }
.consent p { margin: 0; max-width: none; font-size: 14px; color: var(--ice); }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.consent__list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.consent__list li { border-bottom: 1px solid var(--line); }
.consent__list label { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer; }
.consent__list input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #fff; }
.consent__list strong { display: block; color: var(--text); font-weight: 600; }
.consent__list small { display: block; font-size: 13px; color: var(--muted); }
.consent__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.consent__btns .btn { flex: 1 1 auto; justify-content: center; padding: 12px 18px; font-size: 13.5px; }
/* Ablehnen und Zulassen sind gleich gewichtet, keiner ist versteckt. */
.consent__btns .btn--ghost:hover { border-color: var(--text); color: var(--text); background: rgba(255,255,255,.06); }

/* Überschrift und Einleitung folgen dicht auf das Video. */
.sec--nachVideo { padding-block: clamp(38px, 4.5vw, 72px) clamp(70px, 9vw, 130px); }
.sec--nachVideo .big { margin-bottom: 14px; }

/* ───────────────────────────── Seitenkopf der Unterseiten ───────────────────────────── */
.phead {
  position: relative; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 130px)) 0 clamp(44px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Blur, Abdunklung und Bildausschnitt sind je Seite nachstellbar. Die
   Vorgaben entsprechen dem bisherigen Zustand; gesetzt wird nur dort, wo
   ein Motiv es braucht (Immobilien: Collage mit eingebranntem Logo). */
.phead__bg {
  position: absolute; inset: -3%; z-index: -1;
  background-size: cover;
  background-position: var(--phead-pos, center);
  filter: blur(var(--phead-blur, 5px)) saturate(.7) brightness(var(--phead-dim, .5));
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 60%, transparent 96%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 60%, transparent 96%);
}
.phead .big { margin-bottom: 14px; }
/* Rechtstexte (Impressum, Datenschutz): schmale Lesespalte, ruhige Zwischentitel */
.phead--plain { padding-bottom: clamp(32px, 4vw, 56px); }
.phead--plain .big { font-size: clamp(28px, 8vw, 72px); }
.legal > * { max-width: 74ch; }
.legal h2 {
  font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; color: var(--text); margin: 2.6em 0 .7em;
}
.legal h3 { font-size: 16.5px; font-weight: 600; color: var(--text); margin: 2em 0 .6em; }
.legal > :first-child { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.7; hyphens: auto; }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.legal a:hover { text-decoration-color: var(--text); }
.legal__adr { font-style: normal; }
/* Aufklappbare Kapitel der Datenschutzerklärung (natives <details>) */
.akk { border-top: 1px solid var(--line); }
.akk:last-of-type { border-bottom: 1px solid var(--line); }
.akk summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.akk summary::-webkit-details-marker { display: none; }
.akk summary h2 { margin: 0; display: flex; align-items: baseline; gap: 16px; }
.akk__nr { font-size: 14px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.akk summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 1.5px solid var(--ice); border-bottom: 1.5px solid var(--ice);
  transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease);
}
.akk[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.akk summary:hover h2 { color: #fff; }
.akk summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.akk__body { padding: 4px 0 30px; }
.akk__body > :first-child { margin-top: 0; }
.akk__body h3 { margin-top: 2.2em; }
.legal h4 { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 1.6em 0 .4em; }
.legal ul { margin: 1em 0; padding: 0; list-style: none; }
.legal li { position: relative; padding-left: 22px; margin-top: .7em; font-size: 16px; line-height: 1.7; color: var(--ice); }
.legal li::before { content: ''; position: absolute; left: 0; top: .82em; width: 8px; height: 1px; background: var(--line-2); }
.legal .legal__laut { font-size: 14.5px; letter-spacing: .01em; }
.legal .legal__quelle { margin-top: 28px; font-size: 14px; color: var(--muted); }
.legal a { overflow-wrap: anywhere; }
.legal__adr dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; margin-top: 22px; }
.legal__adr dt { color: var(--muted); font-size: 14.5px; }
.legal__adr dd { color: var(--ice); font-size: 16px; }
.foot__right > a[aria-current="page"], .stage__legal a[aria-current="page"] { color: var(--text); }
.phead__sub { margin-bottom: 0; color: var(--ice); }

/* Der Inhalt folgt dicht auf den Seitenkopf. Volle Sektions-Polsterung
   direkt darunter riss sonst über 300 px Leerraum auf. */
.phead + .sec { padding-top: clamp(40px, 4.6vw, 74px); }

/* Kurze Seiten sollen nicht in einem toten Feld über dem Footer enden. */
.sec:last-of-type { padding-bottom: clamp(64px, 7.5vw, 118px); }

/* Große Überschrift, ruhig gesetzt: normale Laufweite, kein Fettdruck-Schrei */
.big {
  font-size: clamp(38px, 5.4vw, 82px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.032em;
  margin-bottom: 20px;
  text-wrap: balance;
}

/* Kleines Label über oder unter einer Überschrift */
.kicker {
  font-size: clamp(11.5px, .78vw, 13px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.sec p { color: var(--ice); max-width: 68ch; }
.sec p + p { margin-top: 1.15em; }
p strong { color: var(--text); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.985); }
.btn--gold { background: #fff; color: #141414; }
.btn--gold:hover { background: var(--gold-hi); }
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tags li {
  font-size: 13px; padding: 8px 16px; color: var(--ice);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .3s, color .3s;
}
.tags li:hover { border-color: var(--gold); color: var(--gold); }

/* ───────────────────────────── Navigation ─────────────────────────────
   .nav muss ÜBER .menu liegen: .nav ist ein eigener Stacking-Kontext, ein
   hoher z-index am Burger allein reicht nicht, sonst fängt die Menü-Blende
   den Schließen-Klick ab. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 810;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
  padding-inline: var(--pad);
  border-bottom: 1px solid transparent;
  /* Die Hoehe bleibt beim Scrollen konstant, es wechselt nur der Grund. */
  transition: background-color .35s var(--ease),
              border-color .35s, transform .35s var(--ease);
}
.nav.is-stuck {
  background: rgba(8,14,30,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__logo img { width: clamp(108px, 8.5vw, 138px); height: auto; transition: opacity .3s; }
.nav__logo:hover img { opacity: .7; }

.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 10px 15px;
  font-size: 14.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text); opacity: .78;
  transition: opacity .25s;
}
.nav__links a:hover, .nav__links a.is-current { opacity: 1; }
.nav__links a span { position: relative; }
.nav__links a span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover span::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-current { color: var(--gold); }
.nav__links a.is-current span::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 21px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .09em;
  transition: border-color .3s, color .3s, background-color .3s;
}
.nav__cta svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.nav__cta:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.nav__cta:hover svg { transform: translateX(3px); }

.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav__burger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--text); transition: transform .35s var(--ease);
}
.nav__burger span:nth-child(1) { top: 18px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 800;
  background: linear-gradient(160deg, var(--blue-lift), var(--blue-low) 72%);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--pad) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s linear 0s; }
.menu__inner { display: flex; flex-direction: column; gap: 4px; }
/* Gleicher Aktiv-Zustand wie in der Kopfzeile: volle Deckkraft plus Strich. */
.menu__inner a {
  position: relative; align-self: flex-start;
  font-size: clamp(28px, 7vw, 46px); font-weight: 600;
  line-height: 1.24; letter-spacing: -.025em;
  opacity: .7; transition: opacity .25s;
}
.menu__inner a:hover, .menu__inner a.is-current { opacity: 1; }
.menu__inner a.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .1em;
  height: 2px; background: #fff;
}
.menu__foot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO: Unternehmen der Gruppe
   ═══════════════════════════════════════════════════════════════════════════ */
.stage {
  position: relative;
  min-height: 100dvh; max-height: 100dvh;
  display: grid;
  /* Nav-Platzhalter · Bühne (dehnt sich) · Steuerung · Hinweis · Rechtliches */
  grid-template-rows: var(--nav-h) minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  isolation: isolate;

  /* Kartenbreite berücksichtigt AUCH die freie Höhe, damit der Hero nie
     über den Viewport hinauswächst. 16:9 → Höhe × 1.777 = Breite. */
  --card-w: min(58vw, 1080px, calc((100dvh - 276px) * 1.777));
}

/* Das Motiv der aktiven Firma erscheint großflächig hinter dem Karussell:
   dasselbe Bild, verblasst, über einen Verlauf nach unten auslaufend.
   Nur leicht weichgezeichnet, damit man es als dasselbe Bild erkennt.

   Bewusst OHNE Transform-Animation: ein animierter Blur zwingt den Browser
   zum Neurastern in jedem Frame und war die Hauptursache der 12 fps. */
.stage__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.stage__bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  /* Oben kräftig abdunkeln, damit die Kopfzeile ruhig bleibt; in der Mitte
     darf das Motiv durchscheinen, nach unten läuft es aus. */
  background:
    linear-gradient(180deg, rgba(8,14,30,.96) 0%, rgba(8,14,30,.66) 12%,
                    rgba(8,14,30,.24) 32%, rgba(8,14,30,.42) 72%, var(--ink) 100%),
    radial-gradient(120% 80% at 50% 42%, transparent 28%, rgba(8,14,30,.7) 100%);
}
.stage__bgLayer {
  position: absolute; inset: -3%;
  background-size: cover; background-position: center;
  /* --dim kommt aus der gemessenen Bildhelligkeit (companies.js) */
  filter: blur(5px) saturate(.78) brightness(var(--dim, .5));
  opacity: 0;
  transition: opacity 1.05s var(--ease);
  /* Der Verlauf, der das Bild nach unten auslaufen lässt */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 42%,
                                      rgba(0,0,0,.28) 72%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 42%,
                                      rgba(0,0,0,.28) 72%, transparent 94%);
}
.stage__bgLayer.is-active { opacity: 1; }



.rollet {
  grid-row: 2; position: relative;
  perspective: 2000px; perspective-origin: 50% 50%;
  touch-action: pan-y; cursor: grab;
  /* Mindesthöhe nie größer als der freie Platz: auf flachen Bildschirmen
     schob sie die Bühne sonst unter die Steuerung. */
  min-height: min(clamp(200px, 36vw, 500px), calc(100dvh - 300px));
}
.rollet.is-dragging { cursor: grabbing; }
/* Beim Wischen soll nichts markiert oder als Link mitgezogen werden. */
.rollet, .card, .card__img { user-select: none; -webkit-user-select: none; }
.rollet__stage { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Die Karte ist ein Link auf die Website des Unternehmens.
   KEIN will-change: 29 Karten ergaben 29 dauerhafte Compositing-Ebenen. */
.card {
  display: block;
  container-type: inline-size;   /* Basis für die cqw-Größen der Beschriftung */
  position: absolute; top: 50%; left: 50%;
  width: max(272px, var(--card-w));
  aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden;
  background: var(--navy); border: 1px solid var(--line);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.9);
  -webkit-tap-highlight-color: transparent;
}
.card:focus-visible { outline-offset: 4px; }

/* Innenrahmen der Karte. Die Karte selbst fuehrt das Rollet per transform
   und opacity, hier bleibt Platz fuer Auftritt und Lichtstreif. */
.card__in { position: absolute; inset: 0; display: block; }
/* Ruhezustand entsättigt, damit helle und dunkle Motive als eine Fläche lesen.
   `filter` wird bewusst NICHT weich überblendet: ein animierter Filter zwingt
   den Browser zum Neuzeichnen des Bildes in jedem Frame. Den weichen Übergang
   übernimmt allein die Deckkraft der Blende darüber, die läuft im Compositor. */
.card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.42) brightness(.9);
}
.card__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,14,30,.26) 0%, rgba(8,14,30,.74) 100%),
    rgba(17,30,54,.36);
  transition: opacity .5s var(--ease);
}

/* Abdunklung unten, damit die Beschriftung auf jedem Motiv lesbar bleibt.
   Nur bei der mittleren Karte sichtbar. */
.card__scrim {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(6,10,22,.62) 62%,
                              rgba(6,10,22,.92) 100%);
  transition: opacity .5s var(--ease);
}
.card.is-active .card__scrim { opacity: 1; }

/* Beschriftung auf dem Bild. Die Größen hängen an der Kartenbreite (cqw),
   damit sie auf jedem Bildschirm im gleichen Verhältnis stehen. */
.card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  padding: 0 6cqw 5cqw;
  pointer-events: none;
}

/* Die drei Zeilen gleiten einzeln und versetzt herein. Als ein Block wirkte es
   holprig, weil die Karte zu dem Zeitpunkt noch nachjustiert. */
.card__cap > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  /* Ausblenden: kurz und ohne Verzögerung, sobald die Karte wegrückt */
  transition: opacity .28s ease, transform .28s ease;
}
.card.is-active .card__cap > * {
  opacity: 1;
  transform: none;
  /* Einblenden: langsam und weich, beginnt 1 s nachdem die Karte steht */
  transition: opacity 1.15s cubic-bezier(.16, 1, .3, 1),
              transform 1.15s cubic-bezier(.16, 1, .3, 1);
}
.card.is-active .card__name  { transition-delay: 1s; }
.card.is-active .card__claim { transition-delay: 1.16s; }
.card.is-active .card__text  { transition-delay: 1.32s; }

.card__name {
  font-size: 4.2cqw; font-weight: 500; line-height: 1.08;
  letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.card__claim {
  font-size: 2.3cqw; font-weight: 400; line-height: 1.3;
  margin-top: .8cqw; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.card__text {
  font-size: 1.45cqw; font-weight: 400; line-height: 1.6;
  margin-top: 1.6cqw; max-width: 74cqw; color: rgba(255,255,255,.8);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.card.is-active { border-color: rgba(201,160,99,.42); }
.card.is-active .card__img { filter: none; }
.card.is-active .card__veil { opacity: 0; }

/* ── Lichtstreif ──────────────────────────────────────────────────────────
   Rastet eine Karte in der Mitte ein, laeuft einmal ein schmaler Glanz
   darueber, dann ist Ruhe. `forwards` waere falsch: der Streifen soll
   verschwinden, nicht am Rand stehen bleiben. Neu ausgeloest wird er
   dadurch, dass .is-active tatsaechlich wechselt, und classList.toggle
   mit festem Wert ruehrt die Klasse nur an, wenn sie sich aendert. */
.card__in::after {
  content: ''; position: absolute; inset: -25% -60%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(74deg,
              transparent 44%, rgba(255,255,255,.15) 50%, transparent 56%);
}
/* Eigene Kurve statt --ease: die schiebt fast den ganzen Weg in das erste
   Drittel, der Streif schoss dadurch los und kroch dann aus. Diese Kurve
   verteilt die Strecke gleichmaessiger, er zieht ruhig durch. */
.card.is-active .card__in::after {
  animation: wgSheen 1.7s cubic-bezier(.33, 0, .2, 1) .2s 1;
}
/* Waehrend des Auftritts noch nicht: der Streifen liefe unter einer Karte
   ab, die noch gar nicht sichtbar ist, und waere verschenkt. */
.wg-intro:not(.wg-ready) .card__in::after { animation: none; }

@keyframes wgSheen {
  0%   { opacity: 0; transform: translate3d(-65%, 0, 0); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(65%, 0, 0); }
}

/* ── Langsamer Zoom der Hintergrundebene ──────────────────────────────────
   Gestartet wird die Animation in app.js an der jeweils neuen Ebene, damit
   die ausblendende nicht auf scale(1) zurueckspringt. Der Blur bleibt dabei
   unveraendert, gerastert wird also einmal und danach nur verschoben. */
@keyframes wgDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
/* Ausnahme von der will-change-Sparsamkeit: hier sind es GENAU ZWEI
   Elemente, nicht 31. Ohne den Hinweis rastert Chrome die weichgezeichnete
   Ebene beim Skalieren neu, und genau das war die alte 12-fps-Falle.
   Mit dem Hinweis wird einmal gerastert und danach nur noch verschoben. */
.stage__bgLayer { will-change: transform; }

/* ── Auftritt der Startseite ──────────────────────────────────────────────
   `wg-intro` setzt app.js selbst. Stuende der Ausgangszustand im HTML,
   blieben Karten und Steuerung ohne JavaScript fuer immer unsichtbar.
   Die Staffelung je Karte kommt als transition-delay aus app.js. */
.wg-intro .card__in,
.wg-intro .nav,
.wg-intro .stage__foot,
.wg-intro .stage__hint,
.wg-intro .stage__legal { opacity: 0; }

.wg-intro .card__in {
  transform: translate3d(0, 20px, 0) scale(.94);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.wg-intro .stage__foot,
.wg-intro .stage__hint { transform: translate3d(0, 14px, 0); }

.wg-intro .nav,
.wg-intro .stage__foot,
.wg-intro .stage__hint {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.wg-intro .nav        { transition-delay: .42s; }
.wg-intro .stage__foot { transition-delay: .58s; }
.wg-intro .stage__hint { transition-delay: .70s; }
.wg-intro .stage__legal { transition: opacity .8s var(--ease); transition-delay: .82s; }

.wg-intro.wg-ready .card__in,
.wg-intro.wg-ready .stage__foot,
.wg-intro.wg-ready .stage__hint { opacity: 1; transform: none; }
.wg-intro.wg-ready .stage__legal { opacity: 1; }
/* Die Kopfzeile blendet nur auf. Ein `transform: none` hier wuerde das
   Wegschieben beim Scrollen (.nav.is-hidden) aushebeln. */
.wg-intro.wg-ready .nav { opacity: 1; }

/* Steuerung mittig unter dem Karussell, seit die Namensplatte entfallen ist */
.stage__foot {
  grid-row: 3; position: relative; z-index: 5;
  display: flex; justify-content: center;
  padding: clamp(18px, 2.2vw, 32px) var(--pad) 0;
}
.stage__ctrl {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
}
.stage__hint .hint-touch { display: none; }
@media (hover: none) {
  .stage__hint .hint-maus { display: none; }
  .stage__hint .hint-touch { display: inline; }
}
.stage__hint {
  grid-row: 4; position: relative; z-index: 5;
  text-align: center;
  padding: clamp(12px, 1.4vw, 20px) var(--pad) clamp(8px, 1vw, 14px);
  font-size: 13px; color: var(--muted);
}
/* Rechtliches und Social Media auf der Startseite. Bewusst leise: kleine
   Schrift, gedeckte Farbe, eine Zeile am unteren Rand. */
.stage__legal {
  grid-row: 5; position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 24px; flex-wrap: wrap;
  padding: 0 var(--pad) clamp(12px, 1.4vw, 20px);
  font-size: 12.5px; color: var(--muted);
}
.stage__legal nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; }
.stage__legal nav a, .linkbtn { color: var(--muted); transition: color .25s; }
.stage__legal nav a:hover, .linkbtn:hover { color: var(--text); }
.stage__legal .foot__social { gap: 10px; }
.stage__legal .foot__social a { opacity: .7; }
.stage__legal .foot__social a:hover { opacity: 1; }
.stage__legal .foot__social svg { width: 15px; height: 15px; }
/* Knopf, der wie ein Textlink aussieht (Einwilligung erneut öffnen) */
.linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Kein backdrop-filter: drei Stück permanent im Bild kosteten spürbar. */
.ctrl {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(8,14,30,.62); border: 1px solid var(--line-2); color: var(--ice);
  transition: background-color .3s, border-color .3s, color .3s;
}
.ctrl svg { width: 20px; height: 20px; }
.ctrl--play svg { width: 13px; height: 13px; fill: currentColor; }
/* Hover nur für Geräte mit Maus. Auf dem Handy bleibt :hover nach dem
   Antippen hängen, der Knopf stünde dann dauerhaft weiß da. Die Rückmeldung
   beim Tippen kommt dort aus :active. */
@media (hover: hover) {
  .ctrl:hover { background: #fff; border-color: #fff; color: #141414; }
}
.ctrl:active { transform: scale(.95); background: #fff; border-color: #fff; color: #141414; }
.ctrl, .firmen__btn, .firmen__dot, .nav__burger { -webkit-tap-highlight-color: transparent; }
.ctrl--play .ic-play { display: none; }
.ctrl--play[aria-pressed="false"] .ic-play { display: block; }
.ctrl--play[aria-pressed="false"] .ic-pause { display: none; }

.stage__track {
  width: clamp(70px, 13vw, 220px); height: 1px; margin-right: 14px;
  background: var(--line); position: relative;
}
.stage__track i {
  position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAS UNTERNEHMEN
   ═══════════════════════════════════════════════════════════════════════════ */
.sec--intro { border-top: 1px solid var(--line); }
.maxime {
  font-size: clamp(26px, 3.4vw, 52px); font-weight: 500;
  line-height: 1.18; letter-spacing: -.026em;
  max-width: 20ch; margin-bottom: clamp(44px, 5.5vw, 82px);
}
.maxime em { font-style: normal; color: var(--gold); }

/* Fließtext der Unterseiten: zweispaltig im Blocksatz mit Initial,
   wie auf der Referenzseite. Unter 900 px eine Spalte. */
.prose {
  max-width: none;
  columns: 2;
  column-gap: clamp(30px, 4vw, 68px);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose p { max-width: none; }
.prose p + p { margin-top: 1.15em; }

/* Initial am ersten Absatz */
.prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: .8;
  font-weight: 600;
  padding: .06em .1em 0 0;
  color: #fff;
}

/* Einleitungssatz vor dem Fließtext */
.lead-in {
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 600;
  line-height: 1.4; color: var(--text);
  margin-bottom: clamp(26px, 3vw, 44px); max-width: 76ch;
}

@media (max-width: 900px) {
  .prose { columns: 1; text-align: left; }
}

/* Bildblock der Unterseiten (Energie, Immobilien, Investment).
   Gleiche Sprache wie .karo__media auf der Karriere-Seite: entsaettigt im
   Ruhezustand, beim Hover volle Farbe. Kein Blur, kein will-change. */
.shot {
  margin-top: clamp(46px, 6vw, 88px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy);
}
.shot img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.8) brightness(.82);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.shot:hover img { transform: scale(1.03); filter: none; }
.shot figcaption {
  padding: 13px clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 720px) {
  .shot img { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIRMEN-KARUSSELL der Themenseiten (Energie, Immobilien, Investment)
   Die mittlere Karte steht scharf, links und rechts ragt je eine
   Nachbarkarte herein. Bewusst FLACH: nur translateX, scale und Deckkraft,
   kein rotateY/translateZ. Das 3D-Rollet bleibt der Startseite vorbehalten
   und die Themenseiten bleiben billig zu zeichnen.
   ═══════════════════════════════════════════════════════════════════════════ */
.firmen {
  /* Ein Wert speist Kartenbreite UND Buehnenhoehe: die Karten liegen
     absolut, die Buehne hat also keine Hoehe aus dem Inhalt. */
  --fk-w: clamp(240px, 62vw, 820px);
  margin-top: clamp(46px, 6vw, 88px);
}
/* Ohne JavaScript bleibt im Behaelter das Standbild stehen. Den Abstand
   nach oben setzt dann schon .firmen, .shot braucht ihn nicht zweimal. */
.firmen > .shot { margin-top: 0; }
.firmen__label {
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}

.firmen__viewport {
  position: relative;
  height: calc(var(--fk-w) * 9 / 16);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;                  /* vertikal scrollt weiter die Seite */
}
.firmen__viewport.is-dragging { cursor: grabbing; }
.firmen__viewport, .fk, .fk__img { user-select: none; -webkit-user-select: none; }
.firmen__stage { position: absolute; inset: 0; }

/* Jede Karte ist ein Link auf die Website des Unternehmens. */
.fk {
  position: absolute; top: 50%; left: 50%;
  width: var(--fk-w);
  display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--navy);
  transform: translate3d(-50%, -50%, 0);   /* Startwert, danach fuehrt JS */
  transition: border-color .4s var(--ease);
}
.fk:focus-visible { outline-offset: 4px; }
.fk__img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.8) brightness(.82);
  transition: filter .5s var(--ease);
}
/* Nachbarkarten treten zurueck, damit das Auge die Mitte findet. */
.fk__veil {
  position: absolute; inset: 0;
  background: rgba(8,14,30,.55);
  transition: opacity .45s var(--ease);
}
.fk__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(5,9,18,.92) 0%, rgba(5,9,18,.62) 26%, transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease);
}

/* Bewusst KEIN Flex-Container: als Flex-Item wuerde .fk__text blockifiziert
   (display -webkit-box wird zu flow-root) und die Zeilenbegrenzung fiele aus.
   Der Abstand der Zeilen kommt darum aus margin-top. */
.fk__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2.6vw, 34px);
}
/* Die Zeilen gleiten einzeln herein, sonst wirkt der Wechsel wie ein Sprung.
   display:block ist Pflicht, auf inline-Elementen greift transform nicht. */
.fk__cap > * {
  display: block;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.fk__cap > * + * { margin-top: 6px; }
.fk__name {
  font-size: clamp(20px, 2.4vw, 34px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.026em;
}
.fk__claim { font-size: clamp(13.5px, 1.15vw, 17px); color: var(--text); }
.fk__text {
  font-size: clamp(13px, 1vw, 15.5px); color: var(--ice);
  line-height: 1.5; max-width: 56ch;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}

.fk.is-active { border-color: var(--line-2); }
.fk.is-active .fk__img { filter: none; }
.fk.is-active .fk__veil { opacity: 0; }
.fk.is-active .fk__scrim { opacity: 1; }
.fk.is-active .fk__cap > * { opacity: 1; transform: none; }
.fk.is-active .fk__name  { transition-delay: .10s; }
.fk.is-active .fk__claim { transition-delay: .18s; }
.fk.is-active .fk__text  { transition-delay: .26s; }

/* Fussleiste: Zaehler links, Sprungmarken mittig, Pfeile rechts */
.firmen__foot {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.firmen__count {
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.firmen__dots { display: flex; align-items: center; gap: 8px; margin-right: auto; }
/* Die Marke ist nur ein Strich, die Trefferflaeche aber 22 px hoch. */
.firmen__dot {
  width: clamp(16px, 2.2vw, 30px); height: 22px;
  background: none; position: relative;
}
.firmen__dot::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px; background: var(--line-2);
  transition: background-color .35s var(--ease);
}
.firmen__dot:hover::after { background: var(--text); }
.firmen__dot[aria-current="true"]::after { background: var(--gold); }
.firmen__nav { display: flex; gap: 10px; }
.firmen__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--text);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.firmen__btn svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .firmen__btn:hover { background: #fff; border-color: #fff; color: #141414; }
}
.firmen__btn:active { transform: scale(.95); background: #fff; border-color: #fff; color: #141414; }

@media (max-width: 720px) {
  /* Etwas schmaler als der volle Textsatz, sonst stehen die Nachbarkarten
     ganz ausserhalb und vom Karussell bleibt nur ein Standbild. */
  .firmen { --fk-w: min(78vw, 520px); }
  .firmen__viewport { height: calc(var(--fk-w) * 3 / 4); }
  .fk__img { aspect-ratio: 4 / 3; }
  .fk__text { display: none; }
  .firmen__dots { display: none; }
  .firmen__count { margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVESTMENT
   ═══════════════════════════════════════════════════════════════════════════ */
.sec--invest { border-top: 1px solid var(--line); background: rgba(8,14,30,.4); }
.statement {
  font-size: clamp(19px, 1.9vw, 28px); font-weight: 400;
  line-height: 1.42; letter-spacing: -.014em;
  color: var(--text) !important; max-width: 26ch !important;
  margin-bottom: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARRIERE — Unternehmen abwechselnd links/rechts
   ═══════════════════════════════════════════════════════════════════════════ */
.kar { position: relative; isolation: isolate; overflow: hidden; }
.kar__intro { margin-bottom: clamp(52px, 7vw, 104px); }

/* ── Offene Stellen (Karriere) ────────────────────────────────────────────
   Liste aus dem Personio-Feed, gebaut in app.js (Abschnitt 1b). Jede Stelle
   ist eine Zeile, ein Klick klappt Aufgaben, Profil und Angebot auf.
   Zeilen trennt nur eine Linie oben, keine Karten. */
.jobs { margin-bottom: clamp(72px, 9vw, 136px); }
.jobs__head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.jobs__title {
  font-size: clamp(28px, 3.2vw, 46px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.025em; color: var(--text);
}
.jobs__count { font-size: clamp(15px, 1.2vw, 18px); color: var(--muted); font-variant-numeric: tabular-nums; }

.jobs__list { border-bottom: 1px solid var(--line); }
.job { border-top: 1px solid var(--line); }

.job__h { margin: 0; font: inherit; }
.job__toggle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 24px; width: 100%; text-align: left;
  padding: clamp(20px, 2.2vw, 30px) clamp(4px, 1vw, 16px);
  background: transparent; border: 0; color: inherit; cursor: pointer;
  border-radius: var(--r);
  transition: background-color .35s var(--ease);
}
.job__toggle:hover, .job.is-open .job__toggle { background: rgba(255,255,255,.035); }
.job__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.job__co { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.job__name {
  display: block; font-size: clamp(18px, 1.55vw, 23px); font-weight: 600;
  line-height: 1.25; letter-spacing: -.012em; color: var(--text);
  text-wrap: balance;
}
.job__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.job__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ice); }
.job__meta svg { width: 16px; height: 16px; flex: none; color: var(--muted); }

.job__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--text);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.job__icon svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.job__toggle:hover .job__icon { border-color: #fff; }
.job.is-open .job__icon { background: #fff; border-color: #fff; color: var(--blue-deep); }
.job.is-open .job__icon svg { transform: rotate(180deg); }

/* Aufklappen ueber grid-template-rows 0fr -> 1fr: weich, ohne Hoehe messen. */
.job__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.job.is-open .job__panel { grid-template-rows: 1fr; }
.job__inner { overflow: hidden; min-height: 0; }
.job__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(22px, 3vw, 48px);
  padding: 8px clamp(4px, 1vw, 16px) clamp(28px, 3vw, 40px);
}
.job__block h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.job__block, .job__block p, .job__block li { font-size: 15px; line-height: 1.6; color: var(--ice); }
.job__block ul { display: grid; gap: 8px; }
.job__block li { position: relative; padding-left: 18px; }
.job__block li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--line-2);
}
.job__block p + p, .job__block p + ul, .job__block ul + p { margin-top: 10px; }
.job__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.job__foot small { font-size: 13px; color: var(--muted); }

/* Platzhalter, bis der Feed geladen ist */
.job--skel { display: grid; gap: 10px; padding: 28px clamp(4px, 1vw, 16px); }
.job--skel span { height: 12px; border-radius: 3px; background: rgba(255,255,255,.07); }
.job--skel span:nth-child(1) { width: 18%; }
.job--skel span:nth-child(2) { width: 52%; height: 20px; }
.job--skel span:nth-child(3) { width: 34%; }
@media (prefers-reduced-motion: no-preference) {
  .job--skel span { animation: jobPulse 1.6s ease-in-out infinite; }
}
@keyframes jobPulse { 50% { opacity: .45; } }

.jobs__empty { padding: 28px clamp(4px, 1vw, 16px); color: var(--ice); font-size: 16px; line-height: 1.6; }
.jobs__empty a, .jobs__src a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.jobs__src { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 640px) {
  .job__toggle { gap: 14px; }
  .job__icon { width: 38px; height: 38px; }
  .job__meta { gap: 6px 16px; }
}

/* Geschwungene Linie mittig hinter den Bildern, weichgezeichnet und schwach */
.kar__wave {
  position: absolute; z-index: -1;
  left: 50%; translate: -50% 0; top: 0;
  width: min(74vw, 980px); height: 100%;
  fill: none;
  stroke: rgba(255,255,255,.5);
  stroke-width: 2;
  filter: blur(7px);
  opacity: .38;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}

.karo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4.5vw, 76px);
  align-items: center;
}
.karo + .karo { margin-top: clamp(56px, 8vw, 130px); }

/* Jede zweite Zeile spiegeln: Bild rechts, Text links */
.karo:nth-of-type(even) .karo__media { order: 2; }

.karo__media {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--navy);
}
.karo__media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10;
  filter: saturate(.8) brightness(.82);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.karo__media:hover img { transform: scale(1.04); filter: none; }

.karo__name {
  font-size: clamp(24px, 2.8vw, 40px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.028em; margin-bottom: 10px;
}
.karo__claim { font-size: clamp(15px, 1.25vw, 18px); color: var(--text); margin-bottom: 16px; }
.karo__text  { font-size: 15.5px; color: var(--ice); max-width: 52ch; }

.karo__link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 11px 21px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: border-color .3s, background-color .3s;
}
.karo__link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.karo__link:hover { border-color: #fff; background: var(--gold-dim); }
.karo__link:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .karo { grid-template-columns: 1fr; gap: 20px; }
  .karo:nth-of-type(even) .karo__media { order: 0; }
  .kar__wave { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KONTAKT + FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.sec--kontakt { border-top: 1px solid var(--line); }
.kontakt {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(34px, 5vw, 80px); align-items: start;
}
.kontakt__left .btn { margin-top: 12px; }
.kontakt__card { padding-top: 6px; }
.kontakt__card dl { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; }
.kontakt__card dt {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding-top: 4px;
}
.kontakt__card dd { font-size: 16.5px; color: var(--ice); line-height: 1.55; }
.kontakt__card dd a { border-bottom: 1px solid var(--line-2); transition: color .3s, border-color .3s; }
.kontakt__card dd a:hover { color: var(--gold); border-color: var(--gold); }

/* Kontaktformular. Felder 16 px, sonst zoomt iOS beim Antippen hinein. */
.sec--form { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 110px); }
.kform {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px clamp(18px, 2.4vw, 34px);
  max-width: 880px; margin-top: clamp(28px, 3.4vw, 48px);
}
.kform__feld--breit { grid-column: 1 / -1; }
.kform label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.kform input[type="text"], .kform input[type="email"], .kform input[type="tel"], .kform textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--text);
  padding: 13px 15px; background: rgba(8,14,30,.55);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .25s, background-color .25s;
}
.kform textarea { resize: vertical; min-height: 150px; }
.kform input:hover, .kform textarea:hover { border-color: rgba(255,255,255,.42); }
.kform input:focus-visible, .kform textarea:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-color: #fff;
}
.kform [aria-invalid="true"] { border-color: #FF9A8B; }
.kform .kform__fehler { margin: 8px 0 0; font-size: 13.5px; color: #FFB4A8; max-width: none; }
.kform__haken { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer;
                font-size: 14.5px !important; line-height: 1.55; color: var(--ice) !important; margin: 0 !important; }
.kform__haken input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #fff; }
.kform__haken a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.kform__fuss { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.kform__fuss small { font-size: 13px; color: var(--muted); }
.kform button[disabled] { opacity: .55; cursor: progress; }
.kform .kform__status { margin: 0; font-size: 15px; color: #FFB4A8; max-width: none; }
.kform .kform__status:empty { display: none; }
.kform__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kform__dank { max-width: 60ch; margin-top: clamp(24px, 3vw, 40px); padding: 22px 24px;
               border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ice);
               font-size: 16.5px; line-height: 1.6; }
@media (max-width: 720px) { .kform { grid-template-columns: 1fr; } }

/* ───────────────────────────── Fußzeile ─────────────────────────────
   Eine schlanke Zeile: links das Copyright, rechts Rechtliches und die
   Marken-Icons (Pfade von Simple Icons). */
.foot { border-top: 1px solid var(--line); }

.foot__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 48px); flex-wrap: wrap;
  padding-block: clamp(26px, 3vw, 40px);
  font-size: 14px;
}
.foot__copy { color: var(--text); }

.foot__right {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 38px);
  flex-wrap: wrap;
}
.foot__right > a {
  color: var(--muted); transition: color .25s;
}
.foot__right > a:hover { color: var(--text); }

.foot__social { display: inline-flex; align-items: center; gap: 14px; }
.foot__social a {
  display: grid; place-items: center;
  width: 24px; height: 24px; color: var(--text);
  transition: opacity .25s;
  opacity: .9;
}
.foot__social a:hover { opacity: 1; }
.foot__social svg { width: 18px; height: 18px; fill: currentColor; }

/* ───────────────────────────── Scroll-Reveal ───────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ───────────────────────────── Responsive ───────────────────────────── */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .kontakt { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --nav-h: 64px; }
  /* Handy: Hochformat statt 16:9. Die breite Karte liess ober- und
     unterhalb je ein Drittel des Bildschirms leer und die Beschriftung
     schrumpfte auf 5 px. Breite wieder durch die freie Hoehe begrenzt. */
  .stage { --card-w: min(84vw, 460px, calc((100dvh - 312px) * .8)); }
  .stage__legal { justify-content: center; gap: 2px 18px; }
  .stage__legal nav { justify-content: center; }
  .stage__legal nav a, .stage__legal .linkbtn { display: inline-flex; align-items: center; min-height: 36px; }
  .stage__legal .foot__social a { width: 36px; height: 36px; }
  .card { aspect-ratio: 4 / 5; }
  .card__cap { padding: 0 7cqw 7cqw; }
  .card__name  { font-size: 8cqw; }
  .card__claim { font-size: max(14px, 4.4cqw); margin-top: 1.6cqw; }
  .card__text  { font-size: max(13px, 3.8cqw); margin-top: 3cqw; max-width: none;
                 display: -webkit-box; -webkit-box-orient: vertical;
                 -webkit-line-clamp: 4; overflow: hidden; }
  .card__scrim { background: linear-gradient(180deg, transparent 30%,
                 rgba(6,10,22,.7) 58%, rgba(6,10,22,.95) 100%); }
  .stage__hint { font-size: 14px; }
  /* Tippflaechen der Fusszeile und der Kontaktdaten auf 44 px */
  .foot__right > a, .foot__right > .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__social { gap: 4px; }
  .foot__social a { width: 44px; height: 44px; }
  .kontakt__card dd a { display: inline-block; padding-block: 11px; border-bottom: 0;
                        text-decoration: underline; text-decoration-color: var(--line-2);
                        text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .stage__track { width: clamp(56px, 22vw, 120px); }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .kontakt__card dl { grid-template-columns: 1fr; gap: 4px 0; }
  .kontakt__card dd { margin-bottom: 16px; }
}

/* ───────────────────────────── Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* Ausnahme: der Logo-Aufbau wischt und blendet nur, er bewegt nichts.
     Ohne sie stuende das Logo sofort fertig da (Windows mit ausgeschalteten
     Animationseffekten meldet reduzierte Bewegung). */
  .preloader__logo .pl { animation-duration: var(--d) !important; }
  .preloader { transition-duration: .6s, 0s !important; }
}