/* ==========================================================================
   Hairfree by Anna – Öffentliche Website
   Mobile first: Basis-Styles gelten fürs Handy, Breakpoints erweitern.
   Formensprache: weich und organisch – Abschnitte gehen in sanften Wellen
   ineinander über, feine Goldlinien sind geschwungen statt gerade.
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Desktop: warmes Licht oben rechts auf der ganzen Seite – scheint auch durch die Kopfzeile, ohne Kante.
   (Am Handy nicht: dort läuft das Foto oben in reines Creme aus.) */
@media (min-width: 900px) {
  body { background: radial-gradient(820px 600px at calc(100% - 120px) 220px, rgb(224 195 142 / 0.26), transparent 72%) no-repeat, var(--c-bg); }
}

.section { position: relative; padding-block: clamp(3rem, 9vw, 8.5rem); }
.section--alt { background: var(--c-bg-alt); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: clamp(0.75rem, 3vw, 2rem); }

/* Grid-Kinder dürfen schrumpfen (verhindert horizontales Scrollen) */
.hero__grid > *, .t-hero__grid > *, .about__grid > *, .contact__grid > *, .t-intro > *, .price-layout > *,
.booking__grid > *, .offer__inner > *, .teaser-grid > *, .ov-card > * { min-width: 0; }

/* ---------- Wellen-Übergänge zwischen den Abschnitten ----------
   Jeder Abschnitt mit anderer Farbe als sein Vorgänger zeichnet oben eine sanfte Welle in seiner
   eigenen Farbe, die in den (leeren) Innenabstand darüber hineinragt. So wird aus jeder harten
   Kante ein weicher Schwung – egal welche Farben aneinanderstoßen. */
:root {
  --wave-h: clamp(18px, 4.6vw, 58px);
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V52C170 22 360 4 590 12c250 9 400 64 640 68 90 1 160-10 210-24v44Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V20c210 46 470 78 760 62 270-15 450-70 680-58v76Z'/%3E%3C/svg%3E");
}
.section--alt { --sec-bg: var(--c-bg-alt); --sec-wave: var(--wave-a); }
.offer { --sec-bg: var(--c-dark); --sec-wave: var(--wave-b); }
.marquee, .site-footer { --sec-bg: var(--c-dark-2); --sec-wave: var(--wave-b); }
.section--alt + .section:not(.section--alt):not(.offer),
.offer + .section:not(.section--alt):not(.offer) { --sec-bg: var(--c-bg); --sec-wave: var(--wave-b); }
.section--alt::before,
.offer::before,
.marquee::before,
.site-footer::before,
.section--alt + .section:not(.section--alt):not(.offer)::before,
.offer + .section:not(.section--alt):not(.offer)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--wave-h);
  background: var(--sec-bg);
  pointer-events: none;
  -webkit-mask: var(--sec-wave, var(--wave-a)) center bottom / 100% 100% no-repeat;
  mask: var(--sec-wave, var(--wave-a)) center bottom / 100% 100% no-repeat;
}
/* jede zweite helle Fläche schwingt spiegelverkehrt – die Seite wirkt so nicht schematisch */
.section--alt:nth-of-type(4n + 1)::before { transform: scaleX(-1); }

.section-head { max-width: 680px; margin-bottom: clamp(1.5rem, 5vw, 4rem); }
.section-head h2 { margin-block: 10px 12px; }
.section-head .lead { max-width: 600px; }
.section-head .link { margin-top: 20px; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .ornament { margin: 20px auto 0; }
/* Dachzeile mit kleinem goldenen Schwung davor (zentriert: beidseitig, gespiegelt) */
.eyebrow::before,
.section-head--center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 8px;
  margin-right: 10px;
  vertical-align: 0.08em;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--squiggle) center / 100% 100% no-repeat;
  mask: var(--squiggle) center / 100% 100% no-repeat;
}
.section-head--center .eyebrow::after { margin: 0 0 0 10px; transform: scaleX(-1); }
/* sehr schmale Handys: Dachzeilen etwas enger, damit sie in einer Zeile bleiben */
@media (max-width: 359px) {
  .eyebrow { font-size: 0.65rem; letter-spacing: 0.13em; }
  .eyebrow::before, .section-head--center .eyebrow::after { width: 20px; margin-right: 7px; }
  .section-head--center .eyebrow::after { margin: 0 0 0 7px; }
}
.section-head--compact { margin-bottom: 20px; }
.section-head--compact h2 { margin-bottom: 0; }
@media (min-width: 700px) {
  .section-head h2 { margin-block: 14px 16px; }
  .section-head .link { margin-top: 26px; }
  .section-head--compact { margin-bottom: 28px; }
}

/* ==========================================================================
   Bewegung (Website)
   Hochwertig, aber nie im Weg: Seitenköpfe bauen sich beim Laden kurz nacheinander auf, Abschnitte
   steigen beim Scrollen sanft auf (Listen darin gestaffelt), Fotos „setzen sich“, die Ablauf-Zeitleiste
   baut sich auf. Kleine Goldornamente stehen sofort da. Jede Bewegung läuft genau einmal. site.js schaltet
   die Scroll-Effekte ein (.reveal-ready, .draw-ready); bei „Bewegung reduzieren“ bleibt alles still und
   sofort sichtbar.
   ========================================================================== */

/* Einblenden beim Scrollen: verborgen, bis der Block ins Bild kommt (.is-visible), dann einmal
   aufsteigen (.is-entering). Als Animation statt Übergang – so behalten Karten ihre eigenen
   Hover-Übergänge. Was beim Laden schon zu sehen ist, steht sofort da. */
.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; }
.reveal-ready [data-reveal-delay="1"] { --rd: 0.09s; }
.reveal-ready [data-reveal-delay="2"] { --rd: 0.18s; }
.reveal-ready [data-reveal-delay="3"] { --rd: 0.27s; }
.reveal-ready [data-reveal].is-entering { animation: reveal-up 1.05s var(--ease) var(--rd, 0s) backwards; }
/* Listen im Block erscheinen nacheinander (Reihenfolge --i setzt site.js) */
.reveal-ready [data-reveal].is-entering :is(.info-grid, .check-list, .facts, .offer__list, .contact-list, .tech, .price-list, .men-box__list) > *,
.reveal-ready :is(.info-grid, .tech, .faq, .results__track)[data-reveal].is-entering > * {
  animation: rise-sm 0.8s var(--ease) calc(var(--rd, 0s) + 0.16s + var(--i, 0) * var(--stagger)) backwards;
}
/* Fotos „setzen sich“: zoomen im Rahmen ganz leicht auf ihre Größe zurück */
.reveal-ready [data-reveal].is-entering :is(.foto, .finder-card__media, .ba__img) > picture { animation: settle 1.7s var(--ease) var(--rd, 0s) backwards; }
/* Kleine Goldornamente (Schwung vor der Dachzeile, Wellenlinien mit Stern, Linien unter Preisgruppen und am
   Zitat) stehen einfach da – sie zeichnen sich nicht ein. Bewegung bleibt den Inhalten vorbehalten, sonst
   wird es unruhig. */
/* Kennenlern-Siegel: setzt sich, sein zweiter Ring dreht sich an seinen Platz */
.reveal-ready .offer__inner.is-entering .offer__seal { animation: seal-in 1.1s var(--ease) 0.12s backwards; }
.reveal-ready .offer__inner.is-entering .offer__seal::before { animation: seal-ring 1.6s var(--ease) 0.25s backwards; }
/* Karte: die Stecknadel landet mit leichtem Nachfedern, danach beginnt das Pulsieren */
.reveal-ready .map-card.is-entering .map__pin { animation: pin-drop 0.95s var(--ease-pop) calc(var(--rd, 0s) + 0.45s) backwards; }
.reveal-ready .map-card.is-entering .map__pulse { animation-delay: calc(var(--rd, 0s) + 1.2s); animation-fill-mode: backwards; }

/* Ablauf: sobald die Zeitleiste ins Bild kommt (.is-drawn setzt site.js), ploppen die Ziffern-Kiesel
   nacheinander auf, die geschwungene Verbindungslinie zieht sich hindurch */
.draw-ready .step__num { opacity: 0; transform: scale(0.6); transition: transform 0.75s var(--ease-pop), opacity 0.4s var(--ease); transition-delay: calc(0.12s + var(--i, 0) * 0.2s); }
.draw-ready .steps.is-drawn .step__num { opacity: 1; transform: none; }
.draw-ready .step:not(:last-child)::before { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-in-out) calc(0.45s + var(--i, 0) * 0.2s); }
.draw-ready .steps.is-drawn .step::before { clip-path: inset(0); }
@media (min-width: 900px) {
  .draw-ready .steps::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-in-out) 0.2s; }
  .draw-ready .steps.is-drawn::before { clip-path: inset(0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Sanfte Übergänge zwischen den Seiten (Chrome, Edge, Safari 18.2+; andere Browser wechseln wie gewohnt):
     alte Seite blendet aus, neue steigt leicht auf – Kopfzeile bleibt stehen. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  /* Steht die Kopfzeile auf der neuen Seite an anderer Stelle (z. B. unter der Hinweisleiste, weil die alte
     Seite gescrollt war), gleitet sie ruhig dorthin statt zu rucken */
  ::view-transition-group(site-header) { animation-duration: 0.42s; animation-timing-function: var(--ease); }
  ::view-transition-old(root) { animation: vt-out 0.22s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }
  /* Foto einer Behandlungs-Karte (Startseite, Übersicht) wächst beim Antippen in das große Foto der
     Behandlungsseite hinein (Name am angetippten Foto setzt site.js). Ohne passendes Gegenstück blendet
     das Foto einfach mit der Seite ein bzw. aus. */
  .t-hero .foto { view-transition-name: hf-photo; }
  ::view-transition-group(hf-photo) { animation-duration: 0.6s; animation-timing-function: var(--ease); }
  ::view-transition-old(hf-photo), ::view-transition-new(hf-photo) { height: 100%; object-fit: cover; }
  ::view-transition-old(hf-photo):only-child { animation: vt-out 0.22s var(--ease-in-out) both; }
  ::view-transition-new(hf-photo):only-child { animation: vt-in 0.5s var(--ease) both; }

  /* Seitenkopf beim Laden: Dachzeile, Überschrift, Text und Knöpfe steigen kurz nacheinander auf,
     dann zieht sich der Pinselstrich unter das kursive Wort */
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > * { animation: rise 0.9s var(--ease) backwards; }
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > :nth-child(2) { animation-delay: 0.07s; }
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > :nth-child(3) { animation-delay: 0.14s; }
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > :nth-child(4) { animation-delay: 0.21s; }
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > :nth-child(5) { animation-delay: 0.28s; }
  :is(.hero__text, .t-hero__text, .page-hero > .container, .nf__text) > :nth-child(n+6) { animation-delay: 0.35s; }
  .hero__badge { animation: rise 0.9s var(--ease) 0.55s backwards; }
  :is(.hero, .page-hero, .t-hero) h1 em { animation: swash 1.2s var(--ease-in-out) 0.5s backwards; }
  /* Startbild: beim Laden ganz leicht heranzoomen */
  .hero .foto img, .t-hero .foto img { animation: hero-img 1.8s var(--ease) both; }
  /* Goldener Schwung um das Startbild zeichnet sich einmal ein, die weiche Fläche dahinter blendet auf */
  .hero__swirl path { stroke-dasharray: 1; animation: line-draw 2.6s var(--ease-in-out) 0.4s both; }
  .hero__media::after { animation: fade-up 1.4s var(--ease) 0.5s both; }
  /* Öffnungszeiten-Seite (Karte gleich oben): Stecknadel landet nach dem Seitenkopf */
  .map-card:not([data-reveal]) .map__pin { animation: pin-drop 0.95s var(--ease-pop) 0.55s backwards; }
  .map-card:not([data-reveal]) .map__pulse { animation-delay: 1.3s; animation-fill-mode: backwards; }
  /* Laufband zieht ruhig durch (bei Berührung/Maus anhalten) */
  .marquee__track { animation: marquee 60s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* Fotos, die erst beim Scrollen geladen werden, blenden weich auf (statt hart aufzutauchen) */
  .js .img-wait { opacity: 0; }
  .js .img-in { transition: opacity 0.8s var(--ease); }

  /* Handy-Menü: Einträge fächern sich beim Öffnen kurz nacheinander auf */
  .mobile-menu[open] :is(.mobile-menu__label, .mm-treat > li, .mm-links > li, .mobile-menu__foot > *) { animation: rise-sm 0.5s var(--ease) calc(0.05s + var(--i, 0) * 28ms) backwards; }
  /* Aufklappmenü „Behandlungen“ (Desktop): Einträge erscheinen leicht gestaffelt */
  .nav-sub li { opacity: 0; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.25s var(--ease); }
  :is(.has-sub:hover, .has-sub.is-open, .has-sub:focus-within) .nav-sub li { opacity: 1; transform: none; transition-duration: 0.45s; transition-delay: calc(0.04s + var(--i, 0) * 40ms); }

  /* Häufige Fragen: Antwort gleitet beim Aufklappen herein */
  .faq details[open] .faq__body { animation: drop-in 0.5s var(--ease) 0.06s backwards; }
  /* Preise: die gewählte Liste steigt beim Umschalten leicht auf */
  .price-panel.is-entering { animation: rise-sm 0.45s var(--ease) both; }
}
/* Fragen klappen weich auf (neuere Browser; ältere öffnen wie gewohnt sofort) */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}
/* Desktop: die weichen Flächen hinter den Fotos wandern beim Scrollen ganz leicht mit – gibt Tiefe */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    .hero__media::after { animation: fade-up 1.4s var(--ease) 0.5s both, drift linear both; animation-timeline: auto, view(); }
    .t-hero__media::after, .about__media::after { animation: drift linear both; animation-timeline: view(); }
  }
}
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translate(-10px, 10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes hero-img { from { transform: scale(1.06); opacity: 0.8; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(10px); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes settle { from { transform: scale(1.08); } }
@keyframes swash { from { background-size: 0% 0.2em; } }
@keyframes seal-in { from { opacity: 0; transform: scale(0.88); } }
@keyframes seal-ring { from { opacity: 0; transform: rotate(-55deg) scale(0.94); } }
@keyframes pin-drop { from { opacity: 0; transform: translate(-50%, -180%); } 40% { opacity: 1; } }
@keyframes drift { from { translate: 0 26px; } to { translate: 0 -26px; } }

/* ---------- Hinweisleiste (Urlaub etc.) ---------- */
.notice { background: var(--c-dark); color: var(--c-on-dark); font-size: 0.9375rem; line-height: 1.5; }
/* in dieser Sitzung schon weggeklickt: gar nicht erst zeigen (setzt das kleine Skript im <head>) */
.notice-off .notice { display: none; }
.notice__inner { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.notice__inner > .icon { color: var(--c-gold-light); }
.notice p { flex: 1; }
.notice strong { font-weight: 500; color: #fff; }
.notice__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--c-on-dark-2);
}
.notice__close:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
@media (max-width: 699px) {
  .notice { font-size: 0.8125rem; line-height: 1.4; }
  .notice__inner { gap: 6px; padding-block: 6px; }
  .notice__inner > .icon { display: none; }
  .notice p { padding-left: 28px; text-align: center; }
  .notice__close { width: 34px; height: 34px; margin-right: -10px; }
  .notice__close .icon { width: 16px; height: 16px; }
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* oben auf der Seite durchsichtig (das Licht des Seitenkopfs läuft ohne Kante durch),
     beim Scrollen Milchglas mit feiner Linie */
  background: rgb(246 241 234 / 0);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), -webkit-backdrop-filter 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.no-js .site-header,
.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  background: rgb(246 241 234 / 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: block; flex: none; border-radius: 6px; }
.brand img { height: 42px; width: auto; }
@media (min-width: 700px) { .brand img { height: 46px; } }
.site-nav { display: none; margin-left: auto; }
.site-nav > ul { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item > a {
  position: relative;
  display: block;
  padding-block: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink-2);
  transition: color 0.2s var(--ease);
}
.site-nav__item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-nav__item > a:hover { color: var(--c-ink); }
.site-nav__item > a:hover::after,
.site-nav__item > a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__item > a[aria-current="page"] { color: var(--c-ink); }
.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--c-ink-2);
}
.site-nav__toggle .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.site-nav__toggle:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.has-sub.is-open .site-nav__toggle .icon { transform: rotate(180deg); }

/* Ausklappmenü „Behandlungen" */
.nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: -20px;
  z-index: 60;
  width: 420px;
  padding: 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-l);
  background: rgb(255 253 249 / 0.98);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 48px -12px rgb(44 38 34 / 0.18), 0 2px 8px rgb(44 38 34 / 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-sub:hover .nav-sub,
.has-sub.is-open .nav-sub,
.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.has-sub.is-closed .nav-sub { opacity: 0; visibility: hidden; }
.nav-sub ul { display: grid; gap: 4px; }
.nav-sub li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-sub li a:hover {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  transform: translateX(4px);
}
.nav-sub li a[aria-current="page"] {
  background: var(--c-surface-2);
  border-color: var(--c-line-strong);
}
.nav-sub__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--pebble);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-sub li a:hover .nav-sub__icon {
  transform: scale(1.08);
  background: #ecd9bd;
}
.nav-sub li strong { display: block; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--c-ink); }
.nav-sub li small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--c-muted); }
.nav-sub__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 14px 14px 8px;
  border-top: 1px solid var(--c-line);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink-2);
  transition: color 0.2s var(--ease), gap 0.25s var(--ease);
}
.nav-sub__all:hover { color: var(--c-gold-text); }
.nav-sub__all .icon { transition: transform 0.25s var(--ease); }
.nav-sub__all:hover .icon { transform: translateX(4px); }

.site-header__cta { display: none; }
.menu-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--c-ink);
  transition: background-color 0.2s var(--ease);
}
.menu-toggle:hover { background: var(--c-bg-alt); }
.menu-toggle .icon { width: 26px; height: 26px; }

/* Ohne JavaScript: Navigation als scrollbare Zeile */
.no-js .menu-toggle { display: none; }
.no-js .site-nav { display: block; overflow-x: auto; max-width: 100%; }
.no-js .site-nav a { white-space: nowrap; }
.no-js .site-nav__toggle, .no-js .nav-sub { display: none; }
.no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 10px; gap: 8px 20px; }

@media (min-width: 980px) {
  :root { --header-h: 86px; }
  .brand img { height: 54px; }
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ---------- Mobiles Menü (Dialog) ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-ink);
}
.mobile-menu[open] { display: flex; flex-direction: column; animation: menu-in 0.3s var(--ease); }
.mobile-menu.is-closing { animation: menu-out 0.18s var(--ease) forwards; }
.mobile-menu::backdrop { background: transparent; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-6px); } }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu__top img { height: 40px; width: auto; }
.menu-close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -8px;
  border-radius: 50%;
}
.menu-close:hover { background: var(--c-bg-alt); }
.menu-close .icon { width: 24px; height: 24px; }
.mobile-menu__scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--gutter) 0;
}
.mobile-menu__label {
  margin: 18px 0 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.mm-treat { display: grid; gap: 6px; }
.mm-treat a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  text-decoration: none;
}
.mm-treat a[aria-current="page"] { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); }
.mm-treat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--pebble);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
}
.mm-treat__icon .icon { width: 20px; height: 20px; }
.mm-treat__text { flex: 1; min-width: 0; }
.mm-treat__text strong { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.mm-treat__text small { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--c-muted); }
.mm-treat a > .icon { width: 18px; height: 18px; color: var(--c-muted); }
.mm-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.mm-links li:first-child a { border-top: 1px solid var(--c-line); }
.mm-links a .icon { width: 18px; height: 18px; color: var(--c-gold-deep); }
.mm-links a[aria-current="page"] { color: var(--c-gold-text); }
.mobile-menu__foot {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding: 24px 0 calc(20px + env(safe-area-inset-bottom));
}
.mobile-menu__contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mobile-menu__contact a {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 11px 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  text-decoration: none;
  color: var(--c-ink-2);
}
.mobile-menu__contact .icon { width: 22px; height: 22px; color: var(--c-gold-deep); }
.mobile-menu__addr { text-align: center; font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.03em; }

/* ---------- Startseite: Hero ---------- */
.hero { position: relative; padding-block: clamp(1.75rem, 5vw, 4rem) clamp(3.25rem, 8vw, 6.5rem); overflow: clip; }
.hero__grid { display: grid; gap: 52px; align-items: center; }
.hero h1 { margin-block: 18px 22px; }
.hero h1 em { display: inline-block; }
.hero .lead { max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__actions .btn { flex: 1 1 auto; }
.hero__trust {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  font-size: 0.9375rem;
  color: var(--c-ink-2);
}
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.hero__trust .icon { color: var(--c-gold-deep); }
.hero__media { position: relative; width: 100%; max-width: 480px; margin-inline: auto; isolation: isolate; }
/* weiche, organisch geformte Fläche hinter dem Foto */
.hero__media::after {
  content: "";
  position: absolute;
  left: -13%;
  right: 12%;
  top: 34%;
  bottom: -8%;
  z-index: -1;
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  background: radial-gradient(110% 90% at 28% 72%, rgb(224 195 142 / 0.45), rgb(241 230 211 / 0.75) 62%, rgb(241 230 211 / 0.4));
  pointer-events: none;
}
/* goldener Schwung, der das Foto umspielt (zeichnet sich beim Laden einmal ein) */
.hero__swirl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.15;
  stroke-linecap: round;
  pointer-events: none;
}
/* Fotorahmen: weicher, quadratischer Kiesel – an jeder Stelle der Website gleich, am Handy wie am Computer. So ist
   von einem Foto (4 : 5) überall gleich viel zu sehen; welcher Teil, bestimmt sein Fokuspunkt (photos.js →
   /fotos/fokus.css). Zwei leicht verschiedene Kiesel (--foto-shape, --foto-shape-2) wechseln sich ab. */
.foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--foto-shape);
  background: var(--c-bg-alt);
  isolation: isolate;
}
.foto picture { height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.hero .foto { box-shadow: 0 40px 80px -48px rgb(44 38 34 / 0.55); }

.hero__badge {
  position: absolute;
  left: -4px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 270px;
  padding: 12px 20px 12px 12px;
  border-radius: 22px;
  background: var(--c-surface);
  box-shadow: var(--shadow-m);
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.hero__badge:hover { transform: translateY(-2px); }
.hero__badge-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--pebble);
  background: var(--c-dark);
  color: var(--c-gold-light);
}
.hero__badge-icon .icon { width: 22px; height: 22px; }
.hero__badge strong { display: block; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.hero__badge span { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.35; }

@media (min-width: 560px) {
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.04fr 0.96fr; gap: clamp(56px, 7vw, 104px); }
  .hero__media { margin-right: 24px; }
  .hero__badge { left: -40px; }
  .hero h1 { font-size: clamp(3.6rem, 4.4vw + 1rem, 5.4rem); }
}
/* Handy & Tablet: Das Foto steht oben als Kiesel in der Mitte, mit feiner Goldlinie und weichem Schimmer
   dahinter; darunter folgen Überschrift, Text und Buttons – alles auf dem ersten Bildschirm.
   Platz fürs Foto: was unter Kopfzeile und Hinweisleiste bis einschließlich „Termin buchen“ frei bleibt
   (100svh − 370px, auf echten Handys mit Browserleisten – iPhone ≈ 390 × 664 – also gut 290 px), nie weniger
   als 40 % der Bildschirmhöhe, nie mehr als 48 %. Der Kiesel ist so hoch wie dieser Platz abzüglich der Abstände
   (oben 16, unten 26 px) und nie breiter als der Bildschirm. Der Schatten ist kurz – er reicht nicht bis zur Schrift. */
@media (max-width: 899px) {
  .hero { padding-top: 0; --hero-img-h: clamp(40vh, 100vh - 370px, min(48vh, 520px)); }
  @supports (height: 1svh) { .hero { --hero-img-h: clamp(40svh, 100svh - 370px, min(48svh, 520px)); } }
  .hero {
    --hero-foto: min(calc(var(--hero-img-h) - 22px), calc(100vw - 2 * var(--gutter) - 16px));
    background: radial-gradient(ellipse calc(var(--hero-foto) * 0.75) calc(var(--hero-foto) * 0.62) at 50% calc(16px + var(--hero-foto) * 0.5),
      rgb(224 195 142 / 0.34), rgb(241 230 211 / 0.42) 58%, rgb(241 230 211 / 0) 100%) no-repeat;
  }
  .hero__grid { gap: 0; align-items: start; }
  .hero__text, .hero__media { display: contents; }
  .hero__media::after, .hero__swirl { display: none; }
  .hero__text > *, .hero__badge { position: relative; z-index: 1; }
  .hero .foto {
    order: -1;
    justify-self: center;
    width: var(--hero-foto);
    margin: 16px 0 26px;
    box-shadow: 0 12px 24px -18px rgb(44 38 34 / 0.38);
    outline: 1px solid rgb(176 138 84 / 0.5);
    outline-offset: 7px;
  }
  .hero h1 { margin-block: 10px 12px; }
  .hero__actions { flex-direction: column; gap: 4px; margin-top: 22px; }
  .hero__actions .btn { flex: none; width: 100%; }
  .hero__actions .btn--ghost, .t-hero__actions .btn--ghost { --btn-border: transparent; --btn-bg: transparent; min-height: 44px; }
  .hero__actions .btn--ghost:hover, .t-hero__actions .btn--ghost:hover { --btn-bg: var(--c-bg-alt); }
  /* Kennenlern-Angebot als ruhige Zeile statt Kärtchen */
  .hero__badge {
    order: 1;
    justify-self: center;
    gap: 8px;
    max-width: none;
    margin-top: 10px;
    padding: 6px 4px;
    border-radius: 8px;
    background: none;
    box-shadow: none;
  }
  .hero__badge:hover { transform: none; }
  .hero__badge-icon { width: auto; height: auto; background: none; color: var(--c-gold-deep); }
  .hero__badge-icon .icon { width: 17px; height: 17px; }
  .hero__badge > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
  .hero__badge strong { display: inline; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; color: var(--c-gold-text); }
  .hero__badge span span { font-size: var(--fs-xs); }
  .hero__trust {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 18px;
    font-size: var(--fs-xs);
  }
  .hero__trust li { gap: 6px; }
  .hero__trust .icon { width: 16px; height: 16px; }
}
/* Tablet: Buttons nicht über die ganze Breite ziehen, alles linksbündig */
@media (min-width: 560px) and (max-width: 899px) {
  .hero__actions, .t-hero__actions { max-width: 420px; }
  .hero__badge { justify-self: start; }
  .hero__trust { justify-content: flex-start; }
}

/* ---------- Laufband (Startseite): dunkles Band mit geschwungenen Kanten ---------- */
.marquee { position: relative; overflow-x: clip; background: var(--c-dark-2); color: var(--c-gold-light); }
.marquee__track { display: flex; width: max-content; padding-block: 10px calc(var(--wave-h) + 4px); }
.marquee__group { display: flex; flex: none; }
.marquee__group li {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  padding-left: clamp(18px, 3vw, 36px);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.9vw + 0.85rem, 1.6rem);
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}
.marquee .icon { width: 12px; height: 12px; color: var(--c-gold); }

/* ---------- Unterseiten: Seitenkopf ---------- */
:root {
  /* handgezogener Pinselschwung (wird unter das kursive Wort der Seitenüberschrift gelegt) */
  --swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'%3E%3Cpath d='M2 13C48 5 120 1 218 5C146 5 76 8 2 13Z' fill='%23b08a54' fill-opacity='.8'/%3E%3C/svg%3E");
}
.hero h1 em, .page-hero h1 em, .t-hero h1 em {
  padding-bottom: 0.1em;
  background: var(--swash) left bottom / 100% 0.2em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.page-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(1.5rem, 5vw, 5rem) clamp(1.75rem, 4vw, 3.5rem);
}
/* Handy: weiches Licht oben rechts gibt den reinen Textseiten etwas Wärme – läuft zu allen Seiten
   ganz aus, damit nirgends eine Kante entsteht (am Desktop übernimmt das das Licht im Seitenhintergrund) */
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-h));
  bottom: 0;
  right: -32%;
  width: 88%;
  background: radial-gradient(closest-side, rgb(224 195 142 / 0.34), rgb(241 230 211 / 0.55) 55%, rgb(241 230 211 / 0));
  pointer-events: none;
}
@media (min-width: 900px) { .page-hero::before { display: none; } }
.page-hero h1 { font-size: clamp(2rem, 1.1rem + 3.7vw, 4.4rem); margin-block: 16px 14px; }
.page-hero .lead { max-width: 660px; }
.page-hero--booking { padding-block: clamp(1rem, 3.5vw, 3rem) clamp(0.5rem, 2vw, 1.75rem); }
.page-hero--booking h1 { font-size: clamp(1.75rem, 1rem + 2.8vw, 3.4rem); margin-block: 8px 6px; }
.page-hero--booking .lead { font-size: clamp(var(--fs-sm), 0.4vw + 0.8rem, 1.15rem); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--c-muted); }
@media (max-width: 899px) { .breadcrumb { display: none; } .page-hero .breadcrumb + h1 { margin-top: 0; } }
.breadcrumb a { text-decoration: none; color: var(--c-ink-2); }
.breadcrumb a:hover { color: var(--c-gold-text); }

/* Behandlungsseiten: Kopf mit Bild */
.t-hero { position: relative; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: clip; }
.t-hero__grid { display: grid; gap: 44px; align-items: center; }
.t-hero h1 { font-size: clamp(2rem, 1.1rem + 3.7vw, 4.6rem); margin-block: 14px 20px; }
.t-hero .eyebrow { margin-top: 26px; }
.t-hero__text > p:not(.eyebrow):not(.lead) { margin-top: 16px; color: var(--c-ink-2); }
.t-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.t-hero__actions .btn { flex: 1 1 auto; }
.t-hero__media { position: relative; width: 100%; max-width: 440px; margin-inline: auto; isolation: isolate; }
/* weiche, organische Fläche hinter dem Foto (wie auf der Startseite) */
.t-hero__media::after {
  content: "";
  position: absolute;
  left: -12%;
  right: 16%;
  top: 30%;
  bottom: -8%;
  z-index: -1;
  border-radius: 55% 45% 48% 52% / 46% 54% 46% 54%;
  background: radial-gradient(110% 90% at 30% 70%, rgb(224 195 142 / 0.4), rgb(241 230 211 / 0.72) 62%, rgb(241 230 211 / 0.4));
  pointer-events: none;
}
.t-hero__media .foto { box-shadow: 0 36px 70px -44px rgb(44 38 34 / 0.5); }
.t-hero--about .foto { border-radius: var(--foto-shape-2); }
.fact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fact-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 0.8);
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--c-ink-2);
}
.fact-chips .icon { width: 16px; height: 16px; color: var(--c-gold-deep); }
@media (min-width: 700px) {
  .fact-chips { gap: 10px; }
  .fact-chips li { gap: 8px; padding: 8px 14px; font-size: var(--fs-sm); }
  .fact-chips .icon { width: 18px; height: 18px; }
}
@media (min-width: 560px) { .t-hero__actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .t-hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: clamp(48px, 6vw, 96px); }
  .t-hero__media { margin-right: 0; }
}
@media (max-width: 899px) {
  /* Foto wie auf der Startseite: Kiesel in der Mitte, so hoch wie der Platz, der unter Kopfzeile und
     Hinweisleiste bis einschließlich „Termin buchen“ frei bleibt (--t-free) – mindestens 32 % der
     Bildschirmhöhe; dahinter die weiche Fläche wie am Computer, kurzer Schatten. */
  .t-hero { padding-top: 0; --t-free: 380px; --t-max: min(84vw, 520px); --t-img-h: clamp(32vh, 100vh - var(--t-free), var(--t-max)); }
  .t-hero--about { --t-free: 360px; --t-max: min(100vw, 540px); }
  @supports (height: 1svh) { .t-hero { --t-img-h: clamp(32svh, 100svh - var(--t-free), var(--t-max)); } }
  /* schmale Handys: Überschrift und Text brechen öfter um („Dauerhafte Haarentfernung“ zweizeilig) */
  @media (max-width: 389px) { .t-hero:not(.t-hero--about) { --t-free: 430px; } }
  .t-hero { --t-foto: min(calc(var(--t-img-h) - 22px), calc(100vw - 2 * var(--gutter) - 16px)); }
  .t-hero__grid { gap: 0; align-items: start; }
  .t-hero__media { order: -1; justify-self: center; width: var(--t-foto); max-width: none; margin: 16px 0 26px; }
  .t-hero__media .foto { box-shadow: 0 12px 24px -18px rgb(44 38 34 / 0.38); }
  /* Am Handy zuerst Überschrift, Text und Button – Details (Preis, Dauer) danach */
  .t-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; }
  .t-hero__text > * { flex: none; }
  .t-hero .fact-chips, .t-hero__text > p:not(.eyebrow):not(.lead) { order: 1; }
  .t-hero .fact-chips { margin-top: 20px; }
  .t-hero .eyebrow { margin-top: 0; }
  .t-hero h1 { margin-block: 10px 12px; }
  .t-hero__actions { flex-direction: column; gap: 4px; margin-top: 22px; }
  .t-hero__actions .btn { flex: none; width: 100%; }
}

/* ---------- Startseite: „Wobei kann ich dir helfen?" ---------- */
.finder { display: grid; gap: 16px; }
.finder-card {
  display: flex;
  gap: 18px;
  height: 100%;
  padding: 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.finder-card:hover {
  box-shadow: 0 18px 40px -12px rgb(44 38 34 / 0.16), 0 2px 6px rgb(44 38 34 / 0.04);
  transform: translateY(-5px);
  border-color: rgb(176 138 84 / 0.55);
}
.finder > li:nth-child(1) .finder-card:hover { border-color: #b08a54; }
.finder > li:nth-child(2) .finder-card:hover { border-color: #c9806b; }
.finder > li:nth-child(3) .finder-card:hover { border-color: #638c6b; }
.finder > li:nth-child(4) .finder-card:hover { border-color: #7b659c; }
/* Titelgröße folgt der Kartenbreite (siehe unten) – „IPL-Hautverjüngung“ bleibt so immer in einer Zeile */
.finder-card { container-type: inline-size; }
.finder-card__media {
  position: relative;
  flex: none;
  width: 88px;
  align-self: flex-start;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--foto-shape);
  background: var(--c-bg-alt);
}
.finder > li:nth-child(even) .finder-card__media { border-radius: var(--foto-shape-2); }
.finder-card__media picture { height: 100%; }
.finder-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.finder-card:hover .finder-card__media img { transform: scale(1.05); }
.finder-card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.finder-card__need { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
.finder-card__title { margin-top: 6px; font-family: var(--font-serif); font-size: clamp(1.35rem, 0.5vw + 1.2rem, 1.55rem); font-weight: 600; line-height: 1.15; color: var(--c-ink); }
.finder-card__text { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink-2); }
.finder-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.finder-card__price { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--c-gold-text); }
.finder-card__meta .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.finder-card:hover .finder-card__meta .icon {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-on-dark);
  transform: translateX(3px);
}
/* Handy: 2 × 2 gleich große Kacheln – Bild im Bogen, Titel mit fest reservierten zwei Zeilen,
   darunter Preis und Pfeil. Die Bedarfszeile bleibt für Screenreader erhalten. */
@media (max-width: 719px) {
  .finder { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
  .finder > li { display: flex; }
  .finder-card { flex: 1; min-width: 0; flex-direction: column; gap: 12px; padding: 8px 8px 14px; border-radius: var(--radius-m); }
  .finder-card__media { width: 100%; }
  .finder-card__body { padding-inline: 6px; }
  .finder-card__need {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .finder-card__text { display: none; }
  .finder-card__title { margin-top: 0; min-height: 2.4em; font-size: clamp(1.04rem, 1.4vw + 0.84rem, 1.25rem); line-height: 1.2; }
  .finder-card__meta { padding-top: 10px; }
  .finder-card__price { font-size: 1rem; }
  .finder-card__meta .icon { width: 30px; height: 30px; padding: 7px; }
}
/* sehr schmale Handys: etwas enger, damit die Namen ohne Trennstrich in die Kachel passen */
@media (max-width: 374px) {
  .finder { gap: 10px; }
  .finder-card { gap: 10px; padding: 6px 6px 12px; }
  .finder-card__body { padding-inline: 3px; }
  .finder-card__title { font-size: 0.97rem; }
  .finder-card__price { font-size: 0.98rem; }
  .finder-card__meta .icon { width: 28px; height: 28px; padding: 6px; }
}
.finder-consult {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px 18px 16px 14px;
  border-radius: var(--radius-l);
  background: radial-gradient(80% 140% at 0% 0%, rgb(224 195 142 / 0.16), transparent 60%), var(--c-dark);
  color: var(--c-on-dark);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.finder-consult:hover { background: var(--c-dark-2); }
.finder-consult__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--pebble);
  border: 1px solid rgb(224 195 142 / 0.5);
  color: var(--c-gold-light);
}
.finder-consult__text { flex: 1; min-width: 0; }
.finder-consult strong { display: block; font-family: var(--font-serif); font-size: clamp(1.125rem, 0.6vw + 0.98rem, 1.45rem); font-weight: 600; line-height: 1.2; }
.finder-consult__text span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-on-dark-2); }
@media (min-width: 700px) { .finder-consult__text span { font-size: var(--fs-sm); } }
.finder-consult > .icon { transition: transform var(--dur) var(--ease); }
.finder-consult:hover > .icon { transform: translateX(4px); }
.finder-consult > .icon { color: var(--c-gold-light); }
@media (min-width: 720px) {
  .finder { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 20px; }
  .finder-card { padding: 20px; gap: 18px; }
  .finder-card__media { width: 96px; }
}
@media (min-width: 1040px) {
  .finder { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
  .finder-card { flex-direction: column; padding: 14px 14px 22px; gap: 18px; }
  .finder-card__media { width: 100%; }
  .finder-card__body { padding-inline: 8px; }
  .finder-consult { margin-top: 20px; padding: 22px 28px 22px 22px; }
}
/* Der längste Name („IPL-Hautverjüngung“, gemessen 8,2 em) muss in die Textbreite der Karte passen:
   Schriftgröße = (Inhaltsbreite der Karte − Bild/Abstände daneben) / 8,5. cqi misst die Inhaltsbreite
   (ohne Innenabstand der Karte); je Layout andere Abstände, nach oben begrenzt. */
@supports (font-size: 1cqi) {
  .finder-card__title { font-size: min(1.55rem, calc(11.7cqi - 1.9px)); }
  @media (min-width: 720px) and (max-width: 1039px) { .finder-card__title { font-size: min(1.5rem, calc(11.7cqi - 13.4px)); } }
  @media (max-width: 719px) { .finder-card__title { font-size: min(1.25rem, calc(11.7cqi - 1.4px)); } }
  @media (max-width: 374px) { .finder-card__title { font-size: calc(11.7cqi - 0.7px); } }
}

/* ---------- Kennenlern-Angebot / Abschluss-Band ---------- */
:root {
  /* fließende Goldlinien (wie Höhenlinien) für die dunklen Flächen */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 420' fill='none' stroke='%23e0c38e'%3E%3Cpath stroke-opacity='.2' d='M-10 70C90 10 210 30 300 90s230 110 350 40'/%3E%3Cpath stroke-opacity='.14' d='M-10 130C100 60 220 90 310 150s220 110 340 50'/%3E%3Cpath stroke-opacity='.09' d='M-10 190c120-70 240-40 330 20s210 100 330 60'/%3E%3C/svg%3E");
}
.offer {
  position: relative;
  background:
    var(--contours) right -90px top -10px / 600px auto no-repeat,
    radial-gradient(50% 80% at 8% 50%, rgb(224 195 142 / 0.1), transparent 70%),
    var(--c-dark);
  color: var(--c-on-dark);
}
.offer__inner { position: relative; z-index: 1; display: grid; gap: 22px; align-items: center; }
.offer .eyebrow { color: var(--c-gold-light); }
.offer h2 { color: var(--c-on-dark); margin-block: 10px 14px; }
.offer h2 em { color: var(--c-gold-light); }
.offer p { color: var(--c-on-dark-2); max-width: 600px; }
/* Siegel als „Kiesel“ mit zweitem, leicht verdrehtem Ring – wie von Hand gezogen */
.offer__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: var(--pebble);
  border: 1px solid var(--c-gold-light);
  color: var(--c-gold-light);
  text-align: center;
}
.offer__seal::before {
  content: "";
  position: absolute;
  inset: -6px -4px -5px -7px;
  border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
  border: 1px solid rgb(224 195 142 / 0.35);
  transform: rotate(-10deg);
  pointer-events: none;
}
.offer__seal span { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.15; }
.offer__seal strong { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-style: normal; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.offer__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.offer__actions .btn { flex: 1 1 auto; }
.offer__list { display: grid; gap: 10px; margin-top: 18px; font-size: var(--fs-sm); color: var(--c-on-dark-2); }
.offer__list li { display: flex; gap: 10px; align-items: center; }
.offer__list .icon { color: var(--c-gold-light); }
@media (min-width: 560px) { .offer__actions .btn { flex: 0 0 auto; } }
@media (min-width: 700px) {
  .offer h2 { margin-block: 14px 18px; }
  .offer__seal { width: 128px; }
  .offer__seal span { font-size: 1.15rem; }
  .offer__seal strong { margin-bottom: 4px; font-size: 0.6875rem; letter-spacing: 0.2em; }
  .offer__list { gap: 12px; margin-top: 24px; font-size: 1rem; }
  .offer__actions { gap: 12px; margin-top: 30px; }
}
@media (min-width: 900px) {
  .offer { background-position: right -40px top 0, 0 0, 0 0; background-size: 760px auto, auto, auto; }
  .offer__inner { grid-template-columns: auto 1fr; gap: 72px; }
  .offer__seal { width: 180px; }
  .offer__seal span { font-size: 1.5rem; }
}

/* ---------- Über mich ---------- */
.about__grid { display: grid; gap: 40px; align-items: center; }
.about__media { position: relative; isolation: isolate; max-width: min(440px, 90%); width: 100%; margin-inline: auto; }
/* weiche, organische Fläche hinter dem Foto */
.about__media::after {
  content: "";
  position: absolute;
  left: -9%;
  right: 22%;
  top: 38%;
  bottom: -7%;
  z-index: -1;
  border-radius: 58% 42% 51% 49% / 44% 56% 44% 56%;
  background: radial-gradient(110% 90% at 30% 70%, rgb(224 195 142 / 0.4), rgb(241 230 211 / 0.72) 62%, rgb(241 230 211 / 0.35));
  pointer-events: none;
}
.about__text h2 { margin-block: 10px 14px; }
.about__text > p + p { margin-top: 14px; }
.about__text .link { margin-top: 24px; }
.facts { display: grid; gap: 12px; margin-block: 24px; font-size: var(--fs-sm); }
.facts li { display: flex; gap: 12px; align-items: flex-start; }
.facts .icon { margin-top: 1px; color: var(--c-gold-deep); }
/* persönliche Zeile mit geschwungener Goldlinie davor */
.about__personal {
  position: relative;
  margin-top: 26px;
  padding-left: 22px;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 0.6vw + 1.02rem, 1.4rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink);
}
.about__personal::before,
.about__quote::after {
  content: "";
  position: absolute;
  width: 8px;
  background: linear-gradient(var(--c-gold), rgb(176 138 84 / 0.2));
  -webkit-mask: var(--wave-y) center top / 8px 30px repeat-y;
  mask: var(--wave-y) center top / 8px 30px repeat-y;
  pointer-events: none;
}
.about__personal::before { left: 0; top: 4px; bottom: 4px; }
.about__sign { margin-top: 10px; font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
/* Zitat: großes Anführungszeichen links oben, darunter eine geschwungene Goldlinie */
.about__quote { position: relative; margin-top: 28px; padding: 0 0 2px 28px; }
.about__quote::before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: -12px;
  font-family: var(--font-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--c-gold);
  pointer-events: none;
}
.about__quote::after { left: 3px; top: 30px; bottom: 4px; }
.about__quote p { font-family: var(--font-serif); font-size: clamp(1.15rem, 0.8vw + 0.98rem, 1.6rem); font-style: italic; line-height: 1.45; color: var(--c-ink); }
.about__quote .about__sign { display: block; }
.about__media .foto { border-radius: var(--foto-shape-2); box-shadow: 0 36px 70px -46px rgb(44 38 34 / 0.5); }
@media (min-width: 700px) {
  .about__text h2 { margin-block: 16px 18px; }
  .about__text > p + p { margin-top: 18px; }
  .facts { gap: 14px; margin-block: 28px; font-size: var(--fs-body); }
  .facts li { gap: 14px; }
  .facts .icon { margin-top: 3px; }
  .about__quote { margin-top: 34px; padding-left: 30px; }
  .about__quote::before { font-size: 3.8rem; top: -14px; }
  .about__quote::after { top: 34px; }
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 7vw, 96px); }
}

/* ---------- Werte / Vorteile ---------- */
.benefits { display: grid; gap: 12px; }
.benefit {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}
.benefit__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--pebble);
  border: 1px solid var(--c-gold);
  color: var(--c-gold-deep);
}
.benefit__icon .icon { width: 22px; height: 22px; }
.benefit h3 { font-size: clamp(1.2rem, 0.6vw + 1.05rem, 1.4rem); margin-bottom: 4px; }
.benefit p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }
@media (min-width: 760px) {
  .benefits--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .benefits--3 .benefit { grid-template-columns: 1fr; padding: 30px 26px; }
  .benefit__icon { width: 52px; height: 52px; }
  .benefit__icon .icon { width: 24px; height: 24px; }
  .benefit h3 { margin-bottom: 6px; }
  .benefit p { font-size: 0.9375rem; }
}

/* ---------- Vorher / Nachher ---------- */
.results__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 360px);
  gap: 12px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.results__track::-webkit-scrollbar { display: none; }
.results__track--one { grid-auto-columns: min(100%, 520px); }
.ba {
  scroll-snap-align: start;
  padding: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ba:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgb(44 38 34 / 0.15);
  border-color: rgb(176 138 84 / 0.4);
}
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: hidden; border-radius: var(--radius-s); }
.ba__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-bg-alt); }
.ba__img picture { height: 100%; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ba:hover .ba__img img { transform: scale(1.03); }
.ba__tag {
  position: absolute;
  left: 7px;
  top: 7px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgb(255 253 249 / 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.ba__tag--after {
  background: rgb(44 38 34 / 0.92);
  color: var(--c-gold-light);
  border: 1px solid rgb(224 195 142 / 0.3);
}
.ba figcaption { padding: 12px 6px 6px; }
.ba figcaption strong { display: block; font-family: var(--font-serif); font-size: clamp(1.2rem, 0.6vw + 1.05rem, 1.4rem); font-weight: 600; line-height: 1.2; }
.ba figcaption span { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--c-ink-2); }
.ba figcaption small { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--c-muted); line-height: 1.45; }
.results__hint { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); color: var(--c-muted); }
.results__note { margin-top: 14px; font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 700px) {
  .ba { padding: 12px; }
  .ba__pair { gap: 8px; }
  .ba__tag { left: 8px; top: 8px; padding: 4px 10px; font-size: 0.6875rem; letter-spacing: 0.16em; }
  .ba figcaption { padding: 16px 8px 8px; }
  .ba figcaption span { font-size: 0.9375rem; }
  .ba figcaption small { font-size: var(--fs-xs); }
}
@media (min-width: 900px) {
  .results__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    gap: 22px;
  }
  .results__track--two { grid-template-columns: repeat(2, minmax(0, 460px)); }
  .results__track--one { grid-template-columns: minmax(0, 560px); }
  .results__hint { display: none; }
}

/* ---------- Ablauf ---------- */
/* Zeitleiste: Ziffern in goldenen „Kieseln“, verbunden durch eine geschwungene Linie
   (Handy senkrecht, Desktop waagerecht) */
.steps { position: relative; display: grid; }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 24px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 58px;
  bottom: 8px;
  width: 8px;
  background: linear-gradient(var(--c-gold), rgb(176 138 84 / 0.2));
  -webkit-mask: var(--wave-y) center top / 8px 30px repeat-y;
  mask: var(--wave-y) center top / 8px 30px repeat-y;
}
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-gold);
  border-radius: var(--pebble);
  background: var(--c-surface);
  box-shadow: 0 0 0 6px var(--c-bg-alt);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--c-gold-text);
}
.step:nth-child(2) .step__num { border-radius: 47% 53% 44% 56% / 55% 47% 53% 45%; }
.step:nth-child(3) .step__num { border-radius: 52% 48% 57% 43% / 45% 54% 46% 55%; }
.step:nth-child(4) .step__num { border-radius: 44% 56% 49% 51% / 52% 45% 55% 48%; }
.step h3 { margin: 10px 0 6px; font-size: clamp(1.15rem, 0.6vw + 1rem, 1.5rem); }
.step p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 36px; }
  /* geschwungene Linie von der ersten bis zur letzten Ziffer (4 Spalten, 36 px Abstand, Mitte 28 px) */
  .steps::before {
    content: "";
    position: absolute;
    left: 28px;
    right: calc(25% - 55px);
    top: 24px;
    height: 8px;
    background: linear-gradient(90deg, var(--c-gold), rgb(176 138 84 / 0.35));
    -webkit-mask: var(--wave-x) left center / 40px 8px repeat-x;
    mask: var(--wave-x) left center / 40px 8px repeat-x;
  }
  .step { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; }
  .step:not(:last-child)::before { display: none; }
  .step__num { width: 56px; height: 56px; font-size: 1.45rem; }
  .step h3 { margin-top: 18px; }
}

/* ---------- Preis-Teaser (Startseite) ---------- */
.teaser-grid { display: grid; gap: 8px; }
.price-card { padding: 4px 18px 8px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.price-card .price-row:last-child .price-row__link { border-bottom: 0; }
@media (min-width: 960px) {
  .teaser-grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
  .price-card { padding: 12px 32px 16px; }
}
@media (min-width: 700px) and (max-width: 959px) { .price-card { padding: 8px 24px 12px; } }

/* ---------- FAQ ---------- */
/* Eine geöffnete Frage wird zur Karte. Die Karte liegt hinter dem Text und reicht etwas in den Rand hinaus –
   so bleibt die Frage beim Öffnen und Schließen genau, wo sie ist (nichts rückt nach rechts oder unten);
   die Trennlinien daneben blenden aus, die Karte blendet weich ein. */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--c-line-strong); transition: border-color 0.3s var(--ease); }
.faq details {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--c-line-strong);
  transition: border-color 0.3s var(--ease);
}
.faq details::before {
  content: "";
  position: absolute;
  inset: 4px -12px;
  z-index: -1;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: rgb(255 253 249 / 0.75);
  box-shadow: 0 4px 16px -6px rgb(44 38 34 / 0.08);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.faq details[open]::before { opacity: 1; transform: none; }
.faq details[open],
.faq details:has(+ details[open]) { border-bottom-color: transparent; }
.faq:has(> details:first-child[open]) { border-top-color: transparent; }
@media (min-width: 700px) { .faq details::before { inset-inline: -20px; } }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid transparent;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 0.8vw + 0.95rem, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur) var(--ease), border-color 0.3s var(--ease);
}
@media (min-width: 700px) { .faq summary { gap: 18px; padding-block: 22px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  color: var(--c-gold-deep);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.faq details[open] summary .icon {
  transform: rotate(45deg);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
  border-color: var(--c-gold);
}
/* geöffnet: feine Linie unter der Frage – die Frage selbst behält ihre Maße */
.faq details[open] summary { border-bottom-color: var(--c-line); }
.faq summary:hover .icon { background: var(--c-surface); }
.faq summary:hover { color: var(--c-gold-text); }
.faq__body { padding: 14px 0 18px; max-width: 720px; color: var(--c-ink-2); }
@media (min-width: 700px) { .faq__body { padding: 18px 0 24px; } }
.faq__body p + p { margin-top: 12px; }
.faq-more { margin-top: 28px; text-align: center; }

/* ---------- Kontakt ---------- */
.contact__grid { display: grid; gap: 32px; }
.contact__text h2 { margin-block: 10px 12px; }
.contact-list { display: grid; gap: 8px; margin-block: 22px; }
.contact-list:last-child { margin-bottom: 0; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px 11px 11px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-item:hover { border-color: rgb(176 138 84 / 0.45); box-shadow: var(--shadow-m); transform: translateY(-2px); }
.contact-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--pebble);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
}
.contact-item__icon .icon { width: 20px; height: 20px; }
.contact-item__text { flex: 1; min-width: 0; }
.contact-item strong { display: block; font-weight: 500; line-height: 1.3; }
.contact-item__text span { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); overflow-wrap: anywhere; }
.contact-item > .icon { margin-left: auto; width: 18px; height: 18px; color: var(--c-muted); }
@media (min-width: 700px) {
  .contact__text h2 { margin-block: 16px 18px; }
  .contact-list { gap: 12px; margin-block: 30px; }
  .contact-item { gap: 16px; padding: 14px 18px 14px 14px; }
  .contact-item__icon { width: 48px; height: 48px; }
  .contact-item__icon .icon { width: 22px; height: 22px; }
  .contact-item__text span { font-size: 0.9375rem; }
}

.hours-card { padding: 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.hours-card h2, .hours-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem); }
.hours-card h2 .icon, .hours-card h3 .icon { color: var(--c-gold-deep); }
.hours__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.hours__row:last-child { border-bottom: 0; }
.hours__row dd { text-align: right; font-variant-numeric: tabular-nums; }
.hours__row.is-closed dd { color: var(--c-muted); }
/* Text statt Uhrzeit (z. B. „Termin nach Absprache möglich“): darf umbrechen, kursiv wie ein Hinweis */
.hours__row.is-note dd { max-width: 62%; font-style: italic; font-variant-numeric: normal; color: var(--c-ink-2); text-wrap: balance; }
.hours__row.is-today dt,
.hours__row.is-today dd { font-weight: 500; color: var(--c-ink); }
.hours__row.is-today dt::after { content: " · heute"; font-weight: 400; color: var(--c-gold-text); }
.hours-card .small { margin-top: 12px; font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 700px) {
  .hours-card { padding: 24px; }
  .hours-card h2, .hours-card h3 { margin-bottom: 12px; }
  .hours__row { padding-block: 9px; font-size: 0.9375rem; }
  .hours-card .small { margin-top: 14px; font-size: var(--fs-sm); }
}
.closures { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.closures__title { margin-bottom: 8px; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-text); }
.closures ul { display: grid; gap: 8px; }
.closures li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2); }
.closures li .icon { margin-top: 2px; width: 17px; height: 17px; color: var(--c-gold-deep); }
.closures strong { color: var(--c-ink); font-weight: 500; }

.map-card { overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.map { position: relative; height: 240px; overflow: hidden; background: #e9e0d3; }
.map picture, .map img { width: 100%; height: 100%; }
.map img { object-fit: none; object-position: 50% 50%; }
.map__pin { position: absolute; left: 50%; top: 50%; width: 44px; height: 56px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 10px rgb(44 38 34 / 0.35)); }
.map__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgb(160 115 47 / 0.35);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { from { transform: scale(0.6); opacity: 0; } 8% { opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.map__credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgb(255 253 249 / 0.85);
  font-size: 0.6875rem;
  color: var(--c-ink-2);
}
.map__credit a { color: inherit; }
.map-card__body { display: grid; gap: 14px; padding: 18px 18px 20px; }
.map-card address { font-style: normal; line-height: 1.6; }
.map-card address strong { font-family: var(--font-serif); font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem); font-weight: 600; }
@media (min-width: 700px) {
  .map { height: 300px; }
  .map__credit { font-size: 0.75rem; }
  .map-card__body { gap: 18px; padding: 24px; }
}
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .map { height: 400px; }
}

/* ---------- Übersicht Behandlungen ---------- */
.overview { display: grid; gap: 16px; }
.ov-card {
  display: grid;
  gap: 24px;
  padding: 16px 16px 26px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ov-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -14px rgb(44 38 34 / 0.16);
  border-color: rgb(176 138 84 / 0.45);
}
/* Foto als Kiesel mittig in der Karte, dahinter eine weiche, organische Fläche (wie hinter den großen Fotos) –
   so wirkt es um das Foto nicht leer. Die Kiesel wechseln sich ab, die Fläche liegt mal links, mal rechts. */
.ov-card__media { position: relative; isolation: isolate; display: grid; justify-items: center; padding-top: 6px; }
.ov-card__media::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 40%;
  top: 36%;
  bottom: -4%;
  z-index: -1;
  border-radius: 55% 45% 48% 52% / 46% 54% 46% 54%;
  background: radial-gradient(110% 90% at 30% 70%, rgb(224 195 142 / 0.36), rgb(241 230 211 / 0.7) 62%, rgb(241 230 211 / 0.35));
  pointer-events: none;
}
.ov-card:nth-child(even) .ov-card__media::after { left: 40%; right: 12%; border-radius: 45% 55% 52% 48% / 54% 46% 54% 46%; }
.ov-card__media .foto { width: min(70%, 300px); box-shadow: 0 20px 36px -28px rgb(44 38 34 / 0.45); }
.ov-card:nth-child(even) .ov-card__media .foto { border-radius: var(--foto-shape-2); }
.ov-card__media .foto img { transition: transform 1.2s var(--ease); }
.ov-card:hover .ov-card__media .foto img { transform: scale(1.04); }
.ov-card__body { padding-inline: 8px; }
.ov-card h2 { margin-block: 8px 10px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.ov-card h2 a { text-decoration: none; }
.ov-card h2 a:hover { color: var(--c-gold-text); }
.ov-card p:not(.eyebrow) { color: var(--c-ink-2); }
.ov-card .fact-chips { margin-top: 16px; }
.ov-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
@media (min-width: 900px) {
  .overview { grid-template-columns: 1fr 1fr; gap: 26px; }
  .ov-card { padding: 18px 18px 30px; }
  .ov-card__body { padding-inline: 14px; }
  .ov-card h2 { margin-block: 12px 14px; }
  .ov-card .fact-chips { margin-top: 20px; }
  .ov-card__actions { margin-top: 26px; }
}
@media (max-width: 899px) {
  .ov-card { gap: 14px; padding: 18px 0 22px; overflow: hidden; }
  .ov-card__media .foto { width: min(72%, 300px); }
  .ov-card__body { padding-inline: 18px; }
}

/* ---------- Behandlungsseiten ---------- */
.t-intro { display: grid; gap: 28px; }
.t-intro__text h2 { margin-bottom: 14px; }
.t-intro__text p + p { margin-top: 12px; }
.t-intro__text p { color: var(--c-ink-2); }
.t-intro__list { padding: 20px 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.t-intro__list h3 { font-size: clamp(1.3rem, 0.8vw + 1.1rem, 1.55rem); margin-bottom: 14px; }
@media (min-width: 700px) {
  .t-intro { gap: 40px; }
  .t-intro__text h2 { margin-bottom: 20px; }
  .t-intro__text p + p { margin-top: 16px; }
  .t-intro__text p { font-size: 1.0625rem; }
  .t-intro__list { padding: 26px 24px; }
  .t-intro__list h3 { margin-bottom: 18px; }
}
@media (min-width: 900px) {
  .t-intro { grid-template-columns: 1.1fr 0.9fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  .t-intro__list { padding: 34px 32px; }
}
.check-list { display: grid; gap: 11px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; }
.check-list .icon {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  margin-top: 1px;
  border-radius: var(--pebble);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
  stroke-width: 2;
}
.info-grid { display: grid; gap: 10px; }
.info-box { padding: 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.info-box h3, .info-box h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-text); }
.info-box h3 .icon, .info-box h4 .icon { width: 18px; height: 18px; }
.info-box p, .info-box li { font-size: var(--fs-sm); color: var(--c-ink-2); }
.info-box ul { padding-left: 1.1em; display: grid; gap: 6px; }
.info-box--spaced { margin-top: 16px; }
@media (min-width: 700px) {
  .info-box { padding: 22px; }
  .info-box h3, .info-box h4 { margin-bottom: 12px; font-size: 0.78rem; }
  .info-box p, .info-box li { font-size: 0.9375rem; }
  .info-box ul { gap: 8px; }
  .info-box--spaced { margin-top: 22px; }
}
.men-box {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 12px 22px;
  border-radius: var(--radius-l);
  background: var(--c-dark);
  color: var(--c-on-dark-2);
}
.men-box picture { display: block; }
.men-box img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--foto-shape); }
/* Handy: Kiesel links neben der Überschrift, die Liste darunter über die ganze Breite */
@media (max-width: 699px) {
  .men-box { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); grid-template-areas: "foto head" "list list" "more more"; align-items: center; column-gap: 16px; row-gap: 0; }
  .men-box > picture { grid-area: foto; }
  .men-box > div { display: contents; }
  .men-box h3 { grid-area: head; }
  .men-box__list { grid-area: list; padding-inline: 6px; }
  .men-box__more { grid-area: more; padding-inline: 6px; }
}
.men-box h3 { font-size: clamp(1.4rem, 1vw + 1.15rem, 1.75rem); color: var(--c-on-dark); font-weight: 500; line-height: 1.15; }
.men-box h3 em { color: var(--c-gold-light); }
.men-box > div { padding-inline: 6px; }
.men-box__list { display: grid; gap: 8px; margin-top: 14px; font-size: var(--fs-sm); }
.men-box li { display: flex; gap: 10px; }
.men-box li .icon { margin-top: 3px; color: var(--c-gold-light); }
.men-box__more { margin-top: 18px; }
.link--light { color: var(--c-gold-light); border-color: var(--c-gold-light); }
.link--light:hover { color: #fff; }
.tech { display: grid; gap: 16px; }
.tech__item { padding: 24px; border-radius: var(--radius-m); background: var(--c-surface); border: 1px solid var(--c-line); }
.tech__item strong { display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; line-height: 1.1; color: var(--c-gold-text); }
.tech__item span { display: block; margin-top: 8px; font-size: 0.9375rem; color: var(--c-ink-2); }
.more__title { margin-bottom: 18px; font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); }
.more { display: grid; gap: 8px; }
.more-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px 11px 11px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.more-card:hover { border-color: rgb(176 138 84 / 0.45); box-shadow: var(--shadow-m); transform: translateY(-2px); }
.more-card__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--pebble); background: var(--c-gold-wash); color: var(--c-gold-text); }
.more-card__icon .icon { width: 20px; height: 20px; }
.more-card__text { flex: 1; min-width: 0; }
.more-card strong { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.more-card small { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.more-card > .icon { width: 18px; height: 18px; color: var(--c-muted); }
@media (min-width: 700px) {
  .info-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .men-box { grid-template-columns: 220px 1fr; align-items: center; gap: 20px; margin-top: 22px; padding: 20px 30px 20px 20px; }
  .men-box__list { gap: 10px; margin-top: 16px; font-size: 0.9375rem; }
  .more__title { margin-bottom: 26px; }
  .more { gap: 12px; }
  .more-card { gap: 16px; padding: 16px 18px 16px 14px; }
  .more-card__icon { width: 48px; height: 48px; }
  .more-card__icon .icon { width: 22px; height: 22px; }
  .more-card strong { font-size: 1.3rem; }
  .more-card small { font-size: var(--fs-sm); }
  .tech { grid-template-columns: repeat(2, 1fr); }
}
/* drei Karten nebeneinander erst, wenn die Namen sicher Platz haben */
@media (min-width: 960px) {
  .tech { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 699px) {
  .tech { gap: 0; padding: 2px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
  .tech__item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border: 0; border-radius: 0; background: none; }
  .tech__item + .tech__item { border-top: 1px solid var(--c-line); }
  .tech__item strong { font-size: 1.3rem; }
  .tech__item span { margin-top: 0; font-size: var(--fs-xs); }
}

/* ---------- Preise ---------- */
.price-layout { display: grid; gap: 32px; }
.price-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  margin: 0 calc(-1 * var(--gutter)) 14px;
  padding: 10px var(--gutter);
  background: var(--c-bg);
}
.section--alt .price-tabs { background: var(--c-bg-alt); }
.no-js .price-tabs { display: none; }
@media (max-width: 519px) {
  .price-tabs .segmented { display: flex; width: 100%; }
  .price-tabs .segmented button { flex: 1 1 auto; padding-inline: 0.5em; font-size: var(--fs-xs); }
}
.price-panel { max-width: 760px; }
.price-panel + .price-panel { margin-top: 40px; }
.js [data-tabs] .price-panel + .price-panel { margin-top: 0; }
.price-panel:focus-visible { outline-offset: 8px; }
/* Öffnet jemand z. B. /preise#pakete, fokussiert der Browser die Liste selbst – der Rahmen
   erscheint dann nur bei Bedienung mit der Tastatur (Klasse „kbd“ setzt site.js bei Tab) */
html:not(.kbd) .price-panel:focus-visible { outline: none; }
.price-panel__title { margin-bottom: 6px; font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); }
.price-panel__intro { margin-bottom: 18px; font-size: var(--fs-sm); color: var(--c-ink-2); }
.price-group + .price-group { margin-top: 28px; }
/* Gruppenname mit geschwungener Goldlinie darunter */
.price-group__title {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 2px;
  font-size: clamp(1.3rem, 0.8vw + 1.1rem, 1.65rem);
  font-weight: 500;
  font-style: italic;
}
.price-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--c-gold), rgb(176 138 84 / 0.25));
  -webkit-mask: var(--wave-x) left center / 40px 8px repeat-x;
  mask: var(--wave-x) left center / 40px 8px repeat-x;
}
.price-row__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), padding 0.25s var(--ease);
}
a.price-row__link:hover { background: var(--c-surface); padding-inline: 12px; }
.price-row__name { font-size: var(--fs-body); line-height: 1.4; }
.price-row__name small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.price-row__save {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgb(176 138 84 / 0.12);
  border: 1px solid rgb(176 138 84 / 0.28);
  color: #875e24;
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.price-row__dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--c-line-strong); transform: translateY(-6px); }
.price-row__price { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
@media (min-width: 700px) {
  .price-panel__title { margin-bottom: 10px; }
  .price-panel__intro { margin-bottom: 26px; font-size: var(--fs-body); }
  .price-group + .price-group { margin-top: 40px; }
  .price-row__link { gap: 12px; padding: 17px 6px; }
  .price-row__name { font-size: 1.0625rem; }
  .price-row__name small { margin-top: 3px; font-size: var(--fs-sm); }
  .price-row__save { margin-top: 8px; padding: 3px 10px; font-size: var(--fs-xs); }
  .price-row__price { font-size: 1.45rem; }
}
.price-row--package .price-row__name { font-weight: 500; }
.price-aside { display: grid; gap: 12px; align-content: start; }
.price-note { padding: 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.price-note h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: clamp(1.2rem, 0.8vw + 1rem, 1.4rem); }
.price-note h3 .icon { color: var(--c-gold-deep); }
.price-note p { font-size: var(--fs-sm); color: var(--c-ink-2); }
.price-note .btn { margin-top: 14px; }
@media (min-width: 700px) {
  .price-aside { gap: 16px; }
  .price-note { padding: 24px; }
  .price-note h3 { margin-bottom: 10px; }
  .price-note p { font-size: 0.9375rem; }
  .price-note .btn { margin-top: 18px; }
}
.price-note--dark { background: var(--c-dark); border-color: var(--c-dark); }
.price-note--dark h3 { color: var(--c-on-dark); }
.price-note--dark h3 .icon { color: var(--c-gold-light); }
.price-note--dark p { color: var(--c-on-dark-2); }
@media (min-width: 1000px) {
  .price-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
  .price-aside { position: sticky; top: calc(var(--header-h) + 28px); }
  .price-tabs { margin-inline: 0; padding-inline: 0; }
}

/* ---------- Terminbuchung ---------- */
.booking { padding-bottom: clamp(4rem, 8vw, 7rem); }
.booking__grid { display: grid; gap: 28px; }
.booking__main { min-width: 0; }
.booking__aside { display: none; }
/* Die Buchung zeichnet ihre Schritte selbst neu und hält die Seite dabei selbst an ihrem Platz (booking.js).
   Die automatische Scroll-Verankerung des Browsers würde dabei mitschieben – auf dieser Seite ist sie aus. */
.page-termin { overflow-anchor: none; }
/* Schrittleiste: alle Schritte mit Namen, erledigte antippbar */
.stepper { display: flex; gap: 6px; margin-bottom: 20px; list-style: none; padding: 0; }
.stepper li { flex: 1; min-width: 0; display: grid; gap: 4px; }
.stepper li::before { content: ""; height: 3px; border-radius: 3px; background: var(--c-line); transition: background-color 0.4s var(--ease); }
.stepper li.is-done::before, .stepper li.is-active::before { background: linear-gradient(var(--c-gold-deep), var(--c-gold-deep)) left / 100% 100% no-repeat, var(--c-line); }
.stepper__link {
  display: block;
  min-height: 30px;
  padding: 4px 0;
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-muted);
}
.stepper li.is-active .stepper__link { color: var(--c-ink); }
.stepper li.is-done .stepper__link { color: var(--c-gold-text); }
button.stepper__link { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur) var(--ease); }
button.stepper__link:hover { text-decoration-color: currentColor; }
@media (min-width: 400px) { .stepper__link { font-size: 0.75rem; letter-spacing: 0.02em; } }
@media (min-width: 640px) { .stepper { gap: 10px; margin-bottom: 26px; } .stepper__link { letter-spacing: 0.12em; text-transform: uppercase; } }

/* Überblick der bisherigen Auswahl (am Desktop übernimmt das die Seitenspalte) */
.b-ov { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.b-ov__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 13px 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.b-ov__item .icon { width: 16px; height: 16px; color: var(--c-gold-deep); }
button.b-ov__item { cursor: pointer; }
button.b-ov__item:hover { border-color: var(--c-gold); background: #fff; }
.b-ov__item--static { padding-left: 13px; }
@media (min-width: 1000px) { .b-ov { display: none; } }

.b-step:focus { outline: none; }
.b-step__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.3rem); margin-bottom: 2px; }
.b-step__title:focus { outline: none; }
.b-step__sub { color: var(--c-ink-2); margin-bottom: 16px; font-size: var(--fs-sm); }
.b-section + .b-section { margin-top: 26px; }
.b-section__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-text); }

/* Schritt 1: gleich hohe, kompakte Zeilen – Name immer in einer Zeile, Preis & Kurzinfo darunter */
.cat-grid { display: grid; gap: 8px; }
.cat-option {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 86px;
  padding: 10px 12px 10px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.cat-option:hover { border-color: rgb(176 138 84 / 0.5); box-shadow: var(--shadow-m); }
.cat-option:active { transform: scale(0.99); }
.cat-option[aria-pressed="true"] { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); }
.cat-option__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--pebble);
  background: var(--c-gold-wash);
  color: var(--c-gold-text);
}
.cat-option__icon .icon { width: 20px; height: 20px; }
.cat-option[aria-pressed="true"] .cat-option__icon { background: var(--c-dark); color: var(--c-gold-light); }
.cat-option__text { flex: 1; min-width: 0; }
.cat-option__name { display: block; overflow: hidden; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
/* „Dauerhafte Haarentfernung“ (10,9 em) passt immer: Textbreite = Inhaltsbreite − Symbol (40), Pfeil (18), 2 Abstände */
@supports (font-size: 1cqi) { .cat-option__name { font-size: min(1.2rem, calc(8.85cqi - 7.3px)); } }
/* Kurzinfo darf zwei Zeilen haben; alle Zeilen sind trotzdem gleich hoch (Mindesthöhe) */
.cat-option__lead { display: -webkit-box; margin-top: 1px; overflow: hidden; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cat-option__from { font-weight: 500; color: var(--c-gold-text); }
.cat-option > .icon { flex: none; width: 18px; height: 18px; color: var(--c-muted); transition: transform var(--dur) var(--ease); }
.cat-option:hover > .icon { transform: translateX(3px); }
.cat-option--consult { background: radial-gradient(80% 140% at 0% 0%, rgb(224 195 142 / 0.16), transparent 60%), var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.cat-option--consult:hover { box-shadow: var(--shadow-m); border-color: var(--c-dark); }
.cat-option--consult .cat-option__icon { background: transparent; border: 1px solid rgb(224 195 142 / 0.5); color: var(--c-gold-light); }
.cat-option--consult .cat-option__lead { color: var(--c-on-dark-2); }
.cat-option--consult .cat-option__from { color: var(--c-gold-light); }
.cat-option--consult > .icon { color: var(--c-gold-light); }
@media (min-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-option--consult { grid-column: 1 / -1; } }

.aud-switch { margin-bottom: 16px; }
.opt-acc { border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); }
.opt-acc + .opt-acc { margin-top: 10px; }
.opt-acc > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}
.opt-acc > summary::-webkit-details-marker { display: none; }
.opt-acc > summary .icon { margin-left: auto; width: 20px; height: 20px; color: var(--c-muted); transition: transform 0.25s var(--ease); }
.opt-acc[open] > summary .icon { transform: rotate(180deg); }
.opt-acc__count { padding: 2px 9px; border-radius: 99px; background: var(--c-dark); color: var(--c-on-dark); font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 500; }
.opt-acc__body { padding: 0 10px 10px; }
.opt-list { display: grid; gap: 6px; }
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.opt-acc .opt { background: var(--c-surface-2); }
.opt:hover { border-color: var(--c-line-strong); }
.opt input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 7px;
  background: var(--c-surface) center / 15px no-repeat;
  cursor: pointer;
}
.opt input[type="radio"] { border-radius: 50%; }
.opt input:checked {
  background-color: var(--c-dark);
  border-color: var(--c-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f1ea' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.opt input:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; }
.opt.is-checked { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); background: var(--c-surface); }
.opt.is-included { opacity: 0.55; cursor: default; }
.opt__text { flex: 1; min-width: 0; }
.opt__name { display: block; font-weight: 500; line-height: 1.35; }
.opt__meta { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }
.opt__save {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgb(176 138 84 / 0.12);
  border: 1px solid rgb(176 138 84 / 0.28);
  color: #875e24;
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.opt__price { flex: none; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 700px) {
  .opt-acc > summary { min-height: 58px; padding: 12px 18px; font-size: 1.35rem; }
  .opt { gap: 14px; padding: 14px 16px 14px 14px; }
  .opt__meta { margin-top: 2px; font-size: var(--fs-sm); }
  .opt__save { margin-top: 6px; font-size: var(--fs-xs); }
  .opt__price { font-size: 1.3rem; }
}
.pkg-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--c-success-bg);
  color: var(--c-success);
  font-size: var(--fs-sm);
}
.pkg-hint p { flex: 1 1 220px; }
.pkg-hint .btn { --btn-bg: var(--c-success); --btn-fg: #fff; }

.booking-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px calc(-1 * var(--gutter)) 0;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgb(255 253 249 / 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}
.booking-bar__sum { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--c-ink-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-bar__sum strong { display: block; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--c-ink); }
@media (min-width: 700px) { .booking-bar__sum { font-size: var(--fs-sm); } .booking-bar__sum strong { font-size: 1.3rem; } }
@media (max-width: 419px) { .booking-bar .btn { padding-inline: 1.25em; } }
.booking-bar .btn { flex: none; }
.b-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 30px; }
.b-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 4px; font-size: var(--fs-sm); color: var(--c-ink-2); }
.b-back:hover { color: var(--c-ink); }

.next-free {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  text-align: left;
}
.next-free:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-s); }
.next-free__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pebble); background: var(--c-success-bg); color: var(--c-success); }
.next-free__text { flex: 1; min-width: 0; }
.next-free__text small { display: block; font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.next-free__text strong { display: block; font-weight: 500; }
.next-free > .icon { color: var(--c-muted); }

.cal { padding: 16px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal__month { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
.cal__nav { display: flex; gap: 8px; }
.cal__nav button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); }
.cal__nav button:hover:not(:disabled) { border-color: var(--c-ink-2); }
.cal__nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__wd { padding-block: 8px 6px; text-align: center; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 42px;
  border-radius: 12px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: #a99d8f;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.cal__day.is-open { color: var(--c-ink); font-weight: 500; }
.cal__day.is-open::after { content: ""; position: absolute; bottom: 16%; width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold-deep); }
@media (hover: hover) { .cal__day.is-open:hover { background: var(--c-gold-wash); } }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.cal__day.is-vacation { background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(207 192 171 / 0.35) 5px 6px); }
/* gewählt bleibt dunkel – auch wenn die Maus darüber ist oder der Finger gerade getippt hat */
.cal__day[aria-pressed="true"], .cal__day.is-open[aria-pressed="true"]:hover { background: var(--c-dark); color: var(--c-on-dark); }
.cal__day[aria-pressed="true"]::after { background: var(--c-gold-light); }
.cal__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 0.8125rem; color: var(--c-muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.cal__legend .lg-open { background: var(--c-gold-wash); }
.cal__legend .lg-vac { background: repeating-linear-gradient(135deg, transparent 0 3px, rgb(160 140 115 / 0.5) 3px 4px); border: 1px solid var(--c-line); }
.cal__closures { display: grid; gap: 6px; margin-top: 12px; }
/* Wochenansicht: 7 Tage nebeneinander, kompakt; Uhrzeiten des gewählten Tages direkt darunter */
.cal--week { padding: 12px; box-shadow: var(--shadow-card); }
.cal--week .cal__head { margin: 0 2px 8px 4px; }
.cal--week .cal__month { font-size: 1.15rem; }
.cal--week .cal__nav { gap: 6px; }
.cal--week .cal__nav button { width: 40px; height: 40px; }
.cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__week .cal__day { aspect-ratio: auto; min-height: 60px; align-content: center; gap: 2px; padding: 6px 0 14px; }
.cal__week .cal__wd { padding: 0; font-size: 0.6875rem; letter-spacing: 0.06em; color: inherit; opacity: 0.85; }
.cal__week .cal__num { font-size: 1rem; line-height: 1.1; }
.cal__week .cal__day.is-open::after { bottom: 8px; }
.cal__week .cal__day[aria-pressed="true"] .cal__wd { color: var(--c-gold-light); opacity: 1; }
.cal__closures p { display: flex; gap: 8px; align-items: center; font-size: 0.875rem; color: var(--c-ink-2); }
/* Tag mit Text statt Uhrzeit („nach Absprache“): nicht online buchbar, aber nicht „zu“ */
.cal__day.is-note { outline: 1px dashed var(--c-line-strong); outline-offset: -4px; color: var(--c-gold-text); }
.cal__closures .cal__note { align-items: flex-start; }
.cal__note .icon { flex: none; margin-top: 2px; }
.cal__note a { color: var(--c-gold-text); text-underline-offset: 3px; }
.cal__closures .icon { width: 16px; height: 16px; color: var(--c-gold-deep); }

.slots-wrap { margin-top: 16px; }
.slots-wrap__title { margin-bottom: 8px; font-family: var(--font-serif); font-size: clamp(1.15rem, 0.8vw + 0.98rem, 1.45rem); font-weight: 600; }
.slots-group + .slots-group { margin-top: 14px; }
.slots-group__title { margin-bottom: 8px; font-size: var(--fs-xs); color: var(--c-muted); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.slot {
  min-height: 46px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-surface);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.slot:hover { border-color: var(--c-ink-2); }
.slot[aria-pressed="true"] { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.b-taken { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--c-warn-bg); color: var(--c-warn); font-size: var(--fs-sm); }
.b-taken > .icon { flex: none; margin-top: 2px; }
.b-taken > p { flex: 1 1 200px; }
.b-taken > .btn { margin-left: auto; }
[data-live]:not(:empty) { margin-top: 18px; }
[data-live] .b-taken { margin-bottom: 0; }
.b-empty { padding: 20px; border-radius: var(--radius-m); background: var(--c-surface-2); border: 1px dashed var(--c-line-strong); text-align: center; color: var(--c-ink-2); }
.b-empty .btn { margin-top: 16px; }

.b-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.label__opt { font-weight: 400; color: var(--c-muted); letter-spacing: 0; }
.b-form .field + .field { margin-top: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .icon { width: 18px; height: 18px; color: var(--c-gold-deep); }
.choice.is-checked { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.choice.is-checked .icon { color: var(--c-gold-light); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.privacy-note { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.55; }
.form-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.summary-card { padding: 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.summary-card--compact { padding: 6px 16px 14px; box-shadow: var(--shadow-card); }
.summary-card--compact .summary-row { padding-block: 10px; }
.summary-card--compact .summary-total { margin-top: 4px; padding-top: 10px; }
.summary-card--compact .summary-total strong { font-size: 1.3rem; }
.b-add { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 40px; padding: 4px 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-gold-text); }
.b-add .icon { width: 18px; height: 18px; }
.b-add:hover { text-decoration: underline; text-underline-offset: 3px; }
.summary-card__title { margin-bottom: 10px; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-text); }
.summary-row { display: flex; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.summary-row:has(+ .summary-total) { border-bottom: 0; }
.summary-row .icon { margin-top: 2px; color: var(--c-gold-deep); }
.summary-row div { flex: 1; min-width: 0; }
.summary-row small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.summary-row button { align-self: center; padding: 6px 2px; font-size: var(--fs-xs); color: var(--c-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--c-line-strong); }
.summary-total strong { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; }
.summary-total span { font-size: var(--fs-sm); color: var(--c-ink-2); }

.aside-card { padding: 26px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
.aside-card + .aside-card { margin-top: 16px; }
.aside-card h2 { font-size: 1.5rem; margin-bottom: 10px; }
.aside-card p { font-size: 0.9375rem; color: var(--c-ink-2); }
.aside-card .contact-list { margin-block: 18px 0; }
.aside-empty { color: var(--c-muted); font-size: 0.9375rem; }

.b-success { padding-top: 10px; text-align: center; }
.b-success__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: var(--pebble);
  background: var(--c-success-bg);
  color: var(--c-success);
}
.b-success__icon .icon { width: 32px; height: 32px; stroke-width: 2; }
.b-success .summary-card { margin: 24px auto 0; max-width: 520px; text-align: left; }
.b-success__steps { display: grid; gap: 10px; max-width: 520px; margin: 22px auto 0; text-align: left; font-size: var(--fs-sm); }
.b-success__steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--c-ink-2); }
.b-success__steps .icon { margin-top: 2px; color: var(--c-gold-deep); }
.b-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px auto 0; max-width: 520px; }
.b-success__actions .btn { flex: 1 1 100%; }
@media (min-width: 640px) { .b-success__actions .btn { flex: 1 1 auto; } }
@media (min-width: 1000px) {
  .booking__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: start; }
  .booking__aside { display: block; position: sticky; top: calc(var(--header-h) + 28px); }
  /* Desktop: dieselbe Leiste als schwebende Aktionsleiste unten in der Buchungsspalte (Weiter / Absenden) */
  .booking-bar {
    bottom: 20px;
    margin: 28px 0 0;
    padding: 10px 10px 10px 24px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-m);
  }
}

/* ---------- Terminbuchung: Bewegung ----------
   Schritte gleiten in Leserichtung herein (vor: von rechts, zurück: von links), der Fortschrittsbalken
   füllt sich, Ausgewähltes ploppt kurz auf, geänderte Werte rollen herein, Uhrzeiten erscheinen
   nacheinander, und die Bestätigung feiert leise. Gesteuert über Klassen aus booking.js – immer nur
   für das, was sich gerade geändert hat. */
.booking { overflow-x: clip; } /* gleitende Schritte erzeugen nie eine seitliche Scrollleiste */

/* Platzhalter, solange die freien Termine laden (gleiche Form wie die Wochenansicht) */
.b-skel { display: grid; gap: 16px; }
.b-skel__line { display: block; width: 44%; height: 16px; margin-block: 4px; border-radius: 8px; }
.b-skel__line--sm { width: 36%; height: 14px; margin: 2px 0 12px; }
.b-skel__nav { display: block; width: 86px; height: 40px; border-radius: 20px; }
.b-skel__day { display: block; min-height: 60px; border-radius: 12px; }
.b-skel__slot { display: block; min-height: 46px; border-radius: 12px; }
/* Platzhalter beim Öffnen der Seite in Form von Schritt 1 (Schrittleiste, Überschrift, Behandlungen):
   die Seite hat sofort ihre Höhe – die Fußzeile blitzt nicht auf, nichts rückt nach, wenn die Auswahl erscheint */
.b-skel--start { gap: 0; }
.b-skel__steps { display: flex; gap: 6px; margin-bottom: 20px; }
.b-skel__bar { flex: 1; height: 3px; margin-bottom: 34px; border-radius: 3px; }
.b-skel__line--title { width: 58%; height: 26px; margin: 0 0 8px; }
.b-skel__line--sub { width: 82%; height: 14px; margin: 0 0 20px; }
.b-skel__row { display: block; min-height: 86px; border-radius: var(--radius-m); }
@media (min-width: 640px) {
  .b-skel__steps { gap: 10px; margin-bottom: 26px; }
  .b-skel__row--wide { grid-column: 1 / -1; }
}
.no-js .b-skel--start { display: none; }
.b-skel :is(.b-skel__line, .b-skel__nav, .b-skel__day, .b-skel__slot, .b-skel__bar, .b-skel__row) {
  background: linear-gradient(100deg, var(--c-bg-alt) 38%, #f8f3ec 50%, var(--c-bg-alt) 62%) 100% 0 / 300% 100% no-repeat, var(--c-bg-alt);
}

/* Bestätigung: Funken und Ring (nur Schmuck, ohne Bewegung unsichtbar) */
.b-success__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgb(47 107 63 / 0.4);
  opacity: 0;
  pointer-events: none;
}
.b-success__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--c-gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
}
.b-success__spark:nth-child(2) { --a: 18deg; --d: 54px; }
.b-success__spark:nth-child(3) { --a: 80deg; --d: 46px; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.b-success__spark:nth-child(4) { --a: 138deg; --d: 58px; }
.b-success__spark:nth-child(5) { --a: 200deg; --d: 48px; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.b-success__spark:nth-child(6) { --a: 262deg; --d: 56px; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.b-success__spark:nth-child(7) { --a: 322deg; --d: 50px; }

@media (prefers-reduced-motion: no-preference) {
  /* Schrittwechsel */
  .b-step.b-in--fwd { animation: from-r 0.48s var(--ease) backwards; }
  .b-step.b-in--back { animation: from-l 0.48s var(--ease) backwards; }
  .b-step.b-in--fade { animation: rise-sm 0.5s var(--ease) backwards; }
  .stepper li.is-filling::before { animation: bar-fill 0.75s var(--ease) 0.1s backwards; }
  /* Laser-Zonen: Gruppen klappen weich auf (neuere Browser) */
  @supports (interpolate-size: allow-keywords) {
    .opt-acc::details-content { height: 0; overflow: clip; transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
    .opt-acc[open]::details-content { height: auto; }
  }
  /* Auswahl: Häkchen ploppt auf */
  .opt input.is-pop:checked { animation: check-pop 0.42s var(--ease-pop); }
  /* geänderte Werte (Preis, Termin, Monat) rollen weich herein */
  .booking .is-changed { animation: value-in 0.42s var(--ease); }
  /* „Weiter“ wird zum ersten Mal möglich: Knopf federt einmal und zieht einen weichen Schein */
  .booking-bar .btn.is-ready { animation: btn-ready 0.75s var(--ease); }
  /* neue Zeilen in der Übersicht, neuer Paket-Tipp, aufgeklapptes Nachrichtenfeld, Hinweis „vergeben“ */
  .summary-row.is-new, .pkg-hint.is-new, .field.is-unfold, .b-taken { animation: drop-in 0.45s var(--ease) backwards; }
  /* Wochenansicht: blendet über dem Platzhalter ein; beim Blättern gleitet die neue Woche herein */
  .b-skel { animation: fade-in 0.4s var(--ease) 0.18s backwards; }
  .b-skel :is(.b-skel__line, .b-skel__nav, .b-skel__day, .b-skel__slot, .b-skel__bar, .b-skel__row) { animation: shimmer 1.6s var(--ease-in-out) 0.3s infinite; }
  .cal.is-in { animation: fade-in 0.45s var(--ease) backwards; }
  .cal__week.is-from-next { animation: from-r-sm 0.4s var(--ease) backwards; }
  .cal__week.is-from-prev { animation: from-l-sm 0.4s var(--ease) backwards; }
  /* Uhrzeiten erscheinen kurz nacheinander (Reihenfolge --i setzt booking.js) */
  .slots-wrap.is-in :is(.slots-wrap__title, .slots-group__title, .b-empty) { animation: rise-sm 0.4s var(--ease) backwards; }
  .slots-wrap.is-in .slot { animation: slot-in 0.42s var(--ease) calc(0.05s + var(--i, 0) * 16ms) backwards; }
  /* Antippen von Tag, Uhrzeit, Kontaktweg: federt kurz (steht hinter der Kaskade, damit es immer greift) */
  .cal__day.is-pop, .choice.is-pop, .slots-wrap .slot.is-pop { animation: pop 0.4s var(--ease-pop); }

  /* Bestätigung: Kiesel federt herein, Häkchen zeichnet sich, Ring und Funken lösen sich, dann der Text */
  .b-success__icon { animation: pebble-in 0.7s var(--ease-pop) backwards; }
  .b-success__icon::before { animation: ring 1.2s var(--ease) 0.25s; }
  .b-success__check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 0.5s var(--ease) 0.32s forwards; }
  .b-success__spark { animation: spark 1.05s var(--ease) 0.4s; }
  .b-success > :not(.b-success__icon) { animation: rise 0.7s var(--ease) 0.22s backwards; }
  .b-success > :nth-child(3) { animation-delay: 0.3s; }
  .b-success > :nth-child(4) { animation-delay: 0.38s; }
  .b-success > :nth-child(5) { animation-delay: 0.46s; }
  .b-success > :nth-child(n+6) { animation-delay: 0.54s; }
}
@keyframes from-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes from-l { from { opacity: 0; transform: translateX(-26px); } }
@keyframes from-r-sm { from { opacity: 0; transform: translateX(16px); } }
@keyframes from-l-sm { from { opacity: 0; transform: translateX(-16px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes bar-fill { from { background-size: 0% 100%; } }
@keyframes check-pop { from { transform: scale(0.72); background-size: 0; } }
@keyframes pop { from { transform: scale(0.9); } }
@keyframes value-in { from { opacity: 0; transform: translateY(40%); } }
@keyframes btn-ready {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(176 138 84 / 0.5); }
  45% { transform: scale(1.03); }
  100% { transform: none; box-shadow: 0 0 0 12px rgb(176 138 84 / 0); }
}
@keyframes slot-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes shimmer { to { background-position: 0 0, 0 0; } }
@keyframes pebble-in { from { opacity: 0; transform: scale(0.5) rotate(-14deg); } }
@keyframes ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-22px) scale(0.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}

/* ---------- Rechtstexte ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.45rem, 1.4vw + 1.1rem, 2.1rem); margin: 2.4rem 0 0.8rem; }
.prose h3 { font-size: clamp(1.2rem, 0.8vw + 1rem, 1.4rem); margin: 1.8rem 0 0.5rem; }
.prose p, .prose ul, .prose ol, .prose address { margin-bottom: 1.1rem; color: var(--c-ink-2); }
.prose address { font-style: normal; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 8px; }
.prose strong { color: var(--c-ink); font-weight: 500; }
.prose a { color: var(--c-gold-text); }
.prose .placeholder { padding: 0.05em 0.35em; border-radius: 4px; background: var(--c-warn-bg); color: var(--c-warn); font-size: 0.95em; }
.legal-hint {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border-radius: var(--radius-m);
  background: var(--c-warn-bg);
  color: var(--c-warn) !important;
  font-size: var(--fs-sm);
}

/* ---------- 404: Der Spark Pro lasert die „behaarte“ 404 glatt ----------
   Eigene dunkle Bühne ohne Kopf- und Fußzeile (layout „plain“) – wie ein Behandlungsraum mit gedimmtem
   Licht. Goldene 404 und Handstück stehen als SVG im HTML; notfound.js legt eine Zeichenfläche für Härchen,
   Laserlicht und Funken darüber und bewegt das Handstück. Ohne JavaScript oder bei „Bewegung reduzieren“
   bleibt die glatte 404 mit dem ruhenden Handstück stehen. Alles passt auf einen Bildschirm. */
:root { --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5Q12.9 11.1 21.5 12Q12.9 12.9 12 21.5Q11.1 12.9 2.5 12Q11.1 11.1 12 2.5Z'/%3E%3C/svg%3E"); }
.page-404 {
  background:
    radial-gradient(60% 46% at 50% 30%, rgb(224 195 142 / 0.14), transparent 72%),
    radial-gradient(130% 100% at 50% 0%, #40362e, var(--c-dark-2) 58%, #221d1a);
  background-attachment: fixed;
  color: var(--c-on-dark);
}
.page-404 ::selection { background: rgb(224 195 142 / 0.35); color: #fff; }
.nf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(14px, 3.2vh, 32px) var(--gutter) calc(12px + env(safe-area-inset-bottom));
  text-align: center;
  overflow: clip;
}
.nf :focus-visible { outline-color: var(--c-gold-light); }
/* Logo klein in der Ecke – führt ebenfalls zur Startseite */
.nf__brand {
  position: absolute;
  top: clamp(12px, 2.6vh, 26px);
  left: var(--gutter);
  z-index: 2;
  border-radius: 50%;
  transition: transform 0.5s var(--ease-spring);
}
.nf__brand:hover { transform: rotate(-10deg) scale(1.06); }
.nf__brand img { width: clamp(40px, 4.2vw, 56px); height: auto; }
/* Bühne im Seitenverhältnis der viewBox – auf flachen Bildschirmen kleiner, damit der Knopf im Bild bleibt */
.nf__stage {
  position: relative;
  width: min(100%, 760px, max(320px, (100vh - 410px) * 1.44));
  aspect-ratio: 1540 / 1070;
  margin-top: auto; /* mit dem Rand über „Impressum“: Inhalt steht senkrecht mittig */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@supports (height: 1svh) { .nf__stage { width: min(100%, 760px, max(320px, (100svh - 410px) * 1.44)); } }
.nf__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.nf__art, .nf__tool { overflow: visible; }
.nf__fx, .nf__tool { pointer-events: none; }
/* Handstück (nachempfunden dem Spark Pro: weißes Gehäuse, Metallring, Saphirfenster) */
.nf__cable { fill: none; stroke: #c9c0b4; stroke-width: 11; stroke-linecap: round; }
.nf__shell { fill: url(#nf-shell); stroke: rgb(44 38 34 / 0.28); stroke-width: 1.5; }
.nf__grip { fill: none; stroke: rgb(110 96 82 / 0.22); stroke-width: 6; stroke-linecap: round; }
.nf__label { font-family: var(--font-sans); font-size: 21px; font-weight: 500; letter-spacing: 4px; fill: #b2a594; }
.nf__led { fill: #8f806f; transition: fill 0.2s; }
.nf__collar { fill: url(#nf-metal); }
.nf__window { fill: #34413f; transition: fill 0.15s; }
.nf__tool.is-firing .nf__window { fill: #fff6de; }
.nf__tool.is-firing .nf__led { fill: #f5d697; }
/* Notiz unter der Bühne („Jetzt du …“, später der Zähler) – Platz ist reserviert, damit nichts springt */
.nf__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 1.5em;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--c-gold-light);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.nf__hint::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
}
.nf__hint.is-on { opacity: 0.92; transform: none; }
.nf__text { max-width: 900px; margin-top: clamp(6px, 1.8vh, 20px); }
.nf .eyebrow { color: var(--c-gold-light); }
.nf .eyebrow::after { content: ""; display: inline-block; width: 26px; height: 8px; margin-left: 10px; vertical-align: 0.08em; background: currentColor; opacity: 0.75; transform: scaleX(-1); -webkit-mask: var(--squiggle) center / 100% 100% no-repeat; mask: var(--squiggle) center / 100% 100% no-repeat; }
.nf h1 { margin-block: 10px 12px; color: var(--c-on-dark); font-size: clamp(2rem, 1rem + 2.8vw, 3.4rem); }
.nf h1 em { color: var(--c-gold-light); }
.nf .lead { max-width: 600px; margin-inline: auto; color: var(--c-on-dark-2); }
.nf .btn { margin-top: clamp(18px, 2.8vh, 28px); }
.nf__legal { display: flex; gap: 22px; margin-top: auto; padding-top: 24px; font-size: var(--fs-2xs); letter-spacing: 0.04em; }
.nf__legal a { color: rgb(217 206 193 / 0.5); text-decoration: none; transition: color var(--dur) var(--ease); }
.nf__legal a:hover { color: var(--c-on-dark); text-decoration: underline; }
/* sehr schmale Handys: Dachzeile ohne Schwünge, damit sie in eine Zeile passt */
@media (max-width: 359px) { .nf .eyebrow::before, .nf .eyebrow::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nf__brand { animation: rise 0.9s var(--ease) backwards; }
  .nf__stage { animation: nf-in 1.2s var(--ease) 0.05s backwards; }
}
@keyframes nf-in { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Fußzeile ---------- */
/* oben eine sanfte Welle (siehe „Wellen-Übergänge“), dahinter fließende Goldlinien */
.site-footer {
  position: relative;
  background: var(--contours) right -150px top -40px / 560px auto no-repeat, var(--c-dark-2);
  color: var(--c-on-dark-2);
  padding-top: clamp(3rem, 8vw, 5.75rem);
  font-size: var(--fs-sm);
}
.site-footer > * { position: relative; }
.site-footer__grid { display: grid; gap: 42px; }
.site-footer__brand img { width: 110px; height: auto; }
.site-footer__claim { margin-block: 20px 8px; font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.2; color: var(--c-on-dark); }
.site-footer__claim em { color: var(--c-gold-light); font-style: italic; }
.site-footer__brand .small { max-width: 300px; color: var(--c-on-dark-2); }
.site-footer__title { margin-bottom: 14px; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gold-light); }
.site-footer a { color: var(--c-on-dark); text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--c-gold-light); }
.site-footer address { margin-top: 16px; font-style: normal; line-height: 1.7; color: var(--c-on-dark-2); }
.site-footer__list { display: grid; gap: 12px; }
.site-footer__list a { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__list .icon { color: var(--c-gold-light); }
.site-footer .hours__row { border-bottom-color: rgb(246 241 234 / 0.1); font-size: var(--fs-sm); }
.site-footer .hours__row.is-closed dd { color: rgb(217 206 193 / 0.8); }
.site-footer .hours__row.is-today dt,
.site-footer .hours__row.is-today dd { color: var(--c-on-dark); }
.site-footer .hours__row.is-today dt::after { color: var(--c-gold-light); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: clamp(2.25rem, 6vw, 4rem);
  padding-block: 20px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(246 241 234 / 0.1);
  font-size: var(--fs-xs);
}
.site-footer__bottom nav { display: flex; gap: 24px; }
.studio-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  color: rgb(217 206 193 / 0.4) !important;
}
.studio-link .icon { width: 17px; height: 17px; }
.studio-link:hover { background: rgb(255 255 255 / 0.06); color: var(--c-on-dark) !important; }
.site-footer__hours { display: grid; gap: 8px; }
.site-footer__hours li { display: flex; gap: 14px; }
.site-footer__hours span { min-width: 52px; color: var(--c-on-dark); }
.site-footer__hours .is-closed { color: rgb(217 206 193 / 0.8); }
.site-footer__hours .is-note { font-style: italic; }
.site-footer .hours__row.is-note dd { color: var(--c-on-dark-2); }
.site-footer__hours-full { display: none; }
@media (max-width: 599px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .site-footer__brand, .site-footer__col--hours { grid-column: 1 / -1; }
  .site-footer__brand img { width: 76px; }
  .site-footer__claim { margin-top: 14px; font-size: 1.4rem; }
  .site-footer__col { font-size: var(--fs-xs); }
  .site-footer__list { gap: 10px; }
  .site-footer__list a { align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
  .site-footer__list .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
}
/* ganz schmale Handys: Spalten untereinander, damit nichts mitten im Wort umbricht */
@media (max-width: 359px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) and (max-width: 979px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 40px; } }
@media (min-width: 980px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.05fr 1.15fr; gap: 44px; }
  .site-footer__hours-full { display: block; }
  .site-footer__hours { display: none; }
}
@media (max-width: 979px) {
  body:not(.page-termin) .site-footer__bottom { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* ---------- Schnellzugriff (Handy) ---------- */
.page-termin .toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { .page-termin .toasts { bottom: 24px; } }
.dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px -6px rgb(44 38 34 / 0.2);
  transform: translateY(calc(100% + 40px));
  transition: transform 0.45s var(--ease);
}
.dock.is-visible { transform: none; }
.dock .btn--icon { width: 46px; min-height: 46px; color: var(--c-success); }
.dock__main { flex: 1; }
@media (min-width: 980px) { .dock { display: none; } }