/* Startseite: einmal wischen = nächster Bildschirm. Design bleibt unverändert. */
@media (prefers-reduced-motion: no-preference) {
  html.snap { scroll-snap-type: y mandatory; }
}
html.snap .pg { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; box-sizing: border-box; }
html.snap .pg > section { width: 100%; margin-top: 0 !important; margin-bottom: 0 !important; }
html.snap .pg > section:not(.svc-sec):not([id=preise]) { padding-top: clamp(20px, 4vh, 48px) !important; padding-bottom: clamp(20px, 4vh, 48px) !important; }
html.snap footer { scroll-snap-align: end; }

/* 1 · Start: Text + Bild + Kennzahlen auf einem Bildschirm */
html.snap .pg-hero { padding-top: 70px; padding-bottom: 16px; justify-content: space-evenly; }
html.snap .pg-hero > section:first-child { padding-top: 0 !important; }
html.snap .pg-hero .hx { margin-top: clamp(14px, 3vh, 40px) !important; }
@media (max-width: 760px) {
  html.snap .pg-hero h1 { font-size: clamp(36px, 10vw, 46px) !important; margin-top: 12px !important; }
  html.snap .pg-hero > section:first-child p { font-size: 16px !important; margin-top: 14px !important; }
  html.snap .pg-hero > section:first-child > div { margin-top: 20px !important; }
  html.snap .pg-hero .hx-fig { aspect-ratio: 16 / 10; }
  html.snap .pg-hero .hx-partners { display: none; }
}
@media (max-height: 720px) and (max-width: 760px) { html.snap .pg-hero .hx-stats { display: none; } }

/* 2 · Bild-Moment: ein Bildschirm statt langer Scroll-Animation */
html.snap .pg-reveal { padding-top: 0; }
html.snap .pg-reveal [data-reveal-wrap] { height: 100vh !important; height: 100svh !important; }
html.snap .pg-reveal [data-reveal-wrap] > div { height: 100% !important; position: relative !important; }

/* Behandlungen und Preise dürfen länger sein; sie beginnen trotzdem oben am Bildschirm */
html.snap .pg-svc, html.snap .pg-preise { justify-content: flex-start; }
html.snap .pg-svc > .svc-sec { flex: 1; border-radius: 0; max-width: none; }
@media (min-width: 761px) { html.snap .pg-svc > .svc-sec { border-radius: 40px; max-width: 1240px; margin: 0 auto !important; } }
html.snap .pg-preise { padding-top: 0; }
html.snap .pg-preise > #preise { flex: 1; display: flex; align-items: center; padding-top: 88px !important; }
html.snap .pg-preise > #preise > div { width: 100%; }
html.snap .pg-steps > section { border-radius: 0; }
@media (min-width: 761px) { html.snap .pg-steps > section { border-radius: 40px; } }

/* Über uns: Foto kleiner, damit Text und Partnerin auf den Bildschirm passen */
@media (max-width: 760px) {
  html.snap .pg-about > section:first-child > div:first-child { aspect-ratio: 16 / 11 !important; }
  html.snap .pg-about > section:first-child { gap: 18px !important; }
  html.snap .pg-about h2 { margin: 10px 0 8px !important; }
  html.snap .pg-about > section:nth-child(2) > div { grid-template-columns: 72px 1fr !important; padding: 16px !important; gap: 14px !important; }
  html.snap .pg-about > section:nth-child(2) > div > div:first-child { aspect-ratio: 1 !important; }
  html.snap .pg-about > section:nth-child(2) p { display: none; }
  html.snap .pg-kontakt > section { gap: 22px !important; }
}

/* Feinschliff Handy */
@media (max-width: 760px) {
  html.snap .pg-hero { padding-top: 64px; justify-content: center; gap: 0; }
  html.snap .pg-hero > section:first-child > span.eyebrow { font-size: 10.5px; }
  html.snap .pg-hero .hx-fig { aspect-ratio: 2 / 1; }
  html.snap .pg-hero .hx { margin-top: 18px !important; }
  html.snap .pg-hero .hx-stats { margin-top: 12px !important; }
  html.snap .pg-about > section:first-child > div:first-child { aspect-ratio: 16 / 9 !important; }
  html.snap .pg-about > section:first-child > div:last-child > div:first-of-type { font-size: 15.5px !important; }
}

/* Feinschliff Computer */
@media (min-width: 761px) {
  html.snap .pg-hero { padding-top: 72px; }
  html.snap .pg-hero > section:first-child h1 { font-size: clamp(44px, 5vw, 70px) !important; }
  html.snap .pg-hero > section:first-child > div { margin-top: 24px !important; }
  html.snap .pg-hero .hx-fig { aspect-ratio: auto; height: 34vh; }
  html.snap .pg-hero .hx-partners { margin-top: 14px !important; }
  html.snap .pg-about > section:first-child > div:first-child { aspect-ratio: auto !important; height: 66vh; }
}
@media (min-width: 761px) {
  html.snap .pg-hero > section:not(.svc-sec):not([id=preise]) { padding-top: 0 !important; padding-bottom: 0 !important; }
  html.snap .pg-hero > section:first-child p { margin-top: 16px !important; }
  html.snap .pg-hero .hx { margin-top: 28px !important; }
  html.snap .pg-hero .hx-fig { height: 25vh; }
  html.snap .pg-hero .hx-stats { margin-top: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html.snap .pg-about > section:first-child > div:first-child { height: 56vh; }
  html.snap .pg-about > section:nth-child(2) { padding-top: 0 !important; }
  html.snap .pg-about > section:nth-child(2) > div { grid-template-columns: 110px 1fr !important; padding: 20px 24px !important; gap: 24px !important; }
  html.snap .pg-about > section:nth-child(2) > div > div:first-child { aspect-ratio: 1 !important; }
}

/* Behandlungen auf dem Handy: Kategorien in einer Zeile zum Wischen, Ansicht als kleine Symbole */
@media (max-width: 760px) {
  html.snap .svc-sec .svc-bar { flex-direction: row !important; align-items: center !important; gap: 8px !important; margin: 18px 0 12px !important; padding: 0 0 0 16px !important; }
  html.snap .svc-sec .svc-tabs { flex: 1; min-width: 0; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; padding: 2px 0 !important; gap: 6px !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html.snap .svc-sec .svc-tabs::-webkit-scrollbar { display: none; }
  html.snap .svc-sec .cat-tab { flex-shrink: 0; font-size: 13px; padding: 7px 12px; }
  html.snap .svc-sec .cat-tab small { display: none; }
  html.snap .svc-sec .svc-view { align-self: center !important; flex-shrink: 0; margin-right: 16px; padding: 2px; }
  html.snap .svc-sec .svc-view button { height: 30px; width: 34px; padding: 0; justify-content: center; }
  html.snap .svc-sec .svc-view button span { display: none; }
  html.snap .svc-sec .svc-intro { font-size: 13.5px; margin: 0 0 12px !important; padding: 0 16px !important; text-align: left; }
  html.snap .svc-sec .svc-head .svc-title { margin-bottom: 8px !important; }
}

/* Mehr Halt in langen Bereichen (z. B. Behandlungen): Am Ende rastet die Seite ein.
   Erst ein deutlicher Wisch (über die halbe Bildschirmhöhe) führt zum nächsten Bereich. */
html.snap .pg { position: relative; }
html.snap .pg-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; scroll-snap-align: end; pointer-events: none; }

/* Behandlungen-Kasten mittig (gleicher Abstand links und rechts) */
@media (max-width: 760px) {
  html.snap .pg-svc > .svc-sec { width: auto !important; margin-left: 10px !important; margin-right: 10px !important; border-radius: 30px; }
  html.snap .svc-sec .svc-bar { padding-left: 14px !important; }
  html.snap .svc-sec .svc-view { margin-right: 14px !important; }
  html.snap .svc-sec .svc-intro { padding: 0 14px !important; }
}

/* ===== Version 4: jeder Bereich passt auf einen Handy-Bildschirm (ruhigeres Wischen) ===== */
html.snap body { overflow-x: clip; }
html.snap .pg { overflow-x: clip; }
@media (max-width: 760px) {
  /* Behandlungen: Kacheln seitlich wischen statt untereinander */
  html.snap .pg-svc > .svc-sec { box-sizing: border-box; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; margin: 0 auto !important; padding-top: 28px !important; padding-bottom: 22px !important; }
  html.snap .svc-sec .svc-title { font-size: 30px !important; }
  html.snap .svc-sec .svc-lead { font-size: 14.5px !important; margin-top: 6px !important; }
  html.snap .svc-sec .svc-wrap[data-mode="grid"] .svc-rail { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 10px !important; padding: 0 14px 4px !important; scroll-padding: 0 14px; scrollbar-width: none; }
  html.snap .svc-sec .svc-rail::-webkit-scrollbar { display: none; }
  html.snap .svc-sec .svc-rail .svc-card { flex: 0 0 64% !important; width: 64% !important; max-width: 260px !important; min-width: 0 !important; scroll-snap-align: start; }
  html.snap .svc-sec .svc-wrap .svc-card[data-extra]:not([hidden]) { display: flex !important; }
  html.snap .svc-sec .svc-more { display: none !important; }
  html.snap .svc-sec .svc-list { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px; }
  /* Angebote kompakt */
  html.snap .svc-sec .svc-offers { margin: 14px 14px 0 !important; padding: 10px !important; }
  html.snap .svc-sec .svo-h { margin-bottom: 8px; font-size: 11px; }
  html.snap .svc-sec .svo { grid-template-columns: 56px minmax(0,1fr) 30px; padding: 6px; gap: 10px; }
  html.snap .svc-sec .svo-img { width: 56px; height: 56px; }
  html.snap .svc-sec .svo-t i { display: none; }
  html.snap .svc-sec .svc-foot { margin-top: 12px !important; }
  /* Fragen: nur eine offen, Stimmen kompakt */
  html.snap .pg-faq .faq-item summary { padding: 16px 0 !important; font-size: 16px !important; }
  /* Kontakt: Karte flacher */
  html.snap .pg-kontakt .mapc { height: 120px !important; aspect-ratio: auto !important; }
  html.snap .pg-kontakt > section { padding-bottom: 16px !important; }
}
@media (max-width: 760px) {
  html.snap .svc-sec .svc-intro, html.snap .svc-sec .svc-foot { display: none !important; }
  html.snap .svc-sec .svc-head .eyebrow { display: none; }
  html.snap .pg-about > section:first-child > div:last-child > div:first-of-type { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  html.snap .pg-faq #stimmen, html.snap .pg-faq > section:first-child:not(#faq) { padding-bottom: 0 !important; }
  html.snap .pg-faq .faq-item summary { padding: 13px 0 !important; font-size: 15.5px !important; }
  html.snap .pg-kontakt > section > div:first-child > div > div { padding: 7px 0 !important; font-size: 14px; }
  html.snap .pg-kontakt > section > div:first-child > h2 { margin: 8px 0 10px !important; font-size: 26px !important; }
  html.snap .pg-kontakt > section > div:first-child > p { margin-top: 14px !important; font-size: 14.5px !important; }
  html.snap .pg-kontakt .card > p:first-of-type { display: none; }
  html.snap .pg-kontakt .card { padding: 20px !important; }
  html.snap .pg-kontakt .card h3 { margin: 8px 0 0 !important; font-size: 22px !important; }
  html.snap .pg-kontakt .card > div { margin-top: 14px !important; }
  html.snap .pg-kontakt .card > p:last-child { margin-top: 12px !important; }
}
@media (max-width: 760px) {
  html.snap .pg { padding-top: 62px; }
  html.snap .pg > section:not(.svc-sec):not([id=preise]) { padding-top: 12px !important; padding-bottom: 12px !important; }
  html.snap .pg-preise > #preise { padding-top: 76px !important; padding-bottom: 24px !important; }
  html.snap #preise h2 { margin: 10px 0 20px !important; }
  html.snap .pg-about > section:first-child > div:last-child > div:last-child { margin-top: 14px !important; gap: 6px !important; }
  html.snap .pg-about > section:first-child > div:last-child > div:last-child > span { padding: 6px 12px !important; font-size: 11.5px !important; }
}
@media (max-width: 760px) {
  html.snap .pg-reveal, html.snap .pg-preise { padding-top: 0 !important; }
  html.snap .pg-kontakt .mapc { height: 100px !important; margin-top: 14px !important; }
}

/* Über uns (Handy): Bereich beginnt oben, Foto füllt den freien Platz statt leerem Streifen */
@media (max-width: 760px) {
  html.snap .pg-about { justify-content: flex-start; padding-top: 64px; }
  html.snap .pg-about > section:first-child { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 12px !important; padding-bottom: 14px !important; }
  html.snap .pg-about > section:first-child > div:first-child { flex: 1 1 auto; aspect-ratio: auto !important; height: auto !important; min-height: 34svh; max-height: 62svh; }
  html.snap .pg-about > section:first-child > div:first-child img { object-position: 50% 22%; }
  html.snap .pg-about > section:nth-child(2) { flex: none; padding-bottom: 14px !important; }
}
/* Über uns (Handy): Jolanta + Marooo immer zusammen auf einem Bildschirm – das Foto passt sich dem Restplatz an */
@media (max-width: 760px) {
  html.snap .pg-about { height: 100vh; height: 100svh; min-height: 0 !important; overflow: hidden; }
  html.snap .pg-about > section:first-child { min-height: 0; }
  html.snap .pg-about > section:first-child > div:first-child { flex: 1 1 0; min-height: 16svh; max-height: 56svh; }
  html.snap .pg-about > section:first-child > div:last-child { flex: none; }
  html.snap .pg-about > section:first-child > div:last-child > div:first-of-type { -webkit-line-clamp: 5 !important; }
  html.snap .pg-about > section:nth-child(2) { padding-top: 0 !important; padding-bottom: 12px !important; }
}
@media (max-width: 760px) and (max-height: 760px) {
  html.snap .pg-about > section:first-child > div:last-child > div:first-of-type { -webkit-line-clamp: 3 !important; font-size: 14.5px !important; }
  html.snap .pg-about h2 { font-size: 28px !important; }
}
/* Über uns (Handy): Ausschnitt tiefer (weniger über dem Kopf, mehr unten), Abstände unter dem Foto enger */
@media (max-width: 760px) {
  html.snap .pg-about > section:first-child { gap: 10px !important; }
  html.snap .pg-about > section:first-child > div:first-child img { object-position: 50% 78% !important; }
  html.snap .pg-about > section:first-child > div:last-child > .eyebrow { display: block; margin: 2px 0 0 !important; line-height: 1.2; }
  html.snap .pg-about h2 { margin: 2px 0 6px !important; line-height: 1.05; }
}
/* Bild-Moment (Handy): mittig im sichtbaren Bereich unter der Kopfzeile, nur schmaler Rand */
@media (max-width: 760px) {
  html.snap .pg-reveal [data-reveal-wrap] > div { padding-top: 56px; box-sizing: border-box; }
  html.snap .pg-reveal [data-reveal-img] { width: calc(100% - 16px) !important; height: calc(100svh - 56px - 16px) !important; border-radius: 22px !important; transform: none !important; }
  html.snap .pg-reveal [data-reveal-img] img { object-position: 50% 45%; }
}
/* Start (Handy): Hersteller & Vertrauenspartner wieder sichtbar – kompakt unter den Kennzahlen */
@media (max-width: 760px) {
  html.snap .pg-hero .hx-partners { display: block !important; margin-top: clamp(14px, 3vh, 28px) !important; }
  html.snap .pg-hero .hx-partners p { margin: 0 0 10px; font-size: 12px; }
  html.snap .pg-hero .hx-prow { gap: 8px 22px; }
  html.snap .pg-hero .hx { padding-bottom: 0 !important; }
}
@media (max-width: 760px) and (max-height: 780px) {
  html.snap .pg-hero .hx-partners p { display: none; }
  html.snap .pg-hero .hx-partners { margin-top: 12px !important; }
}
/* Bild-Moment (Handy): randlos – Bild füllt den ganzen Bereich unter der Kopfzeile */
@media (max-width: 760px) {
  html.snap .pg-reveal [data-reveal-img] { width: 100% !important; height: calc(100svh - 56px) !important; border-radius: 0 !important; box-shadow: none !important; }
  html.snap .pg-reveal [data-reveal-wrap] > div { padding-top: 56px; align-items: flex-end !important; }
}
/* Über uns: Kopf vollständig zeigen (wenig Luft darüber); Partnerin-Foto größer */
@media (max-width: 760px) {
  html.snap .pg-about > section:first-child > div:first-child img { object-position: 50% 35% !important; }
  html.snap .pg-about > section:nth-child(2) > div { grid-template-columns: 96px 1fr !important; gap: 16px !important; }
}
@media (min-width: 761px) {
  html.snap .pg-about > section:nth-child(2) > div { grid-template-columns: 140px 1fr !important; }
}
/* Über uns (Handy): näher an Jolanta heran – Theke/Schild unten weglassen */
@media (max-width: 760px) {
  html.snap .pg-about > section:first-child > div:first-child { overflow: hidden; }
  html.snap .pg-about > section:first-child > div:first-child img { object-position: 50% 30% !important; transform: scale(1.32); transform-origin: 30% 34%; }
}
@media (max-width: 760px) and (min-height: 880px) {
  html.snap .pg-about > section:first-child > div:first-child img { transform: scale(1.5); transform-origin: 30% 30%; }
}