/* ================================================================
   mobile.css — Zentrale Mobile-Optimierung
   Geladen als LETZTE CSS-Datei → übersteuert alles per Kaskade.
   NICHTS außerhalb von @media → Desktop bleibt 100% unverändert.
   Stand: 2026-03-05
   ================================================================ */


/* ================================================================
   TABLET & MOBILE (≤ 968px)
   ================================================================ */
@media (max-width: 968px) {

  /* --- Overflow-Schutz: Verhindert horizontales Scrollen --- */
  html {
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* --- Bilder: Nie breiter als ihr Container --- */
  img,
  video,
  iframe,
  embed,
  object,
  svg:not(.inline-svg) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- Elemente mit festen Inline-Breiten absichern --- */
  [style*="width: 960"],
  [style*="width:960"],
  [style*="width: 800"],
  [style*="width:800"],
  [style*="width: 720"],
  [style*="width:720"],
  [style*="width: 700"],
  [style*="width:700"],
  [style*="width: 600"],
  [style*="width:600"] {
    max-width: 100% !important;
    width: auto !important;
  }

  /* --- max-width Container: nicht über Viewport --- */
  [style*="max-width: 1400"],
  [style*="max-width:1400"],
  [style*="max-width: 1300"],
  [style*="max-width:1300"],
  [style*="max-width: 1120"],
  [style*="max-width:1120"],
  [style*="max-width: 1100"],
  [style*="max-width:1100"],
  [style*="max-width: 960"],
  [style*="max-width:960"] {
    max-width: 100% !important;
  }

  /* --- Tabellen: Horizontal scrollbar statt Overflow --- */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    font-size: 0.9rem;
  }

  /* --- Pre/Code: Nicht überlaufen --- */
  pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    word-break: break-word;
  }

  /* --- nowrap-Texte auf Mobile umbrechen --- */
  .hero-badges,
  .cta-buttons,
  .button-group {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
}


/* ================================================================
   MOBILE (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* --- Touch-Targets: Mindestens 44px --- */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .btn,
  .nav a {
    min-height: 44px;
  }

  /* --- Links in Fließtext: Besser tippbar --- */
  p a,
  li a,
  .card a {
    padding: 2px 0;
  }

  /* --- Formulare: iOS Zoom verhindern (≥16px) --- */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* --- Wrap-Container: Volle Breite --- */
  .wrap {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Grids: Single column --- */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* --- Steps: Kompakter --- */
  .steps li {
    padding-left: 3rem !important;
  }

  /* --- Floating Bilder in Cards: Stack statt Float --- */
  .card img[style*="float"],
  .intro img[style*="float"] {
    float: none !important;
    display: block !important;
    margin: 0 auto 1.25rem auto !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* --- Inline-Bilder mit width-Attributen --- */
  img[width="720"],
  img[width="800"],
  img[width="600"],
  img[width="960"] {
    width: 100% !important;
    height: auto !important;
  }

  /* --- Social Share Grid: Kompakter --- */
  .social-share-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* --- Mehr Platz zwischen Sections --- */
  .intro + section,
  section + section {
    margin-top: 1rem !important;
  }

  /* --- Breadcrumb: Wrap erlauben --- */
  .breadcrumb,
  nav[aria-label="Breadcrumb"] {
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
    padding: 0.5rem 1rem !important;
  }

  /* --- Abstände bei Überschriften in Sections --- */
  section > h2:first-child,
  section > .wrap > h2:first-child {
    margin-top: 0 !important;
  }

  /* --- FAQ/Accordion: Touch-freundlich --- */
  details summary,
  .faq-question,
  .accordion-header {
    min-height: 48px !important;
    padding: 1rem !important;
    cursor: pointer;
  }

  /* --- Pricing: Stack statt Nebeneinander --- */
  .pricing-grid,
  .pricing-table {
    grid-template-columns: 1fr !important;
  }

  /* --- Fontsize Toggle: Etwas kleiner --- */
  .fontsize-toggle {
    margin-left: 12px !important;
  }
  .fontsize-toggle-btn {
    padding: 0.35rem 0.8rem !important;
  }
}


/* ================================================================
   SMALL MOBILE (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {

  /* --- Noch engerer Wrap --- */
  .wrap {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* --- Section Padding enger --- */
  section {
    padding: 2rem 0 !important;
  }

  section > *:not(img):not(picture):not(video) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Noch kleinere Touch-abstände --- */
  .hero-badges {
    gap: 0.6rem !important;
  }

  .hero-badges .badge,
  .hero-badge {
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
  }

  /* --- Footer: Noch kompakter --- */
  .footer-grid {
    gap: 0.6rem !important;
  }

  .footer-links a {
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
  }

  /* --- Social Grid: 3 Spalten auf kleinstem Screen --- */
  .social-share-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* --- Tabellen: Noch kleinere Schrift --- */
  table {
    font-size: 0.8rem !important;
  }
  table th,
  table td {
    padding: 0.5rem 0.4rem !important;
  }
}


/* ================================================================
   LANDSCAPE PHONE FIX
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Header nicht zu viel Platz einnehmen */
  .site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .wrap.header-row {
    min-height: 50px !important;
  }

  /* Nav Overlay: Scrollbar */
  .nav {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}


/* ================================================================
   SAFE-AREA (Notch / Dynamic Island)
   ================================================================ */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 968px) {
    .site-header {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    .site-footer {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}


/* ================================================================
   DARK MODE: Mobile Nav – Dunkler Text auf weißem Hintergrund
   ================================================================ */
@media (max-width: 768px) {

  /* Nav Overlay bleibt weiß im Dark Mode */
  html[data-theme="dark"] nav.nav,
  html[data-theme="dark"] #mainnav {
    background: #ffffff !important;
  }

  /* Nav Links: Dunkler Text, nicht der Dark-Mode-Hellblau */
  html[data-theme="dark"] nav.nav a,
  html[data-theme="dark"] #mainnav a,
  html[data-theme="dark"] nav.nav li a,
  html[data-theme="dark"] #mainnav li a {
    color: #003366 !important;
    -webkit-text-fill-color: #003366 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }

  /* Nav Links Hover */
  html[data-theme="dark"] nav.nav a:hover,
  html[data-theme="dark"] #mainnav a:hover {
    color: #0066cc !important;
    -webkit-text-fill-color: #0066cc !important;
    background: linear-gradient(90deg, #f0f8ff, #ffffff) !important;
  }

  /* Section Headers im Mobile Menu */
  html[data-theme="dark"] .mobile-section-header {
    background: #f5f7fa !important;
  }
  html[data-theme="dark"] .mobile-section-header span {
    color: #0049B7 !important;
    -webkit-text-fill-color: #0049B7 !important;
  }

  /* Border-Farben */
  html[data-theme="dark"] nav.nav li,
  html[data-theme="dark"] #mainnav li {
    border-bottom-color: #f0f0f0 !important;
  }
}

/* ================================================================
   COOKIE BANNER: Vollständig verstecken nach Klick
   ================================================================ */
#cookie-banner[style*="display: none"],
#cookie-banner[style*="display:none"] {
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Focus-Outline entfernen bei Cookie-Buttons */
#cookie-banner button:focus {
  outline: none !important;
  box-shadow: none !important;
}