/* ==========================================================================
   The Beauty Atelier – Mobile-Feinschliff der öffentlichen Website
   Greift nur unterhalb von 900 px (Tablet) bzw. 760 px (Handy).
   Desktop (≥ 900 px) bleibt unverändert. Die Seiten arbeiten mit Inline-Styles,
   deshalb überschreiben die Regeln gezielt per Klasse (m-*) mit !important.
   Haken-Klassen stehen im Markup: templates/site/*.twig, templates/dc/Site*.twig.
   ========================================================================== */

@media (max-width: 899px) {
  html { -webkit-tap-highlight-color: rgba(217, 203, 182, .35); }
  :focus-visible { outline: 2px solid #7a5f47; outline-offset: 3px; }

  /* Kopfzeile etwas schlanker */
  .m-head { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* Startseite: Bild oben frei, Text unten auf dem dunklen Verlauf */
  .m-hero { min-height: max(100svh, 640px) !important; }
  .m-hero-copy { align-self: end !important; }

  /* Schnellleiste unten (Termin · Anrufen · WhatsApp) */
  .m-actbar a:focus-visible { outline: 2px solid #d9cbb6; outline-offset: 2px; }

  /* Filter-Chips: eine Zeile, seitlich wischbar statt mehrzeilig gestapelt */
  .m-chips {
    flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 2px clamp(20px, 4vw, 48px) 4px;
    scroll-padding-inline: clamp(20px, 4vw, 48px);
  }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chips > *, .m-chips button { flex: none; white-space: nowrap; }

  /* Fußzeile: kompakt, Kontakt als große Tipp-Flächen */
  .m-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; }
  .m-f-brand { grid-column: 1 / -1; }
  .m-f-pages a { padding: 4px 0; }
  .m-f-hours { font-size: 14px; }
  .m-f-contact { grid-column: 1 / -1; order: 3; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
  .m-f-contact > span { flex-basis: 100%; }
  .m-f-contact a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1px solid rgba(247, 243, 237, .22); border-radius: 999px; text-decoration: none; font-size: 14px;
  }
  .m-f-legal { gap: 0 18px !important; }
  .m-f-legal a, .m-f-legal button { display: inline-flex; align-items: center; min-height: 40px; }
}

@media (max-width: 760px) {
  /* Einheitliche Überschriften-Skala: weniger Silbentrennung in großen Titeln */
  main h2[style*="font:400 clamp(4"], main h2[style*="font:400 clamp(5"] { font-size: clamp(40px, 11.6vw, 50px) !important; }
  main h2 { hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }

  /* ---------- Startseite: Hero ---------- */
  .m-hero-img { object-position: 30% 28% !important; }
  .m-hero-inner { padding-top: 112px !important; padding-bottom: 26px !important; gap: 22px !important; }
  .m-hero-copy { gap: 16px !important; }
  .m-hero-kicker { font-size: 11px !important; letter-spacing: .24em !important; }
  .m-hero-text { font-size: 16px !important; line-height: 1.6 !important; }
  .m-hero-ctas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-top: 4px; }
  .m-hero-ctas a { padding: 17px 8px !important; text-align: center; letter-spacing: .14em !important; }
  .m-hero-trust { padding-top: 16px !important; gap: 10px 14px !important; font-size: 12px !important; }
  .m-hide { display: none !important; }

  /* Vorteile 2 × 2 statt vier Zeilen untereinander */
  .m-usp { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; padding-top: 28px !important; }

  /* Wischbare Karten mit Einrasten (Scroll-Snap) */
  .m-snap {
    display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: 84%; gap: 12px !important; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 4px clamp(20px, 4vw, 48px) 10px !important;
    scroll-padding-inline: clamp(20px, 4vw, 48px);
  }
  .m-snap::-webkit-scrollbar { display: none; }
  .m-snap > * { scroll-snap-align: start; min-width: 0; }
  .m-snap-hint { display: flex !important; }

  /* Öffnungstage 4 + 3 statt 3 + 3 + 1 */
  .m-days { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .m-days > div { padding: 14px 4px !important; }

  /* Kontakt-Listen: Bezeichnung über dem Wert (keine zerrissenen Adressen/E-Mails) */
  .m-dl > div { grid-template-columns: 1fr !important; gap: 2px !important; padding: 14px 0 !important; }
  .m-dl dt { padding-top: 0 !important; font-size: 11px !important; }

  /* ---------- Dauerhafte Haarentfernung ---------- */
  .m-guar > svg { top: 22px !important; left: 22px !important; margin-top: 0 !important; }
  .m-guar > span[aria-hidden] { top: 70px !important; left: 58px !important; }
  .m-gallery { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .m-gallery img { border-radius: 14px !important; }

  /* ---------- Termin: Fortschrittsanzeige ohne zerrissene Wörter ---------- */
  .m-step { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .m-step > span:last-child { overflow-wrap: normal !important; font-size: 12px !important; }
}

/* Über mich: Schwerpunkte-Spalte nur im zweispaltigen Layout mitlaufen lassen */
@media (max-width: 999px) {
  .m-static { position: static !important; }
}

@media (max-width: 760px) {
  .m-snap-narrow { grid-auto-columns: 70%; }
  /* Über mich: Bildunterschrift unter das Portrait statt über den Jahres-Stempel */
  .m-cap { position: static !important; display: block; margin-top: 16px; background: none !important; color: #d9cbb6 !important; text-align: center; padding: 0 !important; }
  /* Knopfreihen: Hauptaktion volle Breite, Nebenaktionen nebeneinander */
  .m-cta-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .m-cta-row > a { justify-content: center; padding-left: 14px !important; padding-right: 14px !important; letter-spacing: .14em !important; }
  .m-cta-row > a:first-child { grid-column: 1 / -1; justify-content: space-between; padding-left: 24px !important; padding-right: 8px !important; }
  .m-cta-row > a:last-child:nth-child(2) { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .m-hero-ctas a { letter-spacing: .1em !important; font-size: 11px !important; }
}