/* ==========================================================================
   Savfin AG — Main Stylesheet
   ========================================================================== */

/* --- Custom Properties --- */
:root {
  --header-bg: #364558;
  --header-line: #4B5B6D;
  --nav-hover-bg: #404E60;
  --footer-bg: #2D3E50;
  --about-bg: #2D3A4A;
  --scope-bg: #F9F9F8;
  --request-bg: #F0F4F8;
  --form-bg: #F3F5F8;
  --white: #FFFFFF;
  --text-dark: #1F2937;
  --text-light: #FFFFFF;
  --accent: #4A6FA5;
  --accent-light: #6B8BBF;
  --subtle-gray: #6B7280;
  --cta-bg: #364558;
  --text-muted: #6B7280;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --max-width: 1100px;
  --content-width: 780px;

  /* Motion (Listing Component, Spec v1.0) */
  --d-fast: 180ms;
  --d-mid: 320ms;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* Listing Component (theme-wide: Aircraft, Engines, Wanted) */
  --listing-card-bg: #FBFCFD;
  --listing-card-bg-hover: #FFFFFF;
  --listing-card-border: rgba(0, 0, 0, 0.07);
  --listing-section-bg: #E8EDF1;

  /* Section vertical padding (Aircraft Spec v1.3 §6.1, Master-Spec v2.3 Konvention A) */
  --section-y: clamp(80px, 10vw, 140px);
  --section-y-compact: clamp(56px, 7vw, 110px);

  /* Engines Spec v1.2 §5.1 — warm off-white for Engine Platforms section */
  --numbers-bg: #EFEEEC;
  --numbers-bg-hover: #F4F2EE;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
html {
  color-scheme: light;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fix 55: Skip-to-Content Link — versteckt bis Keyboard-Focus.
   WCAG 2.1 AA: Tastatur-User können Header-Navigation überspringen und
   direkt zum Hauptinhalt springen. Sichtbar wird der Link bei :focus
   (Tab vom Page-Start aus). */
.skip-to-content {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--text-dark);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-200%);
  transition: transform 250ms ease;
}
.skip-to-content:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 400ms;
}

a:hover {
  color: var(--accent-light);
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* ==========================================================================
   Reveal Animation
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: opacity 800ms ease;
}

.reveal.visible {
  opacity: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* ==========================================================================
   Site Header (Master = Mockup V3.6 / Anhang L)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
}

.header-gradient {
  height: 0;
  display: none;
}

.header-logo {
  position: relative;
  height: 150px;
  background: linear-gradient(to right, var(--header-gradient-left, #364558), var(--header-gradient-right, #3D5068));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden; /* Begrenzt den Logo-Shimmer-Streifen */
}

.logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #CDD3DA; /* dim default */
  position: relative;
  transition: color 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.logo-link:hover {
  color: #FFFFFF;
}

.logo-svg {
  height: 112px;
  width: auto;
  color: currentColor; /* erbt von .logo-link für Hover-Color-Wechsel */
}

.logo-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-top: 6px;
}

.header-line-top,
.header-line-bottom {
  height: 1px;
  background: var(--header-line);
}

.header-nav {
  height: 43px;
  background: var(--header-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav li {
  position: relative;
}

.header-nav a {
  display: block;
  padding: 0 22px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .65);
  line-height: 43px;
  text-decoration: none;
  position: relative;
  transition: color 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-nav a:hover {
  color: rgba(255, 255, 255, .95);
}

.header-nav a:hover::after {
  transform: scaleX(1);
}

.header-nav .current-menu-item a,
.header-nav .current_page_item a,
.header-nav li.current a {
  color: rgba(255, 255, 255, .95);
}

.header-nav .current-menu-item a::after,
.header-nav .current_page_item a::after,
.header-nav li.current a::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Nav Toggle (mobile hamburger — Master = Homepage V3.6)
   ========================================================================== */
.nav-toggle {
  display: none;
  position: absolute;
  top: 28px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, .85);
  transition: transform 400ms ease, opacity 300ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Mobile Slide-Over Nav (Master = Homepage V3.6, Anhang L Konvention 1)
   ========================================================================== */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 84vw);
  height: 100vh;
  background: #2D3A4A;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .4);
  padding: 84px 32px 32px;
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms;
}

.mobile-nav-close:hover {
  color: var(--white);
}

.mobile-nav-close svg {
  width: 22px;
  height: 22px;
}

.mobile-nav-inner ul {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.mobile-nav-inner li {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.mobile-nav.open .mobile-nav-inner li {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav.open .mobile-nav-inner li:nth-child(1) { transition-delay: 180ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(2) { transition-delay: 240ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(3) { transition-delay: 300ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(4) { transition-delay: 360ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(5) { transition-delay: 420ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(6) { transition-delay: 480ms; }
.mobile-nav.open .mobile-nav-inner li:nth-child(7) { transition-delay: 540ms; }

.mobile-nav-inner a {
  display: block;
  padding: 18px 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color 300ms ease;
}

.mobile-nav-inner a:hover {
  color: var(--white);
}

/* Active state: white text only, no background-fill, no border accent (Anhang L Konvention 1) */
.mobile-nav-inner li.current a,
.mobile-nav-inner li.current-menu-item a,
.mobile-nav-inner li.current_page_item a {
  color: var(--white);
}

/* Mobile nav backdrop (Anhang L Konvention 4: NO backdrop-filter) */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 30, .55);
  z-index: 990;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.mobile-nav-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll when mobile nav is open */
body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Hero — Homepage (Master = Mockup V3.6)
   ========================================================================== */
.hero,
.hero-home {
  position: relative;
  height: 700px; /* Lieferung 29: fix-height analog Alt-Theme — verhindert object-fit cover Skalierung auf großen Viewports */
  color: var(--text-light);
  overflow: hidden;
  border-bottom: 1px solid var(--header-line);
  isolation: isolate;
  background: var(--header-bg);
  /* Lieferung 50: Padding-horizontal von .hero-inner auf .hero-home gewandert
     damit Hero-Struktur identisch mit Subseiten (.page-hero) ist und Hero-
     Inhalt bündig mit .fp-section-Inhalt unten. .hero-photo (absolute, inset:0)
     ignoriert Padding und bleibt full-width. */
  padding: 0 clamp(40px, 6vw, 96px);
  display: flex;
  align-items: stretch;
}

/* Hintergrund-Foto (kommt aus Customizer) oder Verlaufs-Fallback */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-photo-fallback {
  background: linear-gradient(180deg, #1F3148 0%, #2A4161 45%, #36567E 75%, #3E6288 100%);
}

/* Customizer-gesteuerter Overlay (Lieferung 30)
   Color via --hero-overlay-color, Opacity via --hero-overlay-opacity.
   CSS-Variables werden in inc/customizer.php :: savfin_customizer_css() im
   <head> ausgegeben. Defaults #364558 / 0.6 als Fallback hier. */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-color, #364558);
  opacity: var(--hero-overlay-opacity, 0.6);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  /* Lieferung 50: Horizontales Padding wandert auf .hero-home raus damit Hero-
     Inhalt strukturell wie Subseiten ist (Padding außen). Vertikales Padding
     bleibt hier (Lieferung 29: Höhen-Tuning für 700px Hero-Box). */
  padding: clamp(80px, 9vw, 130px) 0 clamp(56px, 7vw, 90px);
  width: 100%;
  display: grid;
  gap: clamp(36px, 4.5vw, 64px);
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: clamp(10.5px, 0.78vw, 12px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, .55);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .4);
}

.hero h1,
.hero-home h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(44px, 6.8vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-light);
  text-wrap: balance;
  max-width: 16ch;
  margin: 0;
}

.hero h1 em,
.hero-home h1 em {
  font-style: italic;
  color: rgba(255, 255, 255, .92);
  font-weight: 400;
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: clamp(28px, 3vw, 44px);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 22px);
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}

.hero-meta {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .42);
  text-align: right;
  line-height: 1.9;
  white-space: nowrap;
}

.hero-meta strong {
  display: block;
  font-weight: 500;
  color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   Page Hero (Sub-Page Master)
   Spec: Aircraft Spec v1.3 §2 — used by Aircraft, Engines, Wanted, etc.
   ========================================================================== */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, #2A3849 0%, #364558 50%, #2D3E50 100%);
  /* Lieferung 33: fix-height für konsistente Subseiten-Hero-Höhe */
  height: 520px;
  padding: clamp(56px, 6vw, 88px) clamp(40px, 6vw, 96px);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  /* Customizable via inline style on the section (Lieferung 32). */
  --page-hero-overlay-color: #364558;
  --page-hero-overlay-opacity: 0.65;
}

/* Wenn ein Banner-Bild gesetzt ist, übernimmt das Bild + Overlay den
   visuellen Job — Solid-Bg statt Gradient damit Bildränder sauber sind. */
.page-hero.has-photo {
  background: #1F2937;
}

.page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-hero-overlay-color);
  opacity: var(--page-hero-overlay-opacity);
  z-index: 1;
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  /* Lieferung 34: 3-Zone-Grid — Eyebrow oben, Headline mittig, Foot unten.
     Headline bleibt visuell zentriert egal ob 1 oder 2 Zeilen. */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Headline mittig in ihrer 1fr-Zone vertikal zentriert (Lieferung 34). */
.page-hero-inner .page-hero-headline {
  align-self: center;
}

.page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin: 0 0 28px;
}

.page-hero-eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .45);
  flex-shrink: 0;
}

.page-hero-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 14ch;
  /* Lieferung 34: margin 0 — Grid handhabt das Spacing */
  margin: 0;
}

/* Italic-Akzent für Editorial-Headlines (Lieferung 41) */
.page-hero-headline em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
}

.page-hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
}

.page-hero-subline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15.5px, 1.15vw, 18.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  max-width: 56ch;
  margin: 0;
}

.page-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.page-hero-meta-brand {
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.page-hero-meta-label {
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   Hero Banner — Content Pages
   ========================================================================== */
.hero-banner {
  position: relative;
  height: 445px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-banner .hero-bg.no-image {
  background: linear-gradient(135deg, var(--header-bg) 0%, var(--about-bg) 100%);
}

.hero-banner .hero-content {
  max-width: 700px;
}

.hero-banner .hero-keywords {
  opacity: 0;
  transform: translateY(14px);
  animation: heroUp 1000ms 400ms cubic-bezier(.25,.1,.25,1) forwards;
}

.hero-banner .hero-content h1 {
  font-family: var(--font-body);
  font-size: 52px;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.15;
}

.hero-banner .hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: heroUp 1200ms 1050ms cubic-bezier(.25,.1,.25,1) forwards;
}

/* ==========================================================================
   Section Common (Master = Mockup V3.6)
   ========================================================================== */



.section-divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 64px;
  opacity: .45;
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-card {
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 30px 20px;
  text-align: center;
  background: rgba(255, 255, 255, .025);
  transition: background 500ms ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, .05);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .35);
}

/* ==========================================================================
   Btn-Line — Variante mit invertiertem Hover-Slide (Master = Mockup V3.6)
   ========================================================================== */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--text-dark);
  padding: 16px 32px;
  border: 1px solid var(--text-dark);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: color 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}

.btn-line span,
.btn-line svg {
  position: relative;
  z-index: 1;
  transition: color 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-line svg {
  width: 14px;
  height: 14px;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-line:hover {
  color: #FFFFFF;
  border-color: var(--text-dark);
}

.btn-line:hover::before {
  transform: translateX(0);
}

.btn-line:hover svg {
  transform: translateX(4px);
}

.btn-line.on-dark {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .35);
}

.btn-line.on-dark::before {
  background: #FFFFFF;
}

.btn-line.on-dark:hover {
  color: var(--text-dark);
  border-color: #FFFFFF;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 14px 34px;
  border: 1.5px solid var(--header-bg);
  color: var(--header-bg);
  background: transparent;
  cursor: pointer;
  transition: background 400ms, color 400ms;
}

.btn:hover {
  background: var(--header-bg);
  color: var(--white);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 14px 34px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background 400ms, color 400ms, border-color 400ms;
}

.btn-cta:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: var(--white);
}



.btn-submit-light {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 36px;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background 400ms, color 400ms, border-color 400ms;
}

.btn-submit-light:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: var(--white);
}

/* ==========================================================================
   CTA Banner (Aircraft Spec v1.3 §7 — mirrors homepage Contact-band)
   ========================================================================== */






/* CTA-Banner Button — btn-line on-dark Style aus dem Mockup */





/* ==========================================================================
   Page Content
   ========================================================================== */




/* ==========================================================================
   Content Separator
   ========================================================================== */
.content-sep {
  height: 1px;
  background: rgba(0, 0, 0, .06);
  border: none;
  margin: 72px 0 0;
}

/* ==========================================================================
   Content Row (Aircraft Spec v1.3 §4 + §6 — two-column trust-material section)
   Master = Mockup V2.2 / V3.6 — neue Struktur mit .content-row-inner,
   .content-row-head, .accent-line. Alte Klassen (.content-row-aside,
   .content-row-eyebrow, .content-row-headline, .content-row-rule)
   bleiben für Rückwärtskompatibilität (Engines, ACMI).
   ========================================================================== */
.content-row {
  background: var(--white);
  padding: var(--section-y) clamp(24px, 5vw, 96px);
}

/* Compact modifier: shorter vertical padding for sections with single-paragraph
   bodies (Aircraft Spec v1.3 §6.1 — Method has only one sentence). */
.content-row-compact {
  padding: var(--section-y-compact) clamp(24px, 5vw, 96px);
}

.content-row-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.content-row-head {
  position: relative;
}

.content-row-head .section-label {
  margin-bottom: 18px;
}

.content-row-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 24px;
}

.content-row-head .accent-line,
.content-row .accent-line {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(107, 139, 191, 0.5);
  transform-origin: left center;
  margin-top: 0;
}

/* ============== Legacy structure (Engines/ACMI compatibility) =================
   Wenn .content-row direkt .content-row-aside und .content-row-body als
   Kinder hat (ohne .content-row-inner Wrapper), wird .content-row selber
   das Grid. Theme-weit wirksam für alle Subseiten die noch nicht refactored
   wurden. Mockup-konform: minmax(220px, 1fr) 1.6fr (mehr Platz für Headline). */
.content-row:not(:has(> .content-row-inner)) {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.content-row-aside {
  position: relative;
}

.content-row-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

/* Spec §4.2 (Engines) + Mockup V1.15: Capability-Headline 36-56px */
.content-row-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 28px;
}

.content-row-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(107, 139, 191, 0.5);
  transform-origin: left center;
}

.content-row-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-dark);
  max-width: 62ch;
  margin: 0;
}

.content-row-body p + p {
  margin-top: 1em;
}

/* Closing statement (italic, with hairline above) — Engines Spec v1.2 §4.2 / §6.5 */
.content-row-closing {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}


/* ==========================================================================
   Forms
   ========================================================================== */

.form-wrapper-dark {
  background: var(--about-bg);
  padding: 48px 44px;
  margin: 0;
}

.form-wrapper-dark label {
  color: rgba(255, 255, 255, .5);
}

.form-wrapper-dark input,
.form-wrapper-dark textarea,
.form-wrapper-dark select {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  color: var(--white);
}

.form-wrapper-dark input::placeholder,
.form-wrapper-dark textarea::placeholder {
  color: rgba(255, 255, 255, .25);
}

.form-wrapper-dark input:focus,
.form-wrapper-dark textarea:focus,
.form-wrapper-dark select:focus {
  border-color: var(--accent-light);
}

.form-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  margin-bottom: 32px;
}

/* Old form-grid/form-group/btn-submit/privacy-note block removed in Lieferung 27.
   Form-Felder Mockup-Pattern siehe Contact Mockup V1.2 section below.
   ACMI Form nutzt .inquiry-form .form-submit (höhere Specificity, bleibt funktionsfähig). */

/* ==========================================================================
   Contact Layout
   ========================================================================== */
/* Old contact-section block removed in Lieferung 27 — see Contact Mockup V1.2 section below */

.contact-address {
  font-size: 15px;
  color: var(--subtle-gray);
  line-height: 1.8;
  font-style: normal;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
/* Old FAQ block removed in Lieferung 22 — see ACMI Mockup V1.7 section below */

.faq-item:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, .06);
}

/* ==========================================================================
   Wanted (filter-tabs + empty-state — listing-cards reuse the theme-wide
   .listing-card pattern; aside/status styles live in the Listing block above)
   Spec: Wanted Spec v1.2 §3.2 + §3.5
   ========================================================================== */
/* Old filter-tabs block removed in Lieferung 24 — see Wanted Mockup V1.3 section below */

/* Description block inside a Wanted listing-card body (post content + bold
   closing line "Lessors and direct mandates are welcome.") */
.listing-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
}

.listing-desc p {
  margin: 0;
}

.listing-desc p + p {
  margin-top: 6px;
}

.listing-desc strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Empty-state block — shown when filter yields zero visible cards or when
   there are no Wanted entries at all (Spec §3.5). */
/* Old listings-empty block removed in Lieferung 23 — see Wanted Mockup V1.3 section below */

/* ACMI Knowledge-Section Eyebrows (Editorial Master v2.1 — differentiated:
   Definition / Comparison / FAQ instead of 3× »Knowledge«). */
.knowledge-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

/* ==========================================================================
   ACMI §3 — Inquiry Section (form directly after hero, steel-blue bg)
   ========================================================================== */
/* Old ACMI inquiry block removed in Lieferung 19 — see ACMI Mockup V1.7 section below */

/* Form-row layout (Spec §3.3 — content-grouped rows, not generic grid) */
.form-row {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-row.cols-1 { grid-template-columns: 1fr; }

/* ==========================================================================
   ACMI §5 — Numbers (3 stats on warm off-white)
   ========================================================================== */
.numbers-section {
  background: var(--numbers-bg);
  padding: var(--section-y-compact) 40px;
}

.numbers-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.numbers-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 clamp(28px, 3vw, 40px);
}


.numbers-stat {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  padding-top: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.numbers-num {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  white-space: nowrap;
}

.numbers-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   ACMI §7 — Capability (statement + tags-row)
   ========================================================================== */
/* Old capability-section block removed in Lieferung 25 — see Company Mockup V1.3 section below */

/* ==========================================================================
   ACMI §8 — Knowledge-Row (Definition section, two-column trust pattern)
   ========================================================================== */
/* Old knowledge-row block removed in Lieferung 21 — see ACMI Mockup V1.7 section below */

/* ==========================================================================
   ACMI §9 — Compare Grid (Wet vs. Dry, side-by-side with vertical hairline)
   ========================================================================== */
.compare-section {
  background: var(--white);
  padding: var(--section-y-compact) 40px;
}

.compare-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.compare-header {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.compare-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}


.compare-col {
  padding-right: clamp(20px, 3vw, 40px);
}

.compare-col--wet {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.compare-col--dry {
  padding-right: 0;
  padding-left: clamp(20px, 3vw, 40px);
}

.compare-col-kicker {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.compare-col-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.compare-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compare-list strong {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.compare-list span {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 38ch;
}

/* ==========================================================================
   ACMI §10 — Context (photo + practice text, 2-col with tablet collapse)
   Spec §10.1 CRITICAL: tablet 961-1100px collapses to 1col to avoid overlap.
   ========================================================================== */
.context-section {
  background: var(--white);
  padding: var(--section-y-compact) 40px;
}

.context-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) 1.3fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.context-image {
  aspect-ratio: 4 / 3;
  background-color: #2A3849;
  background-image: linear-gradient(135deg, rgba(42,56,73,1) 0%, rgba(54,69,88,1) 50%, rgba(45,62,80,1) 100%);
  background-size: cover;
  background-position: center;
}
/* When .has-image is set, an inline style overrides background-image with
   linear-gradient(overlay) + url(photo) — see page-acmi.php Context block. */

.context-text {
  padding: clamp(8px, 2vw, 24px) 0;
}

.context-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.context-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 clamp(20px, 2vw, 28px);
}

.context-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0;
  max-width: 60ch;
}

.context-body p + p {
  margin-top: 1em;
}

/* ==========================================================================
   ACMI §11 — FAQ 2-column on desktop (modifier on existing .faq-section)
   ========================================================================== */
.faq-section.faq-2col {
  background: var(--white);
  padding: var(--section-y-compact) 40px;
  max-width: none;
}

.faq-section.faq-2col .faq-header {
  max-width: var(--max-width);
  margin: 0 auto clamp(32px, 4vw, 56px);
}

.faq-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}

.faq-section.faq-2col .faq-list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 80px);
}

/* ==========================================================================
   Company Stats
   ========================================================================== */
.company-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0;
}

.company-stat {
  text-align: center;
  padding: 32px 20px;
  border: 1px solid rgba(0, 0, 0, .06);
}

.company-stat .stat-value {
  color: var(--text-dark);
}

.company-stat .stat-label {
  color: var(--subtle-gray);
}

/* ==========================================================================
   Fuel Sections
   ========================================================================== */




/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, .1);
  color: var(--subtle-gray);
  transition: background 400ms, color 400ms, border-color 400ms;
}

.pagination a:hover {
  border-color: var(--header-bg);
  color: var(--header-bg);
}

.pagination .current {
  background: var(--header-bg);
  color: var(--white);
  border-color: var(--header-bg);
}

/* ==========================================================================
   Permanent Acquisition Interest (Wanted Spec v1.2 §4)
   2x2-Hairline-Grid mit kompaktem Padding, two-column Section-Header.
   ========================================================================== */
/* Old acquisition-section block removed in Lieferung 23 — see Wanted Mockup V1.3 section below */

/* ==========================================================================
   Form Messages
   ========================================================================== */
.form-message {
  padding: 16px 20px;
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
}

.form-message--success {
  background: rgba(45, 138, 78, .08);
  border: 1px solid rgba(45, 138, 78, .2);
  color: #2D8A4E;
}

.form-message--error {
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .2);
  color: #DC2626;
}

.field-error {
  font-family: var(--font-heading);
  font-size: 11px;
  color: #DC2626;
  margin-top: 4px;
}

/* ==========================================================================
   Form Modal Overlay
   ========================================================================== */
.form-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 58, 74, .5);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: overlayIn 400ms ease;
}

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

.form-modal {
  background: var(--white);
  max-width: 480px;
  width: 100%;
  padding: 52px 48px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: modalIn 500ms cubic-bezier(.25,.1,.25,1);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.form-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 22px;
  color: rgba(107, 114, 128, .3);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  transition: color 300ms;
  font-family: var(--font-heading);
  font-weight: 300;
}

.form-modal-close:hover {
  color: var(--text-dark);
}

/* ===== Airplane Track ===== */
.plane-track {
  position: relative;
  height: 56px;
  margin-bottom: 24px;
  overflow: hidden;
}

.plane-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(74, 111, 165, .08);
  transform: translateY(-50%);
}

.plane-svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  width: 44px;
  height: 44px;
  animation: planeFly 2s cubic-bezier(.4,.0,.2,1) forwards;
  opacity: 0;
}

@keyframes planeFly {
  0%   { left: -50px; opacity: 0; }
  8%   { opacity: .7; }
  45%  { opacity: .7; }
  70%  { left: calc(50% - 22px); opacity: .55; }
  100% { left: calc(100% + 50px); opacity: 0; }
}

.plane-trail {
  position: absolute;
  top: 50%;
  height: 1px;
  left: 0;
  background: linear-gradient(to right, transparent 0%, rgba(74, 111, 165, .2) 40%, rgba(74, 111, 165, .1) 100%);
  transform: translateY(-50%);
  animation: trailGrow 2s cubic-bezier(.4,.0,.2,1) forwards;
  opacity: 0;
}

@keyframes trailGrow {
  0%   { width: 0; opacity: 0; }
  10%  { opacity: .35; }
  45%  { width: 45%; opacity: .2; }
  100% { width: 100%; opacity: 0; }
}

/* ===== Modal Content Fade ===== */
.modal-content {
  opacity: 0;
  transform: translateY(8px);
  animation: contentIn 600ms ease forwards;
  animation-delay: 1.4s;
}

@keyframes contentIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Check Icon ===== */
.check-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
}

.check-icon svg {
  width: 100%;
  height: 100%;
}

.check-icon circle {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: circDraw 600ms ease forwards;
  animation-delay: 1.5s;
}

@keyframes circDraw {
  to { stroke-dashoffset: 0; }
}

.check-icon .tick {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: tickDraw 350ms ease forwards;
  animation-delay: 1.9s;
}

@keyframes tickDraw {
  to { stroke-dashoffset: 0; }
}

/* ===== Error Icon ===== */
.error-icon circle {
  stroke: #DC2626;
}

.error-icon .x-line {
  stroke: #DC2626;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: tickDraw 350ms ease forwards;
  animation-delay: 1.9s;
}

/* ===== Modal Typography ===== */
.form-modal-title {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.form-modal-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--subtle-gray);
  line-height: 1.7;
  margin-bottom: 30px;
}

.form-modal-btn {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 12px 44px;
  border: 1px solid rgba(0, 0, 0, .1);
  background: transparent;
  color: var(--subtle-gray);
  cursor: pointer;
  transition: all 400ms;
}

.form-modal-btn:hover {
  border-color: var(--header-bg);
  color: var(--header-bg);
}

/* ==========================================================================
   Footer (Master = Mockup V3.6)
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, .6);
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 96px) 40px;
}

.footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand .logo-svg {
  height: 72px;
  width: auto;
  color: #CDD3DA;
  margin-bottom: 22px;
  transition: color 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-brand a:hover .logo-svg {
  color: #FFFFFF;
}

.footer-brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .55);
  max-width: 34ch;
  margin: 0;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 22px;
}

.footer-links {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .75);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

.footer-bottom {
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  letter-spacing: 0.5px;
  border-top: none;
}

.footer-copyright {
  font-family: var(--font-heading);
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  letter-spacing: 0.5px;
  margin: 0;
}

.footer-copyright a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-copyright a:hover {
  color: var(--text-light);
}

.footer-social a {
  color: rgba(255, 255, 255, .28);
  transition: color 400ms;
  margin-left: 16px;
}

.footer-social a:hover {
  color: var(--text-light);
}

/* ==========================================================================
   Default Content (Privacy Policy etc.)
   ========================================================================== */










/* ==========================================================================
   404 Page
   ========================================================================== */





/* ==========================================================================
   Scope/About/Request aliases (match front-page.php class names)
   Hinweis: .scope und .scope-inner werden oben in der V3.6-Scope-Sektion
   gesetzt — die Aliases hier wären sonst Override mit alten Werten.
   ========================================================================== */
.about { background: var(--about-bg); padding: 110px 40px; }
.request { background: var(--request-bg); padding: 110px 40px; }
.request-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.request-content .section-label { text-align: left; }
.request-content h2 { font-family: var(--font-body); font-size: 34px; font-weight: 400; color: var(--text-dark); line-height: 1.25; margin-bottom: 20px; }
.request-content p { font-size: 15px; color: var(--subtle-gray); line-height: 1.75; margin-bottom: 36px; }

/* ==========================================================================
   ACMI Form Section wrapper
   ========================================================================== */
.form-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 40px;
}

.form-intro {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--subtle-gray);
  line-height: 1.85;
  margin-bottom: 28px;
  margin-top: 6px;
}

/* ==========================================================================
   Company Stats Section (light bg)
   ========================================================================== */

.stats-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}





/* Old Jet Fuel Form variants (.form-light/.form-dark/.email-hint) removed in
   Lieferung 28 — replaced by Fuel Mockup V1.0 patterns block below. */

/* ==========================================================================
   ACMI MOCKUP V1.7 PATTERNS (Lieferung 18)
   Markup folgt Mockup ACMI V1.7 1:1. Diese Klassen sind ACMI-spezifisch
   und überschreiben ggf. ältere Theme-Definitionen mit gleichem Namen.
   ========================================================================== */

/* --- Generic helpers --- */

.accent-line {
  width: 64px;
  height: 1px;
  background: rgba(107, 139, 191, 0.5);
  transform-origin: left center;
  transform: scaleX(0);
  margin: 28px 0;
  display: block;
}
.reveal.visible .accent-line {
  transform: scaleX(1);
  transition: transform 1200ms cubic-bezier(0.65, 0, 0.35, 1) 400ms;
}

/* --- Inquiry section (Form) --- */
.inquiry-section {
  background: var(--form-bg);
  padding: var(--section-y) clamp(24px, 5vw, 96px);
}
.inquiry-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.inquiry-head {
  margin-bottom: clamp(56px, 6vw, 88px);
  max-width: 80ch;
}
.inquiry-marker {
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 26px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.inquiry-head.visible .inquiry-marker { transform: scaleX(1); }
.inquiry-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.inquiry-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}
.inquiry-form-wrap {
  background: var(--white);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
  max-width: 1280px;
}

/* Service-type radio group */

/* Form rows */
.form-row {
  display: grid;
  gap: 20px 24px;
  margin-bottom: 20px;
}
.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-row.cols-1 { grid-template-columns: 1fr; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dark);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 400ms ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: var(--accent);
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231F2937' stroke-width='1.5'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 40px;
}
.inquiry-form .form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.inquiry-form .form-submit .btn-line { background: var(--white); }
.inquiry-form .privacy-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}
.inquiry-form .privacy-note a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(74, 111, 165, 0.4);
  text-underline-offset: 3px;
}
.inquiry-form .privacy-note a:hover { text-decoration-color: var(--accent); }

/* --- Approach (.content-row) — head extends content-row pattern --- */
.content-row-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}
.content-row-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 1.4em 0;
  max-width: 62ch;
}
.content-row-body p:last-child { margin-bottom: 0; }

/* --- Coverage (Typical Situations) --- */
.situations {
  background: var(--scope-bg, #F9F9F8);
  padding: var(--section-y) clamp(24px, 5vw, 96px);
}
.situations-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.situations-head {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.situations-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}
.situations-intro {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0;
  padding-top: 8px;
}
.situation-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.situation-item {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.situation-item:nth-child(1),
.situation-item:nth-child(2) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 0;
}
.situation-item:nth-child(3),
.situation-item:nth-child(4) {
  padding-right: 0;
}
.situation-item:nth-child(2),
.situation-item:nth-child(4) {
  border-bottom: none;
}
.situation-kicker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.situation-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.situation-item p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}

/* --- Numbers (editorial stats) --- */
.numbers {
  background: var(--numbers-bg, #EFEEEC);
  color: var(--text-dark);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.numbers-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.numbers-item {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  padding-top: clamp(20px, 2vw, 32px);
}
.numbers-num {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: block;
  white-space: nowrap;
}
.numbers-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}

/* --- Capability (single statement row) --- */
.capability {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.capability-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.capability-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}
.capability-body p {
  font-family: var(--font-body);
  font-size: clamp(16.5px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  max-width: 62ch;
}
.capability-tags {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 12px;
}

/* --- Knowledge Row (Definition) --- */
.knowledge-row {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.knowledge-row-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.knowledge-row-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}
.knowledge-row-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0 0 1.4em 0;
  max-width: 62ch;
}
.knowledge-row-body p:last-child { margin-bottom: 0; }

/* --- Knowledge Compare (Wet vs Dry Lease) --- */
.knowledge-compare {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.knowledge-compare-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.knowledge-compare-head {
  margin-bottom: clamp(48px, 5vw, 80px);
  max-width: 80ch;
}
.knowledge-compare-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}
.knowledge-compare .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.knowledge-compare .compare-col {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.knowledge-compare .compare-col:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 0;
}
.knowledge-compare .compare-col:last-child {
  padding-right: 0;
}
.knowledge-compare .compare-kicker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.knowledge-compare .compare-col h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.knowledge-compare .compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.knowledge-compare .compare-list li {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.6;
  color: var(--text-dark);
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.knowledge-compare .compare-list li:first-child { border-top: 0; padding-top: 0; }
.knowledge-compare .compare-list li:last-child { padding-bottom: 0; }
.knowledge-compare .compare-list strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

/* --- Context (Photo + Text) --- */
.context {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.context-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) 1.3fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: stretch;
}
.context-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: #2A3849;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.context-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0px, 2vw, 24px) 0;
}
.context-body h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 24px;
  max-width: 16ch;
}
.context-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 1.4em 0;
  max-width: 56ch;
}
.context-body p:last-child { margin-bottom: 0; }

/* --- FAQ section --- */
.faq-section {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.faq-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.faq-head {
  margin-bottom: clamp(48px, 5vw, 80px);
}
.faq-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  max-width: 16ch;
  margin: 0;
}
.faq-list {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-width: 1100px;
}
.faq-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-width: none;
}
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 400;
  color: var(--text-dark);
  user-select: none;
  transition: color 400ms ease;
}
.faq-q:hover { color: var(--accent); }
.faq-toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 600ms ease;
}
.faq-toggle::before {
  top: 7.5px;
  left: 0;
  width: 16px;
  height: 1px;
}
.faq-toggle::after {
  top: 0;
  left: 7.5px;
  width: 1px;
  height: 16px;
}
.faq-item.open .faq-toggle::after { transform: scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 600ms ease, padding 600ms ease;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding: 0 0 32px 0;
}
.faq-a p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 70ch;
  margin: 0;
  padding-right: 48px;
}

/* --- btn-line (Mockup Style — Submit + CTA) --- */
.inquiry-form .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 16px 28px;
  border: 1px solid var(--text-dark);
  position: relative;
  overflow: hidden;
  transition: color 400ms ease;
  background: var(--white);
  cursor: pointer;
}
.inquiry-form .btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms ease;
  z-index: 0;
}
.inquiry-form .btn-line > * { position: relative; z-index: 1; }
.inquiry-form .btn-line:hover { color: var(--white); }
.inquiry-form .btn-line:hover::before { transform: scaleX(1); }
.inquiry-form .btn-line svg { width: 13px; height: 13px; transition: transform 600ms ease; }
.inquiry-form .btn-line:hover svg { transform: translateX(4px); }

/* ==========================================================================
   404 Page (Fix 54) — editorial-premium not-found template
   Klassen-Namespace .nf-* exklusiv für 404.php (Fix 54).
   Self-contained Block: Defaults + eigene Responsive-Breakpoints am Ende,
   da keine Selektor-Kollision mit anderen Mobile-Overrides (Namespace
   ist 404-only).
   ========================================================================== */

.nf-section {
  background: var(--white);
  padding: clamp(100px, 12vw, 180px) clamp(40px, 6vw, 96px) clamp(80px, 9vw, 140px);
  display: flex;
  align-items: center;
  min-height: 60vh;
}

.nf-inner {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(60px, 8vw, 140px);
  align-items: start;
}

/* Content (left column) */
.nf-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.nf-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.nf-eyebrow-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0;
}

.nf-headline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-bottom: 32px;
}
.nf-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.nf-lede {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 480px;
}

/* Links (right column) */
.nf-links {
  border-top: 1px solid var(--hairline);
}
.nf-link {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text-dark);
  transition: color 250ms ease, padding-left 350ms ease;
}
.nf-link:hover {
  color: var(--accent);
  padding-left: 8px;
}
.nf-link-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--accent);
}
.nf-link-body { display: flex; flex-direction: column; gap: 4px; }
.nf-link-label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.nf-link-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
.nf-link-arrow {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--accent);
  transition: transform 350ms ease;
}
.nf-link:hover .nf-link-arrow {
  transform: translateX(6px);
}

/* Responsive */
@media (max-width: 1100px) {
  .nf-inner { grid-template-columns: 1fr; gap: 80px; }
}
@media (max-width: 768px) {
  .nf-section { padding: 80px clamp(24px, 5vw, 40px) 60px; }
  .nf-headline { font-size: 44px; }
  .nf-lede { font-size: 16px; }
  .nf-link { grid-template-columns: 32px 1fr auto; gap: 16px; padding: 22px 0; }
  .nf-link-num { font-size: 16px; }
  .nf-link-label { font-size: 12px; letter-spacing: 2px; }
  .nf-link-desc { font-size: 13px; }
}

/* ==========================================================================
   ACMI Mockup Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1100px) and (min-width: 961px) {
  .form-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .context-inner { grid-template-columns: 1fr; gap: 32px; }
  .context-image { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   WANTED MOCKUP V1.3 PATTERNS (Lieferung 23)
   Markup folgt Mockup Wanted V1.3 1:1.
   ========================================================================== */

/* Listings-Section (Section 2) */
.listings-section {
  background: #E8EDF1;
  padding: var(--section-y, clamp(80px, 11vw, 180px)) clamp(24px, 5vw, 96px);
}
.listings-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.listings-head {
  margin-bottom: clamp(48px, 5vw, 80px);
  max-width: 80ch;
}
.listings-marker {
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 26px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.listings-head.visible .listings-marker { transform: scaleX(1); }
.listings-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.listings-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}

/* Filter-Tabs (Spec §3.2) */
.filter-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(40px, 4vw, 64px);
  flex-wrap: wrap;
}
.filter-tab {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 12px 22px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 400ms ease, color 400ms ease, background 400ms ease;
}
.filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.filter-tab.active {
  border-color: var(--accent);
  color: var(--white);
  background: var(--accent);
}

/* Listings-List (Mockup V1.3 unified pattern) */
.listings-list {
  display: flex;
  flex-direction: column;
}
.listing-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px);
  background: #FBFCFD;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: -1px;
  position: relative;
  transition: background 600ms ease;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.listing-item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 600ms ease;
}
.listing-item.is-link:hover { background: #FFFFFF; }
.listing-item.is-link:hover::before { transform: scaleY(1); }
.listing-item.is-link:hover h3 { color: var(--accent); }

.listing-cat-wrap { display: flex; }
.listing-cat {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid var(--accent);
  background: transparent;
  white-space: nowrap;
  align-self: flex-start;
}

.listing-info h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 10px;
  transition: color 400ms ease;
}
.listing-desc {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 70ch;
  margin: 0;
}
.listing-desc p { margin: 0 0 0.8em 0; }
.listing-desc p:last-child { margin: 0; }
.listing-desc strong { color: var(--text-dark); font-weight: 600; }

.listing-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  padding-top: 4px;
}
.listing-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.listing-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.18);
}
.listing-item.closed { opacity: 0.55; pointer-events: none; }
.listing-item.closed .listing-status .dot {
  background: var(--text-muted);
  box-shadow: none;
}

.listing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 12px 20px;
  border: 1px solid var(--text-dark);
  position: relative;
  overflow: hidden;
  transition: color 400ms ease;
  background: transparent;
}
.listing-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms ease;
  z-index: 0;
}
.listing-cta > * { position: relative; z-index: 1; }
.listing-item.is-link:hover .listing-cta { color: var(--white); }
.listing-item.is-link:hover .listing-cta::before { transform: scaleX(1); }
.listing-cta svg {
  width: 12px; height: 12px;
  transition: transform 600ms ease;
}
.listing-item.is-link:hover .listing-cta svg { transform: translateX(4px); }

.listing-item.is-hidden { display: none; }

/* Empty-State (Spec §3.5) */
.listings-empty {
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.listings-empty p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}
.listings-empty.hidden { display: none; }
.listings-empty .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 16px 28px;
  border: 1px solid var(--text-dark);
  position: relative;
  overflow: hidden;
  transition: color 400ms ease;
  background: transparent;
  text-decoration: none;
}
.listings-empty .btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms ease;
  z-index: 0;
}
.listings-empty .btn-line > * { position: relative; z-index: 1; }
.listings-empty .btn-line:hover { color: var(--white); }
.listings-empty .btn-line:hover::before { transform: scaleX(1); }
.listings-empty .btn-line svg { width: 13px; height: 13px; transition: transform 600ms ease; }
.listings-empty .btn-line:hover svg { transform: translateX(4px); }

/* Listings footer meta */
.listings-meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: clamp(24px, 3vw, 40px);
}

/* Permanent Acquisition Interest (Section 3) */
.acquisition {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
}
.acquisition-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.acquisition-head {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.acquisition-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}
.acquisition-intro {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0;
  padding-top: 8px;
}
.acquisition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.acquisition-item {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.acquisition-item:nth-child(1),
.acquisition-item:nth-child(2) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 0;
}
.acquisition-item:nth-child(3),
.acquisition-item:nth-child(4) {
  padding-right: 0;
}
.acquisition-item:nth-child(2),
.acquisition-item:nth-child(4) {
  border-bottom: none;
}
.acq-kicker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.acquisition-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.acquisition-item p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}
.acquisition-note {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  color: var(--text-muted);
  max-width: 70ch;
}

/* ==========================================================================
   COMPANY MOCKUP V1.3 PATTERNS (Lieferung 25)
   Markup folgt Mockup Company V1.3 1:1.
   ========================================================================== */

/* Background-Section (Section 2: Three-Phase Story) */
.background-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.background-head {
  margin-bottom: clamp(56px, 6vw, 96px);
  max-width: 80ch;
}
.background-marker {
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 26px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.background-head.visible .background-marker { transform: scaleX(1); }
.background-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.background-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  color: var(--text-dark);
  font-style: italic;
  margin: 0;
  max-width: 60ch;
}

/* Phases — 3 columns with hairlines */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
.phase {
  padding: clamp(40px, 4vw, 64px) clamp(28px, 3vw, 44px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  border-right: 1px solid rgba(0, 0, 0, 0.09);
  position: relative;
}
.phase:last-child { border-right: none; padding-right: 0; }
.phase:first-child { padding-left: 0; }
.phase-kicker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: block;
}
.phase h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 18px;
}
.phase-period {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: block;
}
.phase p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
.phase p strong { color: var(--text-dark); font-weight: 600; }

/* Closing-Statement (italic) under phases */
.background-conclusion {
  margin-top: clamp(56px, 6vw, 96px);
  font-family: var(--font-body);
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.5;
  color: var(--text-dark);
  max-width: 50ch;
  font-style: italic;
  position: relative;
}
.background-conclusion::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 28px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.background-conclusion.visible::before { transform: scaleX(1); }

/* Capability (Section 3: Aircraft & Engine Trading) */
.capability-accent {
  width: 64px;
  height: 1px;
  background: rgba(107, 139, 191, 0.5);
  margin-top: 18px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1200ms cubic-bezier(0.65, 0, 0.35, 1) 400ms;
}
.capability-head.visible .capability-accent { transform: scaleX(1); }

/* Additional Services (Section 4) */
.additional-section {
  background: var(--white);
  padding: var(--section-y-compact, clamp(56px, 7vw, 110px)) clamp(24px, 5vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.additional-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.additional-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
  max-width: 18ch;
}
.additional-body {
  padding-top: 8px;
}
.additional-body p {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}

/* ==========================================================================
   CONTACT MOCKUP V1.2 PATTERNS (Lieferung 27)
   Markup folgt Mockup Contact V1.2 1:1.
   ========================================================================== */

/* Contact-Section (Section 2: Visit-Card + Form) */
.contact-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.contact-head {
  margin-bottom: clamp(48px, 5vw, 80px);
  max-width: 80ch;
}
.contact-marker {
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 26px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.contact-head.visible .contact-marker { transform: scaleX(1); }
.contact-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.contact-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}

/* Two-column body */
.contact-body {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.6fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* Visit-Card (left column) */
.visit-card {
  background: var(--white);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
}
.visit-card-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}
.visit-card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.visit-card-address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.visit-card-address span { display: block; }
.visit-card-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: baseline;
}
.contact-row-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-row-value {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 16.5px);
  color: var(--text-dark);
}
.contact-row-value a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms ease;
}
.contact-row-value a:hover { border-color: var(--accent); }
.visit-card-note {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Form (right column) */
.contact-form-wrap {
  background: var(--white);
  padding: clamp(40px, 4.5vw, 64px) clamp(28px, 3.5vw, 56px);
}
.contact-form-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.contact-form-wrap h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.contact-form-body {
  display: grid;
  gap: 20px;
}

/* Form-Row (gemeinsam für Contact + ACMI + Fuel) */
.form-row {
  display: grid;
  gap: 20px;
}
.form-row.cols-2 {
  grid-template-columns: 1fr 1fr;
}

/* Form-Field (Underline-Style — Contact Spec §3.3) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-field label .required {
  color: var(--accent);
  margin-left: 4px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1vw, 16px);
  color: var(--text-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  font-weight: 400;
  transition: border-color 400ms ease;
  outline: none;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236B7280' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px 6px;
  padding-right: 24px;
  cursor: pointer;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}
.form-field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.55;
}

/* Honeypot */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit zone (Contact-spec) — kein border-top, nur margin-top.
   ACMI nutzt .inquiry-form .form-submit (höhere Specificity, eigene Regel). */
.form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(20px, 2.5vw, 36px);
}
.form-privacy {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 36ch;
}
.form-privacy a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms ease;
}
.form-privacy a:hover { border-color: var(--accent); }

/* Send Message Button (line-button im weißen Card-Bg) */
.contact-form-wrap .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 16px 28px;
  border: 1px solid var(--text-dark);
  position: relative;
  overflow: hidden;
  transition: color 400ms ease;
  background: transparent;
  cursor: pointer;
}
.contact-form-wrap .btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms ease;
  z-index: 0;
}
.contact-form-wrap .btn-line > * { position: relative; z-index: 1; }
.contact-form-wrap .btn-line:hover { color: var(--white); }
.contact-form-wrap .btn-line:hover::before { transform: scaleX(1); }
.contact-form-wrap .btn-line svg { width: 13px; height: 13px; transition: transform 600ms ease; }
.contact-form-wrap .btn-line:hover svg { transform: translateX(4px); }

/* ==========================================================================
   AIRCRAFT PAGE — PREMIUM V1.0 PATTERNS (Lieferung 35)
   Editorial-Stil exklusiv für Aircraft-Seite. .ac-* Namespace damit es nicht
   mit theme-weiten Klassen (.listing-card, .content-row) kollidiert die
   noch von Engines/ACMI/etc. genutzt werden. Off-White-Stufung als
   Section-Rhythmus. Section-Tags 01-05 als italic-Index. H2 mit italic-em
   Akzent in --accent als wiederkehrendes Pattern.
   ========================================================================== */

/* Aircraft-spezifische Tokens (Lieferung 36: Blau-Grau Aviation-Palette) */
.ac-section {
  --ac-offwhite: #E8EDF1;       /* Approach — Steel-Blue-Grey */
  --ac-offwhite-dim: #D5DEE5;   /* Coverage + CTA — tiefere Stufe für klaren Sprung */
  --ac-offwhite-faint: #F2F5F8; /* Listing-Hover — sehr zarte Stufe heller als Body */
  --ac-text-mid: #4A5568;
  --ac-hairline: rgba(31, 41, 55, 0.10);
  --ac-hairline-strong: rgba(31, 41, 55, 0.20);
  --ac-hairline-dark: rgba(255, 255, 255, 0.15);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--ac-offwhite);
}

.ac-section--white { background: var(--white); }
.ac-section--offwhite { background: var(--ac-offwhite); }
.ac-section--dim { background: var(--ac-offwhite-dim); }
.ac-section--dark {
  background: var(--about-bg);
  color: var(--white);
}

.ac-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* --- Section-Tag mit italic-Index (01-05) --- */
.ac-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.ac-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.ac-section--dark .ac-section-tag {
  color: rgba(255, 255, 255, 0.55);
}

.ac-section--dark .ac-section-tag::before {
  background: var(--accent-light);
}

.ac-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}

.ac-section--dark .ac-section-tag-num { color: var(--accent-light); }

/* ==========================================================================
   01 AVAILABILITY
   ========================================================================== */
.ac-availability-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(72px, 7vw, 120px);
}

.ac-availability-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}

.ac-availability-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.ac-availability-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 6px;
}

.ac-availability-status {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ac-availability-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* Pulse-Ring — wiederverwendet wnPulse keyframes für Konsistenz mit Wanted. */
.ac-availability-status::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: wnPulse 2.4s ease-out infinite;
  pointer-events: none;
}

.ac-availability-lead {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0;
}

/* Listing list (Aircraft-spezifisch).
   Fix 44: border-top entfernt — war ursprünglich Trennlinie zwischen
   Header und Listings, ist mit den Filter-Pills (Fix 43) drinnen
   überflüssig geworden und wirkte als unschöne Linie über den Tabs. */
.ac-listing-list {
  /* no border */
}

/* DESKTOP — altes 3-Spalten-Grid. Mobile-Override unten in @media. */
.ac-listing {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: clamp(32px, 3.5vw, 64px);
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--ac-hairline);
  transition: background 500ms ease, padding 400ms ease;
}

.ac-listing:hover {
  background: var(--ac-offwhite-faint);
  padding-left: 24px;
  padding-right: 24px;
}

.ac-listing-top {
  display: contents;
}

.ac-listing-badge {
  display: none;
}

.ac-listing-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ac-listing-body h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 6px;
}

.ac-listing-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.ac-listing-body strong {
  color: var(--ac-text-mid);
  font-weight: 500;
}

/* DESKTOP CTA — schlanker Text-Link mit Border-Bottom + slidender Pfeil */
.ac-listing-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: color 300ms ease;
}

.ac-listing-cta::before {
  display: none;
}

.ac-listing-cta > span:first-child {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.ac-listing-cta:hover {
  color: var(--accent);
  letter-spacing: 2.4px;
}

.ac-listing-cta-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  overflow: visible;
}

.ac-listing-cta-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 300ms ease;
  display: block;
}

.ac-listing-cta-arrow svg:nth-child(2) {
  display: none;
}

.ac-listing-cta:hover .ac-listing-cta-arrow svg:first-child {
  transform: translateX(4px);
}

.ac-listing--empty p {
  font-style: italic;
  color: var(--text-muted);
  font-size: 16px;
}

.ac-listing-meta {
  margin-top: clamp(40px, 4vw, 64px);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: right;
}

/* ==========================================================================
   02 APPROACH
   ========================================================================== */
.ac-approach-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.ac-approach-head { grid-column: 1 / span 5; }
.ac-approach-body { grid-column: 7 / span 5; padding-top: 14px; }

.ac-approach-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin: 0;
}

.ac-approach-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.ac-approach-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ac-text-mid);
  margin: 0 0 20px;
}

.ac-approach-body p:last-child { margin-bottom: 0; }

.ac-approach-body p strong {
  color: var(--text-dark);
  font-weight: 500;
}

/* ==========================================================================
   03 COVERAGE (Premium V1.2 Pattern)
   ========================================================================== */
.ac-coverage-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(80px, 8vw, 140px);
}

.ac-coverage-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}

.ac-coverage-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.ac-coverage-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}

.ac-coverage-aside-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cm-text-mid);
}

.ac-coverage-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  margin: 0;
}

.ac-coverage-grid {
  display: grid;
  gap: 0;
}

.ac-coverage-item {
  position: relative;
  padding: clamp(40px, 4vw, 72px) 0;
  border-top: 1px solid var(--ac-hairline);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(32px, 4vw, 80px);
  transition: border-color 600ms cubic-bezier(0.65, 0, 0.35, 1),
              background-color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ac-coverage-item:last-child {
  border-bottom: 1px solid var(--ac-hairline);
}

/* Hairlines beim Hover ausblenden — Editorial-Look konsistent mit
   Engines Section 03 und ACMI Coverage. */
.ac-coverage-item:hover,
.ac-coverage-item:hover + .ac-coverage-item {
  border-top-color: transparent;
}
.ac-coverage-item:last-child:hover {
  border-bottom-color: transparent;
}

.ac-coverage-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Vertikaler Akzent-Strich links — wächst beim Hover von der Mitte aus
   auf volle Höhe (scaleY 0 → 1). Pattern-konsistent. */
.ac-coverage-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ac-coverage-item:hover::before {
  transform: scaleY(1);
}

.ac-coverage-item:hover .ac-coverage-index {
  color: var(--accent);
  transform: translateX(8px);
}

.ac-coverage-item:hover .ac-coverage-tags li {
  border-color: var(--accent);
  color: var(--text-dark);
}

.ac-coverage-index {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 8vw, 124px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ac-hairline-strong);
  align-self: start;
  transition: color 700ms ease, transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ac-coverage-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
}

.ac-coverage-category {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  padding-bottom: 8px;
  display: block;
  position: relative;
}
/* Animated Hairline unter Category — gezeichnet beim Hover des Items
   (scaleX 0 → 1). 48px breit, konsistent. */
.ac-coverage-category::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ac-coverage-item:hover .ac-coverage-category::after {
  transform: scaleX(1);
}

.ac-coverage-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.ac-coverage-item p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0;
}

.ac-coverage-tags-wrap { padding-top: 4px; }

.ac-coverage-tags-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ac-hairline);
  display: block;
}

.ac-coverage-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.ac-coverage-tags li {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px;
  border: 1px solid var(--ac-hairline-strong);
  transition: border-color 400ms ease, color 400ms ease;
  white-space: nowrap;
}

.ac-coverage-item--feature {
  padding: clamp(56px, 5.5vw, 96px) 0;
}

.ac-coverage-item--feature h3 {
  font-size: clamp(28px, 2.8vw, 40px);
}

.ac-coverage-item--feature p {
  font-size: 17px;
  max-width: 50ch;
}

/* ==========================================================================
   04 METHOD (dark editorial rupture)
   ========================================================================== */
.ac-method-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.ac-method-head { grid-column: 1 / span 6; }
.ac-method-body { grid-column: 8 / span 5; padding-top: 14px; }

.ac-method-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--white);
  margin: 0;
}

.ac-method-headline em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 300;
}

.ac-method-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.ac-method-body p strong {
  color: var(--white);
  font-weight: 500;
}

.ac-method-rule {
  margin-top: clamp(48px, 5vw, 80px);
  border-top: 1px solid var(--ac-hairline-dark);
  padding-top: clamp(32px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 80px);
}

.ac-method-pill {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-method-pill-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.ac-method-pill-value {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   05 CTA
   ========================================================================== */
.ac-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.ac-cta-tag {
  justify-content: center;
}

.ac-cta-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
}

.ac-cta-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.ac-cta-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 40px;
}

/* Premium-Button: Sweep-Layer + Arrow-Slide + Letter-Spacing-Open
   Pattern aus Editorial-Long-Read-Sites. Hover: Accent-Blau-Sweep,
   Schrift bleibt weiß aber heller/strahlender. */
.ac-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Sweep-Layer (kommt von links beim Hover) — Accent-Blau */
.ac-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

.ac-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}

.ac-cta-button:hover::before {
  transform: translateX(0);
}

/* Arrow-Slide-Animation: aktueller Pfeil schiebt raus, neuer schiebt rein */
.ac-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}

.ac-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ac-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}

.ac-cta-button:hover .ac-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}

.ac-cta-button:hover .ac-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* Arrow-Slide-Animation: aktueller Pfeil schiebt raus, neuer schiebt rein */
.ac-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}

.ac-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ac-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}

.ac-cta-button:hover .ac-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}

.ac-cta-button:hover .ac-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   AIRCRAFT — FILTER TABS + TRANSACTION BADGES (Fix 43)
   Pills im Wanted-Page-Pattern (.wn-filter-tab) für Sale/Dry Lease/ACMI.
   Listing-Cards bekommen kleine Transaction-Type-Badges statt "Available".
   ========================================================================== */

.ac-filter-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: clamp(24px, 2vw, 32px);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ac-filter-tabs::-webkit-scrollbar { display: none; }

.ac-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(20px, 2vw, 28px);
  background: rgba(74, 111, 165, 0.05);
  border: 1px solid rgba(74, 111, 165, 0.14);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              background 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ac-filter-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(107, 139, 191, 0.18);
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.ac-filter-tab:hover:not(.active)::before { transform: translateX(0); }
.ac-filter-tab > * { position: relative; z-index: 1; }
.ac-filter-tab:hover:not(.active) {
  color: var(--text-dark);
  border-color: rgba(74, 111, 165, 0.32);
}
.ac-filter-tab.active {
  color: var(--white);
  background: var(--header-bg);
  border-color: var(--header-bg);
}
.ac-filter-tab.active::before { display: none; }

.ac-filter-tab-count {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  transition: color 400ms ease;
}
.ac-filter-tab:hover:not(.active) .ac-filter-tab-count { color: var(--text-dark); }
.ac-filter-tab.active .ac-filter-tab-count { color: var(--accent-light, #8FA8C9); }

/* Transaction-Type-Badges auf den Listing-Cards.
   Ersetzt "Available" wenn mindestens ein Transaction-Type gesetzt ist.
   Stack von 1-N kleinen Pills, alle in Akzent-Blau-Outline.
   Fix 45: Pill-Badge-Pattern durch Eyebrow ersetzt (siehe oben).
   Klassen .ac-listing-tx-badges/.ac-listing-tx-badge entfernt. */

/* Fix 47: Transaction-Type-Badges als Pillchen, positioniert in der
   Body-Spalte oberhalb des Titles. Kombiniert Badge-Optik (Fix 43) mit
   sauberer Position (Fix 45) — keine Stapelung in der schmalen linken
   Spalte mehr, mehrere Badges horizontal nebeneinander. */
.ac-listing-tx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.ac-listing-tx-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  border: 1px solid var(--accent, #4A6FA5);
  background: rgba(74, 111, 165, 0.06);
  line-height: 1;
}

/* Fix 45: Filter-Empty-State (analog Wanted-Page). JS toggelt [hidden]
   basierend auf visibleCount aus filter-tabs.js. */
.ac-listings-empty {
  text-align: center;
  padding: clamp(72px, 7vw, 120px) 24px;
  border-bottom: 1px solid var(--ac-hairline);
}
.ac-listings-empty.hidden,
.ac-listings-empty[hidden] {
  display: none;
}
.ac-listings-empty p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.ac-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--accent, #4A6FA5);
  transition: background 0.25s ease;
}
.ac-btn-line:hover {
  background: rgba(74, 111, 165, 0.06);
}
.ac-btn-line svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.ac-btn-line:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   ENGINES PAGE — PREMIUM V1.0 PATTERNS (Lieferung 40)
   Editorial-Stil exklusiv für Engines-Seite. .en-* Namespace, kollidiert
   nicht mit theme-weiten Klassen oder mit .ac-* (Aircraft). Bewusst andere
   visuelle Form als Aircraft: 02 Capability ist 12-col-Spread mit italic
   closing-pull-quote, 03 Platforms mit großen italic Indices + Tech-Specs,
   04 Components mit Background-Indices als Skulptur und animated underline.
   ========================================================================== */

/* Engines-spezifische Tokens (gleiche Blau-Grau-Palette wie Aircraft) */
.en-section {
  --en-offwhite: #E8EDF1;
  --en-offwhite-dim: #D5DEE5;
  --en-offwhite-faint: #F2F5F8;
  --en-text-mid: #4A5568;
  --en-hairline: rgba(31, 41, 55, 0.10);
  --en-hairline-strong: rgba(31, 41, 55, 0.20);
  --en-hairline-dark: rgba(255, 255, 255, 0.15);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--en-offwhite);
}

.en-section--white { background: var(--white); }
.en-section--offwhite { background: var(--en-offwhite); }
.en-section--dim { background: var(--en-offwhite-dim); }
.en-section--dark {
  background: var(--about-bg);
  color: var(--white);
}

.en-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* --- Section-Tag mit italic-Index (01-05) --- */
.en-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.en-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.en-section--dark .en-section-tag {
  color: rgba(255, 255, 255, 0.55);
}

.en-section--dark .en-section-tag::before {
  background: var(--accent-light);
}

.en-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}

.en-section--dark .en-section-tag-num { color: var(--accent-light); }

/* ==========================================================================
   01 AVAILABILITY (Listing-Pattern wie Aircraft)
   ========================================================================== */
.en-availability-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(72px, 7vw, 120px);
}

.en-availability-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}

.en-availability-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.en-availability-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 6px;
}

.en-availability-status {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.en-availability-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* Pulse-Ring — gleicher Effekt wie .wn-pulse-dot auf Wanted-Seite.
   Expanding circle 16px → 40px via scale 0.5 → 2.5, opacity-fade.
   Wiederverwendet die existing wnPulse keyframes für Konsistenz. */
.en-availability-status::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: wnPulse 2.4s ease-out infinite;
  pointer-events: none;
}

.en-availability-lead {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0;
}

.en-listing-list {
  /* no border — siehe .ac-listing-list: doppelte Linie unter den Filter-Tabs wäre unschön */
}

/* ============================================================================
   FILTER TABS — Engines / Components (Premium Tab-Bar, analog wn-filter-tabs)
   ============================================================================ */
.en-filter-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: clamp(24px, 2vw, 32px);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.en-filter-tabs::-webkit-scrollbar { display: none; }

.en-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(20px, 2vw, 28px);
  background: rgba(74, 111, 165, 0.05);
  border: 1px solid rgba(74, 111, 165, 0.14);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              background 500ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-filter-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(107, 139, 191, 0.18);
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.en-filter-tab:hover:not(.active)::before { transform: translateX(0); }
.en-filter-tab > * { position: relative; z-index: 1; }

.en-filter-tab:hover:not(.active) {
  color: var(--text-dark);
  border-color: rgba(74, 111, 165, 0.32);
}

.en-filter-tab.active {
  color: var(--white);
  background: var(--header-bg);
  border-color: var(--header-bg);
}
.en-filter-tab.active::before { display: none; }
.en-filter-tab::after { display: none; }

.en-filter-tab-count {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.en-filter-tab.active .en-filter-tab-count { color: var(--accent-light); }

/* ============================================================================
   COMPONENT LISTING DETAILS — P/N + Condition/Capability Pills
   ============================================================================ */
.en-listing-pn {
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 4px 0 6px;
}
.en-listing-pn strong {
  color: var(--text-dark);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

.en-listing-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.en-listing-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.en-listing-tag-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 8px;
}
.en-listing-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Condition pills — accent-blau */
.en-listing-pill--condition {
  background: rgba(74, 111, 165, 0.08);
  border-color: rgba(74, 111, 165, 0.2);
  color: var(--accent);
}
/* Release-Docs pills — neutraler Anthrazit-Steel */
.en-listing-pill--release {
  background: rgba(54, 69, 88, 0.06);
  border-color: rgba(54, 69, 88, 0.18);
  color: var(--header-bg);
}

/* Alternate P/N suffix (kleiner, muted neben Hauptnummer) */
.en-listing-pn-alt {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
  font-size: 12.5px;
}

/* Inline-Meta-Zeile (Quantity · Application) */
.en-listing-meta-inline {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 4px 0 8px;
}
.en-listing-meta-inline strong {
  color: var(--text-dark);
  font-weight: 500;
}
.en-listing-meta-sep {
  margin: 0 6px;
  color: var(--text-muted);
}

/* Component pills auf single-available.php (Detail Spec Sheet) */
.sa-spec-group--pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sa-pill-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 8px;
}
.sa-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sa-pill--condition {
  background: rgba(74, 111, 165, 0.08);
  border-color: rgba(74, 111, 165, 0.2);
  color: var(--accent);
}
.sa-pill--release {
  background: rgba(54, 69, 88, 0.06);
  border-color: rgba(54, 69, 88, 0.18);
  color: var(--header-bg);
}

/* Filter-Empty-State — eingeblendet wenn aktiver Filter keine Items hat */
.en-listings-empty[hidden] { display: none; }
.en-listings-empty:not([hidden]) { display: grid; }

/* DESKTOP — altes 3-Spalten-Grid (wie vor Variante B). 
   Tag links, Body Mitte, CTA rechts. Schlanker Text-Link mit
   border-bottom + slidender Pfeil. Mobile-Override unten in @media. */
.en-listing {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: clamp(32px, 3.5vw, 64px);
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--en-hairline);
  transition: background 500ms ease, padding 400ms ease;
}

.en-listing:hover {
  background: var(--en-offwhite-faint);
  padding-left: 24px;
  padding-right: 24px;
}

/* Top-Row: auf Desktop display:contents damit Tag direkt Grid-Child wird.
   Badge wird auf Desktop ausgeblendet (Mobile-only). */
.en-listing-top {
  display: contents;
}

.en-listing-badge {
  display: none;
}

.en-listing-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.en-listing-body h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 6px;
}

.en-listing-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.en-listing-body strong {
  color: var(--en-text-mid);
  font-weight: 500;
}

/* DESKTOP CTA — altes schlankes Style: Text-Link mit Border-Bottom unter
   "Inquire Now", neben dran ein Pfeil der beim Hover slidet. Kein Button,
   kein Sweep, kein Background. */
.en-listing-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: color 300ms ease;
}

.en-listing-cta::before {
  display: none;
}

.en-listing-cta > span:first-child {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.en-listing-cta:hover {
  color: var(--accent);
  letter-spacing: 2.4px;
}

/* Pfeil-Wrapper: auf Desktop nur erstes SVG zeigen, zweites versteckt */
.en-listing-cta-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  overflow: visible;
}

.en-listing-cta-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 300ms ease;
  display: block;
}

.en-listing-cta-arrow svg:nth-child(2) {
  display: none;
}

.en-listing-cta:hover .en-listing-cta-arrow svg:first-child {
  transform: translateX(4px);
}

.en-listing--empty p {
  font-style: italic;
  color: var(--text-muted);
  font-size: 16px;
}

.en-listing-meta {
  margin-top: clamp(40px, 4vw, 64px);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: right;
}

/* ==========================================================================
   02 CAPABILITY — 12-Col Spread + italic closing pull-quote
   ========================================================================== */
.en-capability-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.en-capability-head { grid-column: 1 / span 5; }
.en-capability-body { grid-column: 7 / span 5; padding-top: 14px; }

.en-capability-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin: 0;
}

.en-capability-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.en-capability-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--en-text-mid);
  margin: 0 0 20px;
}

.en-capability-body p:last-child { margin-bottom: 0; }

.en-capability-body p strong {
  color: var(--text-dark);
  font-weight: 500;
}

.en-capability-closing {
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--en-hairline-strong);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--en-text-mid);
  max-width: 60ch;
}

/* ==========================================================================
   03 ENGINE PLATFORMS — Coverage-Premium-Pattern (große Indices, asymmetrisch)
   ========================================================================== */
.en-platforms-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(80px, 8vw, 140px);
}

.en-platforms-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}

.en-platforms-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.en-platforms-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}

.en-platforms-aside-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cm-text-mid);
}

.en-platforms-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  margin: 0;
}

.en-platforms-grid { display: grid; gap: 0; }

.en-platform-item {
  position: relative;
  padding: clamp(40px, 4vw, 72px) 0;
  border-top: 1px solid var(--en-hairline);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(32px, 4vw, 80px);
  transition: border-color 600ms cubic-bezier(0.65, 0, 0.35, 1),
              background-color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-platform-item:last-child { border-bottom: 1px solid var(--en-hairline); }

/* Hairlines beim Hover ausblenden — sowohl die border-top des hovered Items
   als auch die border-top des direkt folgenden Items. Wirkt cleaner mit
   dem dezenten Background-Fade. */
.en-platform-item:hover,
.en-platform-item:hover + .en-platform-item {
  border-top-color: transparent;
}

.en-platform-item:last-child:hover {
  border-bottom-color: transparent;
}

/* Dezenter Background-Fade bei Hover — rgba 0.25 (vorher war 0.55 zu hart).
   Subtil sichtbar, kein hartes Card-Pop. Plus vertikaler Akzent-Strich
   (siehe ::before) als klare Hover-Indikation. */
.en-platform-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Vertikaler Akzent-Strich links neben dem Item — Editorial-Marker
   wie auf Magazine-Doppelseiten. Wächst beim Hover von der Mitte aus
   nach oben und unten auf volle Höhe (scaleY 0 → 1). 2px breit,
   in --accent. */
.en-platform-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.en-platform-item:hover::before {
  transform: scaleY(1);
}

.en-platform-item:hover .en-platform-index {
  color: var(--accent);
  transform: translateX(8px);
}

.en-platform-item:hover .en-platform-fact {
  color: var(--accent);
}

.en-platform-index {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 8vw, 124px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--en-hairline-strong);
  align-self: start;
  transition: color 700ms ease, transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-platform-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
}

.en-platform-category {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
  position: relative;
  padding-bottom: 8px;
}

/* Animated Hairline unter dem Kicker — Editorial-Marker wie in
   Components-Section 04. Wird beim Hover des Items von links nach rechts
   gezeichnet (scaleX 0 → 1). 48px breit, 1px Hairline in --accent. */
.en-platform-category::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-platform-item:hover .en-platform-category::after {
  transform: scaleX(1);
}

.en-platform-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.en-platform-item p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0;
}

/* Tech-Specs als typografische Fakten */
.en-platform-specs {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.en-platform-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--en-hairline);
}

.en-platform-spec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.en-platform-spec-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.en-platform-fact {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--text-dark);
  line-height: 1.3;
  transition: color 400ms ease;
}

.en-platform-item--feature {
  padding: clamp(56px, 5.5vw, 96px) 0;
}

.en-platform-item--feature h3 {
  font-size: clamp(28px, 2.8vw, 40px);
}

.en-platform-item--feature p {
  font-size: 17px;
  max-width: 50ch;
}

/* ==========================================================================
   04 COMPONENTS & PARTS — Asymmetric 2x2 grid, background-indices,
   hover-line gesture. Bewusst anderer Premium-Stil als Platforms.
   ========================================================================== */
.en-components-header {
  margin-bottom: clamp(40px, 4vw, 56px);
}

.en-components-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  max-width: 18ch;
  margin: 0;
}

.en-components-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.en-components-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--en-text-mid);
  max-width: 56ch;
  margin: 0 0 clamp(56px, 6vw, 88px);
}

/* Asymmetric 2x2 grid — atmende Cells statt Border-Käfig */
.en-components-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 4vw, 64px) clamp(48px, 5vw, 80px);
}

.en-component-cell {
  position: relative;
  padding: clamp(40px, 3.5vw, 56px) 0 clamp(40px, 3.5vw, 56px) clamp(48px, 4vw, 72px);
  border-top: 1px solid var(--en-hairline-strong);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: padding 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Background-Index als typografische Skulptur */
.en-component-cell::before {
  content: attr(data-index);
  position: absolute;
  top: clamp(20px, 2vw, 32px);
  left: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--en-hairline-strong);
  transition: color 600ms ease, transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Animated underline beim Hover */
.en-component-cell::after {
  content: "";
  position: absolute;
  top: calc(clamp(40px, 3.5vw, 56px) + 14px + 14px);
  left: clamp(48px, 4vw, 72px);
  width: 64px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-component-cell:hover::before {
  color: var(--accent);
  transform: translateX(-4px);
}

.en-component-cell:hover::after {
  transform: scaleX(1);
}

.en-component-cell:hover h3 {
  color: var(--accent);
}

.en-component-kicker {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.en-component-cell h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0;
  transition: color 500ms ease;
}

.en-component-cell p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 42ch;
}

/* Closing-Statement mit em-dash-Marker */
.en-components-closing {
  position: relative;
  margin-top: clamp(72px, 6vw, 100px);
  padding-left: clamp(48px, 4vw, 72px);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--en-text-mid);
  max-width: 60ch;
}

.en-components-closing::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
  font-size: 0.9em;
}

/* ==========================================================================
   05 CTA
   ========================================================================== */
.en-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.en-cta-tag {
  justify-content: center;
}

.en-cta-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
}

.en-cta-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.en-cta-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 40px;
}

/* CTA-Button (gleiche Premium-Geste wie Aircraft) */
.en-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

.en-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}

.en-cta-button:hover::before {
  transform: translateX(0);
}

.en-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}

.en-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.en-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}

.en-cta-button:hover .en-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}

.en-cta-button:hover .en-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   ACMI PAGE — PREMIUM V1.0 PATTERNS (Lieferung 42, Option B Kompakt)
   Editorial-Stil exklusiv für ACMI-Seite. .cm-* Namespace.
   7 Sektionen: Inquiry → Approach+Numbers → Coverage+Capability →
   Knowledge (Definition+Comparison dunkler Block) → Context → FAQ → CTA.
   Form-Field-Names + Action savfin_acmi unverändert.
   ========================================================================== */

/* ACMI-spezifische Tokens (gleiche Blau-Grau-Palette wie Aircraft/Engines) */
.cm-section {
  --cm-offwhite: #E8EDF1;
  --cm-offwhite-dim: #D5DEE5;
  --cm-offwhite-faint: #F2F5F8;
  --cm-text-mid: #4A5568;
  --cm-hairline: rgba(31, 41, 55, 0.10);
  --cm-hairline-strong: rgba(31, 41, 55, 0.20);
  --cm-hairline-dark: rgba(255, 255, 255, 0.15);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--cm-offwhite);
}

.cm-section--white { background: var(--white); }
.cm-section--offwhite { background: var(--cm-offwhite); }
.cm-section--dim { background: var(--cm-offwhite-dim); }
.cm-section--dark {
  background: var(--about-bg);
  color: var(--white);
}

.cm-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.cm-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.cm-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.cm-section--dark .cm-section-tag,
.cm-knowledge .cm-section-tag {
  color: rgba(255, 255, 255, 0.55);
}
.cm-section--dark .cm-section-tag::before,
.cm-knowledge .cm-section-tag::before {
  background: var(--accent-light);
}
.cm-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}
.cm-section--dark .cm-section-tag-num,
.cm-knowledge .cm-section-tag-num {
  color: var(--accent-light);
}

/* ==========================================================================
   01 INQUIRY (Two-Step Form, Lieferung 56)
   ========================================================================== */
.cm-inquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

.cm-inquiry-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.cm-inquiry-head h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cm-inquiry-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cm-text-mid);
  max-width: 38ch;
  margin: 0;
}

/* Form Card */
.cm-inquiry-form {
  background: var(--cm-offwhite-faint);
  padding: clamp(40px, 4vw, 56px);
  border: 1px solid var(--cm-hairline);
  border-radius: 2px;
}

/* --- Progress Bar --- */
.cm-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.cm-progress-step {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: color 300ms ease;
}
.cm-progress-step.active { color: var(--text-dark); }
.cm-progress-step.completed { color: var(--accent); }
.cm-progress-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 11px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
}
.cm-progress-step.completed .cm-progress-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.cm-progress-bar {
  flex: 1;
  height: 1px;
  background: var(--cm-hairline-strong);
  position: relative;
  overflow: hidden;
}
.cm-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-progress[data-step="1"] .cm-progress-bar-fill { transform: scaleX(0.5); }
.cm-progress[data-step="2"] .cm-progress-bar-fill { transform: scaleX(1); }

/* --- Step Container --- */
.cm-step { display: none; }
.cm-step.active {
  display: block;
  animation: cmStepFadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmStepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Service-Card Selection --- */
.cm-service-section { margin-bottom: 28px; }
.cm-service-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.cm-service-required::after {
  content: ' *';
  color: var(--accent);
}
.cm-service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cm-service-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  background: var(--white);
  border: 1px solid var(--cm-hairline-strong);
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 300ms ease, color 300ms ease;
  user-select: none;
}
.cm-service-card:hover { border-color: var(--accent); }
.cm-service-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cm-service-card-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--cm-hairline-strong);
  transition: border-color 300ms ease, background 300ms ease;
}
.cm-service-card-indicator::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 200ms ease;
}
.cm-service-card.selected {
  border-color: var(--accent);
  color: var(--accent);
}
.cm-service-card.selected .cm-service-card-indicator { border-color: var(--accent); }
.cm-service-card.selected .cm-service-card-indicator::after { transform: scale(1); }

/* --- Form Rows & Fields (White-Input Style) --- */
.cm-form-row {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
.cm-form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.cm-form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cm-form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.cm-form-group {
  display: flex;
  flex-direction: column;
}
.cm-form-group label {
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cm-form-group label.required::after {
  content: ' *';
  color: var(--accent);
}
.cm-form-group input,
.cm-form-group select,
.cm-form-group textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--cm-hairline-strong);
  border-radius: 2px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 300ms ease, box-shadow 300ms ease;
  width: 100%;
}
.cm-form-group input:focus,
.cm-form-group select:focus,
.cm-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
}
.cm-form-group input::placeholder,
.cm-form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
.cm-form-group textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

/* Validation-Error State */
.cm-form-group input.cm-field-error,
.cm-form-group select.cm-field-error,
.cm-form-group textarea.cm-field-error {
  border-color: #B6443A;
  box-shadow: 0 0 0 3px rgba(182, 68, 58, 0.10);
}
.cm-checkbox-group input.cm-field-error + .cm-checkbox-box {
  border-color: #B6443A;
  box-shadow: 0 0 0 3px rgba(182, 68, 58, 0.10);
}

/* --- Phone with Country-Code Dropdown --- */
.cm-phone-wrap {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  position: relative;
}
.cm-phone-country {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--cm-hairline-strong);
  border-radius: 2px;
  padding: 12px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 300ms ease;
  gap: 6px;
  user-select: none;
}
.cm-phone-country:hover,
.cm-phone-country.open { border-color: var(--accent); }
.cm-phone-country-flag {
  font-size: 18px;
  line-height: 1;
}
.cm-phone-country-code {
  font-size: 14px;
  color: var(--text-dark);
}
.cm-phone-country-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 300ms ease;
}
.cm-phone-country.open .cm-phone-country-arrow {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.cm-phone-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--cm-hairline-strong);
  border-radius: 2px;
  z-index: 50;
  display: none;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.12);
  overflow: hidden;
}
.cm-phone-dropdown.open { display: block; }
/* Search-Input — Specificity-Boost gegen .fuel-form-field input dark-variant Override */
.cm-phone-wrap .cm-phone-search,
.fuel-form-field .cm-phone-wrap .cm-phone-search,
.fuel-section--dark .fuel-form-field .cm-phone-wrap .cm-phone-search {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--cm-hairline);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  display: block;
  direction: ltr;
  text-align: left;
  border-radius: 0;
}
.cm-phone-wrap .cm-phone-search::placeholder,
.fuel-form-field .cm-phone-wrap .cm-phone-search::placeholder,
.fuel-section--dark .fuel-form-field .cm-phone-wrap .cm-phone-search::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.cm-phone-search:focus {
  border-bottom-color: var(--accent);
  box-shadow: none;
}
/* Twemoji flag images — konsistent in allen Browsern (Chrome/Edge/Windows-Fix) */
.cm-twemoji {
  display: inline-block;
  width: 20px;
  height: 14px;
  vertical-align: middle;
  object-fit: contain;
  line-height: 1;
}
.cm-phone-country-flag .cm-twemoji {
  width: 22px;
  height: 16px;
}
.cm-phone-list-flag .cm-twemoji {
  width: 20px;
  height: 14px;
}
.cm-phone-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 111, 165, 0.3) transparent;
}
.cm-phone-list::-webkit-scrollbar {
  width: 6px;
}
.cm-phone-list::-webkit-scrollbar-track {
  background: transparent;
}
.cm-phone-list::-webkit-scrollbar-thumb {
  background: rgba(74, 111, 165, 0.3);
  border-radius: 3px;
}
.cm-phone-list::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 111, 165, 0.5);
}
.cm-phone-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 200ms ease;
}
.cm-phone-list li:hover { background: var(--cm-offwhite-faint); }
.cm-phone-list li.selected { background: rgba(74, 111, 165, 0.08); }
.cm-phone-list-flag { font-size: 17px; line-height: 1; flex-shrink: 0; }
.cm-phone-list-name { flex: 1; color: var(--text-dark); }
.cm-phone-list-code {
  color: var(--text-muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.cm-phone-list-empty {
  padding: 16px;
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* --- Checkboxes --- */
.cm-consent-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cm-hairline);
}
.cm-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-dark);
  position: relative;
}
.cm-checkbox-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cm-checkbox-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cm-hairline-strong);
  border-radius: 2px;
  background: var(--white);
  margin-top: 1px;
  position: relative;
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.cm-checkbox-group:hover .cm-checkbox-box { border-color: var(--accent); }
.cm-checkbox-group.checked .cm-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.cm-checkbox-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 200ms ease;
}
.cm-checkbox-group.checked .cm-checkbox-box::after { transform: rotate(45deg) scale(1); }
.cm-checkbox-text a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* --- Step-Error Message (visible bei Validation-Fail, kein Scroll) --- */
.cm-step-error {
  margin-top: 24px;
  padding: 12px 16px;
  background: rgba(182, 68, 58, 0.08);
  border-left: 2px solid #B6443A;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-style: italic;
  color: #B6443A;
  line-height: 1.5;
}
.cm-step-error[hidden] { display: none; }

/* --- Step Navigation --- */
.cm-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--cm-hairline);
}
.cm-step-nav-info {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}

/* --- Buttons (cm-btn family) --- */
.cm-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.65, 0, 0.35, 1);
  border-radius: 2px;
  border: 0;
  white-space: nowrap;
}
.cm-btn svg { width: 12px; height: 12px; }
.cm-btn-primary {
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 14px 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cm-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-dark);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.cm-btn-primary:hover {
  letter-spacing: 3.2px;
  border-color: var(--text-dark);
}
.cm-btn-primary:hover::before { transform: translateX(0); }
.cm-btn-secondary {
  color: var(--text-dark);
  background: transparent;
  border: 1px solid var(--text-dark);
  padding: 14px 24px;
}
.cm-btn-secondary:hover {
  background: var(--text-dark);
  color: var(--white);
}

/* ==========================================================================
   02 APPROACH + NUMBERS INTEGRIERT
   ========================================================================== */
.cm-approach-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.cm-approach-head { grid-column: 1 / span 5; }
.cm-approach-body { grid-column: 7 / span 5; padding-top: 14px; }

.cm-approach-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin: 0;
}
.cm-approach-head h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.cm-approach-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cm-text-mid);
  margin: 0 0 20px;
}
.cm-approach-body p:last-child { margin-bottom: 0; }
.cm-approach-body strong {
  color: var(--text-dark);
  font-weight: 500;
}

/* Numbers integriert als Approach-Footer */
.cm-approach-numbers {
  margin-top: clamp(64px, 6vw, 96px);
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--cm-hairline-strong);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 96px);
}
.cm-approach-num-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-approach-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}
.cm-approach-num-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   03 COVERAGE (Situations + Capability-Tags)
   ========================================================================== */
.cm-coverage-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(80px, 8vw, 140px);
}
.cm-coverage-header h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}
.cm-coverage-header h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cm-coverage-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}
.cm-coverage-aside-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cm-text-mid);
}
.cm-coverage-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  margin: 0;
}

.cm-situations-grid { display: grid; gap: 0; }
.cm-situation-item {
  position: relative;
  padding: clamp(40px, 4vw, 64px) 0;
  border-top: 1px solid var(--cm-hairline);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(32px, 4vw, 80px);
  transition: border-color 600ms cubic-bezier(0.65, 0, 0.35, 1),
              background-color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-situation-item:last-child { border-bottom: 1px solid var(--cm-hairline); }

/* Hairlines beim Hover ausblenden (cleaner Editorial-Look,
   konsistent mit Engines Section 03). */
.cm-situation-item:hover,
.cm-situation-item:hover + .cm-situation-item {
  border-top-color: transparent;
}
.cm-situation-item:last-child:hover {
  border-bottom-color: transparent;
}

/* Subtler Background-Fade bei Hover — rgba 0.25 statt 0.5. */
.cm-situation-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Vertikaler Akzent-Strich links neben dem Item — Editorial-Marker.
   Wächst beim Hover von der Mitte aus auf volle Höhe (scaleY 0 → 1). */
.cm-situation-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cm-situation-item:hover::before {
  transform: scaleY(1);
}

.cm-situation-item:hover .cm-situation-index {
  color: var(--accent);
  transform: translateX(8px);
}

.cm-situation-index {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(64px, 7vw, 108px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cm-hairline-strong);
  align-self: start;
  transition: color 700ms ease, transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.cm-situation-content {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.cm-situation-category {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  padding-top: 6px;
  padding-bottom: 8px;
  position: relative;
}
/* Animated Hairline unter Category — wird beim Hover gezeichnet
   (scaleX 0 → 1). 48px breit, konsistent mit Engines Section 03. */
.cm-situation-category::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-situation-item:hover .cm-situation-category::after {
  transform: scaleX(1);
}

.cm-situation-text h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.cm-situation-text p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0;
}

/* Capability-Tags als Footer der Coverage-Section */
.cm-coverage-capability {
  margin-top: clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
}
.cm-coverage-capability-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cm-coverage-capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cm-capability-tag {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px;
  border: 1px solid var(--cm-hairline-strong);
  transition: all 400ms ease;
}
.cm-capability-tag:hover {
  border-color: var(--accent);
  color: var(--text-dark);
}

/* ==========================================================================
   04 KNOWLEDGE BLOCK (Definition + Comparison) — dunkler Reference-Block
   ========================================================================== */
.cm-knowledge {
  background: var(--about-bg);
  color: var(--white);
}

.cm-knowledge-header {
  margin-bottom: clamp(72px, 7vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
}
.cm-knowledge-header h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  max-width: 14ch;
}
.cm-knowledge-header h2 em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 300;
}
.cm-knowledge-header-lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  padding-bottom: 8px;
  margin: 0;
}

/* Definition-Block oben */
.cm-knowledge-definition {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(48px, 5vw, 96px);
  padding-bottom: clamp(64px, 6vw, 96px);
  margin-bottom: clamp(64px, 6vw, 96px);
  border-bottom: 1px solid var(--cm-hairline-dark);
}
.cm-knowledge-definition-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-light);
  padding-top: 8px;
}
.cm-knowledge-definition-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px;
  max-width: 70ch;
}
.cm-knowledge-definition-body p:last-child { margin-bottom: 0; }
.cm-knowledge-definition-body p strong {
  color: var(--white);
  font-weight: 500;
}

/* Comparison Wet vs Dry */
.cm-knowledge-compare-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: clamp(32px, 3vw, 48px);
  display: block;
}

.cm-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 80px);
}
.cm-compare-col {
  position: relative;
  padding: clamp(32px, 3vw, 48px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cm-hairline-dark);
  transition: background 500ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-compare-col:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(107, 139, 191, 0.45);
}

/* Vertikaler Akzent-Strich links — wächst beim Hover aus der Mitte
   auf volle Höhe (scaleY 0 → 1). Editorial-Marker konsistent mit
   cm-situation-item / en-platform-item. */
.cm-compare-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent-light);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cm-compare-col:hover::before {
  transform: scaleY(1);
}

.cm-compare-kicker {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-light);
  display: block;
  margin-bottom: 16px;
  padding-bottom: 8px;
  position: relative;
}
/* Animated Hairline unter Kicker — gezeichnet beim Hover des Cols
   (scaleX 0 → 1). 48px breit. */
.cm-compare-kicker::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-compare-col:hover .cm-compare-kicker::after {
  transform: scaleX(1);
}

.cm-compare-col h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 28px;
  max-width: 22ch;
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-compare-col:hover h3 {
  color: var(--accent-light);
}
.cm-compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.cm-compare-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cm-hairline-dark);
}
.cm-compare-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cm-compare-list strong {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 2px;
}
.cm-compare-list li > *:not(strong) {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   05 CONTEXT (Photo split, dark)
   ========================================================================== */
.cm-context {
  background: var(--about-bg);
  color: var(--white);
}
.cm-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 600px;
}
.cm-context-image {
  background:
    linear-gradient(135deg, rgba(74,111,165,0.18), rgba(31,41,55,0.6)),
    linear-gradient(135deg, #2D3A4A 0%, #1F2937 100%);
  background-size: cover;
  background-position: center;
}
.cm-context-body {
  padding: clamp(64px, 7vw, 112px) clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--about-bg);
}
.cm-context-body .cm-section-tag {
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.55);
}
.cm-context-body .cm-section-tag::before {
  background: var(--accent-light);
}
.cm-context-body .cm-section-tag-num {
  color: var(--accent-light);
}
.cm-context-body h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--white);
  margin: 0 0 28px;
}
.cm-context-body h2 em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 300;
}
.cm-context-text p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
  max-width: 44ch;
}
.cm-context-text p strong {
  color: var(--white);
  font-weight: 500;
}
.cm-context-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   06 FAQ
   ========================================================================== */
.cm-faq-header {
  margin-bottom: clamp(56px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
}
.cm-faq-header h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
  max-width: 16ch;
}
.cm-faq-header h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cm-faq-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  padding-bottom: 6px;
  margin: 0;
}

.cm-faq-list {
  border-top: 1px solid var(--cm-hairline-strong);
}
.cm-faq-item {
  border-bottom: 1px solid var(--cm-hairline);
}
.cm-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
}
.cm-faq-q-text {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--text-dark);
  transition: color 300ms ease;
}
.cm-faq-q:hover .cm-faq-q-text { color: var(--accent); }

.cm-faq-toggle {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform 400ms ease;
}
.cm-faq-toggle::before,
.cm-faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--text-dark);
}
.cm-faq-toggle::before {
  width: 14px;
  height: 1px;
  top: 50%;
}
.cm-faq-toggle::after {
  width: 1px;
  height: 14px;
  left: 50%;
  transition: transform 400ms ease;
}
.cm-faq-item.open .cm-faq-toggle::after { transform: scaleY(0); }
.cm-faq-item.open .cm-faq-toggle { transform: rotate(180deg); }

.cm-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 600ms ease, padding 600ms ease;
}
.cm-faq-item.open .cm-faq-a {
  max-height: 600px;
  padding-bottom: 28px;
}
.cm-faq-a p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cm-text-mid);
  max-width: 70ch;
  margin: 0;
}

/* ==========================================================================
   07 CTA
   ========================================================================== */
.cm-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.cm-cta-tag { justify-content: center; }

.cm-cta-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.cm-cta-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cm-cta-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 40px;
}

.cm-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.cm-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}
.cm-cta-button:hover::before { transform: translateX(0); }
.cm-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.cm-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cm-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.cm-cta-button:hover .cm-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}
.cm-cta-button:hover .cm-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   ACMI FLEET SECTION (Fix 42)
   Currently-Available-for-ACMI Cards. Wird nur gerendert wenn aktive
   ACMI-Aircraft im Available-Pool. Off-white Background als Bruch zwischen
   white FAQ und dim CTA.
   ========================================================================== */

.cm-fleet {
  /* nutzt cm-section--offwhite Background */
}

.cm-fleet-header {
  max-width: 720px;
  margin-bottom: 48px;
}
.cm-fleet-header h2 {
  font-family: var(--font-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 16px;
}
.cm-fleet-header h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cm-fleet-lede {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0;
  opacity: 0.78;
}

.cm-fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.cm-fleet-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cm-fleet-card:hover {
  border-color: rgba(74, 111, 165, 0.45);
  transform: translateY(-2px);
}

.cm-fleet-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.cm-fleet-card-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cm-fleet-card-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  padding: 4px 10px;
  border: 1px solid var(--accent, #4A6FA5);
  background: rgba(74, 111, 165, 0.06);
}

.cm-fleet-card-body {
  flex-grow: 1;
  margin-bottom: 20px;
}
.cm-fleet-card-body h3 {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.cm-fleet-card-body p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dark);
  opacity: 0.78;
  margin: 0;
}

.cm-fleet-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  text-decoration: none;
  align-self: flex-start;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
}
.cm-fleet-card-cta-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
}
.cm-fleet-card-cta-arrow svg {
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}
.cm-fleet-card:hover .cm-fleet-card-cta-arrow svg {
  transform: translateX(4px);
}

/* ==========================================================================
   WANTED PAGE — PREMIUM V1.0 PATTERNS (Lieferung 44)
   Editorial-Stil exklusiv für Wanted-Seite. .wn-* Namespace.
   3 Sektionen: Listings (mit Filter-Tab-Bar + Live-Indicator) →
   Acquisition (Engines-Components-Pattern: Background-Index +
   animated underline + em-dash-marker) → CTA.
   ========================================================================== */

/* Wanted-spezifische Tokens */
.wn-section {
  --wn-offwhite: #E8EDF1;
  --wn-offwhite-dim: #D5DEE5;
  --wn-offwhite-faint: #F2F5F8;
  --wn-text-mid: #4A5568;
  --wn-hairline: rgba(31, 41, 55, 0.10);
  --wn-hairline-strong: rgba(31, 41, 55, 0.20);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--wn-offwhite);
}

.wn-section--white { background: var(--white); }
.wn-section--offwhite { background: var(--wn-offwhite); }
.wn-section--dim { background: var(--wn-offwhite-dim); }

.wn-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.wn-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.wn-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.wn-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}

/* Live-Indicator (pulsierender Punkt) — shared für Status + Listings */
.wn-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.wn-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: wnPulse 2.4s ease-out infinite;
}
@keyframes wnPulse {
  0% { transform: scale(0.5); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wn-pulse-dot::after { animation: none; }
}

/* ==========================================================================
   01 LISTINGS — Header
   ========================================================================== */
.wn-listings-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(56px, 5vw, 80px);
}

.wn-listings-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}
.wn-listings-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.wn-listings-aside {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wn-listings-status {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wn-listings-status .wn-pulse-dot {
  width: 8px;
  height: 8px;
}

.wn-listings-lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 50ch;
  margin: 0;
}

/* ==========================================================================
   01 LISTINGS — Filter-Tab-Bar (Premium V1.2 Pattern)
   ========================================================================== */
.wn-filter-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--wn-hairline-strong);
  margin-bottom: clamp(24px, 2vw, 32px);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wn-filter-tabs::-webkit-scrollbar { display: none; }

/* Inactive Tabs — leichter Stahlblau-Tint, dezente Border.
   Hover: ::before Wash schiebt sich von links nach rechts durch (Lieferung 60). */
.wn-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(20px, 2vw, 28px);
  background: rgba(74, 111, 165, 0.05);
  border: 1px solid rgba(74, 111, 165, 0.14);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              background 500ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Slide-Wash beim Hover — stahlblau, schiebt sich von links rein.
   Konsistent mit Primary-Button-Pattern im Theme. */
.wn-filter-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(107, 139, 191, 0.18);
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.wn-filter-tab:hover:not(.active)::before {
  transform: translateX(0);
}
.wn-filter-tab > * {
  position: relative;
  z-index: 1;
}

.wn-filter-tab:hover:not(.active) {
  color: var(--text-dark);
  border-color: rgba(74, 111, 165, 0.32);
}

/* Active Tab — header-bg Stahlblau-Anthrazit, weiße Schrift, accent-light Zahl. */
.wn-filter-tab.active {
  color: var(--white);
  background: var(--header-bg);
  border-color: var(--header-bg);
}
.wn-filter-tab.active::before { display: none; }

/* Underline-Indicator nicht mehr benötigt (Active-State via Background). */
.wn-filter-tab::after { display: none; }

.wn-filter-tab-count {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  transition: color 400ms ease;
}
.wn-filter-tab:hover:not(.active) .wn-filter-tab-count {
  color: var(--text-dark);
}
.wn-filter-tab.active .wn-filter-tab-count {
  color: var(--accent-light);
}

/* ==========================================================================
   01 LISTINGS — List & Items
   ========================================================================== */
.wn-listings-list {
  /* Top-Border kommt von filter-tabs unten, plus jeder Item bringt eigene */
}

.wn-listing-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: clamp(32px, 3.5vw, 64px);
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--wn-hairline);
  text-decoration: none;
  color: inherit;
  transition: background 500ms ease, padding 400ms ease;
  position: relative;
}

.wn-listing-item.is-link { cursor: pointer; }
.wn-listing-item.is-link:hover {
  background: var(--wn-offwhite-faint);
  padding-left: 24px;
  padding-right: 24px;
}
.wn-listing-item.is-link:hover .wn-listing-cta {
  color: var(--accent);
  gap: 16px;
  border-bottom-color: var(--accent);
}

/* Category + Live-Indicator Wrap */
.wn-listing-cat-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wn-listing-cat-wrap .wn-pulse-dot {
  width: 6px;
  height: 6px;
}
.wn-listing-cat-wrap .wn-pulse-dot::after {
  inset: -3px;
}

/* Closed: dot grau, kein puls */
.wn-listing-item.closed .wn-pulse-dot {
  background: var(--text-muted);
}
.wn-listing-item.closed .wn-pulse-dot::after {
  animation: none;
  border: none;
}

.wn-listing-cat {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wn-listing-info h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 6px;
}

.wn-listing-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.wn-listing-desc p { margin: 0 0 8px; }
.wn-listing-desc p:last-child { margin-bottom: 0; }

.wn-listing-aside {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
}

.wn-listing-status {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wn-listing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--text-dark);
  transition: color 300ms ease, gap 400ms ease, border-color 300ms ease;
}
.wn-listing-cta svg { width: 12px; height: 12px; }

/* Closed listings — gedimmt */
.wn-listing-item.closed { opacity: 0.55; }
.wn-listing-item.closed h3 { color: var(--text-muted); }

/* Empty-State */
.wn-listings-empty {
  text-align: center;
  padding: clamp(72px, 7vw, 120px) 24px;
  border-top: 1px solid var(--wn-hairline);
  border-bottom: 1px solid var(--wn-hairline);
}
.wn-listings-empty.hidden,
.wn-listings-empty[hidden] {
  display: none;
}

.wn-listings-empty p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 32px;
  line-height: 1.55;
}

.wn-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-dark);
  background: transparent;
  border: 1px solid var(--text-dark);
  padding: 14px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: all 400ms ease;
}
.wn-btn-line:hover {
  background: var(--text-dark);
  color: var(--white);
}
.wn-btn-line svg { width: 12px; height: 12px; }

.wn-listings-meta {
  margin-top: clamp(32px, 3vw, 48px);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: right;
}

/* ==========================================================================
   02 ACQUISITION — Background-Index Pattern (analog Engines-Components)
   ========================================================================== */
.wn-acquisition-header {
  margin-bottom: clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
}

.wn-acquisition-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
  max-width: 16ch;
}
.wn-acquisition-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.wn-acquisition-aside {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wn-acquisition-aside-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cm-text-mid);
}
.wn-acquisition-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  margin: 0;
}

.wn-acquisition-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 4vw, 64px) clamp(48px, 5vw, 80px);
}

.wn-acquisition-item {
  position: relative;
  padding: clamp(40px, 3.5vw, 56px) 0 clamp(40px, 3.5vw, 56px) clamp(48px, 4vw, 72px);
  border-top: 1px solid var(--wn-hairline-strong);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Background-Index als Skulptur */
.wn-acquisition-item::before {
  content: attr(data-index);
  position: absolute;
  top: clamp(20px, 2vw, 32px);
  left: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wn-hairline-strong);
  transition: color 600ms ease, transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Animated underline beim Hover — auf Kicker mit padding-bottom für
   sauberen Abstand zum h3 (Pattern wie Engines 04 Components). */
.wn-acq-kicker {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  padding-bottom: 8px;
}
.wn-acq-kicker::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.wn-acquisition-item:hover::before {
  color: var(--accent);
  transform: translateX(-4px);
}
.wn-acquisition-item:hover .wn-acq-kicker::after {
  transform: scaleX(1);
}
.wn-acquisition-item:hover h3 {
  color: var(--accent);
}

.wn-acquisition-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0;
  transition: color 500ms ease;
}

.wn-acquisition-item p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 42ch;
}

/* Closing-Statement mit em-dash-Marker */
.wn-acquisition-note {
  position: relative;
  margin-top: clamp(72px, 6vw, 100px);
  padding-left: clamp(48px, 4vw, 72px);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--wn-text-mid);
  max-width: 60ch;
}
.wn-acquisition-note::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
  font-size: 0.9em;
}

/* ==========================================================================
   03 CTA
   ========================================================================== */
.wn-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.wn-cta-tag { justify-content: center; }

.wn-cta-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.wn-cta-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.wn-cta-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 40px;
}

.wn-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.wn-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.wn-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}
.wn-cta-button:hover::before { transform: translateX(0); }

.wn-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.wn-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.wn-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.wn-cta-button:hover .wn-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}
.wn-cta-button:hover .wn-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   COMPANY PAGE — PREMIUM V1.0 PATTERNS (Lieferung 45)
   Editorial-Stil exklusiv für Company-Seite. .co-* Namespace.
   4 Sektionen: Background (Editorial Timeline mit vertikaler Hairline,
   Year-Marker pro Phase, mainline-Phase als Feature) → Capability
   (Editorial Spread + Additional Services als Subsection) → Numbers
   (dunkle Identitäts-Section mit großen italic Stats) → CTA.
   ========================================================================== */

/* Company-spezifische Tokens */
.co-section {
  --co-offwhite: #E8EDF1;
  --co-offwhite-dim: #D5DEE5;
  --co-offwhite-faint: #F2F5F8;
  --co-text-mid: #4A5568;
  --co-hairline: rgba(31, 41, 55, 0.10);
  --co-hairline-strong: rgba(31, 41, 55, 0.20);
  --co-hairline-dark: rgba(255, 255, 255, 0.15);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--co-offwhite);
}

.co-section--white { background: var(--white); }
.co-section--offwhite { background: var(--co-offwhite); }
.co-section--dim { background: var(--co-offwhite-dim); }
.co-section--dark {
  background: var(--about-bg);
  color: var(--white);
}

.co-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.co-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.co-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.co-section--dark .co-section-tag {
  color: rgba(255, 255, 255, 0.55);
}
.co-section--dark .co-section-tag::before {
  background: var(--accent-light);
}
.co-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}
.co-section--dark .co-section-tag-num { color: var(--accent-light); }

/* ==========================================================================
   01 BACKGROUND — Editorial Timeline
   ========================================================================== */
.co-background-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  margin-bottom: clamp(80px, 8vw, 140px);
}

.co-background-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
  max-width: 18ch;
}
.co-background-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.co-background-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}

.co-background-aside-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cm-text-mid);
}

.co-background-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--cm-text-mid);
  max-width: 44ch;
  margin: 0;
}

/* Timeline mit vertikaler Year-Spalte */
.co-timeline {
  display: grid;
  gap: 0;
  position: relative;
}

.co-timeline::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--co-hairline-strong);
}

.co-phase {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(48px, 5vw, 96px);
  padding: clamp(48px, 5vw, 80px) 0;
  border-top: 1px solid var(--co-hairline);
}
.co-phase:first-child {
  border-top: none;
  padding-top: 0;
}

.co-phase-year-block {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.co-phase-year {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 10px;
  background: var(--white);
  padding-right: 16px;
  display: inline-block;
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-phase:hover .co-phase-year {
  transform: scale(1.10);
  letter-spacing: -0.005em;
}

.co-phase-kicker {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
  background: var(--white);
  padding-right: 16px;
  padding-bottom: 8px;
  position: relative;
}
/* Animated Underline unter Kicker — gezeichnet beim Hover (scaleX 0 → 1).
   Konsistent mit Section-Pattern Engines 04 / ACMI Compare. */
.co-phase-kicker::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-phase:hover .co-phase-kicker::after {
  transform: scaleX(1);
}

.co-phase-content h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0 0 20px;
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-phase:hover .co-phase-content h3 {
  color: var(--accent);
}

.co-phase-content p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--co-text-mid);
  max-width: 60ch;
  margin: 0;
}

.co-phase-content p strong {
  color: var(--text-dark);
  font-weight: 500;
}

/* Mainline Phase (02 · Operator) als Feature */
.co-phase--mainline { padding: clamp(64px, 6.5vw, 112px) 0; }
.co-phase--mainline .co-phase-content h3 {
  font-size: clamp(32px, 3.6vw, 52px);
}
.co-phase--mainline .co-phase-content p {
  font-size: 18px;
  max-width: 64ch;
}

/* Conclusion-Statement mit em-dash-Marker */
.co-background-conclusion {
  position: relative;
  margin-top: clamp(72px, 7vw, 120px);
  padding: clamp(48px, 5vw, 72px) 0 0 clamp(80px, 7vw, 120px);
  border-top: 1px solid var(--co-hairline-strong);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: var(--co-text-mid);
  max-width: 64ch;
}
.co-background-conclusion::before {
  content: "—";
  position: absolute;
  left: clamp(32px, 3vw, 48px);
  top: clamp(48px, 5vw, 72px);
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
  font-size: 0.9em;
}

/* ==========================================================================
   02 CAPABILITY + ADDITIONAL SERVICES (Subsection)
   ========================================================================== */
.co-capability-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.co-capability-head { grid-column: 1 / span 5; }
.co-capability-body { grid-column: 7 / span 5; padding-top: 14px; }

.co-capability-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin: 0;
}
.co-capability-head h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.co-capability-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--co-text-mid);
  margin: 0 0 32px;
}

.co-capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: clamp(24px, 2.5vw, 40px);
  border-top: 1px solid var(--co-hairline-strong);
}

.co-capability-tag {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px;
  border: 1px solid var(--co-hairline-strong);
  transition: all 400ms ease;
}
.co-capability-tag:hover {
  border-color: var(--accent);
  color: var(--text-dark);
}

/* Additional Services als 12-col Subsection */
.co-additional-block {
  margin-top: clamp(80px, 7vw, 120px);
  padding-top: clamp(56px, 5vw, 80px);
  border-top: 1px solid var(--co-hairline-strong);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.co-additional-head { grid-column: 1 / span 5; }
.co-additional-body { grid-column: 7 / span 5; padding-top: 8px; }

.co-additional-kicker {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 14px;
}

.co-additional-head h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}
.co-additional-head h3 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.co-additional-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--co-text-mid);
  margin: 0;
}

/* ==========================================================================
   03 NUMBERS — Eigene starke dunkle Section
   ========================================================================== */
.co-numbers-header {
  margin-bottom: clamp(72px, 7vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
}

.co-numbers-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  max-width: 18ch;
}
.co-numbers-headline em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 300;
}

.co-numbers-aside-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  padding-bottom: 8px;
  margin: 0;
}

.co-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.co-numbers-item {
  position: relative;
  padding: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--co-hairline-dark);
  border-right: 1px solid var(--co-hairline-dark);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-numbers-item:last-child { border-right: none; }
.co-numbers-item:hover {
  border-right-color: var(--accent-light);
  border-top-color: var(--accent-light);
}
.co-numbers-item:last-child:hover {
  border-right-color: var(--co-hairline-dark);
}

.co-numbers-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--white);
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-numbers-item:hover .co-numbers-num {
  color: var(--accent-light);
  transform: translateY(-3px);
}

.co-numbers-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   04 CTA
   ========================================================================== */
.co-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.co-cta-tag { justify-content: center; }

.co-cta-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.co-cta-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.co-cta-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 40px;
}

.co-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.co-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}
.co-cta-button:hover::before { transform: translateX(0); }

.co-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.co-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.co-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.co-cta-button:hover .co-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}
.co-cta-button:hover .co-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   CONTACT PAGE — PREMIUM V1.0 PATTERNS (Lieferung 46)
   Editorial-Stil exklusiv für Contact-Seite. .ct-* Namespace.
   1 Section: Contact (Visit-Card 5cols + Form 7cols).
   Form-Card auf Blau-Grau (analog ACMI Inquiry-Form), Inputs mit
   unter-Linie statt Box. Form-Handler savfin_contact + Field-Names
   unverändert — Bestand-Handler bleibt funktional.
   ========================================================================== */

/* Contact-spezifische Tokens */
.ct-section {
  --ct-offwhite: #E8EDF1;
  --ct-offwhite-faint: #F2F5F8;
  --ct-text-mid: #4A5568;
  --ct-hairline: rgba(31, 41, 55, 0.10);
  --ct-hairline-strong: rgba(31, 41, 55, 0.20);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
  background: var(--ct-offwhite);
}

.ct-section--white { background: var(--white); }

.ct-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.ct-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.ct-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.ct-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}

/* ==========================================================================
   Contact Body — Asymmetric 5/7 Grid
   ========================================================================== */
.ct-contact-body {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 4vw, 64px);
  align-items: start;
}

/* Linke Spalte: H2 oben + Visit-Card darunter gestapelt */
.ct-contact-left {
  display: flex;
  flex-direction: column;
}

.ct-contact-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 clamp(56px, 5vw, 80px);
  max-width: 18ch;
}
.ct-contact-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

/* ==========================================================================
   Visit Card — Weiße Card auf Blau-Grau Section-Bg
   ========================================================================== */
.ct-visit-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: clamp(40px, 4vw, 64px);
  border: 1px solid var(--ct-hairline);
}

.ct-visit-card-eyebrow {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 18px;
}

.ct-visit-card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 32px;
}

.ct-visit-card-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: clamp(40px, 4vw, 56px);
  padding-bottom: clamp(40px, 4vw, 56px);
  border-bottom: 1px solid var(--ct-hairline-strong);
}

.ct-visit-card-address span {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ct-text-mid);
}

.ct-visit-card-contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: clamp(40px, 4vw, 56px);
}

.ct-contact-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: baseline;
}

.ct-contact-row-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ct-contact-row-value {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-dark);
}

.ct-contact-row-value a {
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--ct-hairline-strong);
  padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}
.ct-contact-row-value a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ct-visit-card-note {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 38ch;
  margin: 0;
}
.ct-visit-card-note::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
}

/* ==========================================================================
   Form — Blau-Grau-Card mit unter-Linie-Inputs
   ========================================================================== */
.ct-form-wrap {
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: clamp(40px, 4vw, 64px);
  border: 1px solid var(--ct-hairline);
}

.ct-form-eyebrow {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 18px;
}

.ct-form-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 clamp(48px, 5vw, 72px);
  padding-bottom: clamp(24px, 2.5vw, 32px);
  border-bottom: 1px solid var(--ct-hairline-strong);
}
.ct-form-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.ct-form {
  display: flex;
  flex-direction: column;
}

.ct-form-row {
  display: grid;
  gap: clamp(32px, 3vw, 48px);
  margin-bottom: clamp(32px, 3vw, 48px);
}
.ct-form-row.cols-2 { grid-template-columns: 1fr 1fr; }

.ct-form-field {
  display: flex;
  flex-direction: column;
}

.ct-form-field label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.ct-required {
  color: var(--accent);
  margin-left: 2px;
}

.ct-form-field input,
.ct-form-field select,
.ct-form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ct-hairline-strong);
  padding: 10px 0;
  outline: none;
  transition: border-color 300ms ease;
  width: 100%;
}

.ct-form-field input::placeholder,
.ct-form-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.ct-form-field input:focus,
.ct-form-field select:focus,
.ct-form-field textarea:focus {
  border-bottom-color: var(--accent);
}

.ct-form-field textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-body);
}

/* Custom select with own arrow icon */
.ct-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 32px;
  cursor: pointer;
}

.ct-form-field-message {
  margin-bottom: clamp(40px, 4vw, 56px);
}

.ct-honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

.ct-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(8px, 1vw, 16px);
}

.ct-form-privacy {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0;
  line-height: 1.55;
  text-align: right;
}
.ct-form-privacy a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* CTA Button (gleiche Premium-Geste wie andere Subseiten) */
.ct-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ct-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.ct-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}
.ct-cta-button:hover::before { transform: translateX(0); }

.ct-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.ct-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ct-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.ct-cta-button:hover .ct-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}
.ct-cta-button:hover .ct-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   FUEL PAGE — PREMIUM V1.0 PATTERNS (Lieferung 47)
   Editorial-Stil exklusiv für Jet-Fuel-Seite. .fuel-* Namespace.
   2 Sektionen: 01 Supply (Buyer, light) → 02 For Suppliers (Seller, dark).
   Twin-Layout 5/7-Grid in beiden Sektionen, Form-Card hell vs. dunkel.
   Form-Handler savfin_fuel_request + savfin_fuel_supplier + Field-Names
   unverändert — Bestand-Handler bleibt funktional.
   ========================================================================== */

/* Fuel-spezifische Tokens */
.fuel-section {
  --fuel-offwhite-faint: #F2F5F8;
  --fuel-text-mid: #4A5568;
  --fuel-hairline: rgba(31, 41, 55, 0.10);
  --fuel-hairline-strong: rgba(31, 41, 55, 0.20);
  --fuel-hairline-dark: rgba(255, 255, 255, 0.15);
  --fuel-hairline-dark-strong: rgba(255, 255, 255, 0.25);
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
}

.fuel-section--white { background: var(--white); }
.fuel-section--dark {
  background: var(--about-bg);
  color: var(--white);
}

.fuel-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.fuel-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.fuel-section-tag::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.fuel-section--dark .fuel-section-tag {
  color: rgba(255, 255, 255, 0.55);
}
.fuel-section--dark .fuel-section-tag::before {
  background: var(--accent-light);
}
.fuel-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}
.fuel-section--dark .fuel-section-tag-num { color: var(--accent-light); }

/* ==========================================================================
   Body — Two-Col Layout (5/7)
   ========================================================================== */
.fuel-body {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 4vw, 80px);
  align-items: start;
}

.fuel-left {
  display: flex;
  flex-direction: column;
}

.fuel-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 32px;
  max-width: 14ch;
}
.fuel-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.fuel-section--dark .fuel-headline { color: var(--white); }
.fuel-section--dark .fuel-headline em { color: var(--accent-light); }

.fuel-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fuel-text-mid);
  max-width: 42ch;
  margin: 0 0 clamp(32px, 3vw, 48px);
}
.fuel-section--dark .fuel-lead { color: rgba(255, 255, 255, 0.78); }

/* Audience-Tag mit Hairline-Marker */
.fuel-audience {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: clamp(24px, 2vw, 32px);
  border-top: 1px solid var(--fuel-hairline-strong);
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fuel-audience::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.fuel-section--dark .fuel-audience {
  border-top-color: var(--fuel-hairline-dark);
  color: rgba(255, 255, 255, 0.55);
}
.fuel-section--dark .fuel-audience::before { background: var(--accent-light); }

/* ==========================================================================
   Form Card — Buyer (light) und Supplier (dark glas-card)
   ========================================================================== */
.fuel-form-card {
  padding: clamp(40px, 4vw, 64px);
}

.fuel-form-card--buyer {
  background: var(--fuel-offwhite-faint);
  border: 1px solid var(--fuel-hairline);
}

.fuel-form-card--supplier {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fuel-hairline-dark);
}

.fuel-form-eyebrow {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 18px;
}
.fuel-section--dark .fuel-form-eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.fuel-form-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 clamp(40px, 4vw, 56px);
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--fuel-hairline-strong);
}
.fuel-form-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.fuel-section--dark .fuel-form-headline {
  color: var(--white);
  border-bottom-color: var(--fuel-hairline-dark-strong);
}
.fuel-section--dark .fuel-form-headline em { color: var(--accent-light); }

/* Form-Felder */
.fuel-form-row {
  display: grid;
  gap: clamp(24px, 2.5vw, 36px);
  margin-bottom: clamp(28px, 2.8vw, 40px);
}
.fuel-form-row.cols-2 { grid-template-columns: 1fr 1fr; }

.fuel-form-field {
  display: flex;
  flex-direction: column;
}

.fuel-form-field label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.fuel-section--dark .fuel-form-field label {
  color: rgba(255, 255, 255, 0.55);
}

.fuel-required {
  color: var(--accent);
  margin-left: 2px;
}
.fuel-section--dark .fuel-required { color: var(--accent-light); }

.fuel-form-field input,
.fuel-form-field select,
.fuel-form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fuel-hairline-strong);
  padding: 10px 0;
  outline: none;
  transition: border-color 300ms ease;
  width: 100%;
}

.fuel-form-field input::placeholder,
.fuel-form-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.fuel-form-field input:focus,
.fuel-form-field select:focus,
.fuel-form-field textarea:focus {
  border-bottom-color: var(--accent);
}

.fuel-form-field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

/* Custom Select-Pfeil (light) */
.fuel-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 32px;
  cursor: pointer;
}

/* Dark variant — heller Text + Pfeil */
.fuel-section--dark .fuel-form-field input,
.fuel-section--dark .fuel-form-field select,
.fuel-section--dark .fuel-form-field textarea {
  color: var(--white);
  border-bottom-color: var(--fuel-hairline-dark-strong);
}
.fuel-section--dark .fuel-form-field input::placeholder,
.fuel-section--dark .fuel-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.fuel-section--dark .fuel-form-field input:focus,
.fuel-section--dark .fuel-form-field select:focus,
.fuel-section--dark .fuel-form-field textarea:focus {
  border-bottom-color: var(--accent-light);
}
.fuel-section--dark .fuel-form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.55)' stroke-width='1.5'/></svg>");
}
.fuel-section--dark .fuel-form-field option {
  background: var(--about-bg-deep);
  color: var(--white);
}

/* Email-Hint */
.fuel-email-hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}
.fuel-section--dark .fuel-email-hint {
  color: rgba(255, 255, 255, 0.5);
}

/* Phone-Picker — Fuel-Form Override (Underline-Style statt Box) */
.fuel-form-field .cm-phone-wrap {
  grid-template-columns: 100px 1fr;
  gap: 6px;
}
.fuel-form-field .cm-phone-country {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fuel-hairline-strong);
  border-radius: 0;
  padding: 8px 4px;
}
.fuel-form-field .cm-phone-country:hover,
.fuel-form-field .cm-phone-country.open {
  border-bottom-color: var(--accent);
}
/* Dark variant (Supplier-Offer) */
.fuel-section--dark .fuel-form-field .cm-phone-country {
  border-bottom-color: var(--fuel-hairline-dark-strong);
}
.fuel-section--dark .fuel-form-field .cm-phone-country-code {
  color: var(--white);
}
.fuel-section--dark .fuel-form-field .cm-phone-country-arrow {
  border-right-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.fuel-section--dark .fuel-form-field .cm-phone-country:hover,
.fuel-section--dark .fuel-form-field .cm-phone-country.open {
  border-bottom-color: var(--accent-light);
}

/* ============================================================================
   CUSTOM SELECT PICKER — Shared Component (Contact, ACMI, Fuel)
   ============================================================================ */
.cm-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.cm-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cm-hairline-strong, rgba(0, 0, 0, 0.15));
  border-radius: 0;
  padding: 12px 4px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted, #6b7785);
  cursor: pointer;
  text-align: left;
  transition: border-bottom-color 300ms ease, color 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.cm-select-wrap.has-value .cm-select-trigger {
  color: var(--text-dark, #1a2230);
}
.cm-select-trigger:hover,
.cm-select-wrap.open .cm-select-trigger {
  border-bottom-color: var(--accent);
}
.cm-select-trigger:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.cm-select-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-select-arrow {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 1.5px solid var(--text-muted, #6b7785);
  border-bottom: 1.5px solid var(--text-muted, #6b7785);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms ease;
}
.cm-select-wrap.open .cm-select-arrow {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Options Dropdown */
.cm-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--cm-hairline-strong, rgba(0, 0, 0, 0.12));
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(20, 30, 50, 0.12);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.cm-select-wrap.open .cm-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cm-select-option {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark, #1a2230);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.cm-select-option:hover,
.cm-select-option.focused {
  background: rgba(74, 111, 165, 0.08);
  color: var(--accent);
}
.cm-select-option.selected {
  background: rgba(74, 111, 165, 0.05);
  color: var(--accent);
  font-weight: 500;
}
.cm-select-option[data-disabled] {
  color: var(--text-muted, #6b7785);
  font-style: italic;
  cursor: default;
  pointer-events: none;
}

/* Dark variant — Fuel Supplier-Form */
.fuel-section--dark .cm-select-trigger {
  border-bottom-color: var(--fuel-hairline-dark-strong, rgba(255, 255, 255, 0.2));
  color: rgba(255, 255, 255, 0.4);
}
.fuel-section--dark .cm-select-wrap.has-value .cm-select-trigger {
  color: var(--white);
}
.fuel-section--dark .cm-select-trigger:hover,
.fuel-section--dark .cm-select-wrap.open .cm-select-trigger {
  border-bottom-color: var(--accent-light);
}
.fuel-section--dark .cm-select-arrow {
  border-right-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.fuel-section--dark .cm-select-options {
  background: var(--about-bg-deep, #2d3e50);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.fuel-section--dark .cm-select-option {
  color: var(--white);
}
.fuel-section--dark .cm-select-option:hover,
.fuel-section--dark .cm-select-option.focused {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-light);
}
.fuel-section--dark .cm-select-option.selected {
  background: rgba(74, 111, 165, 0.2);
  color: var(--accent-light);
}
.fuel-section--dark .cm-select-option[data-disabled] {
  color: rgba(255, 255, 255, 0.4);
}

.fuel-form-field-full { grid-column: 1 / -1; }

/* Honeypot */
.fuel-honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Submit-Bereich */
.fuel-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(8px, 1vw, 16px);
}

.fuel-form-privacy {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0;
  line-height: 1.55;
  text-align: right;
}
.fuel-form-privacy a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.fuel-section--dark .fuel-form-privacy {
  color: rgba(255, 255, 255, 0.6);
}
.fuel-section--dark .fuel-form-privacy a {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}

/* Premium-Sweep CTA-Button */
.fuel-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.fuel-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.fuel-cta-button:hover {
  color: #FFFFFF;
  letter-spacing: 3.2px;
}
.fuel-cta-button:hover::before { transform: translateX(0); }

.fuel-cta-button-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.fuel-cta-button-arrow svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.fuel-cta-button-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.fuel-cta-button:hover .fuel-cta-button-arrow svg:first-child {
  transform: translateX(130%);
}
.fuel-cta-button:hover .fuel-cta-button-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* Inverted Variant: Dark-Section bekommt weißen Bg-Button mit accent-light Sweep */
.fuel-section--dark .fuel-cta-button {
  background: var(--white);
  color: var(--text-dark);
}
.fuel-section--dark .fuel-cta-button::before {
  background: var(--accent-light);
}
.fuel-section--dark .fuel-cta-button:hover {
  color: var(--text-dark);
}

/* ==========================================================================
   FRONT PAGE — PREMIUM V4.6 PATTERNS (Lieferung 48)
   Editorial-Premium Restyling der Homepage. .fp-* Namespace.
   Sektionen: Hero (V3.6 unverändert) → 01 Scope → 02 About (DARK)
              → 03 Wanted-Teaser → Contact-Band-Outro (offwhite-dim hell)
   Scope auf Wanted-Permanent-Interest-Pattern (Background-Index Skulptur).
   About-Section dunkel mit integrierten Stats statt eigener Numbers-Section.
   ========================================================================== */

/* Section-Wrapper */
.fp-section {
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
}
.fp-section--white { background: var(--white); }
.fp-section--dark {
  background: var(--about-bg);
  color: var(--white);
}
.fp-section-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Section-Tag mit italic-Index */
.fp-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px; /* Lieferung 51: angeglichen an Subseiten */
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px; /* Lieferung 55: angeglichen an Subseiten */
}
.fp-section-tag::before {
  content: "";
  width: 32px; /* Lieferung 51: angeglichen an Subseiten */
  height: 1px;
  background: var(--accent);
}
.fp-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16px; /* Lieferung 51: angeglichen an Subseiten */
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}
.fp-section--dark .fp-section-tag { color: rgba(255, 255, 255, 0.55); }
.fp-section--dark .fp-section-tag::before { background: var(--accent-light); }
.fp-section--dark .fp-section-tag-num { color: var(--accent-light); }

/* ==========================================================================
   01 SCOPE — Background-Index Pattern, 2x2 Grid, Pfeil oben-rechts
   ========================================================================== */
.fp-scope-head { margin-bottom: clamp(40px, 4vw, 56px); }
.fp-scope-head h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
  max-width: 26ch;
}
.fp-scope-head h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.fp-scope-list {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 3vw, 48px) clamp(48px, 5vw, 80px);
}

.fp-scope-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(36px, 3vw, 48px) 36px clamp(36px, 3vw, 48px) clamp(48px, 4vw, 72px);
  border-top: 1px solid rgba(31, 41, 55, 0.20);
  text-decoration: none;
  color: inherit;
}

/* Background-Index als italic-Skulptur links bei 0 */
.fp-scope-item::before {
  content: attr(data-index);
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  left: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(31, 41, 55, 0.20);
  transition: color 600ms ease, transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Animated Underline beim Hover */
.fp-scope-item::after {
  content: "";
  position: absolute;
  top: calc(clamp(36px, 3vw, 48px) + 12px + 12px);
  left: clamp(48px, 4vw, 72px);
  width: 56px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.fp-scope-item:hover::before {
  color: var(--accent);
  transform: translateX(-4px);
}
.fp-scope-item:hover::after { transform: scaleX(1); }
.fp-scope-item:hover h3 { color: var(--accent); }

.fp-scope-kicker {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fp-scope-item h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0;
  transition: color 500ms ease;
}

.fp-scope-item p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 4px 0 0;
  max-width: 42ch;
}

.fp-scope-tags {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}

/* Pfeil oben-rechts — animiert beim Hover */
.fp-scope-arrow {
  position: absolute;
  top: clamp(36px, 3vw, 48px);
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 400ms ease, transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.fp-scope-item:hover .fp-scope-arrow {
  color: var(--accent);
  transform: translateX(6px);
}

/* ==========================================================================
   02 ABOUT — Dunkles Section, Image-Block links + Body + integrierte Stats
   ========================================================================== */
.fp-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}

.fp-about-image-wrap {
  position: relative;
  background: linear-gradient(135deg, #1A2330 0%, #243042 50%, #1A2330 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 480px;
  overflow: hidden;
}
.fp-about-image-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fp-about-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--white);
  margin: 0 0 24px;
  max-width: 20ch;
}
.fp-about-headline em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 300;
}

.fp-about-body p {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 18px;
  max-width: 56ch;
}
.fp-about-body p:last-child { margin-bottom: 0; }

/* Stats kompakt unter Body */
.fp-about-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  justify-content: start;
}
.fp-about-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp-about-stat-num {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.fp-about-stat-label {
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   03 WANTED-TEASER — 7/5 Layout mit Pulse-Dot Listings + Image rechts
   ========================================================================== */
.fp-wanted-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}

.fp-wanted-content {
  display: flex;
  flex-direction: column;
}

.fp-wanted-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 20px;
  max-width: 18ch;
}
.fp-wanted-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.fp-wanted-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 0 clamp(28px, 3vw, 40px);
}

.fp-wanted-list {
  border-top: 1px solid rgba(31, 41, 55, 0.20);
}

.fp-wanted-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(31, 41, 55, 0.10);
  text-decoration: none;
  color: inherit;
  transition: background 400ms ease, padding 400ms ease;
}
.fp-wanted-item:hover {
  background: #F2F5F8;
  padding-left: 12px;
  padding-right: 12px;
}

.fp-wanted-cat-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fp-wanted-pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.fp-wanted-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: fpWantedPulse 2.4s ease-out infinite;
}
@keyframes fpWantedPulse {
  0% { transform: scale(0.5); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

.fp-wanted-cat {
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fp-wanted-info-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-dark);
}

.fp-wanted-arrow {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: color 300ms ease, transform 400ms ease;
}
.fp-wanted-item:hover .fp-wanted-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.fp-wanted-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 2.5vw, 36px);
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 300ms ease;
}
.fp-wanted-cta span {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}
.fp-wanted-cta:hover {
  color: var(--accent);
}
.fp-wanted-cta svg {
  width: 12px;
  height: 12px;
  transition: transform 300ms ease;
}
.fp-wanted-cta:hover svg {
  transform: translateX(4px);
}

/* Image-Block rechts */
.fp-wanted-image-wrap {
  position: relative;
  background: linear-gradient(135deg, #2A3849 0%, #364558 50%, #2D3E50 100%);
  min-height: 360px;
  overflow: hidden;
}
.fp-wanted-image-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================================
   SINGLE WANTED / AVAILABLE Listings (Lieferung 64)

   Editorial Detail-Page für CPT-Singles. Beide Templates (single-wanted.php
   und single-available.php) nutzen die gleichen .sw-* Klassen.

   Layout: Hero (page-hero template-part) > Detail-Grid (Meta links, Body rechts)
           > CTA-Band > Back-Link (nur Wanted).
   ========================================================================== */
.sw-section {
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px);
  background: var(--white);
}

.sw-detail-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.sw-detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(48px, 5vw, 96px);
  align-items: start;
}

.sw-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.sw-section-tag::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.sw-section-tag-num {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-right: 4px;
}

.sw-meta-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sw-meta-row {
  padding: 18px 0;
  border-top: 1px solid var(--cm-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sw-meta-row:last-child {
  border-bottom: 1px solid var(--cm-hairline);
}
.sw-meta-row dt {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.sw-meta-row dd {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}

.sw-meta-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sw-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(74, 111, 165, 0.5);
  animation: sw-pulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes sw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 111, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0); }
}
.sw-meta-status.is-active dd,
.sw-meta-status.is-active {
  color: var(--accent);
}

.sw-detail-body {
  min-width: 0;
}
.sw-detail-prose {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-dark);
  max-width: 60ch;
}
.sw-detail-prose p {
  margin: 0 0 22px;
}
.sw-detail-prose p:last-child {
  margin-bottom: 0;
}
.sw-detail-prose strong {
  color: var(--accent);
  font-weight: 500;
}

/* CTA-Band ── editorial accent strip mit Premium-Sweep-Button */
.sw-cta-band {
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 56px);
  background: var(--cm-offwhite-faint);
  border-left: 2px solid var(--accent);
}
.sw-cta-band-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  max-width: 1600px;
  margin: 0 auto;
}
.sw-cta-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0;
  max-width: 36ch;
}
.sw-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  background: var(--header-bg);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sw-cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.sw-cta-button:hover::before {
  transform: translateX(0);
}
.sw-cta-button svg {
  width: 14px;
  height: 14px;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sw-cta-button:hover svg {
  transform: translateX(4px);
}

/* Back-Link (nur Wanted, Available hat keinen weil kein Archive) */
.sw-back-link-wrap {
  margin-top: clamp(48px, 5vw, 72px);
  text-align: left;
}
.sw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  transition: color 400ms ease;
}
.sw-back-link svg {
  width: 14px;
  height: 14px;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sw-back-link:hover {
  color: var(--accent);
}
.sw-back-link:hover svg {
  transform: translateX(-4px);
}

/* ==========================================================================
   CONTACT-BAND — Helles Outro (offwhite-dim), Premium-Sweep-Button (dark)
   ========================================================================== */
.fp-contact-band {
  background: #D5DEE5;
  color: var(--text-dark);
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px); /* Lieferung 51: Padding angeglichen Option B */
}
.fp-contact-band-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.fp-contact-band-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0 0 16px;
}
.fp-contact-band-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.fp-contact-band-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 32px;
}

/* Premium-Sweep-Button — dark Bg, accent Sweep */
.fp-contact-band-button {
  display: inline-flex;
  align-items: center;
  gap: 14px; /* Lieferung 55: angeglichen an Subseiten */
  font-family: var(--font-heading);
  font-size: 11.5px; /* Lieferung 55: angeglichen an Subseiten */
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: var(--text-dark);
  padding: 20px 36px; /* Lieferung 55: angeglichen an Subseiten */
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
              letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.fp-contact-band-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.fp-contact-band-button:hover {
  color: var(--white);
  letter-spacing: 3.2px;
}
.fp-contact-band-button:hover::before { transform: translateX(0); }

.fp-contact-band-arrow {
  position: relative;
  width: 13px; /* Lieferung 55: angeglichen an Subseiten */
  height: 13px;
  overflow: hidden;
  display: inline-block;
}
.fp-contact-band-arrow svg {
  width: 13px; /* Lieferung 55: angeglichen an Subseiten */
  height: 13px;
  display: block;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.fp-contact-band-arrow svg:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
}
.fp-contact-band-button:hover .fp-contact-band-arrow svg:first-child {
  transform: translateX(130%);
}
.fp-contact-band-button:hover .fp-contact-band-arrow svg:nth-child(2) {
  transform: translateX(0);
}

/* ==========================================================================
   Default Content — Privacy Policy, Imprint, regelbasierte Pages
   Editorial-Style mit klarer Hierarchie. Verwendet Theme-Tokens damit
   Privacy-Page visuell zur restlichen Site passt. Hairlines trennen H2-
   Sektionen, Listen mit dezenten Akzent-Strichen statt Bullets.
   ========================================================================== */
.default-content {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 96px);
  font-family: var(--font-body);
  color: var(--text-dark);
}

.default-content h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--text-dark);
  margin: 0 0 clamp(12px, 1.5vw, 20px);
  text-wrap: balance;
}

.default-content h1 + p,
.default-content h1 + h2 {
  margin-top: clamp(40px, 4vw, 56px);
}

.default-content h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: clamp(64px, 6vw, 88px) 0 clamp(20px, 2vw, 28px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid rgba(31, 41, 55, 0.10);
}

.default-content > h2:first-child,
.default-content h1 + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: clamp(40px, 4vw, 56px);
}

.default-content h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: clamp(32px, 3vw, 44px) 0 clamp(14px, 1.5vw, 18px);
}

.default-content p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--subtle-gray);
  margin: 0 0 1.4em;
  max-width: 65ch;
}

.default-content p strong {
  color: var(--text-dark);
  font-weight: 500;
}

.default-content p em {
  font-style: italic;
}

.default-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  max-width: 65ch;
}

.default-content ul li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--subtle-gray);
  padding-left: 22px;
  margin-bottom: 0.65em;
  position: relative;
}

.default-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.default-content ol {
  padding-left: 24px;
  margin: 0 0 1.6em;
  max-width: 65ch;
}

.default-content ol li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--subtle-gray);
  margin-bottom: 0.65em;
  padding-left: 6px;
}

.default-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.default-content a:hover {
  color: var(--accent-light);
}

.default-content hr {
  border: none;
  border-top: 1px solid rgba(31, 41, 55, 0.10);
  margin: clamp(48px, 5vw, 72px) 0;
}

.default-content blockquote {
  margin: clamp(32px, 3vw, 48px) 0;
  padding-left: clamp(20px, 2vw, 28px);
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-dark);
  max-width: 60ch;
}

/* ==========================================================================
   Single Available — Spec-Sheet Template v1.0 (.sa-*)
   Aviation Spec-Sheet Genre: compact hero, dense spec tables, sticky context,
   related listings. Replaces editorial single-page treatment.
   ========================================================================== */

/* --- Breadcrumb ---------------------------------------------------------- */
.sa-breadcrumb {
  background: #ffffff;
  padding: 18px clamp(40px, 6vw, 96px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sa-breadcrumb-inner {
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #6e6e6e;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sa-breadcrumb-inner a {
  color: #6e6e6e;
  text-decoration: none;
  transition: color 200ms ease;
}
.sa-breadcrumb-inner a:hover { color: var(--accent, #4A6FA5); }
.sa-breadcrumb-sep { color: #9a9a9a; font-weight: 300; }
.sa-breadcrumb-current { color: #1a1a1a; }

/* --- Hero (compact, kein Editorial-Layout) ------------------------------ */
.sa-hero {
  background: #E8EDF1;
  padding: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 96px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sa-hero-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.sa-hero-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.sa-hero-kicker { color: #6e6e6e; }
.sa-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(74, 111, 165, 0.08);
  color: var(--accent, #4A6FA5);
  border-radius: 2px;
  letter-spacing: 1.8px;
}
.sa-hero-badge--inactive {
  background: rgba(0, 0, 0, 0.05);
  color: #6e6e6e;
}
.sa-hero-badge .sa-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4A6FA5);
  animation: sa-pulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes sa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 111, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0); }
}
.sa-hero-headline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #1a1a1a;
  max-width: 32ch;
  margin: 0 0 14px;
}
.sa-hero-sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: #4a4a4a;
  max-width: 60ch;
  margin: 0 0 24px;
}
.sa-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #6e6e6e;
}
.sa-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sa-hero-meta-item strong {
  color: #1a1a1a;
  font-weight: 500;
  font-feature-settings: 'tnum';
}

/* --- Spec Sheet Body (2-col grid) --------------------------------------- */
.sa-body {
  background: #ffffff;
  padding: clamp(48px, 5vw, 72px) clamp(40px, 6vw, 96px);
}
.sa-body-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
}

/* Spec Tables (left column) */
.sa-spec-group { margin-bottom: 36px; }
.sa-spec-group:last-child { margin-bottom: 0; }
.sa-spec-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  padding: 0 0 12px;
  margin: 0;
}
.sa-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', -apple-system, sans-serif;
}
.sa-spec-table tr { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.sa-spec-table td {
  padding: 14px 0;
  vertical-align: baseline;
}
.sa-spec-table .sa-spec-key {
  width: 42%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #6e6e6e;
  padding-right: 16px;
}
.sa-spec-table .sa-spec-val {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-dark);
  font-feature-settings: 'tnum';
  letter-spacing: 0.005em;
}
.sa-spec-qual {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: #9a9a9a;
  letter-spacing: 0.04em;
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
}
.sa-spec-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #4A6FA5);
  margin-right: 8px;
  vertical-align: 0.08em;
}

/* Context Column (right, sticky) */
.sa-context {
  position: sticky;
  top: 24px;
}
.sa-context-eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  padding-bottom: 0;
  margin: 0 0 24px;
}
.sa-context-prose {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dark);
  margin-bottom: 28px;
}
.sa-context-prose p { font-size: 15px; margin: 0 0 14px; }
.sa-context-prose p:last-child { margin-bottom: 0; }
.sa-context-prose strong { color: var(--text-dark); font-weight: 600; }

/* Fix 41: H3/UL/LI Cascade — Backend nutzt h3+ul für Sub-Sections.
   H3 ist als Section-Header sichtbar aber dezent; Lists kompakt und mit
   gleicher Font-Size wie Body und linke Spec-Werte. */
.sa-context-prose h3 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 20px 0 6px;
  letter-spacing: 0;
}
.sa-context-prose h3:first-child { margin-top: 0; }
.sa-context-prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.sa-context-prose li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.sa-context-prose li:last-child { margin-bottom: 0; }

.sa-context-cta {
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sa-context-cta-lead {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6e6e6e;
  margin: 0;
}
.sa-context-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: #364558;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sa-context-cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, #4A6FA5);
  transform: translateX(-101%);
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.sa-context-cta-button:hover::before { transform: translateX(0); }
.sa-context-cta-button:hover { color: #ffffff; }
.sa-context-cta-button svg {
  width: 12px;
  height: 12px;
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sa-context-cta-button:hover svg { transform: translateX(3px); }
.sa-context-cta-alt {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0;
}
.sa-context-cta-alt a {
  color: var(--accent, #4A6FA5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
  text-transform: none;
  letter-spacing: 0;
}
.sa-context-cta-alt a:hover { border-bottom-color: var(--accent, #4A6FA5); }

/* --- Related Listings --------------------------------------------------- */
.sa-related {
  background: #E8EDF1;
  padding: clamp(56px, 6vw, 88px) clamp(40px, 6vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sa-related-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.sa-related-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  gap: 16px;
  flex-wrap: wrap;
}
.sa-related-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.sa-related-link {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.sa-related-link:hover { border-bottom-color: var(--accent, #4A6FA5); }

.sa-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.sa-related-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 28px 26px;
  text-decoration: none;
  color: inherit;
  transition: background 300ms ease;
}
.sa-related-card:hover { background: #fafafa; }
.sa-related-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
}
.sa-related-card-cat {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6e6e6e;
}
.sa-related-card-status {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sa-related-card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.sa-related-card-h3 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.sa-related-card-specs {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: #4a4a4a;
  font-feature-settings: 'tnum';
  margin: 0 0 22px;
  flex: 1;
}
.sa-related-card-arrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6e6e6e;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 300ms ease;
}
.sa-related-card:hover .sa-related-card-arrow { color: var(--accent, #4A6FA5); }
.sa-related-card-arrow svg {
  width: 11px;
  height: 11px;
  transition: transform 300ms ease;
}
.sa-related-card:hover .sa-related-card-arrow svg { transform: translateX(3px); }

/* ==========================================================================
   Contact — Listing Inquiry Strip (.ct-inquiry-strip)
   Kompakter Header auf der Contact-Page, wenn User von einer Single-Available-
   Page kommt (CTA "Request Technical Details"). Ersetzt den großen Editorial-
   Hero und zeigt Listing-Kontext + Back-Link.
   ========================================================================== */
.ct-inquiry-strip {
  background: #ffffff;
  padding: 28px clamp(40px, 6vw, 96px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ct-inquiry-strip-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ct-inquiry-strip-content {
  min-width: 0;
}
.ct-inquiry-strip-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #6e6e6e;
  margin: 0 0 6px;
}
.ct-inquiry-strip-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.ct-inquiry-strip-ref {
  color: #6e6e6e;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  margin-left: 8px;
  font-size: 15px;
  white-space: nowrap;
}
.ct-inquiry-strip-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent, #4A6FA5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
  flex-shrink: 0;
}
.ct-inquiry-strip-back:hover {
  border-bottom-color: var(--accent, #4A6FA5);
}

/* ==========================================================================
   Responsive — Two-Column Sections (max-width: 1100px)
   Anhang L Konvention 3, Stufe 1: Two-Col-Layouts kollabieren auf 1-Col
   ========================================================================== */
@media (max-width: 1100px) {
  /* Single Available — Spec-Sheet two-col → 1-col */
  .sa-body-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sa-context {
    position: static;
  }

  /* Fix 42: ACMI Fleet-Grid 3 → 2 cols at tablet */
  .cm-fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Aircraft Premium V1.0 — Two-Col-Layouts kollabieren */
  .ac-availability-header,
  .ac-coverage-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ac-approach-head,
  .ac-approach-body,
  .ac-method-head,
  .ac-method-body {
    grid-column: 1 / -1;
  }
  .ac-coverage-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Engines Premium V1.0 — Two-Col-Layouts kollabieren */
  .en-availability-header,
  .en-platforms-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .en-capability-head,
  .en-capability-body {
    grid-column: 1 / -1;
  }
  .en-platform-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .en-components-grid {
    grid-template-columns: 1fr;
  }

  /* ACMI Premium V1.0 — Two-Col-Layouts kollabieren */
  .cm-inquiry-grid,
  .cm-coverage-header,
  .cm-knowledge-header,
  .cm-faq-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cm-approach-head,
  .cm-approach-body {
    grid-column: 1 / -1;
  }
  .cm-form-row.cols-4 {
    grid-template-columns: 1fr 1fr;
  }
  .cm-compare-grid,
  .cm-context-grid {
    grid-template-columns: 1fr;
  }
  .cm-knowledge-definition {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cm-coverage-capability {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cm-situation-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Wanted Premium V1.0 — Two-Col-Layouts kollabieren */
  .wn-listings-header,
  .wn-acquisition-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wn-acquisition-grid {
    grid-template-columns: 1fr;
  }

  /* Company Premium V1.0 — Two-Col-Layouts kollabieren */
  .co-background-header,
  .co-numbers-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .co-capability-head,
  .co-capability-body,
  .co-additional-head,
  .co-additional-body {
    grid-column: 1 / -1;
  }
  .co-timeline::before { display: none; }
  .co-phase {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .co-phase-year-block { padding-bottom: 8px; }
  .co-phase-year,
  .co-phase-kicker {
    background: transparent;
    padding-right: 0;
  }

  /* === Company Timeline Lit-Animation (Lieferung 61, Year-Scale Update Lieferung 63) ===
     Mobile-Lit ohne Bullet (Linie ist auf Mobile eh ausgeblendet).
     Stattdessen: Year scaled, Kicker-Underline, h3 accent. */
  .co-background .co-phase {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-background .co-phase.lit {
    opacity: 1;
  }
  .co-background .co-phase .co-phase-year {
    transform-origin: left center;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-background .co-phase.lit .co-phase-year {
    transform: scale(1.06);
  }
  .co-background .co-phase .co-phase-kicker::after {
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-background .co-phase.lit .co-phase-kicker::after {
    transform: scaleX(1);
  }
  .co-background .co-phase .co-phase-content h3 {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-background .co-phase.lit .co-phase-content h3 {
    color: var(--accent);
  }
  .co-background-conclusion {
    padding-left: 32px;
  }
  .co-background-conclusion::before {
    left: 0;
  }

  /* Contact Premium V1.0 — Two-Col-Layouts kollabieren */
  .ct-contact-body {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  /* Listing-Inquiry-Mode auf Mobile: Form zuerst, Visit-Card danach.
     Die generische "Send a message"-Headline wird ausgeblendet, weil sie
     nach dem Formular keinen redaktionellen Sinn ergibt — der User ist
     bereits in einer konkreten Inquiry. */
  .ct-contact-body--inquiry-mode .ct-form-wrap { order: -1; }
  .ct-contact-body--inquiry-mode .ct-contact-headline { display: none; }

  /* Fuel Premium V1.0 — Two-Col-Layouts kollabieren */
  .fuel-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .fuel-headline,
  .fuel-lead {
    max-width: none;
  }

  /* Front Page Premium V4.6 — Two-Col-Layouts kollabieren */
  .fp-scope-list {
    grid-template-columns: 1fr;
  }
  .fp-about-grid,
  .fp-wanted-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fp-about-image-wrap,
  .fp-wanted-image-wrap {
    min-height: 280px;
  }

  /* Coverage section header collapses to single column */
  .coverage-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .coverage-intro {
    padding-top: 0;
  }

  /* Content-Row collapses to single column at 1100px (Anhang-L Konvention 3) */
  .content-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Components two-column inner collapses at 1100px (Anhang-L Konvention 3) */
  .components-inner,
  .acquisition-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Contact: Tablet behält 2-col, reduziert Gap (Contact Spec §3.6) */
  .contact-body {
    gap: 32px;
  }

  .acquisition-intro {
    padding-top: 0;
  }

  /* ACMI: 4-col form rows → 2x2 on tablet (Spec §3.6) */
  .form-row.cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* ACMI: Capability + Knowledge-Row + Context two-col → 1col (Spec §10 CRITICAL
     V1.7 tablet-fix to avoid photo/text overlap at 961-1100px). */
  .capability-inner,
  .knowledge-row,
  .context-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .context-image {
    aspect-ratio: 16 / 9;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .request-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }


  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* ==========================================================================
   Responsive — Card Grids + Header/Footer Mobile (max-width: 960px)
   Anhang L Konvention 3, Stufe 2: Card-Grids 2x2 → 1-Col, Mobile-Header aktiv
   ========================================================================== */
@media (max-width: 960px) {
  /* Single Available — Related grid 3 → 2 cols */
  .sa-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sa-related-card:last-child {
    grid-column: 1 / -1;
  }

  /* === Lieferung 29: Hero-Höhe Tablet (analog Alt-Theme @ 768px = 460px) === */
  .hero,
  .hero-home {
    height: 460px;
  }

  /* === ACMI Mockup V1.7 Mobile === */
  .content-row-inner,
  .capability-inner,
  .knowledge-row-inner { grid-template-columns: 1fr; gap: 32px; }
  .knowledge-compare .compare-grid { grid-template-columns: 1fr; }
  .knowledge-compare .compare-col {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .knowledge-compare .compare-col:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .context-inner { grid-template-columns: 1fr; gap: 32px; }
  .context-image { aspect-ratio: 16 / 10; }
  .faq-list-grid { grid-template-columns: 1fr; gap: 0; }
  .situations-head { grid-template-columns: 1fr; gap: 24px; }
  .situation-item { padding: clamp(32px, 3.5vw, 48px) clamp(20px, 2.5vw, 32px); }
  .form-row.cols-4,
  .form-row.cols-2 { grid-template-columns: 1fr; gap: 20px; }
  .inquiry-form .form-submit { flex-direction: column; align-items: flex-start; }

  /* === Wanted Mockup V1.3 Mobile === */
  .listing-item {
    grid-template-columns: 96px 1fr auto;
    gap: clamp(18px, 2.5vw, 28px);
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px);
  }
  .listing-info h3 { font-size: clamp(17px, 2.6vw, 20px); }
  .acquisition-head { grid-template-columns: 1fr; gap: 24px; }
  .acquisition-item { padding: clamp(32px, 3.5vw, 48px) clamp(20px, 2.5vw, 32px); }

  /* === Company Mockup V1.3 Mobile === */
  .phases { grid-template-columns: 1fr; }
  .phase {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* === Contact Mockup V1.2 Mobile === */
  .contact-body { grid-template-columns: 1fr; gap: 32px; }

  /* Card grids → 1 col */

  .categories-grid {
    grid-template-columns: 1fr;
  }

  /* Engines: Platforms + Components 2x2 → 1col (Anhang-L Konvention 3, Stufe 2) */
  .platforms-grid,
  .components-grid {
    grid-template-columns: 1fr;
  }

  /* ACMI: form-rows fully stack, numbers/compare/faq-2col collapse */
  .form-row.cols-4,
  .form-row.cols-2 {
    grid-template-columns: 1fr;
  }


  /* Compare grid: vertical hairline → horizontal between columns */

  .compare-col--wet {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-right: 0;
    padding-bottom: clamp(28px, 4vw, 40px);
  }

  .compare-col--dry {
    padding-left: 0;
  }

  .faq-section.faq-2col .faq-list {
    grid-template-columns: 1fr;
  }

  .company-stats {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }





  /* Listing component — tablet (compact 3-col) */

  .listing-body h3 {
    font-size: clamp(17px, 2.6vw, 20px);
  }

  /* Page Hero — Hero-Foot collapses to single column on mobile-phase */
  .page-hero-foot {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  /* Lieferung 33: page-hero fixed height tablet */
  .page-hero {
    height: 400px;
  }

  /* Mobile header (hamburger active, desktop nav hidden) */
  .header-logo {
    height: 117px;
  }

  .logo-svg {
    height: 93px;
  }

  .logo-tagline {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-nav-backdrop {
    display: block;
  }

  .header-nav,
  .header-line-top,
  .header-line-bottom {
    display: none;
  }

  /* Mobile footer (full collapse) */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-brand p {
    max-width: none;
  }

  .footer-brand .logo-svg {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 20px 24px;
  }

  /* Hero & section padding scale-down on mobile-phase
     Hinweis: Homepage-Hero (.hero / .hero-home) skaliert automatisch via clamp()
     in den Basis-Definitionen — hier nur noch der Page-Hero-Banner für Subseiten. */
  .hero-banner {
    height: 320px;
  }

  .hero-banner .hero-content h1 {
    font-size: 30px;
  }







  /* Homepage Hero (V3.6) — Mobile-Stack
     Hero-Höhe auf 540px erhöht (von 460px geerbt aus 960px-Stage), damit
     Lead-Text + Meta-Block auf 412-440px Phones (Pixel 7, iPhone XR/14 PMax/
     16 PMax, Galaxy S20) sauber mit Buffer reinpassen. Bild-Komposition
     bleibt erhalten via object-fit: cover, object-position: center.
     Hero-Foot kompakter (gap 16, padding-top 22) für sauberen Übergang. */
  .hero,
  .hero-home {
    height: 540px;
  }
  .hero-inner {
    padding: clamp(60px, 11vw, 88px) 0 clamp(40px, 8vw, 56px);
    gap: clamp(24px, 4vw, 36px);
  }
  .hero h1,
  .hero-home h1 {
    font-size: clamp(36px, 9.5vw, 48px);
    line-height: 1.04;
  }
  .hero-foot,
  .hero-home .hero-foot {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 20px;
  }
  .hero-sub {
    font-size: 14px;
    line-height: 1.45;
  }
  .hero-meta {
    text-align: left;
    font-size: 9.5px;
    letter-spacing: 2px;
    line-height: 1.7;
  }

  /* Aircraft/Engines content-row — 1-spaltig auf Mobile */
  .content-row-inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
  }

}

/* ==========================================================================
   Responsive — Sub-Components (max-width: 600px)
   Anhang L Konvention 3, Stufe 3: Listings stacken voll, Forms kompakt
   ========================================================================== */
@media (max-width: 600px) {
  /* Fix 42: ACMI Fleet-Grid 2 → 1 col on mobile */
  .cm-fleet-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cm-fleet-card {
    padding: 24px 22px 22px;
  }

  /* Contact Inquiry Strip — mobile stack */
  .ct-inquiry-strip {
    padding-left: 24px;
    padding-right: 24px;
  }
  .ct-inquiry-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ct-inquiry-strip-title {
    font-size: 16px;
  }
  .ct-inquiry-strip-ref {
    display: block;
    margin-left: 0;
    margin-top: 4px;
    font-size: 13px;
  }

  /* Single Available — Phone */
  .sa-breadcrumb,
  .sa-hero,
  .sa-body,
  .sa-related {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sa-hero {
    padding-top: 36px;
    padding-bottom: 28px;
  }
  .sa-hero-headline {
    font-size: 22px;
    max-width: none;
  }
  .sa-hero-sub {
    font-size: 15px;
  }
  .sa-hero-meta {
    flex-direction: column;
    gap: 8px;
  }
  .sa-hero-meta-item {
    font-size: 10px;
  }
  .sa-spec-table .sa-spec-key {
    width: 48%;
    font-size: 10px;
    padding-right: 12px;
  }
  .sa-spec-table .sa-spec-val {
    font-size: 14px;
  }
  .sa-context-cta-button {
    width: 100%;
    justify-content: center;
  }
  .sa-related-grid {
    grid-template-columns: 1fr;
  }
  .sa-related-card:last-child {
    grid-column: auto;
  }
  .sa-related-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* === Aircraft Premium V1.0 — Phone (Lieferung 35) === */
  .ac-section { padding: 80px 24px; }
  .ac-coverage-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .ac-coverage-index { font-size: 56px; }
  .ac-coverage-item--feature { padding: 40px 0; }

  /* === Aircraft Coverage Lit-Animation (Lieferung 58) ===
     ac-coverage-items werden via .lit aktiviert beim Scroll-Eintritt.
     Pattern-konsistent mit Engines Section 03 und ACMI Coverage. */
  .ac-coverage .ac-coverage-item {
    opacity: 0.4;
    position: relative;
    z-index: 1;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ac-coverage .ac-coverage-item.lit {
    opacity: 1;
  }

  /* Background-Streifen full-bleed über Section-Padding (-24px).
     Überschreibt den Desktop-::before (vertikaler Akzent-Strich). */
  .ac-coverage .ac-coverage-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    width: auto;
    background: rgba(255, 255, 255, 0.25);
    transform: none;
    opacity: 0;
    transition: opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
  }
  .ac-coverage .ac-coverage-item.lit::before {
    opacity: 1;
  }

  .ac-coverage .ac-coverage-item .ac-coverage-index {
    opacity: 0.5;
    transform: translateX(-12px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ac-coverage .ac-coverage-item.lit .ac-coverage-index {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }

  /* Category-Underline-Draw: scaleX(0 → 1) bei .lit.
     Überschreibt den 48px Desktop-::after auf volle Kicker-Breite. */
  .ac-coverage .ac-coverage-item .ac-coverage-category::after {
    width: 100%;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ac-coverage .ac-coverage-item.lit .ac-coverage-category::after {
    transform: scaleX(1);
  }

  .ac-method-rule { grid-template-columns: 1fr; gap: 24px; }

  /* === Engines Premium V1.0 — Phone (Lieferung 40) === */
  .en-section { padding: 80px 24px; }
  .en-platform-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .en-platform-index { font-size: 56px; }
  .en-platform-item--feature { padding: 40px 0; }

  /* === Listings Mobile Override — Variante B (Lieferung 57) ===
     Aircraft + Engines Listings werden auf Mobile zu vertikal-stacked
     Card-Stack mit Status-Badge + Accent-CTA-Button. Desktop bleibt
     altes 3-Spalten-Grid (siehe oben).

     WICHTIG: align-items: stretch explicit setzen damit das Desktop-default
     'align-items: center' (das bei display:grid vertikal-center bedeutet)
     auf flex-column nicht als horizontal-center der Children durchgreift. */
  .ac-listing,
  .en-listing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 28px 0;
  }

  /* Hover-Padding-Shift weg auf Mobile */
  .ac-listing:hover,
  .en-listing:hover {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
  }

  /* Top-Row: zurück zu flex statt display:contents */
  .ac-listing-top,
  .en-listing-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* Badge sichtbar auf Mobile */
  .ac-listing-badge,
  .en-listing-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(74, 111, 165, 0.10);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
    border-radius: 1px;
    flex-shrink: 0;
  }

  .ac-listing-badge::before,
  .en-listing-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
  }

  /* Title etwas prominenter auf Mobile */
  .ac-listing-body h3,
  .en-listing-body h3 {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.014em;
    margin: 0 0 4px;
  }

  .ac-listing-body strong,
  .en-listing-body strong {
    color: var(--text-dark);
  }

  /* Fix 51: Alle Listing-CTAs (.ac-, .en-, .wn-) auf Mobile als Button.
     Fix 50 rückgängig — Mario will Buttons auf Mobile für alle drei, da
     Text-Links unübersichtlich wirken. Wanted-spezifische Desktop-Werte
     (border-bottom + padding-bottom 6px) werden hier überschrieben. */
  .ac-listing-cta,
  .en-listing-cta,
  .wn-listing-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 14px 26px;
    background: var(--accent);
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-bottom: none;
    border-radius: 1px;
    align-self: flex-start;
    transition: color 500ms cubic-bezier(0.65, 0, 0.35, 1),
                letter-spacing 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Border-Bottom unter Text auf Mobile entfernen — auf Button nicht passend.
     Wanted hat keinen <span>-Wrapper für den Text, nur AC/EN. */
  .ac-listing-cta > span:first-child,
  .en-listing-cta > span:first-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Sweep-Layer: Text-Dark slidet von links rein. Funktioniert für alle drei
     da ::before unabhängig von HTML-Inhalt. */
  .ac-listing-cta::before,
  .en-listing-cta::before,
  .wn-listing-cta::before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text-dark);
    transform: translateX(-101%);
    transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
  }

  /* Auf Touch ist :hover unzuverlässig, aber auf Tablets oder Desktop-Resize
     funktioniert es. Plus :active für Touch-Feedback */
  .ac-listing-cta:hover,
  .en-listing-cta:hover,
  .wn-listing-cta:hover,
  .ac-listing-cta:active,
  .en-listing-cta:active,
  .wn-listing-cta:active {
    color: #FFFFFF;
    letter-spacing: 3.2px;
  }

  .ac-listing-cta:hover::before,
  .en-listing-cta:hover::before,
  .wn-listing-cta:hover::before,
  .ac-listing-cta:active::before,
  .en-listing-cta:active::before,
  .wn-listing-cta:active::before {
    transform: translateX(0);
  }

  /* Arrow-Wrapper Aircraft + Engines (haben .{ns}-listing-cta-arrow Wrapper
     mit zwei SVGs für Slide-Pattern). Wanted hat direct SVG im <a>. */
  .ac-listing-cta-arrow,
  .en-listing-cta-arrow {
    width: 13px;
    height: 13px;
    overflow: hidden;
  }

  .ac-listing-cta-arrow svg,
  .en-listing-cta-arrow svg {
    width: 13px;
    height: 13px;
    transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Zweites SVG sichtbar auf Mobile (für Slide-Pattern) */
  .ac-listing-cta-arrow svg:nth-child(2),
  .en-listing-cta-arrow svg:nth-child(2) {
    display: block;
    position: absolute;
    inset: 0;
    transform: translateX(-130%);
  }

  .ac-listing-cta:hover .ac-listing-cta-arrow svg:first-child,
  .en-listing-cta:hover .en-listing-cta-arrow svg:first-child,
  .ac-listing-cta:active .ac-listing-cta-arrow svg:first-child,
  .en-listing-cta:active .en-listing-cta-arrow svg:first-child {
    transform: translateX(130%);
  }

  .ac-listing-cta:hover .ac-listing-cta-arrow svg:nth-child(2),
  .en-listing-cta:hover .en-listing-cta-arrow svg:nth-child(2),
  .ac-listing-cta:active .ac-listing-cta-arrow svg:nth-child(2),
  .en-listing-cta:active .en-listing-cta-arrow svg:nth-child(2) {
    transform: translateX(0);
  }

  /* Wanted-spezifisch: direct SVG im <a>, kein -arrow Wrapper. Einfacher
     Translate-Hover statt Slide-Pattern. */
  .wn-listing-cta svg {
    width: 13px;
    height: 13px;
    position: relative;
    z-index: 1;
    transition: transform 300ms ease;
  }
  .wn-listing-cta:hover svg,
  .wn-listing-cta:active svg {
    transform: translateX(4px);
  }

  /* Mobile-Reveal-Konzept (Lieferung 56):
     Section-Container erscheint INSTANT, der Content animiert smooth ein.
     - .reveal selbst wird sofort sichtbar (kein Slide-Up der Section)
     - Inhalte starten gedimmt (opacity 0.25)
     - Werden via .lit Klasse aktiviert wenn sie selbst ins Viewport scrollen
     - Per-Item Activation: jedes Item wird hell wenn ES persönlich sichtbar ist
       (wie Lichterkette, Raum für Raum) statt alle gleichzeitig per Stagger */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Engine Platforms — Items werden via .lit aktiviert (vom JS gesetzt
     wenn Item zu 40% ins Viewport scrollt). Multi-Property-Animation:
     - Item-Opacity dim → hell
     - Background-Sweep von links nach rechts (wie Highlighter-Strich,
       NICHT als isolierte Karte)
     - Index-Number macht Auftritt mit Slide-In + Color + Opacity
     Editorial Premium, durchdacht, nicht Web2.0-Card. */
  .en-platforms .en-platform-item {
    opacity: 0.4;
    position: relative;
    z-index: 1;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .en-platforms .en-platform-item.lit {
    opacity: 1;
  }

  /* Background-Fade: full-bleed über Section-Padding hinaus bis Browser-Rand
     (left/right -24px = Section-Padding-Wert auf Mobile). Sanftes Einblenden
     statt Sweep — wirkt wie ein Editorial-Highlight-Streifen der einfach
     erscheint, nicht wie eine wachsende Card. */
  .en-platforms .en-platform-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    width: auto;
    background: rgba(255, 255, 255, 0.25);
    transform: none;
    opacity: 0;
    transition: opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
  }
  .en-platforms .en-platform-item.lit::before {
    opacity: 1;
  }

  .en-platforms .en-platform-item .en-platform-index {
    opacity: 0.5;
    transform: translateX(-12px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .en-platforms .en-platform-item.lit .en-platform-index {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }

  /* Underline unter dem Kicker (NARROWBODY etc.): wird beim .lit
     von links nach rechts gezeichnet. scaleX(0 → 1) mit transform-origin
     left center. Dünne Hairline in --accent unterstreicht den Kicker
     subtil, wirkt wie ein Editorial-Marker der "gezeichnet" wird. */
  .en-platforms .en-platform-item .en-platform-category {
    position: relative;
    padding-bottom: 6px;
  }
  .en-platforms .en-platform-item .en-platform-category::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .en-platforms .en-platform-item.lit .en-platform-category::after {
    transform: scaleX(1);
  }

  .en-listing-cta { font-size: 10px; }
  .en-component-cell {
    padding-left: 56px;
  }
  .en-component-cell::before { font-size: 48px; }
  .en-component-cell::after { left: 56px; }
  .en-components-closing { padding-left: 36px; }

  /* === Components-Cell Mobile-Lit-Animation (Lieferung 56) ===
     Items werden via .lit aktiviert wenn sie ins Viewport scrollen.
     - KEIN Background-Fade (Section 04 hat eigenen Section-Background,
       brauchen kein zusätzliches Lit-Background)
     - Index (::before) macht Auftritt: Color + Translate + Opacity
     - Underline auf Kicker (nicht auf Cell) für klaren Abstand zum Text
     - H3 wird accent
     Konsistent mit Section 03 Pattern. */

  /* Index (::before) Lit-Animation: starts gedimmt + leicht versetzt,
     bei .lit voll sichtbar in --accent. */
  .en-components .en-component-cell::before {
    opacity: 0.5;
    transform: translateX(-12px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .en-components .en-component-cell.lit::before {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }

  /* Default-Underline (auf Cell) auf Mobile deaktivieren — Position via
     Pixel-Calc klebt sonst am Text. Stattdessen neue Underline direkt
     auf dem Kicker mit eigenem padding-bottom für sauberen Abstand. */
  .en-components .en-component-cell::after {
    display: none;
  }

  .en-components .en-component-cell .en-component-kicker {
    position: relative;
    padding-bottom: 8px;
  }

  .en-components .en-component-cell .en-component-kicker::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .en-components .en-component-cell.lit .en-component-kicker::after {
    transform: scaleX(1);
  }

  /* H3 wird accent beim Lit (wie Desktop-Hover) */
  .en-components .en-component-cell h3 {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .en-components .en-component-cell.lit h3 {
    color: var(--accent);
  }

  /* === ACMI Premium V1.0 — Phone (Lieferung 42, Two-Step Lieferung 56) === */
  .cm-section { padding: 80px 24px; }
  .cm-inquiry-form { padding: 32px 24px; }
  .cm-form-row.cols-4,
  .cm-form-row.cols-3,
  .cm-form-row.cols-2 {
    grid-template-columns: 1fr;
  }
  .cm-service-cards { grid-template-columns: 1fr 1fr; }
  .cm-progress { font-size: 9.5px; gap: 8px; }
  .cm-progress-step { gap: 8px; }
  .cm-progress-step span:not(.cm-progress-step-num) { display: none; }
  .cm-step-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }
  .cm-step-nav .cm-btn { justify-content: center; }
  .cm-step-nav-info { text-align: center; }
  .cm-situation-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .cm-situation-index { font-size: 56px; }

  /* === ACMI Coverage Lit-Animation (Lieferung 57) ===
     Items werden via .lit aktiviert wenn 40% ins Viewport gescrollt
     (IntersectionObserver in animations.js).
     Pattern identisch zu en-platform-item für Theme-Konsistenz:
     - Item-Opacity dim → hell
     - Background-Sweep full-bleed (Editorial-Highlight-Streifen)
     - Index-Auftritt: translate + color + opacity
     - Category-Underline wird "gezeichnet" */
  .cm-coverage .cm-situation-item {
    opacity: 0.4;
    position: relative;
    z-index: 1;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cm-coverage .cm-situation-item.lit {
    opacity: 1;
  }

  /* Background-Streifen full-bleed über Section-Padding (-24px = Padding-Wert).
     Überschreibt den Desktop-::before (vertikaler Akzent-Strich). */
  .cm-coverage .cm-situation-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    width: auto;
    background: rgba(255, 255, 255, 0.25);
    transform: none;
    opacity: 0;
    transition: opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
  }
  .cm-coverage .cm-situation-item.lit::before {
    opacity: 1;
  }

  .cm-coverage .cm-situation-item .cm-situation-index {
    opacity: 0.5;
    transform: translateX(-12px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cm-coverage .cm-situation-item.lit .cm-situation-index {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }

  /* Category-Underline-Draw: scaleX(0 → 1) bei .lit.
     Überschreibt den 48px Desktop-::after auf volle Kicker-Breite. */
  .cm-coverage .cm-situation-item .cm-situation-category::after {
    width: 100%;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cm-coverage .cm-situation-item.lit .cm-situation-category::after {
    transform: scaleX(1);
  }

  /* === ACMI Knowledge Section 04 — Compare Lit-Animation ===
     Compare-Cols werden via .lit aktiviert beim Scroll-Eintritt.
     Mobile-only Pattern konsistent mit Engines / Coverage. */
  .cm-knowledge .cm-compare-col {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cm-knowledge .cm-compare-col.lit {
    opacity: 1;
  }
  /* Kicker-Underline Draw beim Lit — überschreibt den Desktop-Hover-Trigger
     mit Scroll-Reveal-Logik. */
  .cm-knowledge .cm-compare-col .cm-compare-kicker::after {
    width: 100%;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cm-knowledge .cm-compare-col.lit .cm-compare-kicker::after {
    transform: scaleX(1);
  }
  /* Vertical Strip beim Lit — wächst auf volle Höhe. */
  .cm-knowledge .cm-compare-col.lit::before {
    transform: scaleY(1);
  }

  .cm-approach-numbers {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cm-approach-num-item {
    align-items: center;
    text-align: center;
  }
  .cm-context-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .cm-context-image {
    height: 360px;
  }

  /* === Wanted Premium V1.0 — Phone (Lieferung 44) === */
  .wn-section { padding: 80px 24px; }
  .wn-listing-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .wn-listing-item.is-link:hover {
    padding-left: 0;
    padding-right: 0;
  }
  .wn-listing-aside { justify-content: space-between; }

  /* Filter-Tabs Mobile: Grid 2x2 damit alle 4 Tabs + Zahlen sichtbar
     sind (statt horizontal-scroll wo Zahlen abgeschnitten werden). */
  .wn-filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }
  .wn-filter-tab {
    padding: 13px 14px;
    font-size: 10.5px;
    justify-content: space-between;
    gap: 8px;
  }
  .wn-filter-tab-count { font-size: 13px; }

  /* Fix 49: Aircraft-Page Filter-Tabs analog zu Wanted — 2x2 Grid auf Mobile
     damit alle 4 Pills (ALL · SALE · DRY LEASE · ACMI) inkl. Zahlen sichtbar
     sind, statt horizontal-scroll wo ACMI abgeschnitten wird. */
  .ac-filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }
  .ac-filter-tab {
    padding: 13px 14px;
    font-size: 10.5px;
    justify-content: space-between;
    gap: 8px;
  }
  .ac-filter-tab-count { font-size: 13px; }

  .wn-acquisition-item {
    padding-left: 56px;
  }
  .wn-acquisition-item::before { font-size: 48px; }
  .wn-acquisition-note { padding-left: 36px; }

  /* === Wanted Permanent Interest Lit-Animation (Lieferung 59, Pattern wie
         Engines 04 Components & Parts — Lieferung 60 Mobile-Fix) ===
     - ::before Index Lit-Auftritt: opacity + translate + color
     - Underline auf Kicker (statt Cell) für sauberen Abstand zum h3
     - H3 wird accent */
  .wn-acquisition .wn-acquisition-item {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wn-acquisition .wn-acquisition-item.lit {
    opacity: 1;
  }
  .wn-acquisition .wn-acquisition-item::before {
    opacity: 0.5;
    transform: translateX(-12px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wn-acquisition .wn-acquisition-item.lit::before {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }
  /* Kicker-Underline draw beim Lit (überschreibt Desktop-Hover-Trigger). */
  .wn-acquisition .wn-acquisition-item .wn-acq-kicker::after {
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wn-acquisition .wn-acquisition-item.lit .wn-acq-kicker::after {
    transform: scaleX(1);
  }
  .wn-acquisition .wn-acquisition-item h3 {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wn-acquisition .wn-acquisition-item.lit h3 {
    color: var(--accent);
  }

  /* === Company Premium V1.0 — Phone (Lieferung 45) === */
  .co-section { padding: 80px 24px; }
  .co-numbers-grid {
    grid-template-columns: 1fr;
  }
  .co-numbers-item {
    border-right: none;
    align-items: center;
    text-align: center;
  }
  .co-numbers-num { font-size: clamp(48px, 12vw, 64px); }

  /* === Company Numbers Lit-Animation (Lieferung 61) ===
     co-numbers-items werden via .lit aktiviert beim Scroll-Eintritt.
     Auf Mobile sind sie 1-spaltig untereinander.
     Animation: dim → bright + Number wird accent-light + slide-up. */
  .co-numbers .co-numbers-item {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-numbers .co-numbers-item.lit {
    opacity: 1;
  }
  .co-numbers .co-numbers-item .co-numbers-num {
    transform: translateY(8px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .co-numbers .co-numbers-item.lit .co-numbers-num {
    color: var(--accent-light);
    transform: translateY(0);
  }

  /* === Contact Premium V1.0 — Phone (Lieferung 46) === */
  .ct-section { padding: 80px 24px; }
  .ct-form-wrap { padding: 32px 24px; }
  .ct-form-row.cols-2 { grid-template-columns: 1fr; }
  .ct-form-submit {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .ct-form-privacy { text-align: left; }
  .ct-contact-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* === Fuel Premium V1.0 — Phone (Lieferung 47) === */
  .fuel-section { padding: 80px 24px; }
  .fuel-form-card { padding: 32px 24px; }
  .fuel-form-row.cols-2 { grid-template-columns: 1fr; }
  .fuel-form-submit {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .fuel-form-privacy { text-align: left; }

  /* === Single Wanted/Available — Phone (Lieferung 64) === */
  .sw-section { padding: 64px 24px; }
  .sw-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sw-detail-prose { font-size: 17px; }
  .sw-cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .sw-cta-button { width: 100%; justify-content: center; }

  /* === Default Content (Privacy etc) — Phone === */
  .default-content {
    padding: clamp(64px, 11vw, 88px) clamp(20px, 5vw, 32px);
  }
  .default-content h1 {
    font-size: clamp(30px, 8vw, 40px);
  }
  .default-content h2 {
    font-size: clamp(22px, 5.6vw, 28px);
    margin-top: clamp(48px, 10vw, 64px);
    padding-top: clamp(32px, 7vw, 44px);
  }
  .default-content h3 {
    font-size: 12px;
    letter-spacing: 1.6px;
  }
  .default-content p,
  .default-content ul li,
  .default-content ol li {
    font-size: 15.5px;
    line-height: 1.7;
  }
  .default-content blockquote {
    font-size: 16px;
  }

  /* === Front Page Premium V4.6 — Phone (Lieferung 48) === */
  .fp-section { padding: 64px 20px; }
  .fp-contact-band { padding: 64px 20px; }

  /* Wanted-Items: Premium-Atemraum + Pfeil immer rechts (vertikal zentriert
     über beide Zeilen via grid-template-areas), Engine-Name mit Abstand. */
  .fp-wanted-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "cat arrow"
      "info arrow";
    column-gap: 20px;
    row-gap: 6px;
    padding: 22px 0;
    align-items: center;
  }
  .fp-wanted-cat-wrap {
    grid-area: cat;
  }
  .fp-wanted-info-text {
    grid-area: info;
    font-size: 16px;
    padding-right: 4px;
  }
  .fp-wanted-arrow {
    grid-area: arrow;
    align-self: center;
  }

  /* About-Stats: 3-spaltig zentriert (Number über Label, beide horizontal
     zentriert in ihrer Spalte). 3 Stats + leerer Quadrant rechts unten war
     ästhetisch unbalanciert in 2-spaltig. */
  .fp-about-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .fp-about-stat {
    align-items: center;
    text-align: center;
  }
  .fp-about-stat-num {
    font-size: 26px;
  }
  .fp-about-stat-label {
    font-size: 8.5px;
    letter-spacing: 1.5px;
    line-height: 1.3;
  }

  /* === Frontpage Mobile Lit-Animationen (Lieferung 65) ===
     Drei Element-Gruppen werden via .lit aktiviert beim Scroll-Eintritt.
     Pattern-konsistent mit den Sub-Pages, kein generischer Standard-Fade. */

  /* Section 01 Scope — die 4 Service-Cards (Aircraft/Engines/ACMI/Wanted) */
  .fp-section--white .fp-scope-item {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit {
    opacity: 1;
  }
  /* Background-Index (01, 02, 03, 04) — wird accent beim Lit */
  .fp-section--white .fp-scope-item::before {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit::before {
    color: var(--accent);
    transform: translateX(-4px);
  }
  /* Haarlinie — wird beim Lit gezeichnet (scaleX 0 → 1), volle Breite auf Mobile */
  .fp-section--white .fp-scope-item::after {
    width: calc(100% - clamp(48px, 4vw, 72px) - 36px);
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit::after {
    transform: scaleX(1);
  }
  .fp-section--white .fp-scope-item .fp-scope-kicker {
    transform: translateX(-12px);
    opacity: 0.5;
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit .fp-scope-kicker {
    color: var(--accent);
    transform: translateX(0);
    opacity: 1;
  }
  .fp-section--white .fp-scope-item .fp-scope-arrow {
    transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit .fp-scope-arrow {
    transform: translateX(6px);
    color: var(--accent);
  }
  .fp-section--white .fp-scope-item h3 {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-section--white .fp-scope-item.lit h3 {
    color: var(--accent);
  }

  /* Section 02 About — die 4 Stats (Years / Network / Swiss / 24-7) */
  .fp-about-stat {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-about-stat.lit {
    opacity: 1;
  }
  .fp-about-stat .fp-about-stat-num {
    transform: translateY(8px);
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-about-stat.lit .fp-about-stat-num {
    color: var(--accent-light);
    transform: translateY(0);
  }

  /* Section 03 Wanted — die Listing-Cards (Engine CFM56-3C2 etc.) */
  .fp-wanted-item {
    opacity: 0.4;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-wanted-item.lit {
    opacity: 1;
  }
  .fp-wanted-item .fp-wanted-cat {
    transition: color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-wanted-item.lit .fp-wanted-cat {
    color: var(--accent);
  }
  .fp-wanted-item .fp-wanted-arrow {
    transform: translateX(-6px);
    opacity: 0.5;
    transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                color 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fp-wanted-item.lit .fp-wanted-arrow {
    transform: translateX(0);
    opacity: 1;
    color: var(--accent);
  }

  /* === ACMI Mockup V1.7 — Phone === */
  .situation-list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .situation-item {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .situation-item:last-child { border-bottom: none !important; }
  .inquiry-form-wrap { padding: 32px 24px; }

  /* === Wanted Mockup V1.3 — Phone === */
  .listing-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }
  .listing-cat-wrap { justify-content: flex-start; }
  .listing-info h3 { font-size: 18px; }
  .listing-desc { font-size: 14px; }
  .listing-aside {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .acquisition-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .acquisition-item {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .acquisition-item:last-child { border-bottom: none !important; }

  /* Listing component — full stack (1 col, tag/headline/body/cta vertical) */

  .listing-tag,
  .listing-cta {
    width: max-content;
  }

  .listing-body h3 {
    font-size: 18px;
  }

  .listing-body p {
    font-size: 14px;
  }

  /* Wanted aside: row layout (status left, CTA right) on mobile */
  .listing-aside {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Page Hero — meta block switches to row layout (Brand · Label inline) */
  .page-hero-meta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  /* Lieferung 33: page-hero fixed height mobile */
  .page-hero {
    height: 320px;
  }

  /* Coverage grid collapses to single column; vertical borders removed,
     horizontal hairlines retained between items 1, 2, 3 (item 4 stays open) */
  .coverage-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3),
  .coverage-item:nth-child(4) {
    padding-left: 0;
    padding-right: 0;
    border-right: none;
  }

  .coverage-item:nth-child(2) {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  /* Forms compact */

  .form-group.full {
    grid-column: span 1;
  }



  /* Wanted: Acquisition 2x2 → 1col, listings-empty stacks vertically */
  .acquisition-grid {
    grid-template-columns: 1fr;
  }

  .listings-empty {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-submit {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .filter-tabs {
    justify-content: flex-start;
  }

  /* Other sub-component tweaks */
  .request-image img {
    height: 280px;
  }

  .form-modal {
    padding: 40px 28px 36px;
  }

  .form-modal-title {
    font-size: 22px;
  }

  .plane-svg {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   Responsive — Small Phones (max-width: 420px)
   Range: iPhone SE / 13 mini (375), iPhone 13/14/15/16 standard (390/393),
   iPhone XR / Pixel 7 / Galaxy S20 (412-414), Galaxy S8+ (360).
   Phones >= 421px (iPhone 14 Pro Max 430, iPhone 16 Pro Max 440)
   greifen NICHT — dort gilt die 600px-Stage (Lead 14px / Meta 9.5px).
   ========================================================================== */
@media (max-width: 420px) {
  .header-logo {
    height: 101px;
  }

  .logo-svg {
    height: 75px;
  }

  /* Homepage Hero — Lead + Meta bleiben sichtbar, Schrift weiter komprimiert
     damit auf 360-414px Phones der Inhalt sicher in 540px Hero-Höhe passt.
     H1 reduziert um vertikalen Platz für Lead-Text zu schaffen. */
  .hero h1,
  .hero-home h1 {
    font-size: clamp(32px, 8.8vw, 40px);
    line-height: 1.05;
    max-width: none;
  }
  .hero-inner {
    padding: clamp(48px, 12vw, 72px) 0 clamp(32px, 8vw, 48px);
    gap: clamp(20px, 4.5vw, 28px);
  }
  .hero-foot,
  .hero-home .hero-foot {
    gap: 10px;
    padding-top: 16px;
  }
  .hero-sub {
    font-size: 13px;
    line-height: 1.4;
  }
  .hero-meta {
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .hero-banner {
    height: 320px;
  }

  .hero-banner .hero-content h1 {
    font-size: 24px;
  }

  .about-text h2 {
    font-size: 28px;
  }

  .stat-value {
    font-size: 28px;
  }
}

/* ==========================================================================
   Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .en-platforms .en-platform-item {
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }

  .hero-keywords,
  .hero-content h1,
  .hero-subtitle {
    opacity: 1;
    animation: none;
  }

  .mobile-nav-inner li {
    opacity: 1;
    transform: none;
  }
}