/*
 * 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;
}

@media (max-width: 1024px) {
  /* === 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;
  }

  /* 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;
  }

  /* === 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 === */
  .mobile-nav-item--cta .mobile-nav-link {
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    margin: 12px 0;
    padding: 12px 20px;
    min-height: 42px;
    font-size: 15px;
    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: linear-gradient(135deg, rgba(14, 54, 147, 0.8), rgb(14, 54, 147) 50%, rgba(14, 54, 147, 0.8));
  }
  .mobile-nav-item--cta-blue + .mobile-nav-item--cta-blue .mobile-nav-link {
    background: linear-gradient(135deg, rgba(13, 69, 161, 0.8), rgb(13, 69, 161) 50%, rgba(13, 69, 161, 0.8));
  }
  .mobile-nav-item--cta-red .mobile-nav-link {
    background: linear-gradient(135deg, rgba(249, 45, 23, 0.8), rgb(249, 45, 23) 50%, rgba(249, 45, 23, 0.8));
    display: inline-flex;
    padding-left: 24px;
    padding-right: 24px;
  }
  .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 === */
  .mobile-nav-overlay {
    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;
  }

  /* === 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 === */
  section[data-id="773c6e13-71a9-44b6-b20e-cf4e5c34e69e"] .con-kit-layout {
    flex-direction: column-reverse !important;
  }

  /* === uber-uns Hero: Original mobil = Bildblock (~248px) oben, Text darunter
     auf dunklem Grund; Desktop-Layout legt den Text ÜBER das Bild === */
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] {
    background-color: #0d0d0d !important;
  }
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] > .con-kit-layer-form .con-kit-organism-background,
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background {
    height: 248px !important;
    bottom: auto !important;
  }
  section[data-id="ca4e9d66-bf8b-4301-99ac-fc49a29bb757"] .con-kit-organism-background1 {
    padding-top: 248px;
  }

  /* === 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;
  }
}

/* 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;
  }
}