/* =====================================================================
   responsive-fixes.css — gz-web, 2026-05-15
   Letzter Cascade-Layer. Kein !important wo nicht zwingend.
   Standard-Breakpoints (konsolidiert auf 4 Stufen):
     Mobile-only          : max-width: 599px
     Tablet-Portrait      : 600px – 899px
     Tablet-Landscape /   : 900px – 1199px
       Small Desktop
     Desktop              : min-width: 1200px
   Quelle der Wahrheit für Mobile-Layout-Korrekturen, Sticky-CTA,
   Touch-Targets, Form-Felder, iPad-Lücke, Nav-Drawer-Refinements.
   ===================================================================== */


/* =====================================================================
   GLOBAL — A11y, Tap-Highlight, Focus-Ring, Bild-Defaults
   ===================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
}
img, picture, video {
  max-width: 100%;
  height: auto;
}

/* Sage Focus-Ring (A11y-Pflicht, WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--sage, #5E7250);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline-offset: 4px;
}
/* Inputs: Focus-Ring innen damit Layout nicht springt */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sage, #5E7250);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(94,114,80,0.18);
}


/* =====================================================================
   TOUCH-TARGETS — alles Klickbare ≥ 48×48 px auf Mobile
   ===================================================================== */
@media (max-width: 899px) {
  .pill, .pill-outline, .pill-white, .pill-outline-white,
  .btn, .cta-btn, .hero-btn,
  .nav-cta-btn,
  .nav-link,
  .footer a,
  .contact-box a,
  .treat-link, .svc-arrow,
  button, [role="button"] {
    min-height: 48px;
  }
  .nav-link {
    display: inline-flex;
    align-items: center;
    padding-block: 12px;
  }
  /* Burger: zentriert min 48×48 */
  .burger {
    min-width: 48px;
    min-height: 48px;
  }
  /* Footer-Links auf Touch-Spacing */
  .footer a, footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }
  /* Pills/Chip-Wraps brechen sauber um (Geo-Pills) */
  .footer .pills, .footer ul.pills, .geo-pills, .footer-geo, .pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}


/* =====================================================================
   HERO — Mobile-Höhe von 88dvh auf 60dvh kappen
   ===================================================================== */
@media (max-width: 599px) {
  .hero {
    min-height: 60dvh;
  }
  @supports not (height: 100dvh) {
    .hero { min-height: 60vh; }
  }
  .hero-slider {
    min-height: 60dvh;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero { min-height: 70dvh; }
  .hero-slider { min-height: 70dvh; }
}


/* =====================================================================
   iPad-PORTRAIT-LÜCKE (768–1024 px)
   .services-row direkt von 3-Spalter → 1-Spalter ist falsch.
   Hier: 2-Spalter im Tablet-Portrait + Tablet-Landscape-Untergrenze.
   ===================================================================== */
@media (min-width: 600px) and (max-width: 1199px) {
  .services-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  /* Team-Grid Tablet-Zwischenstufe (falls 4-Spalter Desktop) */
  .team-grid,
  .team-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  /* Generische Grids mit inline 3-/4-Spalter behalten 2-Spalter */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Mobile bleibt strikt einspaltig */
@media (max-width: 599px) {
  .services-row,
  .team-grid,
  .team-group {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* =====================================================================
   NAV-DRAWER — Slide-In von rechts, Backdrop, Body-Lock
   Refinement über existierender .nav-menu.open-Logik (translateY → X).
   Greift nur unter 960px (Burger-Breakpoint).
   ===================================================================== */
@media (max-width: 959px) {
  /* Drawer von rechts, max 380px Breite, halbtransparenter Backdrop */
  .nav-menu,
  .primary-nav .nav-menu {
    width: min(86vw, 380px);
    left: auto;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease-out;
    box-shadow: -24px 0 48px rgba(20,24,16,0.18);
    padding-inline: 28px;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  }
  .nav-menu.open,
  .primary-nav .nav-menu.open {
    transform: translateX(0);
  }
  /* Backdrop via ::before auf body, getoggelt durch [data-drawer-open] */
  body[data-drawer-open]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20,24,16,0.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: gz-fade-in 0.2s ease-out forwards;
  }
  @keyframes gz-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Nav-Items: Touch-spacing + sichtbarer Hover */
  .nav-menu .nav-link,
  .primary-nav .nav-menu .nav-link {
    min-height: 52px;
    padding-block: 14px;
    border-bottom: 1px solid rgba(20,24,16,0.06);
  }
  .nav-menu .nav-link:last-child {
    border-bottom: none;
  }
}


/* =====================================================================
   FORMS — 16 px min auf Mobile (iOS-Zoom-Schutz), 100 % Breite, Labels oben
   ===================================================================== */
@media (max-width: 599px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    box-sizing: border-box;
  }
  textarea {
    min-height: 120px;
  }
  /* Labels über Inputs */
  form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
  }
  /* Submit-Buttons full-width */
  form button[type="submit"],
  form input[type="submit"],
  .form-actions .btn,
  .form-actions .pill {
    width: 100%;
    min-height: 52px;
  }
  /* Checkbox/Radio: Touch-Größe + Label-Spacing */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
    margin-right: 0.6rem;
    vertical-align: middle;
  }
}


/* =====================================================================
   TABELLEN — Overflow-Wrapper für Preis-/Material-Tabellen
   ===================================================================== */
.table-wrap,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (max-width: 899px) {
  /* Roh-Tables ohne Wrapper kriegen horizontalen Scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table.no-scroll {
    display: table;
    overflow-x: visible;
  }
}


/* =====================================================================
   FOOTER — Geo-Pills/Cluster brechen sauber um
   ===================================================================== */
@media (max-width: 899px) {
  .footer .geo-pills,
  .footer .pills-row,
  .footer-geo-cluster,
  .footer ul.geo-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 0.75rem;
  }
  .footer .geo-pills a,
  .footer-geo-cluster a {
    padding: 8px 14px;
    min-height: 36px;
    font-size: 0.85rem;
  }
}


/* =====================================================================
   STICKY MOBILE BOTTOM-CTA — „Anrufen | Termin"
   Nur unter 768 px sichtbar. Wird per JS in <body> appended.
   ===================================================================== */
.sticky-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;             /* default versteckt; Media-Query schaltet ein */
  background: var(--warm-white, #FBFAF6);
  border-top: 1px solid var(--border, #E4E1D9);
  box-shadow: 0 -8px 24px rgba(20,24,16,0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0);
  transition: transform 0.28s ease-out, opacity 0.2s ease-out;
  opacity: 1;
}
.sticky-mobile-cta[hidden],
.sticky-mobile-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.sticky-mobile-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sticky-mobile-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0.9rem 1rem;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sticky-mobile-cta__call {
  background: #fff;
  color: var(--sage-dark, #3F5234);
  border-right: 1px solid var(--border, #E4E1D9);
}
.sticky-mobile-cta__call:hover,
.sticky-mobile-cta__call:focus-visible {
  background: var(--sage-pale, #F0F3EB);
}
.sticky-mobile-cta__book {
  background: var(--sage, #5E7250);
  color: #fff;
}
.sticky-mobile-cta__book:hover,
.sticky-mobile-cta__book:focus-visible {
  background: var(--sage-dark, #3F5234);
}
.sticky-mobile-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Body bekommt unten Spacing damit sticky-CTA Content nicht verdeckt */
@media (max-width: 767px) {
  .sticky-mobile-cta {
    display: block;
  }
  body.has-sticky-cta {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  /* Footer-Inhalt darf nicht hinter Sticky-CTA klemmen */
  body.has-sticky-cta footer,
  body.has-sticky-cta .site-footer,
  body.has-sticky-cta .footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
/* Reduced-motion: keine Slide-Animation */
@media (prefers-reduced-motion: reduce) {
  .sticky-mobile-cta { transition: none; }
}


/* =====================================================================
   BURGER — finale Variante (löst Doppel-Def in style.css:195 + 6071 ab)
   ===================================================================== */
.burger {
  /* Display wird unter Burger-Breakpoint (max 960px) in style.css aktiviert */
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================================
   PRINT — Sticky-CTA + Mobile-Nav nie drucken
   ===================================================================== */
@media print {
  .sticky-mobile-cta,
  .nav-menu,
  .burger { display: none !important; }
}


/* =====================================================================
   2026-05-20 — Mobile-Hero-Polish + Sticky-CTA-Konsolidierung
   ===================================================================== */

/* Hero: Slide-Indikatoren + Pause/Play-Button überall ausblenden
   (Mobile + Desktop), damit nichts den Inhalt überlagert oder ablenkt. */
.hero-dots,
.hero-pause,
.hero-pause-btn { display: none !important; }

/* Hero-Section ausbalanciert — auf großen Screens nicht mehr 820px dominant,
   sondern proportional zur Viewport-Höhe. Padding harmonisiert, damit der
   Content nicht zu nah an der Header-Kante klebt. */
section.hero {
  min-height: min(78dvh, 720px) !important;
}
@supports not (height: 100dvh) {
  section.hero { min-height: min(78vh, 720px) !important; }
}
.hero-body {
  padding-block: clamp(96px, 13vh, 132px) clamp(56px, 8vh, 88px) !important;
}
.hero-tag {
  margin-bottom: clamp(18px, 2vw, 26px) !important;
}
/* Slide-Bild-Crop sauberer (war 50% 35% → manchmal Köpfe abgeschnitten) */
.hero-slide img,
.hero > .hero-slider .hero-slide img {
  object-position: 50% 30% !important;
}
/* Hero auf Mobile: voller Viewport, etwas weniger Padding */
@media (max-width: 768px) {
  section.hero {
    min-height: min(82dvh, 640px) !important;
  }
  .hero-body {
    padding-block: clamp(96px, 18vh, 132px) clamp(48px, 6vh, 72px) !important;
  }
  /* Beschreibung etwas kürzer schimmern, damit Mobile-Hero nicht überladen wirkt */
  .hero-desc {
    margin-bottom: clamp(20px, 4vw, 30px) !important;
  }
}

/* Sticky-Mobile-CTA: Anruf-Button entfernen, "Termin online" voll breit.
   Greift für beide Implementierungen (inline .sticky-mobile-cta + JS-injected
   .sticky-cta), damit konsistent über alle 97 Pages. */
.sticky-mobile-cta .smc-call,
.sticky-cta .sticky-cta__btn--secondary {
  display: none !important;
}
.sticky-mobile-cta .smc-book {
  flex: 1 1 100% !important;
  border-right: 0 !important;
  background: var(--sage, #5E7250) !important;
  color: #fff !important;
}
.sticky-cta .sticky-cta__btn--primary {
  flex: 1 1 100% !important;
  margin-right: 0 !important;
}

/* Online-Anmeldung Mobile: Hero kürzer, Welcome-Block kompakter,
   Pack-/Extras-/Cost-Sektionen einklappen → Formular ist nach 1× Scroll erreichbar. */
@media (max-width: 768px) {
  /* Page-Hero kompakter auf Mobile (war ~280-480px → jetzt ~180px) */
  body[class*=""] section.page-hero,
  .page-hero {
    min-height: clamp(160px, 28vh, 220px) !important;
  }
  .page-hero-body {
    padding-block: 0 24px !important;
  }
  /* Welcome-Block kompakter */
  .anm-welcome {
    margin: 0 auto 18px !important;
  }
  .anm-welcome h2 {
    font-size: 1.3rem !important;
    margin: 8px 0 12px !important;
  }
  .anm-welcome p {
    font-size: 0.95rem !important;
  }
  .anm-jump {
    margin-top: 14px !important;
    padding: 12px 22px !important;
  }
  /* Pack-Sektion (7 Bausteine) auf Mobile als Akkordeon — Details ausgeblendet,
     öffnet sich erst per "Details ansehen". Pragmatisch via max-height. */
  .anm-pack {
    margin: 0 auto 18px !important;
  }
  .anm-pack-head {
    margin-bottom: 16px !important;
  }
  .anm-pack-head h3 {
    font-size: 1.15rem !important;
  }
  .anm-pack-grid {
    gap: 8px !important;
  }
  .anm-pack-item {
    padding: 16px 14px !important;
  }
  /* Extras-Block kompakter */
  .anm-extras {
    padding: 20px 18px !important;
    margin-bottom: 18px !important;
  }
  /* Kostenbox kompakter */
  .anm-cost {
    padding: 22px 18px !important;
    margin-bottom: 18px !important;
    gap: 18px !important;
  }
  .anm-cost h3 {
    font-size: 1.2rem !important;
  }
  /* Formular-Headline näher rücken */
  .anm-form-head {
    margin: 0 auto 18px !important;
  }
  .anm-form-head h2 {
    font-size: 1.4rem !important;
  }
  /* Scroll-Margin damit Sticky-Header bei Anker-Jump nicht verdeckt */
  #anm-formular {
    scroll-margin-top: 70px !important;
  }
}

/* Body-Bottom-Padding für single-button Sticky-CTA reduzieren */
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
}


/* =====================================================================
   2026-05-20 — CTA-Box „Vereinbaren Sie Ihren Termin"
   Specificity-Fix: `.cta > .container p` (style.css:1136, dark grey)
   überschrieb das weiße `.cta-wrap p` auf dunklem Sage-Hintergrund.
   ===================================================================== */
.cta .cta-wrap p,
section.cta > .container .cta-wrap p {
  color: rgba(255, 255, 255, 0.9) !important;
}
.cta .cta-wrap h2,
section.cta > .container .cta-wrap h2 {
  color: #fff !important;
}
.cta .cta-wrap .sec-label,
section.cta > .container .cta-wrap .sec-label {
  color: var(--sand, #C4A97D) !important;
}


/* =====================================================================
   2026-05-20 — Schwerpunkte-Cards (.svc) stärkeres Overlay
   War 0.62/0.08/0 — Titel & Nummer kaum lesbar auf hellen Praxis-Bildern.
   Jetzt deutlich dunkler von unten, durchgehend leichter Schatten.
   WICHTIG: NICHT für .services-row--bare anwenden (kein Hintergrundbild,
   sondern cream Card mit dunklem Text — wäre Schwarz auf Schwarz).
   ===================================================================== */
.services-row:not(.services-row--bare) .svc .svc-content,
section.services:not(.services-row--bare-parent) .services-row:not(.services-row--bare) .svc .svc-content {
  background: linear-gradient(0deg,
    rgba(20, 24, 16, 0.85) 0%,
    rgba(20, 24, 16, 0.55) 35%,
    rgba(20, 24, 16, 0.25) 65%,
    rgba(20, 24, 16, 0.10) 100%
  ) !important;
}
.services-row:not(.services-row--bare) .svc:hover .svc-content {
  background: linear-gradient(0deg,
    rgba(20, 24, 16, 0.92) 0%,
    rgba(20, 24, 16, 0.65) 40%,
    rgba(20, 24, 16, 0.32) 70%,
    rgba(20, 24, 16, 0.16) 100%
  ) !important;
}
/* Bilder leicht dunkler — aber nur in nicht-bare Cards */
.services-row:not(.services-row--bare) .svc img { filter: brightness(0.92); }
.services-row:not(.services-row--bare) .svc:hover img { filter: brightness(0.82) !important; }

/* Bare-Variant: Hintergrund explizit zurücksetzen, falls vorher überschrieben.
   Sage-Sage-Background mit dunklem Text → unlesbar; muss cream + dunkler Text bleiben. */
.services-row--bare .svc {
  background: var(--cream, #F7F9F3) !important;
}
.services-row--bare .svc .svc-content {
  background: none !important;
}
.services-row--bare .svc-num { color: var(--sage, #5E7250) !important; }
.services-row--bare .svc h3 { color: var(--sage-dark, #3F5234) !important; }
.services-row--bare .svc-desc { color: var(--text-soft, #555) !important; }


/* =====================================================================
   2026-05-20 — Reveal-Animations Mobile-Fix
   Auf Mobile sind .rv-l/.rv-r horizontale 28px Translates problematisch:
   - Elemente werden links/rechts aus dem Viewport geschoben
   - Sieht aus wie Layout-Bruch (.about-info vs .about-gallery)
   - Auf schmalen Screens kein Platz für die Verschiebung
   Lösung: auf Mobile nur opacity-Fade, keine horizontale Bewegung.
   ===================================================================== */
@media (max-width: 900px) {
  .rv-l,
  .rv-r {
    transform: none !important;
  }
  .rv-l.vis,
  .rv-r.vis {
    transform: none !important;
  }
  /* Auch vertikale rv-Translate weniger aggressiv auf Mobile */
  .rv {
    transform: translateY(16px);
  }
  .rv.vis {
    transform: translateY(0);
  }
}

/* Defensive Anti-Horizontal-Scroll: html overflow-x: clip ist neu (≥Safari 16),
   ältere Mobile-Browser brauchen 'hidden' als Fallback. */
html, body {
  overflow-x: hidden;
}

/* About-Section Mobile + Tablet maximal robust:
   - Layout: Gallery oben, Info darunter, klare Trennung
   - Gallery selber: vertikal gestapelt (Flex-Column) — vermeidet alle
     Grid-Overflow-Probleme die sich auf Tablet ≤900px zeigen
   - Heights auf auto, damit Container Children korrekt enthalten
   - Photo-Boxen mit aspect-ratio + width 100% sicher proportional */
@media (max-width: 900px) {
  .about-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
  }
  .about-gallery {
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    order: -1;
    margin: 0 !important;
  }
  .about-info {
    width: 100% !important;
    margin: 0 !important;
  }
  .about-photo,
  .about-photo-main {
    width: 100% !important;
    height: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    aspect-ratio: 4/3 !important;
    max-height: 360px;
  }
  .about-photo-main {
    aspect-ratio: 16/10 !important;
    max-height: 420px;
  }
  .about-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}


/* =====================================================================
   2026-05-20 — SVG-Default-Size global
   SVGs ohne explizite width/height-Attribute werden in manchen Browsern
   100vw groß. Defensiv beschneiden, damit keine Pfeile/Icons den
   Bildschirm sprengen. Praxis-Notiz #122 (Implantologie).
   ===================================================================== */
svg:not([width]):not([height]):not(.brand-logo):not(.footer-logo) {
  max-width: 24px;
  max-height: 24px;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
/* Pfeile in pill-Buttons sollen 14-16 px sein */
.pill svg,
.hero-btn svg,
.nav-cta-btn svg,
.anm-download-btn svg,
a[class*="pill"] svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
/* Process-Cards Pfeile etc. nicht zu groß */
.page-process svg,
.process-step svg,
.feat-icon svg {
  max-width: 28px;
  max-height: 28px;
}

/* =====================================================================
   2026-05-20 — Mega-Dropdown Position Fix
   Auf 1280px viewport ragte das Dropdown 45px nach rechts raus, weil es
   ab nav-item position (x=565) mit width 760 nach rechts überlief.
   Fix: Dropdown zentriert relativ zur Page, max-breite begrenzt,
   nie über Viewport hinaus.
   ===================================================================== */
@media (min-width: 901px) {
  .nav-dropdown-mega,
  .nav-item.has-dropdown:nth-child(1) .nav-dropdown-mega {
    /* Mittig zur Page, statt ab nav-item Position */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-10px) !important;
    width: min(1100px, calc(100vw - 40px)) !important;
    max-width: min(1100px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
  }
  .nav-item.has-dropdown:nth-child(1):hover .nav-dropdown-mega,
  .nav-item.has-dropdown:nth-child(1).open .nav-dropdown-mega,
  .nav-item.has-dropdown:nth-child(1):focus-within .nav-dropdown-mega,
  .nav-item.has-dropdown:hover .nav-dropdown-mega,
  .nav-item.has-dropdown.open .nav-dropdown-mega,
  .nav-item.has-dropdown:focus-within .nav-dropdown-mega {
    transform: translateX(-50%) translateY(0) !important;
  }
  /* Arrow auch zentriert */
  .nav-item.has-dropdown:nth-child(1) .nav-dropdown-mega::before {
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
  /* Bei 901-1099: 3 Spalten reicht — Items fließen in 2 Reihen */
  .nav-dropdown-grid {
    grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .nav-dropdown-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mega-Dropdown auf kleinen Macs (≤1280) — sicherstellen dass alles passt:
   - max-height begrenzen, scrollbar erlauben falls items zu viele
   - alle Spalten gleich behandeln */
@media (min-width: 901px) {
  .nav-dropdown-mega {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }
  /* Mac 13" Retina hat oft 1280-1366px, 5-spaltig nicht möglich → 4 Spalten */
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .nav-dropdown-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
    gap: 12px !important;
  }
  .nav-dropdown-mega {
    padding: 24px 22px 18px !important;
  }
  .nav-dropdown-mega a {
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
  }
  .nav-dropdown-head {
    font-size: 0.66rem !important;
    padding: 0 12px 8px !important;
  }
}