/*
 * ══════════════════════════════════════════════════════════════════
 *  SOWI Mobile Optimierungen — vollständig
 *  Getestet auf: iPhone SE (375), iPhone 14 (390), Android (360–412)
 *  Alle Inhalte bleiben 1:1 erhalten — nur Layout & Größen optimiert
 * ══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1. BASIS: Touch, Tap, Schriften
   ───────────────────────────────────────────────────────────────── */

* {
  -webkit-tap-highlight-color: transparent;
}

/* Bessere Schriftdarstellung auf Retina */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Alle klickbaren Elemente: Mindest-Touch-Ziel 44px (Apple HIG & WCAG) */
@media (max-width: 1023px) {
  button,
  a[href],
  [role="button"] {
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2. NAVBAR & SAFE AREA (Notch-Geräte: iPhone X–15 Pro Max)
   ───────────────────────────────────────────────────────────────── */

/* Etwas kompaktere Navbar auf Mobil (nicht-Notch-Geräte) */
@media (max-width: 1023px) {
  #sowi-navbar {
    height: 70px !important;
  }
  body.sowi-nav-ready {
    padding-top: 70px !important;
  }
  /* Produkte-Filter-Leiste: hinter kompakterer Navbar */
  .sticky.top-\[68px\] {
    top: 70px !important;
  }
}

/* Notch-Geräte: Safe Area Inset ÜBER dem Mobil-Override.
   Dieser Block kommt NACH dem @media-Block oben und gewinnt daher
   auf Notch-Geräten (CSS-Kaskade: letzter Treffer gewinnt bei
   gleicher Spezifizität). */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 1023px) {
    #sowi-navbar {
      padding-top: env(safe-area-inset-top) !important;
      height: calc(70px + env(safe-area-inset-top)) !important;
      box-sizing: content-box;
    }
    body.sowi-nav-ready {
      padding-top: calc(70px + env(safe-area-inset-top)) !important;
    }
    #sowi-mobile-menu-panel {
      padding-top: env(safe-area-inset-top);
    }
    /* Filter-Leiste auch sicher hinter Notch-Navbar positionieren */
    .sticky.top-\[68px\] {
      top: calc(70px + env(safe-area-inset-top)) !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. HERO (STARTSEITE) — min-h-[92vh] · px-8 · py-24
   ───────────────────────────────────────────────────────────────── */

/* Startseite hero: zweispaltig nur ab lg (1024px).
   Auf Mobil: einzel-Spalte, kompakteres Padding */
@media (max-width: 1023px) {
  /* Inhaltsspalte: statt py-24 (96px) → 3rem (48px) */
  .relative.z-10.flex.flex-col.justify-center.py-24 {
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Seitenabstand etwas schmaler */
  .px-8 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Hero-Label + Linie */
  .flex.items-center.gap-3.mb-8 {
    margin-bottom: 1.25rem !important;
  }

  /* Hero-Überschrift: text-5xl (48px) → schöner auf Mobil */
  .font-display.text-5xl {
    font-size: 2.625rem !important; /* 42px */
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }

  /* Hero-Fließtext */
  .text-lg.text-gray-700,
  .text-lg.text-gray-600 {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Bullet-Liste im Hero */
  .space-y-3 > li,
  .space-y-4 > li {
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  .font-display.text-5xl {
    font-size: 2.125rem !important; /* 34px — passt auch auf 360px-Geräte */
    line-height: 1.08 !important;
  }
}

/* Bildspalte im Hero auf Mobil: kompaktere Höhe statt min-h-[50vh] */
@media (max-width: 1023px) {
  .relative.min-h-\[92vh\] > div:last-child.relative {
    min-height: 260px !important;
  }
  .relative.min-h-\[50vh\] {
    min-height: 240px !important;
  }
}

/* Hero CTA-Buttons: auf Mobil untereinander */
@media (max-width: 640px) {
  .flex.gap-4.mt-8,
  .flex.gap-4.mt-10 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .flex.gap-4.mt-8 > a,
  .flex.gap-4.mt-8 > button,
  .flex.gap-4.mt-10 > a,
  .flex.gap-4.mt-10 > button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   4. SEITEN-HERO-BEREICHE (Leistungen, Produkte, Kontakt, Über uns)
      Klasse: relative pt-32 pb-20 bg-sowi-dark
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .pt-32 {
    padding-top: 4.5rem !important;  /* 72px — genug Abstand, nicht verschwenderisch */
  }
  .pb-20 {
    padding-bottom: 3rem !important;
  }
  .pb-16 {
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 640px) {
  .pt-32 {
    padding-top: 3.5rem !important;
  }
  .pb-20 {
    padding-bottom: 2.5rem !important;
  }
}

/* Seiten-Hero-Überschriften */
@media (max-width: 767px) {
  /* text-6xl (60px) → kompakter */
  .font-display.text-5xl.md\:text-6xl,
  .font-display.text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  /* Beschreibungstext unter Hero-Heading */
  .text-gray-400.text-lg {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
  }
  /* max-w-2xl in Hero → volle Breite auf Mobil */
  .max-w-2xl.mx-auto {
    max-width: 100% !important;
  }
}

/* Seiten-Hero-Innenabstand */
@media (max-width: 767px) {
  .relative.max-w-7xl.mx-auto.px-6.text-center {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   5. ALLGEMEINE SECTION-ABSTÄNDE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-20 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Container-Seitenabstand vereinheitlichen */
  .max-w-7xl.mx-auto.px-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .max-w-7xl.mx-auto.px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .max-w-7xl.mx-auto.px-6,
  .max-w-7xl.mx-auto.px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Section-Überschriften auf Mobil */
@media (max-width: 767px) {
  h2.font-display,
  .font-display.font-bold.text-gray-900 {
    font-size: clamp(1.625rem, 6vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }
  h3.font-display {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   6. PRODUKTE-SEITE — Filter-Tabs & Produkt-Grid
   ───────────────────────────────────────────────────────────────── */

/* Filter-Leiste: bereits overflow-x-auto im Bundle.
   Verbesserung: Gradient-Fade rechts als visueller Hinweis aufs Scrollen */
@media (max-width: 767px) {
  .bg-white.border-b.sticky {
    -webkit-overflow-scrolling: touch;
  }

  /* Gradient-Hinweis: "es gibt mehr →" */
  .bg-white.border-b.sticky::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
    z-index: 2;
  }

  /* Scrollbar immer ausblenden */
  .max-w-7xl.mx-auto.px-6.py-4.flex.gap-2 {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-left: 1.25rem !important;
    padding-right: 3rem !important; /* Platz für Gradient */
  }
  .max-w-7xl.mx-auto.px-6.py-4.flex.gap-2::-webkit-scrollbar {
    display: none !important;
  }

  /* Filter-Buttons: gut tippbar */
  .max-w-7xl.mx-auto.px-6.py-4.flex.gap-2 button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.5rem 1.125rem !important;
    font-size: 0.875rem !important;
    min-height: 40px !important;
    border-radius: 9999px !important;
  }
}

/* Produkt-Grid: 1-Spalte auf sehr kleinen Screens, 2-Spalten ab 480px */
@media (max-width: 479px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* Produkt-Karten: Bildhöhe auf Mobil */
@media (max-width: 767px) {
  .img-hover-zoom.h-52 {
    height: 10rem !important; /* 160px statt 208px */
  }
  .p-5 {
    padding: 1rem !important;
  }
  /* Produktkarten-Titel */
  .p-5 h3,
  .p-5 .font-display {
    font-size: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   7. LEISTUNGEN-SEITE — Service-Sektionen & kompakte Karten
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* ── Kompakte Servicekarten (flex gap-5, 3 Flex-Kinder: Bild|Text|Pfeil) ──
     Problem: Titeltext ("Wasseraufbereitung") überläuft den verfügbaren Platz
     Lösung: Karte clippt intern, Text bricht um */
  .group.flex.gap-5.bg-white.rounded-2xl {
    overflow: hidden !important;
  }
  .group.flex.gap-5.bg-white.rounded-2xl .flex-1.min-w-0 {
    overflow: hidden !important;
    min-width: 0 !important;
  }
  /* Innere Zeile (Nummer + Titel): Titel umbricht, nicht überläuft */
  .group.flex.gap-5.bg-white.rounded-2xl .flex.items-baseline.gap-3 {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 0.25rem 0.5rem !important;
    align-items: baseline !important;
  }
  /* Titel selbst: Zeilenumbruch erlauben */
  .group.flex.gap-5.bg-white.rounded-2xl .font-display.font-bold.text-base {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  /* Beschreibungstext in kompakten Karten */
  .group.flex.gap-5.bg-white.rounded-2xl .text-gray-500.text-sm {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {
  /* Service-Grid auf der Leistungen-Hauptseite: Bild + Text → übereinander */
  .grid.lg\:grid-cols-2.gap-16 {
    gap: 2rem !important;
  }

  /* Service-Bild: optimale Höhe auf Mobil */
  .img-hover-zoom.rounded-2xl.overflow-hidden.relative.h-full.min-h-\[320px\] {
    min-height: 220px !important;
    height: 220px !important;
  }

  /* Service-Beschreibung: Bullets gut lesbar */
  .space-y-2 li,
  .space-y-3 li {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  /* CTA-Link in Leistungen */
  .inline-flex.items-center.gap-2.font-semibold {
    font-size: 0.9375rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   8. STATISTIK-LEISTE (Stats-Grid unter Hero)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* 2-Spalten auf Mobil → besser lesbar */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }

  /* Trennlinien zwischen Stats-Feldern */
  .grid.grid-cols-2.md\:grid-cols-4.divide-x > div {
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 1rem !important;
  }
  /* 3. Element: erste Spalte in zweiter Zeile → kein Rand links */
  .grid.grid-cols-2.md\:grid-cols-4.divide-x > div:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
  }
  .grid.grid-cols-2.md\:grid-cols-4.divide-x > div:nth-child(even) {
    border-right: none !important;
  }
  /* Untere Trennlinie zwischen Reihen */
  .grid.grid-cols-2.md\:grid-cols-4.divide-x > div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* Zahlen und Labels in Stats */
  .grid.grid-cols-2.md\:grid-cols-4 .text-3xl,
  .grid.grid-cols-2.md\:grid-cols-4 .text-4xl {
    font-size: 1.75rem !important;
  }
  .grid.grid-cols-2.md\:grid-cols-4 .text-sm {
    font-size: 0.8125rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   9. KONTAKT-SEITE — Formular & Kontaktinfos
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* 2-Spalten-Layout (lg:grid-cols-5 → full-width) */
  .grid.grid-cols-1.lg\:grid-cols-5.gap-10 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Kontaktinfos-Box: zuerst anzeigen */
  .grid.grid-cols-1.lg\:grid-cols-5.gap-10 > .lg\:col-span-2 {
    order: 2 !important; /* Formular wichtiger → zuerst */
  }
  .grid.grid-cols-1.lg\:grid-cols-5.gap-10 > .lg\:col-span-3 {
    order: 1 !important;
  }
}

@media (max-width: 767px) {
  /* Kontaktformular-Grid: 2-Spalten → 1 auf sehr kleinen Screens */
  .grid.grid-cols-1.sm\:grid-cols-2.gap-5 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Formular-Inputs: größere Touch-Fläche */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 48px !important;
    font-size: 1rem !important; /* Verhindert iOS Auto-Zoom (muss ≥16px sein) */
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
  }

  textarea {
    min-height: 140px !important;
    font-size: 1rem !important;
  }

  /* Select-Dropdown */
  select {
    background-size: 20px !important;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Formular-Labels */
  .block.text-sm.font-medium.text-gray-700 {
    font-size: 0.9375rem !important;
    margin-bottom: 0.375rem !important;
  }

  /* Formular absenden-Button: volle Breite */
  form button[type="submit"],
  form button:last-of-type {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
  }

  /* Kontaktinfos-Karte */
  .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-7 {
    padding: 1.25rem !important;
  }

  /* Kontakt-Info-Items */
  .flex.items-start.gap-4 {
    gap: 0.875rem !important;
  }
  .w-10.h-10.rounded-xl {
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex-shrink: 0 !important;
  }
}

/* Öffnungszeiten-Tabelle auf Mobil */
@media (max-width: 480px) {
  .bg-white.rounded-2xl.shadow-sm.border.border-gray-100.p-7 {
    padding: 1rem !important;
  }
  .font-display.text-xl.font-bold {
    font-size: 1.125rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   10. ÜBER UNS SEITE — Team & Story
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Team-Grid: 2-Spalten → 1 auf sehr kleinen Screens */
  .grid.grid-cols-2.md\:grid-cols-3.gap-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Team-Bilder */
  .img-hover-zoom.w-24.h-24 {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }

  /* Story-Grid */
  .grid.md\:grid-cols-3.gap-6 {
    gap: 1rem !important;
  }

  /* Über-uns-Logo-Grid */
  .grid.md\:grid-cols-3.gap-px {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   11. FEATURES/VORTEILE SECTION (#sowi-features-new)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  #sowi-features-new {
    padding: 3rem 0 !important;
  }
  .sfn-inner {
    padding: 0 1.25rem !important;
  }
  .sfn-header {
    margin-bottom: 2rem !important;
    text-align: left !important;
  }
  .sfn-title {
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
  }
  .sfn-card {
    padding: 1.5rem 1.25rem 1.75rem !important;
  }
  .sfn-headline {
    font-size: 1.0625rem !important;
    margin-bottom: 0.5rem !important;
  }
  .sfn-body {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
  .sfn-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   12. INSTALLATIONSSERVICE SECTION (#sowi-installation-section)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  #sowi-installation-section {
    padding: 3rem 0 !important;
  }
  .sis-inner {
    padding: 0 1.25rem !important;
    gap: 2rem !important;
  }
  .sis-title {
    font-size: 1.875rem !important;
    margin-bottom: 1rem !important;
  }
  .sis-desc {
    font-size: 0.9375rem !important;
    margin-bottom: 1.5rem !important;
  }
  .sis-trust {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-bottom: 1.75rem !important;
  }
  .sis-trust-item {
    padding: 0 !important;
  }
  .sis-trust-divider {
    display: none !important;
  }
  .sis-trust-num {
    font-size: 1.5rem !important;
  }
  .sis-cta {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.9375rem !important;
    padding: 0.875rem 1.5rem !important;
  }
  .sis-card {
    padding: 1.5rem !important;
  }
  .sis-list {
    gap: 0.875rem 1rem !important;
    margin-bottom: 1.25rem !important;
  }
  .sis-item {
    font-size: 0.875rem !important;
    gap: 0.625rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   13. GOOGLE-BEWERTUNGEN & REVIEW-CARDS SLIDER
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sowi-review-card {
    width: 260px !important;
    padding: 1rem 1.125rem !important;
  }
  .sowi-gbadge {
    padding: 0.625rem 1rem !important;
  }
  .sowi-gbadge-score {
    font-size: 1.375rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Footer grid: 1-Spalte auf Mobil (bereits im Bundle als grid-cols-1) */
  .relative.bg-sowi-dark.text-gray-300.overflow-hidden .max-w-7xl.mx-auto {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Footer padding */
  .py-20.bg-sowi-dark,
  .py-24.bg-sowi-dark {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Footer Überschriften */
  .text-white.font-semibold.mb-4 {
    margin-bottom: 0.75rem !important;
    font-size: 0.9375rem !important;
  }

  /* Footer Links */
  .space-y-4 > li a,
  .space-y-3 > li a {
    font-size: 0.875rem !important;
    padding: 0.25rem 0 !important;
    display: inline-block !important;
    min-height: 36px !important;
    line-height: 36px !important;
  }

  /* Footer-Trennlinie */
  .border-t.border-white\/10.pt-8 {
    padding-top: 1.5rem !important;
  }

  /* Copyright-Zeile */
  .max-w-7xl.mx-auto.px-6.py-5.flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    text-align: center !important;
    padding: 1rem 1.25rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   15. BREADCRUMBS / TOPBAR-STREIFEN
   ───────────────────────────────────────────────────────────────── */

/* Der Topbar ist bereits auf Mobil ausgeblendet (hidden md:block).
   Nichts zu tun. */

/* ─────────────────────────────────────────────────────────────────
   16. PRODUKTE-CTA VOLLBREITE (page-fixes.css) — Mobile-Anpassung
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .rounded-3xl.bg-primary.mt-16 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .rounded-3xl.bg-primary.mt-16 .font-display {
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
  }
  /* CTA-Buttons im Produkte-Banner */
  .rounded-3xl.bg-primary.mt-16 .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .rounded-3xl.bg-primary.mt-16 a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   17. SCROLLBAR GLOBAL AUSBLENDEN (Mobil)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Horizontale Scrollbereiche ohne sichtbare Scrollbar */
  [class*="overflow-x-auto"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  [class*="overflow-x-auto"]::-webkit-scrollbar {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   18. ANIMATIONEN: Weniger Bewegung auf schwachen Geräten
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   19. FOCUS-STYLES (Barrierefreiheit)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #c9a227 !important;
    outline-offset: 2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   20. NAVBAR OVERRIDE CSS: Mobile-Ergänzungen
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Mobile Menü-Panel: etwas größere Schriften für bessere Lesbarkeit */
  .sowi-mobile-link {
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
  }

  /* Sublinks im Mobile-Menü */
  .sowi-mobile-sublink {
    padding: 0.75rem 1.5rem 0.75rem 2.25rem !important;
    font-size: 0.9375rem !important;
  }

  /* Mobile-Footer im Menü */
  .sowi-mobile-footer {
    padding: 1.25rem !important;
  }
  .sowi-mobile-cta {
    font-size: 1rem !important;
    padding: 0.9375rem !important;
  }
  .sowi-mobile-info-item {
    font-size: 0.875rem !important;
  }

  /* Logo-Text auf kleinen Screens */
  .sowi-logo-name {
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  /* Sehr kleine Geräte: 320-360px */
  .sowi-nav-inner {
    padding: 0 0.75rem !important;
    gap: 0.5rem !important;
  }
  .sowi-logo-img-wrap {
    width: 34px !important;
    height: 34px !important;
  }
  .sowi-logo-name {
    font-size: 12px !important;
  }
  .sowi-logo-sub {
    display: none !important;
  }
  .sowi-hamburger {
    width: 34px !important;
    height: 34px !important;
  }
}