/* Schriften lokal ausgeliefert (SIL Open Font License 1.1, s. assets/fonts/LICENSE).
   Bewusst NICHT von fonts.googleapis.com: dabei geht die IP jedes Besuchers an
   Google. Fuer eine Seite, die mit "Private Cloud in Deutschland, DSGVO-konform"
   wirbt, waere das ein Widerspruch - und deutsche Gerichte haben das Einbinden
   ohne Einwilligung bereits als Rechtsverstoss gewertet. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/inter-tight-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/inter-tight-latin-900-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===========================================================================
   PIM-PILOTS MICROSITE — UX/UI-optimierte Fassung
   Alles unter #pim-pilots gescoped (Payload-Block-safe, kein Global-Leak).
   Token-System: Farbe / Abstand / Radius / Elevation / Motion.
   =========================================================================== */

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

html { background: #0B1320 }

#pim-pilots {
  /* ---- Bilder ------------------------------------------------------------
     EMPFEHLUNG: Beide Data-URIs durch echte Media-URLs ersetzen. Dann sind
     die Assets cachebar, das HTML wird ~15 KB kleiner und das Logo ist als
     SVG scharf auf jedem Display. Bis dahin: Base64 inline.
     ---------------------------------------------------------------------- */
  --logo: url('logo.png');
  --portrait: url('roland-baier.webp');

  /* ---- Marke -------------------------------------------------------- */
  --o:      #FF6B2B;   /* Brand-Orange: Flächen, Grafik, Akzente          */
  --o-2:    #FF8A3D;   /* Gradient-Endpunkt                               */
  --o-lt:   #FFB347;   /* Orange hell — nur auf dunklem Grund             */
  --o-txt:  #B4400C;   /* Orange als TEXT auf hellem Grund (AA 5.7:1)     */
  --o-ring: #FFB347;   /* Fokusring auf dunkel                            */

  /* ---- Navy-Skala --------------------------------------------------- */
  --nv-900: #0B1320;
  --nv-800: #0F1E38;
  --nv-700: #16294B;
  --nv-600: #1A3A6B;
  --foot:   #060D18;

  /* ---- Text --------------------------------------------------------- */
  --ink:    #0B1320;   /* primär auf hell                                 */
  --ink-2:  #3D4759;   /* sekundär auf hell            9.4:1              */
  --ink-3:  #526480;   /* gedämpft auf hell            6.0:1              */
  --on-dk:  #FFFFFF;
  --on-dk-2:#C7D3E4;   /* sekundär auf dunkel         11.0:1              */
  --on-dk-3:#93A5BF;   /* gedämpft auf dunkel          6.6:1              */

  /* ---- Flächen & Linien --------------------------------------------- */
  --surf:   #FFFFFF;
  --surf-2: #F4F7FB;
  --line:   #E2E8F0;
  --line-2: #EFF3F8;
  --bd-dk:  rgba(255,255,255,.10);

  /* ---- Semantik ----------------------------------------------------- */
  --gr:     #22C55E;   /* Grün auf dunkel                                 */
  --gr-2:   #4ADE80;
  --gr-txt: #166534;   /* Grün als Text auf hell — auf den grün getönten
                          Tabellenzeilen bleiben so 6.1:1 statt 4.3:1     */
  --rd-txt: #B91C1C;   /* Rot als Text auf hell        6.5:1              */

  /* ---- Radius / Elevation / Motion --------------------------------- */
  --r-s: 8px;
  --r:   12px;
  --r-l: 16px;
  --r-p: 999px;
  --sh-1: 0 1px 2px rgba(11,19,32,.06), 0 2px 8px rgba(11,19,32,.04);
  --sh-2: 0 4px 12px rgba(11,19,32,.08), 0 14px 34px rgba(11,19,32,.07);
  --sh-o: 0 4px 16px rgba(255,107,43,.30);
  --t: 170ms cubic-bezier(.4,0,.2,1);

  /* ---- Layout ------------------------------------------------------- */
  --hh: 60px;                                    /* Header-Höhe          */
  --pad-x: clamp(20px, 5vw, 32px);
  --pad-y: clamp(56px, 8vw, 92px);
  --wrap: 1060px;

  /* Bezugsrahmen fuer alles Absolut-Positionierte im Block. Fehlte das,
     verankerte sich z. B. der Skip-Link am Payload-Layout und ragte oben
     links halb in die Seite.
     BEWUSST KEIN isolation:isolate: das kapselt zwar die z-index-Ebenen
     gegen die Seite, kappt aber genau die zwei Elemente, die aus dem Block
     heraus muessen - Skip-Link und Sticky-CTA lagen dann hinter dem
     fixierten Seiten-Header. Die z-index-Werte sind stattdessen bewusst
     niedrig gehalten (Header 100, Sticky-CTA 200), damit der Block keine
     Overlays der Seite ueberdeckt. Einzige Ausnahme ist der Skip-Link:
     der muss im Fokus ueber allem liegen. */
  position: relative;

  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surf);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Screenreader-only: Textalternativen ohne aria-label ------------------
   Payloads HTML-Sanitizer erlaubt aria-label nicht auf jedem Element.
   Statt Attributen tragen wir echte, visuell versteckte Texte im Markup —
   die uebersteht jeder Sanitizer und funktioniert auch ohne JavaScript. */
/* Markenname darf nicht am Bindestrich umbrechen ("Warum PIM-" / "Pilots") */
#pim-pilots .pp-nb { white-space: nowrap }

#pim-pilots .pp-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Dekorative Glyphen kommen aus dem CSS, nicht aus dem Markup. Damit
   braucht keines von ihnen ein aria-hidden-Attribut. */
/* Abstand als margin, nicht als Leerzeichen im content: nachgestellte
   Leerzeichen in CSS-content kollabieren neben Inline-Text. */
#pim-pilots .pp-cost::before { content: "\25B2"; font-size: 9px; vertical-align: 1px; margin-right: .5em }
#pim-pilots .pp-btn1::after { content: " \2192"; font-weight: 700 }
#pim-pilots .pp-fsub::after { content: " \2192" }
#pim-pilots .pp-fsub[disabled]::after { content: none }
#pim-pilots .pp-ftrust span::before { content: "\2713"; margin-right: .4em }
#pim-pilots .pp-hn strong::before { content: "\2713"; margin-right: .4em }
#pim-pilots .req::after { content: "*" }
#pim-pilots .pp-phn.p1::before { content: "1" }
#pim-pilots .pp-phn.p2::before { content: "2" }
#pim-pilots .pp-phn.p3::before { content: "3" }
#pim-pilots .pp-rg2 .pp-gu:nth-child(1) .pp-gi::before { content: "\1F512" }
#pim-pilots .pp-rg2 .pp-gu:nth-child(2) .pp-gi::before { content: "\1F4CB" }
#pim-pilots .pp-rg2 .pp-gu:nth-child(3) .pp-gi::before { content: "\1F6E1" }

/* Fokus: sichtbar, überall, nie entfernt --------------------------------- */
#pim-pilots :focus-visible {
  outline: 3px solid var(--o-txt);
  outline-offset: 2px;
  border-radius: 4px;
}
#pim-pilots .pp-on-dk :focus-visible,
#pim-pilots .pp-nav :focus-visible,
#pim-pilots .pp-hero :focus-visible,
#pim-pilots .pp-proc :focus-visible,
#pim-pilots .pp-cta :focus-visible,
#pim-pilots .pp-ft :focus-visible { outline-color: var(--o-ring) }

#pim-pilots [id] { scroll-margin-top: calc(var(--hh) + var(--host-top, 0px) + 20px) }

/* Skip-Link -------------------------------------------------------------
   Wird per Clip aus dem Layout genommen, nicht per transform verschoben.
   Ein verschobenes Element bleibt sichtbar, wenn der Bezugsrahmen ein
   anderer ist als gedacht - genau das ist in Payload passiert. Beim Fokus
   dann position:fixed, damit der Link garantiert im Viewport landet,
   unabhaengig von Containern der umgebenden Seite. */
#pim-pilots .pp-skip {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#pim-pilots .pp-skip:focus {
  position: fixed; left: 12px; top: 12px; z-index: 2147483000;
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  background: var(--o); color: var(--nv-900);
  font: 700 14px/1.4 "Inter", Arial, sans-serif;
  padding: 12px 18px; border-radius: var(--r-s);
  text-decoration: none; box-shadow: 0 4px 18px rgba(0,0,0,.45);
}

/* =========================== HEADER ==================================== */
/* --host-top wird zur Laufzeit gesetzt: Hoehe eines fixierten oder
   klebenden Headers der umgebenden Seite. Sonst liegt unser Header
   darunter und Ankersprünge landen hinter der Seitennavigation. */
#pim-pilots .pp-head { position: sticky; top: var(--host-top, 0px); z-index: 100 }

/* Deckend, nicht transluzent: der Block sitzt in einem fremden Layout mit
   hellem Hintergrund. Eine halbtransparente Leiste laesst den weissen Grund
   der Seite durchscheinen und wirkt dann graublau statt fast schwarz. */
#pim-pilots .pp-nav {
  background: var(--nv-900);
  border-bottom: 1px solid var(--bd-dk);
  padding: 0 var(--pad-x);
  height: var(--hh);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
#pim-pilots .pp-nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; min-height: 44px; padding: 6px 2px }
/* Logo einmal als Token — wird von Header UND Footer genutzt, statt die
   Base64-Daten zweimal im Dokument zu tragen. */
#pim-pilots .pp-logo {
  display: block; flex-shrink: 0;
  width: 156px; height: 32px;
  background: var(--logo) no-repeat center / contain;
}
#pim-pilots .pp-logo-sm { width: 127px; height: 26px }

#pim-pilots .pp-nav-links { display: flex; gap: 4px; align-items: center; list-style: none }
#pim-pilots .pp-nav-links a {
  display: block; color: var(--on-dk-2); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  padding: 9px 12px; border-radius: var(--r-s);
  transition: color var(--t), background var(--t);
}
#pim-pilots .pp-nav-links a:hover { color: #fff; background: rgba(255,255,255,.07) }
#pim-pilots .pp-nav-links a[aria-current="true"] { color: #fff; background: rgba(255,107,43,.16) }

/* Höhere Spezifität statt !important */
#pim-pilots .pp-nav a.pp-nav-cta {
  background: linear-gradient(135deg, var(--o), var(--o-2));
  color: var(--nv-900);                     /* 6.6:1 — s. Hinweis bei .pp-btn1 */
  font-weight: 700; white-space: nowrap; text-decoration: none;
  padding: 11px 18px; border-radius: var(--r-s);
  min-height: 44px; display: inline-flex; align-items: center;
  box-shadow: var(--sh-o);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
#pim-pilots .pp-nav a.pp-nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px) }
#pim-pilots .pp-nav a.pp-nav-cta:active { transform: translateY(0) }
/* Mobile-CTA im Header entfällt: der Hero-CTA steht direkt darunter und
   ab dem Scrollen übernimmt die Sticky-Leiste am unteren Rand. */
#pim-pilots .pp-nav a.pp-nav-mcta { display: none }

/* Mobile-Sektions-Leiste (ersetzt Hamburger — ein Tap statt zwei) -------- */
#pim-pilots .pp-mnav {
  display: none;
  background: var(--nv-800);
  border-bottom: 1px solid var(--bd-dk);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#pim-pilots .pp-mnav::-webkit-scrollbar { display: none }
#pim-pilots .pp-mnav ul { display: flex; gap: 6px; list-style: none; padding: 8px var(--pad-x) }
#pim-pilots .pp-mnav a {
  display: block; white-space: nowrap;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--on-dk-2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 15px; border-radius: var(--r-p); min-height: 44px;
  display: flex; align-items: center;
  transition: color var(--t), background var(--t), border-color var(--t);
}
#pim-pilots .pp-mnav a[aria-current="true"] {
  color: var(--o-lt); background: rgba(255,107,43,.16); border-color: rgba(255,107,43,.38);
}

/* Info-Leiste ------------------------------------------------------------ */
#pim-pilots .pp-badge {
  background: var(--nv-800);
  border-bottom: 1px solid var(--bd-dk);
  padding: 9px var(--pad-x);
  text-align: center; font-size: 12.5px; line-height: 1.5;
  color: var(--on-dk-3);
}
#pim-pilots .pp-badge strong { color: var(--o-lt); font-weight: 700 }

/* =========================== BAUSTEINE ================================= */
#pim-pilots .pp-sec { padding: var(--pad-y) var(--pad-x) }
#pim-pilots .pp-si  { max-width: var(--wrap); margin: 0 auto }

#pim-pilots .pp-se {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--o-txt); margin-bottom: 12px;
}
#pim-pilots .pp-se.wh { color: var(--o-lt) }

#pim-pilots h1.pp-h1 {
  font-family: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(34px, 5.4vw, 58px); font-weight: 900;
  line-height: 1.06; letter-spacing: -1.4px; color: #fff;
  text-wrap: balance; margin-bottom: 20px;
}
#pim-pilots h2.pp-h2 {
  font-family: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(27px, 3.6vw, 40px); font-weight: 900;
  line-height: 1.14; letter-spacing: -.9px;
  text-wrap: balance; margin-bottom: 16px;
}
#pim-pilots .pp-h2.wh { color: #fff }
#pim-pilots h3.pp-h3 { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 10px }

#pim-pilots .pp-lead {
  font-size: clamp(16px, 1.6vw, 17.5px); color: var(--ink-2);
  max-width: 62ch; margin-bottom: 48px; line-height: 1.68;
}
#pim-pilots .pp-lead.wh { color: var(--on-dk-2) }

/* Buttons ---------------------------------------------------------------- */
#pim-pilots .pp-btn1 {
  background: linear-gradient(135deg, var(--o), var(--o-2));
  /* Dunkler Text auf Orange = 6.6:1 (WCAG AA).
     Weißer Text auf #FF6B2B wäre 2.8:1 und damit nicht barrierefrei.
     Falls das CD zwingend weiße Schrift verlangt: color:#fff + background
     auf #C2410C ändern (dann 5.2:1). */
  color: var(--nv-900);
  padding: 15px 28px; border-radius: var(--r-s);
  font-size: 16px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; justify-content: center;
  box-shadow: var(--sh-o);
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
}
#pim-pilots .pp-btn1:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,43,.38) }
#pim-pilots .pp-btn1:active { transform: translateY(0); filter: brightness(.97) }

#pim-pilots .pp-btn2 {
  color: #fff; padding: 15px 22px; border-radius: var(--r-s);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; justify-content: center;
  transition: border-color var(--t), background var(--t);
}
#pim-pilots .pp-btn2:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06) }

/* =========================== HERO ====================================== */
#pim-pilots .pp-hero {
  background: linear-gradient(160deg, var(--nv-900) 0%, var(--nv-800) 52%, #10264A 100%);
  padding: clamp(48px, 7vw, 88px) var(--pad-x) clamp(52px, 7vw, 76px);
  position: relative; overflow: hidden;
}
#pim-pilots .pp-hero::before {
  content: ""; position: absolute; top: -220px; right: -140px;
  width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,107,43,.10) 0%, transparent 66%);
}
#pim-pilots .pp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
}
#pim-pilots .pp-hi { max-width: 920px; margin: 0 auto; position: relative; z-index: 1 }

#pim-pilots .pp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,107,43,.14); border: 1px solid rgba(255,107,43,.34);
  color: var(--o-lt); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 7px 15px; border-radius: var(--r-p); margin-bottom: 24px;
}
#pim-pilots .pp-h1 .pp-ac { color: var(--o) }
#pim-pilots .pp-h1 .pp-ul { position: relative; display: inline-block }
#pim-pilots .pp-h1 .pp-ul::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--o), var(--o-lt)); border-radius: 2px;
}
#pim-pilots .pp-sub {
  font-size: clamp(16.5px, 1.8vw, 19px); color: var(--on-dk-2);
  max-width: 60ch; margin-bottom: 14px; line-height: 1.62;
}
#pim-pilots .pp-sub strong { color: #fff; font-weight: 700 }

#pim-pilots .pp-for {
  font-size: 13.5px; color: var(--on-dk-3);
  margin-bottom: 30px; line-height: 1.6;
}
#pim-pilots .pp-for b { color: var(--on-dk-2); font-weight: 600 }

#pim-pilots .pp-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
#pim-pilots .pp-hn {
  margin-top: 20px; font-size: 13.5px; color: var(--on-dk-3);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
#pim-pilots .pp-hn strong { color: var(--gr-2); font-weight: 700 }

/* =========================== KENNZAHLEN ================================= */
#pim-pilots .pp-stats {
  background: var(--nv-800);
  border-top: 1px solid var(--bd-dk); border-bottom: 1px solid var(--bd-dk);
  padding: 36px var(--pad-x);
}
#pim-pilots .pp-stats-i {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center;
}
/* dt (Label) steht im Markup vor dd (Zahl) — valides <dl> und bessere
   Screenreader-Ausgabe. Visuell wird die Reihenfolge hier gedreht. */
#pim-pilots .pp-stat { display: flex; flex-direction: column-reverse }
#pim-pilots .pp-sn {
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 42px); font-weight: 900; line-height: 1;
  color: var(--o-lt);                                  /* Fallback */
  background: linear-gradient(135deg, var(--o), var(--o-lt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
@media (forced-colors: active) {
  #pim-pilots .pp-sn { -webkit-text-fill-color: currentColor; color: CanvasText; background: none }
}
#pim-pilots .pp-sl { font-size: 13px; color: var(--on-dk-3); line-height: 1.45 }

/* =========================== PROBLEM ==================================== */
#pim-pilots .pp-pain { background: var(--surf-2) }
/* 4 Karten: bewusst 2x2 statt auto-fit — auto-fit ergibt bei 1060px eine
   3+1-Reihe mit Waisenkarte. */
#pim-pilots .pp-pg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 18px }
#pim-pilots .pp-pc {
  background: var(--surf); border-radius: var(--r); padding: 26px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t);
}
#pim-pilots .pp-pc:hover { transform: translateY(-2px); box-shadow: var(--sh-2) }
#pim-pilots .pp-pc::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--o), var(--o-lt));
}
#pim-pilots .pp-pt {
  display: inline-block; align-self: flex-start;
  background: rgba(180,64,12,.08); color: var(--o-txt);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; margin-bottom: 12px;
}
#pim-pilots .pp-pc p { font-size: 14.5px; color: var(--ink-2); line-height: 1.62 }
#pim-pilots .pp-cost {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: rgba(185,28,28,.07); border: 1px solid rgba(185,28,28,.20);
  color: var(--rd-txt); font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 4px; margin-top: auto;
}
#pim-pilots .pp-pc .pp-cost { margin-top: 16px }

/* =========================== ROI ======================================== */
#pim-pilots .pp-roi { background: var(--surf) }
#pim-pilots .pp-rg { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start }
/* Grid-/Flex-Kinder haben min-width:auto (= min-content). Eine breite
   Tabelle zieht damit die ganze Spalte auf und erzeugt horizontalen
   Seiten-Scroll. min-width:0 gibt die Kontrolle an den Container zurueck,
   scrollen darf dann nur der Tabellen-Wrapper. */
#pim-pilots .pp-rg > *, #pim-pilots .pp-odx > *, #pim-pilots .pp-ci > *,
#pim-pilots .pp-gu > *, #pim-pilots .pp-pc > *, #pim-pilots .pp-phc > * { min-width: 0 }

#pim-pilots .pp-tw {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surf);
  box-shadow: var(--sh-1);
}
#pim-pilots .pp-tw:focus-visible { outline-offset: 0 }
#pim-pilots table.pp-rt { width: 100%; border-collapse: collapse; min-width: 340px; font-size: 14px }
#pim-pilots .pp-rt caption {
  caption-side: top; text-align: left;
  background: var(--nv-900); color: var(--on-dk-2);
  font-size: 12px; font-weight: 600; padding: 11px 18px; line-height: 1.4;
}
#pim-pilots .pp-rt th, #pim-pilots .pp-rt td { padding: 13px 18px; text-align: right; vertical-align: middle }
#pim-pilots .pp-rt th[scope="row"], #pim-pilots .pp-rt thead th:first-child { text-align: left; font-weight: 600 }
#pim-pilots .pp-rt thead th {
  background: var(--nv-900); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
#pim-pilots .pp-rt thead th.hi { color: var(--o-lt) }
#pim-pilots .pp-rt tbody th, #pim-pilots .pp-rt tbody td { border-bottom: 1px solid var(--line-2); font-size: 14px }
#pim-pilots .pp-rt tbody th { color: var(--ink); max-width: 30ch }
#pim-pilots .pp-rt tbody th a { color: var(--o-txt); font-weight: 700; text-decoration: none; padding: 0 2px }
#pim-pilots .pp-rt tbody th a:hover { text-decoration: underline }
#pim-pilots .pp-rt td.c-new { background: rgba(21,128,61,.045) }
#pim-pilots .pp-rt tr.tot th, #pim-pilots .pp-rt tr.tot td { font-weight: 800; background: var(--surf-2); border-top: 2px solid var(--line) }
#pim-pilots .pp-rt tr.tot td.c-new { background: rgba(21,128,61,.09) }
#pim-pilots .pp-rt tr.sav th, #pim-pilots .pp-rt tr.sav td {
  background: rgba(21,128,61,.12); border-bottom: none; padding-top: 15px; padding-bottom: 15px;
}
#pim-pilots .pp-rt tr.sav th { font-size: 15px; font-weight: 800 }
#pim-pilots .old { color: var(--rd-txt); font-weight: 700; white-space: nowrap }
#pim-pilots .nw  { color: var(--gr-txt); font-weight: 700; white-space: nowrap }
#pim-pilots .sv  { color: var(--gr-txt); font-weight: 800; font-size: 17px; white-space: nowrap }
#pim-pilots .pp-tnote { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.55 }
#pim-pilots .pp-scroll-hint { display: none; font-size: 12px; color: var(--ink-3); margin-top: 8px }
#pim-pilots .pp-scroll-hint.on { display: block }

#pim-pilots .pp-rg2 { display: flex; flex-direction: column; gap: 10px; margin-top: 26px }
#pim-pilots .pp-gu {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surf-2); border-radius: var(--r-s); padding: 15px;
  border: 1px solid var(--line);
}
#pim-pilots .pp-gi {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(21,128,61,.10); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
#pim-pilots .pp-gt strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px }
#pim-pilots .pp-gt span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5 }

/* =========================== SYSTEMVERGLEICH ============================ */
#pim-pilots .pp-sys { background: var(--surf-2) }
#pim-pilots .pp-sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr)); gap: 14px; margin-bottom: 44px }
#pim-pilots .pp-sc { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px }
#pim-pilots h3.pp-slo { font-family: "Inter Tight", "Inter", Arial, sans-serif; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; line-height: 1.25 }
#pim-pilots .pp-sty { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; font-weight: 600 }
#pim-pilots ul.pp-si2 { list-style: none }
#pim-pilots .pp-si2 li {
  font-size: 13px; color: var(--ink-2); padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}
#pim-pilots .pp-si2 li:last-child { border-bottom: none; padding-bottom: 0 }
#pim-pilots .pp-si2 li::before { content: "\2013"; flex-shrink: 0; color: var(--ink-3) }

#pim-pilots .pp-vsd { display: flex; align-items: center; gap: 18px; margin-bottom: 40px }
#pim-pilots .pp-vsd::before, #pim-pilots .pp-vsd::after { content: ""; flex: 1; height: 1px; background: var(--line) }
#pim-pilots .pp-vsb {
  background: var(--nv-900); color: #fff; font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: var(--r-p); letter-spacing: .3px;
}
#pim-pilots .pp-odx {
  background: linear-gradient(135deg, var(--nv-800), var(--nv-600));
  border-radius: var(--r-l); padding: clamp(26px, 4vw, 40px); color: #fff;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center;
  box-shadow: var(--sh-2);
}
#pim-pilots .pp-odx h3 {
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 27px); font-weight: 900; color: #fff;
  margin-bottom: 12px; line-height: 1.2;
}
#pim-pilots .pp-odx p { font-size: 15px; color: var(--on-dk-2); margin-bottom: 20px; line-height: 1.62 }
#pim-pilots ul.pp-fl { list-style: none; display: flex; flex-direction: column; gap: 10px }
#pim-pilots .pp-fl li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #fff; line-height: 1.45 }
#pim-pilots .pp-fl li::before {
  content: "\2713"; width: 20px; height: 20px; margin-top: 1px;
  background: rgba(34,197,94,.22); border: 1px solid rgba(34,197,94,.45); color: var(--gr-2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
#pim-pilots .pp-ob { display: flex; flex-wrap: wrap; gap: 9px; align-content: center }
#pim-pilots .pp-obadge {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-s);
}
#pim-pilots .pp-obadge.gr { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.34); color: var(--gr-2) }

/* =========================== PROZESS ==================================== */
#pim-pilots .pp-proc { background: var(--nv-900); color: #fff }
#pim-pilots .pp-ph { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); gap: 20px }
#pim-pilots .pp-phc {
  background: rgba(255,255,255,.04); border: 1px solid var(--bd-dk);
  border-radius: var(--r); padding: 28px 26px;
  display: flex; flex-direction: column;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
#pim-pilots .pp-phc:hover { background: rgba(255,255,255,.07); transform: translateY(-2px) }
#pim-pilots .pp-phc.hl { background: rgba(255,107,43,.09); border-color: rgba(255,107,43,.26) }
#pim-pilots .pp-phn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: 19px; font-weight: 900; margin-bottom: 18px; flex-shrink: 0;
}
#pim-pilots .pp-phn.p1 { background: rgba(255,107,43,.20); border: 2px solid rgba(255,107,43,.45); color: var(--o-lt) }
#pim-pilots .pp-phn.p2 { background: rgba(255,179,71,.20); border: 2px solid rgba(255,179,71,.45); color: var(--o-lt) }
#pim-pilots .pp-phn.p3 { background: rgba(34,197,94,.20); border: 2px solid rgba(34,197,94,.45); color: var(--gr-2) }
#pim-pilots .pp-plbl { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--on-dk-3); margin-bottom: 7px }
#pim-pilots h3.pp-ptit {
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px; line-height: 1.25;
}
#pim-pilots .pp-pdesc { font-size: 14.5px; color: var(--on-dk-2); line-height: 1.6; margin-bottom: 18px }
#pim-pilots ul.pp-pdet { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px }
#pim-pilots .pp-pdet li { font-size: 13.5px; color: var(--on-dk-2); display: flex; align-items: flex-start; gap: 9px; line-height: 1.45 }
#pim-pilots .pp-pdet li::before { content: "\2192"; color: var(--o-lt); font-weight: 700; flex-shrink: 0 }
#pim-pilots .pp-ptag {
  display: inline-block; align-self: flex-start; margin-top: auto;
  background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.34); color: var(--gr-2);
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 4px;
}
#pim-pilots .pp-ptag.or { background: rgba(255,107,43,.16); border-color: rgba(255,107,43,.34); color: var(--o-lt) }

/* =========================== WARUM WIR ==================================
   Jede Karte folgt derselben Rhetorik: Kompetenz-Label, Behauptung,
   Begruendung - und darunter, klar abgesetzt, die Abgrenzung zum Markt.
   Das Label ist gruen (unsere Staerke), die Abgrenzung gedaempft grau,
   damit die Behauptung dominiert und nicht der Seitenhieb.            */
#pim-pilots .pp-why { background: var(--surf) }
#pim-pilots .pp-wg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 18px;
}
#pim-pilots .pp-wc {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; display: flex; flex-direction: column; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t);
}
#pim-pilots .pp-wc:hover { transform: translateY(-2px); box-shadow: var(--sh-2) }
#pim-pilots .pp-wl {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gr-txt);
  background: rgba(22,101,52,.08); padding: 4px 10px; border-radius: 4px; margin-bottom: 13px;
}
#pim-pilots h3.pp-wh {
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: 19px; font-weight: 800; line-height: 1.3; margin-bottom: 10px;
}
#pim-pilots .pp-wc p { font-size: 14.5px; color: var(--ink-2); line-height: 1.62 }
#pim-pilots .pp-wc p + p { margin-top: 10px }
#pim-pilots .pp-wc a { color: var(--o-txt); font-weight: 700; text-decoration: underline; text-underline-offset: 2px }
#pim-pilots .pp-wvs { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line) }
#pim-pilots .pp-wvs b {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
#pim-pilots .pp-wvs span { font-size: 13.5px; color: var(--ink-3); line-height: 1.55 }

/* =========================== ANSPRECHPARTNER ============================ */
#pim-pilots .pp-cons { background: var(--surf-2) }
#pim-pilots .pp-ci { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center }
#pim-pilots .pp-cpw { position: relative; width: 200px; margin: 0 auto }
#pim-pilots .pp-cimg {
  width: 200px; height: 200px; border-radius: 50%; display: block;
  background: var(--line) var(--portrait) no-repeat center top / cover;
  box-shadow: var(--sh-2);
}
#pim-pilots .pp-cbadge {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  background: var(--o); color: var(--nv-900);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 6px 13px; border-radius: var(--r-p);
}
#pim-pilots h2.pp-cn {
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 32px); font-weight: 900; letter-spacing: -.5px; margin-bottom: 6px;
}
#pim-pilots .pp-cr { font-size: 15px; color: var(--ink-3); margin-bottom: 16px }
#pim-pilots .pp-cb { font-size: 15px; color: var(--ink-2); line-height: 1.68; margin-bottom: 18px; max-width: 62ch }
#pim-pilots .pp-ctags { display: flex; flex-wrap: wrap; gap: 8px }
#pim-pilots .pp-ctag {
  background: var(--surf); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 4px;
}

/* =========================== FAQ ======================================== */
#pim-pilots .pp-faq { background: var(--surf) }
#pim-pilots .pp-faql { max-width: 800px; border-top: 1px solid var(--line) }
#pim-pilots details.pp-fq { border-bottom: 1px solid var(--line) }
#pim-pilots .pp-fq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 4px; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--ink);
  transition: color var(--t);
}
#pim-pilots .pp-fq summary::-webkit-details-marker { display: none }
#pim-pilots .pp-fq summary:hover { color: var(--o-txt) }
#pim-pilots .pp-fq summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-family: "Inter Tight", "Inter", Arial, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 1; color: var(--o-txt);
  transition: transform var(--t);
}
#pim-pilots .pp-fq[open] summary::after { transform: rotate(45deg) }
#pim-pilots .pp-fq .pp-fqa { padding: 0 40px 20px 4px; font-size: 15px; color: var(--ink-2); line-height: 1.68 }
#pim-pilots .pp-fq .pp-fqa p + p { margin-top: 10px }

/* =========================== CTA / FORMULAR ============================= */
#pim-pilots .pp-cta { background: linear-gradient(135deg, var(--nv-900) 0%, var(--nv-800) 100%); color: #fff }
#pim-pilots .pp-ctai { max-width: 760px; margin: 0 auto; text-align: center }
#pim-pilots .pp-ctai .pp-lead { margin-left: auto; margin-right: auto; margin-bottom: 36px }

#pim-pilots .pp-form-wrap {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-l); padding: clamp(22px, 4vw, 38px);
  max-width: 700px; margin: 0 auto; text-align: left;
}
#pim-pilots .pp-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px }
#pim-pilots .pp-ff { display: flex; flex-direction: column; gap: 6px }
#pim-pilots .pp-ff.full { grid-column: 1 / -1 }
#pim-pilots .pp-ff label { font-size: 12.5px; font-weight: 700; color: var(--on-dk-2); letter-spacing: .3px }
#pim-pilots .pp-ff label .req { color: var(--o-lt) }
#pim-pilots .pp-ff input,
#pim-pilots .pp-ff select {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20);
  color: #fff; padding: 13px 15px; border-radius: var(--r-s);
  font-size: 15px; font-family: inherit; width: 100%; min-height: 48px;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t), background var(--t);
}
#pim-pilots .pp-ff input::placeholder { color: #8FA3BF }
#pim-pilots .pp-ff input:hover, #pim-pilots .pp-ff select:hover { border-color: rgba(255,255,255,.34) }
#pim-pilots .pp-ff input:focus, #pim-pilots .pp-ff select:focus { border-color: var(--o-lt); background: rgba(255,255,255,.12) }
#pim-pilots .pp-ff select {
  /* eigener Chevron, da appearance:none den nativen entfernt */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C7D3E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 42px; cursor: pointer;
}
#pim-pilots .pp-ff select option { background: var(--nv-800); color: #fff }

#pim-pilots details.pp-more { grid-column: 1 / -1; margin-top: 2px }
#pim-pilots .pp-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--o-lt); padding: 8px 0;
}
#pim-pilots .pp-more > summary::-webkit-details-marker { display: none }
#pim-pilots .pp-more > summary::before { content: "+"; font-size: 17px; line-height: 1; transition: transform var(--t) }
#pim-pilots .pp-more[open] > summary::before { transform: rotate(45deg) }
#pim-pilots .pp-more .pp-fgrid { margin-top: 12px }

#pim-pilots .pp-consent {
  grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start;
  margin-top: 8px; font-size: 13px; color: var(--on-dk-2); line-height: 1.5;
}
#pim-pilots .pp-consent input[type="checkbox"] {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--o); cursor: pointer;   /* 24px = WCAG 2.5.8 Minimum */
}
#pim-pilots .pp-consent a { color: var(--o-lt); text-decoration: underline; text-underline-offset: 2px }

#pim-pilots .pp-fsub {
  grid-column: 1 / -1; width: 100%;
  background: linear-gradient(135deg, var(--o), var(--o-2));
  color: var(--nv-900);
  padding: 16px; border-radius: var(--r-s);
  font-size: 16.5px; font-weight: 700; border: none; cursor: pointer;
  font-family: inherit; min-height: 52px;
  box-shadow: var(--sh-o); margin-top: 14px;
  transition: filter var(--t), transform var(--t);
}
#pim-pilots .pp-fsub:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px) }
#pim-pilots .pp-fsub:disabled { opacity: .6; cursor: progress; transform: none }
#pim-pilots .pp-ftrust {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; margin-top: 16px; font-size: 12.5px; color: var(--on-dk-3);
}
#pim-pilots .pp-ftrust span { display: inline-flex; align-items: center; gap: 6px }
#pim-pilots .pp-fdis { grid-column: 1 / -1; font-size: 12.5px; color: var(--on-dk-3); margin-top: 12px; line-height: 1.55 }

#pim-pilots .pp-fmsg {
  border-radius: var(--r); padding: 22px; font-size: 15px; line-height: 1.6;
  display: none;
}
#pim-pilots .pp-fmsg.ok { display: block; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.36); color: #fff }
#pim-pilots .pp-fmsg.err { display: block; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.38); color: #fff }
#pim-pilots .pp-fmsg strong { display: block; font-size: 18px; font-weight: 800; margin-bottom: 6px }
#pim-pilots .pp-fmsg a { color: var(--o-lt); text-decoration: underline; text-underline-offset: 2px }

/* =========================== FOOTER ===================================== */
#pim-pilots .pp-ft { background: var(--foot); border-top: 1px solid var(--bd-dk); padding: 36px var(--pad-x) }
#pim-pilots .pp-fti {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
#pim-pilots .pp-fb img { display: block; height: 26px; width: auto }
#pim-pilots .pp-fby { font-size: 13px; color: var(--on-dk-3); margin-top: 9px; line-height: 1.5 }
/* Links im Fließtext brauchen mehr als Farbe zur Unterscheidung (WCAG 1.4.1) */
#pim-pilots .pp-fby a { color: var(--o-lt); text-decoration: underline; text-underline-offset: 2px }
#pim-pilots .pp-fby a:hover { color: #fff }
#pim-pilots .pp-fl2 { display: flex; gap: 8px; flex-wrap: wrap }
#pim-pilots .pp-fl2 a {
  font-size: 13px; color: var(--on-dk-3); text-decoration: none;
  padding: 11px 12px; border-radius: var(--r-s); transition: color var(--t), background var(--t);
}
#pim-pilots .pp-fl2 a:hover { color: #fff; background: rgba(255,255,255,.07) }

/* =========================== STICKY MOBILE CTA ========================== */
#pim-pilots .pp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--nv-900);
  border-top: 1px solid var(--bd-dk);
  box-shadow: 0 -8px 28px rgba(0,0,0,.45);
  transform: translateY(110%); transition: transform 240ms cubic-bezier(.4,0,.2,1);
}
#pim-pilots .pp-sticky.show { transform: translateY(0) }
#pim-pilots .pp-sticky .pp-btn1 { width: 100%; font-size: 15.5px; padding: 14px 20px }

/* =========================== REVEAL =====================================
   Progressive Enhancement: Standard ist SICHTBAR. Erst wenn das Skript
   nachweislich läuft, setzt es .pp-js auf den Container und die Elemente
   werden animiert eingeblendet. Ohne JS (oder wenn ein CMS-Sanitizer das
   Skript entfernt) bleibt jeder Inhalt sichtbar — auf einer Lead-Seite
   darf Content nie von JS abhängen.                                       */
#pim-pilots.pp-js .pp-rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.3,1);
}
#pim-pilots.pp-js .pp-rv.in { opacity: 1; transform: none }

/* =========================== RESPONSIVE ================================= */
@media (max-width: 1000px) {
  #pim-pilots .pp-rg { grid-template-columns: 1fr; gap: 32px }
  #pim-pilots .pp-odx { grid-template-columns: 1fr; gap: 26px }
}
@media (max-width: 900px) {
  #pim-pilots .pp-nav-links { display: none }
  #pim-pilots .pp-mnav { display: block }
  #pim-pilots [id] { scroll-margin-top: calc(var(--hh) + var(--host-top, 0px) + 60px) }
  #pim-pilots .pp-sticky { display: block }
}
/* Auf dem Handy soll die OpenDXP-Spalte SICHTBAR sein, nicht weggescrollt.
   Also: Kurzlabels, engere Zellen, umbrechende Kopfzeilen — der Scroll-
   Wrapper bleibt nur als Notfall-Fallback. */
@media (max-width: 620px) {
  #pim-pilots table.pp-rt { min-width: 0; font-size: 13px }
  #pim-pilots .pp-rt caption { font-size: 11.5px; padding: 10px 12px }
  #pim-pilots .pp-rt thead th { white-space: normal; font-size: 11.5px }
  #pim-pilots .pp-rt th, #pim-pilots .pp-rt td { padding: 10px 7px }
  #pim-pilots .pp-rt tbody th { max-width: none; font-size: 13px }
  #pim-pilots .pp-rt .old, #pim-pilots .pp-rt .nw { font-size: 13px }
  #pim-pilots .pp-rt .sv { font-size: 14px; white-space: normal }
  #pim-pilots .pp-thlong { display: none }
}
@media (max-width: 700px) {
  #pim-pilots .pp-stats-i { grid-template-columns: 1fr 1fr; gap: 24px 16px }
  #pim-pilots .pp-ci { grid-template-columns: 1fr; gap: 26px; text-align: center }
  #pim-pilots .pp-cb, #pim-pilots .pp-cr { margin-left: auto; margin-right: auto }
  #pim-pilots .pp-ctags { justify-content: center }
  #pim-pilots .pp-fgrid { grid-template-columns: 1fr }
  #pim-pilots .pp-ctas { flex-direction: column; align-items: stretch }
  #pim-pilots .pp-ctas > a { width: 100% }
  #pim-pilots .pp-vsd { gap: 12px }
  #pim-pilots .pp-vsb { font-size: 12px; padding: 8px 14px }
  #pim-pilots .pp-rt th, #pim-pilots .pp-rt td { padding: 11px 12px }
  #pim-pilots .pp-fq .pp-fqa { padding-right: 8px }
}

/* =========================== MOTION-PRÄFERENZ =========================== */
@media (prefers-reduced-motion: reduce) {
  #pim-pilots *, #pim-pilots *::before, #pim-pilots *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  #pim-pilots.pp-js .pp-rv { opacity: 1; transform: none }
  #pim-pilots .pp-sticky { transition: none }
}

/* Hinweis: content-visibility:auto wurde bewusst NICHT eingesetzt.
   Der Rendering-Gewinn ist bei dieser Seitengröße marginal, dafür bricht es
   Vollseiten-Screenshots, den Browser-Druck/PDF-Export und in Teilen die
   Seitensuche. Für eine Vertriebsseite ist das ein schlechter Tausch. */

/* Druck: Seite muss auf Papier vollständig lesbar bleiben ---------------- */
@media print {
  #pim-pilots .pp-head, #pim-pilots .pp-sticky, #pim-pilots .pp-skip { display: none !important }
  #pim-pilots .pp-rv { opacity: 1 !important; transform: none !important }
  #pim-pilots .pp-hero, #pim-pilots .pp-proc, #pim-pilots .pp-cta,
  #pim-pilots .pp-stats, #pim-pilots .pp-odx { background: #fff !important; color: #000 !important }
  #pim-pilots .pp-h1, #pim-pilots .pp-h2.wh, #pim-pilots .pp-ptit,
  #pim-pilots .pp-sub, #pim-pilots .pp-lead.wh, #pim-pilots .pp-pdesc,
  #pim-pilots .pp-pdet li, #pim-pilots .pp-fl li, #pim-pilots .pp-odx p,
  #pim-pilots .pp-odx h3, #pim-pilots .pp-sl { color: #000 !important }
  #pim-pilots .pp-sn { -webkit-text-fill-color: #000; color: #000; background: none }
  #pim-pilots details.pp-fq > .pp-fqa { display: block !important }
  #pim-pilots .pp-sec { padding: 18px 0; break-inside: avoid }
}