@charset "utf-8";
/* ==========================================================================
   AMLaS — Airport Munich Logistics and Services GmbH
   Stylesheet. Selbst gehostet, keine externen Ressourcen (DSGVO).
   Farbwelt aus der Anlage: Marineblau (Logo/Förderrahmen), Sicherheits-Amber
   (Geländer), Beton-Grau (Hallenboden).
   ========================================================================== */

/* --- 1. Schriften (lokal, kein CDN) -------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Marineblau: exakt der Blauton des Firmenlogos (Airport CMYK). Die beiden
     dunkleren Stufen sind daraus abgeleitet — gleicher Farbton und gleiche
     Saettigung, nur weniger Helligkeit. Die -rgb-Varianten sind noetig, weil
     sich Hex-Werte nicht in rgba() einsetzen lassen. */
  --navy: #084978;
  --navy-rgb: 8, 73, 120;
  --navy-700: #06395d;
  --navy-900: #042943;
  --navy-900-rgb: 4, 41, 67;
  --ink: #14181c;
  --slate: #5a6772;
  --slate-light: #8b969f;
  --concrete: #eceef0;
  --concrete-dark: #dfe3e6;
  --paper: #ffffff;
  --signal: #ffb800;
  --line: #dce0e4;
  --line-dark: rgba(255, 255, 255, .18);

  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1280px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --pad-section: clamp(4rem, 9vw, 7.5rem);
  --header-h: 76px;

  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Signaturelement: durchgehende Amber-Signallinie */
  --signal-line: var(--signal);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Das <picture> zwischen Rahmen und <img> hat sonst automatische Hoehe. Damit
   loest das height:100% am Bild zu auto auf und object-fit:cover greift nie. */
.hero__media picture,
.pagehead__media picture,
.band__media picture,
.card__media picture { height: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-700); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: var(--signal); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- 4. Typografie ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); line-height: .98; letter-spacing: -.025em; }
h2 { font-size: clamp(1.95rem, 4vw, 3.15rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 600; letter-spacing: -.005em; }
h4 { font-size: 1.0625rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

strong, b { font-weight: 600; }

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--slate);
}

/* Eyebrow: technisches Etikett mit Signal-Marke — verortet den Abschnitt */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.4rem;
}
/* Kleine Marke in Amber — dasselbe Zeichen wie die Signallinie. */
.eyebrow::before {
  content: '';
  width: 28px;
  height: 6px;
  flex: none;
  margin-top: .5em;
  background: var(--signal);
}

/* --- 5. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--concrete { background: var(--concrete); }
.section--dark { background: var(--navy-900); color: var(--paper); }
.section--line { border-top: 1px solid var(--line); }

.section--dark .lead,
.section--dark .eyebrow { color: rgba(255, 255, 255, .72); }
.section--dark a { color: var(--paper); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--wide { max-width: 60rem; }
/* Bewusst eng gefasst: ein allgemeines "h2 + .lead" wuerde die Hilfsklasse
   .mt-l ueberstimmen, wo absichtlich mehr Luft gewuenscht ist. */
.section-head h2 + .lead { margin-top: 1.15rem; }
.band h2 + p { margin-top: 1.15rem; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Zitate sind unterschiedlich lang. Gleich hohe Karten liessen ueber den
   kuerzeren Zitaten grosse Leerflaechen stehen. Hoechstens zwei Spalten: bei
   vier Zitaten ergibt das ein ausgeglichenes 2x2 statt einer einzelnen,
   schmalen Karte in der zweiten Reihe. */
.grid--quotes {
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  /* Nur wo beide Spalten aehnlich hoch sind, lohnt sich das Zentrieren. */
  .split--center { align-items: center; }
}

.stack > * + * { margin-top: 1.25rem; }
.prose { max-width: 42rem; }
.prose p + p { margin-top: 1.15em; }

/* --- 6. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper); }

.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Gleichwertige Alternative zu btn--primary: gleiche Groesse, gleiches Gewicht.
   Wird beim Einwilligungshinweis fuer "Nur notwendige" gebraucht, damit
   Ablehnen genauso leicht faellt wie Zustimmen. */
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }

.btn--light { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.btn--light:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }

.btn--outline-light { border-color: rgba(255, 255, 255, .5); color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
/* Auf schmalen Geraeten volle Breite statt ausgefranster Reihe */
@media (max-width: 30rem) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; }
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.link-arrow::after {
  content: '';
  width: 1.1em;
  height: 1px;
  background: currentColor;
  transition: width .2s var(--ease);
}
.link-arrow:hover::after { width: 1.9em; }

/* --- 7. Kopfbereich ------------------------------------------------------ */
.skip {
  position: absolute;
  left: .75rem;
  top: -100%;
  z-index: 200;
  padding: .8rem 1.2rem;
  background: var(--navy);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: .75rem; color: var(--paper); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 28px rgba(var(--navy-900-rgb), .09); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.brand { flex: none; margin-right: auto; display: block; line-height: 0; }
.brand img { width: clamp(148px, 17vw, 196px); }

.nav { display: none; }

.nav__list { display: flex; align-items: center; gap: .25rem; }

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .8rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  position: relative;
  transition: color .18s var(--ease);
}
.nav__link:hover,
.nav__toggle:hover { color: var(--navy); }

/* Aktiver Punkt trägt die Signallinie — dasselbe Zeichen wie im Hero */
.nav__item.is-active > .nav__link::after,
.nav__item.is-active > .nav__toggle::after {
  content: '';
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .1rem;
  height: 4px;
  background: var(--signal);
}

.nav__toggle svg { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.nav__item.is-open > .nav__toggle svg { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 15rem;
  padding: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(var(--navy-900-rgb), .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item { position: relative; }
.nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__sub a {
  display: block;
  padding: .6rem .8rem;
  font-size: .93rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.nav__sub a:hover,
.nav__sub a[aria-current='page'] { background: var(--concrete); border-left-color: var(--signal); color: var(--navy); }

.header__actions { display: none; align-items: center; gap: .9rem; }

.header__phone {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.header__phone:hover { color: var(--navy); }

/* Menüschalter (mobil) */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 64rem) {
  .burger { display: none; }
  .nav { display: block; }
  .header__actions { display: flex; }
}

/* Mobiles Menü */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--paper);
  overflow-y: auto;
  padding: 1.5rem var(--gutter) 3rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.menu.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 64rem) { .menu { display: none; } }

.menu__item { border-bottom: 1px solid var(--line); }
.menu__link,
.menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem .2rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
}
.menu__item.is-active > .menu__link,
.menu__item.is-active > .menu__toggle { color: var(--navy); }
.menu__toggle svg { width: 14px; height: 14px; flex: none; transition: transform .22s var(--ease); }
.menu__item.is-open .menu__toggle svg { transform: rotate(180deg); }

.menu__sub { display: none; padding: 0 0 1rem .2rem; }
.menu__item.is-open .menu__sub { display: block; }
.menu__sub a {
  display: block;
  padding: .6rem 0 .6rem 1rem;
  font-size: 1rem;
  color: var(--slate);
  text-decoration: none;
  border-left: 2px solid var(--line);
}
.menu__sub a:hover,
.menu__sub a[aria-current='page'] { color: var(--navy); border-left-color: var(--signal); }

.menu__foot {
  margin-top: 2rem;
  display: grid;
  gap: .8rem;
  font-family: var(--font-mono);
  font-size: .95rem;
}
.menu__foot a { text-decoration: none; }

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--paper);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img,
.hero__video { width: 100%; height: 100%; object-fit: cover; }

/* Der Film liegt ueber dem Standbild und wird erst eingeblendet, wenn er
   wirklich laeuft. Das Bild bleibt damit der schnelle erste Eindruck und
   zugleich die Notloesung, wenn der Browser die Wiedergabe blockiert. */
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__media.is-playing .hero__video { opacity: 1; }
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(var(--navy-900-rgb), .95) 0%, rgba(var(--navy-900-rgb), .82) 42%, rgba(var(--navy-900-rgb), .48) 100%),
    linear-gradient(to top, rgba(var(--navy-900-rgb), .8), transparent 55%);
}

.hero__inner {
  padding-block: clamp(3.5rem, 11vw, 8rem);
  max-width: 54rem;
}
.hero h1 { margin-bottom: 2rem; }

/* Schlagzeile im Stil des Team-Signets: schraeg gestellte Versalien, von einer
   angeschnittenen Klammer gefasst. Die Neigung liegt auf der Eigenschaft
   "rotate", damit die Einblendung (arbeitet mit "transform") sie nicht loescht. */
.hero__claim {
  position: relative;
  rotate: -3deg;
  padding: .12em 0 .08em 1.05em;
  font-size: clamp(2.35rem, 6.1vw, 4.8rem);
  line-height: .93;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.hero__claim span {
  display: block;
  transform: skewX(-9deg);
  transform-origin: left bottom;
}
.hero__claim span:nth-of-type(2) { margin-left: .42em; }
.hero__claim span:nth-of-type(3) { margin-left: .14em; color: var(--signal); }
.hero__claim-frame {
  position: absolute;
  left: 0;
  top: -.42em;
  z-index: -1;
  width: 64%;
  height: calc(100% + .66em);
  color: rgba(255, 255, 255, .55);
}
.hero .eyebrow { color: var(--signal); }
.hero__lead {
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 40rem;
  margin-bottom: 2.25rem;
}
.hero .btn-row { margin-bottom: 0; }

/* Bodenlinie des Heros — das Signaturelement in voller Breite */
.hero__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--signal-line);
}

/* Kompakter Seitenkopf für Unterseiten */
.pagehead {
  position: relative;
  background: var(--navy-900);
  color: var(--paper);
  isolation: isolate;
}
.pagehead__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--navy-900-rgb), .94), rgba(var(--navy-900-rgb), .74));
}
.pagehead__inner { padding-block: clamp(2.75rem, 7vw, 5rem); max-width: 50rem; }
.pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); margin-bottom: 1rem; }
.pagehead__lead { color: rgba(255, 255, 255, .82); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 38rem; }
.pagehead__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--signal-line); }

/* Brotkrumen */
.breadcrumb { padding-top: 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .6); }
.breadcrumb li + li::before { content: '/'; color: rgba(255, 255, 255, .35); }
.breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.breadcrumb a:hover { color: var(--signal); }
.breadcrumb [aria-current='page'] { color: var(--paper); }

/* --- 9. Kennzahlen ------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}
/* Am unteren Rand ausgerichtet, damit die Kennzahlen auch dann auf einer Linie
   stehen, wenn ueber einzelnen Zahlen ein "rund" steht. */
.stat {
  background: var(--navy-900);
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.stat__unit { color: var(--signal); }
.stat__pre {
  display: block;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: .35rem;
}
.stat__label {
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* --- 10. Karten ---------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { border-color: var(--navy); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(var(--navy-900-rgb), .1); }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--concrete); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--signal-line);
  transition: width .35s var(--ease);
}
.card:hover .card__media::after { width: 100%; }

.card__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.card__body p { color: var(--slate); font-size: .98rem; }
.card__body .link-arrow { margin-top: auto; padding-top: .5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }

/* --- 11. Merkmalliste ---------------------------------------------------- */
.features { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 44rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.1rem); transition: background-color .2s var(--ease); }
.feature:hover { background: var(--concrete); }
.feature__mark { width: 32px; height: 6px; background: var(--signal); margin-bottom: 1.1rem; }
.feature h3 { margin-bottom: .5rem; }
.feature p { color: var(--slate); font-size: .96rem; }

/* Aufzählung mit Signal-Strichen */
.ticks { display: grid; gap: .85rem; }
.ticks li { position: relative; padding-left: 2.1rem; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 22px;
  height: 5px;
  background: var(--signal);
}

/* Datenliste (Fakten) */
.facts { border-top: 1px solid var(--line); }
.facts div {
  display: grid;
  gap: .15rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 34rem) { .facts div { grid-template-columns: 12rem 1fr; } }
.facts dt { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); padding-top: .25rem; }
.facts dd { margin: 0; }
.section--dark .facts, .section--dark .facts div { border-color: var(--line-dark); }
.section--dark .facts dt { color: rgba(255, 255, 255, .6); }

/* --- 12. Referenzen ------------------------------------------------------ */
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--navy);
}
.quote blockquote { font-size: 1rem; line-height: 1.65; color: var(--ink); flex: 1; }
.quote blockquote p + p { margin-top: .9em; }
.quote__foot { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote__logo {
  width: auto;
  max-width: 8.5rem;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  flex: none;
  filter: grayscale(1);
}
.quote__who { font-size: .9rem; line-height: 1.4; }
.quote__who strong { display: block; font-weight: 600; }
.quote__who span { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

/* --- 13. Bildband / Aufruf ----------------------------------------------- */
.band {
  position: relative;
  color: var(--paper);
  background: var(--navy-900);
  isolation: isolate;
  overflow: hidden;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(var(--navy-900-rgb), .94) 30%, rgba(var(--navy-900-rgb), .6)); }
.band__inner { max-width: 40rem; padding-block: clamp(3.5rem, 8vw, 6rem); }
.band h2 { margin-bottom: 1.1rem; }
.band p { color: rgba(255, 255, 255, .82); margin-bottom: 2rem; }

/* Bild mit Rahmen-Versatz */
.framed { position: relative; }
.framed img { border-radius: var(--radius); }
.framed::before {
  content: '';
  position: absolute;
  left: -14px;
  bottom: -14px;
  width: 45%;
  height: 6px;
  background: var(--signal-line);
}

/* --- 13b. Bildreihe ------------------------------------------------------
   Drei Aufnahmen nebeneinander, auf schmalen Schirmen untereinander. Fugen und
   Rahmen wie bei der Merkmalliste, damit die Reihe als ein Block gelesen wird.
   Der feste Bildausschnitt gleicht unterschiedliche Seitenverhaeltnisse aus. */
.shots {
  position: relative;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 44rem) { .shots { grid-template-columns: repeat(3, 1fr); } }

.shots figure { position: relative; overflow: hidden; background: var(--concrete); }
.shots picture { display: block; aspect-ratio: 3 / 2; }
.shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.shots figure:hover img { transform: scale(1.045); }

/* Signallinie wie bei .framed, aber einmal unter der ganzen Reihe */
.shots::after {
  content: '';
  position: absolute;
  left: -14px;
  bottom: -14px;
  width: 30%;
  height: 6px;
  background: var(--signal-line);
}

/* --- 14. Zeitstrahl ------------------------------------------------------ */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: .8rem;
  bottom: .8rem;
  width: 2px;
  background: var(--line);
}
@media (min-width: 48rem) { .timeline::before { left: 8.5rem; } }

.tl-item { position: relative; padding: 0 0 2.5rem 2.5rem; }
@media (min-width: 48rem) {
  .tl-item { display: grid; grid-template-columns: 8.5rem 1fr; gap: 3rem; padding-left: 0; }
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 16px;
  height: 16px;
  background: var(--signal);
  border: 3px solid var(--paper);
  outline: 2px solid var(--signal);
  border-radius: 50%;
}
@media (min-width: 48rem) { .tl-item::before { left: calc(8.5rem - 7px); } }

.tl-year {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) {
  /* Abstand zum Punkt auf der Linie — sonst stossen laengere Angaben wie
     "ab 2010" direkt daran. */
  .tl-year { text-align: right; padding-top: .1rem; padding-right: 1.6rem; }
}
.tl-body { max-width: 46rem; }
.tl-body h3 { margin-bottom: .5rem; }
.tl-body p { color: var(--slate); }

/* --- 15. Formulare ------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; }
.field .req { color: var(--navy); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--paper);
  border: 1px solid var(--concrete-dark);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .12);
  outline: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--slate); }

.check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: .9rem; line-height: 1.55; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--navy); }

.form__note { font-size: .85rem; color: var(--slate); }

/* Honeypot — für Menschen unsichtbar, für Bots ein Köder */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { padding: .9rem 1.1rem; border-left: 4px solid var(--navy); background: var(--concrete); font-size: .93rem; }
.form__status[data-state='error'] { border-left-color: #b3261e; }
.form__status[data-state='ok'] { border-left-color: #1b7f4d; }

/* --- 16. Kontaktkacheln -------------------------------------------------- */
/* Passt sich der tatsaechlich verfuegbaren Breite an: in einer schmalen
   Spalte gestapelt, ueber die volle Breite nebeneinander. */
/* Trennlinien liegen auf den Kacheln, nicht auf dem Raster: so bleibt eine
   nicht belegte Rasterzelle unsichtbar, statt als graues Feld stehenzubleiben. */
/* 18rem statt 15rem: in einer Spalte des Split-Layouts passen sonst zwei
   Kacheln nebeneinander, und die dritte laesst eine Zelle leer. */
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px;
}
.tile {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  gap: .55rem;
  align-content: start;
}
.tile__label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.tile p, .tile a { font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.tile a:hover { text-decoration: underline; }
.tile address { font-style: normal; font-size: 1.05rem; line-height: 1.6; }
.tile__label--sep { margin-top: .75rem; }

/* --- 17. Karte mit Zwei-Klick-Lösung ------------------------------------- */
.map { position: relative; aspect-ratio: 16 / 9; background: var(--concrete); border: 1px solid var(--line); overflow: hidden; }
@media (max-width: 40rem) { .map { aspect-ratio: 4 / 3; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  padding: 2rem;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, var(--concrete-dark) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--concrete-dark) 0 1px, transparent 1px 40px),
    var(--concrete);
}
.map__placeholder h3 { font-size: 1.15rem; }
.map__placeholder p { font-size: .9rem; color: var(--slate); max-width: 30rem; }

/* --- 18. Fußbereich ------------------------------------------------------ */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .75); }
.footer__top { padding-block: clamp(3rem, 6vw, 4.5rem); display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 72rem) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__brand img { width: 190px; margin-bottom: 1.25rem; }
.footer__brand p { font-size: .95rem; max-width: 24rem; }

.footer h2 {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 1.1rem;
}
.footer ul { display: grid; gap: .6rem; }
.footer a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .95rem; }
.footer a:hover { color: var(--paper); text-decoration: underline; }
.footer address { font-style: normal; font-size: .95rem; line-height: 1.75; }

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.footer__bottom p { color: rgba(255, 255, 255, .55); }

/* --- 19. Einwilligung ---------------------------------------------------- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  padding: var(--gutter);
  background: var(--paper);
  border-top: 4px solid var(--signal-line);
  box-shadow: 0 -14px 44px rgba(var(--navy-900-rgb), .18);
}
.consent[hidden] { display: none; }
.consent__inner { max-width: var(--wrap); margin-inline: auto; display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .consent__inner { grid-template-columns: 1fr auto; align-items: center; } }
.consent h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; color: var(--ink); letter-spacing: -.01em; text-transform: none; }
.consent p { font-size: .92rem; color: var(--slate); max-width: 46rem; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem; }
.consent__actions .btn { padding: .8rem 1.3rem; font-size: .9rem; }
.consent__link { color: var(--navy); padding: .5rem .1rem; }
.consent__link:hover { color: var(--navy-700); }

.consent-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: min(90vh, 46rem);
  /* margin: auto muss hier stehen, weil der Reset oben "* { margin: 0 }" setzt
     und damit die Zentrierung aus dem Browser-Stylesheet aushebelt. */
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.consent-dialog::backdrop { background: rgba(var(--navy-900-rgb), .55); }
.consent-dialog__head { padding: 1.6rem var(--gutter) 1.1rem; border-bottom: 1px solid var(--line); }
.consent-dialog__head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.consent-dialog__body { padding: 1.4rem var(--gutter); display: grid; gap: 1.1rem; max-height: 55vh; overflow-y: auto; }
.consent-dialog__foot { padding: 1.1rem var(--gutter) 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .7rem; }

.consent-cat { border: 1px solid var(--line); padding: 1.1rem; display: grid; gap: .5rem; }
.consent-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-cat__head strong { font-size: 1rem; }
.consent-cat p { font-size: .88rem; color: var(--slate); }
.consent-cat__state { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* Schalter */
.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--concrete-dark);
  transition: background-color .2s var(--ease);
  position: relative;
}
.switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .2s var(--ease);
}
.switch input:checked + span { background: var(--navy); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.switch input:disabled + span { background: var(--navy); opacity: .45; cursor: not-allowed; }

/* --- 20. Rechtstexte ----------------------------------------------------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 2.75rem; margin-bottom: .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: 1.75rem; margin-bottom: .6rem; }
.legal p, .legal ul, .legal ol { margin-bottom: 1rem; }
.legal ul { display: grid; gap: .5rem; }
.legal ul li { position: relative; padding-left: 1.4rem; }
.legal ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 8px; height: 3px; background: var(--signal); }
.legal ol { counter-reset: n; display: grid; gap: .5rem; }
.legal ol li { position: relative; padding-left: 2rem; counter-increment: n; }
.legal ol li::before { content: counter(n) '.'; position: absolute; left: 0; font-family: var(--font-mono); font-size: .9rem; color: var(--navy); }
.legal address { font-style: normal; margin-bottom: 1rem; }
.legal .toc { background: var(--concrete); padding: 1.4rem 1.6rem; margin-bottom: 2.5rem; }
.legal .toc ul li::before { display: none; }
.legal .toc ul li { padding-left: 0; }

.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--concrete); }

/* --- 21. Kleinteile ------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--concrete);
  border-radius: 999px;
  color: var(--slate);
}
.section--dark .pill { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.note {
  border-left: 4px solid var(--signal);
  background: var(--concrete);
  padding: 1.1rem 1.35rem;
  font-size: .95rem;
}

.center { text-align: center; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }

/* Nur für Screenreader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Der Pfeil in der Karte wiederholt nur das Ziel des übergreifenden Links */
.card .link-arrow { pointer-events: none; color: var(--navy); }
.card:hover .link-arrow::after { width: 1.9em; }

code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--concrete);
  padding: .1em .4em;
  border-radius: var(--radius);
}
.legal .toc strong {
  display: block;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .8rem;
}
.legal .toc ul { gap: .45rem; }
.legal .facts { margin-bottom: 1.5rem; }

/* --- 22. Bildkacheln mit Text auf dem Bild ------------------------------- */
.feature-tiles {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.ftile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(19rem, 32vw, 26rem);
  background: var(--navy-900);
  border-radius: var(--radius);
}
.ftile picture { position: absolute; inset: 0; z-index: -2; }
.ftile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.ftile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(var(--navy-900-rgb), .94) 6%,
    rgba(var(--navy-900-rgb), .68) 42%,
    rgba(var(--navy-900-rgb), .18) 100%);
  transition: opacity .45s var(--ease);
}

.ftile__body {
  position: relative;
  display: grid;
  gap: .7rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--paper);
}
.ftile__kicker {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
}
.ftile h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 700;
  color: var(--paper);
}
.ftile__text { font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.ftile h3 a { color: inherit; text-decoration: none; }
/* Ganze Kachel anklickbar, aber nur ein Link im Zugaenglichkeitsbaum */
.ftile h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.ftile .link-arrow { color: var(--paper); pointer-events: none; }

.ftile__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--signal-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
  z-index: 3;
}

.ftile:hover img,
.ftile:focus-within img { transform: scale(1.07); }
.ftile:hover::after,
.ftile:focus-within::after { opacity: .88; }
.ftile:hover .ftile__bar,
.ftile:focus-within .ftile__bar { transform: scaleX(1); }
.ftile:hover .link-arrow::after,
.ftile:focus-within .link-arrow::after { width: 2.2em; }
.ftile:focus-within { outline: 3px solid var(--signal); outline-offset: 3px; }

/* --- 22b. Personen / Geschäftsführung ------------------------------------ */
.team {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  max-width: 32rem;
}
.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.person__photo { aspect-ratio: 3 / 4; background: var(--concrete-dark); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__body { padding: 1.1rem 1.25rem 1.25rem; }
.person__body h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.person__role {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --- 23. Bewegung -------------------------------------------------------- */
/* Sanftes Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Gestaffelt, wenn mehrere Elemente gleichzeitig ins Bild kommen */
.grid > .reveal:nth-child(2),
.feature-tiles > .reveal:nth-child(2) { transition-delay: .1s; }
.grid > .reveal:nth-child(3),
.feature-tiles > .reveal:nth-child(3) { transition-delay: .2s; }
.grid > .reveal:nth-child(4) { transition-delay: .3s; }

@keyframes amlas-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes amlas-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes amlas-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes amlas-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Ladesequenz im Hero: Etikett, Schlagzeile, Text, Schaltflaechen nacheinander */
.hero__inner > * { animation: amlas-rise .85s var(--ease) both; }
.hero__inner > :nth-child(1) { animation-delay: .08s; }
.hero__inner > :nth-child(2) { animation-delay: .18s; }
.hero__inner > :nth-child(3) { animation-delay: .3s; }
.hero__inner > :nth-child(4) { animation-delay: .42s; }

.hero { overflow: hidden; }
/* Spielraum fuer die Parallaxe — Wert entspricht HERO_ROOM in main.js */
.hero__media { inset: -120px 0; }
.hero__media img,
.hero__media .hero__video { animation: amlas-settle 2.6s var(--ease) both; }
.hero__ground { transform-origin: left; animation: amlas-grow 1s var(--ease) .4s both; }
.pagehead__ground { transform-origin: left; animation: amlas-grow .9s var(--ease) .15s both; }

/* Merkmalfelder laufen innerhalb ihres Rasters nacheinander ein */
.features.is-in .feature { animation: amlas-rise .55s var(--ease) both; }
.features.is-in .feature:nth-child(2) { animation-delay: .07s; }
.features.is-in .feature:nth-child(3) { animation-delay: .14s; }
.features.is-in .feature:nth-child(4) { animation-delay: .21s; }
.features.is-in .feature:nth-child(5) { animation-delay: .28s; }
.features.is-in .feature:nth-child(6) { animation-delay: .35s; }

/* Bildreihe laeuft genauso gestaffelt ein */
.shots.is-in figure { animation: amlas-rise .55s var(--ease) both; }
.shots.is-in figure:nth-child(2) { animation-delay: .07s; }
.shots.is-in figure:nth-child(3) { animation-delay: .14s; }

.tl-item.is-in::before { animation: amlas-pop .5s var(--ease) .12s both; }

/* Fortschrittslinie am unteren Rand der Kopfzeile */
.header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--signal);
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
}

/* Kopfzeile wird beim Scrollen kompakter */
.header__inner { transition: min-height .3s var(--ease); }
.brand img { transition: width .3s var(--ease); }
.header.is-stuck .header__inner { min-height: 62px; }
.header.is-stuck .brand img { width: clamp(124px, 13vw, 156px); }

/* Lichtreflex ueber gefuellten Schaltflaechen */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .3) 50%, transparent 78%);
  transform: translateX(-130%);
  transition: transform .65s var(--ease);
}
.btn:hover::before { transform: translateX(130%); }
.btn--ghost::before, .btn--outline-light::before { display: none; }

/* Sanfte Parallaxe im Kopfbild */
.hero__media img,
.hero__video,
.pagehead__media img { will-change: transform; }

/* Zurueck nach oben */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(var(--navy-900-rgb), .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--signal); color: var(--ink); }
.to-top svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero__inner > *,
  .hero__media img,
  .hero__video,
  .hero__ground,
  .pagehead__ground,
  .features.is-in .feature,
  .tl-item.is-in::before { animation: none; }
  .hero__ground, .pagehead__ground { transform: none; }
  .btn::before { display: none; }
  .header__progress { display: none; }
}

/* Druck */
@media print {
  .header, .footer, .consent, .menu, .btn-row, .hero__media { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .pagehead, .section--dark { background: #fff !important; color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}