/*
 * 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 im Header scopen: Onepage nutzt menu-v2--device-desktop auch für
     Icon-Listen im Content (z.B. Checkliste "Das bringst du mit") und im Footer. */
  .con-kit-molecule-header-v2 .con-kit-atom-menu-v2--device-desktop,
  .con-kit-molecule-header-v2 .con-kit-atom-menu-v2--in-header,
  .con-kit-atom-menu-v2--in-header,
  .con-kit-molecule-header-v2 .con-kit-component-menu-v2-more {
    display: none !important;
  }

  /* === KEIN pauschales Stapeln der Grid-Listen ===
     Der Blueprint erzwang hier `flex-direction: column` auf jede .con-kit-component-grid-list.
     Auf dieser Seite ist das falsch: die Text-Karten kommen durch merge-mobile-sections
     bereits in der Mobile-Fassung (voll breit, 342px), und die reinen BILD-Listen
     (Logo-/Partnerleisten) sind live bewusst zwei- bis dreispaltig (167×73 px).
     Die Regel machte daraus 342×150-Kacheln und blähte die Hero-Spalte um ~310px auf.
     Live-mobil gemessen: jede Grid-List mit Text ist bereits 342px breit. */

  /* === Marquee-Grid (Testimonial-Ticker) === Items behalten sonst ihre
     Desktop-Spaltenbreite (~114px). Eine voll-breite Karte pro Viewport,
     der Ticker scrollt weiter (initMarquees korrigiert __repeat-Transforms). */
  .con-kit-component-marquee-grid-item {
    width: 85vw !important;
    min-width: 85vw !important;
    max-width: 342px !important;
    flex: 0 0 auto !important;
  }

  /* === Grid-Timeline (Icon + Card) === Zickzack-Items bleiben bei 50% (~171px)
     → Textkarte nur ~63px. Container column, ITEM voll breit (bleibt row: Icon
     links, Card rechts — NICHT column, sonst zerbricht Icon+Card-Layout). */
  .con-kit-component-grid-timeline,
  .con-kit-component-grid-timeline__container {
    flex-direction: column !important;
  }
  .con-kit-component-grid-timeline__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  /* Zickzack-Versatz (align-center) neutralisieren — inline left:-…px überschreiben */
  .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__item {
    align-self: flex-start !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
  }

  /* === Header-CTA-Button auf Mobile verstecken (liegt im Burger-Menü) === */
  .con-kit-molecule-header-v2 .con-kit-component-link-group,
  .con-kit-molecule-header-v2__atoms .con-kit-component-button {
    display: none !important;
  }

  /* === Burger-Button (Live-Optik: 56×56 hellgraues Quadrat, dunkles Icon, rechts im Header) === */
  .mobile-burger-btn {
    display: flex !important;
    position: fixed;
    top: 28px;
    right: 24px;
    z-index: 10000;
    width: 56px;
    height: 56px;
    background: #f2f2f2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #191919;
  }
  .mobile-burger-btn__lines {
    display: block;
    width: 21px;
    height: 15px;
    position: relative;
  }
  .mobile-burger-btn__lines::before,
  .mobile-burger-btn__lines::after,
  .mobile-burger-btn__lines span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #191919;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .mobile-burger-btn__lines::before { top: 0; }
  .mobile-burger-btn__lines span { top: 6.5px; display: block; }
  .mobile-burger-btn__lines::after { bottom: 0; }
  /* offen → X */
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::before { transform: translateY(6.5px) rotate(45deg); }
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::after { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-burger-btn.is-open .mobile-burger-btn__lines span { opacity: 0; }

  /* === Mobile-Nav-Overlay: weiß, unterhalb des (sichtbaren) Headers === */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    top: 114px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    padding: 16px 24px 32px;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    visibility: hidden;
    font-family: "Open Sans", sans-serif;
  }
  .mobile-nav-overlay.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  /* Header über dem Overlay halten, damit Logo + Burger sichtbar bleiben */
  .con-kit-molecule-header-v2 { position: relative; z-index: 9999; background: #fff; }
  .mobile-nav-overlay__close { display: none; }

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

  /* Live gemessen: Einträge ~14px, normale Schriftstärke, nicht fett */
  .mobile-nav-link {
    color: #191919;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    cursor: pointer;
    user-select: none;
  }
  .mobile-nav-link__arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #191919;
    border-bottom: 2px solid #191919;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    margin-left: 12px;
    flex-shrink: 0;
  }
  .mobile-nav-item.is-open .mobile-nav-link__arrow { transform: rotate(45deg); }

  .mobile-nav-sub { list-style: none; padding: 0 0 8px 16px; margin: 0; display: none; }
  .mobile-nav-item.is-open .mobile-nav-sub { display: block; }
  .mobile-nav-sub-item { border: none; }
  .mobile-nav-sub-link {
    color: #191919;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
    display: block;
    min-height: 44px;
    line-height: 44px;
  }

  /* Header-CTA als voll-breiter Marken-Button (live: oranger Block über die
     ganze Menübreite, weiße 15px-Schrift, Radius 4px) */
  .mobile-nav-item--cta { margin-top: 16px; }
  .mobile-nav-item--cta .mobile-nav-link {
    display: flex;
    justify-content: center;
    min-height: 0;
    padding: 18px 24px;
    background: rgb(229, 100, 37); /* Süß-Bau-Akzent (aus Live-CTA --color-bg gemessen) */
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 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;
  }

  /* === KEINE pauschale font-size auf .con-kit-component-text / -atom-plain-text ===
     Der Blueprint-Stand hatte hier `font-size: 16px !important`, um zu kleine
     Footer-Kontaktdaten anzuheben. Auf dieser Site liefert Onepage mobil aber
     20px Fließtext — die Regel hat ihn auf 16px geschrumpft (Sektionen wurden
     kürzer als live). Auch `max(16px, 1em)` hilft nicht: `1em` erbt von der
     Vorfahren-Kette, die dieselbe Regel schon auf 16px gesetzt hat.
     Die Mindestgröße deckt die generische max(14px, 1em)-Regel weiter unten ab. */

  /* === Links touch-freundlich (NICHT für Buttons — die haben eigenes Padding 8px 30px) === */
  footer a:not(.con-kit-component-button),
  .con-kit-component-link-group a:not(.con-kit-component-button) {
    min-height: 44px;
    display: inline-block;
    line-height: 1.5;
    padding: 4px 0;
  }

  /* === tel: und mailto: Links: garantierte Touch-Target-Größe ===
     NICHT für .con-kit-component-button: das sind fertige Plattform-Buttons mit
     eigenem Flex-Layout (Icon + Text). display:inline-block und line-height:44px
     brechen es auf (Text rutscht unter das Icon, Button wird 44 statt 36px hoch
     und die Footer-Kontaktspalte wächst um ~100px gegenüber dem Original). */
  a[href^="tel:"]:not(.con-kit-component-button),
  a[href^="mailto:"]:not(.con-kit-component-button) {
    /* Trefferflaeche vergroessern, ohne den Textfluss zu veraendern: diese Links
       erzeugt optimize-clickable.js MITTEN IM FLIESSTEXT (Datenschutz, Impressum,
       Kontakt). Mit display:inline-block + line-height:44px wurde jede Zeile mit
       einer E-Mail-Adresse 52px hoch und die Rechtstexte wuchsen um ~50px.
       padding + negatives margin vergroessern die Klickflaeche, ohne Layout zu
       verschieben. */
    display: inline;
    line-height: inherit;
    padding: 8px 4px;
    margin: -8px -4px;
  }

  /* === KEINE generische Mindestgröße auf Text-Quarks ===
     Der Blueprint hatte hier `.con-kit-quark, .con-kit-quark-paragraph, span, div
     { font-size: max(14px, 1em) }`. Das ist als „nur anheben" gedacht, wirkt aber
     als Verkleinerung: `1em` ist die Größe des ELTERN-Elements, nicht die eigene.
     Wo Onepage dem Quark per `--font-kit-size` 20px gibt und der Container 18px
     hat, gewinnt diese Regel mit max(14,18) = 18px — der Text schrumpft.
     Auf dieser Site unnötig: live gemessen (390 px und 830 px, 5 Seiten) hat
     KEIN Textknoten unter 14 px. Die gezielte 13px-Regel unten bleibt. */

  /* Schrumpfen verhindern: zu kleine font-size: ... ersetzen wir */
  [style*="font-size: 13"],
  [style*="font-size:13"] {
    font-size: 14px !important;
  }

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

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

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

/* Masonry (Testimonials): 3 Desktop-Spalten → 1 Spalte auf Mobile.
   Auf BEIDEN Ebenen (Container + __column), sonst bleiben Columns 33% breit. */
@media (max-width: 1024px) {
  .con-kit-component-masonry {
    flex-direction: column !important;
    width: 100% !important;
  }
  .con-kit-component-masonry__column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Grid-Timeline (Nachhaltigkeit): Badges konsistent links, einheitliches
   Padding (gerade Items haben live gespiegeltes Padding + Badge rechts am Rand). */
@media (max-width: 1024px) {
  .con-kit-component-grid-timeline__item {
    padding-left: 76px !important;
    padding-right: 16px !important;
  }
  .con-kit-component-grid-timeline__icon,
  .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__item .con-kit-component-grid-timeline__icon,
  .con-kit-component-grid-timeline--align-right .con-kit-component-grid-timeline__item .con-kit-component-grid-timeline__icon {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }
}
@media (max-width: 1024px) {
  /* Fortschritts-/Verbindungslinie unter die links stehenden Badges (Badge 56px → Mitte 28px) */
  .con-kit-component-grid-timeline__progress-bar {
    left: calc(28px - var(--one-kit-border-width, 2px) / 2) !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Header auf Mobile: nur das Logo-Atom bleibt sichtbar (Nav + CTA liegen im Burger).
   Die prozentualen --a-width der Atome (24%/48%/24%) sind Desktop-Werte → Logo würde
   auf 83px gequetscht und links abgeschnitten. Atome ohne sichtbaren Inhalt ausblenden,
   Logo-Atom auf natürliche Breite. */
@media (max-width: 1024px) {
  .con-kit-molecule-header-v2__atoms { justify-content: flex-start !important; }
  .con-kit-molecule-header-v2__atoms > .con-kit-animation__atom {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: calc(100% - 80px) !important; /* Platz für den Burger rechts */
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Atome, die nur Nav oder Button enthalten, komplett raus (sonst Gap-Reste) */
  .con-kit-molecule-header-v2__atoms > .con-kit-animation__atom:not(:has(.con-kit-component-logo)) {
    display: none !important;
  }
}

/* Device-spezifische Sichtbarkeit (aus Plattform-Konfiguration visibility_breakpoints) */
.lk-vis-hidden { display: none !important; }
@media (max-width: 1024px) { .lk-vis-desktop { display: none !important; } }
@media (min-width: 1025px) { .lk-vis-mobile { display: none !important; } }