/* ============================================================
   mobile.css – Mobile-Optimierung (User-Vorgabe 19.07.)
   Ergaenzt components.css; enthaelt Burger-Menue und mobile
   Feinschliffe. Desktop bleibt unveraendert.
   ============================================================ */

/* Burger-Button: nur unter 1100px sichtbar */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.burger__linie {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--hng-blau);
  transition: transform var(--dur-schnell) var(--ease),
              opacity var(--dur-schnell) var(--ease);
}
/* Aktiver Zustand: Burger wird zum X */
.burger[aria-expanded="true"] .burger__linie:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__linie:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menue-Panel */
.mobile-menu {
  position: fixed;
  top: 72px; /* mobile Header-Hoehe (User-Vorgabe 19.07.) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--weiss);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease),
              visibility 0s linear var(--dur-normal);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 48px;
  gap: 4px;
}
.mobile-menu__link {
  display: block;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase; /* Versalien wie die Pills (User-Vorgabe 19.07.) */
  letter-spacing: 0.08em;
  color: var(--text-dunkel);
  text-decoration: none;
  border-radius: var(--radius-m);
  transition: background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible { background: var(--beige-60); color: var(--hng-blau); }

/* Zielgruppen-Pills (Berater/Projektentwickler/Kunden) – Versalien, wie
   die Desktop-Pill-Nav (User-Vorgabe 19.07.). */
.mobile-menu__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--hng-blau);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 8px;
}
.mobile-menu__pill {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: var(--fs-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--beige);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease);
}
.mobile-menu__pill:hover,
.mobile-menu__pill:focus-visible { background: rgb(255 255 255 / 0.12); color: var(--weiss); }
.mobile-menu__pill[aria-current="page"] { background: var(--pill-aktiv); color: var(--hng-blau); }
.mobile-menu__trenner {
  border: none;
  border-top: 1px solid var(--sand);
  margin: 12px 8px;
}
.mobile-menu__titel {
  padding: 4px 8px;
  font-size: var(--fs-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dunkel);
  opacity: 0.7;
}
.mobile-menu__marke {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-radius: var(--radius-m);
  transition: background-color var(--dur-schnell) var(--ease);
}
.mobile-menu__marke:hover { background: var(--beige-60); }
.mobile-menu__marke img { height: 18px; width: auto; }
.mobile-menu__aktionen {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.mobile-menu__aktionen .btn--kontakt,
.mobile-menu__aktionen .btn--login {
  flex: 1;
  justify-content: center;
  height: 44px;
}

/* Menue-Sichtbarkeit an Breakpoint koppeln */
@media (max-width: 1100px) {
  .burger { display: flex; }
  /* Desktop-Aktionen (Kontakt/Login) im Header ausblenden – sie stehen im Menue */
  .header__aktionen .btn--kontakt,
  .header__aktionen .btn--login { display: none; }

  /* Header mobil: nur Logo links + Burger rechts. Pill-Nav und Sekundaer-Nav
     wandern ins Burger-Menue (User-Vorgabe 19.07.). */
  .header__inner {
    grid-template-columns: 1fr auto; /* Logo | Burger */
    height: 72px;
    padding-inline: 20px;
    gap: 12px;
  }
  .header.is-scrolled .header__inner { height: 64px; }
  .header__inner > nav[aria-label="Zielgruppen"] { display: none; } /* Pill-Nav mobil ins Menue */
  .header__rechts { gap: 0; }
  .header__logo img { height: 30px; width: auto; }

  /* An die reduzierte Header-Hoehe koppeln (statt --header-h=120px) */
  .social-sidebar { top: 72px; }
  [id] { scroll-margin-top: 92px; } /* 72px Header + 20px Luft fuer Anker-Spruenge */
}
@media (min-width: 1101px) {
  .mobile-menu { display: none; }
}

/* Body-Scroll sperren, wenn Menue offen */
body.menu-offen { overflow: hidden; }

/* ============================================================
   Mobile Inhaltssektionen (User-Vorgabe 19.07.)
   Enger Breakpoint fuer Smartphones: mehrspaltige Grids und feste
   Breiten auf eine Spalte / volle Breite. 600px deckt gaengige
   Hochkant-Handys ab; die 720/1100px-Regeln in components.css
   greifen weiterhin fuer Tablets.
   ============================================================ */
@media (max-width: 600px) {

  /* --- Grundabstaende etwas kompakter --- */
  .section { padding-block: 56px; }
  .container { padding-inline: 20px; }

  /* --- Marken-Grid (4 Marken) --- */
  .marken-grid { grid-template-columns: 1fr; gap: 16px; }

  /* --- Vorteile / Benefits (3-Spalter -> 1) --- */
  .vorteile__grid,
  .benefits__grid { grid-template-columns: 1fr; gap: 20px; }

  /* --- Timeline / Slider-Schritte --- */
  .timeline,
  .timeline--5 { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }

  /* --- CTA-Grids --- */
  .cta__grid,
  .cta--projekt .cta__grid { grid-template-columns: 1fr; gap: 24px; }

  /* --- Fit-Karten (Ja/Nein) --- */
  .fit__grid { grid-template-columns: 1fr; gap: 20px; }

  /* --- Newsletter-Felder --- */
  .newsletter__felder { grid-template-columns: 1fr; }

  /* --- Zahlen ("Über 30 Jahre") --- */
  .zahlen__grid { grid-template-columns: 1fr; gap: 32px; }
  .zahlen__zeile { grid-template-columns: 1fr 1fr; }

  /* --- Erstgespraech (Formular-Spalten) --- */
  .erstgespraech__grid { grid-template-columns: 1fr; gap: 32px; }

  /* --- Events --- */
  .events-erwartung__grid { grid-template-columns: 1fr; gap: 28px; }
  .event-karte { grid-template-columns: 1fr; }
  .event-karte__medien { min-height: 200px; }
  .event-karte__inhalt { padding: 24px 20px; }

  /* --- Marken-Tabs-Panel --- */
  .marken-tabs__panel.is-aktiv { grid-template-columns: 1fr; gap: 24px; }

  /* --- Produkt-Tabs-Bild (feste 523px) --- */
  .produkt-tabs__bild { width: 100%; }

  /* --- Saeulen-Grid --- */
  .saeulen__grid { grid-template-columns: 1fr; gap: 20px; }

  /* --- Form-Karte-Zeilen --- */
  .form-karte__zeile { grid-template-columns: 1fr; }

  /* --- ImmoAbend: Karte volle Breite, Bild als Aufmacher darueber --- */
  .immoabend { min-height: 0; padding-block: 0 40px; }
  .immoabend__bild { position: relative; z-index: 0; height: 220px; }
  .immoabend > .container { padding-top: 0; }
  .immoabend__karte {
    width: 100%;
    margin-top: -40px; /* Karte ueberlappt das Bild leicht */
    position: relative;
    z-index: 1;
  }
  .immoabend__overline { white-space: normal; } /* darf mobil umbrechen */

  /* --- Hero: Hoehe reduzieren, Text kompakter --- */
  .hero { min-height: 560px; }

  /* careimmo-Hero: die vier Zahlen mobil in zwei Zeilen (2x2) statt einer Reihe
     (User-Vorgabe 19.07.). Ueberschreibt das Desktop-nowrap. */
  .hero--careimmo .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .hero--careimmo .stats li { padding-right: 0; }

  /* Animiertes Scroll-Icon in allen Heros mobil ausblenden (User-Vorgabe 19.07.) */
  .hero__scrollhinweis { display: none; }

  /* Berater-Seite Punkt 05: Headline darf mobil umbrechen (User-Vorgabe 19.07.).
     Ueberschreibt das inline white-space:nowrap. */
  .campus__headline { white-space: normal !important; }

  /* --- Banner-Overlays --- */
  .banner__copy { padding-inline: 20px; }

  /* --- Footer: Social/CTA links buendig --- */
  .footer { padding-block: 64px 0; }
  .footer__grid { gap: 32px; }
  /* Untere Ausrichtung nur im mehrspaltigen Desktop-Footer sinnvoll; mobil
     stapeln die Spalten normal (auto-Margins ohne Wirkung, hier neutralisiert). */
  .footer__spalte:has(.footer__cta-liste):not(:has(.footer__social)) .footer__cta-liste { margin-top: 0; }
  .footer__social-titel { margin-top: 24px; padding-top: 0; }
}

/* Sehr schmale Geraete (<= 380px): Timeline einspaltig, Zahlen einspaltig */
@media (max-width: 380px) {
  .timeline,
  .timeline--5 { grid-template-columns: 1fr; }
  .zahlen__zeile { grid-template-columns: 1fr; gap: 24px; }
  .mobile-menu__aktionen { flex-direction: column; }
}