/**
 * AT Magazin — Component Styles
 *
 * Styles for shortcode-rendered components only.
 * Layout, typography, and global styles are managed by Elementor.
 */

/* ── FONT FACE ── */
@font-face {
  font-family: 'Transducer VF';
  src: url('../fonts/transducer-regular-webfont.woff2') format('woff2'),
       url('../fonts/transducer-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Transducer VF';
  src: url('../fonts/transducer-medium-webfont.woff2') format('woff2'),
       url('../fonts/transducer-medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS (component-relevant subset) ── */
:root {
  --alltrucks-cyan: #00B5E2;
  --alltrucks-cyan-hover: #00c9fc;
  --alltrucks-cyan-20: rgba(0,181,226,.2);
  --alltrucks-cyan-10: rgba(0,181,226,.1);
  --alltrucks-dark-blue: #00193E;
  --alltrucks-mid-blue: #01274F;
  --alltrucks-light-blue: #123459;
  --white: #fff;
  --gray: #DFE5E9;
  --gray-muted: #BFCBD1;
  --gray-100: #F0F4F8;
  --gray-200: #DFE5E9;
  --gray-400: #BFCBD1;
  --gray-600: #7A8FA0;
  --bg: #f0f4f8;
  --text: #00193E;
  --text-body: #2A3D52;
  --text-light: #4A5E72;
  --font-display: 'Transducer VF', sans-serif;
  --font-ui: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --r: 16px;
  --r-sm: 8px;
  --r-pill: 100px;
  --shadow: 0 2px 16px rgba(0,25,62,.08);
  --shadow-lg: 0 12px 40px rgba(0,25,62,.18);
  --sh-alltrucks-cyan: 0 8px 32px rgba(0,181,226,.3);
}


/* =============================================================================
   ARTICLE BODY WRAPPER
   ============================================================================= */

.article-body {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.article-body-inner {
  padding: var(--space-12) var(--space-12);
}
@media (max-width: 768px) {
  .article-body-inner { padding: var(--space-6) var(--space-5); }
}

/* All headings in article/guide body get flex + slash */
.article-body-inner h1, .article-body-inner h2, .article-body-inner h3, .article-body-inner h4,
.article-body h1, .article-body h2, .article-body h3, .article-body h4,
.guide-body h1, .guide-body h2, .guide-body h3, .guide-body h4,
.guide-body-inner h1, .guide-body-inner h2, .guide-body-inner h3, .guide-body-inner h4 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.article-body-inner h1::before, .article-body-inner h2::before,
.article-body-inner h3::before, .article-body-inner h4::before,
.article-body h1::before, .article-body h2::before,
.article-body h3::before, .article-body h4::before,
.guide-body h1::before, .guide-body h2::before,
.guide-body h3::before, .guide-body h4::before,
.guide-body-inner h1::before, .guide-body-inner h2::before,
.guide-body-inner h3::before, .guide-body-inner h4::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.70em;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  flex-shrink: 0;
  margin-top: .3em;
  margin-right: 0.1em;
}

/* Typography: article/guide body h2 + h3 — Display-Font, uppercase
   (mirrors alltrucks-global.css prototype rules so the leitfaden side
   doesn't render with the default theme font in Title Case). */
.article-body-inner h2,
.article-body h2,
.guide-body h2,
.guide-body-inner h2 {
  font-family: var(--font-display) !important;
  font-size: 45px !important;
  font-weight: 500 !important;
  color: var(--alltrucks-dark-blue) !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  margin: var(--space-12) 0 var(--space-4) !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.article-body-inner h3,
.article-body h3,
.guide-body h3,
.guide-body-inner h3 {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--alltrucks-dark-blue) !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  margin: var(--space-8) 0 var(--space-3) !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
@media (max-width: 768px) {
  .article-body-inner h2, .article-body h2, .guide-body h2, .guide-body-inner h2 {
    font-size: 20px !important;
    margin: var(--space-10) 0 var(--space-3) !important;
  }
  .article-body-inner h3, .article-body h3, .guide-body h3, .guide-body-inner h3 {
    font-size: 18px !important;
  }
}

/* Mobile h2/h3 Default — Elementor Site-Settings stoppt bei Tablet (≤1024px:
   h2 = 25px !important), kein Mobile-Stop. Auf 360–414px-Viewports zu groß.
   Globaler Override für reine h2/h3 (Elementor-Heading-Widget, Hello-Theme-
   Defaults, Bare-Content-Headings). Komponenten-spezifische Titel
   (.cornerstone-title, .hero-title, .nl-title, .sec-hdr h2) haben ihr eigenes
   !important, damit Hierarchie auf Übersichts- und Hero-Karten erhalten bleibt. */
@media (max-width: 768px) {
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
}

/* Bullet lists: cyan vertical-slash markers, same shape as the h2/h3 ::before
   slash but smaller — matches the leitfaden-prototype-style "kleine Schräge"
   die der User auch bei Headings sieht. */
.article-body-inner ul,
.article-body ul,
.guide-body ul,
.guide-body-inner ul {
  margin: var(--space-4) 0 var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.article-body-inner ul li,
.article-body ul li,
.guide-body ul li,
.guide-body-inner ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  list-style: none;
}
.article-body-inner ul li::before,
.article-body ul li::before,
.guide-body ul li::before,
.guide-body-inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 3px;
  height: 12px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  border-radius: 1px;
}


/* =============================================================================
   FC-BLOCK: HIGHLIGHT BOX
   ============================================================================= */

.highlight-box {
  position: relative;
  background: linear-gradient(135deg, rgba(0,181,226,.07), rgba(0,25,62,.04));
  border-left: 4px solid var(--alltrucks-cyan);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  overflow: hidden;
}
.highlight-box::after {
  content: '';
  position: absolute;
  top: -20px;
  right: var(--space-6);
  width: 50px;
  height: 180%;
  background: var(--alltrucks-cyan);
  opacity: .05;
  transform: skewX(-15deg);
}
.highlight-box p {
  color: var(--alltrucks-dark-blue);
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  line-height: 1.65;
}

/* Light-background page overrides */
.page-artikel .highlight-box {
  background: rgba(0,181,225,.06);
  border-left: 4px solid var(--alltrucks-cyan);
}
.page-artikel .highlight-box p {
  color: var(--text-body);
}


/* =============================================================================
   FC-BLOCK: TIP BOX
   ============================================================================= */

.tip-box {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  padding: var(--space-6) var(--space-7);
  margin: var(--space-8) 0;
  border-left: 4px solid var(--alltrucks-cyan);
  background: linear-gradient(135deg, rgba(0,181,226,.06) 0%, rgba(0,25,62,.03) 100%);
}
.tip-box-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-2);
}
.tip-box p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--alltrucks-dark-blue);
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}
.tip-box p em {
  color: var(--text-body);
}


/* =============================================================================
   FC-BLOCK: PULL QUOTE
   ============================================================================= */

.pull-quote {
  position: relative;
  margin: var(--space-10) -20px;
  padding: var(--space-10) var(--space-12);
  background: var(--alltrucks-dark-blue);
  border-radius: var(--r);
  overflow: hidden;
}
.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: 28px;
  font-family: var(--font-display);
  font-size: 160px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  opacity: .15;
  line-height: 1;
  pointer-events: none;
}
.pull-quote::after {
  content: '';
  position: absolute;
  top: -80px;
  right: 40px;
  width: 300px;
  height: 350%;
  background: linear-gradient(90deg,
    transparent 0%, transparent 20px,
    rgba(255,255,255,.10) 20px, rgba(255,255,255,.10) 80px,
    transparent 80px, transparent 140px,
    rgba(255,255,255,.07) 140px, rgba(255,255,255,.07) 300px);
  transform: skewX(-15deg);
  pointer-events: none;
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1.45;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
  position: relative;
  z-index: 1;
}


/* =============================================================================
   FC-BLOCK: CASE STUDY (Phase 10 editorial redesign — canonical version)
   ============================================================================= */

.case-study {
  position: relative;
  margin: 48px 0;
  padding: 36px 40px 32px;
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-left: 4px solid var(--alltrucks-cyan);
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,25,62,.06);
  overflow: hidden;
  isolation: isolate;
}
.case-study::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: linear-gradient(135deg, rgba(0,181,225,.10), rgba(0,181,225,.02));
  transform: skewX(-41deg);
  z-index: -1;
  pointer-events: none;
}
.case-study::after {
  content: '';
  position: absolute;
  top: 32px;
  right: 36px;
  width: 3px;
  height: 56px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  opacity: .55;
  pointer-events: none;
}

/* Phase 13: force cyan accents regardless of [data-cluster] */
.case-study,
.case-study[data-cluster],
.page-artikel .case-study,
.page-artikel .case-study[data-cluster],
.page-leitfaden .case-study,
.page-leitfaden .case-study[data-cluster] {
  border-left-color: var(--alltrucks-cyan);
  border-color: rgba(0,181,225,.12);
  border-left: 4px solid var(--alltrucks-cyan);
}

/* Leitfaden-Hero — übernimmt das Pattern vom Artikel-Hero (b4242d3): voll-
   bildiges Featured-Image als Background, dunkelblauer Gradient-Overlay
   darüber für Lesbarkeit, Content unten ausgerichtet. Fallback ohne
   Featured-Image: Alltrucks-Brand-Foto bei 28% Opazität auf Dark-Blue.
   .hero-inner--guide hat normalerweise einen eigenen opaken dark-blue-gradient
   (für Nicht-Leitfaden-Kontexte) — den überschreiben wir hier auf transparent. */
.page-leitfaden .guide-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 880px !important;
  background: var(--alltrucks-dark-blue, #00193E) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
}
.page-leitfaden .guide-hero .hero-bg {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  pointer-events: none;
}
/* Fallback wenn kein Featured-Image: gleiche Optik wie zuvor (Brand-Image bei 28%). */
.page-leitfaden .guide-hero .hero-bg:not([style*="background-image"]) {
  background-image: url('https://www.alltrucks.com/wp-content/uploads/2025/10/Alltrucks-Competence-hero-slider.jpg');
  opacity: .28;
}
.page-leitfaden .guide-hero .hero-overlay-gradient {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background:
    linear-gradient(to top,
      rgba(0,25,62,.9) 0%,
      rgba(0,25,62,.85) 25%,
      rgba(0,25,62,.7) 50%,
      rgba(0,25,62,.5) 75%,
      rgba(0,25,62,.3) 100%
    ) !important;
  z-index: 1 !important;
  pointer-events: none;
}
.page-leitfaden .guide-hero .hero-inner--guide {
  position: relative;
  z-index: 2;
  background: transparent !important;
  background-image: none !important;
  width: 100%;
}
@media (max-width: 1024px) { .page-leitfaden .guide-hero { min-height: 620px !important; } }
@media (max-width: 640px)  {
  .page-leitfaden .guide-hero { min-height: 500px !important; }
  .page-leitfaden .guide-hero .hero-overlay-gradient {
    background: linear-gradient(to top, rgba(0,25,62,1) 0%, rgba(0,25,62,.55) 100%) !important;
  }
}

.case-study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}
.case-study-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.case-study-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
}
.case-study-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: rgba(42,61,82,.45);
  letter-spacing: .12em;
}
.case-study-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.22;
  color: var(--alltrucks-dark-blue);
  margin: 0 0 18px;
  max-width: 90%;
}
.case-study-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0,25,62,.08);
}
.case-study-meta-row .case-study-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: rgba(42,61,82,.7);
  padding: 0 18px;
  border-right: 1px solid rgba(0,25,62,.08);
  line-height: 1.3;
}
.case-study-meta-row .case-study-meta:first-child { padding-left: 0; }
.case-study-meta-row .case-study-meta:last-child { border-right: none; }

/* Grid — equal-height columns (Phase 13.2) */
.case-study-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* Columns — equal-width, uniform styling (Phase 12 + 13.3) */
.case-study-col,
.case-study-col--result,
.page-artikel .case-study-col,
.page-artikel .case-study-col--result,
.page-leitfaden .case-study-col,
.page-leitfaden .case-study-col--result {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 24px 22px;
  border: 1px solid rgba(0,181,225,.20);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,25,62,.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: #fff;
}
.case-study-col--result,
.page-artikel .case-study-col--result,
.page-leitfaden .case-study-col--result {
  background: linear-gradient(135deg, rgba(0,181,225,.06), rgba(0,181,225,.015));
}

.case-study-col-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--alltrucks-cyan);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--alltrucks-cyan);
  background: #fff;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.case-study-col--result .case-study-col-num,
.page-artikel .case-study-col--result .case-study-col-num,
.page-leitfaden .case-study-col--result .case-study-col-num {
  background: #fff;
  color: var(--alltrucks-cyan);
  border: 2px solid var(--alltrucks-cyan);
}
.case-study-col-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--alltrucks-cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.case-study-col--result .case-study-col-label,
.page-artikel .case-study-col--result .case-study-col-label,
.page-leitfaden .case-study-col--result .case-study-col-label {
  color: var(--alltrucks-cyan);
}
.case-study-col p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  flex: 1 1 auto;
}

.case-study-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,25,62,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.case-study-source {
  font-size: 11px;
  font-style: italic;
  color: rgba(42,61,82,.55);
  font-family: var(--font-ui);
}
.case-study-source::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  margin-right: 8px;
  vertical-align: middle;
  opacity: .6;
}


/* =============================================================================
   FC-BLOCK: STAT ROW (inline stats inside article body)
   ============================================================================= */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  margin: var(--space-6) 0;
  border: 1px solid var(--gray);
}
/* stat-cell is the actual PHP class used — alias stat-row-item.
   Internal-only separator via `+ sibling`-Pattern (kein gap+background-Trick),
   damit garantiert kein "trailing" Separator rechts vom letzten Cell sichtbar
   wird, egal welche Sub-Pixel-Rundung der Browser nutzt. */
.stat-cell,
.stat-row-item {
  background: #fff;
  padding: var(--space-5);
  text-align: center;
}
.stat-cell + .stat-cell,
.stat-row-item + .stat-row-item {
  border-left: 1px solid var(--gray);
}
.stat-row-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  line-height: 1;
  letter-spacing: -.02em;
  transition: color .3s;
}
.stat-row-num.counting { color: var(--alltrucks-cyan); }
.stat-row-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-light);
  margin-top: var(--space-1);
  line-height: 1.4;
}


/* =============================================================================
   FC-BLOCK: ARTICLE TABLE
   ============================================================================= */

.article-table {
  width: 100%;
  margin: 36px 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  background: #fff;
  border: 1px solid rgba(0,25,62,.06);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,25,62,.04);
  /* Kein `overflow: hidden` — der parent-Container (.e-con) kann selbst
     overflow:hidden haben, was box-shadow-Ringe abschneiden würde. Statt-
     dessen runden wir die vier Eck-Zellen explizit so dass sie zum Tabellen-
     Border-Radius passen. */
}
/* Eck-Zellen runden — passt zum 12px-Radius der Tabelle minus 1px Border. */
.article-table thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.article-table thead tr:first-child th:last-child { border-top-right-radius: 11px; }
.article-table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.article-table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.article-table caption {
  caption-side: top;
  padding: 20px 24px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--alltrucks-cyan);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.article-table thead {
  background: #e9f7fb;
}
.article-table thead th {
  padding: 18px 24px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--alltrucks-dark-blue);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--alltrucks-cyan) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.article-table tbody tr,
.article-table tbody tr:nth-child(even),
.article-table tbody tr:nth-child(odd) { background: #fff !important; }
.article-table tbody td {
  padding: 18px 24px;
  font-size: 15px;
  color: var(--text-body);
  border-bottom: 1px solid rgba(0,25,62,.035) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  line-height: 1.5;
  background: #fff !important;
}
.article-table tbody tr:last-child td { border-bottom: 0 !important; }
.article-table tbody tr:hover td { background: rgba(0,181,225,.025) !important; }

/* Mobile: aggressive Schrift- und Padding-Reduktion damit 3-Spalten-Tabellen
   (typisch: KPI / Vorher / Nachher) auf 360–414px-Viewports lesbar reinpassen.
   Header-Text bleibt uppercase + bold für Hierarchie, aber 10px statt 12px.
   Long-Word-Wrap erzwingen — sonst sprengen Wörter wie "STRUKTURIERTE" die
   Spaltenbreite. */
@media (max-width: 768px) {
    .article-table { font-size: 12px; margin: 24px 0; }
    .article-table thead th {
        padding: 10px 8px;
        font-size: 10px;
        letter-spacing: .04em;
        word-break: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .article-table tbody td {
        padding: 10px 8px;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .article-table caption { padding: 14px 12px 6px; font-size: 11px; }
}

/* Page-specific overrides (already correct but explicit for clarity) */
.page-artikel .article-table,
.page-leitfaden .article-table {
  background: #fff;
  border: 1px solid rgba(0,25,62,.06);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,25,62,.04);
}
.page-artikel .article-table thead,
.page-leitfaden .article-table thead {
  background: #e9f7fb;
}
.page-artikel .article-table thead th,
.page-leitfaden .article-table thead th {
  color: var(--alltrucks-dark-blue);
  background: #e9f7fb;
}
.page-artikel .article-table tbody td,
.page-leitfaden .article-table tbody td {
  color: var(--text-body);
  border-bottom-color: rgba(0,25,62,.035);
}
.page-artikel .article-table tbody tr:last-child td,
.page-leitfaden .article-table tbody tr:last-child td { border-bottom: none; }
.page-artikel .article-table tbody tr:hover td,
.page-leitfaden .article-table tbody tr:hover td { background: rgba(0,181,225,.03); }


/* =============================================================================
   FC-BLOCK: INLINE FIGURE
   ============================================================================= */

.inline-figure {
  /* !important nötig: Elementor's `frontend.min.css` setzt
     `.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure { margin: 0 }`
     mit höherer Spezifität (3,1) und würde unser Component-Spacing sonst
     wegrasieren. Gleiches Pattern wie beim site-header (siehe CLAUDE.md). */
  margin: 32px 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,25,62,.10), 0 2px 6px rgba(0,25,62,.06);
  border: 1px solid rgba(0,25,62,.06);
}
.inline-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0;
}
.inline-figure figcaption {
  font-size: 12px;
  font-style: italic;
  color: rgba(42,61,82,.65);
  padding: 10px 16px 14px;
  background: #fff;
  line-height: 1.5;
  text-align: left;
  border-top: 1px solid rgba(0,25,62,.06);
  font-family: var(--font-ui);
  border-left: 2px solid var(--alltrucks-cyan);
}
.inline-figure--variant-1 img { filter: saturate(1.1) brightness(.95); }
.inline-figure--variant-2 img { filter: hue-rotate(8deg) saturate(.9); object-position: center 30%; }
.inline-figure--variant-3 img { filter: brightness(1.05) contrast(1.1); object-position: center 70%; }

/* Page overrides (already rounded) */
.page-artikel .inline-figure,
.page-leitfaden .inline-figure {
  border-radius: 12px;
  overflow: hidden;
}
.page-artikel .inline-figure img,
.page-leitfaden .inline-figure img {
  border-radius: 12px 12px 0 0;
  display: block;
  width: 100%;
}
.page-artikel .inline-figure figcaption,
.page-leitfaden .inline-figure figcaption {
  font-size: 12px;
  font-style: italic;
  color: rgba(42,61,82,.65);
  padding: 10px 16px 14px;
  background: #fff;
  line-height: 1.5;
  text-align: left;
  border-top: 1px solid rgba(0,25,62,.06);
  font-family: var(--font-ui);
}


/* =============================================================================
   FC-BLOCK: TEXT BLOCK
   ============================================================================= */

.text-block {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.text-block p { margin-bottom: var(--space-5); }
.text-block p:last-child { margin-bottom: 0; }

/* Survey-Sektion war im Quell-HTML enthalten, wird vom Migrations-Skript ab
   v3.1.4 gestrippt — bestehende imports tragen sie aber noch im article_body
   (als raw HTML im text_block-Fallback). Out-of-scope laut CLAUDE.md (kein
   ACF-Feld, kein Shortcode, keine JS-Logik portiert), daher komplett verstecken. */
.survey-section { display: none !important; }

/* Author-Bio im Article-Body ist ein Migrations-Bestand (die Quell-HTML
   enthält `<aside class="author-bio">` direkt in `.article-body-inner` →
   landet via text_block-Fallback inline). Die "richtige" Karte rendert der
   dedizierte [at_author]-Shortcode unter dem Body — daher die inline-Variante
   verstecken, sonst erscheint sie doppelt. Ab v3.1.5 strippt die Migration
   das auch quellseitig; CSS-Hide fängt bestehende Imports auf der Live-DB ab. */
.article-body-inner .author-bio { display: none !important; }


/* =============================================================================
   FC-BLOCK: SECTION DIVIDER
   ============================================================================= */

.sec-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-8);
}
.sec-divider-line {
  flex: 1;
  height: 1px;
  background: var(--gray);
}
.sec-divider-icon {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.sec-divider-icon span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  border-radius: 1px;
}
.sec-divider-icon span:nth-child(2) { opacity: .4; height: 10px; }


/* =============================================================================
   SHORTCODE: KEY STATS (animated hero stats)
   ============================================================================= */

.key-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.key-stat {
  background: #fff;
  padding: var(--space-7) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background .25s;
}
.key-stat::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--alltrucks-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.key-stat:hover { background: #fafeff; }
.key-stat:hover::before { transform: scaleX(1); }

.stat-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-value {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.stat-suffix {
  font-family: var(--font-display);
  font-size: 0.65em;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: 0;
  vertical-align: super;
  line-height: 1;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* Prevent reveal animation jank for above-fold stats */
.key-stats.reveal {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}


/* =============================================================================
   SHORTCODE: ARTICLE TL;DR SUMMARY BOX
   ============================================================================= */

.article-tldr {
  margin: 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(0,181,225,.08), rgba(0,181,225,.02));
  border-left: 4px solid var(--alltrucks-cyan);
  border-radius: 6px;
  opacity: 1;
  transform: none;
}
.article-tldr-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.article-tldr-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 12px;
}
.article-tldr-bullets {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.7;
}
.article-tldr-bullets li { color: var(--text-body); }

/* Page-context overrides */
.page-artikel .article-tldr {
  background: linear-gradient(135deg, rgba(0,181,225,.08), rgba(0,181,225,.02));
  border: 1px solid rgba(0,181,225,.18);
  border-left: 4px solid var(--alltrucks-cyan);
}
.page-artikel .article-tldr-text,
.page-leitfaden .article-tldr-text { color: var(--text-body); }
.page-artikel .article-tldr-bullets,
.page-leitfaden .article-tldr-bullets { color: var(--text-body); }
.page-artikel .article-tldr-bullets li,
.page-leitfaden .article-tldr-bullets li { color: var(--text-body); }


/* =============================================================================
   SHORTCODE: FAQ ACCORDION
   ============================================================================= */

.faq-block {
  padding: 40px 44px;
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,25,62,.04);
}
.faq-block-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,25,62,.06);
}
.faq-block-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--alltrucks-cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.faq-block-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0;
}
.faq-block-list {
  display: flex;
  flex-direction: column;
}
.faq-block-item {
  border-bottom: 1px solid rgba(0,25,62,.08);
  transition: background .2s;
}
.faq-block-item:last-child { border-bottom: none; }
.faq-block-item[open] { background: rgba(0,181,225,.03); }

.faq-block-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-block-question::-webkit-details-marker { display: none; }
.faq-block-question-text {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  line-height: 1.4;
  flex: 1;
  transition: color .2s;
}
.faq-block-item:hover .faq-block-question-text { color: var(--alltrucks-cyan); }

.faq-block-icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(0,25,62,.18);
  border-radius: 50%;
  transition: all .25s;
}
.faq-block-icon::before,
.faq-block-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--alltrucks-dark-blue);
  transition: all .25s;
}
.faq-block-icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-block-icon::after  { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq-block-item[open] .faq-block-icon {
  background: var(--alltrucks-cyan);
  border-color: var(--alltrucks-cyan);
  transform: rotate(180deg);
}
.faq-block-item[open] .faq-block-icon::before,
.faq-block-item[open] .faq-block-icon::after { background: #fff; }
.faq-block-item[open] .faq-block-icon::after { opacity: 0; }

.faq-block-answer { padding: 0 4px 24px; }
.faq-block-answer p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 12px;
}
.faq-block-answer p:last-child { margin-bottom: 0; }

/* Page-context: force visible on both page types */
.page-leitfaden .faq-block {
  border-left-color: var(--alltrucks-cyan);
}


/* =============================================================================
   SHORTCODE: TOC CARD ([at_toc]) — matches prototype
   ============================================================================= */

.diag-slash {
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  border-radius: 1px;
  flex-shrink: 0;
}

.toc-card {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.toc-header {
  background: var(--alltrucks-dark-blue);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.toc-header span {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.toc-progress-bar {
  height: 2px;
  background: var(--gray);
}
.toc-progress-fill {
  height: 100%;
  background: var(--alltrucks-cyan);
  width: 0%;
  transition: width .2s linear;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-item {
  border-bottom: 1px solid rgba(223,229,233,.7);
}
.toc-item:last-child { border-bottom: none; }
.toc-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  color: var(--text-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
  position: relative;
}
.toc-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--alltrucks-cyan);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s var(--ease-out);
}
.toc-link:hover {
  color: var(--alltrucks-dark-blue);
  background: rgba(0,181,226,.04);
}
.toc-link:hover::before { transform: scaleY(1); }
.toc-link.active {
  color: var(--alltrucks-dark-blue);
  font-weight: 500;
  background: rgba(0,181,226,.05);
}
.toc-link.active::before { transform: scaleY(1); }
.toc-num {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  min-width: 18px;
  letter-spacing: .04em;
  flex-shrink: 0;
}


/* =============================================================================
   SHORTCODE: META CARD ([at_meta]) — matches prototype
   ============================================================================= */

.meta-card {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.meta-card-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alltrucks-dark-blue);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.meta-card-title .diag-slash {
  height: 14px;
  width: 3px;
}
.meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.meta-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(223,229,233,.6);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.meta-item svg {
  flex-shrink: 0;
  color: var(--alltrucks-cyan);
}


/* =============================================================================
   SHORTCODE: LEITFADEN-SIDEBAR
   Cluster-Nav (Themencluster) + Authority-Card (Kennzahlen) + Related-Guides.
   Rendered by [at_toc] (cluster-nav) and [at_meta] (authority + related-guides)
   when the post has `leitfaden = true`. Markup mirrors the prototype's
   sidebar cards 1:1 — see leitfaden-*.html for reference.
   ============================================================================= */

/* Cluster navigator (Themencluster) */
.cluster-nav-card {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-top: 3px solid var(--alltrucks-dark-blue);
}
/* Stapelt die beiden [at_meta]-Karten (Kennzahlen + Weitere Leitfäden) mit
   demselben Gap wie der Elementor-Sidebar-Container (20px) — sonst gibt es
   eine Lücke zwischen Themencluster→Kennzahlen (Container-Gap + Card-Margin)
   und einen kleineren Lücke zwischen Kennzahlen→Weitere-Leitfäden (nur
   Card-Margin). Margin-bottom an den Karten entfernt, Layout über Gap. */
.meta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cluster-nav-header {
  background: var(--alltrucks-dark-blue);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.cluster-nav-header > span {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.cluster-nav-count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  background: rgba(0,181,226,.12);
  border: 1px solid rgba(0,181,226,.25);
  padding: 2px var(--space-2);
  border-radius: 999px;
}
.cn-list {
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}
.cn-section {
  border-bottom: 1px solid rgba(223,229,233,.6);
  list-style: none;
}
.cn-section:last-child { border-bottom: none; }
/* Hard-Reset gegen Theme/Elementor-Button-Defaults (Hello-Elementor +
   Elementor-Pro setzen auf <button> einen Primary-Color-BG + roten Hover-Text).
   Wir kapern den nativen `<button>` für das Toggle-Verhalten + brauchen also
   einen vollständig leeren Look — daher !important auf Bg / Color / Border. */
button.cn-section-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-2);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background .2s;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  min-height: 0;
  border-radius: 0;
}
button.cn-section-btn:hover,
button.cn-section-btn:focus,
button.cn-section-btn:focus-visible {
  background: rgba(0,25,62,.04) !important;
  color: inherit !important;
  outline: none;
}
button.cn-section-btn.active {
  background: rgba(0,181,226,.05) !important;
}
button.cn-section-btn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--alltrucks-cyan);
}
.cn-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  min-width: 22px;
  opacity: .45;
  transition: opacity .2s;
  flex-shrink: 0;
  line-height: 1.3;
}
button.cn-section-btn.active .cn-num { opacity: 1; }
.cn-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.3;
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color .2s;
}
button.cn-section-btn.active .cn-name { color: var(--alltrucks-dark-blue); }
.cn-articles {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  transition: max-height .3s var(--ease-out);
}
.cn-articles.open { max-height: 400px; }
.cn-article-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-12);
  text-decoration: none;
  transition: background .15s;
}
.cn-article-link:hover { background: rgba(0,181,226,.04); }
.cn-article-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray-muted);
  flex-shrink: 0;
  margin-top: 6px;
  transition: background .2s;
}
.cn-article-link:hover .cn-article-dot { background: var(--alltrucks-cyan); }
.cn-article-title {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-light);
  line-height: 1.4;
  transition: color .15s;
}
.cn-article-link:hover .cn-article-title { color: var(--alltrucks-dark-blue); }

/* Authority-Card (Leitfaden-Kennzahlen) */
.authority-card {
  background: var(--alltrucks-dark-blue);
  border-radius: var(--r);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--alltrucks-cyan);
}
.authority-card::before {
  content: '';
  position: absolute;
  top: -10px; right: 32px;
  width: 1px;
  height: 130%;
  background: var(--alltrucks-cyan);
  opacity: .15;
  transform: skewX(-15deg);
}
.authority-card::after {
  content: '';
  position: absolute;
  top: -10px; right: 16px;
  width: 4px;
  height: 130%;
  background: var(--alltrucks-cyan);
  opacity: .1;
  transform: skewX(-15deg);
}
.authority-card-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.auth-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.auth-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,.35);
}
.auth-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .02em;
}
.auth-value.cyan { color: var(--alltrucks-cyan); }
.auth-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: rgba(0,181,226,.8);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(0,181,226,.1);
  border: 1px solid rgba(0,181,226,.2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-top: var(--space-3);
}
.auth-updated::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--alltrucks-cyan);
  flex-shrink: 0;
}

/* Related-Guides-Card (Weitere Leitfäden) */
.related-guides-card {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.related-guides-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--gray);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.related-guides-header .diag-slash { flex-shrink: 0; }
.related-guides-header > span {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alltrucks-dark-blue);
}
.rg-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid rgba(223,229,233,.5);
  transition: background .2s;
}
.rg-item:last-child { border-bottom: none; }
.rg-item:hover { background: rgba(0,181,226,.04); }
.rg-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  min-width: 28px;
  opacity: .25;
}
.rg-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 2px;
}
.rg-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-light);
}

/* Reading Progress Bar (page-top, fixed) */
.atm-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0,25,62,.15);
  z-index: 10001;
  pointer-events: none;
}
.atm-reading-progress-bar {
  height: 100%;
  width: 0;
  background: var(--alltrucks-cyan);
  transition: width .1s linear;
}
/* Admin-bar offset (WordPress logged-in toolbar) */
.admin-bar .atm-reading-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .atm-reading-progress { top: 46px; }
}


/* =============================================================================
   SHORTCODE: AUTHOR BIO
   ============================================================================= */

.author-bio {
  margin: 0;
  padding: 32px 36px;
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-radius: 12px;
  border-left: 4px solid var(--alltrucks-cyan);
  box-shadow: 0 2px 16px rgba(0,25,62,.04);
  opacity: 1;
  transform: none;
}
.author-bio-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.author-bio-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--alltrucks-cyan), #0090b8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  overflow: hidden;
}
.author-bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.author-bio-info { flex: 1; }
.author-bio-content { flex: 1; }
.author-bio-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.author-bio-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  margin: 0 0 4px;
  line-height: 1.3;
}
.author-bio-role {
  font-size: 13px;
  color: rgba(42,61,82,.7);
  margin-bottom: 14px;
}
.author-bio-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 14px;
}
.author-bio-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.author-bio-cred {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(0,181,225,.1);
  color: var(--alltrucks-cyan);
  border-radius: 3px;
  letter-spacing: .04em;
}

/* Page-context overrides */
.page-artikel .author-bio,
.page-leitfaden .author-bio {
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-left: 4px solid var(--alltrucks-cyan);
  box-shadow: 0 2px 16px rgba(0,25,62,.04);
  border-radius: 12px;
}
.page-artikel .author-bio-name,
.page-leitfaden .author-bio-name { color: var(--alltrucks-dark-blue); }
.page-artikel .author-bio-role,
.page-leitfaden .author-bio-role { color: rgba(42,61,82,.7); }
.page-artikel .author-bio-text,
.page-leitfaden .author-bio-text { color: var(--text-body); }


/* =============================================================================
   SHORTCODE: EXPERTISE / PARTNER-DISCLOSURE BOX
   Soft card im Artikel-Endbereich: "Mit fachlicher Expertise von …" + Logo.
   Rendered by [at_expertise]. Sichtbar nur wenn expertise_enabled = 1.
   ============================================================================= */

.expertise-section {
  margin: 0;
}
.expertise-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-7) var(--space-6) var(--space-8);
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Vertikaler Cyan-Gradient links — Akzentleiste, oben kräftig, unten ausfadend. */
.expertise-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--alltrucks-cyan) 0%, rgba(0,181,226,.15) 100%);
  pointer-events: none;
}
/* Diagonaler BG-Streifen rechts — analog zu .cornerstone/.hero-main, aber
   dezent auf hellem Card-Hintergrund. */
.expertise-inner::after {
  content: '';
  position: absolute;
  top: -60px;
  right: 85px;
  width: 80px;
  height: 350%;
  background: var(--alltrucks-cyan);
  opacity: .12;
  transform: skewX(-15deg);
  pointer-events: none;
}
.expertise-text { min-width: 0; position: relative; z-index: 1; }
.expertise-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,25,62,.55);
  margin-bottom: var(--space-3);
}
.expertise-eyebrow .diag-slash {
  height: 12px;
  width: 3px;
}
.expertise-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--alltrucks-dark-blue);
}
.expertise-sub {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0,25,62,.6);
  margin-top: var(--space-2);
}
.expertise-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 120px;
  max-width: 200px;
}
/* Image-Variante: Logo sitzt in einer weißen Card mit Border + Border-Radius,
   damit es sich gegen den diagonalen BG-Streifen sauber abhebt. Text-Variante
   (.expertise-logo-text Pille) bleibt freistehend. */
.expertise-logo:has(.expertise-logo-img) {
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,25,62,.04);
  padding: var(--space-3);
  min-height: 80px;
}
.expertise-logo-img {
  display: block;
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.expertise-logo-text {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: rgba(0,79,151,.06);
  border: 1px solid rgba(0,79,151,.18);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--alltrucks-dark-blue);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .expertise-inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6) var(--space-5) var(--space-7);
  }
  .expertise-inner::after { right: -40px; width: 100px; opacity: .04; }
  .expertise-logo { justify-content: flex-start; max-width: none; }
  .expertise-logo-text { white-space: normal; }
}


/* =============================================================================
   SHORTCODE: ARTICLE-NAV (Weitere Artikel)
   "Zurück zur Kategorie" + "Nächster Artikel" am Ende eines Beitrags.
   Rendered by [at_article_nav]. Nur bei normalen Beiträgen.
   ============================================================================= */

.nav-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-12) 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alltrucks-dark-blue);
}
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: 20px;
}
.art-nav-btn {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: #fff;
  border: 1px solid rgba(0,25,62,.08);
  border-radius: 12px;
  box-shadow: var(--shadow) !important;
  text-decoration: none;
  transition: transform .2s var(--ease-out, ease-out), box-shadow .2s, border-color .2s;
}
.art-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,25,62,.12) !important;
  border-color: rgba(0,181,226,.35);
}
.art-nav-btn.right {
  text-align: right;
  align-items: flex-end;
}
.art-nav-dir {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
}
.art-nav-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--alltrucks-dark-blue);
}
@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
  .art-nav-btn.right { text-align: left; align-items: flex-start; }
}


/* =============================================================================
   SHORTCODE: RELATED ARTICLES GRID
   ============================================================================= */

.related-articles {
  margin: 0;
}
.related-articles-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  letter-spacing: 0;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.related-articles-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.7em;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  flex-shrink: 0;
}
.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.related-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: transform .3s var(--ease-out), box-shadow .3s;
  position: relative;
}
.related-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--alltrucks-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  z-index: 2;
}
.related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.related-card:hover::before { transform: scaleX(1); }

.related-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
.related-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #fff;
  background: var(--alltrucks-cyan);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.related-card-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  line-height: 1.25;
  margin: var(--space-4) var(--space-5) var(--space-2);
  letter-spacing: .01em;
  transition: color .2s;
}
.related-card:hover .related-card-title { color: var(--alltrucks-cyan); }
.related-card-excerpt {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
  margin: 0 var(--space-5) var(--space-5);
  flex: 1;
}


/* =============================================================================
   LEITFADEN: GUIDE INTRO CARD
   ============================================================================= */

.guide-intro-card {
  background: linear-gradient(135deg, rgba(0,181,225,.08), rgba(0,181,225,.02));
  border: 1px solid rgba(0,181,225,.18);
  border-left: 4px solid var(--alltrucks-cyan);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: var(--space-12);
  position: relative;
  opacity: 1;
  transform: none;
  transition: none;
}
.guide-intro-card::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 40px;
  width: 2px;
  height: calc(100% + 20px);
  background: var(--alltrucks-cyan);
  opacity: .07;
  transform: skewX(-15deg);
  pointer-events: none;
}
.guide-intro-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: var(--space-6) var(--space-10) 0;
}
.guide-intro-card .guide-intro-text {
  padding-top: var(--space-3);
}
.guide-intro-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
  padding: var(--space-8) var(--space-10) var(--space-4);
}
.guide-intro-bullets {
  list-style: none;
  padding: var(--space-4) var(--space-10) var(--space-8);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.guide-intro-bullets li {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.5;
  padding-left: var(--space-5);
  position: relative;
}
.guide-intro-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 3px;
  height: 12px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  border-radius: 1px;
}

/* Page-context: keep light styling on cornerstone */
.page-leitfaden .guide-intro-card {
  border-left-color: var(--alltrucks-cyan);
}


/* =============================================================================
   LEITFADEN: GUIDE LEARN CARD ("Was Sie in diesem Leitfaden lernen")
   Zweite Intro-Karte unter der Executive Summary mit gi-Style aus dem
   Prototyp (Kicker + Title + Text + 2-spaltige Cyan-Checkmark-Liste).
   ============================================================================= */

.guide-learn-card {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: var(--space-12);
  position: relative;
}
.guide-learn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--alltrucks-cyan) 0%, var(--alltrucks-cyan) 60%, rgba(0,181,226,.2) 100%);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.guide-learn-card::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 40px;
  width: 2px;
  height: calc(100% + 20px);
  background: var(--alltrucks-cyan);
  opacity: .05;
  transform: skewX(-15deg);
  pointer-events: none;
}
.guide-learn-inner {
  padding: var(--space-10) var(--space-12);
}
.gl-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gl-kicker::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
}
.gl-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
.gl-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.45;
  margin-bottom: var(--space-6);
}
.gl-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.gl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.45;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.gl-item::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background-color: rgba(0,181,226,.1);
  border: 1.5px solid var(--alltrucks-cyan);
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300B5E2' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  position: static;
  transform: none;
}
@media (max-width: 768px) {
  .guide-learn-inner { padding: var(--space-7) var(--space-5); }
  .gl-title { font-size: 20px; }
  .gl-checklist { grid-template-columns: 1fr; }
}


/* =============================================================================
   LEITFADEN: CONTENT MAP (Themencluster-Übersicht "Was dieser Leitfaden abdeckt")
   Prototype-aligned `.cm-*` structure. Full-width breakout from the boxed
   main column via viewport-width trick (content-map liegt im Elementor-Template
   in der 75%-Main-Column, soll aber als Full-Bleed-Dark-Section erscheinen).
   ============================================================================= */

.content-map {
  background: var(--alltrucks-dark-blue);
  padding: var(--space-14) 0;
  position: relative;
  overflow: hidden;
  /* Breakout: span full viewport even when nested inside a boxed flex column.
     Funktioniert, solange kein Vorfahre `overflow: hidden` setzt. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.content-map-wrap {
  max-width: none;
  margin: 0;
  padding-inline: max(var(--space-5), calc((100% - 1320px) / 2));
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Header */
.cm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-10);
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cm-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cm-kicker::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
}
.cm-title {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.25;
}
.cm-subtitle {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255,255,255,.38);
  margin-top: var(--space-2);
  line-height: 1.55;
  max-width: 480px;
}
.cm-header-right {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--alltrucks-mid-blue, #003770);
  padding: var(--space-1) 34px var(--space-1) 30px;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.cm-header-right strong {
  font-family: var(--font-display);
  color: var(--alltrucks-cyan);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-right: var(--space-3);
}

/* Grid */
.cm-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.cm-chapter {
  background: var(--alltrucks-light-blue, #002a5c);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background .25s var(--ease-out);
}
.cm-chapter:hover { background: var(--alltrucks-light-blue, #003366); }
/* Diagonal CI stripe — top-right corner */
.cm-chapter::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 10px;
  width: 40px;
  height: 140%;
  background: linear-gradient(90deg, transparent 0, transparent 0px, rgba(0,181,226,.15) 0px, rgba(0,181,226,.15) 2px, transparent 2px, transparent 22px, rgba(0,181,226,.1) 22px, rgba(0,181,226,.1) 27px, transparent 27px);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}

.cm-ch-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  color: rgba(255,255,255,.1);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 2px;
  transition: color .25s;
}
.cm-chapter:hover .cm-ch-num { color: rgba(0,181,226,.22); }
.cm-ch-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-2);
  opacity: .7;
}
.cm-ch-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.cm-ch-articles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  margin-top: auto;
}
.cm-article {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  transition: opacity .15s;
}
.cm-article-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--alltrucks-cyan);
  opacity: .5;
  flex-shrink: 0;
  margin-top: 8px;
}
.cm-article-title {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}
.cm-chapter:hover .cm-article-title { color: rgba(255,255,255,.6); }
.cm-ch-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .06em;
  background: rgba(0,181,226,.1);
  border: 1px solid rgba(0,181,226,.2);
  padding: 2px var(--space-2);
  border-radius: 999px;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .cm-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-title { font-size: 32px; }
}
@media (max-width: 600px) {
  .cm-grid { grid-template-columns: 1fr; }
  .cm-title { font-size: 24px; }
  .content-map { padding: var(--space-10) 0; }
}


/* =============================================================================
   LEITFADEN: SECTION JUMP NAV (sticky)
   ============================================================================= */

.section-jump-nav {
  background: #fff;
  border-bottom: 1px solid var(--gray);
  /* Kein eigenes position:sticky — der äußere Elementor-Container (.e-con) ist
     bereits sticky (siehe ELEMENTOR-LAYOUT-OVERRIDE-Block weiter unten). Zwei
     verschachtelte sticky-Elemente erzeugen sonst Layout-Konflikte und die
     innere Bar wird vom Header teilweise verdeckt. */
  overflow: hidden;
}
.section-jump-inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 0;
  position: relative;
}
.section-jump-inner::-webkit-scrollbar { display: none; }
.section-jump-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .2s, background .2s;
  flex-shrink: 0;
  position: relative;
}
.section-jump-link:hover {
  color: var(--alltrucks-dark-blue);
  background: rgba(0,181,226,.03);
}
.section-jump-link.active {
  color: var(--alltrucks-dark-blue);
  border-bottom-color: var(--alltrucks-cyan);
}
.section-jump-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  opacity: .5;
  transition: opacity .2s;
}
.section-jump-link:hover .section-jump-num,
.section-jump-link.active .section-jump-num { opacity: 1; }


/* =============================================================================
   LEITFADEN: INSIGHT BOX (per-chapter)
   ============================================================================= */

.insight-box {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  padding: var(--space-6);
  margin: var(--space-6) 0;
  background: var(--alltrucks-dark-blue);
  border-left: 4px solid var(--alltrucks-cyan);
}
.insight-box::before,
.insight-box::after {
  content: '';
  position: absolute;
  height: 350%;
  transform: skewX(-15deg);
  pointer-events: none;
}
.insight-box::before { top: -80px; right: 40px;  width: 160px; background: var(--alltrucks-cyan); opacity: .10; }
.insight-box::after  { top: -80px; right: 180px; width: 60px;  background: var(--alltrucks-cyan); opacity: .15; }

.insight-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}
.insight-box p {
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1.45;
  margin: 0;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}
.insight-box cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,.35);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.insight-metric {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: -.02em;
  line-height: 1;
  margin-top: var(--space-4);
  position: relative;
  z-index: 1;
}


/* =============================================================================
   LEITFADEN: GUIDE SECTION WRAPPER
   ============================================================================= */

.guide-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.guide-section {
  margin-bottom: 0;
}
.section-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--alltrucks-cyan);
}
/* Section-Heading (Prototyp-Variante): große Cyan-Nummer links neben dem
   Titel, vertikaler Strich darunter als Sub-Marker. Ersetzt im Leitfaden-
   Kontext die alte flache `.section-header`-Variante; letztere bleibt
   vorhanden für Article-Body-Kontexte, die sie noch verwenden. */
.section-heading {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.section-num-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: 6px;
}
.section-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  line-height: 1;
  letter-spacing: -.02em;
}
.section-num-line {
  width: 2px;
  height: 32px;
  background: var(--alltrucks-cyan);
  opacity: .25;
}
.section-heading-text {
  flex: 1;
  min-width: 0;
}
.section-heading .section-label {
  margin-bottom: var(--space-2);
}
@media (max-width: 640px) {
  .section-heading { gap: var(--space-4); }
  .section-num { font-size: 44px; }
  .section-num-line { height: 20px; }
}
.section-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  margin-bottom: var(--space-2);
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}


/* =============================================================================
   LEITFADEN: ARTICLE CLUSTER (Vertiefender Fachartikel)
   Rendered at the END of each guide-section, linking to deep-dive articles.
   ============================================================================= */

.article-cluster {
  margin-top: var(--space-8);
  margin-bottom: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--alltrucks-cyan);
}
.ac-header {
  background: #fff;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,25,62,.08);
  position: relative;
  overflow: hidden;
}
.ac-header-left { display: flex; align-items: center; gap: var(--space-3); }
.ac-icon {
  width: 32px;
  height: 32px;
  background: rgba(0,181,226,.1);
  border: 1px solid rgba(0,181,226,.2);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--alltrucks-cyan);
}
.ac-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,25,62,.4);
}
.ac-section-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ac-count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .06em;
  background: var(--alltrucks-dark-blue);
  padding: 3px var(--space-3) 3px var(--space-5);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  z-index: 100;
}
.ac-articles { display: flex; flex-direction: column; background: #fff; }
.ac-article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  text-decoration: none;
  color: var(--text-body);
  border-bottom: 1px solid rgba(0,25,62,.06);
  transition: background .2s ease-out;
  position: relative;
}
.ac-article:last-child { border-bottom: none; }
.ac-article::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--alltrucks-cyan);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s ease-out;
}
.ac-article:hover { background: rgba(0,181,226,.04); }
.ac-article:hover::before { transform: scaleY(1); }
.ac-article-cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alltrucks-cyan);
  opacity: .7;
  margin-bottom: var(--space-1);
}
.ac-article-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--space-1);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.ac-article-excerpt {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light, rgba(0,25,62,.55));
  line-height: 1.5;
}
.ac-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-align: right;
}
.ac-read-time {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-light, rgba(0,25,62,.55));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ac-read-time span {
  font-size: 22px;
  color: var(--alltrucks-cyan);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}
.ac-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gray, rgba(0,25,62,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, rgba(0,25,62,.55));
  transition: all .2s ease-out;
  flex-shrink: 0;
  background: #fff;
}
.ac-article:hover .ac-arrow {
  background: var(--alltrucks-cyan);
  border-color: var(--alltrucks-cyan);
  color: #fff;
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .ac-article { grid-template-columns: 1fr; }
  .ac-article-meta { display: none; }
}


/* =============================================================================
   LEITFADEN: SECTION RELATED LINKS (legacy, kept for back-compat — may be unused)
   ============================================================================= */

.section-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray);
}
.section-related-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--alltrucks-dark-blue);
  text-decoration: none;
  transition: color .2s;
  padding: var(--space-2) 0;
}
.section-related-link::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--alltrucks-cyan);
  transform: skewX(-41deg);
  flex-shrink: 0;
  opacity: .6;
}
.section-related-link:hover { color: var(--alltrucks-cyan); }
.section-related-link:hover::before { opacity: 1; }


/* =============================================================================
   LEITFADEN: GUIDE BODY INNER WRAPPER
   White-Card analog zu `.article-body` aus dem Article-Template — sonst sitzt
   der Section-Content direkt auf dem grauen Body-Hintergrund.
   ============================================================================= */

.guide-body-inner {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: var(--space-10);
}
@media (max-width: 768px) {
  .guide-body-inner { padding: var(--space-6) var(--space-5); }
}


/* =============================================================================
   REVEAL ANIMATION OVERRIDE
   SEO boxes inserted via shortcodes must be visible immediately.
   ============================================================================= */

.case-study,     .case-study.reveal,
.article-tldr,   .article-tldr.reveal,
.author-bio,     .author-bio.reveal,
.article-toc,    .article-toc.reveal,
.highlight-box.reveal,
.guide-intro-card, .guide-intro-card.reveal {
  opacity: 1;
  transform: none;
}


/* =============================================================================
   RESPONSIVE — 1024px (tablet)
   ============================================================================= */

@media (max-width: 1024px) {
  .related-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .content-map-grid { grid-template-columns: repeat(3, 1fr); }
  .section-jump-nav { top: 72px; }
  .guide-body-inner { padding: var(--space-8); }
}


/* =============================================================================
   RESPONSIVE — 880px (case-study breakpoint)
   ============================================================================= */

@media (max-width: 880px) {
  .case-study { padding: 28px 24px 24px; }
  .case-study::after { display: none; }
  .case-study-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .case-study-num { font-size: 11px; opacity: .55; }
  .case-study-title,
  .page-artikel .case-study-title,
  .page-leitfaden .case-study-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 14px 0 16px;
    max-width: 100%;
  }
  .case-study-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }
  .case-study-meta-row .case-study-meta {
    border-right: none;
    padding: 0;
    font-size: 13px;
    width: 100%;
  }
  .case-study-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .case-study-col,
  .case-study-col--result,
  .page-artikel .case-study-col,
  .page-artikel .case-study-col--result,
  .page-leitfaden .case-study-col,
  .page-leitfaden .case-study-col--result {
    padding: 22px 20px;
    height: auto;
    border-radius: 10px;
  }
  .case-study-col-num { width: 38px; height: 38px; font-size: 13px; margin-bottom: 12px; }
  .case-study-col-label { font-size: 11px; margin-bottom: 8px; letter-spacing: .12em; }
  .case-study-col p { font-size: 15px; line-height: 1.6; }
  .case-study-footer { margin-top: 22px; padding-top: 18px; font-size: 12px; }
}


/* =============================================================================
   RESPONSIVE — 768px (mobile)
   ============================================================================= */

@media (max-width: 768px) {
  /* Article body */
  .article-body-inner { padding: var(--space-6) var(--space-5); }

  /* Pull quote */
  .pull-quote { margin: var(--space-7) -4px; padding: var(--space-5) var(--space-6); }
  .pull-quote blockquote { font-size: 16px; }
  .pull-quote::before { font-size: 120px; }

  /* Tip box */
  .tip-box { padding: var(--space-5); }
  .tip-box p { font-size: 14px; }

  /* Key stats — horizontal rows */
  .key-stats { grid-template-columns: 1fr; border-radius: var(--r); }
  .key-stat { padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-5); text-align: left; }
  .stat-number { font-size: 38px; min-width: 70px; text-align: left; }
  .stat-label { font-size: 12px; text-align: left; }

  /* Stat row */
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .stat-row-num { font-size: 28px; }
  .stat-cell, .stat-row-item { padding: var(--space-3); }
  .stat-row-label { font-size: 10px; }

  /* FAQ block */
  .faq-block { padding: 28px 24px; margin: 0; }
  .faq-block-title { font-size: 22px; }
  .faq-block-question-text { font-size: 15px; }

  /* Article table */
  .article-table { font-size: 13px; }
  .article-table thead th,
  .article-table tbody td { padding: 12px 16px; }

  /* Author bio */
  .author-bio { padding: 24px 20px; }
  .author-bio-inner { flex-direction: column; gap: 16px; }

  /* Related articles grid */
  .related-articles-grid { grid-template-columns: repeat(2, 1fr); }

  /* Guide intro */
  .guide-intro-text { font-size: 15px; padding: var(--space-6) var(--space-6) var(--space-3); }
  .guide-intro-bullets { padding: var(--space-3) var(--space-6) var(--space-6); }

  /* Content map */
  .content-map { padding: var(--space-10) 0; }
  .content-map-grid { grid-template-columns: 1fr 1fr; }

  /* Section jump nav */
  .section-jump-nav { top: 72px; }

  /* Insight box */
  .insight-box p { font-size: 16px; }

  /* Section title */
  .section-title { font-size: 25px; }

  /* Guide body */
  .guide-body-inner { padding: var(--space-6) var(--space-5); }

  /* TOC */
  .article-toc { padding: 18px 20px; margin: 20px 0; }
}


/* =============================================================================
   RESPONSIVE — 700px (table / faq breakpoint)
   ============================================================================= */

@media (max-width: 700px) {
  .case-study-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* =============================================================================
   RESPONSIVE — 480px (small mobile)
   ============================================================================= */

@media (max-width: 480px) {
  .article-body-inner { padding: var(--space-5) var(--space-4); }
  .key-stat { padding: var(--space-4); gap: var(--space-4); }
  .stat-number { font-size: 32px; }
  .related-articles-grid { grid-template-columns: 1fr; }
  .content-map { padding: var(--space-7) 0; }
  .content-map-grid { grid-template-columns: 1fr; }
  .guide-body-inner { padding: var(--space-5) var(--space-4); }
  .section-title { font-size: 22px; }
}


/* =============================================================================
   RESPONSIVE — 600px (author bio breakpoint)
   ============================================================================= */

@media (max-width: 600px) {
  .author-bio { padding: 24px 20px; }
  .author-bio-inner { flex-direction: column; gap: 16px; }
}

/* =============================================================================
   HERO (shortcode [at_hero])
   ============================================================================= */

/* Article-Hero-Wrapper: dunkler Background + Featured-Image als BG-Layer +
   Gradient-Overlay nach links für Lesbarkeit. Self-contained, damit der Hero
   unabhängig vom Elementor-Container-Setting konsistent aussieht (das
   Dynamic-Binding aufs Featured-Image greift im Live-Template nicht
   zuverlässig). Leitfaden-Hero (.hero-inner--guide) bleibt unberührt — der
   hat seinen eigenen dunkelblauen Background via ::before/::after. */
.hero-section {
  position: relative !important;
  width: 100% !important;
  min-height: 880px !important;
  background: var(--alltrucks-dark-blue, #00193E) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
}
.hero-bg-image {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
}
.hero-overlay-gradient {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  /* Brand-Dark-Blue ist #00193E (rgb 0,25,62), nicht #0A1628 — sonst sieht
     der Verlauf am Boden wie ein anderer Blauton aus. Unten voll deckend,
     oben noch ~35% Tönung, damit das Bild durchscheint aber der Eindruck
     "dunkler Hero mit Bild dahinter" bleibt (wie im Prototyp). */
  background:
    linear-gradient(to top,
      rgba(0,25,62,.9) 0%,
      rgba(0,25,62,.85) 25%,
      rgba(0,25,62,.7) 50%,
      rgba(0,25,62,.5) 75%,
      rgba(0,25,62,.3) 100%
    ) !important;
  z-index: 1 !important;
  pointer-events: none;
}
@media (max-width: 1024px) { .hero-section { min-height: 620px !important; } }
@media (max-width: 640px)  {
  .hero-section { min-height: 500px !important; }
  .hero-overlay-gradient {
    background: linear-gradient(to top, rgba(0,25,62,1) 0%, rgba(0,25,62,.55) 100%) !important;
  }
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px var(--space-7) 80px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .03em;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.hero-breadcrumb a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .2s;
}
.hero-breadcrumb a:hover { color: var(--alltrucks-cyan); }
.hero-breadcrumb .sep { color: rgba(255,255,255,.25); }

.hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.hero-cluster-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cluster-color, var(--alltrucks-dark-blue, #0A1628));
  padding: 6px 34px 6px 30px;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.hero-edition-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255,255,255,.65);
}
.hero-edition-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--alltrucks-cyan);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  max-width: 1000px;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.hero-h1 em { color: var(--alltrucks-cyan); font-style: normal; }

.hero-subtitle {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  max-width: 750px;
  margin: 0 0 var(--space-8);
}

.hero-byline {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  color: rgba(255,255,255,.85);
  font-family: var(--font-ui);
  font-size: 14px;
}

.hero-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--alltrucks-cyan);
  color: var(--alltrucks-dark-blue, #0A1628);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
}
.hero-author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hero-author-name {
  font-weight: 500;
  color: #fff;
  font-size: 14px;
}
.hero-author-role {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.hero-byline-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,.75);
}
.hero-byline-item svg {
  opacity: .75;
}

@media (max-width: 880px) {
  .hero-inner { padding: 80px var(--space-5) 60px; }
  .hero-h1 { font-size: 40px; }
  .hero-subtitle { font-size: 17px; }
  .hero-byline { gap: var(--space-5); font-size: 13px; }
}

@media (max-width: 600px) {
  .hero-h1 { font-size: 32px; }
  .hero-breadcrumb { display: none; }
  .hero-byline { gap: var(--space-4); }
}

/* =============================================================================
   GUIDE HERO — Variante für Leitfäden (leitfaden=1)
   Wird vom selben [at_hero]-Shortcode gerendert, branch via .hero-inner--guide.
   Hat eigenen dunkelblauen Fallback-Hintergrund — funktioniert auch wenn der
   Elementor-Container kein Featured-Image bekommt.
   ============================================================================= */

.elementor-widget-shortcode:has(.hero-inner--guide),
.hero-inner--guide {
  background: var(--alltrucks-dark-blue, #001939);
}
.hero-inner--guide {
  background-image:
    linear-gradient(175deg, var(--alltrucks-dark-blue, #001939) 0%, rgba(0,25,62,.88) 50%, rgba(0,25,62,.96) 100%);
  position: relative;
  overflow: hidden;
  /* Füllt die Elementor-Container-Höhe (min-height: 600px laut Template),
     damit kein heller Overlay-Streifen am unteren Rand sichtbar bleibt,
     wenn das Featured-Image fehlt. */
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}
/* CI-Diagonal-Stripes als Akzent (wie im Prototyp .hero-geo) */
.hero-inner--guide::before,
.hero-inner--guide::after {
  content: '';
  position: absolute;
  height: 350%;
  transform: skewX(-15deg);
  pointer-events: none;
  top: -80px;
}
.hero-inner--guide::before {
  right: calc(14% + 50px);
  width: 160px;
  background: var(--alltrucks-cyan);
  opacity: .10;
}
.hero-inner--guide::after {
  right: calc(14% + 230px);
  width: 60px;
  background: var(--alltrucks-cyan);
  opacity: .15;
}
.hero-inner--guide > * { position: relative; z-index: 1; }

/* Cornerstone-Tag (Badge "CORNERSTONE LEITFADEN") */
.content-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.ctb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cluster-color, #015097);
  padding: 6px 34px 6px 30px;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.ctb-tag svg { flex-shrink: 0; }

/* Headline-Variante für Guide */
.hero-h1--guide {
  font-size: 55px;
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 900px;
}
.hero-h1--guide em { color: var(--alltrucks-cyan); font-style: normal; }

/* Italic Intro-Text (statt fettem Subtitle) */
.hero-inner--guide .hero-intro {
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  color: rgba(255,255,255,.6);
  line-height: 1.45;
  margin: 0 0 var(--space-8);
  max-width: 600px;
}

/* Meta-Row mit Glasmorphism-Card.
   align-self: flex-start, weil der parent .hero-inner--guide ein column-flex ist
   (default align-items: stretch) — sonst zieht's die inline-flex-row auf volle
   Spaltenbreite, statt nur so breit wie der Content (hug-content). */
.hero-meta-row {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r, 6px);
  overflow: hidden;
  background: rgba(0,25,62,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255,255,255,.45);
  border-right: 1px solid rgba(255,255,255,.08);
}
.hero-meta-item:last-child { border-right: none; }
.hero-meta-item strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.01em;
}
.hero-meta-item svg { color: var(--alltrucks-cyan); flex-shrink: 0; }

@media (max-width: 880px) {
  .hero-h1--guide { font-size: 36px; }
  .hero-inner--guide .hero-intro { font-size: 15px; }
  .hero-meta-item { padding: var(--space-2) var(--space-4); font-size: 12px; }
  .hero-meta-item strong { font-size: 14px; }
}
@media (max-width: 600px) {
  .hero-h1--guide { font-size: 28px; }
  .hero-meta-row { flex-direction: column; align-items: stretch; }
  .hero-meta-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .hero-meta-item:last-child { border-bottom: none; }
}

/* =============================================================================
   ELEMENTOR-LAYOUT-OVERRIDE für Single-Magazin-Artikel + Cornerstone-Leitfaden
   =============================================================================
   Problem: Die JSON-Templates setzen `width: 75%` (Main) + `width: 25%` (Sidebar)
   + `flex_gap: 48px`. Elementor mappt width auf flex-basis; mit Gap zusätzlich
   ergibt das > 100% Anspruch, flex-shrink macht beide proportional schmaler →
   Main-Content wirkt zu schmal.

   Fix: `flex: 3 1 0` / `flex: 1 1 0` verteilt den verfügbaren Platz (Container
   minus Gap) im Verhältnis 3:1 = 75:25 — gap-aware, unabhängig von Container-Breite.

   Selektor-Strategie (Belt-and-Suspenders, weil Elementor IDs auf der Live-Instanz
   gegenüber den JSON-Defaults divergieren — ein UI-Edit erzeugt neue IDs):
   - Main-Column: data-id-Liste (Live-IDs + JSON-Defaults) ODER :has(.guide-sections|.guide-intro-card|.article-body)
   - Sidebar:     data-id-Liste (JSON-Defaults)          ODER :has(.toc-card|.meta-card)
   Falls eine ID neu regeneriert wird, greift der :has()-Fallback auf die Render-
   Klassen unserer Shortcodes — die sind im Plugin-Code festgelegt, also stabil. */

/* Leere Shortcode-Widgets ausblenden: Renderer wie atm_render_stats() geben
   bei fehlendem Content einen <div class="atm-empty"></div>-Marker zurück.
   Elementor's Widget-Wrapper hat sonst Default-Margin und reißt die Main-
   Spalte gegenüber der Sidebar nach unten. Zwei Selektoren — .elementor-widget-shortcode
   und das generische .elementor-widget — falls Elementor's Wrapper-Klassen
   je nach Version/Theme-Style variieren. */
.atm-empty { display: none; }
body.single-magazin-artikel .elementor-widget-shortcode:has(.atm-empty),
body.single-magazin-artikel .elementor-widget:has(> .elementor-widget-container > .atm-empty),
body.single-magazin-artikel .elementor-element:has(> .elementor-widget-container > .atm-empty) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* TL;DR-Box (at_summary außerhalb article-body-Card): wenn sie als Standalone-
   Elementor-Widget direkt oben im Main rendert, schiebt ihr eigener margin-top
   die Box unter die Sidebar-Top-Linie. Innerhalb von .article-body-inner ist
   das margin gewolltes Spacing zum Card-Padding-Top — daher hier nur zielen
   wir auf den Elementor-Wrapper-Pfad. */
body.single-magazin-artikel .elementor-widget-shortcode > .elementor-widget-container > .article-tldr {
    margin-top: 0;
}

/* Main-Content-Column: wachsen wie 3:1 */
body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="98f939"],
body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="mA2jW6e"],
body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="cL8dZ6w"],
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .guide-sections),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .guide-intro-card),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .article-body) {
    flex: 3 1 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Sidebar-Column: wachsen wie 1:3 (TOC + Meta) */
body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="kD4fX8z"],
body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="oR3qV7b"],
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .toc-card),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .meta-card),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .cluster-nav-card),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .authority-card),
body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .related-guides-card) {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Tablet/Mobile: Elementor bricht auf column um — wieder volle Breite */
@media (max-width: 1024px) {
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="98f939"],
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="mA2jW6e"],
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="cL8dZ6w"],
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="kD4fX8z"],
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con[data-id="oR3qV7b"],
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .guide-sections),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .guide-intro-card),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .article-body),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .toc-card),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .meta-card),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .cluster-nav-card),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .authority-card),
    body.single-magazin-artikel .e-con > .e-con-inner > .e-con:has(> .e-con-inner > .elementor-widget-shortcode .related-guides-card) {
        flex: 0 1 auto !important;
        width: 100% !important;
    }
}

/* Mobile: Elementor-Wrapper-Padding rund um Artikel-/Leitfaden-Content reduzieren.
   Stack ist Section(e-parent, ~16px) → e-con-inner → Column(e-child, ~10px) → … →
   .article-body / .guide-intro-card / etc. → .article-body-inner (20px), d.h. ein
   Textabsatz hat sonst 46px horizontalen Padding-Stack pro Seite gefressen.
   Auf 414px-Viewports bleiben nur ~322px für Text, Tabellen werden abgeschnitten.

   Lösung: e-child auf 0 (innerer weißer Content-Wrapper liefert sein eigenes
   20px-Gutter), e-parent auf 10px (sichtbarer Viewport-Edge-Gap zur weißen Karte).

   Per .e-parent / .e-child Elementor-Klassen statt fixer data-ids — greift
   identisch für Artikel- UND Leitfaden-Template (unterschiedliche IDs), und
   bleibt robust falls Templates später rebuildet werden. Hero wird via :not()
   ausgeschlossen, der hat eigene Full-Bleed-Override-Regeln (siehe Zeile ~3598). */
@media (max-width: 768px) {
    body.single-magazin-artikel .e-con.e-parent:not(:has(> .e-con-inner > .elementor-widget-shortcode .hero-inner)) {
        padding-inline: 10px !important;
    }
    body.single-magazin-artikel .e-con.e-parent:not(:has(> .e-con-inner > .elementor-widget-shortcode .hero-inner)) > .e-con-inner {
        padding-inline: 0 !important;
    }
    body.single-magazin-artikel .e-con.e-child,
    body.single-magazin-artikel .e-con.e-child > .e-con-inner {
        padding-inline: 0 !important;
    }
}

/* =============================================================================
   STICKY-SIDEBAR-OVERRIDE für Leitfaden-Sidebar
   =============================================================================
   Problem: Elementor-Pro's JS-Sticky setzt beim Aktivieren `position: fixed`
   mit einer gecapturten Pixel-Breite — die divergiert von unserem flex-
   gerenderten Wert (sichtbarer Width-Jump beim Sticky-Start). Außerdem nutzt
   es den im JSON-Template gesetzten `sticky_offset: 100` — kleiner als
   unser fixed-Header (~145px), → Top der Sidebar wird vom Header verdeckt.

   Fix: native CSS `position: sticky` über die Elementor-Sticky-Klasse legen.
   Das Element bleibt im Flex-Flow (keine Width-Änderung) und nutzt unsere
   --atm-header-offset-Variable für den Top-Abstand. Der von Elementor
   eingefügte Spacer (zur Layout-Platzhaltung bei position:fixed) wird nicht
   mehr gebraucht — wird per display:none entfernt. */

body.single-magazin-artikel .elementor-sticky.elementor-sticky--active,
body.single-magazin-artikel .elementor-element.elementor-sticky.elementor-sticky--active {
    position: sticky !important;
    top: calc(var(--atm-header-offset, 145px) + 44px) !important;
    width: auto !important;
    max-width: none !important;
    height: fit-content !important;
    align-self: flex-start !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5;
}
body.single-magazin-artikel .elementor-sticky__spacer {
    display: none !important;
}

/* position:sticky braucht: KEIN Ancestor mit `overflow: hidden`. Elementor's
   `.e-con` setzt teils overflow:hidden (für Transforms / Reveal-Animationen).
   Auf der Row, die den Sticky-Sidebar enthält, müssen wir das ausschalten,
   damit der Sidebar im Viewport stickt statt am .e-con-Rand abzubrechen. */
body.single-magazin-artikel .e-con:has(> .e-con-inner > .elementor-sticky),
body.single-magazin-artikel .e-con > .e-con-inner:has(> .elementor-sticky) {
    overflow: visible !important;
}

/* Mobile: kein Sticky (Elementor's sticky_on: desktop greift sowieso nur am
   Desktop, aber zur Sicherheit für unsere CSS-Variante). */
@media (max-width: 1024px) {
    body.single-magazin-artikel .elementor-sticky.elementor-sticky--active {
        position: static !important;
        top: auto !important;
    }
}

/* =============================================================================
   FULL-WIDTH CONTAINER OVERRIDES für Hero + Section-Nav
   =============================================================================
   Hero (single-magazin-artikel + cornerstone-leitfaden): das JSON-Template
   setzt kein explizites `content_width`, Elementor defaultet zu "boxed" →
   die Inner-Box wird auf --content-width (1320px) begrenzt. Beim Leitfaden-
   Hero, der seine eigene dunkle BG mitbringt, wirkt das wie ein
   eingebettetes Rechteck statt einer durchgehenden dunklen Bahn.
   Fix: `.e-con-inner` darf voll werden, dafür übernimmt unser .hero-inner
   bzw. .hero-inner--guide selbst die boxed-Content-Zentrierung via padding. */

/* Hero-Container: voll-breite BG + voll-breiter Inner */
body.single-magazin-artikel .e-con:has(> .e-con-inner > .elementor-widget-shortcode .hero-inner) {
    background-color: var(--alltrucks-dark-blue, #00193E) !important;
    /* Top-Padding des Elementor-Containers killen (Site-Settings Default ~30–60px),
       sonst entsteht eine sichtbare helle Lücke zwischen Header-Cat-Nav und der
       dunklen Hero-Bahn. Gilt für Artikel- UND Leitfaden-Hero (beide nutzen
       `.hero-inner`). Bottom-Padding bleibt — separiert Hero vom nächsten Block. */
    padding-block-start: 0 !important;
}
body.single-magazin-artikel .e-con:has(> .e-con-inner > .elementor-widget-shortcode .hero-inner) > .e-con-inner {
    max-width: none !important;
    padding-inline: 0 !important;
    padding-block-start: 0 !important;
}

/* Guide-Hero-Inner: bekommt von .hero-inner die max-width:1280 — die müssen wir
   für die Guide-Variante aufheben (damit Gradient + Stripes voll-breit gehen)
   und stattdessen den Content via auto-padding zentrieren. */
.hero-inner--guide {
    max-width: none !important;
    /* Padding-inline berechnet sich aus Viewport-Mitte: wenn breit, viel Padding
       (Content endet bei 1320px max — matched --content-width global); wenn
       schmal, fällt's auf space-7 (28px) zurück. */
    padding-left: max(var(--space-7), calc((100% - 1320px) / 2)) !important;
    padding-right: max(var(--space-7), calc((100% - 1320px) / 2)) !important;
}
/* Mobile: 28px → 20px für mehr Text-Breite auf schmalen Viewports. Content-Map-
   Wrap parallel mit horizontalem Padding versorgen — der ist full-bleed (100vw,
   margin-left:calc(50%-50vw)) und hatte sonst auf Mobile gar kein Edge-Gap,
   sodass die Texte direkt an die Viewport-Kante stießen. */
@media (max-width: 700px) {
    .hero-inner--guide {
        padding-left: var(--space-5) !important;
        padding-right: var(--space-5) !important;
    }
    .content-map-wrap {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}
/* Article-Hero: bleibt boxed (Featured-Image + Overlay füllt den Voll-Bleed-
   Container via Elementor-Background; .hero-inner sitzt zentriert drin). */

/* Section-Nav-Container: Widget rendert leer (siehe section-nav.php), aber
   der Elementor-Container existiert weiterhin und könnte ungewolltes Padding
   beibehalten. Container kollabieren auf Inhaltshöhe (0), aber kein Padding
   und keine Sticky-Effekte mehr. */
body.single-magazin-artikel .e-con[data-id="12d66f7a"],
body.single-magazin-artikel .e-con[data-id="nU9wK5s"],
body.single-magazin-artikel .e-con:has(> .e-con-inner > .elementor-widget-shortcode .section-jump-nav) {
    padding: 0 !important;
    min-height: 0 !important;
}
/* Anker-Sprünge werden über `html { scroll-padding-top }` weiter oben geregelt. */

/* =============================================================================
   CS-BAR (Cornerstone Identity Bar) — sitzt zwischen Hero und Content-Map.
   Wird vom Guide-Hero direkt nach dem Hero-Inneren angehängt, läuft also
   innerhalb des full-width Hero-Containers. Eigener dunkelblauer Hintergrund
   mit cyan Top-/Bottom-Border, Content boxed bei 1280px.
   ============================================================================= */

.cs-bar {
    background: var(--alltrucks-dark-blue);
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 3px solid rgba(0, 181, 226, .3);
    position: relative;
    overflow: hidden;
}
.cs-bar-inner {
    max-width: none;
    margin: 0;
    padding: var(--space-4) max(var(--space-5), calc((100% - 1320px) / 2)) var(--space-5);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
}
.cs-bar-left {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.cs-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}
.cs-bar-item svg {
    color: var(--alltrucks-cyan);
    flex-shrink: 0;
}
.cs-bar-sep {
    width: 3px;
    height: 16px;
    background: var(--alltrucks-cyan);
    opacity: .2;
    transform: skewX(-41deg);
    flex-shrink: 0;
}
.cs-updated {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--alltrucks-cyan);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0, 181, 226, .1);
    border: 1px solid rgba(0, 181, 226, .25);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-6);
    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.cs-start-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--alltrucks-cyan) !important;
    padding: var(--space-2) var(--space-6);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    text-decoration: none;
    transition: background .2s, transform .2s;
    white-space: nowrap;
    align-self: flex-start;
}
.cs-start-btn:hover {
    background: var(--alltrucks-cyan-hover, #00a3c9) !important;
    transform: translateY(-1px);
}

@media (max-width: 880px) {
    .cs-bar-inner { padding: var(--space-3) var(--space-5); }
    .cs-bar-item { font-size: 10px; }
    .cs-bar-sep { display: none; }
}

/* ============================================================
   Step List — numbered process steps
   ============================================================ */
.step-list { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); }
.step-card { display: flex; gap: var(--space-5); align-items: flex-start; background: var(--bg-warm); border-radius: var(--r); padding: var(--space-5) var(--space-6); border: 1px solid var(--gray); transition: border-color .2s, box-shadow .2s; }
.step-card:hover { border-color: var(--alltrucks-cyan); box-shadow: 0 4px 20px rgba(0,181,226,.12); }
.step-num { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--alltrucks-cyan); line-height: 1; min-width: 36px; opacity: .9; }
/* h3, nicht h4: die Schritt-Überschriften stehen unter einer h2 — h4 erzeugte
   eine Hierarchie-Lücke auf jeder Artikelseite. Optik unverändert.
   !important ist hier nötig, weil `.article-body h3` (Z. 136) Display-Font,
   32px und eigene Margins mit !important setzt; die h4 hatte kein solches
   Gegenstück. Alle konkurrierenden Eigenschaften werden explizit gesetzt,
   damit das Ergebnis nicht von Theme-Defaults abhängt. */
.step-content h3 {
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--alltrucks-dark-blue) !important;
  line-height: 1.35 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin: 0 0 var(--space-2) !important;
}
.step-content p { font-family: var(--font-body); font-size: 14px; color: var(--text-light); line-height: 1.45; margin: 0; }

@media (max-width: 880px) {
  .step-list { gap: var(--space-3); }
  .step-card { padding: var(--space-4); gap: var(--space-3); }
  .step-num { font-size: 26px; min-width: 28px; }
  .step-content h3 { font-size: 14px !important; }
  .step-content p { font-size: 13px; }
}

/* ============================================================
   Section Divider — visual separator between sections
   ============================================================ */
.sec-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-10) 0 var(--space-8); }
.sec-divider-line { flex: 1; height: 1px; background: var(--gray); }
.sec-divider-icon { display: flex; align-items: center; gap: var(--space-1); }
.sec-divider-icon span { display: inline-block; width: 4px; height: 16px; background: var(--alltrucks-cyan); transform: skewX(-41deg); border-radius: 1px; }
.sec-divider-icon span:nth-child(2) { opacity: .4; height: 10px; }

/* ============================================================
   Cornerstone CTA — "read the full guide" callout
   ============================================================ */
.cornerstone-cta {
  margin: 32px 0;
  padding: 24px 28px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,181,225,.08), rgba(0,181,225,.02));
  border: 1px solid rgba(0,181,225,.18);
  border-left: 4px solid var(--alltrucks-cyan);
}
.cornerstone-cta-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cornerstone-cta-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
}
.cornerstone-cta-text strong { color: var(--alltrucks-dark-blue); }
.cornerstone-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alltrucks-cyan);
  text-decoration: none;
  letter-spacing: .02em;
  transition: gap .25s cubic-bezier(.16,1,.3,1);
}
.cornerstone-cta-link:hover { gap: 12px; }
.cornerstone-cta-link svg { flex-shrink: 0; }

/* =====================================================
   SITE-HEADER (Magazin-spezifisch, sticky)
   Logo · Edition-Switcher · Suche · CTA + cat-nav darunter
   ===================================================== */

/* Bricht den site-header aus Elementors Theme-Builder-Container raus, damit
   die dunkelblaue Bar voll-breit bis zum Viewport-Rand reicht.
   Ziel: jegliche Container/Section-Wrapper innerhalb von .elementor-location-header
   verlieren ihre max-width und horizontalen Paddings. */
.elementor-location-header,
.elementor-location-header > .elementor,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-widget,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-header .elementor-shortcode {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Magazin-Header: position: fixed, damit er IMMER oben am Viewport klebt,
   unabhängig davon, ob ein Elementor-Container die Sticky-Containing-Block-Kette
   bricht (z. B. durch overflow:hidden oder transform). Volle Breite via
   left:0; right:0 — funktioniert auch in engen Boxed-Containern. */
/* display:block + padding:0 überschreibt Hello-Elementor's generische
   `header { display: flex; padding: ... }`-Regel — sonst werden .wrap und
   .cat-nav nebeneinander gelegt (statt gestapelt), die Cat-Nav schrumpft
   auf Inhaltsbreite und der Dark-Blue-Header-BG schaut rechts/unten raus. */
.site-header#siteHeader { background: var(--alltrucks-dark-blue) !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; z-index: 9999 !important; box-shadow: 0 4px 40px rgba(0,0,0,.4); transition: box-shadow .3s; }
/* --atm-header-offset: Layout-Untergrund des fixed Site-Headers (in CSS-Pixeln
   vom oberen Rand der Body-Box gerechnet). Mit aktiver WP-Admin-Bar fügt
   WordPress automatisch `html { padding-top: 32px }` hinzu — das schiebt die
   gesamte Body-Box nach unten. Deshalb braucht's KEINE admin-bar-spezifische
   Variante: der Offset misst, wo der Header AB der Body-Top endet, und das
   bleibt gleich. (Frühere Versionen hatten +32 für admin-bar einkalkuliert —
   das doppelt zählen den Admin-Bar-Shift.)
   Wert ≈ CTA-Bar (~40px) + Top-Bar (~70px) + Cat-Nav (~70px) auf Desktop. Bei Bedarf hier tunen. */
:root { --atm-header-offset: 185px; }
/* Mobile-Wert ist DevTools-gemessen (Julian, iPhone-Viewport). Wenn jemand den
   Header-Inhalt ändert (mehr CTA-Pills, größeres Logo, Cat-Nav mit 2 Zeilen),
   hier neu messen — sonst klemmt entweder Whitespace zwischen Header und Hero
   oder Content schiebt unter den Header. */
@media (max-width: 700px) {
    :root { --atm-header-offset: 112px; }
}

/* scroll-padding-top auf <html>: beim Anker-Klick (Leitfaden starten,
   Section-Jump-Links) lässt der Browser entsprechend viel Platz oben frei.
   = Header-Höhe + 36px Atem (genug für das .section-label über der H2, das
   sonst direkt unter den Header-Schatten rutscht). Die Sticky-Section-Nav
   wird im Layout nicht mehr angezeigt, deshalb fällt der zusätzliche
   Bar-Offset weg. */
html {
    scroll-padding-top: calc(var(--atm-header-offset) + 36px);
}

body.has-atm-header { padding-top: var(--atm-header-offset); }

/* WP-Admin-Bar (32px desktop / 46px mobile <782px) ist position:fixed am
   Viewport-Top und würde unseren Header verdecken — Header um diese Höhe nach
   unten schieben. */
body.admin-bar .site-header#siteHeader { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar .site-header#siteHeader { top: 46px !important; }
}
@media (max-width: 600px) {
    body.admin-bar .site-header#siteHeader { top: 46px !important; }
}
.site-header.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,.6); }
/* Wrap-Breite & Padding 1:1 zum Elementor-Page-Container (.e-con > .e-con-inner):
     max-width: 1320px (per-element Elementor-Override --content-width auf den
       Magazin-Overview-Pages — das globale Site-Setting --container-max-width
       wäre 1400px, aber die Page überschreibt's auf 1320px)
     padding-inline: 0 (Elementor setzt padding-inline-start/end explizit auf 0)
   Damit beginnen Logo, Suche, Cat-Nav-Links UND der Page-Content darunter
   (Magazin-Badge, Hero, Cluster, Cards) auf derselben x-Position. */
.site-header .wrap { max-width: 1320px; margin: 0 auto; padding: 0; box-sizing: border-box; }
/* #siteHeader-Prefix bumps specificity über Hello-Elementor-Theme-Regeln.
   max-width: none überschreibt Hello's `.site-header .header-inner { max-width:
   1140px; margin-inline: auto }`-Constraint, sonst sitzt header-inner auf
   1140px zentriert innerhalb der 1320px-wrap und produziert 90px Auto-Margin
   links/rechts. */
#siteHeader .header-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--space-6) !important; padding: var(--space-3) 0 !important; flex-wrap: nowrap !important; max-width: none !important; margin: 0 !important; }
#siteHeader .wrap { max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; width: auto !important; }
#siteHeader .cat-nav .wrap { max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; }
/* Cat-Nav-Inner: explizit kein Gap, kein flex-wrap, kein justify-content (Theme/WP-Layout-Defaults überschreiben) */
#siteHeader .cat-nav-inner { display: flex !important; gap: 0 !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; overflow-x: auto !important; }
/* Suche: feste Höhe, Reset von Theme-Input-Defaults (Hello Elementor setzt input padding/height) */
#siteHeader .hdr-search { height: 38px !important; padding: 0 var(--space-4) !important; box-sizing: border-box !important; }
#siteHeader .hdr-search input { height: 100% !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; min-height: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
/* CTA-Button: gleiche Höhe wie Suche, Reset Theme-Button-Defaults */
#siteHeader .hdr-cta { height: 38px !important; box-sizing: border-box !important; min-height: 0 !important; }
/* Edition-Switcher: feste Höhe, Buttons konsistent */
#siteHeader .edition-sw { height: 38px !important; padding: 4px !important; box-sizing: border-box !important; }
#siteHeader .ed-btn { height: 100% !important; padding: 0 var(--space-5) !important; box-sizing: border-box !important; min-height: 0 !important; }

.site-header .logo { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; text-decoration: none; margin-left: -10px; }
/* SVG und Label sind funktional zwei verschiedene Click-Ziele (SVG → alltrucks.com via JS-Intercept,
   Label/Anker-Default → Magazin-Übersicht), deshalb getrennte Hover-Signale statt Dimmen des ganzen <a>. */
.site-header .logo svg { display: block; height: auto; transition: opacity .2s; }
.site-header .logo svg:hover { opacity: .8; }
.site-header .logo-divider { width: 1px; height: 34px; background: rgba(255,255,255,.15); display: inline-block; }
.site-header .logo-label { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--alltrucks-cyan); letter-spacing: .25em; text-transform: uppercase; white-space: nowrap; }
/* Logo-Label-Stack: Cross-Fade zwischen "Magazin" und "Zur Übersicht" beim Hover über das Label.
   Grid-Stack: beide Spans liegen in derselben Grid-Cell → Container nimmt die Breite des längeren Labels
   ("Zur Übersicht") ein, sodass kein Layout-Shift / Overflow beim Hover entsteht. */
.site-header .logo-label-stack { display: inline-grid; grid-template-areas: "stack"; line-height: 1; position: relative; }
.site-header .logo-label-stack .logo-label-a,
.site-header .logo-label-stack .logo-label-b { grid-area: stack; transition: opacity .25s var(--ease-out); }
.site-header .logo-label-stack .logo-label-b { opacity: 0; position: absolute; top: 0; left: 0; white-space: nowrap; }
.site-header .logo-label-stack:hover .logo-label-a { opacity: 0; }
.site-header .logo-label-stack:hover .logo-label-b { opacity: 1; }

.site-header .hdr-utils { display: flex; align-items: center; gap: var(--space-3); }
.site-header .hdr-search { display: flex; align-items: center; background: rgba(255,255,255,.09); border-radius: var(--r-pill); padding: var(--space-2) var(--space-4); gap: var(--space-2); border: 1px solid rgba(255,255,255,.1); transition: all .35s var(--ease-out); width: 200px; line-height: 1; box-sizing: border-box; }
.site-header .hdr-search:focus-within { border-color: var(--alltrucks-cyan); background: rgba(255,255,255,.12); width: 280px; }
.site-header .hdr-search input { background: none; border: none; outline: none; color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .05em; width: 100%; }
.site-header .hdr-search input::placeholder { color: var(--gray-400); }

.site-header .hdr-cta { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--alltrucks-cyan); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1; padding: var(--space-2) var(--space-5); border-radius: var(--r-pill); border: none; cursor: pointer; transition: all .25s var(--ease-out); white-space: nowrap; flex-shrink: 0; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.site-header .hdr-cta:hover { background: var(--alltrucks-cyan-hover); transform: translateY(-1px); box-shadow: var(--sh-alltrucks-cyan); color: #fff; }

/* SR-Only utility (für Search-Label) */
.site-header .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* CTA-Bar (Top-Strip über der Haupt-Header-Reihe): Anrufen · E-Mail · Werkstattfinder.
   Werte 1:1 vom HTML-Prototyp (shared.css → .util-bar / .util-icon-link). */
#siteHeader .hdr-cta-bar { background: #E3F1FA !important; color: var(--alltrucks-dark-blue) !important; border-bottom: 1px solid rgba(0,25,62,.10) !important; }
#siteHeader .hdr-cta-bar .wrap { max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; }
#siteHeader .hdr-cta-bar-inner { display: flex !important; align-items: center !important; gap: var(--space-3) !important; padding: var(--space-2) 0 !important; }
.site-header .hdr-cta-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--r-pill); border: 1.5px solid rgba(0,181,226,.4); background: rgba(0,181,226,.16); color: var(--alltrucks-dark-blue); font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: all .25s var(--ease-out); box-sizing: border-box; }
.site-header .hdr-cta-pill svg { color: var(--alltrucks-cyan); flex-shrink: 0; opacity: .8; }
.site-header .hdr-cta-pill:hover { background: rgba(0,25,62,.04); border-color: var(--alltrucks-cyan); color: var(--alltrucks-cyan); }

/* Tablet: Suche-Input schmaler, kompaktere Padding */
@media (max-width: 1024px) {
    #siteHeader .wrap { padding: 0 var(--space-5) !important; }
    #siteHeader .cat-nav .wrap { padding: 0 var(--space-5) !important; }
    .site-header .hdr-search input { width: 120px; }
}

/* Mobile/kompakter Header: Layout umbrechen, Logo-Divider+Label ausblenden, CTA versteckt.
   Breakpoint 768px - kompakter Header gilt bis 768, darueber Desktop-Header. */
@media (max-width: 768px) {
    #siteHeader .wrap { padding: 0 var(--space-4) !important; }
    #siteHeader .cat-nav .wrap { padding: 0 var(--space-4) !important; }
    /* CTA-Bar-Wrap: explizite Padding-Regel an Zeile 3926 (`padding: 0 !important`)
       überschreibt die generische `.wrap`-Mobile-Rule (höhere Specificity).
       Hier mit gleicher Specificity nochmal mobile-padding setzen, damit die CTA-Pills
       nicht bündig an der Viewport-Kante kleben. */
    #siteHeader .hdr-cta-bar .wrap { padding: 0 var(--space-4) !important; }
    #siteHeader .header-inner { flex-wrap: wrap !important; gap: var(--space-3) !important; padding: var(--space-4) 0 !important; }
    #siteHeader .hdr-cta-bar-inner { gap: var(--space-1) !important; padding: var(--space-2) 0 !important; overflow-x: auto; }
    .site-header .hdr-cta-pill { height: 28px; padding: 0 var(--space-3); font-size: 11px; }
    .site-header .hdr-cta-pill span { display: none; }
    .site-header .hdr-cta-pill svg { width: 14px; height: 14px; }
    .site-header .logo svg { width: 130px; }
    .site-header .logo-divider { display: none; }
    .site-header .logo-label { display: none; }
    /* hdr-utils nicht mehr flex:1 → Suchfeld dominiert nicht mehr die ganze Zeile.
       Logo links, Suche rechts (per `justify-content: space-between` vom header-inner),
       Lücke in der Mitte. Auf sehr schmalen Viewports (<360px) schrumpft das Suchfeld
       via `flex: 0 1 200px` + `min-width: 0` sauber mit. */
    .site-header .hdr-utils { flex: 0 1 auto; gap: var(--space-2); min-width: 0; }
    .site-header .hdr-search { flex: 0 1 200px; width: auto; padding: var(--space-2) var(--space-3); min-width: 0; }
    .site-header .hdr-search:focus-within { width: auto; }
    .site-header .hdr-cta { display: none; }
    .site-header .hdr-cta-top { display: none !important; }
    .site-header .edition-sw { width: 100%; order: 3; height: 31px; }
    .site-header .ed-btn { flex: 1; padding: var(--space-2) var(--space-3); font-size: 11px; }
}

/* =====================================================
   MAGAZIN-ÜBERSICHT (mag-badge, hero-grid, stats-bar,
   cat-nav, cluster-section, art-card, nl-section)
   ===================================================== */

/* mag-badge */
.mag-badge { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--alltrucks-cyan-10); border: 1px solid var(--alltrucks-cyan-20); border-radius: var(--r-pill); padding: var(--space-2) var(--space-5); margin: var(--space-10) 0 var(--space-8); }
.mag-badge span { font-size: 11px; font-weight: 500; color: var(--alltrucks-cyan); letter-spacing: .08em; text-transform: uppercase; }
.mag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alltrucks-cyan); animation: atmMagPulse 2s infinite; }
@keyframes atmMagPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

/* hero-grid (top): 1 große Hauptkarte + 3 Side-Cards rechts */
.hero-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-5); margin-bottom: var(--space-12); min-height: 500px; }

.hero-main { position: relative; border-radius: var(--r); overflow: hidden; display: block; text-decoration: none; color: inherit; }
.hero-main::before, .hero-main::after { content: ''; position: absolute; height: 350%; transform: skewX(-15deg); pointer-events: none; transition: opacity .4s; z-index: 2; }
.hero-main::before { top: -80px; right: 100px; width: 160px; background: #fff; opacity: .07; }
.hero-main::after  { top: -80px; right: 240px; width: 60px;  background: #fff; opacity: .10; }
.hero-main:hover::before { opacity: .11; }
.hero-main:hover::after  { opacity: .14; }

.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 500px; background-size: cover; background-position: center; transition: transform .9s var(--ease-out); }
.hero-main:hover .hero-bg-img { transform: scale(1.05); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,8,25,.97) 0%, rgba(0,15,40,.65) 50%, rgba(0,25,62,.1) 100%); z-index: 1; }
.hero-body { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-10); z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.hero-eyebrow .hero-meta-i { font-family: var(--font-display); font-size: 13px; color: rgba(255,255,255,.65); }
.hero-title { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: #fff; line-height: 1.25; margin: 0 0 var(--space-3); text-transform: uppercase; max-width: 680px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.hero-excerpt { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.45; margin: 0 0 var(--space-6); max-width: 560px; }
.hero-foot { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.hero-meta { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-display); font-size: 13px; color: rgba(255,255,255,.45); }
.hero-meta-i { display: inline-flex; align-items: center; gap: var(--space-1); }
.hero-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; background: var(--alltrucks-cyan); color: #fff; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .25s var(--ease-out); }
.hero-main:hover .hero-cta { background: var(--alltrucks-cyan-hover); }

.diag-tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 5px 34px 5px 30px; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }

.hero-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }
.side-card { background: var(--white); border-radius: var(--r); overflow: hidden; display: flex; text-decoration: none; color: inherit; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); box-shadow: var(--shadow); flex: 1; min-height: 0; }
.side-card:hover { transform: translateX(5px); box-shadow: 0 8px 28px rgba(0,25,62,.14); }
.side-thumb { position: relative; width: 140px; flex-shrink: 0; background-size: cover; background-position: center; transition: transform .4s var(--ease-out); overflow: hidden; }
.side-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,25,62,.62) 0%, var(--side-tint, rgba(0,79,151,.45)) 100%); pointer-events: none; }
.side-card:hover .side-thumb { transform: scale(1.06); }
.side-body { padding: var(--space-3) var(--space-4); flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.side-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-2); }
.side-title { font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--text); flex: 1; text-transform: uppercase; transition: color .2s; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.side-card:hover .side-title { color: var(--alltrucks-cyan); }
.side-meta { font-family: var(--font-display); font-size: 11px; color: var(--gray-600); margin-top: var(--space-2); }

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-sidebar { flex-direction: row; gap: var(--space-3); }
    .side-card { flex: 1; }
}
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; min-height: auto; gap: var(--space-3); }
    /* min-height bumped 320 → 520: Hero-Body ist absolute positioniert (bottom:0),
       d.h. der Container muss groß genug sein, dass Eyebrow + langer Titel (bis 4 Zeilen
       à ~32px) + Excerpt (3–4 Zeilen) + Meta + CTA-Button reinpassen, sonst überschießt
       der Body nach oben aus der `overflow:hidden`-Box → "DAS GUTE NEUE" wird weg-gecroppt. */
    .hero-main { min-height: 520px; }
    .hero-bg-img { height: 100%; min-height: 520px; }
    .hero-body { padding: var(--space-6); }
    .hero-title { font-size: 26px !important; }
    .hero-excerpt { font-size: 14px; margin-bottom: var(--space-5); }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .hero-sidebar { flex-direction: column; gap: var(--space-3); }
    .side-card { flex-direction: row; min-height: 80px; }
    .side-thumb { width: 88px; flex-shrink: 0; align-self: stretch; height: auto; }
    .mag-badge { margin: var(--space-3) 0 var(--space-3); }
}

/* stats-bar */
.stats-bar { background: var(--alltrucks-dark-blue); border-radius: var(--r); padding: var(--space-10) var(--space-12); margin: 0 0 var(--space-16); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; overflow: hidden; }
.stats-bar::before, .stats-bar::after { content: ''; position: absolute; height: 350%; transform: skewX(-15deg); pointer-events: none; }
.stats-bar::before { top: -80px; right: 180px; width: 160px; background: var(--alltrucks-cyan); opacity: .10; }
.stats-bar::after  { top: -80px; right: 320px; width: 60px;  background: var(--alltrucks-cyan); opacity: .15; }
.stat { text-align: left; padding: var(--space-3) var(--space-10) var(--space-3) 0; border-right: 1px solid rgba(255,255,255,.07); position: relative; z-index: 1; margin-right: var(--space-10); }
.stat:last-child { border-right: none; margin-right: 0; }
.stat-n { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--alltrucks-cyan); line-height: 1; margin-bottom: var(--space-2); letter-spacing: -1px; text-transform: uppercase; }
.stat-l { font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1024px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); padding: var(--space-5) var(--space-4); margin-bottom: var(--space-10); }
    .stat { margin-right: 0; padding: var(--space-3); }
    .stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.07); }
    .stat:nth-child(even) { border-right: none; }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: var(--space-4); }
    .stat:nth-child(3), .stat:nth-child(4) { padding-top: var(--space-4); }
    .stat-n { font-size: 26px; letter-spacing: -.5px; }
}

/* cat-nav (Hellblauer Streifen unter Top-Bar im site-header) */
.cat-nav { background: var(--alltrucks-mid-blue); border-top: 1px solid rgba(255,255,255,.1); position: relative; }
.cat-nav .wrap { max-width: 1320px; margin: 0 auto; padding: 0; box-sizing: border-box; }
.cat-nav-inner { display: flex; overflow-x: auto; scrollbar-width: none; position: relative; -webkit-overflow-scrolling: touch; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 56px; background: linear-gradient(90deg, transparent, var(--alltrucks-mid-blue)); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; }
.cat-nav.has-overflow::after { opacity: 1; }
.cat-nav.has-overflow.scrolled-end::after { opacity: 0; }

.cat-link { padding: var(--space-3) var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: #E3F1FA; font-family: var(--font-ui); font-size: 12px; font-weight: 500; white-space: nowrap; letter-spacing: 0; text-transform: uppercase; transition: color .25s var(--ease-out); position: relative; }
.cat-link .cnt { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); border-radius: 100px; font-family: var(--font-display); font-size: 10px; font-weight: 500; }
@media (max-width: 700px) { .cat-link .cnt { display: none; } }
.cat-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--alltrucks-cyan); transition: width .3s var(--ease-out), left .3s var(--ease-out); }
.cat-link:hover::after, .cat-link.active::after { width: 100%; left: 0; }
.cat-link:hover { color: #fff; }
.cat-link.active { color: #fff; }

@media (max-width: 1024px) {
    .cat-nav .wrap { padding: 0 var(--space-5); }
    .cat-link { padding: var(--space-3) var(--space-4); font-size: 11.5px; }
}
@media (max-width: 700px) {
    .cat-nav .wrap { padding: 0 var(--space-4); }
    .cat-link { padding: var(--space-3) var(--space-4); font-size: 12px; }
}

/* cluster-section */
.cluster-sections { margin-top: var(--space-12); }
.sec-wrap { position: relative; }
.cluster-section { margin-bottom: var(--space-16); scroll-margin-top: 80px; }
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid #E5E9EE; position: relative; }
.sec-hdr::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 4px; background: var(--alltrucks-cyan); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.sec-hdr-left { display: flex; align-items: center; gap: var(--space-3); }
.sec-num { font-family: var(--font-display); font-size: 11px; font-weight: 500; color: var(--alltrucks-cyan); letter-spacing: .2em; opacity: .7; text-transform: uppercase; }
.cluster-section .sec-hdr h2 { font-family: var(--font-display); font-size: 20px !important; font-weight: 500; color: var(--alltrucks-dark-blue); letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; margin: 0; padding: 0; }
.sec-bg-num { position: absolute; right: 0; top: -65px; font-family: var(--font-display); font-size: 190px; font-weight: 500; color: var(--alltrucks-dark-blue); opacity: .04; line-height: 1; pointer-events: none; user-select: none; z-index: 0; }
.view-all { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--alltrucks-cyan); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: gap .2s; }
.view-all:hover { gap: var(--space-3); }

/* cornerstone (große Hero-Karte pro Cluster, dunkel mit Lichtreflexen) */
.cornerstone { position: relative; border-radius: var(--r); overflow: hidden; min-height: 480px; margin-bottom: var(--space-6); display: block; text-decoration: none; color: #fff; }
.cornerstone::before, .cornerstone::after { content: ''; position: absolute; height: 350%; transform: skewX(-15deg); pointer-events: none; transition: opacity .4s; z-index: 2; }
.cornerstone::before { top: -80px; right: 140px; width: 160px; background: #fff; opacity: .10; }
.cornerstone::after  { top: -80px; right: 280px; width: 60px;  background: #fff; opacity: .15; }
.cornerstone:hover::before { opacity: .11; }
.cornerstone:hover::after  { opacity: .14; }
.cornerstone-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .9s var(--ease-out); }
.cornerstone:hover .cornerstone-bg { transform: scale(1.04); }
.cornerstone-overlay { position: absolute; inset: 0; background-image: linear-gradient(135deg, rgba(0,25,62,.62), rgba(0,79,151,.22)); z-index: 1; }
.cornerstone-body { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-10); z-index: 3; }
.cornerstone-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.cornerstone-eyebrow .cornerstone-meta-i { font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,.4); }
.cornerstone-title { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: #fff; line-height: 1.25; margin: 0 0 var(--space-3); max-width: 760px; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.cornerstone-excerpt { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.45; margin: 0 0 var(--space-6); max-width: 620px; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cornerstone-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.cornerstone-meta { display: flex; align-items: center; gap: var(--space-5); font-family: var(--font-display); font-size: 12px; color: rgba(255,255,255,.55); flex-wrap: wrap; }
.cornerstone-meta-i { display: inline-flex; align-items: center; gap: var(--space-1); }
.cornerstone-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; background: var(--alltrucks-cyan); color: #fff; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .25s var(--ease-out); }
.cornerstone:hover .cornerstone-btn { background: var(--alltrucks-cyan-hover); }

/* art-grid (Karten unter dem Cornerstone) */
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-4); }

/* Cluster-Pager (sichtbar bei Sections mit >6 Artikeln) */
.art-card.is-hidden { display: none; }

/* Overview Live-Search (Header-Suchfeld → Karten live filtern).
   - `.is-search-miss`: gefilterter Treffer-Miss → hart ausblenden
   - `body.is-searching .is-search-hit`: Treffer immer zeigen, auch wenn
     Card per Cluster-Pager (`.is-hidden`) eigentlich offscreen wäre
   - `.is-search-empty` auf Section/Hero-Grid: keine Treffer drin → ausblenden
   - Pager selbst wird während der Suche versteckt (alle Treffer liegen
     ohnehin gleichzeitig im DOM, Seiten-Navigation wäre verwirrend) */
.is-search-miss { display: none !important; }
.is-search-empty { display: none !important; }
body.is-searching .art-card.is-search-hit { display: flex !important; }
body.is-searching .cluster-pager { display: none !important; }
body.is-searching .hero-grid { display: none !important; }
body.is-searching .stats-bar { display: none !important; }
.cluster-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-8); flex-wrap: wrap; }
.cluster-pager-num,
.cluster-pager-btn { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 16px; background: var(--alltrucks-dark-blue) !important; color: var(--alltrucks-cyan) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .12em !important; cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out); outline: none !important; box-shadow: none !important; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cluster-pager-num:hover:not(.is-active),
.cluster-pager-btn:hover:not(:disabled) { background: var(--alltrucks-cyan) !important; color: #fff !important; }
.cluster-pager-num:focus,
.cluster-pager-btn:focus { background: var(--alltrucks-dark-blue) !important; color: var(--alltrucks-cyan) !important; }
.cluster-pager-num.is-active,
.cluster-pager-num.is-active:focus,
.cluster-pager-num.is-active:hover { background: var(--alltrucks-cyan) !important; color: #fff !important; cursor: default; }
.cluster-pager-btn { padding: 0; width: 44px; }
.cluster-pager-btn:disabled,
.cluster-pager-btn:disabled:hover { opacity: .35; cursor: not-allowed; background: var(--alltrucks-dark-blue) !important; color: var(--alltrucks-cyan) !important; }
.cluster-pager-btn svg { display: block; stroke: currentColor; }

/* art-card */
.art-card { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); display: flex; flex-direction: column; position: relative; text-decoration: none; color: var(--text); }
.art-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--alltrucks-cyan); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); z-index: 2; }
.art-card:hover { transform: translateY(-7px); box-shadow: 0 12px 32px rgba(0,25,62,.14); }
.art-card:hover::before { transform: scaleX(1); }
.card-thumb { height: 236px; position: relative; overflow: hidden; }
.card-thumb-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .55s var(--ease-out); }
.card-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,25,62,.85) 0%, rgba(0,25,62,.32) 55%, rgba(0,25,62,.04) 100%), linear-gradient(135deg, transparent 38%, var(--card-tint, rgba(0,79,151,.40)) 100%); pointer-events: none; }
.art-card:hover .card-thumb-bg { transform: scale(1.09); }
.card-cat-badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: var(--space-1) 34px var(--space-1) 30px; color: #fff; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
.card-readtime { position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 2; font-family: var(--font-display); font-size: 10px; font-weight: 500; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); padding: var(--space-1) var(--space-2); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--space-1); letter-spacing: .06em; text-transform: uppercase; }
.card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card-title { font-family: var(--font-ui); font-size: 18px; font-weight: 500; color: var(--alltrucks-dark-blue); line-height: 1.25; margin-bottom: var(--space-2); transition: color .2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.art-card:hover .card-title { color: var(--alltrucks-cyan); }
.card-excerpt { font-size: 13px; color: var(--text-light); line-height: 1.45; flex: 1; margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid #E5E9EE; }
.card-meta { font-family: var(--font-display); font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: var(--space-3); }
.card-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-600); transition: gap .25s var(--ease-out), color .25s var(--ease-out); flex-shrink: 0; }
.art-card:hover .card-arrow { color: var(--alltrucks-cyan); gap: var(--space-3); }

@media (max-width: 1024px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
    .cornerstone { min-height: 460px; }
    .cornerstone-body { padding: var(--space-6); }
    .cornerstone-title { font-size: 20px !important; }
    .cornerstone-excerpt { font-size: 13px; }
    .cornerstone-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .art-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .card-thumb { height: 196px; }
    .card-title { font-size: 16px; }
    .sec-bg-num { display: none; }
    /* sec-hdr stack: Titel oben, "Alle X Artikel"-Link darunter — sonst klemmt
       der Link auf schmalen Viewports neben langen Cluster-Titeln und bricht
       unschön ("Alle 6\nArtikel") in zwei Zeilen. */
    .sec-hdr { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .view-all { white-space: nowrap; }
}

/* placeholder-Klassen für card-thumb-bg ohne Bild */
.ph-bay-cyan    { background: linear-gradient(135deg, #004F97, #00B5E1); }
.ph-bay-teal    { background: linear-gradient(135deg, #2D2F32, #4F86C6); }
.ph-bay-blue    { background: linear-gradient(135deg, #4F86C6, #00B5E1); }
.ph-road-green  { background: linear-gradient(135deg, #EFBC00, #00A896); }
.ph-road-purple { background: linear-gradient(135deg, #00A896, #5E3FA6); }
.ph-road-violet { background: linear-gradient(135deg, #5E3FA6, #4F86C6); }
.ph-road-emerald{ background: linear-gradient(135deg, #00695C, #00A896); }

/* nl-section */
.nl-section { background: linear-gradient(140deg, var(--alltrucks-dark-blue) 0%, #001E4D 100%); border-radius: var(--r); padding: var(--space-16); margin: var(--space-16) 0; position: relative; overflow: hidden; color: #fff; }
.nl-section::before, .nl-section::after { content: ''; position: absolute; height: 350%; transform: skewX(-15deg); pointer-events: none; }
.nl-section::before { top: -80px; right: 260px; width: 160px; background: var(--alltrucks-cyan); opacity: .10; }
.nl-section::after  { top: -80px; right: 400px; width: 60px;  background: var(--alltrucks-cyan); opacity: .15; }
.nl-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-16); align-items: center; position: relative; z-index: 1; }
.nl-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.nl-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: #fff; line-height: 1.25; margin: 0 0 var(--space-4); text-transform: uppercase; }
.nl-sub { font-size: 15px; color: rgba(255,255,255,.5); line-height: 1.7; margin: 0 0 var(--space-7); }
.nl-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.nl-benefit { display: flex; align-items: center; gap: var(--space-3); padding-left: 0; position: static; font-size: 13.5px; color: rgba(255,255,255,.6); }
.nl-benefit::before { content: ''; position: static; width: 22px; height: 2px; background: var(--alltrucks-cyan); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); flex-shrink: 0; color: transparent; font-weight: normal; }
.nl-right { display: flex; flex-direction: column; gap: var(--space-3); }
.nl-social-proof { font-size: 13px; color: rgba(255,255,255,.45); padding: 0; background: transparent; border-radius: 0; margin: 0 0 var(--space-1); }
.nl-social-proof strong { font-family: var(--font-display); font-size: 42px; font-weight: 500; color: #fff; display: block; line-height: 1; margin: 0 0 var(--space-1); }
.nl-section input.nl-input { box-sizing: border-box; width: 100%; padding: var(--space-5) var(--space-6); border-radius: var(--r); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-ui); font-size: 14px; line-height: 1.4; outline: none; box-shadow: none; transition: border-color .2s, background .2s; margin: var(--space-3) 0; height: auto; }
.nl-section input.nl-input::placeholder { color: rgba(255,255,255,.35); opacity: 1; }
.nl-section input.nl-input:focus { border-color: var(--alltrucks-cyan); background: rgba(255,255,255,.11); outline: none; box-shadow: none; }
.nl-section .btn-block { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-7); margin-top: var(--space-5); background: var(--alltrucks-cyan); color: #fff; border: none; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .28s var(--ease-out); }
.nl-section .btn-block:hover { background: var(--alltrucks-cyan-hover); }
/* MC4WP-Form: Wrapper neutral, erbt nl-right Layout */
.nl-section .mc4wp-form { margin: 0; }
.nl-section .mc4wp-response { margin-top: var(--space-4); }
.nl-section .mc4wp-alert { font-size: 13px; line-height: 1.45; margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--r); }
.nl-section .mc4wp-alert p { margin: 0; }
.nl-section .mc4wp-alert a { color: #fff; text-decoration: underline; }
.nl-section .mc4wp-success { color: #fff; background: var(--alltrucks-cyan-20); border: 1px solid var(--alltrucks-cyan); }
.nl-section .mc4wp-error { color: #fff; background: rgba(229,57,53,.18); border: 1px solid #e53935; }
.nl-privacy { font-size: 13px; color: rgba(255,255,255,.45); text-align: center; margin: 0; }
@media (max-width: 900px) {
    .nl-section { padding: var(--space-12) var(--space-8); }
    .nl-inner { grid-template-columns: 1fr; gap: var(--space-10); }
    .nl-title { font-size: 28px !important; }
    .nl-social-proof strong { font-size: 34px; }
}

/* =====================================================
   Utility-Klassen für Magazin-Übersicht
   (aus shared.css portiert, inline hex statt CSS vars)
   ===================================================== */

.diag-slash { display: inline-block; width: 3px; height: 14px; background: #00B5E2; transform: skewX(-41deg); border-radius: 1px; flex-shrink: 0; }
.u-bar-16-3 { height: 16px; width: 3px; }
.u-eyebrow-cyan { font-size: 11px; font-weight: 500; color: #00B5E2; letter-spacing: .08em; text-transform: uppercase; }

.cat-nav { position: relative; }
.cat-nav-scroll-hint { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--alltrucks-cyan); color: #00193E; align-items: center; justify-content: center; pointer-events: none; animation: catNavPulse 2s ease-in-out infinite; }
.cat-nav.has-overflow .cat-nav-scroll-hint { display: flex; }
.cat-nav.has-overflow.scrolled-end .cat-nav-scroll-hint { display: none; }
@keyframes catNavPulse { 0%, 100% { opacity: .9; transform: translateY(-50%) translateX(0); } 50% { opacity: .6; transform: translateY(-50%) translateX(4px); } }

/* Edition-Switcher (Header-Pill mit Workshop/Fleet) */
.edition-sw { display: inline-flex; align-items: center; background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px; gap: 4px; border: 1px solid rgba(255,255,255,.08); height: 34px; box-sizing: border-box; }
.ed-btn { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; border: none; background: transparent; color: #94a3b8; font-size: 11px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.ed-btn:hover:not(.active) { color: #fff; }
.ed-btn.active { background: #00B5E2; color: #fff; box-shadow: 0 4px 12px rgba(0,181,226,.3); }
@media (max-width: 700px) {
    .edition-sw { width: 100%; height: 31px; }
    .ed-btn { flex: 1; padding: 8px 12px; font-size: 11px; }
}

/* =============================================================================
   ALLTRUCKS-NETZWERK CLUSTER-SECTION (Werkstatt-Porträts, dunkles Theme)
   =============================================================================
   Wird statt der Standard-Cluster-Section gerendert, wenn der Cluster-Slug
   "alltrucks-netzwerk" (mit ws-/fl-Prefix) entspricht. Layout: italienisches
   Zitat-Featured (Quote links, Bild rechts) plus 4-Spalten-Story-Grid.
   Cluster-Farbe #9C6EFF (Purple). Markup gerendert in magazin-clusters.php. */

.cluster-section.netzwerk-section {
    background: linear-gradient(160deg, var(--alltrucks-dark-blue, #00193E) 0%, #001a36 100%);
    border-radius: var(--r);
    padding: var(--space-16) var(--space-12);
    margin: var(--space-12) 0 var(--space-6);
    position: relative;
    overflow: hidden;
    color: #fff;
}
.cluster-section.netzwerk-section::before,
.cluster-section.netzwerk-section::after {
    content: '';
    position: absolute;
    height: 300%;
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 0;
}
.cluster-section.netzwerk-section::before { top: -60px; right: 200px; width: 160px; background: #9C6EFF; opacity: .10; }
.cluster-section.netzwerk-section::after  { top: -60px; right: 340px; width: 60px;  background: #9C6EFF; opacity: .15; }

/* Eigener .sec-bg-num und .sec-hdr im dunklen Kontext entfärben/transparent. */
.cluster-section.netzwerk-section .sec-bg-num { color: rgba(255,255,255,.04); z-index: 1; }
.cluster-section.netzwerk-section .sec-hdr {
    margin-top: 0;
    margin-bottom: var(--space-6);
    border-bottom-color: rgba(156,110,255,.2);
    position: relative;
    z-index: 1;
}
.cluster-section.netzwerk-section .sec-hdr::after { background: #9C6EFF; }
.cluster-section.netzwerk-section .sec-hdr h2 { color: #fff; }
.cluster-section.netzwerk-section .sec-num { color: #9C6EFF; opacity: 1; }
.cluster-section.netzwerk-section .diag-slash { background: #9C6EFF; }
.cluster-section.netzwerk-section .view-all { color: #9C6EFF; }
.cluster-section.netzwerk-section .view-all:hover { color: #fff; }

/* Intro: großer Titel + Subtitle */
.netzwerk-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}
.netzwerk-sub {
    font-size: 14px;
    color: rgba(255,255,255,.4);
    line-height: 1.7;
    margin: 0 0 var(--space-10);
    max-width: 780px;
    position: relative;
    z-index: 1;
}

/* Events-Sub-Block: oberhalb davon vom Portrait-Grid abgrenzen. */
.netzwerk-events { margin-top: var(--space-16); position: relative; z-index: 1; }
.netzwerk-events-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}
/* Slash etwas größer als der Default (14px), passt zu der prominenteren
   Eyebrow-Typographie und matched die Proportionen im HTML-Prototyp. */
.netzwerk-events-eyebrow .diag-slash {
    background: #9C6EFF;
    height: 18px;
    width: 3px;
}

/* Featured Story: 1fr 380px, Body links + Bild rechts */
.netzwerk-featured {
    display: grid;
    grid-template-columns: 1fr 380px;
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: var(--space-6);
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}
.netzwerk-feat-body {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-right: none;
    border-radius: var(--r) 0 0 var(--r);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.netzwerk-feat-quote {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    margin-bottom: var(--space-6);
}
.netzwerk-feat-person {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.netzwerk-feat-person::before {
    content: '';
    width: 28px;
    height: 1px;
    background: rgba(156,110,255,.55);
    flex-shrink: 0;
}
.netzwerk-feat-actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.netzwerk-feat-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #9C6EFF;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: gap .25s var(--ease-out, ease);
}
.netzwerk-featured:hover .netzwerk-feat-cta { gap: var(--space-3); }
.netzwerk-feat-img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    transition: transform .9s var(--ease-out, ease);
    overflow: hidden;
}
/* Gleicher Cluster-Tint wie auf den Story-Karten (.netzwerk-story-thumb::before). */
.netzwerk-feat-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,25,62,.35) 0%, rgba(156,110,255,.25) 100%);
    pointer-events: none;
    z-index: 1;
}
.netzwerk-feat-img-placeholder { background: linear-gradient(135deg, rgba(156,110,255,.25), rgba(0,25,62,.6)); }
.netzwerk-featured:hover .netzwerk-feat-img { transform: scale(1.04); }

/* Story-Grid: 4 Spalten, kleinere Karten */
.netzwerk-stories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    position: relative;
    z-index: 1;
}
.netzwerk-story-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: background .3s var(--ease-out, ease), transform .3s var(--ease-out, ease), border-color .3s var(--ease-out, ease);
}
.netzwerk-story-card:hover {
    background: rgba(255,255,255,.07);
    transform: translateY(-6px);
    border-color: rgba(156,110,255,.3);
}
.netzwerk-story-thumb {
    position: relative;
    height: 150px;
    background-size: cover;
    background-position: center;
    transition: transform .5s var(--ease-out, ease);
    overflow: hidden;
}
/* Gradient-Tint passend zur Cluster-Farbe (analog .side-thumb::before in der
   Standard-Cluster-Section). Sorgt für Kontrast zwischen Foto und Karten-BG. */
.netzwerk-story-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,25,62,.35) 0%, rgba(156,110,255,.25) 100%);
    pointer-events: none;
    z-index: 1;
}
.netzwerk-story-thumb-placeholder { background: linear-gradient(135deg, rgba(156,110,255,.18), rgba(0,25,62,.45)); }
.netzwerk-story-card:hover .netzwerk-story-thumb { transform: scale(1.07); }
.netzwerk-story-body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.netzwerk-story-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 1.25;
    text-transform: uppercase;
    flex: 1;
    margin-bottom: var(--space-3);
    transition: color .2s;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.netzwerk-story-card:hover .netzwerk-story-title { color: #9C6EFF; }
.netzwerk-story-person {
    font-size: 10.5px;
    color: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.netzwerk-story-person::before {
    content: '';
    width: 14px;
    height: 1px;
    background: rgba(156,110,255,.4);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .netzwerk-featured { grid-template-columns: 1fr; }
    .netzwerk-feat-body { border-right: 1px solid rgba(255,255,255,.07); border-radius: var(--r) var(--r) 0 0; }
    .netzwerk-feat-img { min-height: 240px; border-radius: 0 0 var(--r) var(--r); }
    .netzwerk-stories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .cluster-section.netzwerk-section { padding: var(--space-10) var(--space-5); }
    .netzwerk-title { font-size: 24px; }
    .netzwerk-feat-body { padding: var(--space-6); }
    .netzwerk-feat-quote { font-size: 18px; }
    .netzwerk-stories { grid-template-columns: 1fr; }
}

/* ===================================================================
   Sprachumschalter (Magazin-Header)  --  Optik = HTML-Prototype
   Sprachen dynamisch aus TranslatePress. Hover + Focus oeffnet, JS = Fallback.
   =================================================================== */
#siteHeader .hdr-cta-bar .wrap { display: flex !important; align-items: center !important; gap: var(--space-3) !important; }
#siteHeader .hdr-cta-bar-inner { flex: 1 1 auto !important; min-width: 0 !important; }
#siteHeader .lang-selector { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
#siteHeader .hdr-cta-bar .wrap > .hdr-cta-portal { flex: 0 0 auto; }
#siteHeader .lang-toggle { display: inline-flex; align-items: center; height: 28px; gap: var(--space-2); background: rgba(0,181,226,.16); border: 1.5px solid rgba(0,181,226,.4); border-radius: var(--r-pill); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); cursor: pointer; color: var(--alltrucks-dark-blue); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .05em; line-height: 1.2; transition: all .25s var(--ease-out); box-sizing: border-box; }
#siteHeader .lang-toggle:hover, #siteHeader .lang-toggle.open, #siteHeader .lang-selector:focus-within .lang-toggle { border-color: var(--alltrucks-cyan); background: rgba(0,25,62,.04); color: var(--alltrucks-cyan); }
#siteHeader .lang-toggle .lang-globe { flex-shrink: 0; opacity: .7; color: var(--alltrucks-cyan); }
#siteHeader .lang-toggle .lang-active-code { font-weight: 600; }
#siteHeader .lang-toggle .lang-chevron { flex-shrink: 0; opacity: .6; transition: transform .25s var(--ease-out); }
#siteHeader .lang-selector:hover .lang-chevron,
#siteHeader .lang-selector:focus-within .lang-chevron,
#siteHeader .lang-toggle.open .lang-chevron { transform: rotate(180deg); }
#siteHeader .lang-dropdown { position: absolute; top: calc(100% + var(--space-3)); right: 0; background: #00193E; border: 1px solid rgba(0,181,226,.2); border-radius: var(--r); padding: var(--space-4) var(--space-5); min-width: 300px; display: none; box-shadow: 0 16px 48px rgba(0,0,0,.5); z-index: 9999999999; }
#siteHeader .lang-dropdown.open { display: block; animation: atmLangFadeIn .25s var(--ease-out); }
@keyframes atmLangFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#siteHeader .lang-dropdown-title { font-size: 10px; font-weight: 500; color: rgba(227,241,250,.45); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255,255,255,.07); }
#siteHeader .lang-dropdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
#siteHeader .lang-opt { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); text-align: center; color: #E3F1FA; font-size: 13px; font-weight: 500; letter-spacing: .05em; transition: all .2s; text-decoration: none; border: 1px solid transparent; display: block; }
#siteHeader .lang-opt:hover { background: rgba(0,181,226,.1); border-color: rgba(0,181,226,.2); color: #fff; }
#siteHeader .lang-opt.active { background: var(--alltrucks-cyan); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(0,181,226,.3); cursor: default; }
/* Hover-Bridge: ueberbrueckt den Spalt Button -> Dropdown ohne Flackern */
#siteHeader .lang-selector::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: var(--space-3); }
@media (max-width: 768px) {
  #siteHeader .hdr-cta-bar .wrap { gap: var(--space-2) !important; }
  #siteHeader .lang-dropdown { min-width: 264px; }
}

/* Cluster-Pager-Number: feste Breite 42px (ueberschreibt min-width:44 + padding der gemeinsamen Regel) */
.cluster-pager-num { width: 42px !important; min-width: 42px !important; padding: 0 !important; }

/* ===================================================================
   Body-Gutter zwischen Mobile-BP (768) und Content-Width (~1300):
   Elementor-Boxed-Content + Header-Wraps einruecken, sonst kleben
   Karten/Hero/Stats an der Viewport-Kante. Gleicher Wert fuer Header
   und Body, damit die dokumentierte buendige Ausrichtung erhalten bleibt.
   Scope: nur Magazin-Seiten (body.has-atm-header).
   =================================================================== */
@media (min-width: 768px) and (max-width: 1300px) {
  body.atm-magazin:not(.single) .e-con-boxed { padding-inline: var(--space-5) !important; }
  body.has-atm-header #siteHeader .wrap,
  body.has-atm-header #siteHeader .cat-nav .wrap,
  body.has-atm-header #siteHeader .hdr-cta-bar .wrap { padding-inline: var(--space-5) !important; }
}

/* ===================================================================
   Header-Feinschliff Tablet/Mobile (2026-05-28):
   - <=1024: Padding aller Header-Wraps + Body-Content auf space-3 (buendig)
   - 769-1024: Logo/Typo/Gaps kleiner -> alle Header-Elemente passen
   - <=768:  "Magazin"-Label neben Logo wieder sichtbar, in Mobile-Groesse
   =================================================================== */
@media (max-width: 1024px) {
  body.has-atm-header #siteHeader .wrap,
  body.has-atm-header #siteHeader .cat-nav .wrap,
  body.has-atm-header #siteHeader .hdr-cta-bar .wrap { padding-inline: var(--space-3) !important; }
  body.atm-magazin:not(.single) .e-con-boxed { padding-inline: var(--space-3) !important; }
}
@media (max-width: 1024px) {
  body.has-atm-header #siteHeader .header-inner { gap: var(--space-2) !important; }
  body.has-atm-header #siteHeader .logo { gap: var(--space-2); }
  body.has-atm-header #siteHeader .logo svg { width: 180px; }
  body.has-atm-header #siteHeader .logo-divider { display: inline-block !important; height: 28px; }
  body.has-atm-header #siteHeader .logo-label { font-size: 11px; letter-spacing: .12em; }
  body.has-atm-header #siteHeader .hdr-utils { gap: var(--space-2); }
}
@media (max-width: 768px) {
  body.has-atm-header #siteHeader .logo-label { display: inline-grid !important; font-size: 11px; letter-spacing: .12em; }
}

/* ===================================================================
   Fliesstext-Links auf Cyan (Default kam rot aus Elementor-Kit
   --e-global-color-77c6895). Scope: nur Prosa-Container von Artikeln
   und Leitfaeden, nicht Buttons/Nav/Cards.
   =================================================================== */
.article-body-inner a, .text-block a, .highlight-box a, .tip-box a, .pull-quote a, .case-study a,
.guide-body-inner a, .guide-sections a, .guide-intro-card a {
  color: var(--alltrucks-cyan) !important;
}
.article-body-inner a:hover, .text-block a:hover, .highlight-box a:hover, .tip-box a:hover, .pull-quote a:hover, .case-study a:hover,
.guide-body-inner a:hover, .guide-sections a:hover, .guide-intro-card a:hover {
  color: var(--alltrucks-cyan-hover) !important;
}

/* #7 Vorschaubild im Naechster-Artikel-Block */
.art-nav-btn.right { position: relative; }
.art-nav-thumb { width: 100%; height: 132px; border-radius: var(--r-sm); background-size: cover; background-position: center; margin-bottom: var(--space-4); }


/* === Detail-Korrekturen Runde 5 (2026-05-28) ============================== */
/* B) Artikel-Grid: Tablet (769-1024) zwei Spalten, erst Mobile (<=768) eine.
   (Round-2 hatte art-grid schon ab 1024 auf 1fr gesetzt - hier fuer Tablet zurueck.) */
@media (min-width: 769px) and (max-width: 1024px) {
  .art-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* C) Mobile: INHALT (content-map/TOC) + ARTIKEL-INFO ueber den Artikel statt
   darunter. Content-Row 623333a7 (Single-Artikel-Template) -> Sidebar-Spalte
   (2. Kind) nach oben. */
@media (max-width: 768px) {
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner { display: flex !important; flex-direction: column !important; }
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner > .elementor-element-58e438b6 { order: -1 !important; }
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner > .elementor-element-2c4a455b { order: 0 !important; }
}


/* === Detail-Korrekturen Runde 7 (2026-05-28) ============================== */
/* F) Mobile-Header: Logo + Magazin/Zur-Uebersicht-Schrift 10% kleiner,
   Such-Umschalter 20% schmaler. (Tablet 769-1024 bleibt unveraendert.) */
@media (max-width: 768px) {
  body.has-atm-header #siteHeader .logo svg { width: 162px !important; }
  body.has-atm-header #siteHeader .logo-label { font-size: 10px !important; }
  body.has-atm-header #siteHeader .hdr-search { flex: 0 1 110px !important; padding: 0 5px !important; }
}
/* D) Ab 1220px: Gap zwischen Main und Sidebar kleiner -> Sidebar bekommt mehr
   Platz (gilt fuer Beitrag UND Leitfaden, beide Template 2575 / 623333a7). */
@media (min-width: 1220px) {
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner { gap: var(--space-6) !important; }
}


/* === Detail-Korrekturen Runde 8 (2026-05-28) ============================== */
/* D-Erweiterung: ab 1220px Sidebar verbreitern (Main schrumpft), damit das
   THEMENCLUSTER-Element + 5-Artikel-Badge nicht mehr abgeschnitten wird. */
@media (min-width: 1220px) {
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner > .elementor-element-58e438b6 {
    flex: 0 0 400px !important; width: 400px !important; max-width: 400px !important;
  }
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner > .elementor-element-2c4a455b {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
  }
}
/* E: INHALT (toc-card) + ARTIKEL-INFO (meta-card) hatten margin-bottom 20px
   ZUSAETZLICH zum 20px Flex-Gap = 40px (Body-Bloecke nutzen nur 32px Gap).
   Mobile+Tablet: Card-Margin raus, Sidebar-Gap auf 32px = gleicher Rhythmus. */
@media (max-width: 1024px) {
  body.single-magazin-artikel .elementor-element-58e438b6 { gap: var(--space-8) !important; }
  .toc-card, .meta-card { margin-bottom: 0 !important; }
}


/* === Detail-Korrekturen Runde 10 (2026-05-28) ============================ */
/* Cookie-Banner (Complianz) site-weit vereinheitlichen: Akzeptieren cyan,
   Dokument-Links inline ohne Bullet-Punkte. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner button.cmplz-accept {
  background: var(--alltrucks-cyan, #00B5E2) !important;
  border-color: var(--alltrucks-cyan, #00B5E2) !important;
  color: #fff !important;
}
.cmplz-cookiebanner .cmplz-documents,
.cmplz-cookiebanner .cmplz-links {
  display: flex !important; flex-wrap: wrap; gap: 8px 20px;
  list-style: none !important; padding-left: 0 !important; margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-documents li,
.cmplz-cookiebanner .cmplz-links li,
.cmplz-cookiebanner .cmplz-documents .cmplz-document,
.cmplz-cookiebanner .cmplz-links .cmplz-link {
  list-style: none !important; margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-documents li::marker,
.cmplz-cookiebanner .cmplz-links li::marker { content: "" !important; }

/* D-Verstaerkung: Sidebar-Breite + Gap ab 1220px (direkt per ID, robuster). */
@media (min-width: 1220px) {
  body.single-magazin-artikel .elementor-element-623333a7,
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner { gap: var(--space-6) !important; }
  body.single-magazin-artikel .elementor-element-58e438b6 {
    flex: 0 0 400px !important; width: 400px !important; max-width: 400px !important; flex-shrink: 0 !important;
  }
  body.single-magazin-artikel .elementor-element-2c4a455b {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
  }
}


/* === Corporate-Header Hauptmenue inline (Runde 11, 2026-05-28) ============ */
/* Klassisches Main-Menu zentriert neben dem Logo, weiss, 14px. Nur Corporate
   (Suche + silberne cat-nav-Bar werden auf Nicht-Magazin-Seiten nicht gerendert). */
#siteHeader .hdr-mainmenu { display: flex; flex: 1 1 auto; justify-content: center; align-items: stretch; align-self: stretch; gap: var(--space-10); flex-wrap: wrap; min-width: 0; }
#siteHeader .hdr-mainmenu-link { position: relative; display: inline-flex; align-items: center; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s var(--ease-out); }
#siteHeader .hdr-mainmenu-link::after { content: ""; position: absolute; bottom: calc(-1 * var(--space-3)); left: 50%; width: 0; height: 2px; background: var(--alltrucks-cyan); transition: width .3s var(--ease-out), left .3s var(--ease-out); }
#siteHeader .hdr-mainmenu-link:hover::after,
#siteHeader .hdr-mainmenu-link.active::after { width: 100%; left: 0; }
@media (max-width: 1024px) {
  #siteHeader .hdr-mainmenu { gap: var(--space-6); }
  #siteHeader .hdr-mainmenu-link { font-size: 13px; }
}


/* === Header-Diagonale (CD-Element, Runde 13) ============================== */
/* Breites diagonales Akzent-Element oben rechts hinter dem Header-Content
   (matcht CD-Slash-Motiv). Liegt als Background-Layer hinter allem -> keine
   z-index/overflow-Konflikte mit Dropdowns. */
.site-header#siteHeader { background: var(--alltrucks-dark-blue) !important; }

/* Header-CD-Striche: EXAKT wie .stats-bar::before/::after (skewX(-15deg), cyan,
   breit 160px/.10 + schmal 60px/.15). z-index:-1 -> silberne Top-Bar deckt sie ab,
   auf dunkelblauer Hauptleiste sichtbar; overflow:hidden clippt die 350%. */
#siteHeader .hdr-cd { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
#siteHeader .hdr-cd::before, #siteHeader .hdr-cd::after { content: ''; position: absolute; height: 350%; transform: skewX(-15deg); pointer-events: none; }
#siteHeader .hdr-cd::before { top: -80px; right: 180px; width: 160px; background: var(--alltrucks-cyan); opacity: .10; }
#siteHeader .hdr-cd::after  { top: -80px; right: 320px; width: 60px;  background: var(--alltrucks-cyan); opacity: .15; }


/* === Werkstatt-Beratung-CTA in Top-Bar ab 1200px (Runde 22) =============== */
/* Pill-Hoehe/Typo wie die anderen Pills (Werkstattfinder), aber cyan + Icon. */
.site-header .hdr-cta-top { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--r-pill); background: var(--alltrucks-cyan); border: 1.5px solid var(--alltrucks-cyan); color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; transition: all .25s var(--ease-out); box-sizing: border-box; }
.site-header .hdr-cta-top svg { flex-shrink: 0; }
.site-header .hdr-cta-top:hover { background: var(--alltrucks-cyan-hover); border-color: var(--alltrucks-cyan-hover); color: #fff; }
@media (min-width: 1200px) {
  .site-header .hdr-cta-top { display: none !important; }
}
@media (max-width: 1199px) {
  #siteHeader .header-inner .hdr-cta { display: none !important; }
}
/* Werkstatt-Beratung-CTA gibt es NUR auf Desktop (>=1200px, Navbar .hdr-cta).
   Die Top-Bar-Variante ist komplett deaktiviert (Nikolai 2026-07-16:
   "bei mobile raus" — gilt fuer alle Viewports <1200, auch Tablet/Landscape). */
.site-header .hdr-cta-top { display: none !important; }

/* 40px padding-top auf ganzer Corporate-Seite (main/site-main), nicht Magazin */
body:not(.atm-magazin) main#content,
body:not(.atm-magazin) main.site-main { padding-top: 40px !important; }

/* hdr-mainmenu stretch force: Links volle Header-Hoehe -> Unterstrich am Boden */
#siteHeader .hdr-mainmenu { align-self: stretch !important; align-items: stretch !important; }
#siteHeader .hdr-mainmenu-link { align-self: stretch !important; }

/* === Burger-Menue <800px (Corporate, Runde 30) =========================== */
#siteHeader .hdr-menu-wrap { flex: 1 1 auto; display: flex; justify-content: center; align-items: stretch; min-width: 0; }
#siteHeader .hdr-burger { display: none; }
@media (max-width: 800px) {
  #siteHeader .hdr-menu-wrap { flex: 0 0 auto; justify-content: flex-end; align-items: center; }
  #siteHeader .hdr-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 8px; background: transparent; border: 0; cursor: pointer; }
  #siteHeader .hdr-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
  #siteHeader .hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #siteHeader .hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #siteHeader .hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  #siteHeader .hdr-mainmenu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--alltrucks-dark-blue); padding: var(--space-3) var(--space-6); box-shadow: 0 16px 40px rgba(0,0,0,.45); display: none; z-index: 1000; }
  #siteHeader .hdr-mainmenu.is-open { display: flex; }
  #siteHeader .hdr-mainmenu-link { padding: var(--space-4) 0; align-self: stretch; }
  #siteHeader .hdr-mainmenu-link::after { display: none; }
}


/* === Runde 31 (2026-05-28): Burger ganz rechts + Layout-Fix <=800 (Corporate) =
   Bug: <=768 header-inner = flex-wrap:wrap UND leeres .hdr-utils (Hauptleisten-CTA
   ist <1200 ausgeblendet) belegt via space-between den rechten Slot -> Burger
   landet in der Mitte / wirkt wie z-index-Problem. Fix: nicht umbrechen, leeres
   utils ausblenden, hdr-menu-wrap fuellt -> Burger buendig am rechten Rand.
   Rechtes Padding = .wrap-Padding = identisch zum linken Logo-Padding. */
@media (max-width: 800px) {
  body:not(.atm-magazin) #siteHeader .header-inner { flex-wrap: nowrap !important; }
  body:not(.atm-magazin) #siteHeader .hdr-utils { display: none !important; }
  body:not(.atm-magazin) #siteHeader .hdr-menu-wrap { flex: 1 1 auto !important; justify-content: flex-end !important; align-items: center !important; }
  body:not(.atm-magazin) #siteHeader .hdr-burger { margin-right: 0 !important; }
  /* Dropdown sicher ueber allem (Header-Kontext z 9999); voll deckend. */
  body:not(.atm-magazin) #siteHeader .hdr-mainmenu { background: var(--alltrucks-dark-blue) !important; }
}


/* === Runde 32 (2026-05-28) =============================================== */
/* Sidebar auch bei MITTLEREN Viewports breiter (769-1219px). Bisher griff die
   Verbreiterung erst ab 1220px; dazwischen nutzte die Sidebar die Elementor-
   Default-Breite und war zu schmal. Gap zugleich reduziert -> mehr Platz. */
@media (min-width: 769px) and (max-width: 1219px) {
  body.single-magazin-artikel .elementor-element-623333a7,
  body.single-magazin-artikel .elementor-element-623333a7 > .e-con-inner { gap: var(--space-6) !important; }
  body.single-magazin-artikel .elementor-element-58e438b6 {
    flex: 0 0 340px !important; width: 340px !important; max-width: 340px !important; flex-shrink: 0 !important;
  }
  body.single-magazin-artikel .elementor-element-2c4a455b {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
  }
}
/* Content-Row-Inner: padding-top raus (Abstand unter Header/Titel zu gross). */
body.atm-magazin.page .e-con-inner { padding-top: 0 !important; }


/* === Runde 33 (2026-05-28): Mouseover-Unterstrich an Container-Boden ======
   .hdr-menu-wrap (Burger-Wrapper) hatte kein align-self:stretch -> header-inner
   (align-items:center) zentrierte es -> Links stretchten nur auf Inhaltshoehe,
   nicht volle Headerhoehe. ::after bottom:-space-6 landete dadurch in der Mitte.
   Wrapper + Nav + Links auf volle Hoehe -> Unterstrich sitzt unten am Blau. */
@media (min-width: 801px) {
  #siteHeader .hdr-menu-wrap { align-self: stretch !important; }
  #siteHeader .hdr-mainmenu { align-self: stretch !important; align-items: stretch !important; height: 100% !important; }
  #siteHeader .hdr-mainmenu-link { align-self: stretch !important; height: 100% !important; }
}


/* === Runde 34 (2026-05-28): Sprachumschalter rechts vom CTA <1200px =======
   Top-Bar-.wrap ist flex: [pills (flex:1)] [lang] [Werkstatt-Beratung].
   <1200px: per order Sprachumschalter NACH den CTA-Button schieben. */
@media (max-width: 1199px) {
  #siteHeader .hdr-cta-bar-inner { order: 0 !important; }
  #siteHeader .hdr-cta-bar .wrap > .hdr-cta-top { order: 4 !important; }
  #siteHeader .hdr-cta-bar .wrap > .hdr-cta-portal { order: 1 !important; }
  #siteHeader .hdr-cta-bar .wrap > .lang-selector { order: 3 !important; }
}


/* === Runde 36 (2026-05-28): Design-System-Layer Corporate (body:not(.atm-magazin)) ===
   Bringt Tokens/Typo/Buttons auf die Corporate-Seite. Magazin (.atm-magazin) ausgeschlossen.
   Bewusst: KEINE pauschale Text-/Heading-FARBE (dunkle Sektionen behalten weiss),
   KEINE Button font-size/padding (Elementor-Groessenhierarchie + Layout bleiben). */

/* 1) Basis-Schrift -> Inter (killt Theme-Default-Typo) */
body:not(.atm-magazin) { font-family: var(--font-body) !important; }
body:not(.atm-magazin) .elementor-widget-text-editor,
body:not(.atm-magazin) .elementor-widget-text-editor p,
body:not(.atm-magazin) .elementor-widget-text-editor li { font-family: var(--font-body) !important; }

/* 2) Headings -> Transducer VF, 500, UPPERCASE (alle relevanten Title-Klassen + Theme-Title) */
body:not(.atm-magazin) .elementor-heading-title,
body:not(.atm-magazin) .elementor-slide-heading,
body:not(.atm-magazin) .entry-title,
body:not(.atm-magazin) .elementor-icon-box-title,
body:not(.atm-magazin) .elementor-image-box-title,
body:not(.atm-magazin) .elementor-cta__title,
body:not(.atm-magazin) .elementor-accordion-title,
body:not(.atm-magazin) .elementor-tab-title,
body:not(.atm-magazin) .elementor-toggle-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

/* 3) Buttons -> Cyan-Pill (inkl. WPForms-Submit). font-size/padding NICHT erzwungen. */
body:not(.atm-magazin) .elementor-button,
body:not(.atm-magazin) .elementor-slide-button,
body:not(.atm-magazin) .wpforms-submit,
body:not(.atm-magazin) button.wpforms-submit {
  background-color: var(--alltrucks-cyan) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding: 12px 28px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .28s var(--ease-out) !important;
}
body:not(.atm-magazin) .elementor-button:hover,
body:not(.atm-magazin) .elementor-button:focus,
body:not(.atm-magazin) .wpforms-submit:hover,
body:not(.atm-magazin) .wpforms-submit:focus {
  background-color: var(--alltrucks-cyan-hover) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--sh-alltrucks-cyan) !important;
}
/* Slide-Button-Hover-Overlay neutralisieren (sonst fremdfarbiger Slide ueber Cyan). */
body:not(.atm-magazin) .elementor-slide-button .elementor-button-content-wrapper::before { display: none !important; }

/* 4) Fliesstext-Links -> Cyan (hell+dunkel sichtbar). */
body:not(.atm-magazin) .elementor-widget-text-editor a,
body:not(.atm-magazin) .elementor-widget-theme-post-content a { color: var(--alltrucks-cyan) !important; text-decoration: none; }
body:not(.atm-magazin) .elementor-widget-text-editor a:hover,
body:not(.atm-magazin) .elementor-widget-theme-post-content a:hover { color: var(--alltrucks-cyan-hover) !important; }


/* === Runde 38 (2026-05-29): Gesellschafter-Links (Bosch/Knorr) kein Pill =====
   Nur diese zwei Widgets aus dem Button-Pill-Styling nehmen -> Cyan-Text-Link.
   Spezifitaet (0,3,1) + !important schlaegt die globale Pill-Regel (0,2,1). */
body:not(.atm-magazin) .elementor-element-07d01ea .elementor-button,
body:not(.atm-magazin) .elementor-element-97d6a0a .elementor-button {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--alltrucks-cyan) !important;
}
body:not(.atm-magazin) .elementor-element-07d01ea .elementor-button:hover,
body:not(.atm-magazin) .elementor-element-97d6a0a .elementor-button:hover {
  background: transparent !important;
  color: var(--alltrucks-cyan-hover) !important;
  transform: none;
  box-shadow: none !important;
}

/* === Runde 41 (2026-05-29): Top-Bar Collapse on scroll (Corporate) ========
   Beim Runterscrollen klappt die obere CTA-Bar ein -> nur Hauptleiste bleibt.
   Corporate-scoped, Magazin behaelt sein Verhalten. JS toggelt #siteHeader.is-scrolled. */
#siteHeader .hdr-cta-bar { max-height: 80px; transition: max-height .32s var(--ease-out), opacity .25s var(--ease-out), border-bottom-color .3s; }
#siteHeader.is-scrolled .hdr-cta-bar { max-height: 0 !important; overflow: hidden !important; opacity: 0; border-bottom-color: transparent !important; }

/* === Runde 49 (2026-05-29): Ähnliche-Artikel Head + Alle-Artikel-Link ====== */
.related-articles-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.related-articles-head .related-articles-title { margin-bottom: 0; }
.related-articles-all { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--alltrucks-cyan); text-decoration: none; white-space: nowrap; transition: gap .25s var(--ease-out); }
.related-articles-all:hover { gap: var(--space-3); }
.expertise-logo-link { display: inline-flex; text-decoration: none; transition: opacity .2s; }
.expertise-logo-link:hover { opacity: .8; }

/* Mobile: Header-.wrap padding-inline space-2 (Niko 2026-05-29) */
@media (max-width: 768px) {
  body.has-atm-header #siteHeader .wrap { padding-inline: var(--space-2) !important; }
  #siteHeader .hdr-search { padding: 0 !important; }
  body.atm-magazin #siteHeader .logo-label-stack .logo-label-b { display: none !important; }
  body.atm-magazin #siteHeader .logo-label-stack:hover .logo-label-a { opacity: 1 !important; }
}

/* === Niko 2026-05-29: Einzel-Button ad73a92 Standard-Pill + Mobile-Fixes === */
.elementor-element-ad73a92 .elementor-button {
  background-color: var(--alltrucks-cyan) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
  transition: all .28s var(--ease-out) !important;
}
.elementor-element-ad73a92 .elementor-button:hover,
.elementor-element-ad73a92 .elementor-button:focus {
  background-color: var(--alltrucks-cyan-hover) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--sh-alltrucks-cyan) !important;
}
@media (max-width: 768px) {
  /* iOS-Auto-Zoom beim Fokus verhindern: Input >=16px */
  #siteHeader .hdr-search input { font-size: 16px !important; transform: scale(.6875); transform-origin: left center; }
  /* Hero-Hoehe ab 768px hart auf Cornerstone-Wert */
  .hero-main { min-height: 460px !important; }
}

/* view-all unter 768px ausblenden (Niko 2026-05-29) */
@media (max-width: 768px) { .view-all { display: none !important; } }

/* Search-Feld nach rechts (Niko 2026-05-29) */
@media (max-width: 768px) { #siteHeader .header-inner { flex-wrap: nowrap !important; } #siteHeader .hdr-utils { flex: 1 1 auto !important; justify-content: flex-end !important; min-width: 0 !important; margin-left: auto !important; } }

/* Footer: Gesellschafter (Heading + Bosch + Knorr-Bremse) auf Mobile sauber
   untereinander statt versetzt umbrechend (Niko 2026-07-16). Elementor-
   Container 5291894b ist flex-row+wrap; mobil auf column zwingen. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-5291894b {
    --flex-direction: column;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── Cover-Link-Pattern (SEO, 2026-07-23): Karten sind <article> statt <a>;
   der Link sitzt am Titel und spannt via ::after die volle Karte als
   Klickfläche auf. Anchor-Text = nur Titel statt kompletter Karteninhalt.
   !important nötig: .guide-sections a / Elementor-Kit-a-Regeln würden die
   Titelfarbe sonst festnageln (kein Hover-Farbwechsel, Cyan in Leitfäden). */
.cornerstone, .art-card, .netzwerk-featured, .netzwerk-story-card,
.hero-main, .side-card, .ac-article { position: relative; }
a.card-cover-link,
a.card-cover-link:hover,
a.card-cover-link:focus,
a.card-cover-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}
a.card-cover-link::after { content: ""; position: absolute; inset: 0; z-index: 3; cursor: pointer; }

/* Slides-Widget: Slide 2+ rendert seit dem H1-Fix als <h2> — die Kit-H2-Farbregel
   (dunkelblau) schlägt sonst das weiße Slide-Styling auf dem Hero-Foto. */
h2.elementor-slide-heading { color: #fff !important; }

/* Chromium-Compositing: border-radius+overflow:hidden verliert beim Hover-Zoom
   des Kind-Bilds "manchmal" das Eck-Clipping (Layer-Promotion durch das
   Cover-Link-::after). Clipper auf eigenen Layer heben, damit der Radius
   mitkomponiert wird. Karten mit eigenem Hover-Transform bekommen isolation
   (translateZ würde vom Hover-transform ersetzt), reine Clipper translateZ(0). */
.art-card, .side-card, .netzwerk-featured, .netzwerk-story-card { isolation: isolate; }
.hero-main, .cornerstone { transform: translateZ(0); }
.card-thumb, .side-thumb, .netzwerk-story-thumb, .netzwerk-feat-img { transform: translateZ(0); }