/*!
 * LeineGlück KI-Solutions — Responsive-Layer
 * Breakpoints, Mobil-Korrekturen und die Umschaltung der Entwurfsvarianten.
 *
 * @author    LeineGlück Online-Marketing
 * @link      https://www.leineglueck.de
 * @copyright © 2026 LeineGlück Online-Marketing
 * @license   GPL-2.0-or-later
 */
/* ==========================================================================
   LeineGlück KI-Solutions — Responsive-Layer und Varianten-Schalter
   Liegt NACH lg-components.css. Hier stehen nur Korrekturen, keine Basis-
   Styles — so bleibt die generierte Komponenten-Datei bei einer Neuausgabe
   des Designs austauschbar.
   Breakpoints entsprechen den drei WPBakery-/Elementor-Stufen:
     Tablet  ≤ 1024px
     Mobil   ≤  767px
   ========================================================================== */

/* --------------------------------------------------------------- 0. Grundnetz */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; }

/* Die Szene erzeugt ihre Labels per JS als absolut positionierte Kinder.
   Ohne Clipping schieben sie auf schmalen Viewports die Seite auf. */
ki-scene { overflow: hidden; display: block; }

/* Dekor-Grafik im Footer darf nicht am Dokument ziehen. */
.lg-img-6 { max-width: 130%; }

/* Deutsche Komposita ("Unternehmensverständnis") sind auf schmalen Geräten
   breiter als der Viewport. Ohne diese Zeilen sprengt ein einziges Wort die
   Grid-Spur — der häufigste Grund für den Mobil-Überlauf.

   overflow-wrap bleibt überall aktiv: es greift nur im Notfall, wenn ein
   Wort sonst wirklich überliefe, und kostet auf breiten Viewports nichts. */
h1, h2, h3, h4, p, li, a, strong, span {
  overflow-wrap: break-word;
  word-break: normal;
}
[class*="lg-grid-"] > * { min-width: 0; }

/* Silbentrennung dagegen nur auf schmalen Geräten. Auf Desktop trennt sie
   auch große Überschriften ("Konkrete Lösungen für kon-krete Aufgaben"),
   was den Schriftzug zerreißt; auf Mobil ist sie der Unterschied zwischen
   einem lesbaren Absatz und einer Reihe einzelner Wörter. */
@media (max-width: 767px) {
  h1, h2, h3, h4, p, li, a, strong, span {
    hyphens: auto;
  }
}


/* ------------------------------------------------- 1. Varianten-Umschaltung
   Standard: Hero-Variante A und die statische Prozess-Fassung.
   Zum Umschalten genau eine Klasse am <body> setzen:
     .lg-use-hero-b / .lg-use-hero-e        → andere Hero-Variante
     .lg-use-buehne                          → Scroll-Bühne statt statisch
   In WPBakery entspricht das dem Ein-/Ausblenden der jeweiligen Zeile.        */

/* Doppelte Klasse im Selektor: schlaegt WPBakerys .vc_row{display:flex},
   egal in welcher Reihenfolge die Stylesheets geladen werden. */
.lg-hero.lg-hero-b, .lg-hero.lg-hero-e { display: none; }
body.lg-use-hero-b .lg-hero.lg-hero-a { display: none; }
body.lg-use-hero-b .lg-hero.lg-hero-b { display: block; }
body.lg-use-hero-e .lg-hero.lg-hero-a { display: none; }
body.lg-use-hero-e .lg-hero.lg-hero-e { display: grid; }

.lg-sec-5.lg-stage { display: none; }
body.lg-use-buehne .lg-sec-5.lg-stage { display: block; }
body.lg-use-buehne .lg-sec-6.lg-process-static { display: none; }

/* Die Scroll-Bühne funktioniert nur mit Platz und Zeigegerät.
   Auf Mobil immer die statische Fassung — auch wenn die Bühne gewählt ist. */
@media (max-width: 900px) {
  body.lg-use-buehne .lg-sec-5.lg-stage { display: none; }
  body.lg-use-buehne .lg-sec-6.lg-process-static { display: block; }
}

/* Design-Anmerkungen aus dem Entwurf ("Variante A · Vollbild-Szene").
   Zum Vergleichen sichtbar machen mit .lg-show-varianten am <body>. */
.lg-variant-tag { display: none; }
body.lg-show-varianten .lg-variant-tag { display: block; }


/* ------------------------------------------------------- Vergleichsmodus
   .lg-vergleich am <body> zeigt ALLE Varianten untereinander: die drei
   Hero-Fassungen und beide Prozess-Fassungen, jeweils mit ihrer
   Beschriftung. Gedacht für die Entscheidung im Livekontext — nicht für
   den Publikumsbetrieb, die Seite ist in diesem Zustand rund dreimal so
   lang wie im Normalfall.

   Gesetzt wird die Klasse über die Option lgki_body_classes; entfernt man
   sie, gilt wieder Hero A plus statische Prozessreihe.                     */
body.lg-vergleich .lg-hero.lg-hero-a { display: grid; }
body.lg-vergleich .lg-hero.lg-hero-b { display: block; }
body.lg-vergleich .lg-hero.lg-hero-e { display: grid; }
body.lg-vergleich .lg-sec-5.lg-stage { display: block; }
body.lg-vergleich .lg-sec-6.lg-process-static { display: block; }
body.lg-vergleich .lg-variant-tag { display: block; }

/* Die Scroll-Bühne ist 500vh hoch und braucht ein Zeigegerät. Auf schmalen
   Geräten bleibt sie auch im Vergleichsmodus aus — dort ist ohnehin die
   statische Fassung die einzig sinnvolle. */
@media (max-width: 900px) {
  body.lg-vergleich .lg-sec-5.lg-stage { display: none; }
}


/* ------------------------------------------------------- Produktionszustand
   Die Entscheidung ist gefallen: Hero B ("Objekt im Rahmen"). A und E
   werden nicht mehr ausgeblendet, sondern als Zeile gar nicht erst
   gerendert (disable_element im Baum) — im HTML steht also nur noch eine
   Hero-Fassung.

   Diese Klasse ersetzt den Vergleichsmodus. Sie heisst, was sie tut,
   und zeigt im Unterschied zu .lg-vergleich keine Variantenetiketten.
   Bühne UND statische Reihe bleiben sichtbar: die Bühne erzählt den
   Vierschritt beim Scrollen, die Reihe darunter steht still und wird
   gelesen — zwei Sektionen, kein Entweder-oder.

   Gesetzt über die Option lgki_body_classes.                             */
/* Die Kurzcheck-Seite nutzt den Aufbau der Variante E, steht aber nicht
   im Variantenvergleich — sie hat nur diesen einen Hero. Ohne diese Regel
   greift die Vorgabe .lg-hero-e{display:none} und die Seite ist leer.
   !important, weil die Vorgaberegel dieselbe Gewichtung hat und dann die
   Reihenfolge im Stylesheet entscheiden wuerde. */
.lg-hero.lg-hero-solo { display: grid !important; }

body.lg-final .lg-hero.lg-hero-b { display: block; }
body.lg-final .lg-sec-5.lg-stage { display: block; }
body.lg-final .lg-sec-6.lg-process-static { display: block; }

/* Die Bühne ist 500vh hoch und braucht ein Zeigegerät — auf schmalen
   Geräten trägt die statische Reihe allein. */
@media (max-width: 900px) {
  body.lg-final .lg-sec-5.lg-stage { display: none; }
}


/* --------------------------------------------------------------- 2. Tablet */
@media (max-width: 1024px) {
  /* Fünfspaltige Prozessreihe → zwei Spalten */
  .lg-grid-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kartenraster mit 340px-Mindestspur laufen hier noch, brauchen aber Luft */
  .lg-grid-3, .lg-grid-4, .lg-grid-6 { gap: 32px; }
}


/* ---------------------------------------------------------------- 3. Mobil */
@media (max-width: 767px) {
  /* 3a. Alle Mindestspuren auflösen — sonst bleibt die Spur breiter als der
         Viewport und erzeugt genau den horizontalen Überlauf. */
  .lg-grid-3, .lg-grid-4, .lg-grid-6, .lg-grid-7,
  .lg-grid-8, .lg-grid-9, .lg-grid-10, .lg-grid-11,
  .lg-grid-13 {
    grid-template-columns: 1fr;
  }
  /* Kundenlogos bleiben zweispaltig — einspaltig wirkt die Reihe leer. */
  .lg-grid-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* lg-grid-1 und lg-grid-2 (Icon + Text, "auto 1fr") bleiben zweispaltig. */

  /* 3b. Kopfbereich: Menü und Zweit-CTA weichen dem Logo.
         In WordPress übernimmt hier das Theme-Menü (Burger). */
  .lg-box-30 .lg-link-2,
  .lg-box-30 .lg-link-3,
  .lg-box-30 .lg-link-4 { display: none; }
  .lg-box-30 nav { justify-content: flex-end; gap: 12px; }

  /* Neben dem Logo bleibt genau ein Knopf, und das ist das Erstgespräch —
     die Handlung, die am Ende zählt. "KI-Potenzial prüfen" führt auf eine
     Seite, die den Check erst ankündigt; auf einem Telefon ist das der
     schwächere von beiden.
     Der Erstgespräch-Knopf ist im Entwurf die Umriss-Variante. Als
     einziger Knopf im Kopfbereich trägt er die gefüllte Optik, sonst
     liest er sich wie deaktiviert. color und border-color ausdrücklich
     mit !important: die Grundregel setzt beide ebenfalls so. */
  .lg-box-30 .lg-btn-3 { display: none; }
  .lg-box-30 .lg-btn-4 {
    background: var(--white);
    border-color: var(--white) !important;
    color: var(--plum-900) !important;
    /* Kleiner als am Schreibtisch, sonst rutscht der Knopf unter das Logo.
       Gerechnet für 360 px: innen bleiben 312 px, davon nimmt das Logo 109
       und der Abstand 12 — für den Knopf bleiben 191 px. Gemessen ist
       "Erstgespräch buchen" bei 15 px Schrift und 18 px Polster 216 px
       breit, bei 13 px und 14 px Polster 185 px. Also 13 px. */
    height: 36px !important;
    padding: 0 14px !important;
    font-size: .8125rem !important;
  }

  /* Topbar über dem Header: umbrechen statt schieben. Die Anschrift
     entfällt — sie kostet eine ganze Zeile und steht vollständig im
     Fußbereich und im Impressum. Telefon und E-Mail bleiben: das sind
     die Wege, die auf einem Telefon tatsächlich benutzt werden. */
  .lg-box-28 .lg-grid-5 { grid-template-columns: 1fr; gap: 6px; }
  .lg-box-28 .lg-label-5 { display: none; }

  /* Der WhatsApp-Knopf steht als einziges Element in seiner Zeile und
     sitzt deshalb mittig — als eigenständiger Knopf trägt er das besser
     als eine linke Kante, an der nichts anderes ausgerichtet ist. */
  .lg-box-28 .lg-link-4 { justify-self: center; }

  /* 3c. Hero: volle Höhe raus, dafür sauberes Polster */
  .lg-hero { min-height: 0; padding: 72px 0 64px; }
  .lg-hero-b { padding: 64px 0; }

  /* 3d. Buttons blockbreit — nebeneinander passen sie nicht */
  .lg-btn-1, .lg-btn-2, .lg-btn-3 {
    width: 100%;
    justify-content: center;
  }

  /* Die Wortmarke füllt den Platz, der neben dem Knopf übrig bleibt.
     Vorher stand sie fest auf 64 px sichtbarer Höhe — bei 390 px blieben
     dadurch rund 48 px zwischen Logo und Knopf ungenutzt.

     Die Formel: der Kopfbereich hat 100vw − 48 px Innenraum, davon gehen
     12 px Abstand und 185 px Knopf ab; die zugeschnittene Wortmarke hat
     das Verhältnis 1,694, also Höhe = Restbreite / 1,7. Abgezogen werden
     260 statt 245 px, damit Luft bleibt. Die Grenzen halten sie zwischen
     64 px (nicht kleiner als bisher) und 80 px. Die Obergrenze war
     zuerst 96 px — gemessen wuchs der Kopfbereich damit zwischen 430 und
     767 px auf 121 px und fiel bei 768 px wieder auf 89 zurück; ein
     sichtbarer Sprung. Mit 80 px bleibt er bei rund 105.

     Gerechnet für 390 px: (390 − 260) / 1,7 = 76 px statt 64. */
  .lg-img-2 { height: clamp(64px, calc((100vw - 260px) / 1.7), 80px); }

  /* 3e. Runde Portraits und Logos kleiner */
  .lg-img-3 { width: 96px; height: 96px; }
  .lg-img-5 { width: 128px; }

  /* 3f. Dekor-Grafik im Footer klein halten */
  .lg-img-6 { max-width: 90%; bottom: -30px; right: -30px; }

  /* 3g. Karten: etwas weniger Innenabstand, sonst wird die Zeile zu schmal */
  .lg-card-1, .lg-card-2 { padding: 22px 18px; }
}

/* --------------------------------------------- 4. Sehr schmale Geräte (≤360px) */
@media (max-width: 360px) {
  .lg-box-21, .lg-box-62 { padding-left: 16px; padding-right: 16px; }

  /* Ab hier wird es eng: Abstand und Knopf schrumpfen noch einmal, und
     die Wortmarke rechnet mit dem knapperen Rest. Der Engpass war nicht
     das Polster des Knopfes, sondern der Abstand des Kopf-Containers —
     `nav` hat margin-left:auto, und bei flex-wrap:wrap kippt das in eine
     zweite Zeile, sobald es nicht passt, statt zu schrumpfen.
     320 px: 272 Innenraum − 8 Abstand − 169 Knopf = 95 für das Logo. */
  .lg-box-31 { gap: 8px; }
  .lg-box-30 nav { gap: 8px; }
  .lg-box-30 .lg-btn-4 { padding: 0 12px !important; font-size: .75rem !important; }
  .lg-img-2 { height: clamp(52px, calc((100vw - 235px) / 1.7), 78px); }
}

/* ------------------------------------------------------- 5. Bewegung reduziert */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .lg-sec-5.lg-stage { display: none !important; }
  .lg-sec-6.lg-process-static { display: block !important; }
}