/* =====================================================================
   ProMedia24 — Mobile-Optimierung
   ---------------------------------------------------------------------
   ALLE Regeln sind per Media-Query isoliert:
     • Navigation/Burger-Panel:  max-width 820px (= bestehende Burger-Zone)
     • Layout / Typo / Targets:   max-width 767px
   Desktop (Inhalt > 768px, Navigation > 820px) bleibt damit unveraendert.
   Einzige Ausnahme ohne Media-Query: .nav-cta-mob ist standardmaessig
   display:none (neue, sonst nirgends genutzte Klasse) und wird nur in der
   Burger-Zone sichtbar — auf Desktop also wirkungslos.
   ===================================================================== */

/* Per JS ins Burger-Menue gespiegelte CTA-Links: auf Desktop unsichtbar. */
.nav-cta-mob { display: none; }

/* =====================================================================
   1) MOBILE-NAVIGATION — Panel, Scroll-Lock, grosse Tap-Ziele
   (Burger ist laut main.css ab <=820px sichtbar; hier das offene Panel)
   ===================================================================== */
@media (max-width: 820px) {
  header.site .wrap { position: relative; }

  /* nav.main ist <=820px per main.css display:none — im offenen Zustand
     als vollbreites, scrollbares Panel unter dem Header zeigen. */
  header.site.nav-open nav.main {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 8px var(--gut) 18px;
    gap: 1px;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 60;
  }
  header.site.nav-open nav.main > a,
  header.site.nav-open .nav-item > a {
    min-height: 46px; display: flex; align-items: center;
    padding: 11px 8px; font-size: 1.02rem;
  }
  header.site.nav-open .submenu a {
    min-height: 42px; display: flex; align-items: center; padding: 10px 10px;
  }
  /* Megamenü im Panel: einspaltig. Das Inline „grid-column:span 2" am
     Lead-Link erzwingt sonst eine implizite 2. Spalte -> Overflow. */
  header.site.nav-open .submenu.mega { grid-template-columns: 1fr !important; }
  header.site.nav-open .submenu.mega .lead-link { grid-column: 1 / -1 !important; }

  /* gespiegelte CTA-Links am Menue-Ende */
  .nav-cta-mob {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .nav-cta-mob a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .nav-cta-mob a.kc { font-weight: 700; color: var(--ink); }
  .nav-cta-mob .btn { width: 100%; }

  /* Hintergrund-Scroll sperren, solange das Menue offen ist */
  body.nav-open { overflow: hidden; }

  header.site.nav-open .burger { border-color: var(--orange-soft); background: var(--orange-tint); }
}

/* =====================================================================
   2) HEADER-CTA — auf kleinen Screens nur Marke + Burger (kein Overflow)
   Die „Beratung"- und „Kundencenter"-Links wandern ins Burger-Menue.
   ===================================================================== */
@media (max-width: 767px) {
  .header-cta::before { display: none; }
  .header-cta .btn-primary { display: none; }
  .header-cta { gap: 10px; }
}

/* =====================================================================
   3) KARTEN-/GRID-RASTER — Inline grid-template-columns neutralisieren
   Das Design-Tool setzt teils Inline-Spalten (z. B. usecases 3-spaltig),
   die die responsiven Regeln ueberschreiben -> auf Mobile 1 Spalte.
   ===================================================================== */
@media (max-width: 767px) {
  .usecases, .steps, .incl, .domaincheck { grid-template-columns: 1fr !important; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   4) TOUCH-TARGETS — Topbar, Footer, Glossar-/Sprung-Links vergroessern
   (wirkt nur per Padding/Mindesthoehe, optisch auf Desktop ohnehin gleich)
   ===================================================================== */
@media (max-width: 767px) {
  .topbar .wrap { gap: 4px 14px; }
  .topbar a { display: inline-block; padding-block: 6px; }

  .foot-col a, .foot-special a { display: inline-block; padding-block: 6px; }
  .foot-addr a { display: inline-block; padding-block: 4px; }
  .foot-bottom nav { gap: 2px 18px; }
  .foot-bottom nav a { display: inline-block; padding-block: 6px; }

  .gloss-nav a { width: 44px; height: 44px; }
  .price-jump a { padding-block: 12px; }
}

/* =====================================================================
   5) FORMULARE — 16px Inputs (kein iOS-Auto-Zoom), volle Breite, Targets
   ===================================================================== */
@media (max-width: 767px) {
  .field input, .field select, .field textarea,
  .dc-form input { font-size: 16px; }
  .form-actions .btn { width: 100%; }
  .checkbox-row input { width: 20px; height: 20px; }
  .dc-form { flex-wrap: wrap; }
  /* Prüfen-Button mittig, wenn er in die eigene Zeile umbricht */
  .dc-form .btn { margin-inline: auto; }
}