/* ==========================================================================
   Frontend (Themes) – Mobile-Optimierungen (Last Cascade Layer)
   --------------------------------------------------------------------------
   Wird NACH theme.css geladen. Übersteuert hartkodierte Werte aus den Themes,
   die auf Mobilgeräten zu Overflow oder unleserlichen Layouts führen.

   Greift theme-übergreifend (medical, beauty, restaurant, …) — Themes können
   eigene zusätzliche Mobile-Regeln natürlich weiter haben, die werden hier
   nicht überschrieben (mobile-first-Ergänzungen).
   ========================================================================== */

/* ----- 1) Globale Hygiene ------------------------------------------------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, iframe, embed, object, picture {
    max-width: 100%;
    height: auto;
  }
  /* Tabellen niemals ohne Scroll-Container — sonst sprengen sie das Layout */
  main table, article table, .content table, .page-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* iframes (Karten, YouTube) immer responsive */
  iframe { max-width: 100%; }
}

/* ----- 2) Header / Top-Bar (hamburger) ------------------------------------ */
@media (max-width: 900px) {
  .site-header,
  header.site-header,
  header[role="banner"] {
    /* Header-Inhalt darf nie überlaufen */
    overflow: visible;
  }
  .site-header .header-inner,
  .site-header .container,
  header .header-inner,
  header .container {
    flex-wrap: nowrap;
    gap: .5rem;
    min-width: 0;
  }
  .logo,
  .site-logo,
  .brand,
  .site-header .logo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw; /* Logo-Text quetscht den Hamburger nicht raus */
  }
  /* Hamburger soll garantiert sichtbar sein */
  .nav-toggle,
  .menu-toggle,
  .hamburger,
  [data-mobile-menu-toggle] {
    display: flex !important;
    z-index: 1000;
  }
  /* Mobile-Navigations-Drawer: höher z-index, scrollbar */
  .site-nav.is-open,
  .nav-list.is-open,
  nav.is-open,
  [data-mobile-menu].is-open {
    z-index: 999;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Submenüs auf Mobile vollwertig öffnen, nicht als 220px-Popup */
  .nav-list ul,
  .submenu,
  .has-submenu > ul {
    min-width: 0 !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
  }
  /* Phone/Lang-Switcher in Header dürfen umbrechen */
  .header-actions { flex-wrap: wrap; gap: .35rem; }
}

/* ----- 2b) Header auf Smartphone: Module bleiben sichtbar, wrappen ------ */
/* Module-Outputs (Öffnungszeiten-Status, Contact-CTA, Reviews, Quicksearch)
   sollen NICHT versteckt werden — der User möchte sie sehen. Bei Platzmangel
   wrappt der Header in eine zweite Zeile. Header wird dadurch ggf. höher,
   ist aber komplett sichtbar. */
@media (max-width: 720px) {
  /* Header-Höhe darf wachsen — die fixe header-h in den Themes sprengt sonst */
  .site-header,
  header.site-header,
  header[role="banner"] {
    height: auto !important;
    min-height: var(--header-h, 64px);
  }
  /* Header-Inner darf umbrechen: Logo+Burger Zeile 1, Module Zeile 2 */
  .site-header .header-inner,
  header .header-inner {
    flex-wrap: wrap !important;
    align-items: center;
    padding-block: .5rem;
    row-gap: .55rem;
  }
  /* Header-Actions wrappen + rechtsbündig auf erster Zeile, dann nächste Zeile */
  .site-header .header-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: .35rem .5rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Module-Inhalte schrumpfen, statt verschwinden — bleiben aber lesbar */
  .site-header .hours-badge {
    font-size: .72rem !important;
    padding: .25rem .5rem !important;
    max-width: none !important;
  }
  .site-header .hours-badge__text {
    display: inline !important; /* Text bleibt sichtbar (war vorher per Modul-CSS auf <320px versteckt) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
  .site-header .module-cta,
  .site-header .module-cta--contact {
    font-size: .8rem !important;
    padding: .35rem .8rem !important;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header .reviews-badge {
    font-size: .72rem !important;
    padding: .2rem .5rem !important;
  }
  .site-header .qs-box,
  .site-header .quicksearch-box {
    max-width: 11rem !important;
  }
  .site-header .header-phone,
  .site-header .header-phone-link {
    /* Telefon: nur Icon zeigen, Text weg, Knopf bleibt klickbar */
    padding: .25rem .35rem;
    /* Beauty hat den Telefonnummer-Text direkt im <a> (kein Wrapper-Span),
       darum reicht `display:none` auf Spans nicht. `font-size:0` versteckt
       Textknoten und Spans gleichermaßen; SVGs nutzen eigene Maße und
       bleiben dadurch sichtbar. */
    font-size: 0;
    line-height: 1;
  }
  .site-header .header-phone span,
  .site-header .header-phone-link span {
    display: none;
  }
  .site-header .header-phone svg,
  .site-header .header-phone-link svg {
    /* SVG explizit groß genug halten — `font-size:0` der Eltern kann sich
       sonst über `em` durchschlagen, falls das Theme das benutzt. */
    width: 20px;
    height: 20px;
    display: inline-block;
  }

  /* Dark-Mode-Toggle kompakt halten */
  .site-header .dm-toggle--circle { width: 32px; height: 32px; }
  .site-header .dm-toggle--slider { width: 48px; height: 24px; }
  .site-header .dm-toggle--slider .dm-slider__knob { width: 18px; height: 18px; }

  /* Logo darf den Platz der ersten Zeile einnehmen */
  .site-header .logo, .site-header .site-logo {
    max-width: calc(100vw - 100px);
    flex: 0 1 auto;
  }
  /* Burger-Toggle bleibt rechts auf erster Zeile sichtbar */
  .site-header .nav-toggle,
  .site-header .menu-toggle,
  .site-header .hamburger {
    flex-shrink: 0;
    margin-left: auto;
  }
}
@media (max-width: 380px) {
  /* Auf ganz kleinen Screens: Lang-Switcher kann zu eng werden, dann wrappen */
  .site-header .lang-switcher .lang-text,
  .site-header .language-switcher .lang-text {
    display: none;
  }
  .site-header .logo, .site-header .site-logo {
    max-width: calc(100vw - 80px);
  }
}

/* Backdrop hinter offenem Mobile-Menü */
@media (max-width: 900px) {
  body:has(.site-nav.is-open)::before,
  body:has(nav.is-open)::before,
  body:has([data-mobile-menu].is-open)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 998;
    pointer-events: none;
  }
}

/* ----- 3) Hero-Bereich ---------------------------------------------------- */
@media (max-width: 900px) {
  .hero,
  .hero-section,
  section.hero {
    min-height: auto;
    padding: 2rem 1rem;
  }
  .hero h1,
  .hero-title,
  .hero .title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.15;
    word-wrap: break-word;
  }
  .hero p,
  .hero-subtitle,
  .hero .subtitle {
    font-size: clamp(.95rem, 3.4vw, 1.1rem);
  }
  .hero-actions,
  .hero .actions {
    flex-wrap: wrap;
    gap: .6rem;
  }
  .hero-actions .btn,
  .hero .actions .btn {
    width: auto;
    max-width: 100%;
  }
}

/* ----- 4) Sektionen / Container Padding ---------------------------------- */
@media (max-width: 700px) {
  section,
  .section,
  .container,
  .content,
  .page-content,
  main > * {
    padding-left: max(env(safe-area-inset-left, 0px), 1rem);
    padding-right: max(env(safe-area-inset-right, 0px), 1rem);
  }
  /* Multi-Column Grids: 1-spaltig auf Phone */
  .row,
  .grid,
  .columns,
  .features,
  .services,
  .features-grid,
  .grid-cards,
  .grid-3,
  .grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Tablet-Variante: 2-spaltig erlauben (Override pro Theme möglich) */
}
@media (min-width: 540px) and (max-width: 900px) {
  .grid-3,
  .grid-4,
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ----- 5) Buttons / CTAs ------------------------------------------------- */
@media (max-width: 640px) {
  .btn,
  .button,
  a.button,
  .content-btn,
  .fw-btn {
    /* Touch-Target mind. 44px hoch */
    min-height: 44px;
    padding: .7rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    word-wrap: break-word;
  }
  /* Button-Reihen niemals horizontal überlaufen */
  .btn-row,
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ----- 6) Footer --------------------------------------------------------- */
@media (max-width: 700px) {
  footer.site-footer,
  .site-footer,
  footer .footer-inner,
  footer .container {
    text-align: center;
  }
  .site-footer .columns,
  .footer-grid,
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .legal-links,
  .footer-links {
    flex-wrap: wrap;
    gap: .35rem .85rem;
    justify-content: center;
  }
}

/* ----- 7) Forms (Frontend-Kontakt usw.) ---------------------------------- */
@media (max-width: 640px) {
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="search"],
  form input[type="password"],
  form textarea,
  form select {
    font-size: 16px;        /* iOS-Zoom-Schutz */
    padding: .75rem .85rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  form .form-row,
  form .row {
    display: block;
    margin-bottom: .85rem;
  }
  form button[type="submit"] {
    width: 100%;
  }
}

/* ----- 8) Cards / Listen-Items ------------------------------------------- */
@media (max-width: 640px) {
  .card,
  article.card,
  .post-card,
  .news-card,
  .event-card {
    padding: 1rem;
    border-radius: 8px;
  }
  .card img,
  .post-card img,
  .news-card img {
    width: 100%;
    height: auto;
  }
}

/* ----- 9) Tabellen "Cards" Fallback bei sehr kleinen Screens -------------- */
@media (max-width: 480px) {
  /* Falls Theme `data-table-cards` Markup nutzt */
  table[data-mobile="cards"] thead { display: none; }
  table[data-mobile="cards"] tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: .75rem;
  }
  table[data-mobile="cards"] tbody td {
    display: flex;
    justify-content: space-between;
    border: none;
    padding: .35rem 0;
  }
  table[data-mobile="cards"] tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 1rem;
    color: #5a6478;
  }
}

/* ----- 10) Bilder/Galerien ---------------------------------------------- */
@media (max-width: 640px) {
  .gallery,
  .image-grid,
  .photos {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem;
  }
}
@media (max-width: 380px) {
  .gallery,
  .image-grid,
  .photos {
    grid-template-columns: 1fr !important;
  }
}

/* ----- 10b) Inline-Bilder im Content runterskalieren -------------------- */
/* Vom Quill-Editor stammende Bilder (`.fw-image`) und generische Content-
   Bilder werden auf Mobilgeräten oft viel zu groß angezeigt — ein einzelnes
   Bild füllt den ganzen Viewport. Wir kappen Breite + Höhe, damit Text
   und Bild nebeneinander Sinn ergeben. */
@media (max-width: 640px) {
  .content img,
  .prose img,
  article img,
  main img,
  .fw-image img {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    object-fit: contain;
  }
  /* Quill `.fw-image` mit Float darf auf Mobile nicht mehr floaten — sonst
     stehen 2 Buchstaben pro Zeile rechts/links neben dem Bild. */
  .fw-image[data-align="left"],
  .fw-image[data-align="right"],
  .fw-image.fw-image--left,
  .fw-image.fw-image--right {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100%;
  }
  .fw-image img { width: 100%; }
}

/* ----- 10c) Home-Templates: Bild-Grids halten Desktop-Spaltenanzahl ----- */
/* Wir behalten auf Mobile die GLEICHE Spaltenanzahl wie auf Desktop, schrumpfen
   aber Bilder, Padding und Schrift drastisch — die "Mini-Theme"-Optik bleibt
   erhalten statt jedes Bild auf eine eigene Zeile zu stapeln. Text+Bild-Splits
   (`.hero-stage`, `.hero-split`, `.about-grid`, `.notebook-grid`,
   `.editorial-grid`) wurden BEWUSST nicht hier gelistet — die müssen auf
   Mobile stapeln, weil Lesetext sonst zerlegt wird. */

/* Höhere Specificity (mit Theme-Slugs) NICHT nötig: alle Theme-Fallbacks
   verwenden bei kleinen Breakpoints `1fr` — wir kontern mit !important. */
@media (max-width: 640px) {
  /* medical */
  .feature-grid.feature-count-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .feature-grid.feature-count-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .feature-grid.feature-count-4 { grid-template-columns: repeat(4, 1fr) !important; }
  /* feature-grid-2x2: bleibt 2x2 */
  .feature-grid-2x2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pure Bild-Grids — Desktop-Anzahl behalten */
  .moments-grid,
  .gallery-grid,
  .scrapbook-grid,
  .hero-circle-photos,
  .trust-grid,
  .features-row,
  .stats-row,
  .hero-stats,
  .hero-words,
  .fw-gallery.layout-grid2 { grid-template-columns: repeat(2, 1fr) !important; }
  .fw-gallery.layout-grid3 { grid-template-columns: repeat(3, 1fr) !important; }
  .fw-gallery.layout-grid4 { grid-template-columns: repeat(4, 1fr) !important; }

  /* Card-Grids: Desktop-Anzahl behalten, nur enger */
  .products-grid,
  .courses-grid,
  .services-grid,
  .locations-grid,
  .capabilities-grid,
  .process-grid,
  .value-grid,
  .process-list,
  .trades-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  }
  .services-grid,
  .locations-grid,
  .capabilities-grid,
  .process-grid,
  .value-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .products-grid,
  .courses-grid,
  .trades-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .process-list { grid-template-columns: repeat(4, 1fr) !important; }

  /* Universell: Mindest-Größe der Grid-Items aufheben (wichtig — Theme-CSS
     setzt oft `min-width: 220px` o.ä., was den Grid sprengt) */
  .feature-grid > *,
  .feature-grid-2x2 > *,
  .moments-grid > *,
  .gallery-grid > *,
  .scrapbook-grid > *,
  .hero-circle-photos > *,
  .trust-grid > *,
  .products-grid > *,
  .courses-grid > *,
  .services-grid > *,
  .locations-grid > *,
  .capabilities-grid > *,
  .process-grid > *,
  .value-grid > *,
  .process-list > *,
  .trades-grid > *,
  .features-row > *,
  .stats-row > *,
  .hero-stats > *,
  .fw-gallery > * {
    min-width: 0 !important;
  }

  /* Gaps drastisch reduzieren */
  .feature-grid,
  .feature-grid-2x2,
  .moments-grid,
  .gallery-grid,
  .scrapbook-grid,
  .hero-circle-photos,
  .trust-grid,
  .products-grid,
  .courses-grid,
  .services-grid,
  .locations-grid,
  .capabilities-grid,
  .process-grid,
  .value-grid,
  .process-list,
  .trades-grid,
  .features-row,
  .stats-row,
  .hero-stats,
  .fw-gallery {
    gap: .5rem !important;
  }

  /* Bilder fest auf 4:3 + cover (statt natürlich groß zu sein) */
  .feature-grid .feature-img,
  .feature-grid-2x2 .feature-img,
  .moments-grid img,
  .gallery-grid img,
  .scrapbook-grid img,
  .hero-circle-photos img,
  .products-grid img,
  .courses-grid img,
  .trades-grid img,
  .fw-gallery img,
  .features-row img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Card-Texte kompakt — Schrift skaliert mit Viewport */
  .feature-label,
  .feature-card .feature-label,
  .feature-card-lg .feature-label,
  .moments-grid h3,
  .gallery-grid h3,
  .products-grid h3,
  .scrapbook-grid h3,
  .trust-grid h3,
  .trust-grid h4,
  .services-grid h3,
  .locations-grid h3,
  .courses-grid h3,
  .trades-grid h3,
  .process-grid h3,
  .value-grid h3,
  .capabilities-grid h3,
  .process-list h4 {
    padding: .35rem .45rem !important;
    font-size: clamp(.65rem, 2.6vw, .9rem) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .moments-grid p,
  .products-grid p,
  .services-grid p,
  .courses-grid p,
  .trades-grid p,
  .scrapbook-grid p,
  .capabilities-grid p {
    font-size: clamp(.6rem, 2.3vw, .82rem) !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
  }

  /* Pets-Hero-Kreise: kleinere Kreise statt umbrechen */
  .hero-circle-photos > *,
  .hero-circle-photos img {
    width: 100% !important;
    height: auto !important;
  }
  .hero-circle-photos {
    padding: 0 !important;
  }

  /* Hero-Sektionen kompakter — Bilder kappen, sonst füllt Hero den ganzen Screen */
  .hero,
  .hero-section,
  .hero-image,
  .hero--workshop,
  .hero-visual,
  .hero-stage,
  .hero-split {
    min-height: 0 !important;
    padding-block: 1.5rem !important;
  }
  .hero-visual img,
  .hero-stage img,
  .hero-split img,
  .hero-visual__frame img {
    max-height: 36vh;
    width: 100%;
    object-fit: cover;
  }
  .hero h1, .hero-mega, .hero-text h1 {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
  }

  /* Card-Padding generell minimieren auf Mobile */
  .feature-card,
  .feature-card-lg,
  .product-card,
  .service-card,
  .location-card {
    padding: .5rem !important;
  }
}

/* Sehr enge Phones (≤360px): noch kleinere Schrift, Captions wegblenden falls
   alles zu eng wird, aber Spalten-Struktur bleibt erhalten. */
@media (max-width: 360px) {
  .feature-grid.feature-count-3,
  .feature-grid.feature-count-4,
  .fw-gallery.layout-grid3,
  .fw-gallery.layout-grid4,
  .process-list {
    gap: .3rem !important;
  }
  .feature-label,
  .feature-card .feature-label,
  .moments-grid h3,
  .gallery-grid h3,
  .scrapbook-grid h3,
  .products-grid h3,
  .services-grid h3,
  .courses-grid h3 {
    font-size: clamp(.6rem, 2.3vw, .8rem) !important;
    padding: .25rem .35rem !important;
  }
}

/* ----- 11) Typografie aufs Mobile justieren ----------------------------- */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.2; }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.25; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }
  p, li { font-size: 1rem; line-height: 1.55; }
  blockquote { padding: 1rem; font-size: .98rem; }
  pre, code { font-size: .85rem; word-wrap: break-word; white-space: pre-wrap; }
}

/* ----- 12) Cookie-Banner + Legal-Footer mobile-friendly ------------------ */
@media (max-width: 640px) {
  .cookie-banner,
  .cookie-consent,
  #cookie-banner {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .cookie-banner .actions,
  .cookie-consent .actions {
    flex-direction: column;
    gap: .5rem;
  }
  .cookie-banner .actions button,
  .cookie-consent .actions button {
    width: 100%;
  }
}