@charset "UTF-8";
/* ========================================
   SKYSEC Website - Design v1-4
   Penpot Design Tokens
   ======================================== */

/* ========================================
   FONTS — GT America
   ======================================== */
/* ── GT America (woff2 mit otf-Fallback) ── */
@font-face {
  font-family: 'GT America Thin';
  src: url('../Fonts/GT%20America/Font/GT-America-Standard-Thin.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Standard-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America Medium';
  src: url('../Fonts/GT%20America/Font/GT-America-Standard-Medium.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Standard-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America Bold';
  src: url('../Fonts/GT%20America/Font/GT-America-Standard-Bold.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Standard-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America Mono Thin';
  src: url('../Fonts/GT%20America/Font/GT-America-Mono-Thin.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Mono-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America Mono Medium';
  src: url('../Fonts/GT%20America/Font/GT-America-Mono-Medium.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Mono-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America Mono Bold';
  src: url('../Fonts/GT%20America/Font/GT-America-Mono-Bold.woff2') format('woff2'),
       url('../Fonts/GT%20America/Font/GT-America-Mono-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Metrik-angepasste Fallbacks (verhindern Layout-Shift beim Font-Swap) ──
   size-adjust/ascent/descent gleichen Arial an GT America an, damit der
   Wechsel von Systemschrift → Webfont keine Verschiebung erzeugt. */
@font-face {
  font-family: 'GT America Medium Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'GT America Mono Fallback';
  src: local('Courier New');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 20px;
  --spacing-06: 24px;
  --spacing-07: 28px;
  --spacing-08: 32px;
  --spacing-09: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;

  /* ── Farb-Tokens ──
     --color-on-rgb   = RGB-Basis für Text/Glass (low-opacity) auf dem Hintergrund.
     --color-fade-rgb = RGB-Basis für Gradient-Fades (= Hintergrundfarbe). */
  --color-bg: #191716;
  --color-surface: #303030;
  --color-text: #f5f5f5;

  /* Akzentfarbe (Brand-Blau) */
  --color-accent: #5a99ff;
  --color-accent-hover: #4185f5;

  --color-on-rgb: 245, 245, 245;
  --color-fade-rgb: 25, 23, 22;

  --color-text-muted: rgba(var(--color-on-rgb), 0.6);
  --color-text-soft: rgba(var(--color-on-rgb), 0.85);
  --color-text-faint: rgba(var(--color-on-rgb), 0.4);

  --color-glass-soft: rgba(var(--color-on-rgb), 0.1);
  --color-glass: rgba(var(--color-on-rgb), 0.2);
  --color-glass-strong: rgba(var(--color-on-rgb), 0.3);
  --color-glass-border: rgba(var(--color-on-rgb), 0.15);

  --color-card-hover: #211f1d;

  --font-primary: 'GT America Medium', 'GT America Thin', 'GT America Medium Fallback', Arial, sans-serif;
  --font-mono: 'GT America Mono Medium', 'GT America Mono Fallback', monospace;

  /* ── Typography Scale (Penpot Design Tokens) ── */
  --type-h1: clamp(4rem, 10vw, 5.75rem);  /* 64→92px */
  --type-h1-lh: 1.2;
  --type-h2: clamp(3rem, 6.5vw, 4rem);     /* 48→64px */
  --type-h2-lh: 1.2;
  --type-h3: 2rem;                          /* 32px */
  --type-h3-lh: 1;
  --type-quote-large: 3rem;                /* 48px */
  --type-quote-large-lh: 1;
  --type-quote-small: 2rem;                /* 32px */
  --type-quote-small-lh: 1;
  --type-body: 1rem;                       /* 16px */
  --type-body-lh: 1.2;
  --type-link: 1rem;                       /* 16px */
  --type-link-lh: 1.2;
  --type-breadcrumb: 0.625rem;             /* 10px */
  --type-breadcrumb-lh: 1.2;
  --type-mono-body: 1rem;                  /* 16px */
  --type-mono-body-lh: 1;
  --type-mono-footer: 1rem;                /* 16px */
  --type-mono-footer-lh: 1;
  --type-mono-large: 1.5rem;               /* 24px */
  --type-mono-large-lh: 1.2;

  --font-weight-heading: 500;
  --font-weight-body: 500;
  --font-weight-hairline: 100;
  --font-weight-mono: 500;
  --letter-spacing: 0;

}

/* Global: Blauen Browser-Standard-Fokus-Outline entfernen und konsistentes
   Fokus-Design mit nur dem Outline (ohne den blauen inline-Rahmen) verwenden.
   Ticket 3-8566: Tab-Focus - remove blue inline outline from cards/buttons.
   (Stand vorher faelschlich INNERHALB von :root — funktionierte nur dank
   CSS Nesting in modernen Browsern und liess aeltere Browser ohne
   Nesting-Support saemtliche Tokens ab --color-accent verlieren.) */
*,
*::before,
*::after {
  outline: none !important;
}

/* Stattdessen ein subtiler, konsistenter Fokus-Ring für alle fokussierbaren
   Elemente. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px;
}

/* ========================================
   Ensure .container keeps full height inside scroll-snap sections.
   (Ehemalige Bootstrap-Overrides entfernt — Bootstrap wird nicht geladen;
   body/a/ul-Basisregeln stehen weiter unten im Reset.)
   ======================================== */
.page-section .container, section .container { height: 100%; }

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

::-moz-selection {
  background-color: #5a99ff;
  color: #f5f5f5;
}

::selection {
  background-color: #5a99ff;
  color: #f5f5f5;
}

p {
  text-wrap: pretty;
}

/* ========================================
   Silbentrennung für Titel (Schweizer Rechtschreibung de-CH)
   Bricht lange Wörter mit Trennstrich um, wenn kein Platz mehr ist.
   Besonders relevant für die Mobile-Ansicht.
   ======================================== */
h1, h2, h3, h4, h5, h6,
.hero__title,
.timeline__title,
.timeline__step-title,
.icon-list__title,
.slider__title,
.slider__subtitle,
.open-jobs__title,
.open-jobs__card-title,
.footer-heading {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

ul {
  padding: 0;
}

body {
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-primary);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


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

img {
  border-radius: 0;
}

/* ========================================
   12-COLUMN GRID SYSTEM
   Desktop: 80px side margins, 40px column gap
   ======================================== */
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
}


/* Quote content starts at column 2 */
.quote__content {
  grid-column: 1 / -1;
}

/* Intro grid starts at column 2 */
.intro__grid {
  grid-column: 1 / -1;
}

/* Teaser grid — spans full container, fills height for absolute images */
.teaser__grid {
  grid-column: 1 / -1;
}

/* ========================================
   GLASS SURFACES — Gemeinsamer Milchglas-Effekt
   Wird von Nav, Section-Nav, Mobile-Menu und Slider-Dots geteilt.
   Abweichende Blur-Werte (Mobile-Menu-Panel blur(8px), Hero/Teaser
   blur(calc)) sind bewusst NICHT Teil dieser Gruppe.
   ======================================== */
.nav,
.section-nav-container,
.mobile-menu,
.slider__dots {
  background: var(--color-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ========================================
   NAVIGATION — Bottom Glass Nav (Desktop)
   ======================================== */
/* Initial hidden — wird erst durch JS nach erstem Scroll eingeblendet,
   damit beim Seiten-Reload kein kurzes Aufploppen sichtbar ist. */
.nav {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  /* Liegt bewusst ueber den Buttons (open-jobs__cta),
     damit das Menue beim Ueberlappen immer obenauf liegt. */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-radius: 999px;
  width: calc((100vw - 160px) / 3);
  max-width: 800px;
  border: 1px solid var(--color-glass-border);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Sichtbarer Zustand — wird per JS nach erstem Scroll hinzugefuegt */
.nav.nav--visible {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Nav hidden state — shrinks and fades out, removes pointer events so content below is reachable.
   !important verhindert, dass .nav.nav--visible (höhere Spezifität) opacity/pointer-events überschreibt. */
.nav--hidden {
  transform: translateX(-50%) scale(0.85) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


.nav__logo {
  display: flex;
  align-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.nav__logo img { width: 100%; height: 100%; }

/* ── Inline-SVG-Logo in der Nav-Bar ──
   Ruhezustand = fertiges Logo (voll gefuellt). Beim Hover ueber die Nav
   spielt NUR das Logo dieselbe Animation ab wie das Intro beim Reload
   (Ring-Segmente zeichnen + fuellen, mittleres Zeichen poppt, ganzes SVG
   dreht sanft ein). Reine CSS-Loesung, getriggert via :hover. */
.nav__logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
}
.nav__logo-svg .nav__logo-ring {
  fill: var(--color-text);
  stroke: var(--color-text);
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;   /* pathLength=1, damit der Draw-Effekt greift */
  stroke-dashoffset: 0;  /* Ruhezustand: voll gezeichnet */
}
.nav__logo-svg .nav__logo-mark {
  fill: var(--color-text);
  transform-box: fill-box;
  transform-origin: center;
}

/* Hover ueber das Logo triggert die Neu-Zeichnung – nur das Logo animiert,
   der Rest der Nav bleibt unberuehrt. Timings entsprechen der schnellen
   Intro-Variante (intro-repeat). Eigene Keyframes mit 0%-State, da das Logo
   im Ruhezustand bereits fertig gezeichnet/gefuellt ist. */
.nav__logo:hover .nav__logo-svg {
  animation: intro-spin-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__logo:hover .nav__logo-svg .nav__logo-ring {
  animation: nav-logo-draw 0.5s ease-in-out,
             nav-logo-fill 0.3s ease-out 0.4s;
}
.nav__logo:hover .nav__logo-svg .nav__logo-mark {
  animation: nav-logo-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

@keyframes nav-logo-draw {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes nav-logo-fill {
  0%   { fill-opacity: 0; }
  100% { fill-opacity: 1; }
}
@keyframes nav-logo-pop {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Reduzierte Bewegung: keine Logo-Hover-Animation */
@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover .nav__logo-svg,
  .nav__logo:hover .nav__logo-svg .nav__logo-ring,
  .nav__logo:hover .nav__logo-svg .nav__logo-mark {
    animation: none;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
  transition: font-weight 0.15s ease;
}

.nav__link:hover {
  font-weight: 700;
}

/* ── Nav-Dropdown (z. B. Career > Open Jobs) ─────────────── */
.nav__item--has-sub {
  position: relative;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin: 0;
  padding: 8px 0;
  min-width: 180px;
  list-style: none;
  background: var(--color-surface, rgba(20, 20, 20, 0.92));
  border: 1px solid var(--color-glass, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-4xl, 16px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}

/* Unsichtbare Hover-Bruecke, damit der Cursor die Luecke ueberbruecken kann */
.nav__item--has-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__sub-link {
  display: block;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
  transition: font-weight 0.15s ease;
}

.nav__sub-link:hover {
  font-weight: 700;
}

.nav__burger {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  flex-shrink: 0;
}

.nav__burger-svg {
  width: 48px;
  height: 48px;
  overflow: visible;
}

/* Beide Linien teilen denselben Drehpunkt (Mitte des 48x48-SVG = 24,24).
   Geschlossen: per translateY auseinandergeschoben (Burger).
   Offen: zur Mitte kollabieren + rotieren -> exakt zentriertes, sauberes X. */
.nav__burger-line {
  transform-origin: 24px 24px;
  transition: transform 0.4s ease;
}

.nav__burger-line--top {
  transform: translateY(-4px);
}

.nav__burger-line--bottom {
  transform: translateY(4px);
}

/* Hover-Effekt: Lines rutschen auseinander (nur wenn Menu NICHT offen).
   :not(.nav--mobile-open) verhindert, dass Touch-Hover auf Mobile die
   X-Animation ueberschreibt (gleiche Spezifitaet + spaetere Quelle). */
.nav:not(.nav--mobile-open) .nav__burger:hover .nav__burger-line--top {
  transform: translateY(-6px);
}

.nav:not(.nav--mobile-open) .nav__burger:hover .nav__burger-line--bottom {
  transform: translateY(6px);
}

.nav--mobile-open .nav__burger-line--top {
  transform: rotate(45deg);
}

.nav--mobile-open .nav__burger-line--bottom {
  transform: rotate(-45deg);
}

/* Burger bleibt klickbar, auch wenn die Nav ausgeblendet ist */
.nav--hidden .nav__burger {
  pointer-events: auto;
}

/* ========================================
   SHARED BUTTON — All non-nav buttons unified
   ======================================== */
/* Fuer Text, der im Layout nicht erscheinen soll, aber von Suchmaschinen und
   Vorleseprogrammen gebraucht wird — etwa die Hauptueberschrift einer Seite,
   deren Hero rein grafisch ist. Bewusst NICHT display:none oder
   visibility:hidden: Beides nimmt den Text auch aus dem Zugaenglichkeitsbaum,
   damit waere nichts gewonnen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn,
.quote__action,
.teaser__card-cta,
.slider__cta,
.open-jobs__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 69px;
  padding: 0 var(--spacing-06);
  border-radius: var(--radius-full);

  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: font-weight 0.15s ease, background 0.15s ease;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

.btn:hover,
.quote__action:hover,
.teaser__card-cta:hover,
.slider__cta:hover,
.open-jobs__cta:hover {
  font-weight: 700;
  background: var(--color-glass-strong);
}

/* ----------------------------------------
   Button-Variante "alternative" — Akzentfarbe (blau)
   Wird per JS anhand von data-content-variant="...Variant"
   gesetzt (JSON-Wert "alternative"). Default bleibt der
   Glass-Look oben.
   ---------------------------------------- */
.btn.is-alternative,
.quote__action.is-alternative,
.teaser__card-cta.is-alternative,
.slider__cta.is-alternative,
.open-jobs__cta.is-alternative {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.btn.is-alternative:hover,
.quote__action.is-alternative:hover,
.teaser__card-cta.is-alternative:hover,
.slider__cta.is-alternative:hover,
.open-jobs__cta.is-alternative:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Icon im Akzent-Button weiss einfaerben */
.is-alternative .btn__icon {
  filter: brightness(0) invert(1);
}

/* Bewerben-Button immer in Akzentfarbe (blau), unabhaengig von is-alternative */
.job-detail__apply {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.job-detail__apply:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.job-detail__apply .btn__icon {
  filter: brightness(0) invert(1);
}

/* ========================================
   BUTTON ICON — Shared styles for all non-nav button icons
   ======================================== */
.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Standard-Buttons mit horizontalem Pfeil (→): Icon wandert beim Hover nach
   rechts. Zentral fuer alle betroffenen Buttons statt pro Klasse wiederholt. */
.quote__action:hover .btn__icon,
.teaser__card-cta:hover .btn__icon {
  transform: translateX(4px);
}

/* ========================================
   EXTERNAL / NEW-PAGE LINKS — Arrow pointing top-right (↗)
   Wird per JS (content-loader.js) auf alle Links gesetzt, die auf
   eine neue Seite führen (*.html oder http(s)://), nicht jedoch auf
   reine Anker (#...), mailto: oder tel:.
   ======================================== */

/* Text-Links ohne eigenes Icon: ↗ als Pseudo-Element anhängen */

.link--external:not(:has(.btn__icon)):hover::after {
  transform: translate(2px, -2px);
}

/* Kein ↗-Pseudo-Element in Breadcrumbs — dort sind es reine
   Navigations-Links ohne Icon (Absicherung zusätzlich zum Ausschluss in
   markExternalLinks). */
.hero__breadcrumb .link--external::after,
.jobs-overview__breadcrumb .link--external::after,
.job-detail__breadcrumb .link--external::after {
  content: none;
}

/* Buttons mit vorhandenem .btn__icon: Das Icon wird per JS
   (content-loader.js -> markExternalLinks) auf das echte Rechts-Pfeil-
   Bild (arrowright.svg) umgestellt — es wird NICHT per CSS gedreht.
   Beim Hover bewegt sich das Icon leicht nach rechts. */
.link--external.link--external:hover .btn__icon {
  transform: translate(2px, -2px);
}

/* ========================================
   DOWN-CTA — Kontakt-Buttons: Pfeil zeigt nach unten (↓)
   Es wird das echte Abwaerts-Pfeil-Bild (arrowdown.svg) verwendet — das Icon
   wird NICHT per CSS gedreht. Beim Hover bewegt es sich leicht nach unten.
   ======================================== */
.cta--down.cta--down:hover .btn__icon {
  transform: translateY(4px);
}

/* ========================================
   SECTION NAV — Right Anchor Nav (Desktop)
   ======================================== */
/* Initial hidden — wird erst durch JS nach erstem Scroll eingeblendet,
   damit beim Seiten-Reload kein kurzes Aufploppen sichtbar ist. */
.section-nav {
  position: fixed;
  right: 80px;
  bottom: 32px;
  /* Wie die Bottom-Nav ueber den Buttons, damit das Menue beim Ueberlappen obenauf liegt. */
  z-index: 1100;
  opacity: 0;
  transform: scale(0.85);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  max-width: 240px;

  /* Standardmaessig ausgeblendet — nur bei mehrseitigen Seiten sichtbar
     (siehe body[data-multi-section="true"] weiter unten). */
  display: none;
}

/* Sichtbarer Zustand — wird per JS nach erstem Scroll hinzugefuegt */
.section-nav.section-nav--visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Section nav hidden state — shrinks and fades out.
   !important verhindert, dass .section-nav.section-nav--visible (höhere Spezifität) opacity/pointer-events überschreibt. */
.section-nav--hidden {
  transform: scale(0.85) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-multi-section="true"] .section-nav {
  display: block;
}

.section-nav-container {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  border-radius: 24px;
  border: 1px solid var(--color-glass-border);
}

/* Titel der Section Navigation */
.section-nav__title {
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  font-weight: var(--font-weight-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-glass-border);
  user-select: none;
}

.section-nav__link {
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

/* Sichtbares Label */
.section-nav__label {
  font-weight: 500;
  transition: font-weight 0.15s ease;
}

/* Unsichtbarer Bold-"Ghost": reserviert dauerhaft die Breite des Hover-Zustands,
   damit der Wechsel auf font-weight:700 kein Layout-Shift (Zittern) mehr auslöst. */
.section-nav__label::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.section-nav__link.active {
  color: var(--color-text);
}

.section-nav__link:hover {
  color: rgba(var(--color-on-rgb), 0.8);
  font-family: 'GT America Mono Bold', 'GT America Mono Fallback', monospace;
}

.section-nav__link:hover .section-nav__label {
  font-weight: 700;
}

/* Mobile Menu Overlay
   Liegt als 12-Spalten-Grid (wie .container), damit die Links linksbuendig
   bei Spalte 2 starten — identisch zur Ausrichtung des uebrigen Seiteninhalts.
   Padding & Gap matchen .container responsiv (Desktop 80px/40px,
   Tablet/Mobile 20px/12px), damit die Spalten-Flucht auf allen Breakpoints
   exakt mit dem uebrigen Seiteninhalt uebereinstimmt.
   Vertikale Zentrierung via align-content. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  border: 1px solid var(--color-glass-border);
}

.mobile-menu--open {
  opacity: 1;
  pointer-events: auto;
}

/* Scroll-Lock: Seite nicht scrollbar, solange das Mobile-Menue offen ist.
  Wird per JS (Body-Klasse 'menu-open') beim Oeffnen gesetzt. */
body.menu-open {
  overflow: hidden;
}

/* Section-Nav verstecken, solange das Mobile-Menü offen ist.
   Section-Nav hat z-index:1100 (über mobile-menu:999) und bleibt sonst
   sichtbar -> überscheiben mit diesem Kaskaden-Reset. */
body.menu-open .section-nav {
  visibility: hidden;
  pointer-events: none;
}

/* ── Zwei-Spalten-Layout (wie Domitur) ── */
.mobile-menu__content {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Mobile: Fließendes Layout (Unterseiten direkt unter Parent) ── */
.mobile-menu__sidebar {
  width: 100%;
  display: block;
  padding: 120px 0px 60px 0px;
  overflow-y: auto;
  /* overflow-y:auto allein macht overflow-x implizit ebenfalls 'auto' —
     beim Auf-/Zuklappen der Untermenues blitzte dadurch der horizontale
     Overlay-Scrollbalken als Linie am Sidebar-Unterrand auf. */
  overflow-x: hidden;
}

.mobile-menu__panel-content {
  display: none;
  flex-direction: column;
  gap: 0;
}

/* Mobile: Sub-Links kompakter */
@media (max-width: 900px) {
  .mobile-menu__sub-link {
    padding: 0.2em 0;
    font-size: clamp(1.25rem, 5vw, var(--type-h3));
  }
}

.mobile-menu__panel-content.mobile-menu__panel--visible {
  display: flex;
}

/* ── Desktop: Zwei-Spalten-Layout (6-Spalten-Grid) ── */
@media (min-width: 901px) {
  .mobile-menu__sidebar {
    width: 50%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: 0;
    padding: 80px;
    padding-top: 120px;
  }

  /* Direct children of sidebar: Spalten 1-4, Zeile per Auto-Placement in
     Quellreihenfolge. KEINE hartkodierten grid-rows — die frühere Variante
     (link-row fest auf Zeile 3) stapelte bei mehr als einem Eintrag mit
     Untermenü (Career UND Products) beide auf dieselbe Zeile. Die absolut
     positionierten Panel-Contents nehmen an der Auto-Platzierung nicht teil. */
  .mobile-menu__main-link,
  .mobile-menu__link-row { grid-column: 1 / 5; }

  .mobile-menu__panel-content {
    grid-column: 5 / -1 !important;
    grid-row: 1 !important;
    align-self: start;
    position: absolute;
    top: auto;
    left: 50%;
    width: auto;
  }

  .mobile-menu__panel-content.mobile-menu__panel--visible {
    position: absolute;
    padding: unset;
    gap: 0px;
  }
}

/* Link-Row: Link + Pfeil nebeneinander (für Items mit Children) */
.mobile-menu__link-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Hauptmenü-Links */
.mobile-menu__main-link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0;
  font-family: 'GT America Mono Medium', monospace;
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  transition: font-weight 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.mobile-menu__main-link:hover {
  font-weight: 700;
}

.mobile-menu__main-link.mobile-menu__main-link--active {
  color: var(--color-text);
  font-weight: 700;
}

/* Pfeil-Button (rechte Seite der Sidebar, gleiche Linie für alle) */
.mobile-menu__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--color-on-rgb), 0.08);
  border: 1px solid transparent;
  margin-left: auto;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu__arrow:hover {
  background: rgba(var(--color-on-rgb), 0.2);
}

.mobile-menu__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Active State: Pfeil dreht sich 180° und erhält hellen Hintergrund mit dunklem Text —
   ähnlich wie der Filter-Button (`.jobs-filter__toggle--active`).
   Wird per JS auf den Pfeil-Button gesetzt wenn das Untermenü offen ist. */
.mobile-menu__arrow.mobile-menu__arrow--active {
  transform: rotate(180deg) !important;
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-text-muted) !important;
}

/* Sub-Links - gleiche Größe wie Hauptmenü */
.mobile-menu__sub-link {
  display: block;
  padding: 0.5em 0;
  font-family: 'GT America Mono Medium', monospace;
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: font-weight 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.mobile-menu__sub-link:hover {
  font-weight: 700;
  color: var(--color-text);
}

/* Footer-Links (unten links) */
.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-bottom: 40px;
  margin-left: 80px;
}

.mobile-menu__footer-link {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-mono);
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text-faint);
  transition: color 0.15s ease;
  cursor: pointer;
}

.mobile-menu__footer-link:hover {
  color: var(--color-text);
}

/* Responsive: auf <900px einspaltig */
@media (max-width: 899px) {
  .mobile-menu__content {
    flex-direction: column;
  }

  .mobile-menu__sidebar {
    width: 100%;
  }

  .mobile-menu__panel {
    width: 100%;
  }

  .mobile-menu__footer {
    margin-bottom: 40px;
    margin-left: 20px;
  }

  .mobile-menu__main-link {
    font-size: clamp(1.75rem, 7vw, var(--type-h2));
  }

  .mobile-menu__sub-link {
    font-size: clamp(1.25rem, 5vw, var(--type-h3));
  }
}

@media (min-width: 900px) {
  .mobile-menu__main-link {
    font-size: var(--type-h2);
  }
}

/* ========================================
   HERO
   ======================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  padding: 0 40px;
}

/* Responsives Poster-Bild: wird durch srcset gesteuert und vom Video
   ueberblendet, sobald dieses spielt (Klasse hero--playing). */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.6s ease;
}

/* Video startet -> Poster ausblenden */
.hero--playing .hero__poster {
  opacity: 0;
  pointer-events: none;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Progressive Video Loading — Zweilagen-Struktur */
/* Z-Index-Schichten:
   1 = Low-Res-Video (Hintergrund)
   2 = HD-Video (ueber Low-Res)
   3 = Overlay (Gradient + Blur Layer)
   4 = Content (Text)                           */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__video--lowres {
  /* Low-Res-Video spielt sofort — geblurred (entspricht LQIP-Strategie).
     Leicht skalieren: Der Blur blutet an den Element-Kanten aus
     (halbtransparenter Saum ueber dunklem Grund = sichtbarer
     "Inner Shadow" rund um den ganzen Viewport). Mit scale liegt die
     weiche Kante ausserhalb des overflow:hidden-Heros. */
  z-index: 1;
  filter: blur(8px);
  transform: scale(1.03);
  transition: filter 0.6s ease-out;
}

/* Low-Res nach dem HD-Swap ausblenden — progressive-video-loader.js toggelt
   die Klasse. (Fruehere Sibling-Selektoren ".--hd ~ .--lowres" waren tot:
   Low-Res steht im DOM VOR dem HD-Video, "~" matcht nur nachfolgende
   Geschwister.) */
.hero__video--hidden {
  display: none;
}

.hero__video--hd {
  /* HD-Video liegt ueber Low-Res, aber unsichtbar bis geladen */
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

/* HD-Video sichtbar machen, sobald es geladen ist */
.hero__video--hd[data-video-loaded="true"] {
  opacity: 1;
}

/* ── Loop-Fade ──
   Die Hero-Videos laufen in Schleife; ohne Hilfe springt das letzte Frame hart
   auf das erste zurueck. Diese Ebene liegt ueber beiden Videos (z-index 2), aber
   unter dem Overlay (z-index 3) und dem Content (z-index 4) — der Text bleibt
   also die ganze Zeit lesbar, nur das Bewegtbild blendet an der Naht durch den
   Hintergrundton. Opacity wird von main.js pro Frame ueber --loop-fade gesetzt
   (gleiche Technik wie --reveal-progress); ohne JS bleibt die Ebene bei 0 und
   damit vollstaendig unsichtbar. */
.hero__video-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--color-bg);
  opacity: var(--loop-fade, 0);
}

/* ── Hero-Logo-Animation (nativ, SVG/CSS statt MP4) ──
   Timings und Easing aus design/logo-animation.html, Variante V5
   "Slide + Zeichnen": die vier Drohnen-Motive fliegen in Flugrichtung
   herein, waehrend die Kontur gezeichnet und gefuellt wird; als Abschluss
   das Logo wie das Site-Intro (intro-repeat-Timing) — dadurch folgen nach
   dem Intro-Overlay nicht zwei Logo-Animationen direkt aufeinander. Choreografie (Klassen --active/
   --animate/--leaving, Loop) steuert main.js; die Basiszustaende zum
   Animieren gelten nur unter .hero__anim--js — ohne JS oder bei
   prefers-reduced-motion bleibt das statische, gefuellte Logo stehen.
   Zeichenfarbe rgba(242,243,239) == Intro-Overlay-Logo. */
.hero__anim {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__motif {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* Logo exakt in Groesse/Position des Intro-Overlay-Logos
   (.intro-overlay__logo: viewport-zentriert, clamp-Breite) — so schliesst
   die Sequenz nahtlos an das Intro an. Die Drohnen-Motive haben eigene
   Breiten (unten). */
.hero__motif svg {
  width: clamp(120px, 20vw, 200px);
  height: auto;
  overflow: visible;
  display: block;
}

/* Groessen-Normalisierung: die Motive haben verschiedene Seitenverhaeltnisse
   (Top ~1:1, Horizontal ~2.4:1); die Breiten sind so gewaehlt, dass die
   visuelle Masse (Flaeche) aller Motive ungefaehr gleich wirkt. */
.hero__motif--top svg { width: min(52vmin, 560px); }
.hero__motif--horizontal svg { width: min(78vmin, 850px); }
.hero__motif--ascend svg { width: min(54vmin, 580px); }
.hero__motif--descend svg { width: min(55vmin, 590px); }

/* Einflugvektoren: der Motivname beschreibt die FLUGRICHTUNG — das Motiv
   kommt von der Gegenseite herein (ascend = Steigflug links -> Einflug von
   unten rechts). Top fliegt zur Kamera und waechst leicht heran. */
.hero__motif--top { --fx: 0px; --fy: 0px; --fs: 0.88; }
.hero__motif--horizontal { --fx: -28vmin; --fy: 0px; --fs: 1; }
.hero__motif--ascend { --fx: 20vmin; --fy: 17vmin; --fs: 1; }
.hero__motif--descend { --fx: 20vmin; --fy: -17vmin; --fs: 1; }

/* Statischer Fallback (kein JS / reduced motion): gefuelltes Logo */
.hero__motif--logo { opacity: 1; }

.hero__motif-ring,
.hero__motif-mark {
  fill: rgba(242, 243, 239, 1);
}

/* Basiszustaende zum Animieren — nur wenn die Choreografie laeuft */
.hero__anim--js .hero__motif { opacity: 0; }
.hero__anim--js .hero__motif--active { opacity: 1; }

.hero__anim--js .hero__motif-svg { transform-origin: 50% 50%; }

.hero__anim--js .hero__motif-ring {
  fill-opacity: 0;
  stroke: rgba(242, 243, 239, 1);
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;        /* pathLength=1 */
  stroke-dashoffset: 1;
}

.hero__anim--js .hero__motif-mark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hero__anim--js .hero__motif--drone svg {
  opacity: 0;
  transform-origin: 50% 50%;
}

.hero__anim--js .hero__motif--drone path {
  fill: rgba(242, 243, 239, 1);
  fill-opacity: 0;
  stroke: rgba(242, 243, 239, 1);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;        /* pathLength=1 */
  stroke-dashoffset: 1;
}

/* Logo-Einblendung == Site-Intro (intro-repeat-Variante) */
.hero__anim--js .hero__motif--logo.hero__motif--animate .hero__motif-svg {
  animation: intro-spin-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__anim--js .hero__motif--logo.hero__motif--animate .hero__motif-ring {
  animation: intro-seg-draw 0.5s ease-in-out forwards,
             intro-seg-fill 0.3s ease-out 0.4s forwards;
}
.hero__anim--js .hero__motif--logo.hero__motif--animate .hero__motif-mark {
  animation: intro-mark-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Drohnen: Einflug in Flugrichtung, Opacity frueh voll da, damit das
   gleichzeitige Zeichnen der Kontur sichtbar bleibt (V5) */
.hero__anim--js .hero__motif--drone.hero__motif--animate svg {
  animation: hero-fly-in-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__anim--js .hero__motif--drone.hero__motif--animate path {
  animation: intro-seg-draw 0.9s ease-in-out forwards,
             intro-seg-fill 0.4s ease-out 0.75s forwards;
}

/* Abgang: reiner Opacity-Fade wie das Intro-Overlay-Dissolve */
.hero__anim--js .hero__motif--leaving {
  animation: hero-motif-out 0.4s ease-out forwards;
}

@keyframes hero-fly-in-draw {
  0%   { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1)); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes hero-motif-out { to { opacity: 0; } }

/* Einmaliges Aufblenden des Logos fuer den Fall ohne Choreografie.
   Ausschliesslich Opazitaet, keine Bewegung: Verschiebung, Skalierung und
   Rotation sind es, die bei vestibulaeren Beschwerden Probleme machen, eine
   Blende nicht. Deshalb ist sie auch unter prefers-reduced-motion vertretbar. */
@keyframes hero-logo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduced Motion: Die Hero-Choreografie ist eine bewusste Ausnahme von der
   Projektregel und laeuft auf Produktentscheidung auch hier (Begruendung
   siehe startHeroAnim() in main.js). Frueher stand an dieser Stelle ein
   "animation: none" fuer alle Motiv-Ebenen — das wuerde die Choreografie
   jetzt still aushebeln und ist deshalb entfernt. Intro und Scroll-Reveals
   respektieren die Einstellung unveraendert. */
@media (prefers-reduced-motion: reduce) {
  /* Greift nur noch, solange die Choreografie nicht laeuft: in der Spanne
     zwischen erstem Rendern und dem Start durch main.js sowie dauerhaft,
     wenn JavaScript deaktiviert ist. Ohne die Blende steht das Logo dort
     regungslos und die Hero wirkt, als haette sie nicht fertig geladen.

     Bewusst OHNE animation-delay und OHNE fill-mode: Der Ruhezustand von
     .hero__motif--logo ist opacity 1. Laeuft die Animation aus irgendeinem
     Grund nicht, bleibt das Logo damit sichtbar. Mit "backwards" waere der
     Ausfall eine leere Hero — schlechter als der Zustand, den die Blende
     verbessern soll. */
  .hero__anim:not(.hero__anim--js) .hero__motif--logo {
    animation: hero-logo-fade 900ms ease-out;
  }
}

.hero__overlay {
  z-index: 3;
  transition-duration: 100ms;
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(var(--color-fade-rgb),0.3) 0%, rgba(var(--color-fade-rgb),0.7) 100%); */
}

/* Bottom-Gradient: deaktiviert für Entwurf/Prototype (#gradient-hide).
   Liegt über Bild/Overlay (z-index:1), aber unter dem Hero-Content (z-index:2),
   damit der Text lesbar bleibt. */
/*
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--color-bg) 0%,
    rgba(var(--color-fade-rgb),0.6) 30%,
    transparent 100%
  );
}
*/

.hero__content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-24);
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  margin-top: 100px;
}

/* Breadcrumb über dem Hero-Titel (z. B. HOME > CAREER) */
/* Breadcrumb — einheitlicher, textähnlicher Abstand zwischen allen Elementen */
.hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 25vh;
  margin-bottom: var(--spacing-04);
}

.hero__breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: font-weight 0.15s ease, color 0.2s ease;
}

.hero__breadcrumb-link:hover {
  color: var(--color-text);
  font-weight: 700;
}

.hero__breadcrumb-sep {
  color: var(--color-text-muted);
}

.hero__breadcrumb-current {
  color: var(--color-text-muted);
}

.hero__title {
  font-size: var(--type-h1);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards 0.3s;
}

/* Wenn ein Breadcrumb vorausgeht, übernimmt dieser den oberen Abstand */
.hero__breadcrumb + .hero__title {
  margin-top: 0;
}

/* Scroll-Indicator: Arrow-Down Button im Footer-Icon-Stil.
   Global am Viewport fixiert – erscheint nach Inaktivität in jeder Sektion
   (.hero__scroll-arrow--visible) und pulsiert; scrollt zur nächsten Sektion. */
.hero__scroll-arrow {
  position: fixed;
  bottom: var(--spacing-08);
  left: 50%;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-glass-soft);
  color: var(--color-text);
  cursor: pointer;
  /* Sichtbarkeit: standardmaessig versteckt, sanftes Ein-/Ausblenden */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease;
}

.hero__scroll-arrow--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* mäßiges Pulsieren bei laengerer Inaktivitaet */
  animation: heroScrollPulse 2.4s ease-in-out infinite;
}

.hero__scroll-arrow:hover {
  background: var(--color-glass);
}

.hero__scroll-arrow-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* ========================================
   HERO SCROLL-REVEAL
   Zuerst nur das Bild; Overlay + Text werden beim Scrollen
   progressiv eingeblendet (gesteuert via --reveal-progress 0..1).
   Aktiv nur unter .hero--reveal (per JSON hero.reveal gesetzt).
   ======================================== */
.hero--reveal {
  --reveal-progress: 0;
}

/* Overlay: Verdunklung + Blur folgen dem Scroll-Fortschritt.
   Laengere Transition (0.6s), damit der Sprung auf den Endzustand sanft animiert. */
/* Overlay: Behaelt den vertikalen Gradient (oben schwach → unten stark)
    waehrend des Reveals, damit der Farb-Overlay-Effekt auch nach dem
    Scrollen sichtbar bleibt. Der alte flache rgba-Wert hat den Gradient
    zerstoert und das Hero-Video bei vollem Reveal zu einem dunklen
    Rechteck ohne Ablaefung gemacht. */
.hero--reveal .hero__overlay {
  background: linear-gradient(180deg,
    rgba(var(--color-fade-rgb), calc(0.2 * var(--reveal-progress, 0))) 0%,
    rgba(var(--color-fade-rgb), calc(0.65 * var(--reveal-progress, 0))) 100%
  );
  backdrop-filter: blur(calc(8px * var(--reveal-progress, 0)));
  -webkit-backdrop-filter: blur(calc(8px * var(--reveal-progress, 0)));
  transition: background 0.6s ease, backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease;
}

/* Text-Container: erst unsichtbar, blendet mit dem Fortschritt ein */
.hero--reveal .hero__content {
  opacity: var(--reveal-progress, 0);
  transform: translateY(calc(40px * (1 - var(--reveal-progress, 0))));
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Auto-fadeUp der Hero-Texte deaktivieren — Sichtbarkeit kommt vom Container */
.hero--reveal .hero__title,
.hero--reveal .hero__subtitle {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Dezenter Bild-Zoom waehrend des Reveals (Bild + Poster) */
.hero--reveal .hero__image,
.hero--reveal .hero__poster {
  transform: scale(calc(1 + 0.06 * var(--reveal-progress, 0)));
  transition: transform 0.6s ease;
}

/* Reduced Motion: kein Scroll-Zwang — Inhalt sofort vollstaendig sichtbar */
@media (prefers-reduced-motion: reduce) {
  .hero--reveal {
    --reveal-progress: 1;
  }
  .hero--reveal .hero__overlay,
  .hero--reveal .hero__content,
  .hero--reveal .hero__image,
  .hero--reveal .hero__poster {
    transition: none;
  }
}

/* ========================================
   IMAGE / ABOUT INTRO
   ======================================== */
.intro {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 100%;
  min-height: 100%;
}

.intro__title-wrapper {
  grid-column: 1 / -1;
  margin-top: 72px;
  margin-bottom: 32px;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-12);
  align-items: center;
  margin-bottom: 72px;
}

.intro__image {
  width: 100%;
  max-height: calc(100dvh - 144px - 80px);
  aspect-ratio: 481 / 441;
  background: var(--color-surface);
  border-radius: 0;
  overflow: hidden;
}

.intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 3D-Drohnen-Mount (drone-viewer.js) ──────────────────────────────────
   Container für den Three.js-Canvas. Transparent, damit der Canvas den
   Section-Hintergrund (--color-bg, Light/Dark) durchscheinen lässt.
   position: relative, damit der Canvas absolut darüber liegen kann. */
.intro__model {
  position: relative;
  background: transparent;
}

/* Der eingehängte Canvas füllt den Mount vollständig. */
.intro__model canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Bild-Fallback: sichtbar, solange 3D NICHT aktiv ist (kein WebGL /
   prefers-reduced-motion / vor dem Init). Sobald drone-viewer.js den
   Canvas einhängt, setzt es .intro__model--active und blendet das Bild aus. */
.intro__model--active .intro__model-fallback {
  display: none;
}

/* ========================================
   QUOTE
   ======================================== */
.quote {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  /* 12-Spalten-Grid wie .container, damit der Content erst auf Spalte 2
     beginnt (analog zu Hero/Intro). Vertikal zentriert über align-items. */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  align-items: center;
  padding: 0 80px;
}

/* Gradient von unten – liegt über Bild/Overlay, unter dem Text */
.quote::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(var(--color-fade-rgb),1) 0%,
    rgba(var(--color-fade-rgb),0.7) 35%,
    transparent 100%
  );
}

/* Gradient von oben – Spiegelbild des unteren Fades */
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-fade-rgb),1) 0%,
    rgba(var(--color-fade-rgb),0.7) 35%,
    transparent 100%
  );
}

.quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix: <picture> wrapper created by wrapInPicture() needs full-size layout too */
.quote > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Die frueher hier definierte .quote__overlay (flaechige Abdunklung des
   Hintergrundbilds, rgba(--color-fade-rgb, 0.8)) ist entfallen — das Motiv
   soll unabgedunkelt wirken. Die Textlesbarkeit tragen die beiden Verlaeufe
   .quote::before und .quote::after oben in dieser Datei. Das zugehoerige
   leere <div class="quote__overlay"> wurde aus index/career/product entfernt. */

.quote__content {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  text-align: left;
}

.quote__author {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-10);
  color: var(--color-text-muted);
}

.quote__text {
  font-size: var(--type-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-quote-large-lh);
  margin-bottom: var(--spacing-10);
  text-align: left;
}

/* ========================================
   TEASER — Side-by-side cards, equal top/bottom padding
   Stacks vertically at tablet/mobile with 100dvh each
   ======================================== */
.teaser {
  height: 100dvh;
  background: var(--color-bg);
  padding-top: 72px;
  padding-bottom: 72px;
  justify-content: center;
}

/* Teaser grid — 2-col → 1-col mobile, 80px side margin via container, max-width 1200px */
/* spacing gleich wie .jobs__grid (gap spacing-06) für konsistente Karte-Abstände */
.teaser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-06);

  margin: 0 auto;
}

/* All component grids — consistent 1200px max-width constraint */
.icon-list__items {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile Teaser Sections are hidden on Desktop */
.teaser--mobile {
  display: none;
}

/* Card */
.teaser__card {
  /* display:block zwingend: Die Card ist ein <a> (default inline). Im
     Desktop-Grid blockifiziert der Grid-Container sie automatisch, im
     Mobile-Layout (display:block-Grid) NICHT — und fuer absolute Kinder
     eines inline-Elements berechnet Firefox den Containing-Block spec-
     konform mit Breite 0: Overlay/Gradient/Titel verschwinden. */
  display: block;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  min-height: calc(100dvh - 144px);
}

.teaser__card-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Hover-Zoom nur auf Desktop (Maus) — auf Touch-Devices deaktivieren.
   Der Gradient blendet in derselben Geschwindigkeit aus wie der Zoom. */
@media (hover: hover) {
  .teaser__card:hover .teaser__card-image {
    transform: scale(1.05);
  }
  .teaser__card:hover .teaser__card-overlay::before {
    opacity: 0;
  }
}

/* Overlay — Gradient fuer Textlesbarkeit. Bewusst KEIN Glass-/Blur-Wechsel
   auf Hover mehr: Der Hover-Effekt ist der leichte Bild-Zoom plus das
   Ausblenden dieses Gradients — beides synchron mit 0.6s ease. */
.teaser__card-overlay {
  position: absolute;
  inset: 0;
  color: var(--color-text);
}

/* Gradient als Pseudo-Element: Der Karten-Content (Titel, CTA) liegt im
   Markup INNERHALB des Overlays — wuerde das Overlay selbst ausblenden,
   verschwaende der Text mit. So faded nur der Gradient. */
.teaser__card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--color-bg) 0%,
    rgba(var(--color-fade-rgb),0.95) 15%,
    rgba(var(--color-fade-rgb),0.6) 35%,
    transparent 65%
  );
  opacity: 1;
  /* Gleiche Dauer/Easing wie der Bild-Zoom (.teaser__card-image) */
  transition: opacity 0.6s ease;
}

/* Content wrapper — flex column, positioned at bottom, aligned to 80px container margin */
.teaser__card-content {
  position: absolute;
  bottom: 64px;
  left: 0;
  z-index: 2;
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.teaser__card-title {
  font-size: var(--type-quote-small);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-quote-small-lh);
  text-transform: uppercase;
}

/* ========================================
   FOOTER — Fullscreen Footer
   ======================================== */
.footer {
  height: 100%;
  min-height: 100dvh;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6rem 0 3rem;
}

/* Alternativer Footer auf Job-Unterseiten (page-section--flow):
   sections.css setzt fuer .page-section--flow height:auto und
   min-height:auto. Dadurch wuerde (a) die 100dvh-Mindesthoehe des
   Footers entfallen und (b) height:100% des Containers gegen
   height:auto aufloesen → der Container kollabiert auf seine
   Inhaltshoehe, das Grid auto/1fr/auto hat keinen Verteilraum und
   footer-bottom klebt direkt unter footer-center.
   Hoehere Spezifitaet (.footer + .page-section--flow) stellt die
   Viewport-Mindesthoehe wieder her. Zusaetzlich bekommt der
   Container flex:1, damit er als Flex-Kind des Footers (display:flex,
   flex-direction:column) den gesamten 100dvh-Raum ausfuellt — das
   1fr-Grid-Row bekommt Raum und drueckt footer-bottom nach unten. */
.footer.page-section--flow {
  min-height: 100dvh;
}
.footer.page-section--flow .container {
  flex: 1;
}

/* Footer container — 12-col grid; content starts at column 2, ends second-to-last */
.footer .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  height: 100%;
}

/* Footer rows align to columns 2 → -2 (start col 2, end second-to-last col) */
.footer-top,
.footer-center,
.footer-bottom {
  grid-column: 1 / -1;
}

/* TOP */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.footer-heading {
  font-size: var(--type-h1);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h1-lh);
  text-transform: uppercase;
}

/* Social-Media-Block (links) */
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-04);
}

.footer-social__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-04);
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-glass-soft);
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social__link:hover {
  background: var(--color-glass);
}

.footer-social__icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Adress-Block (rechts) */
.footer-address {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-04);
  text-align: right;
}

.footer-address__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-style: normal;
}

.footer-address__line {
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: var(--type-mono-large);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-mono-large-lh);
  text-transform: uppercase;
}

/* Google Maps Link umschließt die gesamte Adresse (klickbar) */
.footer-address__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: contents;
}

.footer-address__link:hover .footer-address__line {
  color: var(--color-text);
}

/* CENTER */
.footer-center {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
}

/* Mehrzeilige Kontakt-Links (z. B. Government-Hinweis): eine Leerzeile
   Abstand zur Mail/Telefon-Gruppe. Jede Zeile ist ein eigener <span>
   (Flex-Spalte mit demselben 0.35rem-Gap wie footer-nav/footer-contact) —
   so sind Zeilenboxen und Rhythmus bit-identisch mit den Nav-Links,
   statt ueber aufgeblasene line-height angenaehert.
   Selektor mit a, sonst verliert die Klasse gegen margin/align aus
   `.footer-contact a` (hoehere Spezifitaet). */
.footer-contact a.footer-contact__multiline {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  /* Leerzeile = eine komplette Rasterzeile (Line-Box + Gap), damit
     MAIL/TELEFON auf denselben Zeilen wie die Footer-Nav-Links liegen
     (Spalten sind bottom-aligned). */
  margin-top: calc(var(--type-mono-large) * var(--type-mono-large-lh) + 0.35rem);
}

/* Icon innerhalb des Footer-Contact-Links (Arrowupright) */
.footer-contact__icon {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  vertical-align: middle;
}

.footer-external__link {
  display: flex;
  align-items: center;
}

.footer-contact__icon img {
  display: inline;
  width: 1em;
  height: 1em;
}

/* Nav- und Kontakt-Links teilen sich EINE Regel -> garantiert identische Skalierung */
.footer-nav a {
  display: block;
  margin: 0;
  color: var(--color-text-soft);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--type-mono-large);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-mono-large-lh);
  text-transform: uppercase;
  transition: font-weight 0.15s ease, color 0.2s ease;
}

.footer-contact a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  color: var(--color-text-soft);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--type-mono-large);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-mono-large-lh);
  text-transform: uppercase;
  transition: font-weight 0.15s ease, color 0.2s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--color-text);
  font-weight: 700;
}

/* ========================================
   INLINE TEXT LINKS — Underline mit Offset (keine Buttons/Nav!)
   ======================================== */
/* Footer-Nav und Footer-Contact Links (kein Button!) */
.footer-nav a,
.footer-contact a {
  text-decoration: none;
}

/* Breadcrumb-Links */
.hero__breadcrumb a,
.jobs-overview__breadcrumb a,
.job-detail__breadcrumb a {
  text-decoration: none;
}

/* 404 Error Link */
.error__link {
  text-decoration: none;
}

/* BOTTOM */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.logo img {
  width: 180px;
  height: auto;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Maessiges Pulsieren des Scroll-Indicators (translateX bleibt fuer Zentrierung erhalten) */
@keyframes heroScrollPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* Reduzierte Bewegung respektieren: kein Pulsieren */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow--visible {
    animation: none;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }


/* ========================================
   RESPONSIVE
   ======================================== */

/* ========================================
   NAV — Top bar as soon as logo + links + burger
   no longer fit side by side in the centered pill.
   The pill is calc((100vw - 160px) / 3) wide, so the
   three items run out of space well before 768px.
   ======================================== */
@media (max-width: 1199px) {
  /* Nav moves to top — full width with 20px inner margin */
  .nav {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
    margin: 20px;
    margin-right: 80px;
    margin-left: 80px;
    border-radius: 24px;
  }

  /* Hidden-State an die Mobile-Position anpassen:
     Ohne translateX(-50%) (Nav ist hier nicht horizontal zentriert),
     sonst springt/schrumpft die Nav beim Ausblenden seitlich weg. */
  .nav--hidden {
    transform: scale(0.95);
  }

  /* Visible-State muss auch transform: none bekommen,
     damit .nav.nav--visible (Spezifität 0,2,0) überschrieben wird
     und die Nav nicht um translateX(-50%) nach links verschoben wird. */
  .nav.nav--visible {
    transform: none;
  }

  /* Hide About/Career links, show burger instead */
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  /* Give first section top padding so content doesn't hide behind fixed nav */
  .hero,
  .page-section {
    padding-top: 60px;
  }

  /* Section nav bleibt unten-rechts wie auf Desktop */
  .section-nav {
    right: 20px;
    left: auto;
    bottom: 20px;
  }

  .section-nav-container {
    padding: 0.875rem 1rem;
  }

}

@media (max-width: 900px) {
  .nav{
    margin: 20px;
  }

  .teaser--mobile .teaser__card-content {
    bottom: 20px;
  }

  .jobs__grid-wrapper {
    grid-column: 1 / -1;
  }


  /* Zentrierte Sektionen ab Tablet/Mobile linksbündig */
  .icon-list__wrapper,
  .timeline__wrapper {
    text-align: left;
  }

  /* Tablet: Timeline-Stack untereinander */
  .timeline__steps {
    grid-template-columns: 1fr;
  }

  .icon-list__items {
    margin-left: 0;
  }

  .quote__action {
    width: fit-content;
  }
  /* Hinweis: Die grid-column-Resets (Spalte 2 → Spalte 1) für Mobile
     stehen gesammelt am Dateiende ("MOBILE — Spalten-Reset"), damit sie
     in der Kaskade NACH den Basis-Regeln greifen. Viele Basis-Regeln
     (z. B. .timeline__wrapper, .icon-list__wrapper) werden erst
     weiter unten definiert und würden hier platzierte Resets sonst
     per Quellreihenfolge überschreiben. */

  /* Hide About/Career links, show burger instead */
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  /* Section nav bleibt unten-rechts wie auf Desktop */
  .section-nav {
    right: 20px;
    left: auto;
    bottom: 20px;
    /* Nie breiter als der Viewport (abzgl. der 20px-Ränder links/rechts),
       damit lange Labels wie "APPLICATION PROCESS" nicht rausragen. */
    max-width: calc(100vw - 40px);
  }

  .section-nav-container {
    padding: 0.875rem 1rem;
  }

  /* Section-Nav auf Mobile kompakt: kleinere Schrift + moderates Padding.
     Die Tap-Flaeche bleibt bei ~30px pro Link (Kompromiss) — eine hoehere
     Nav ueberlappte auf Slider-Sections mit den vertikal zentrierten
     UI-Dots am rechten Rand. */
  .section-nav__link {
    font-size: clamp(0.7rem, 2.9vw, 0.95rem);
    line-height: 1.2;
    overflow-wrap: break-word;
    /* Keine Auto-Silbentrennung ("CAREER-IN-TRO") — die kompakte Schrift
       passt; break-word bleibt als Notfall fuer Extrem-Labels. */
    -webkit-hyphens: manual;
    hyphens: manual;
    display: block;
    padding: 0.3em 0;
  }

  .section-nav-container {
    padding: 0.625rem 0.875rem;
  }

  .section-nav__title {
    font-size: 0.5rem;
  }

  /* Slider-Dots: groessere Tap-Flaeche auf Touch-Geraeten */
  .slider__dot {
    width: 16px;
    height: 16px;
  }
  .slider__dots {
    gap: var(--spacing-04);
  }

  /* Umbruch-Sicherheitsnetz für kleine Devices: Lange Wörter (z. B.
     "Ingenieursverbund", "Counter-UAS") sollen an vielen Stellen brechen,
     statt aus dem Container zu ragen und rechts abgeschnitten zu werden.
     hyphens: auto nutzt zusätzlich die Silbentrennung (html lang="de-CH").
     Bewusst NICHT auf Buttons/Nav (eigene white-space-Regeln). */
  h1, h2, h3, h4, h5, h6, p, li,
  .hero__title,
  .hero__subtitle,
  .quote__text,
  /* Titel-/Text-Elemente, die KEINE semantischen Headings sind und daher
     oben nicht erfasst würden – enthalten aber lange Uppercase-Einzelwörter
     (z. B. "UMSETZUNGSSTÄRKE", "BEWERBUNGSPROZESS"), die sonst rechts aus dem
     Container ragen und abgeschnitten werden. */
  .icon-list__title,
  .icon-list__item-title,
  .timeline__title,
  .timeline__step-title,
  .open-jobs__title,
  .open-jobs__card-title {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  .hero__title { font-size: clamp(2.5rem, 12vw, 5rem); }
  .hero__content { padding-bottom: var(--spacing-16); }

  /* Mobile 12-column grid: 20px margins, 12px gap */
  /* WICHTIG: .hero MUSS hier mit rein. .hero ist ein eigenes 12-Spalten-
     Grid (nicht .container) mit column-gap: 40px. Bei 393px brauchen die
     11 Gaps allein 440px – mehr als die Viewport-Innenbreite. Das sprengt
     das Grid, der Hero-Content wird breiter als der Viewport und durch
     .hero { overflow: hidden } rechts abgeschnitten (Text bricht nicht um).
     Mit 12px Gap + 20px Padding passt das Grid wieder in den Viewport. */
  .container,
  .quote,
  .hero,
  .mobile-menu {
    /* Nur horizontal — ein padding-Shorthand wuerde das padding-top: 60px
       aus dem ≤1199px-Block (Abstand zur fixierten Top-Nav) nullen. */
    padding-left: 20px;
    padding-right: 20px;
    column-gap: 12px;
  }

  /* Quote-Content füllt auf Mobile/Tablet die volle Sektionshöhe und
     verteilt Autor / Text / Action mit space-between. Statt vertikaler
     Zentrierung dehnen wir den Content über die ganze Höhe (stretch)
     und geben oben/unten je 32px Margin. */
  .quote {
    align-items: stretch;
  }

  .intro__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-08);
  }

  .quote__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: var(--spacing-08);
    margin-bottom: var(--spacing-08);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Bottom-Margins der einzelnen Elemente entfallen, da space-between
     den vertikalen Abstand übernimmt. */
  .quote__author,
  .quote__text {
    margin-bottom: 0;
  }

  /* Mobile Teaser Split — Desktop-Section ausblenden, Mobile-Sections anzeigen */
  .teaser--desktop {
    display: none !important;
  }
  .teaser--mobile {
    display: block !important;
    height: 100dvh;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .teaser--mobile > .container {
    height: 100%;
    display: flex;
    padding-left: 0;
    padding-right: 0;
  }
  .teaser__grid--mobile {
    display: block;
    width: 100%;
    height: 100%;
  }
  .teaser--mobile .teaser__card {
    /* Die Karte ist ein <a> (display:inline). Im Desktop-Grid wird sie
       automatisch blockifiziert, im display:block-Grid--mobile NICHT —
       Firefox kollabiert dann den Inline-Containing-Block, wodurch das
       absolut positionierte Overlay (Gradient, Titel, CTA) unsichtbar
       wurde (Chrome war hier tolerant). */
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
  }
  /* Mobile: Hover-Effekt (Bild-Zoom) unterdrücken — Touch hat keinen Hover */
  .teaser--mobile .teaser__card:hover .teaser__card-image {
    transform: none !important;
  }
  /* Mobile: content padding matches container padding */
  .teaser--mobile .teaser__card-content {
    padding-left: 20px;
  }

  .footer {
    /* 2rem statt 3rem: mit gestapeltem Nav/Kontakt-Block muss der gesamte
       Inhalt in die fixe 100dvh-Snap-Box passen (iPhone SE, 667px). */
    padding: 1.5rem 0;
  }
  /* Der Footer-Container ist ein EIGENES 12-Spalten-Grid mit column-gap:40px
     und höherer Spezifität (.footer .container) als der generische
     .container-Gap-Reset – daher überlebt der 40px-Gap sonst auf Mobile:
     11 Gaps × 40px = 440px harte Mindestbreite, weshalb der Footer ab einem
     Punkt nicht mehr schmaler wurde. Hier explizit auf 12px zurücksetzen. */
  .footer .container {
    column-gap: 12px;
    padding: 0 20px;
    /* Abstand zwischen footer-top / footer-center / footer-bottom: Auf
       Mobile (bzw. wenn der Footer nicht 100dvh hoch ist) kollabiert die
       1fr-Grid-Row und die Bloecke kleben ohne Luft aufeinander — die
       Zeilenabstaende explizit sichern statt auf den 1fr-Verteilraum
       zu vertrauen. (spacing-06 statt -10, damit der gestapelte
       Kontaktblock in 100dvh Platz findet.) */
    row-gap: var(--spacing-06);
  }

  /* Footer rows span full width on tablet/mobile (two-column flex layout kept) */
  .footer-top,
  .footer-center,
  .footer-bottom {
    grid-column: 1 / -1;
  }
  /* Mobile: Nav und Kontakt bleiben wie auf Desktop nebeneinander und
     bottom-aligned — DATA liegt damit auf der Zeile von OPEN JOBS, AGB
     auf der von INTERN (beide Spalten teilen dieselbe Link-Typo-Regel).
     Passt seit der Kontaktblock nur noch zwei kurze Links enthaelt;
     frueher (MAIL/TELEFON + Gov-Mehrzeiler) musste hier gestapelt werden. */
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    margin-top: 0;
  }
  .footer-top {
    flex-wrap: wrap;
    /* Kompakt: grosser Abstand zwischen Social und Adresse frisst sonst
       die 100dvh-Hoehe des gestapelten Mobile-Footers. */
    gap: var(--spacing-04);
  }
  .footer-address {
    align-items: flex-start;
    text-align: left;
  }

  /* 3-8563: Footer auf Zwischengröße bricht schlecht um.
     Social und Address vertikal stapeln (max 2 Reihen Nav-Links,
     dann Adressen und Social Media untereinander). */
  .footer-top {
    flex-direction: column;
  }
  .footer-social {
    width: 100%;
  }
  .footer-address {
    width: 100%;
  }

  /* (Stapel-Layout und Gap fuer .footer-center / .footer-contact sind
     weiter oben in diesem Block definiert — hier keine zweite Regel,
     die den Gap wieder ueberschreibt.) */
  /* Links skalieren mit dem Viewport und dürfen notfalls (Mail) brechen. */
  .footer-nav a,
  .footer-contact a,
  .footer-address__line {
    font-size: clamp(1rem, 4.5vw, var(--type-mono-large));
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .logo img {
    width: 140px;
  }

  /* ------------------------------------------------------------
     BEWERBUNGSPROZESS (Timeline) — Flow-Section auf Mobile/Tablet
     ------------------------------------------------------------
     Sobald der Viewport zu schmal ist (≤900px), verliert die
     Section ihre 100dvh-Beschränkung und wird zu einer
     fließenden (auto-height) Sektion – analog zu Work Ethics.
     So kann der Content (5 Timeline-Schritte) einfach nach
     unten wachsen, ohne abgeschnitten zu werden.
     ------------------------------------------------------------ */
  .timeline.page-section {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    scroll-snap-align: none;
  }

  .timeline__wrapper {
    grid-column: 1 / -1;
  }

  .timeline__steps {
    flex-direction: column;
    gap: var(--spacing-06);
    width: fit-content;
    justify-content: space-between;
  }

  .timeline__steps::before {
    display: none;
  }

  /* Mobile: Icon-Kreis direkt in die Box integrieren
     (Icon links, Inhalt rechts, alles in einer gemeinsamen Kachel). */
  .timeline__step {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-04);
    background: var(--color-surface);
    padding: var(--spacing-05) var(--spacing-06);
    border-radius: var(--radius-2xl);
    width: fit-content;
  }

  .timeline__badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .timeline__icon {
    width: 26px;
    height: 26px;
  }

  .timeline__card {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    flex: 1;
  }

  /* Der zur Karte zeigende Pfeil entfaellt, da Icon jetzt in der Box sitzt. */
  .timeline__card::before {
    display: none;
  }

  .timeline__step-title {
    font-size: var(--type-quote-small);
  }

  .timeline__step-text {
    font-size: 0.9rem;
  }

  .timeline__note {
    margin-top: var(--spacing-06);
  }
}

/* Quote-Text auf schmalen Viewports verkleinern.
   Eigener Breakpoint bei 450px (frueher Teil des 393px-Blocks): --type-h2 ist
   clamp(3rem, 6.5vw, 4rem) und klemmt unterhalb von ~740px auf dem Minimum von
   48px fest, skaliert also gar nicht mehr mit. Auf einem 414px-Geraet
   (iPhone XR/11) brach der Fliesstext dadurch mit Silbentrennung auf fast jeder
   Zeile um. Der 393px-Block bleibt fuer die wirklich schmalen Geraete
   (Container-Padding, Footer-Heading, Section-Nav) unveraendert; ≤393px ist
   eine Teilmenge von ≤450px und erbt die Groesse hier. */
@media (max-width: 450px) {
  .quote__text { font-size: var(--type-h3); }
}

@media (max-width: 393px) {
  .container,
  .mobile-menu { padding: 0 var(--spacing-04); }
  .job-detail__content {
    max-width: none;
    min-width: 100%;
  }

  /* Mobile-Menu-Schrift: kein eigener Clamp mehr — die ≤1199px-Regel
     (clamp(1.75rem, 7vw, --type-h2)) schrumpft bereits fluessig mit dem
     Viewport; ein groesserer Clamp hier wuerde die Schrift beim
     Unterschreiten von 393px wieder VERGROESSERN. */

  /* Footer-Heading skalieren, damit es nicht überläuft. */
  .footer-heading {
    font-size: clamp(2rem, 9vw, var(--type-h1));
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Section-Nav noch kompakter auf sehr schmalen Devices. */
  .section-nav__link {
    font-size: clamp(0.72rem, 3.4vw, 1rem);
  }
  .section-nav-container {
    padding: 0.75rem 0.875rem;
  }

  /* Sicherheitsnetz: Buttons dürfen umbrechen statt zu clippen.
     width: fit-content verhindert, dass inline-flex Buttons in flex-column
     Containern auf 100% stretchen (align-items: stretch Default).
     align-self: flex-start sorgt für linksbündige Ausrichtung. */
  .btn,
  .quote__action,
  .teaser__card-cta,
  .slider__cta,
  .open-jobs__cta {
    white-space: normal;
    text-align: center;
    width: fit-content;
    align-self: flex-start;
  }
  /* Kein extra margin-top auf .footer-bottom: der 100dvh-Footer ist auf
     schmalen Devices mit gestapeltem Nav/Kontakt-Block bereits voll. */
}

/* ========================================
   SUBPAGES — Shared Styles
   ======================================== */

/* Page hero subtitle */
.hero__subtitle {
  font-size: var(--type-body);
  font-weight: var(--font-weight-body);
  line-height: var(--type-body-lh);
  color: var(--color-text-muted);
  max-width: 600px;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards 0.6s;
}

/* ========================================
   GENERIC — Timeline (History + Bewerbungsprozess + ...)
   Vertikale Karten-Liste mit Icon-Badge links.
   JSON-Schema: { title, eyebrow?, headnote?, footnote?, items:[{number,icon,title,text,meta,ctaLabel?,ctaHref?}] }
   ======================================== */

/* Section-Container */
.timeline {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: stretch;
}

/* Override: Container innerhalb von timeline soll natürliche
   Höhe nach Content haben (statt `height: 100%` von `.page-section .container`). */
.timeline .container {
  height: auto;
}

.timeline__wrapper {
  grid-column: 1 / -1;
  min-height: 100%;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Kopf- / Fussnote (optional) */
.timeline__note {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  margin-top: 32px;
}

/* Wrapper um Titel + Steps */
.timeline__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline__title {
  font-size: var(--type-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Desktop: 2×2 Grid — Steps nebeneinander */
.timeline__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: var(--spacing-06);
}

.timeline__steps::before {
  display: none;
}

/* Karte: Icon-Badge links, Inhalt rechts */
.timeline__step {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-05);
  background: var(--color-surface);
  padding: var(--spacing-05) var(--spacing-06);
  border-radius: var(--radius-2xl);
  margin-bottom: 0;
}

.timeline__step:last-child {
  margin-bottom: 0;
}

/* Icon-Badge (runder Kreis) */
.timeline__badge {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: var(--color-glass);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  position: relative;
  z-index: 2;
}

/* Icon im Badge */
.timeline__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.timeline__icon--white {
  filter: brightness(0) invert(1);
}

/* Inhalt der Karte */
.timeline__card {
  margin-top: 0;
  margin-left: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
}

.timeline__card::before {
  display: none;
}

.timeline__step-title {
  font-size: var(--type-quote-small);
  text-transform: uppercase;
  font-weight: var(--font-weight-heading);
  line-height: 1.3;
  color: var(--color-text);
}

/* Fortlaufende Nummer (01, 02, ...) vor dem Titel.
   nowrap verhindert, dass die Nummer vom Titel getrennt umbricht. */
.timeline__step-num {
  margin-right: 0.6em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline__step-num:empty {
  display: none;
}

.timeline__step-meta {
  font-size: var(--type-quote-small);
  font-weight: var(--font-weight-heading);
  line-height: 1.3;
  color: var(--color-text);
}

.timeline__step-text {
  font-size: var(--type-body);
  font-weight: var(--font-weight-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ========================================
   GENERIC — Icon List (Values + Benefits + ...)
   Icon + Text-Liste, anpassbar per Modifier.
   JSON-Schema: { title, eyebrow?, footnote?, items:[{icon,title,text?}] }
   Modifier: .icon-list--cards (Badge oben + Karte),
             .icon-list--grid (Grid-Layout mit col-span)
   ======================================== */

/* Section-Container */
.icon-list {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: stretch;
}

.icon-list__wrapper {
  grid-column: 1 / -1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Eyebrow */
.icon-list__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-08);
  margin-top: var(--spacing-08);
  align-self: flex-start;
}

/* Kopf- / Fussnote (optional) */
.icon-list__note {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: flex-start;
  margin-bottom: 32px;
  margin-top: 32px;
}

/* Benefits-Seite: Kopf- und Fusszeile verstecken, aber Platz lassen */
body[data-page="benefits"] .icon-list__note {
  visibility: hidden;
}

/* Titel */
.icon-list__title {
  font-size: var(--type-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
}

/* Titel-Zentrum (Titel + Grid als Block) */
.icon-list__center {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
}

/* Content-Wrapper (center + items) */
.icon-list__content {
  display: flex;
  gap: 24px;
  flex-direction: column;
}

/* Grid-Container für Items */
.icon-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  text-align: left;
  margin: 0;
}

.icon-list__item {
  background-color: var(--color-surface);
  padding: var(--spacing-08) var(--spacing-10);
  border-radius: var(--radius-2xl);
}

/* ── Modifier: cards (Benefits-Stil) ── */
.icon-list--cards {
  min-height: auto;
}

.icon-list--cards .icon-list__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Alle Kacheln gleich gross: Zeilen teilen sich die Hoehe der hoechsten
     Kachel (1fr) und die Items strecken sich auf die Zeilenhoehe. Auf
     Mobile (1 Spalte, ≤560px) wird das wieder aufgehoben. */
  grid-auto-rows: 1fr;
  gap: var(--spacing-08) var(--spacing-08);
  align-items: stretch;
  min-width: 0;
}

.icon-list--cards .icon-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.icon-list--cards .icon-list__badge {
  width: 90px;
  height: 90px;
  min-width: 90px;
  max-width: 100%;
  border-radius: 50%;
  background: var(--color-glass);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.icon-list--cards .icon-list__icon {
  --benefit-icon: none;
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--benefit-icon) center / contain no-repeat;
  mask: var(--benefit-icon) center / contain no-repeat;
}

.icon-list--cards .icon-list__card {
  margin-top: 10px;
  width: 100%;
  position: relative;
  text-align: center;
}

/* Pro-Benefit-Titel (Pflichtfeld "title" in benefits.items[]) — kraeftige
   Zeile ueber dem beschreibenden Text. */
.icon-list--cards .icon-list__item-title {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--spacing-02) 0;
}

.icon-list--cards .icon-list__text {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

/* ========================================
   ABOUT PAGE — Impressions
   ======================================== */
.impressions {
  padding: var(--spacing-16) 0;
  background: var(--color-bg);
}

/* ========================================
    FULLSCREEN DRAG SLIDER
    ======================================== */
.slider-section {
  position: relative;
  padding: 0;
  overflow: hidden;
  height: 100dvh;
}

/* Top gradient – fix am Container, scrollt nicht mit den Slides mit */
.slider-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 260px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--color-fade-rgb),1) 0%, rgba(var(--color-fade-rgb),0.85) 40%, transparent 100%);
}

/* Bottom gradient – fix am Container, scrollt nicht mit den Slides mit */
.slider-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(var(--color-fade-rgb),1) 0%, rgba(var(--color-fade-rgb),0.85) 40%, transparent 100%);
}

/* Zwischengrössen (1025-1200px): Slider-Dots unter den Content verschieben,
   damit diese nicht über Button/Text überlappen. Ticket 3-8564. */
@media (max-width: 1200px) {
  .slider__content-bottom {
    padding-bottom: calc(var(--spacing-12) + 60px);
  }
}

/* Mobile & Tablet: Kräftigere vertikale Gradients oben (hinter dem Titel) und
    unten (hinter Subtitle/CTA/Dots) – deutlich weniger dezent, damit der Text
    klar lesbar bleibt. */
@media (max-width: 1024px) {
  .slider-section::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 42%;
    background: linear-gradient(
      to bottom,
      rgba(var(--color-fade-rgb),0.95) 0%,
      rgba(var(--color-fade-rgb),0.55) 45%,
      transparent 100%
    );
  }

  .slider-section::after {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 58%;
    background: linear-gradient(
      to top,
      rgba(var(--color-fade-rgb),1) 0%,
      rgba(var(--color-fade-rgb),0.85) 35%,
      rgba(var(--color-fade-rgb),0.4) 70%,
      transparent 100%
    );
  }
}

.slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Während der rAF-Slide-Animation (window.SkysecSlider): mandatory-Snap und
   natives smooth-Verhalten deaktivieren, sonst korrigiert der Browser am
   Animationsende die Position nach (sichtbares Nachzucken). */
.slider--animating {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slider__track {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: max-content;
}

.slider__slide {
  position: relative;
  flex: 0 0 100dvh;
  width: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  height: 100dvh;
  scroll-snap-align: start;
  overflow: hidden;
  /* Isoliert jeden Slide vom Compositing anderer Slides —
      unsichtbare Slides brauchen kein Layout/Paint. */
  contain: layout style paint;
}

/* Gradient-Overlay am unteren Bildrand für bessere Text-Lesbarkeit */
.slider__slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}

.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Mobile Portrait: Slides mit "imageFocus" im JSON (.slider__slide--focus)
   zentrieren den cover-Zuschnitt auf den redaktionell gesetzten Fokuspunkt
   (--image-focus, Format "x% y%", 0% 0% = oben links, gesetzt von
   content-loader.js / slider-lazy-loader.js). Slides ohne Fokuspunkt
   schneiden wie ueberall mittig zu. */
@media (max-width: 900px) and (orientation: portrait) {
  .slider__slide--focus img {
    object-position: var(--image-focus, center);
  }
}

.slider__credit {
  position: absolute;
  bottom: var(--spacing-06);
  right: var(--spacing-06);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--type-mono-footer);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-footer-lh);
  color: var(--color-text-muted);
  background: rgba(var(--color-fade-rgb),0.7);
  padding: var(--spacing-02) var(--spacing-04);
  border-radius: var(--radius-full);
}

/* Credits ausblenden wenn leer (keine Daten im JSON) */
.slider__credit:empty {
  display: none;
}

/* Slider content overlay — 12-col grid so content starts at column 2 */
.slider__content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  pointer-events: none;
}

.slider__content > * {
  pointer-events: auto;
}

.slider__content-top {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-top: calc(60px + var(--spacing-12));
}

.slider__content-bottom {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: var(--spacing-12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-06);
}

.slider__title {
  font-size: var(--type-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  color: var(--color-text);
  text-shadow:
  0 0 30px rgba(0, 0, 0, 0.75),
  0 0 60px rgba(0, 0, 0, 0.45);
}

/* Pro-Slide-Titel (Pflichtfeld "title" in slides[]) — prominenteste Zeile
   im unteren Slider-Content, wechselt mit dem aktiven Slide. */
.slider__slide-title {
  font-size: var(--type-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h3-lh);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Optionale Begleitzeile unter dem Slide-Titel (Feld "subtitle").
   Wird bei leerem Wert per hidden-Attribut ausgeblendet. */
.slider__subtitle--secondary {
  font-family: var(--font-mono);
  font-size: var(--type-mono-large);
  text-transform: none;
  color: var(--color-text-soft);
}

.slider__subtitle {
  font-size: var(--type-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h3-lh);
  text-transform: uppercase;
  color: var(--color-text);
  max-width: 400px;
  text-shadow:
  0 0 30px rgba(0, 0, 0, 0.75),
  0 0 60px rgba(0, 0, 0, 0.45);
}

/* Slider Quote — zitiert, leichtgesetzt, über dem Fließtext.
   Innerhalb von .slider__content-bottom (flex-Spalte mit Gap) regelt der
   Gap die Abstaende — das margin-bottom wuerde sich sonst mit dem Gap
   stapeln (24px + 16px) und ungleiche Abstaende erzeugen. */
.slider__content-bottom > .slider__quote {
  margin-bottom: 0;
}

.slider__quote {
  font-family: var(--font-primary);
  font-size: var(--type-body);
  font-weight: 100;
  line-height: var(--type-body-lh);
  color: var(--color-text);
  max-width: 480px;
  margin-bottom: var(--spacing-04);
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(0, 0, 0, 0.45);
}

/* Slider Text — Fließtext unter dem Zitat */
.slider__text {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--color-text-soft);
  max-width: 520px;
  margin-bottom: var(--spacing-08);
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(0, 0, 0, 0.45);
}

/* Kleine Phones (bis iPhone SE, 375px): Slider-Typografie verdichten —
   Titel + Slide-Titel + Quote + Text + Dots muessen zusammen in die
   100dvh-Section passen (auf 667px-Viewports ragte der Text sonst ~70px
   unten aus der Section). WICHTIG: Dieser Block muss NACH den Basisregeln
   von .slider__slide-title/.slider__quote/.slider__text stehen, sonst
   verliert er die Kaskade (gleiche Spezifitaet).  */
@media (max-width: 600px) {
  .slider__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  .slider__slide-title {
    font-size: 1.375rem;
  }
  .slider__quote {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-02);
  }
  .slider__text {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-04);
    /* Sicherheitsnetz fuer lange (Fallback-)Texte: clampen statt aus der
       Section zu ragen. Pro-Slide-Texte auf Mobile kurz halten. */
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Rechts Platz fuer die vertikalen UI-Dots lassen */
  .slider__content-bottom {
    padding-bottom: calc(var(--spacing-08) + 52px);
    padding-right: 48px;
  }
}

/* Slider CTA inherits shared button glass styling */

/* ----------------------------------------
   Einklappbarer Slider-Text (Work-Ethics)
   0fr→1fr-Grid-Trick fuer weiches Auf-/Zuklappen ohne feste max-height.
   Default im Markup: ausgeklappt + Button hidden (No-JS-Fallback);
   main.js (initSliderTextToggle) klappt beim Init ein und zeigt den Button.
   ---------------------------------------- */
.slider__text-wrap {
  display: grid;
  /* BEWUSST KEINE transition auf grid-template-rows: Hoehe animieren ist
     eine Layout-Animation — der Browser muss pro Frame Layout rechnen und
     die verschobenen Textbloecke (Quote/Titel mit doppeltem text-shadow,
     30px/60px Blur) ueber dem Vollbild-Slide neu rastern. Das sprengt auf
     schwaecheren Geraeten das Frame-Budget und ruckelt. Stattdessen:
     Hoehe springt in einem Frame, der Text blendet per opacity/transform
     ein (GPU-komponiert, kein Layout pro Frame). */
  grid-template-rows: 1fr;
}

.slider__text-wrap > .slider__text {
  min-height: 0;
  overflow: hidden;
  /* Margin wuerde in die Track-Groesse einfliessen — eingeklappt (0fr)
     bliebe sonst eine sichtbare Luecke. */
  margin-bottom: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider__text-wrap--collapsed {
  grid-template-rows: 0fr;
  /* Der eingeklappte Wrap ist 0px hoch, bekommt als Flex-Kind von
     .slider__content-bottom aber trotzdem ZWEIMAL den Spalten-Gap (davor
     und danach). Ein Gap wird hier neutralisiert, damit Quote → Button
     im eingeklappten Zustand denselben Abstand haben wie alle anderen
     Nachbarn in der Spalte. */
  margin-top: calc(-1 * var(--spacing-06));
}

/* Eingeklappt: sofort unsichtbar (auch fuer AT/Fokus). transition: none,
   damit das Zuklappen ohne Geister-Fade schliesst; beim Aufklappen greift
   die Basis-Transition und der Text faedet von unten ein. */
.slider__text-wrap--collapsed > .slider__text {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: none;
}

/* KEIN margin-bottom auf dem Toggle-Button: .slider__content-bottom endet
   mit padding-bottom var(--spacing-12) — dadurch fluchtet der Button exakt
   mit den CTAs der anderen Slider (Benefits/Impressions) und der unteren
   Menue-Leiste (.nav, bottom: 32px). Ein Extra-Margin schob ihn 16px hoch. */

.slider__toggle-label--hide {
  display: none;
}

.slider__text-toggle[aria-expanded="true"] .slider__toggle-label--show {
  display: none;
}

.slider__text-toggle[aria-expanded="true"] .slider__toggle-label--hide {
  display: inline;
}

.slider__toggle-icon {
  transition: transform 0.3s ease;
}

.slider__text-toggle[aria-expanded="true"] .slider__toggle-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .slider__text-wrap,
  .slider__text-wrap > .slider__text,
  .slider__toggle-icon {
    transition: none;
  }
}

/* ========================================
   PAGE INDICATOR — Centered glass pill (bottom)
   Shares the glass styling of nav / buttons
   ======================================== */
.slider__dots {
  position: absolute;
  right: 80px; /* Auf der gleichen Linie wie .section-nav */
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-03);

  padding: var(--spacing-05) var(--spacing-03);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-glass-border);


  z-index: 10;
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slider-Dots verstecken sich wie die Nav bei Inaktivität */
.slider__dots--hidden {
  transform: translateY(-50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Tablet/Mobile: buendig mit der Section-Nav, die ab 1199px auf
   right: 20px rueckt — die Dots muessen auf derselben Linie liegen. */
@media (max-width: 1199px) {
  .slider__dots {
    right: 20px;
  }
}

/* Niedrige Viewports (kleine Phones, Landscape): Dots leicht nach oben
   verschieben, damit sie nicht mit der Section-Nav unten rechts
   kollidieren — deren Hoehe (7 Links) reicht dort bis ueber die Mitte. */
@media (max-width: 900px) and (max-height: 750px) {
  .slider__dots {
    top: 40%;
  }
}

.slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-text);
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.slider__dot:hover {
  opacity: 1;
}

.slider__dot--active {
  background: var(--color-text);
  opacity: 1;
  transform: scale(1.2);
}

/* ========================================
    CAREER PAGE — Open Jobs
    ======================================== */
.open-jobs {
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  /* Vollhöhe Snap-Section (wie Hero/Quote): Titel + Footer bleiben immer
     sichtbar, nur das Tiles-Grid in der Mitte wird auf den verfügbaren
     Platz beschränkt. Überzählige Karten werden per JS gar nicht erst
     ins DOM gerendert (siehe initOpenJobsTeaser). */
  height: 100dvh;
}

/* Container in feste Zeilen aufteilen, damit Titel (oben) und Footer (unten)
   IMMER sichtbar bleiben und nur das Tiles-Grid in der Mitte überläuft und
   vom Gradient verdeckt wird – unabhängig von der Anzahl der Jobs. */
.open-jobs .container {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Title + CTA area starts at column 2, ends at second-to-last column */
.open-jobs__content {
  grid-row: 1;
  grid-column: 1 / -1;
  padding-top: var(--spacing-08);
  padding-bottom: var(--spacing-06);
  width: fit-content;
}

.open-jobs__title {
  font-size: var(--type-h1);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h1-lh);
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Grid wrapper for gradient overlay — nur auf der Career-Seite vorhanden.
   Schneidet überzählige Karten ab und trägt den Fade-Overlay. */
.jobs__grid-wrapper {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  /* Überlaufende Tiles abschneiden, damit nur der für das Grid verfügbare
     Platz (Zeile 2) genutzt wird und der Footer nicht verdrängt wird. */
  overflow: hidden;
  min-height: 0;
}

/* ========================================
   Gemeinsame Jobs-Grid-Basis (Masonry-Layout via CSS Columns)
   Wird auf career.html (als Teaser) und jobs.html (als volle Liste) genutzt.
   CSS Columns erzeugt ein dichtes Raster ohne Whitespace-Lücken:
   kleinere Kacheln lassen keinen leeren Raum, nachfolgende rücken nach oben.
   ======================================== */
.jobs__grid {
  columns: 2;
  column-gap: var(--spacing-06);
  width: 100%;
}

/* Verhindert, dass Kacheln zwischen den Spalten geteilt werden. */
.jobs__grid > * {
  break-inside: avoid;
  margin-bottom: var(--spacing-06);
}

/* Letzte Zeile: margin-bottom wird zum internen Abstand, nicht zum unteren Rand. */
.jobs__grid > *:last-child {
  margin-bottom: 0;
}

/* Modifier: Teaser-Grid auf der Career-Seite.
   Das eigentliche Overflow-Abschneiden geschieht im .jobs__grid-wrapper.
   Dieser Modifier ist Platzhalter für eventuelle Teaser-spezifische Overrides. */
.jobs__grid--teaser {
  /* Teaser-spezifische Overrides können hier hinzugefügt werden. */
}

.open-jobs__card {
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-4xl);
  padding: var(--spacing-08) var(--spacing-08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  /* Kachel ist ein <a>: Link-Standards neutralisieren */
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.open-jobs__card:hover {
  background: var(--color-glass);
}

.open-jobs__card:focus {
  border: 1px solid var(--color-text-muted);
}
/* Kein ↗-Pseudo-Element auf der Job-Kachel (markExternalLinks setzt sonst
   .link--external). Die ganze Kachel ist bereits der Link. */
.open-jobs__card.link--external::after {
  content: none;
}

.open-jobs__card-title {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: var(--font-weight-heading);
  line-height: 0.9;
  text-transform: uppercase;
  /* Wörterbuchbasierte Silbentrennung statt harter Wortbrüche,
      damit keine hässlichen Einzelbuchstaben-Zeilen entstehen. */
  -webkit-hyphens: auto;
  hyphens: auto;
  /* 'anywhere' erlaubt frühe Umbrüche bereits bei langen Zeilen,
      damit der Text in schmalen Kacheln lesbar bleibt (#3-8665). */
  overflow-wrap: anywhere;
}

.job-detail__video {
  width: 100%;
  margin-top: var(--spacing-08);
}

.job-detail__video-player {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  background: var(--color-bg);
}

.open-jobs__card-meta {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-body-lh);
  color: var(--color-text);
  opacity: 0.9;
  /* Fester Abstand zum Titel. Der Titel nutzt line-height: 0.9, wodurch die
     untere Zeilenbox negativ eingezogen ist. Ohne festen margin variiert der
     optische Abstand zwischen ein- und mehrzeiligen Titeln – dieser margin
     hält die Meta-Zeile in allen Zuständen auf gleicher Distanz zum Titel. */
  margin-top: var(--spacing-04);
}

/* Gradient fade overlay at bottom of grid — nur auf der Career-Seite vorhanden. */
.jobs__grid-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-fade-rgb),0) 0%,
    rgba(var(--color-fade-rgb),0.55) 30%,
    rgba(var(--color-fade-rgb),0.9) 70%,
    rgba(var(--color-fade-rgb),1) 100%
  );
}

/* Footer — initiativ text + CTA */
.open-jobs__footer {
  grid-row: 3;
  grid-column: 1 / -1;
  position: relative;
  z-index: 5;
  padding-top: var(--spacing-08);
  padding-bottom: var(--spacing-08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-06);
}

.open-jobs__initiativ {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  color: var(--color-text);
  max-width: 600px;
}

/* Inherits shared button glass styling */

/* ========================================
   CAREER PAGE — Benefits
   ======================================== */
.benefits {
  position: relative;
  /* Muss gleiche Hoehe wie .page-section haben (100dvh), damit der
     absolute Slider (position: absolute; inset: 0) den vollen Viewport
     fuenft. min-height war zu niedrig und liess den Slider kollabieren. */
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ========================================
   CAREER PAGE — Work Ethics
   ======================================== */
/* Work Ethics verwendet jetzt das slider-section Pattern (siehe .slider-section).
   Die alte Gallery-Struktur (.work-ethics__wrapper, __gallery, __image, __intro,
   __quote, __text) wurde entfernt. */

/* Work-Ethics: Linker horizontaler Gradient (0→35%) für bessere Text-Lesbarkeit.
   Am fixen .slider__content statt an den Slides — nur ein einziger
  Composited Element anstatt pro Slide (:before auf jedem Slide laggt beim Scrollen). */
.work-ethics .slider__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(var(--color-fade-rgb), 0.95) 0%, rgba(var(--color-fade-rgb), 0.6) 50%, transparent 100%);
}


/* ========================================
   SUBPAGES — Responsive
   ======================================== */
@media (max-width: 900px) {

  .section-nav {
    max-width: 150px;
  }

  .jobs__grid-wrapper {
    grid-column: 1 / -1;
  }

  .jobs__grid {
    /* Mobile: eine Spalte */
    columns: 1;
  }

  .open-jobs__content {
    padding-top: var(--spacing-16);
  }

  .jobs__grid-fade {
    height: 180px;
  }

  .open-jobs__footer {
    grid-column: 1 / -1;
  }

  /* Timeline: kompaktere Icons/Numbers auf kleineren Screens (Karten-Layout). */
  .timeline__icon {
    width: 34px;
    height: 34px;
  }

  .timeline__badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .hero__subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 393px) {
  /* Timeline: noch kompaktere Icons/Numbers auf sehr kleinen Screens. */
  .section-nav {
    max-width: 120px;
  }
  
  .timeline__icon {
    width: 28px;
    height: 28px;
  }

  .timeline__badge {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .timeline__step-meta {
    font-size: var(--type-quote-small);
  }

  .timeline__step-title {
    font-size: 0.9rem;
  }
}

/* ============================================================
   BEWERBUNGSPROZESS — Karten-Layout auch bei geringer Bauhöhe
   ------------------------------------------------------------
   Die Schritte bleiben als gestapelte Karten (identisch zum
   Basis-/Mobile-Layout). Bei knapper Viewport-Höhe darf die
   Section schrumpfen und scrollt bei Bedarf (page-section--flow),
   statt in ein abweichendes 3+2-Raster mit Chevron-Pfeilen zu
   wechseln. So sehen die Steps auf ALLEN Geräten gleich aus.
   ============================================================ */
@media (min-width: 768px) and (max-height: 1000px) {
  .timeline {
    min-height: auto;
    padding-block: clamp(var(--spacing-06), 4vh, var(--spacing-12));
  }


  /* Titel-Abstand höhenabhängig verkleinern */
}

/* ============================================================
   MOBILE — Spalten-Reset (Spalte 2 → Spalte 1)
   ------------------------------------------------------------
   Alle Inhalte, die auf Desktop ab Spalte 2 starten, beginnen
   auf Mobile/Tablet auf Spalte 1. Dieser Block steht bewusst am
   Dateiende, da viele Basis-Regeln (z. B. .timeline__wrapper,
   .icon-list__wrapper) erst weiter
   unten definiert sind und die Resets sonst per Quellreihenfolge
   überschreiben würden.
   ============================================================ */
@media (max-width: 900px) {
  .hero__content,
  .quote__content,
  .intro__title-wrapper,
  .icon-list__wrapper,
  .timeline__wrapper,
  .slider__content-top,
  .slider__content-bottom,
  .open-jobs__content,
  .open-jobs__footer,
  .jobs__grid-wrapper,
  .footer-top,
  .footer-center,
  .footer-bottom,
  .jobs-overview__wrapper,
  .job-detail__wrapper,
  .info-page__wrapper {
    grid-column: 1 / -1;
  }
  .quote__content {
    margin-bottom: 20px;
  }

  .slider__content-bottom {
    padding-bottom: unset;
    margin-bottom: 20px;
  }

  .open-jobs__footer {
    padding-bottom: unset;
    margin-bottom: 20px;
  }

  /* ------------------------------------------------------------
     ZENTRALER GAP-RESET für ALLE eigenständigen 12-Spalten-Grids
     ------------------------------------------------------------
     Mehrere Sektionen sind eigene 12-Spalten-Grids mit
     column-gap: 40px (nicht nur .container). 11 Gaps × 40px =
     440px erzwingen sonst eine harte Mindestbreite > Viewport,
     wodurch der Content "ab einem Punkt nicht mehr kleiner wird"
     bzw. rechts abgeschnitten wird. Dieser Reset steht bewusst
     am Dateiende, da .slider__content erst NACH dem oberen Reset (~Zeile 1550) definiert werden und
     ihn sonst per Quellreihenfolge überschreiben würden. */
  .container,
  .hero,
  .quote,
  .mobile-menu,
  .footer .container,
  .slider__content {
    column-gap: 12px;
  }

  /* Slider-Dots sind jetzt rechts am Rand vertikal zentriert — kein Mobile-Override
     mehr noetig, da die Position plattformuebergreifend funktioniert. */
}

/* ========================================
   INTRO-OVERLAY — First Visit Animation (Kombiniert V4-Ring + V2-Scale-Pop)
   Das SKYSEC-Icon-Logo dreht aus -90° ein, während die drei aufgebrochenen
   Ring-Segmente als Kontur gezeichnet werden und sich füllen; danach poppt
   das mittlere Zeichen ein. Reine CSS-Keyframe-Animation, getriggert via
   .intro-active am <html> (gesetzt durch Head-Guard). JS startet nur den
   Ablauf und blendet das Overlay nach Abschluss aus.
   ======================================== */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg, #191716);
}

.intro-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(200px, 32vw, 340px);
}

/* Basis-Layout + Logo-Intro-Animation "Kombiniert (V4-Ring + V2-Scale-Pop)":
   Das ganze SVG dreht aus -90° ein (intro-spin-in), während die drei
   aufgebrochenen Ring-Segmente als Kontur gezeichnet werden (intro-seg-draw)
   und sich anschließend füllen (intro-seg-fill). Zum Schluss poppt das
   mittlere Zeichen mit leichtem Overshoot ein (intro-mark-pop).
   Endzustand == exaktes Logo. Getriggert durch .intro-active am <html>. */
.intro-overlay__logo {
  width: clamp(120px, 20vw, 200px);
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  overflow: visible;
}

/* Ring-Segmente: erst Kontur zeichnen, dann füllen */
.intro-overlay__logo .intro-ring {
  fill: rgba(242, 243, 239, 1);
  fill-opacity: 0;
  stroke: rgba(242, 243, 239, 1);
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;        /* pathLength=1 */
  stroke-dashoffset: 1;
}

/* Mittleres Zeichen (Polygon): Scale-Pop mit Overshoot */
.intro-overlay__logo .intro-mark {
  fill: rgba(242, 243, 239, 1);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Animationen laufen, solange das Intro aktiv ist; 'forwards' hält den
   gefüllten Endzustand bis das Overlay ausgeblendet/entfernt wird. */
html.intro-active .intro-overlay__logo {
  animation: intro-spin-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.intro-active .intro-overlay__logo .intro-ring {
  animation: intro-seg-draw 0.8s ease-in-out forwards,
             intro-seg-fill 0.4s ease-out 0.65s forwards;
}
html.intro-active .intro-overlay__logo .intro-mark {
  animation: intro-mark-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* Wiederkehr / Seitenwechsel (intro-repeat): deutlich schnellere Variante.
   Gesamtdauer inkl. Overlay-Fade bleibt unter 1.5s. Der Ring zeichnet sich
   zuegig, das mittlere Zeichen fadet kurz danach ein. */
html.intro-repeat .intro-overlay__logo {
  animation: intro-spin-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.intro-repeat .intro-overlay__logo .intro-ring {
  animation: intro-seg-draw 0.5s ease-in-out forwards,
             intro-seg-fill 0.3s ease-out 0.4s forwards;
}
html.intro-repeat .intro-overlay__logo .intro-mark {
  animation: intro-mark-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes intro-spin-in {
  0%   { transform: rotate(-90deg) scale(0.9); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes intro-seg-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-seg-fill { to { fill-opacity: 1; } }
@keyframes intro-mark-pop {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Scroll-Lock waehrend das Intro laeuft */
html.intro-active,
html.intro-active body {
  overflow: hidden;
}

/* Inhalte waehrend des Intros im Hintergrund laden, aber unsichtbar halten.
   Der Content-Loader befuellt das DOM bereits parallel zur Animation;
   erst wenn finishIntro() 'intro-active' entfernt, werden die Sektionen
   sichtbar (mit kurzem Fade-in). Das verhindert ein "Aufblitzen" roher
   Inhalte waehrend das Logo gezeichnet wird. */
html.intro-active main,
html.intro-active section:not(.intro-overlay),
html.intro-active footer {
  visibility: hidden;
}
/* Nav + Section-Nav bleiben sichtbar? Nein — sie tauchen erst nach Intro auf. */
html.intro-active .nav,
html.intro-active .section-nav,
html.intro-active .mobile-menu {
  visibility: hidden;
}
/* Sanftes Einblenden der Inhalte, sobald 'intro-active' entfernt wird.
   Die Klasse 'intro-done' wird von finishIntro() gesetzt und triggert den
   Fade-in NUR auf index.html nach dem Intro. Andere Seiten (about/career)
   hatten nie 'intro-active' und zeigen Inhalte sofort ohne Fade. */
/* WICHTIG: .nav/.section-nav/.mobile-menu hier NICHT auflisten!
   'transition: visibility 0s' ist ein Shorthand und wuerde — da diese Regel
   spaeter in der Datei steht — die eigenen transform/opacity-Transitions der
   Navs (Zeile ~314 / ~531) komplett ueberschreiben (Dauer 0s = kein Fade).
   Die Navs animieren visibility ohnehin nicht, brauchen diese Regel also nicht. */
section, footer {
  transition: visibility 0s;
}
/* 'backwards' statt 'both': eine dauerhaft gefuellte Opacity-Animation haelt
   auf JEDER Section und dem Footer einen permanenten Stacking-Context offen.
   Der Footer (letztes Element im DOM) malt sich dann ueber die Stacking-
   Contexts der Sections — inkl. deren fixed-Kinder trotz hohem z-index
   (so rutschte der Jobs-Filter-Button unter den Footer). Mit 'backwards'
   endet die Animation folgenlos: Endwert = natuerliche opacity 1. */
html.intro-done section,
html.intro-done footer {
  animation: intro-content-in 0.4s ease-out backwards;
}
/* ── Nav-Entrance nach dem Intro ──
   'intro-done' wird erst gesetzt, wenn das Overlay komplett ausgeblendet
   ist (animationend in main.js) — die Navs erscheinen also strikt NACH der
   Ladeanimation. Choreografie: Pille springt mit Overshoot herein
   (Desktop von unten, Top-Bar-Variante von oben), dann zeichnet sich der
   Logo-Ring neu (gleiche Keyframes wie der Logo-Hover), Links/Burger
   staggern nach, Section-Nav gleitet von rechts ein.
   Alle fill-modes 'backwards' (nie 'both'/'forwards'): waehrend des Delays
   gilt der 0%-Zustand (unsichtbar), nach dem Ende raeumt die Animation ab —
   Auto-Hide-Transition und Stacking bleiben unangetastet. */
html.intro-done .nav {
  animation: nav-enter-bottom 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}
@media (max-width: 1199px) {
  html.intro-done .nav {
    animation-name: nav-enter-top;
  }
}
/* Entrance erst, wenn die Section-Nav freigegeben ist (Klasse kommt von
   main.js, sobald die Labels aus dem JSON stehen). Frueher haing die
   Animation allein an 'intro-done' und lief damit zu einem Zeitpunkt, zu dem
   content-loader.js die Links noch austauschte — die Nav flog mit den
   statischen Fallback-Labels ein und wechselte mitten im Flug Text und
   Breite. Siehe initNavAutoHide()/releaseSectionNav() in main.js. */
html.intro-done .section-nav--ready {
  animation: section-nav-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}
/* Innenleben der Pille: Logo zuerst, dann Links (gestaffelt), Burger parallel.
   Das Logo erscheint als FERTIGES Logo (gefuellt) mit demselben nav-item-in
   wie die uebrigen Pillen-Elemente — die Pfad-Zeichnung (nav-logo-draw/-fill/
   -pop) laeuft bewusst NICHT beim Entrance, sonst zeigt die Nav direkt nach
   dem Intro nochmals einen "Pfade werden gezeichnet"-Zustand; die Zeichnung
   bleibt dem Logo-Hover vorbehalten. */
html.intro-done .nav__logo {
  animation: nav-item-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
}
/* Links liegen als <li> in der ul.nav__links (JSON-gerendert wie Fallback) */
html.intro-done .nav__links > li:nth-child(1) { animation: nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards; }
html.intro-done .nav__links > li:nth-child(2) { animation: nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.68s backwards; }
html.intro-done .nav__links > li:nth-child(3) { animation: nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.76s backwards; }
html.intro-done .nav__links > li:nth-child(n+4) { animation: nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.84s backwards; }
html.intro-done .nav__burger { animation: nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards; }

@keyframes nav-enter-bottom {
  /* Ohne Overshoot: die Pille faehrt direkt auf ihre Endposition
     (das Abbremsen uebernimmt die Ease-Out-Kurve). */
  0%   { opacity: 0; transform: translateX(-50%) translateY(72px) scale(0.94); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* Top-Bar-Variante (≤1199px): kein translateX — die Nav ist dort nicht
   per Transform zentriert (siehe .nav--hidden-Anpassung im Media-Block). */
@keyframes nav-enter-top {
  0%   { opacity: 0; transform: translateY(-64px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes section-nav-enter {
  0%   { opacity: 0; transform: translateX(48px) scale(0.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes nav-item-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes intro-content-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Overlay-Fade-out: Klasse per JS gesetzt, nachdem das Logo gezeichnet ist */
.intro-overlay--out {
  animation: intro-overlay-out 0.5s ease-out forwards;
}
/* Bei Wiederkehr/Seitenwechsel schneller ausblenden */
html.intro-repeat .intro-overlay--out {
  animation: intro-overlay-out 0.4s ease-out forwards;
}

@keyframes intro-overlay-out {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Accessibility: Bei reduzierter Bewegung keine Animation, Overlay sofort weg.
   Inhalte sofort sichtbar (kein visibility:hidden, kein Fade). */
@media (prefers-reduced-motion: reduce) {
  html.intro-active,
  html.intro-active body {
    overflow: auto;
  }
  html.intro-active .intro-overlay {
    display: none;
  }
  html.intro-active main,
  html.intro-active section:not(.intro-overlay),
  html.intro-active footer,
  html.intro-active .nav,
  html.intro-active .section-nav,
  html.intro-active .mobile-menu {
    visibility: visible;
  }
  html.intro-done section,
  html.intro-done footer,
  html.intro-done .nav,
  html.intro-done .section-nav,
  html.intro-done .nav__logo,
  html.intro-done .nav__logo .nav__logo-ring,
  html.intro-done .nav__logo .nav__logo-mark,
  html.intro-done .nav__links > li,
  html.intro-done .nav__burger {
    animation: none;
  }
}

/* ========================================
   Mobile-Bildoptimierung
   - Kleinere Bildhöhen auf Mobilgeraeten
   - object-fit sicherstellen fuer alle responsiven Bilder
   - poster-only Anzeige des Hero-Videos auf Mobile
   ======================================== */
@media (max-width: 600px) {
  /* Hero-Video: auf Mobile als statisches Poster anzeigen */
  .hero__image {
    object-fit: cover;
  }
  /* Bildhoehen auf Mobile reduzieren.
     Hinweis: .slider__slide img und .quote__bg sind hier bewusst
     ausgenommen — beide muessen ihren 100dvh hohen Container fuellen
     (height: 100% + object-fit: cover). Sonst schrumpft das Bild auf sein
     natuerliches Seitenverhaeltnis und es entsteht darunter leerer Raum.
     .intro__image img ist ebenfalls ausgenommen (siehe unten) — das
     Function-Bild ist Hochformat und muss seinen begrenzten Container
     fuellen, damit die Section in 100dvh passt. */
 .icon-list__icon {
    height: auto;
  }

  /* Intro/Function-Section: garantiert auf einen Viewport begrenzen.
     overflow: hidden verhindert, dass das (hochformatige) Bild in die
     naechste Section (Teaser "UNSERE SYSTEME") ragt. */
  .intro {
    overflow: hidden;
  }

  /* Kompaktere Abstaende, damit Titel + Bild zusammen in 100dvh passen */
  .intro__title-wrapper {
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .intro__grid {
    margin-bottom: 40px;
  }

  /* Hochformatiges Function-Bild: Portrait-Verhaeltnis behalten, aber
     hart auf den verfuegbaren Viewport-Platz begrenzen. Das img fuellt
     den Container per object-fit: cover (height: 100% aus der Basis). */
  .intro__image {
    aspect-ratio: 4 / 5;
    max-height: calc(100dvh - 220px);
    max-width: min(100%, 70vh);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
   JOBS OVERVIEW PAGE (jobs.html)
   Natürlich scrollende Übersicht aller offenen Stellen.
   Nutzt dieselben Kachel-Styles (.open-jobs__card) wie career.html,
   aber ohne die höhenbegrenzte Snap-Grid-Mechanik der Career-Sektion.
   ======================================== */
.jobs-overview {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-20) 0 var(--spacing-32);
}

/* Standalone-Variante (Unterseite von Career, ohne Hero):
   zusätzlicher Kopf-Abstand, damit Breadcrumb/Titel nicht unter der
   fixierten Navigation liegen.
   min-height: 100vh — die Sektion füllt trotz Flow-Layout (kein Snap)
   mindestens den vollen Viewport, damit der Footer erst darunter erscheint. */
.jobs-overview.jobs-overview--standalone {
  padding-top: calc(var(--spacing-32) + var(--spacing-12));
  /* Flow-Layout: Höhe passt sich am Inhalt an (min-height: auto).
     Der footer.page-section--flow hat min-height: 100dvh als Snap-Sektion
     (career.html etc.) — auf jobs.html aber ohne min-height, damit er sich
     am Inhalt ausrichtet und keinen übermäßigen Scroll-Leerraum erzeugt. */
}

/* Unterer Fade über den Kacheln: die scrollende Masonry-Liste blendet zum
   unteren Viewport-Rand hin sanft in die Seitenfarbe aus (gleiche Verlaufs-
   logik wie der Fade in der Eckdaten-Kachel: Hintergrundfarbe -> transparent).
   Fixiert am Fenster, damit der Effekt beim Scrollen konstant unten liegt.
   pointer-events: none, damit Filter-Button/Scroll-Pfeil klickbar bleiben. */
.jobs-overview--standalone::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(72px, 12vh, 160px);
  background: linear-gradient(
    to top,
    var(--color-bg) 15%,
    transparent
  );
  pointer-events: none;
  z-index: 5;
}

.jobs-overview__wrapper {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
  min-width: 0;
}

/* Mobile: grid-column-Reset MUSS nach der Basis-Definition stehen,
   da diese nach dem @media(900px)-Block kommt und den Reset sonst
   per Quellreihenfolge überschreiben würde. */
@media (max-width: 900px) {
  .jobs-overview__wrapper {
    grid-column: 1 / -1;
  }
}

.jobs-overview__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
}

/* Breadcrumb – gleiche Optik wie auf der Detailseite */
.jobs-overview__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  text-transform: uppercase;
}

.jobs-overview__breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.jobs-overview__breadcrumb-link:hover {
  color: var(--color-text);
}

.jobs-overview__breadcrumb-sep {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.jobs-overview__breadcrumb-current {
  color: var(--color-text);
}

.jobs-overview__title {
  font-size: var(--type-h1);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h1-lh);
  text-transform: uppercase;
  margin: 0;
}

/* ── Filter (fixed bottom-right, wie die Section-Nav) ──────────────────────
   Der Toggle-Button ist fixed positioniert an derselben Stelle wie die
   Section-Nav (right: 80px, bottom: 32px) und öffnet auf Klick ein
   Panel direkt darüber. */
.jobs-filter {
  position: fixed;
  right: 80px;
  bottom: 32px;
  /* Ueber dem Footer (der bildet keinen eigenen Stacking-Context) —
     gleiche Ebene wie Section-Nav/Bottom-Nav. */
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-04);
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jobs-filter[hidden] {
  display: none;
}

/* Im Footer ausgeblendet — gesetzt vom Footer-Observer in main.js,
   gleiches Muster (shrink + fade) wie .section-nav--hidden. */
.jobs-filter--hidden {
  transform: scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Aufklappbares Panel — teilt den Milchglas-Effekt der Section-Nav. */
.jobs-filter__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  width: 360px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 1.25rem;
  border-radius: 24px;
  border: 1px solid var(--color-glass-border);
  background: var(--color-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: top right;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.jobs-filter__panel[hidden] {
  display: none;
}

/* Sanftes Auf-/Zuklappen: geschlossen liegt das Panel skaliert/verblasst,
   im offenen Zustand kommt es zur vollen Grösse. */
.jobs-filter:not(.jobs-filter--open) .jobs-filter__panel {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  pointer-events: none;
}

.jobs-filter--open .jobs-filter__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.jobs-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
}

.jobs-filter__group[hidden] {
  display: none;
}

.jobs-filter__label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.jobs-filter__select-wrap {
  position: relative;
}

/* Custom Chevron (SVG-frei, per CSS-Border-Dreieck) */
.jobs-filter__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--spacing-04);
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.jobs-filter__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-glass);
  border-radius: var(--radius-md);
  padding: var(--spacing-03) var(--spacing-08) var(--spacing-03) var(--spacing-04);
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.jobs-filter__select:hover,
.jobs-filter__select:focus-visible {
  border-color: var(--color-text-muted);
  outline: none;
}

/* "Zurücksetzen"-Button erscheint oben im Panel (order: -1 verschiebt
   ihn visuell vor die Filter-Gruppen, ohne die HTML-Reihenfolge zu ändern).
   Styling kommt komplett von .btn + .is-alternative (blau mit weißem Icon). */
.jobs-filter__reset {
  order: -1;
  align-self: flex-start;
  overflow: visible;
  width: 100%;
  height: auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-top: 16px;
  font-family: var(--font-primary);
  font-weight: 500;
}

.jobs-filter__reset[hidden] {
  display: none;
}

/* Toggle-Button — Glas-Pille im Section-Nav-Look. */
.jobs-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-02);
  padding: 1rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-glass-border);
  background: var(--color-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.jobs-filter__toggle-label {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-mono);
  font-size: var(--type-mono-body);
  text-transform: uppercase;
}

/* Zähler-Badge (Anzahl aktiver Filter). */
.jobs-filter__toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: calc(var(--type-mono-body) * 0.85);
  line-height: 1;
}

.jobs-filter__toggle-count[hidden] {
  display: none;
}

/* Filter-Icon (links) — als Maske eingefärbt, damit es dem Theme
   (currentColor) folgt statt an die feste SVG-Farbe gebunden zu sein. */
.jobs-filter__toggle-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("/Assets/Icons/A11y icons/Filter.svg") center / contain no-repeat;
  mask: url("/Assets/Icons/A11y icons/Filter.svg") center / contain no-repeat;
}

.jobs-filter__toggle:hover{
  background: var(--color-bg);
  border-color: transparent;
}

.jobs-filter__toggle--active {
  border: 1px solid var(--color-text-muted);
}

/* Mobile: Filter an der Section-Nav-Position, Panel in voller Breite.
   Muss NACH den Basisregeln stehen (gleiche Spezifität → Quellreihenfolge). */
@media (max-width: 900px) {
  .jobs-filter {
    right: 20px;
  }
  .jobs-filter__panel {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }
}

/* ========================================
   Pill-Style Filter (Abteilung + Count)
   ======================================== */

/* Container: horizontale Liste, wrap-fähig */
.jobs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jobs-pills[hidden] {
  display: none;
}

/* Pill-Button — Milchglas-Optik wie die Filter-Toggle-Pille */
.jobs-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--color-glass-border);
  border-radius: 999px;
  background: rgba(var(--color-fade-rgb), 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jobs-pills__pill:hover {
  background: rgba(var(--color-fade-rgb), 0.1);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* Active-State: heller Hintergrund, dunkler Text */
.jobs-pills__pill.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.jobs-pills__label {
  line-height: 1;
  text-transform: uppercase;
}

/* Count-Badge: gleiche Farbe wie der Button-Text */
.jobs-pills__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.85em;
  line-height: 1;
}

.jobs-pills__pill.active .jobs-pills__count {
  background: rgba(var(--color-fade-rgb), 0.25);
}

@media (max-width: 900px) {
  .jobs-pills {
    gap: 6px;
    margin-bottom: var(--spacing-02);
  }
  .jobs-pills__pill {
    padding: 5px 10px;
    font-size: calc(var(--type-mono-body) * 0.85);
  }
}

.jobs-overview__empty {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  color: var(--color-text-muted);
}

.jobs-overview__empty[hidden] {
  display: none;
}

/* Gefilterte Kacheln ausblenden. Ohne diese Regel würde das display:flex
   der Karte das hidden-Attribut überstimmen (Filter zeigte keine Wirkung). */
.open-jobs__card[hidden] {
  display: none !important;
}

.jobs-overview__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-06);
}

.jobs-overview__initiativ {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  color: var(--color-text);
  max-width: 600px;
}
/* "Alle Stellen ansehen"-Button auf career.html (erbt Button-Glass) */
.open-jobs__cta--all {
  margin-bottom: var(--spacing-04);
  position: absolute;
  align-self: center;
  bottom: 100%;
}

/* Responsiveness: unter 1300px direkt auf 2 Spalten (niemals 4),
   damit Kacheln auf Zwischengrössen nicht angeschnitten werden. */
@media (max-width: 1300px) {
  .icon-list--cards .icon-list__items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-06) var(--spacing-06);
  }

  /* Verhindert, dass Grid-Zellen den Viewport sprengen.
     Grid items haben standardmäßig min-width: auto, was den Inhalt
     (Badge + Card) nicht schrumpfen lässt — bei schmalen Viewports
     führt das zu horizontalem Overflow. */
  .icon-list--cards .icon-list__item {
    min-width: 0;
  }

  .icon-list--cards .icon-list__badge {
    max-width: 100%;
  }
}

/* Tablet: reduziertes Kopf-Padding, damit der Inhalt nicht so tief startet. */
@media (max-width: 900px) {
  .icon-list--cards .icon-list__card {
    padding: var(--spacing-06) var(--spacing-06);
  }

  .timeline__step {
      width: 100%;
  }
}

/* Mobile: eine Spalte, kompaktere Abstände und kleinerer Badge. */
@media (max-width: 560px) {
  .icon-list--cards .icon-list__items {
    grid-template-columns: 1fr;
    /* Einspaltig: gleiche Hoehe ergibt keinen Sinn — natuerliche Hoehe. */
    grid-auto-rows: auto;
    gap: var(--spacing-08);
  }

  .icon-list--cards .icon-list__badge {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .icon-list--cards .icon-list__icon {
    width: 36px;
    height: 36px;
  }
}

/* ========================================
   JOB DETAIL PAGE (job.html)
   Einspaltige Lesespalte mit Titel, Meta, Intro und Inhalts-Sektionen.
   Platzhalter-Inhalte bis der echte Endpunkt angebunden ist.
   ======================================== */
.job-detail {
  background: var(--color-bg);
  color: var(--color-text);
  /* Kopf-Abstand: genug Freiraum unter der fixierten Nav, aber kompakt genug,
     damit Intro/Body-Inhalt schon beim Laden über der Falz sichtbar ist. */
  padding: calc(var(--spacing-20) + var(--spacing-10)) 0 var(--spacing-32);
  min-height: 100dvh;
}

.job-detail__wrapper {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (max-width: 900px) {
  .job-detail__wrapper {
    grid-column: 1 / -1;
  }
}

/* Zweispaltiges Layout: Lesespalte + Eckdaten-Karte (rechts). */
.job-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--spacing-12);
  align-items: start;
}

.job-detail__content {
  min-width: 320px;
}

/* Eckdaten-Karte klebt beim Scrollen im sichtbaren Bereich.
   Das Aside ist zugleich die visuelle Kachel (Fläche, Radius, Padding),
   damit Eckdaten UND der Bewerben-CTA gemeinsam IN der Kachel liegen.
   Höhe ist auf den sichtbaren Bereich begrenzt: reicht der Platz nicht,
   scrollt die Kennzahlen-Liste und der CTA bleibt unten sichtbar. */
.job-detail__aside {
  position: sticky;
  top: var(--spacing-16);
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--spacing-16) - var(--spacing-10));
  background: var(--color-surface);
  border: 1px solid var(--color-glass);
  border-radius: var(--radius-4xl);
  padding: var(--spacing-08);
}

/* Reiner Inhalts-Container für die Kennzahlen-Liste (ohne eigene Fläche,
   die Kachel-Optik liefert jetzt das Aside). Scrollt bei Platzmangel;
   der transparente Hintergrund sorgt dafür, dass der Fade-Gradient der
   CTA-Zeile nur dann sichtbar wird, wenn Inhalt tatsächlich abgeschnitten
   ist (sonst fadet er über die gleichfarbige Kachelfläche = unsichtbar). */
.job-detail__card {
  min-width: 0;
  /* min-height:0 ist zwingend: sonst erzwingt der Flex-Default
     (min-height:auto) die volle Inhaltshöhe und overflow-y greift nicht –
     der Inhalt würde hinter dem CTA abgeschnitten statt zu scrollen. */
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  /* Sichtbarer Scroll-Handle (analog zum Referenz-Beispiel), damit erkennbar
     ist, dass die Kennzahlen-Liste bei Platzmangel scrollt. Etwas Innenabstand
     rechts, damit der Text nicht unter dem Handle klebt. */
  padding-right: var(--spacing-03);
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) transparent;
}

.job-detail__card::-webkit-scrollbar {
  width: 10px;
}

.job-detail__card::-webkit-scrollbar-track {
  background: var(--color-glass);
  border-radius: 10px;
}

.job-detail__card::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.job-detail__card::-webkit-scrollbar-thumb:hover {
  background: var(--color-text);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.job-detail__card:empty {
  display: none;
}

.job-detail__card-title {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-06);
}

.job-detail__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}

.job-detail__fact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-01);
  padding-bottom: var(--spacing-05);
  border-bottom: 1px solid var(--color-glass);
}

.job-detail__fact:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.job-detail__fact-label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.job-detail__fact-value {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-text);
}

/* Mehrzeilige Werte (z. B. Sprachen) untereinander. */
.job-detail__fact-line {
  display: block;
}

/* Sprachen als "Bubbles" (Pills) – gleicher Look wie die Bild-Credits. */
.job-detail__fact-value--bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-02);
  margin-top: var(--spacing-01);
}

.job-detail__fact-bubble {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-mono-footer);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-mono-footer-lh);
  color: var(--color-text-muted);
  background: rgba(var(--color-fade-rgb), 0.7);
  padding: var(--spacing-02) var(--spacing-04);
  border-radius: var(--radius-full);
}

/* Einladungs-/Bewerbungstext (aus der API extrahierter Schlusssatz),
   erscheint unterhalb der Eckdaten (z. B. unter den Sprachen). */
.job-detail__invite {
  margin: var(--spacing-06) 0 0;
  padding-top: var(--spacing-06);
  border-top: 1px solid var(--color-glass);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-text);
}

.job-detail__invite p {
  margin: 0;
}

/* Breadcrumb (HOME > Alle Stellen > Jobtitel) – analog zum Hero-Breadcrumb */
.job-detail__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
  margin-bottom: var(--spacing-10);
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  text-transform: uppercase;
}

.job-detail__breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.job-detail__breadcrumb-link:hover {
  color: var(--color-text);
}

.job-detail__breadcrumb-sep,
.job-detail__breadcrumb-current {
  color: var(--color-text-muted);
}

/* Zurück-Button zwischen Breadcrumb und Titel (Glass-Button, Pfeil links) */
.job-detail__back {
  margin-bottom: var(--spacing-10);
}

.job-detail__header {
  margin-bottom: var(--spacing-08);
}

.job-detail__title {
  font-size: var(--type-h2);
  font-weight: var(--font-weight-heading);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
  /* Lange Titel (z. B. "Marketing Verantwortliche/r") werden wörterbuch-
     basiert getrennt statt hart abgeschnitten. lang="de-CH" am <html> liefert
     das Trennwörterbuch. overflow-wrap dient nur als Notausstieg, falls ein
     Wort selbst nach Trennung breiter als die Spalte bleibt. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.job-detail__intro {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--spacing-06);
}

/* Platzhalter-Hinweis bis echte Inhalte kommen – dezent abgesetzt */
.job-detail__note {
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-glass);
  padding-left: var(--spacing-05);
  margin: 0 0 var(--spacing-12);
}

.job-detail__sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

/* ---- Zweispaltiger Inhalts-Split ----
   LINKS (primary):   was die/der Bewerber:in mitbringt – "Deine Rolle",
                      "Das bringst du mit", "Nice to have".
   RECHTS (secondary):was wir bieten/"nice finden" – "Das bewegst du bei uns".
   auto-fit + minmax(320px, 1fr): Solange BEIDE Spalten >= 320px passen,
   stehen sie nebeneinander; unterschreitet eine 320px, fallen sie
   automatisch untereinander (einspaltig). */
.job-detail__cols {
  display: grid;
  /* min(320px, 100%): verhindert horizontalen Overflow auf Geräten <360px */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--spacing-12);
  align-items: start;
}

.job-detail__col {
  min-width: 0;
}

/* Erste Überschrift jeder Spalte bündig oben (kein doppelter Abstand zum
   Section-Titel/Intro darüber). */
.job-detail__col .job-detail__richtext > :first-child {
  margin-top: 0;
}

/* Firmen-Einleitung als kleines Zitat (aus der description abgespalten). */
.job-detail__quote {
  margin: 0;
  font-size: var(--type-quote-small);
  line-height: 1.55;
}

.job-detail__quote p {
  margin: 0 0 var(--spacing-04);
}

.job-detail__quote p:last-child {
  margin-bottom: 0;
}

.job-detail__section-title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-06);
}

.job-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);
}

.job-detail__list-item {
  position: relative;
  padding-left: var(--spacing-06);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ---- Richtext aus der Stellen-API (sanitisiertes HTML) ----
   Bildet die vom Editor gelieferten Tags (p, strong/em, ul/ol/li, h2–h4, a)
   auf die bestehende Detailseiten-Typografie ab. Der Inhalt ist bereits in
   sanitizeHtml() bereinigt (keine leeren Blöcke/Wrapper/Inline-Styles). */
.job-detail__richtext {
  font-size: var(--type-body);
  line-height: 1.2;
  color: var(--color-text-soft);
  /* Fließtext ebenfalls wörterbuchbasiert trennen, damit lange Fachbegriffe
     in den schmalen Spalten sauber umbrechen statt überzustehen. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Abstände zwischen Blöcken kollabieren an den Rändern der Sektion, damit
   Überschriften-/Absatz-Abstände nicht mit dem Section-Gap doppeln. */
.job-detail__richtext > :first-child {
  margin-top: 0;
}

.job-detail__richtext > :last-child {
  margin-bottom: 0;
}

/* Absatzabstand exakt so hoch wie eine leere Zeile (line-height 1.2 → 1.2em),
   damit die Lücke zwischen Absätzen genau einer eingefügten Leerzeile
   entspricht und nicht künstlich vergrößert wirkt. */
.job-detail__richtext p {
  margin: 0 0 1.2em;
}

/* Betonungen im Fließtext: kräftig, aber in Textfarbe abgesetzt. */
.job-detail__richtext strong,
.job-detail__richtext b {
  font-weight: var(--font-weight-heading);
  color: var(--color-text);
}

.job-detail__richtext em,
.job-detail__richtext i {
  font-style: italic;
}

/* Klassische, native Listen-Marker (disc bzw. dezimal) wie im Bewerber-System
   (design-reference.css .job-content). Native Marker sitzen browserseitig
   automatisch vertikal mittig zur ersten Textzeile, sind also exakt auf die
   Buchstaben zentriert – kein manuelles ::before-Offset nötig. */
.job-detail__richtext ul,
.job-detail__richtext ol {
  margin: 0 0 var(--spacing-05);
  padding-left: 1.5rem;
}

.job-detail__richtext ul {
  list-style: disc;
}

.job-detail__richtext ol {
  list-style: decimal;
}

/* Listen sollen dieselbe Zeilenhöhe wie normaler Fließtext haben. Der
   Zeilenabstand innerhalb der Liste kommt daher allein aus line-height 1.2;
   kein zusätzlicher Item-Abstand, der die Liste luftiger als Text wirken ließe. */
.job-detail__richtext li {
  line-height: 1.2;
  margin-bottom: 0;
  color: var(--color-text-soft);
}

.job-detail__richtext li:last-child {
  margin-bottom: 0;
}

/* Marker dezent in Textfarbe absetzen. */
.job-detail__richtext li::marker {
  color: var(--color-text-soft);
}

/* Überschriften innerhalb des Richtexts wie die Section-Titel gesetzt,
   nur eine Stufe kleiner, damit die Hierarchie erhalten bleibt. */
.job-detail__richtext h2,
.job-detail__richtext h3,
.job-detail__richtext h4 {
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: var(--spacing-10) 0 var(--spacing-04);
}

.job-detail__richtext h2 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.job-detail__richtext h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}

.job-detail__richtext h4 {
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
}

.job-detail__richtext a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.job-detail__richtext a:hover {
  opacity: 0.8;
}

.job-detail__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  opacity: 0.6;
}

/* CTA-Zeile liegt IN der Eckdaten-Kachel unter den Kennzahlen:
   volle Breite, kompakter Abstand zu den Facts darueber. Der ::before-
   Gradient teasert oberhalb des Buttons weitere (abgeschnittene) Inhalte
   an, sobald die Liste scrollt. */
.job-detail__cta-row {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  margin-top: var(--spacing-06);
}

.job-detail__cta-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--spacing-12);
  background: linear-gradient(
    to top,
    var(--color-surface) 25%,
    transparent
  );
  pointer-events: none;
}

/* Mobile: Buttons bleiben content-width um section-nav Überlappung zu vermeiden */
.job-detail__cta-row .job-detail__apply {
  justify-content: center;
}

/* ---- Not-Found-Fallback ----
   Standardmäßig verborgen; nur bei body.job--not-found sichtbar.
   Gleichzeitig wird der reguläre Job-Inhalt ausgeblendet. */
.job-detail__not-found {
  max-width: 860px;
  display: none;
}

body.job--not-found .job-detail__layout {
  display: none;
}

body.job--not-found .job-detail__breadcrumb-current {
  visibility: hidden;
}

body.job--not-found .job-detail__not-found {
  display: block;
}

/* ---- Responsive: einspaltiges Kachel-Grid + kompaktere Abstände ---- */
@media (max-width: 900px) {
  .job-detail__content {
    max-width: none;
  }

  .jobs__grid {
    /* Mobile: eine Spalte */
    columns: 1;
  }

  .jobs-overview,
  .job-detail {
    padding: var(--spacing-16) 0 var(--spacing-20);
  }

  .job-detail__breadcrumb {
    margin-bottom: var(--spacing-08);
  }

  .job-detail__sections {
    gap: var(--spacing-10);
  }

  /* Karte unter den Textinhalt schieben und Sticky aufheben. */
  .job-detail__layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  /* Tablet/Mobil: Kachel waechst mit dem Inhalt, kein Scroll/Fade noetig.
     Sobald sie unter den Text faellt (einspaltig), nutzt sie die volle
     Breite. */
  .job-detail__aside {
    position: static;
    top: auto;
    order: 2;
    max-height: none;
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .job-detail__card {
    overflow-y: visible;
  }

  .job-detail__cta-row::before {
    display: none;
  }
}

/* ========================================
   ERROR PAGES (404, 500, etc.)
   Minimal, zentriert, im Housestyle der Website.
   ======================================== */

.error {
  min-height: 100dvh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-20) var(--spacing-08);
}

.error__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-06);
  max-width: 560px;
}

.error__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-breadcrumb);
  font-weight: var(--font-weight-mono);
  line-height: var(--type-breadcrumb-lh);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.error__code {
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: var(--font-weight-heading);
  line-height: 1;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.error__message {
  font-size: var(--type-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.error__hint {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 400px;
}

.error__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);
  margin-top: var(--spacing-04);
  font-family: var(--font-mono);
  font-size: var(--type-mono-body);
  font-weight: var(--font-weight-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.error__link:hover {
  color: var(--color-accent);
}

.error__link-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  color: var(--color-text);
  transition: transform 0.2s ease;
}

.error__link:hover .error__link-icon {
  transform: translate(2px, -2px);
}

/* ---- Cookie Banner ---- */
.cookie-banner {
  position: fixed;
  right: var(--spacing-04);
  bottom: var(--spacing-04);
  max-width: 420px;
  width: calc(100vw - var(--spacing-08));
  max-height: calc(100vh - var(--spacing-08));
  overflow-y: auto;
  display: none; /* wird von cookie-banner.js eingeblendet */
  z-index: 1300; /* über Nav (1100) und Jobs-Filter (1100) */
}

.cookie-banner__inner {
  background: var(--color-surface);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-4xl);
  padding: var(--spacing-06);
}

.cookie-banner__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-04);
  margin-bottom: var(--spacing-04);
}

.cookie-banner__title {
  font-size: var(--type-h3);
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
  margin: 0;
}

.cookie-banner__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}

.cookie-banner__close:hover {
  color: var(--color-text);
}

.cookie-banner__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-04);
}

.cookie-banner__body p {
  margin: 0 0 var(--spacing-03);
}

.cookie-banner__body p:last-child {
  margin-bottom: 0;
}

.cookie-banner__description {
  margin: 0;
}

.cookie-banner__details {
  border-top: 1px solid var(--color-glass-border);
  padding-top: var(--spacing-04);
  margin-bottom: var(--spacing-04);
}

.cookie-banner__summary {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
}

.cookie-banner__summary:hover {
  color: var(--color-accent);
}

.cookie-banner__summary-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.cookie-banner__details[open] .cookie-banner__summary-icon {
  transform: rotate(180deg);
}

.cookie-banner__categories {
  list-style: none;
  margin: var(--spacing-03) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
}

.cookie-banner__category {
  font-size: 0.875rem;
  color: var(--color-text);
}

.cookie-banner__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-03);
}

.cookie-banner__category-label {
  flex: 1;
  cursor: pointer;
}

.cookie-banner__category-desc {
  margin: var(--spacing-01) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cookie-banner__toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.cookie-banner__toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookie-banner__toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-glass);
  border-radius: 11px;
  transition: background 0.2s ease;
  pointer-events: none;
}

.cookie-banner__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--color-text);
  border-radius: 50%;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.cookie-banner__toggle input:checked ~ .cookie-banner__toggle-track {
  background: var(--color-accent);
}

.cookie-banner__toggle input:checked ~ .cookie-banner__toggle-thumb {
  transform: translateX(18px);
}

.cookie-banner__toggle input:focus-visible ~ .cookie-banner__toggle-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cookie-banner__services {
  list-style: none;
  margin: var(--spacing-03) 0 0;
  padding: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.cookie-banner__services li,
.cookie-banner__service {
  padding: var(--spacing-01) 0;
}

.cookie-banner__service {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-03);
}

.cookie-banner__service-category {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.cookie-banner__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-03);
}

.cookie-banner__btn {
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-02);
  padding: var(--spacing-03) var(--spacing-04);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.cookie-banner__btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.cookie-banner__btn--primary:hover {
  background: var(--color-accent-hover, var(--color-accent));
  filter: brightness(1.1);
}

.cookie-banner__btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-glass-border);
}

.cookie-banner__btn--secondary:hover {
  border-color: var(--color-text);
}

.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.cookie-banner__btn--ghost:hover {
  color: var(--color-text);
}

/* Responsive: vollbreit auf kleinen Screens */
@media (max-width: 600px) {
  .cookie-banner {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
  }

  .cookie-banner__inner {
    border-radius: 0;
    padding: var(--spacing-05);
  }

  .cookie-banner__footer {
    flex-direction: column;
  }

  .cookie-banner__btn {
    min-width: auto;
  }
}

/* ========================================
   INFO-PAGE — Datenschutz / AGB Seiten
   ======================================== */

/* ========================================
   INFO-PAGES (Datenschutz / AGB)
   Im Stil der Jobs-Unterseiten: breites Grid,
   große Typografie, großzügiges Spacing.
   ======================================== */

.info-page {
  background: var(--color-bg);
  padding-top: calc(var(--spacing-32) + var(--spacing-12));
  padding-bottom: var(--spacing-20);
}

.info-page__wrapper {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .info-page__wrapper {
    grid-column: 1 / -1;
  }
}

/* Head: Breadcrumb + Titel — wie .jobs-overview__head */
.info-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);
  margin-bottom: var(--spacing-10);
}

.info-page__header {
  margin-bottom: var(--spacing-10);
}

.info-page__logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--spacing-04);
}

.info-page__title {
  font-size: var(--type-h1);
  font-weight: var(--font-weight-heading);
  line-height: 1.1;
  margin: 0;
  text-wrap: pretty;
  text-transform: uppercase;
}

.info-page__content {
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 70ch;
  text-wrap: pretty;
}

.info-page__content h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--font-weight-heading);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-04);
  line-height: 1.2;
  text-wrap: pretty;
  text-transform: uppercase;
}

.info-page__content p {
  margin-bottom: var(--spacing-05);
  text-wrap: pretty;
}

.info-page__version {
  margin-top: var(--spacing-10);
  font-family: var(--font-mono);
  font-size: var(--type-mono-footer);
  color: var(--color-text-muted);
}

/* Daten-Listen (data-list-group) — im Stil .job-detail__facts */

.data-list-group {
  margin: var(--spacing-05) 0 var(--spacing-07);
}

.data-list-item {
  padding: var(--spacing-04) 0;
  border-bottom: 1px solid var(--color-glass-border);
  line-height: 1.6;
  text-wrap: pretty;
}

.data-list-item:last-child {
  border-bottom: none;
}

.data-list-item strong {
  font-weight: var(--font-weight-heading);
}

/* Bulleted variant */

.data-list-group--bullet {
  list-style: none;
  padding-left: 0;
}

.data-list-group--bullet .data-list-item {
  border-bottom: none;
  padding-left: var(--spacing-06);
  position: relative;
}

.data-list-group--bullet .data-list-item::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 900px) {
  .info-page {
    padding: var(--spacing-16) 0 var(--spacing-20);
  }

  .info-page__title {
    font-size: var(--type-h2);
  }

  .info-page__content h2 {
    font-size: var(--type-h3);
  }
}

@media (max-width: 600px) {
  .info-page {
    padding: var(--spacing-12) 0 var(--spacing-16);
  }

  .info-page__title {
    font-size: var(--type-h3);
  }

  .info-page__content h2 {
    font-size: 1.5rem;
  }

  .info-page__content {
    max-width: none;
  }
}

/* ========================================
   Scroll-Hint — animierter "Scrollen"-Hinweis
   ======================================== */
.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  /* Unter Mobile-Menu (999) und Navs (1100): Der Hint darf nie ueber dem
     offenen Menue liegen. Kollision mit der Nav-Pille gibt es praktisch
     nicht — der Hint erscheint erst nach 4s Inaktivitaet, die Navs sind
     nach 1-2s Idle bereits ausgeblendet. */
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-hint--visible {
  opacity: 0.85;
  transform: translateX(-50%) translateY(0);
}

.scroll-hint__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scroll-hint__arrow {
  display: block;
  width: 24px;
  height: 24px;
  animation: scroll-bounce 1.8s ease-in-out infinite;
}

.scroll-hint__arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('/Assets/Icons/A11y icons/arrowdown.svg') center / contain no-repeat;
  filter: brightness(0) invert(0.5);
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 1199px) {
  .scroll-hint {
    bottom: 20px;
  }
}

/* ========================================
   LQIP Progressive Image Loading
   ======================================== */

/* LQIP-Placeholder: Leichte Unscharfe, damit das kleine Bild weicher aussieht.
   Bilder in der Hero-Section (LCP-kritisch) werden nicht verunstaltet. */
img[data-hd-srcset]:not(.hero__poster):not(.hero__bg) {
  filter: blur(8px);
  transition: filter 0.4s ease-out;
}

/* HD-Bild geladen — Unscharfe entfernen, Bild wird scharf. */
img[data-hd-loaded="true"] {
  filter: blur(0);
}

/* Fallback: Bei saveData/slow-network bleibt data-hd-loaded="skip" und das
   LQIP-Bild ohne Blur (weil kein HD-Wechsel kommt). */
img[data-hd-loaded="skip"] {
  filter: blur(0) !important;
}

img[data-hd-loaded="error"] {
  filter: blur(0) !important;
}

/* ========================================
   Custom Cursor (cursor-dot / cursor-ring)
   main.js positioniert beide via transform mit VIEWPORT-Koordinaten
   (clientX/Y) — sie MUESSEN fixed sein. Ohne diese Regel liegen sie als
   statische Block-Elemente NACH dem Footer im Flow und erweitern durch
   ihren Transform den scrollbaren Bereich unter das Seitenende
   (Phantom-Scroll: "man kann zu weit scrollen und es springt zurueck").
   ======================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10000;
}

/* ========================================
   TIMELINE — Modifier: Zeitstrahl (.timeline--axis)
   ----------------------------------------
   Fuer "Our History" auf about.html. Das Basis-Layout (Kacheln im 2x2-Raster)
   zeigt Meilensteine nebeneinander, laesst aber offen, dass sie zeitlich
   aufeinander folgen. Der Modifier legt eine echte Achse durch die Punkte:
   Jahr ueber dem Punkt, Text darunter, alles auf einer Linie.

   Der Bewerbungsprozess (career.html) nutzt weiterhin die Kacheln — dort sind
   die Schritte eine Reihenfolge ohne Jahreszahlen.

   Die Zeilen liegen im Elterngrid (subgrid), damit Jahr, Punkt und Text ueber
   alle Spalten hinweg auf gleicher Hoehe stehen. Nur so trifft die Achse jeden
   Punkt exakt mittig, egal wie lang die Texte sind.
   ======================================== */
.timeline--axis .timeline__steps {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-04) var(--spacing-06);
  align-items: start;
}

/* Vier Zeilen: Jahr | Punkt | Titel | Text. Jeder Schritt uebernimmt sie per
   subgrid, damit auch unterschiedlich lange Titel die Texte darunter nicht
   gegeneinander verschieben. */
.timeline--axis .timeline__step {
  display: grid;
  grid-row: 1 / span 4;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 0;
}

/* Achsenabschnitt je Schritt: liegt in der Punkt-Zeile und ragt in die halbe
   Spaltenluecke, sodass die Abschnitte zu einer durchgehenden Linie
   zusammenwachsen. Aussen buendig mit der Section. */
.timeline--axis .timeline__step::after {
  content: '';
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  height: 1px;
  background: var(--color-glass-border);
  margin-inline: calc(var(--spacing-06) / -2);
}

.timeline--axis .timeline__step:first-child::after {
  margin-left: 0;
}

.timeline--axis .timeline__step:last-child::after {
  margin-right: 0;
}

/* Alle Kinder ausdruecklich in Spalte 1: Das Pseudo-Element belegt die
   Punkt-Zelle, die automatische Platzierung wuerde den Punkt sonst in eine
   zweite, implizite Spalte schieben. */
.timeline--axis .timeline__year {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
  font-weight: var(--font-weight-mono);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Der Punkt deckt die Achse ab (deckende Flaeche + z-index), sonst liefe die
   Linie sichtbar durchs Icon. */
.timeline--axis .timeline__badge {
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-glass-border);
}

.timeline--axis .timeline__card {
  grid-row: 3 / span 2;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
}

.timeline--axis .timeline__step-title {
  grid-row: 1;
  align-self: start;
}

.timeline--axis .timeline__step-text {
  grid-row: 2;
  line-height: 1.6;
}