/*
 * mobile-overrides.css — Mobile-Optimierungen ohne Desktop-Layout zu verändern.
 * Wird nur bei Viewport <= 1024px aktiv. Desktop bleibt unverändert.
 */

/* Burger-Button und Overlay standardmäßig versteckt (für Desktop) */
.mobile-burger-btn,
.mobile-nav-overlay {
  display: none;
}

/* Der Header-Ersatz (Desktop-Nav aus, Burger an) gilt bis 1199px, nicht nur
   bis 1024px: Erst ab 1200px ist die OnePage-Container-Breite (1150px) groß
   genug für Logo + 5 Menüpunkte + 3 CTA-Buttons. Darunter wurden die Reiter
   mehrzeilig umgebrochen und der rechte CTA aus dem Viewport geschoben. */
@media (max-width: 1199px) {
  /* === Desktop-Navigation auf Mobile verstecken ===
     NUR Header-Menüs (Burger ersetzt sie). Menü-Atome im Content/Footer
     (Footer-Kontakte, Footer-Links, Hero-Checkmarks) müssen sichtbar bleiben —
     das Original zeigt sie mobil als vertikale device-mobile-Variante. */
  .con-kit-layer-header-v2 .con-kit-atom-menu-v2--device-desktop,
  .con-kit-atom-menu-v2--in-header,
  .con-kit-megamenu,
  .con-kit-component-menu-v2-more {
    display: none !important;
  }
}

/* Ab hier wieder echte Mobil-Layoutregeln — nur ≤1024px. */
@media (max-width: 1024px) {
  /* Content-/Footer-Menüs: vertikal stapeln (wie device-mobile im Original).
     Der nav kann mehrere ULs nebeneinander enthalten (Desktop-Spalten,
     spaltenweise befüllt). Das Original liest mobil ZEILENWEISE — deshalb
     werden die ULs per display:contents aufgelöst und die LIs verzahnt
     (ul1→ungerade, ul2→gerade order). Bei Menüs mit nur einem UL bleibt
     die Reihenfolge dadurch unverändert. */
  .con-kit-atom-menu-v2--device-desktop {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .con-kit-atom-menu-v2--device-desktop > ul {
    display: contents !important;
  }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(1) { order: 1; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(2) { order: 3; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(3) { order: 5; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(4) { order: 7; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(5) { order: 9; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(6) { order: 11; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(7) { order: 13; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(1) > li:nth-child(8) { order: 15; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(1) { order: 2; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(2) { order: 4; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(3) { order: 6; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(4) { order: 8; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(5) { order: 10; }
  .con-kit-atom-menu-v2--device-desktop > ul:nth-of-type(2) > li:nth-child(6) { order: 12; }
  .con-kit-atom-menu-v2--device-desktop > ul li {
    width: 100%;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* Burger-Button, Overlay und Header-CTA-Ersatz: ebenfalls bis 1199px. */
@media (max-width: 1199px) {
  /* === Header-CTA-Buttons (z.B. "Jetzt bewerben") auf Mobile verstecken
     (kommt ins Burger-Menü) === */
  .con-kit-molecule-header-v2 a.con-kit-component-button {
    display: none !important;
  }

  /* === Mobile-Burger-CTAs: Farben wie die Original-Header-Buttons ===
     Alle CTAs einheitlich volle Breite (display:flex + width:100%), damit
     rot und blau exakt gleich groß sind (vorher war rot inline-flex → schmal). */
  .mobile-nav-item--cta .mobile-nav-link {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    margin: 12px 0;
    padding: 12px 20px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
  }
  .mobile-nav-item--cta-blue:nth-of-type(1) .mobile-nav-link,
  .mobile-nav-item--cta-blue .mobile-nav-link {
    background: rgb(14, 54, 147);
  }
  .mobile-nav-item--cta-blue + .mobile-nav-item--cta-blue .mobile-nav-link {
    background: rgb(13, 69, 161);
  }
  .mobile-nav-item--cta-red .mobile-nav-link {
    background: rgb(249, 45, 23);
  }
  .mobile-nav-item--cta {
    border-bottom: none !important;
  }

  /* === Burger-Button (wie Original: hellgrau, dunkles Icon, 2 Balken) === */
  .mobile-burger-btn {
    display: flex !important;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9998;
    width: 54px;
    height: 54px;
    background: #e4e4e4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .mobile-burger-btn:active {
    transform: scale(0.95);
  }

  .mobile-burger-btn__lines {
    display: block;
    width: 22px;
    height: 12px;
    position: relative;
  }

  .mobile-burger-btn__lines::before,
  .mobile-burger-btn__lines::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #161616;
    border-radius: 2px;
  }

  .mobile-burger-btn__lines::before { top: 0; }
  .mobile-burger-btn__lines span { display: none; }
  .mobile-burger-btn__lines::after { bottom: 0; }

  /* === Mobile-Nav-Overlay ===
     Das Overlay wird per JS an <body> gehängt — ausserhalb von .con-kit-site,
     wo die --font-kit-*-Variablen als Inline-Style sitzen. Dadurch erbte es
     keine Font-Variable und fiel auf den Serif-Default zurück. Font hier
     explizit setzen (Menü = Header-Font 'Source Sans 3'); die Links nutzen
     font-family:inherit und übernehmen ihn dadurch. */
  .mobile-nav-overlay {
    font-family: 'Source Sans 3', 'Open Sans', -apple-system, system-ui, Helvetica, Arial, sans-serif;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    padding: 72px 20px 32px;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  .mobile-nav-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-nav-overlay__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #161616;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 1;
  }

  /* Logo oben im Menü (wie im Original) */
  .mobile-nav-overlay__logo {
    padding: 4px 0 16px;
  }
  .mobile-nav-overlay__logo img {
    height: 44px;
    width: auto;
    display: block;
  }

  .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav-item {
    border-bottom: none;
  }

  .mobile-nav-link {
    color: #161616;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
  }

  /* Chevron ">" direkt hinter dem Text, wie im Original */
  .mobile-nav-link__arrow {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid #161616;
    border-bottom: 1.5px solid #161616;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .mobile-nav-item.is-open .mobile-nav-link__arrow {
    transform: rotate(45deg);
  }

  .mobile-nav-sub {
    list-style: none;
    padding: 0 0 12px 16px;
    margin: 0;
    display: none;
  }

  .mobile-nav-item.is-open .mobile-nav-sub {
    display: block;
  }

  .mobile-nav-sub-item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .mobile-nav-sub-link {
    color: #333;
    font-size: 16px;
    font-family: inherit;
    text-decoration: none;
    display: block;
    min-height: 48px;
    line-height: 1.4;
    padding: 14px 4px;
  }

  /* Body sperren wenn Menü offen */
  body.mobile-nav-locked {
    overflow: hidden;
  }
}

/* Rest der Datei: reine Mobil-Layoutregeln (≤1024px). */
@media (max-width: 1024px) {
  /* === Akkordeon-Buttons: Touch-Target ≥44×44px === */
  .con-kit-component-list-item-accordion__trigger button,
  .con-kit-component-list-item-accordion__toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  /* (Frühere pauschale Font-/Touch-Target-Vergrößerungen entfernt:
     sie veränderten Schriftgrößen und Zeilenumbrüche gegenüber dem
     OnePage-Original — Ziel ist 1:1-Parität mit der mobilen Original-Variante.) */

  /* === Verhindere horizontales Overflow generell === */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Hero-Bereiche: sorge dass nichts überlappt */
  .con-kit-organism,
  .con-kit-frame,
  .con-kit-container {
    max-width: 100vw !important;
  }

  /* === Masonry-Layout: Mehrspaltig → 1 Spalte gestapelt === */
  .con-kit-component-masonry,
  .con-kit-component-masonry--columns-2,
  .con-kit-component-masonry--columns-3,
  .con-kit-component-masonry--columns-4 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .con-kit-component-masonry__column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .con-kit-component-masonry__item {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* === Grid-Timeline (Tag-im-Leben Liste) auf Mobile stacken ===
     Live behält __item als flex-row (Icon + Card nebeneinander),
     nur die Items werden auf volle Breite gezwungen. */
  .con-kit-component-grid-timeline,
  .con-kit-component-grid-timeline__container {
    flex-direction: column !important;
    width: 100% !important;
  }
  .con-kit-component-grid-timeline__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
  }
  /* Icon und Card im __item: behalten ihre row-Anordnung,
     Card nimmt den Rest-Platz */
  .con-kit-component-grid-timeline__icon {
    flex: 0 0 auto !important;
  }
  .con-kit-component-grid-timeline__item .con-kit-molecule-grid-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* === Timeline-Alignment: interactions.js schaltet bei <=768px die Klasse
     von --align-center auf --align-left um (wie Onepage-React bei mobilem UA).
     Hier nur die Maße der mobilen Variante: Items linksbündig mit 12px Einzug,
     Bullets 40px statt 48px (Original device-mobile: Bullet 40, Kern 20). */
  .con-kit-component-grid-timeline--align-left .con-kit-component-grid-timeline__item {
    padding: 28px 0 28px 12px !important;
  }
  .con-kit-component-grid-timeline--align-left .con-kit-media-item-bullet {
    --one-kit-bullet-size: 40px !important;
    --one-kit-size: 40px !important;
  }
  .con-kit-component-grid-timeline--align-left .con-kit-media-item--type-bullet {
    --media-item--size: 40px !important;
  }
  /* Alternierende Desktop-Items haben text-align:right — mobil ist im Original
     alles linksbündig */
  .con-kit-component-grid-timeline--align-left .con-kit-component-header,
  .con-kit-component-grid-timeline--align-left .con-kit-component-text,
  .con-kit-component-grid-timeline--align-left .con-kit-quark-paragraph {
    text-align: left !important;
  }

  /* nachhaltigkeit-Timeline: mobil graue Bullets (Radius 8) + graue Progress-Linie,
     exakt wie die device-mobile-Variante des Originals */
  section[data-id="830d9b84-ac04-43a4-a751-5a180e802726"] .con-kit-media-item-bullet__inside {
    background-color: rgb(210, 210, 210) !important;
    border-radius: 8px !important;
  }
  section[data-id="830d9b84-ac04-43a4-a751-5a180e802726"] .con-kit-component-grid-timeline__progress-bar {
    --color-border: 210, 210, 210 !important;
  }

  /* uber-uns-Timeline: mobil kreisrunde rote Bullets (Original device-mobile: Radius 100px) */
  section[data-id="6a8e7efa-1abe-4735-8e1a-00304fde86ab"] .con-kit-media-item-bullet__inside {
    border-radius: 100px !important;
  }


  /* Plain-Text Container darf nicht auf Inhaltsbreite schrumpfen */
  .con-kit-atom-plain-text {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* === Allgemein: Multi-Column-Grids zu Single-Column === */
  .con-kit-component-grid-list--columns-2,
  .con-kit-component-grid-list--columns-3,
  .con-kit-component-grid-list--columns-4 {
    grid-template-columns: 1fr !important;
  }
  .con-kit-component-grid-list-item {
    width: 100% !important;
  }

  /* === Allgemein: enge Flex-Container öffnen === */
  .con-kit-row {
    flex-direction: column !important;
  }
  .con-kit-row > .con-kit-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* === Video-Container responsive === */
  .con-kit-atom-video,
  .con-kit-component-video,
  .con-kit-component-video-preview {
    max-width: 100% !important;
    width: 100% !important;
  }

  video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Parallax-Video-Container: zwingt Video auf Viewport-Breite */
  .con-kit-organism-parallax--video,
  .parallax-banner-layer-0,
  .parallax-inner {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .con-kit-organism-parallax--video video,
  .parallax-banner-layer-0 video,
  .parallax-inner video {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
    left: 0 !important;
  }

  /* Parallax-Video: der .test-Wrapper trägt eingefrorene Desktop-Maße
     (z.B. 2803×1775px, per translate zentriert) — mobil auf Banner-Größe zwingen,
     sonst bleibt vom Video nur eine graue Fläche sichtbar. */
  .con-kit-organism-parallax--video .test {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
  }
  .con-kit-organism-parallax--video .test > div {
    width: 100% !important;
    height: 100% !important;
  }

  /* === uber-uns: Metrik-Kachel (60 Jahre/100%/ELVIS/Top) — im Original
     wird sie mobil gar nicht gerendert (nur Desktop). Die Kachel ist die
     Row, die die vier Metrik-textBlocks enthält. === */
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-row:has([data-id="4656dfb9-7c9c-4607-b158-9c3c9aedc21c"]) {
    display: none !important;
  }

  /* === uber-uns "Logistiklösung mit Herz": Original mobil zeigt erst die
     Textkarte, dann das Foto — Desktop-DOM hat das Foto zuerst.
     Der Export fror die Row-Höhe (Desktop: Spalten nebeneinander) ein →
     mobil gestapelt schrumpft (flex-shrink) die Bild-Spalte auf ~24px und
     das data-type="fill"-Foto überläuft nach unten in die Zeitstrahl-Sektion
     (verdeckt 1963-Start + Text). Fix: Row-Höhe auto + Spalten nicht schrumpfen
     + feste Bildhöhe via aspect-ratio. === */
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-row__container,
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-layout {
    height: auto !important;
    min-height: 0 !important;
  }
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-layout {
    flex-direction: column-reverse !important;
  }
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-layout > .con-kit-col {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  /* Bild braucht EXPLIZITE Höhe (nicht nur aspect-ratio): fill-Bilder haben
     keine intrinsische Höhe, dadurch würde die Spalte in der max-content-
     Berechnung auf 0 kollabieren. */
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-col--first .con-kit-component-image {
    height: 240px !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  /* === uber-uns Hero: Bild als VOLLES Hintergrundbild mit Text darüber
     (wie Desktop). Vorher war es mobil in Bildblock (248px) oben + schwarzen
     Textblock darunter gesplittet — wirkte "verschoben/kaputt". Jetzt füllt
     das Bild die ganze Sektion, Text liegt darüber (Legibilität via
     Overlay-Gradient unten). === */
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background img {
    object-position: 74% 55% !important;
  }
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background1 {
    padding-top: 0 !important;
  }
  /* Abdunkelung unten für Textlesbarkeit über dem Foto */
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
  }

  /* === News-Liste: statisch extrahierte Elfsight-Styles sind Desktop-zweispaltig
     (Bild links schmal, Titel rechts, läuft aus dem Viewport). Original mobil:
     einspaltige Karten — Bild volle Breite, darunter Titel/Teaser/Datum. === */
  .es-embed-root a[class*="CardContainer"] {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .es-embed-root a[class*="CardContainer"] [class*="MediaContainer__Container"] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }
  .es-embed-root a[class*="CardContainer"] [class*="MediaContainer__Inner"],
  .es-embed-root a[class*="CardContainer"] [class*="MediaImage__Container"] {
    width: 100% !important;
    height: 100% !important;
  }
  .es-embed-root a[class*="CardContainer"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .es-embed-root a[class*="CardContainer"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .es-embed-root a[class*="CardContainer"] h1,
  .es-embed-root a[class*="CardContainer"] h2,
  .es-embed-root a[class*="CardContainer"] h3,
  .es-embed-root [class*="card-title"],
  .es-embed-root [class*="Title__"] {
    font-size: 23px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    overflow-wrap: break-word;
  }

  /* === /unternehmensgruppe – Zahlen-Sektion (Erfahrung/Mitarbeiter/Fahrzeuge/
     Lagerfläche/Freifläche) === Das eingebettete Custom-Widget nutzt
     flex-wrap:nowrap + .stat-item{min-width:160px} → 5 Items laufen auf Mobil
     weit über den Viewport hinaus (Seitenbreite ~824px, rechte Werte
     abgeschnitten). Mobil umbrechen lassen: 2 Spalten, kleinere Zahl. */
  .stats-container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 0;
  }
  .stats-container .stat-item {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    max-width: 50%;
  }
  .stats-container .stat-number {
    font-size: 2.4rem !important;
  }
  .stats-container .stat-number span:not(.counter) {
    font-size: 1.4rem !important;
  }

  /* === Bild-Beschnitt: Inhalts-Fotos (con-kit-component-image) mit
     object-fit:cover werden in flache Mobile-Boxen gezwängt; bei
     Hochformat-Personenfotos (z.B. Fahrer) schneidet die zentrierte
     object-position den Kopf oben ab. Fokus leicht nach oben verschieben,
     damit Köpfe sichtbar bleiben. Betrifft nur Content-Bilder, nicht die
     Section-Backgrounds (.con-kit-organism-background). === */
  img.con-kit-component-image__background {
    object-position: 50% 22% !important;
  }

  /* === Startseite "Unser Hauptsitz" (standort) – Fahrer-Foto (Hochformat,
     data-type="fill"): mobil war der Rahmen nur 342×171 (2:1) → Person stark
     beschnitten. Desktop zeigt es fast quadratisch. Rahmen mobil höher
     (~quadratisch) machen, damit das Motiv weitgehend komplett sichtbar ist. */
  [data-id="K9PrVCJITF"] .con-kit-component-image {
    height: 340px !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  [data-id="K9PrVCJITF"] .con-kit-component-image__background {
    object-position: 50% 30% !important;
  }

  /* === /transportlogistik "Ihre Logistik – digital & transparent" (technologie):
     Die LKW-Typ-Bilder liegen in mehreren Rows (mal 3, mal 1 Bild). Jede Row
     trägt eine eingefrorene Desktop-Höhe → ungleiche vertikale Abstände (20px
     innerhalb einer Gruppe vs. 52px zwischen Rows). WICHTIG: Alle Regeln strikt
     nur auf BILD-Rows (:has(.con-kit-component-image)) — die Titel-/Text-Row
     ("Ihre Logistik – digital & transparent" + Beschreibung) darf NICHT
     angefasst werden, sonst überlappen Titel und Text. === */
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image),
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-layout,
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-col,
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-molecule-textBlock,
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-component-atom-list,
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-animation__atom {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Animations-Einzug (--a-indent-lg:20px) neutralisieren; dann einheitlich
     16px innerhalb der Gruppe (atom-list gap) + 16px zwischen den Rows. */
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-animation__atom {
    --a-indent-lg: 0px !important;
  }
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-component-atom-list {
    gap: 16px !important;
    justify-content: flex-start !important;
  }
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) {
    margin: 0 0 16px 0 !important;
  }
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-component-image {
    margin: 0 !important;
  }
  /* 32px-Spacer (con-kit-component-spacer) je Bild-Row nullen (Header-Spacer bleibt). */
  section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-rows > .con-kit-row:has(.con-kit-component-image) .con-kit-component-spacer {
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* Sehr kleine Geräte (< 480px) zusätzliche Anpassungen */
@media (max-width: 480px) {
  .mobile-nav-overlay {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-nav-link {
    font-size: 16px;
  }
}