/* =================================================================
   LEGANT CONSULTING — MOBILE FIXES
   Diese Datei wird NACH styles.css und den Inline-Styles geladen.
   Greift ausschließlich auf Mobile-Viewports (<= 768px).
   Desktop bleibt komplett unangetastet.
   ================================================================= */

@media (max-width: 768px) {

  /* ==========================================================
     1) NAVBAR MOBILE MENU — Blauer Hintergrund + Gold-Schrift
     ========================================================== */
  #navbar .navbar-menu.active {
    background: #0D1B35 !important;
    padding-top: 2.5rem !important;
    gap: 0.5rem;
  }

  /* Alle Links inkl. Kontakt-Button: Gold, keine Button-Optik */
  #navbar .navbar-menu.active .navbar-link,
  #navbar .navbar-menu.active .navbar-cta {
    color: #D4A574 !important;
    background: transparent !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left;
    display: block;
    width: 100%;
    letter-spacing: 0.02em;
  }

  #navbar .navbar-menu.active .navbar-link:hover,
  #navbar .navbar-menu.active .navbar-cta:hover,
  #navbar .navbar-menu.active .navbar-link.active {
    color: #E5C399 !important;
    background: transparent !important;
    transform: none !important;
  }

  /* Mehr Abstand zwischen Navbar und erstem Menüpunkt */
  #navbar .navbar-menu.active li:first-child {
    margin-top: 1rem;
  }

  /* Unterstrich der Links unter Navbar im Mobile-Menu entfernen
     (kommt aus script.js navbar-link::after) */
  #navbar .navbar-menu.active .navbar-link::after,
  #navbar .navbar-menu.active .navbar-cta::after {
    display: none !important;
  }


  /* ==========================================================
     2) HERO SECTION (Startseite)
     - Etwas mehr Abstand oben über der Überschrift
     - Buttons UNTER dem Bild, nicht auf voller Breite
     - Weniger Padding unten
     ========================================================== */
  .hero {
    padding: calc(80px + 2.25rem) 0 1.25rem !important;
    min-height: auto !important;
  }

  .hero .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* hero-content löst sich auf — Kinder werden direkt Flex-Items
     des .hero .container, damit wir das Bild als Sibling dazwischen
     ordnen können */
  .hero .hero-content {
    display: contents !important;
  }

  .hero .hero-content > h1 {
    margin-bottom: 0.85rem !important;
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
  }

  .hero .hero-content > .hero-subtitle {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
  }

  .hero .hero-content > h1            { order: 1 !important; }
  .hero .hero-content > .hero-subtitle{ order: 2 !important; }
  .hero-image                          { order: 3 !important; }
  .hero .hero-content > .hero-cta     { order: 4 !important; }

  .hero-image {
    width: 100% !important;
    height: 260px !important;
    margin: 0 !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
    position: relative !important;
    transform: none !important;
    object-fit: cover !important;
  }

  /* Buttons unter dem Bild, gestapelt, voll breit */
  .hero .hero-content > .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  .hero .hero-content > .hero-cta .btn {
    width: 100% !important;
    justify-content: center !important;
  }


  /* ==========================================================
     3) FULLBG SECTION (Der digitale Auftritt …)
     Bild + blauer Hintergrund komplett raus. Nur die Box mit
     dickerer Gold-Umrandung übrig, auf weißem Hintergrund.
     Genug Weißraum oben/unten zur Trennung von Hero & nächster Sektion.
     ========================================================== */
  .fullbg-section {
    background: #ffffff !important;
    min-height: auto !important;
    padding: 2.5rem 0 2.5rem !important;
    display: block !important;
  }

  .fullbg-section .fullbg-image,
  .fullbg-section .fullbg-overlay {
    display: none !important;
  }

  .fullbg-section .fullbg-content {
    background: #0D1B35 !important;
    border: 2px solid #D4A574 !important;
    margin: 0 1.25rem !important;
    padding: 2rem 1.5rem !important;
    max-width: calc(100% - 2.5rem) !important;
    backdrop-filter: none !important;
    border-radius: 12px !important;
  }

  /* Buttons in der FullBG-Box wegnehmen */
  .fullbg-section .fullbg-buttons {
    display: none !important;
  }

  /* Trenn-Gap zwischen Hero und FullBG: weißer Streifen, damit klar
     getrennt wird */
  .hero-fullbg-gap {
    display: block !important;
    background: #ffffff !important;
    height: 2.5rem !important;
  }


  /* ==========================================================
     4) WARUM LEGANT (Startseite) — Bild zwischen Subtitle und H2
     Verschoben über HTML-Anpassung (siehe index.html).
     Hier nur: Bild leicht nach rechts verschieben, damit Kollege
     nicht abgeschnitten wird.
     ========================================================== */
  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .about-image-wrapper {
    order: 2 !important;
  }

  .about-content {
    display: contents !important; /* Kinder werden direkt zu Flex-Items */
  }

  /* Wenn display:contents nicht greift, alternative: */
  .about-content > .section-subtitle { order: 1 !important; }
  .about-content > h2                { order: 3 !important; }
  .about-content > p                 { order: 4 !important; }
  .about-content > .warum-points     { order: 5 !important; }
  .about-content > div[style*="margin-top"] { order: 6 !important; }

  /* Warum-LEGANT Bild: gleicher Stil wie Hero-Bild
     (260px Höhe, breit, zentriert, gleiche Border-Radius) */
  .about-image {
    height: 260px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }


  /* ==========================================================
     5) CTA-SECTION (jede Seite) — kein Bild, blau hinterlegt
     ========================================================== */
  .cta-section {
    background: linear-gradient(135deg, #0D1B35 0%, #1B3260 100%) !important;
    padding: 4rem 0 !important;
  }

  .cta-section .cta-bg-img {
    display: none !important;
  }

  .cta-section .hero-cta {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  .cta-section .hero-cta .btn {
    width: 100% !important;
    justify-content: center !important;
  }


  /* ==========================================================
     6) ÜBER UNS — Mission-Sektion
     Subtitle "UNSERE MISSION" über das Bild, dann H2 und Rest.
     Text komplett zentriert.
     ========================================================== */
  .section-pad.bg-white .about-grid {
    text-align: center !important;
  }

  .section-pad.bg-white .about-grid > div:first-child {
    order: 2 !important;
  }

  /* about-content auf Über-uns: Subtitle vor das Bild */
  .section-pad.bg-white .about-content {
    display: contents !important;
  }

  .section-pad.bg-white .about-content > .section-subtitle {
    order: 1 !important;
    margin-bottom: 0 !important;
  }
  .section-pad.bg-white .about-content > h2 {
    order: 3 !important;
  }
  .section-pad.bg-white .about-content > p {
    order: 4 !important;
  }
  .section-pad.bg-white .about-content > .about-stats {
    order: 5 !important;
  }


  /* ==========================================================
     7) ÜBER UNS — Team-Bild im gleichen Stil wie Hero-Bild
     ========================================================== */
  .section-pad.bg-light img[alt*="Justus"],
  .section-pad.bg-light img[alt*="Boateng"] {
    height: 260px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(13,27,53,.12) !important;
  }


  /* ==========================================================
     8) ÜBER UNS — Team Bios untereinander statt nebeneinander
     ========================================================== */
  .section-pad.bg-light > .container > div[style*="grid-template-columns:1fr 1fr"],
  .section-pad.bg-light > .container > div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .section-pad.bg-light > .container > div[style*="grid-template-columns"] > div {
    padding: 1.5rem !important;
  }


  /* ==========================================================
     9) KONTAKT — Calendly Widget kleiner / passend
     UND: Kalender zwischen "Ziel des Gesprächs" und
     "Das nehmen Sie mit" einsortieren.
     ========================================================== */
  .calendar-card {
    padding: 1rem !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .calendly-inline-widget {
    min-width: 0 !important;
    width: 100% !important;
    height: 620px !important;
  }

  .strategie-calendar {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* strategie-info löst sich auf — Kinder + Calendar sind dann
     direkte Geschwister des .strategie-grid (Flex column auf Mobile) */
  .strategie-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .strategie-info {
    display: contents !important;
  }

  /* Reihenfolge der Kinder. .strategie-info enthält in dieser
     Reihenfolge: Subtitle, H2, P (Intro), H3 (Ziel), P (Ziel-Text),
     H3 (Das nehmen Sie mit), UL, .strategie-meta */
  .strategie-info > .section-subtitle      { order: 1 !important; }
  .strategie-info > h2                     { order: 2 !important; }
  .strategie-info > p:nth-of-type(1)       { order: 3 !important; }
  .strategie-info > h3:nth-of-type(1)      { order: 4 !important; }
  .strategie-info > p:nth-of-type(2)       { order: 5 !important; }
  /* Kalender HIER, zwischen Ziel-Block und Das nehmen Sie mit */
  .strategie-calendar                      { order: 6 !important; }
  .strategie-info > h3:nth-of-type(2)      { order: 7 !important; }
  .strategie-info > .check-list            { order: 8 !important; }
  .strategie-info > .strategie-meta        { order: 9 !important; }

  /* Generell: nichts darf horizontal überlaufen */
  html, body {
    overflow-x: hidden !important;
  }


  /* ==========================================================
     9b) FAQ-CTA — Kontakt-Button auf Mobile weglassen
     (CTA-Sektion folgt direkt danach)
     ========================================================== */
  .faq-cta .btn {
    display: none !important;
  }
  .faq-cta {
    padding-bottom: 0 !important;
  }


  /* ==========================================================
     10) Allgemein: Alle Bilder auf Mobile im Hero-Stil
     ========================================================== */
  .hero-split-image,
  .service-detail-image {
    height: 260px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }

}

/* Sehr kleine Geräte */
@media (max-width: 480px) {
  .hero {
    padding-top: calc(72px + 1.75rem) !important;
  }
  .hero-image {
    height: 220px !important;
  }
  .calendly-inline-widget {
    height: 580px !important;
  }
}