/*
 * 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;
  }
  .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 (390px): Hauptpunkte Poppins 600, 16.8px, Schluesselfarbe;
     Unterpunkte gleiche Schrift/Groesse/Staerke in Textfarbe. Schrift, Farbe und
     Staerke setzt initBurgerMenu aus dem Original-Menue als Variablen. */
  .mobile-nav-overlay {
    font-family: var(--lk-nav-font, "Poppins", sans-serif);
  }
  .mobile-nav-link {
    color: var(--lk-nav-color, rgb(242, 98, 28));
    font-size: 16.8px;
    font-weight: var(--lk-nav-weight, 600);
    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 currentColor;
    border-bottom: 2px solid currentColor;
    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; }
  /* Aktiver Eintrag: Unterstreichung in der Schluesselfarbe, nur unter dem Text (wie live) */
  .mobile-nav-link--active .mobile-nav-link__text {
    padding-bottom: 4px;
    border-bottom: 2px solid currentColor;
  }

  .mobile-nav-sub-link {
    color: rgb(43, 42, 43);
    font-size: 16.8px;
    font-weight: var(--lk-nav-weight, 600);
    font-family: inherit;
    text-decoration: none;
    display: block;
    min-height: 44px;
    line-height: 44px;
  }

  /* Header-CTA als Marken-Button. Verlauf, Schatten, Radius und Schrift kopiert
     initBurgerMenu zur Laufzeit vom echten Header-Button; hier nur Layout und
     Rueckfallwerte. Live: so breit wie der Text, nicht ueber die ganze Zeile. */
  .mobile-nav-item--cta { margin-top: 16px; }
  .mobile-nav-item--cta .mobile-nav-link {
    display: inline-flex;
    justify-content: center;
    min-height: 0;
    padding: 18px 28px;
    background-color: rgb(242, 98, 28);
    color: #fff;
    font-size: 16.8px;
    border-radius: 4px;
  }

  /* Seite sperren wenn Menü offen — auf <html>, NICHT auf <body>: overflow:hidden
     am body macht ihn zum Scroll-Container, dann greift position:sticky der
     Kopfzeile nicht mehr und der Header verschwindet hinter dem offenen Menü. */
  html.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 ===
     'clip' statt 'hidden': overflow-x:hidden auf html UND body macht den body zum
     eigenen Scroll-Container (overflow-y wird zu auto). Dann scrollt das Fenster,
     nicht der body, und position:sticky der Kopfzeilen-Sektion (live: sticky,
     top 0) greift ins Leere — der Header scrollte mit weg. 'clip' schneidet ab,
     ohne Scroll-Container zu erzeugen. Aeltere Browser behalten 'hidden'. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  @supports (overflow: clip) {
    html, body { overflow-x: clip; }
  }

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

}

/* 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: baut eine --align-center-Timeline auf Mobile von Hand nach.
   Auf DIESER Seite liefert Onepage dafür eine eigene Mobile-Fassung: dem Handy
   wird die Timeline als --align-left ausgeliefert, und die Plattform-CSS setzt
   dann selbst 40px Einzug am Container und 24px 0 24px 12px am Element.
   interactions.js (initTimelineAlign) stellt diese Klasse wieder her.
   Ungescopt überschrieb die 76px-Regel diese Werte: Textspalte 210 statt 290px,
   Sektion 727px zu hoch. Darum an --align-center gebunden — greift nur noch als
   Rückfall, wenn die Plattform-Fassung nicht aktiv ist (z.B. ohne JS).
   Ursprünglicher Kommentar: Badges konsistent links, einheitliches
   Padding (gerade Items haben live gespiegeltes Padding + Badge rechts am Rand). */
@media (max-width: 1024px) {
  .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__item {
    padding-left: 76px !important;
    padding-right: 16px !important;
  }
  .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--align-center .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).
     Das Logo dieser Site ist KEIN Logo-Atom, sondern ein Custom-Code-Block des
     Betreibers (#custom-logo-header) — ohne die Ausnahme fiel es mit raus und
     links in der Kopfzeile blieb eine Luecke (live ebenso; Kundenwunsch: Logo zeigen). */
  .con-kit-molecule-header-v2__atoms > .con-kit-animation__atom:not(:has(.con-kit-component-logo, #custom-logo-header)) {
    display: none !important;
  }
}

/* === Mobile-Kopfzeile: Logo links, Burger rechts, beim Scrollen oben fixiert ===
   Der Custom-Code-Block zwingt das Bild auf 500x100px (Desktop-Mass). Auf dem
   Handy auf die Breite neben dem Burger begrenzen, Seitenverhaeltnis behalten,
   vertikal auf die Burger-Mitte (y=52) ausrichten. Die Sektion ist bereits
   position:sticky (Plattform-CSS); sie bekommt hier den weissen Grund, damit
   der Inhalt beim Scrollen nicht durchscheint. */
@media (max-width: 1024px) {
  .con-kit-section--type-header { background: #fff; }
  .con-kit-molecule-header-v2__atoms { align-items: center !important; min-height: 104px; }
  /* min-width:0 ist Pflicht: als Flex-Item hat das Atom min-width:auto = Breite
     des Bildes (280px aus max-height 56px x 5:1), und min-width schlaegt
     max-width — unter 390px rutschte das Logo dadurch unter den Burger.
     100% - 72px = Viewport - 24px Rand - 56px Burger - 24px Rand - 16px Abstand. */
  .con-kit-molecule-header-v2__atoms > .con-kit-animation__atom:has(#custom-logo-header) {
    min-width: 0 !important;
    max-width: calc(100% - 72px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Zwischen 768 und 1024px greift das Tablet-Raster der Plattform (Layout mit
     -24px Rand, zentrierter Container) → Logo-Abstand links sprang zwischen 0, 1
     und 51px, waehrend der Burger fest 24px vom rechten Rand steht. Im Header
     daher Raster neutralisieren: Inhalt immer volle Breite mit 24px links/rechts. */
  .con-kit-section--type-header .con-kit-organism-background1 { padding-left: 24px !important; padding-right: 24px !important; }
  .con-kit-section--type-header .con-kit-frame,
  .con-kit-section--type-header .con-kit-container,
  .con-kit-section--type-header .con-kit-rows,
  .con-kit-section--type-header .con-kit-row,
  .con-kit-section--type-header .con-kit-row__container,
  .con-kit-section--type-header .con-kit-layout,
  .con-kit-section--type-header .con-kit-col {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #custom-logo-header img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 56px;
    margin: 0 !important;
  }
}

/* === Footer: Logo mittig (Kundenwunsch) ===
   Live steht es links (data-atom-horizontal="left"), alles andere im Footer ist
   auf dem Handy aber zentriert — das Logo wirkte dadurch verrutscht.
   Grenze 1199px statt 1024px: erst ab 1200px passen Logo | Menue | Facebook
   nebeneinander (3 Spalten wie live); darunter bricht das Plattform-Raster um. */
@media (max-width: 1199px) {
  .con-kit-section--last [data-atom="logo"] {
    justify-content: center !important;
    text-align: center !important;
  }
  .con-kit-section--last [data-atom="logo"] .con-kit-component-logo,
  .con-kit-section--last [data-atom="logo"] a,
  .con-kit-section--last [data-atom="logo"] img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === Slider-Pfeile: auf jedem Foto erkennbar ===
   Original: duenner weisser Pfeil ohne Hintergrund — auf hellen Bildstellen
   (Fenster, Waende) praktisch unsichtbar. Halbtransparenter dunkler Kreis
   dahinter: weiss bleibt auf hellen wie dunklen Fotos lesbar. Gilt fuer alle
   Breiten (die Pfeile erscheinen ab Tablet; auf dem Handy nur Punkte + Wischen). */
.con-kit-component-slider-arrow .con-kit-component-icon {
  width: 44px !important;
  height: 44px !important;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s ease;
}
.con-kit-component-slider-arrow:hover .con-kit-component-icon,
.con-kit-component-slider-arrow:focus-visible .con-kit-component-icon {
  background: rgba(0, 0, 0, 0.65);
}

/* === Mobile-Kopfzeile: Höhe von live zurückholen ===
   Onepage rendert auf dem Handy ein EIGENES Header-Molekül
   (.con-kit-molecule-header-v2-mobile-view): nur ein Burger rechts, kein Logo,
   keine Navigation. Der Desktop-Mirror kennt dieses Molekül nicht, sondern nur
   die Desktop-Atome — und die werden oben zu Recht ausgeblendet (live zeigt sie
   auf dem Handy ebenfalls nicht). Dadurch hatte die Kopfzeilen-Sektion aber
   keinen Inhalt mehr und fiel auf 0 px zusammen: der komplette Seiteninhalt
   rutschte 104 px nach oben, und der Burger schwebte über dem Hero.
   Live gemessen auf allen 8 Seiten bei 390 px Breite: Sektion 104 px,
   Molekül 342x104, Burger-Button 56x56 bei x=310, y=24.
   Desktop bleibt unberührt (Regel liegt in max-width: 1024px). */
@media (max-width: 1024px) {
  .con-kit-molecule-header-v2 { min-height: 104px; }
  .mobile-burger-btn { top: 24px; }
}

/* === Grid-Timeline (Geschichte, Startseite): mobil alles linksbuendig ===
   Die Atome jedes zweiten Eintrags tragen vom Desktop-Zickzack
   data-atom-horizontal="right". initTimelineAlign stellt sie auf dem Handy auf
   "left"; hier zusaetzlich die Textausrichtung, falls ein Text-Quark sie inline
   mitbringt. */
@media (max-width: 1024px) {
  .con-kit-component-grid-timeline--align-left .con-kit-component-grid-timeline__item [data-atom],
  .con-kit-component-grid-timeline--align-left .con-kit-component-grid-timeline__item [data-atom] * {
    text-align: left !important;
  }
  .con-kit-component-grid-timeline--align-left .con-kit-component-grid-timeline__item [data-atom] {
    justify-content: flex-start !important;
  }
}

/* === Kein Stapel-Effekt beim Scrollen (Kundenwunsch) ===
   Onepage setzt Zeilen mit data-kit-sticky auf position:sticky (top 48px): auf
   der Startseite schieben sich dadurch die Leistungs-Karten beim Scrollen
   uebereinander — und seit die Kopfzeile fixiert ist, rutschen sie zusaetzlich
   unter den Header (104px > 48px). Live identisch; hier fuer alle Breiten aus. */
.con-kit-row[data-kit-sticky] {
  position: relative !important;
  top: auto !important;
}
/* FAQ-Ueberschrift (Text-Block mit data-kit-sticky): auf dem Handy einspaltig,
   das Mitlaufen ergibt dort keinen Sinn und verschwindet unter dem Header.
   Auf dem Desktop (zweispaltig) bleibt sie stehen wie live. */
@media (max-width: 1024px) {
  .con-kit-molecule-textBlock[data-kit-sticky] .con-kit-component-atom-list {
    position: static !important;
  }
}

/* === Footer: Social-Icon mittig unter dem Menue (Kundenwunsch) ===
   Live rechtsbuendig (justify-content:flex-end), alles andere im Footer ist
   auf dem Handy zentriert. */
@media (max-width: 1199px) {
  .con-kit-section--last [data-atom="social"] {
    align-items: center !important;
  }
  .con-kit-section--last .con-kit-atom-social {
    justify-content: center !important;
  }
}

/* === Einblend-Animation: Karten ab Position 5 ===
   Die Plattform-CSS (slide-scss) hat Animationsregeln nur fuer die ersten vier
   Karten einer Liste/Bento (:nth-child(1..4)). Ab der fuenften blieben sie im
   --prestart-Zustand (opacity 0, 40px tiefer) — auf /karriere fehlten dadurch
   zwei Ansprechpartner-Karten und es blieb eine grosse leere dunkle Flaeche. */
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=bento]>[data-molecule][data-kit-frame=line]:nth-child(n+5),
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=bento]>[data-molecule][data-kit-frame=solid]:nth-child(n+5),
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=list]>[data-molecule][data-kit-frame=line]:nth-child(n+5),
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=list]>[data-molecule][data-kit-frame=solid]:nth-child(n+5) {
  animation-name: one-animation-slide;
  animation-duration: calc(var(--one-kit-animation-duration, 100) * 1ms);
  animation-timing-function: var(--one-kit-animation-timing);
  animation-fill-mode: forwards;
  animation-delay: .4s;
}
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=bento]>[data-molecule]:nth-child(n+5) [data-atom],
[data-kit-animation=slide].con-kit-animation--start [data-kit-grid-type=list]>[data-molecule]:nth-child(n+5) [data-atom] {
  animation-duration: 0s;
  animation-delay: 0s;
}

/* === Mobile Kopfzeile: sichtbare Hover-/Tipp-Zustaende ===
   Burger, Menuepunkte und CTA aenderten beim Ueberfahren/Antippen nichts —
   man sah nicht, ob man etwas getroffen hat. */
@media (max-width: 1024px) {
  .mobile-burger-btn { transition: background-color .15s ease, box-shadow .15s ease; }
  .mobile-burger-btn:hover,
  .mobile-burger-btn:focus-visible { background: #e2e2e2; }
  .mobile-burger-btn:active { background: #d4d4d4; }
  .mobile-burger-btn:focus-visible { outline: 2px solid rgb(242, 98, 28); outline-offset: 2px; }

  .mobile-nav-link,
  .mobile-nav-sub-link { transition: color .15s ease, opacity .15s ease; }
  .mobile-nav-item:not(.mobile-nav-item--cta) .mobile-nav-link:hover,
  .mobile-nav-item:not(.mobile-nav-item--cta) .mobile-nav-link:focus-visible,
  .mobile-nav-item:not(.mobile-nav-item--cta) .mobile-nav-link:active {
    color: rgb(43, 42, 43);
  }
  .mobile-nav-sub-link:hover,
  .mobile-nav-sub-link:focus-visible,
  .mobile-nav-sub-link:active {
    color: var(--lk-nav-color, rgb(242, 98, 28));
  }
  .mobile-nav-item--cta .mobile-nav-link { transition: filter .15s ease, transform .15s ease; }
  .mobile-nav-item--cta .mobile-nav-link:hover,
  .mobile-nav-item--cta .mobile-nav-link:focus-visible { filter: brightness(.92); transform: translateY(-1px); }
  .mobile-nav-item--cta .mobile-nav-link:active { filter: brightness(.85); transform: none; }
}

/* === Footer 768–1199px: obere Zeile sauber untereinander und mittig ===
   Zwischen ~1000 und 1199px legt das Plattform-Raster die drei Spalten auf zwei
   Zeilen (Logo links, Menue rechts, Facebook darunter halb versetzt — live
   identisch, wirkt verrutscht). Bei 768px schob das Tablet-Raster (Layout mit
   -24px Rand, 798px breit) den ganzen Footer 15px aus der Mitte.
   Darum bis 1199px: Raster-Rand weg, jede Spalte volle Breite, alles mittig. */
@media (max-width: 1199px) {
  /* Container ist im Tablet-Raster 30px breiter als sein Rahmen (750 in 720px,
     970 in 960px) — der Ueberstand ging nach rechts, der Footer stand 15 bzw.
     5px neben der Mitte. */
  .con-kit-section--last .con-kit-container,
  .con-kit-section--last .con-kit-rows,
  .con-kit-section--last .con-kit-row,
  .con-kit-section--last .con-kit-row__container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .con-kit-section--last .con-kit-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .con-kit-section--last .con-kit-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .con-kit-section--last [data-atom="menu-v2"] {
    align-items: center !important;
  }
  .con-kit-section--last [data-atom="menu-v2"] .con-kit-atom-menu-v2 > ul {
    justify-content: center !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; } }