/* ============================================================
   Thai-Massage — Seitenschicht über der Engine (acss-system.css).
   Nur Komponenten und Layout; Farben kommen aus den Tokens.
   Getönte Flächen und Verläufe sind inline color-mix() aus Tokens.
   ============================================================ */

/* ---------- Schriften (OFL, selbst gehostet) ---------- */
@font-face {
  font-family: "Gloock"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/gloock-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/jost-var.woff2") format("woff2");
}

/* ---------- Flächen der Seite ----------
   Band: Sandbraun unter den Massage-Karten. Karte: helles Sand darauf.
   Erde: warmes Braun für Standort und Fotostreifen. Nacht: Gutschein-Kachel. */
:root {
  --band:  light-dark(color-mix(in oklch, var(--accent-semi-dark), var(--base) 30%), var(--base-dark));
  --card:  light-dark(var(--base-light), var(--base-semi-dark));
  --earth: light-dark(var(--primary-ultra-dark), color-mix(in oklch, var(--primary-ultra-dark), black 25%));
  /* Nicht light-dark(): die Fläche trägt selbst color-scheme: dark und würde sonst
     immer den dunklen Zweig ziehen. Umschalten per Modus-Regel unten. */
  --clay:  color-mix(in oklch, var(--primary-ultra-dark), var(--base) 55%);
  --night: light-dark(var(--base-ultra-dark), color-mix(in oklch, var(--base-ultra-dark), black 35%));
  --on-dark: var(--base-ultra-light);
  --on-dark-muted: color-mix(in oklch, var(--base-ultra-light) 78%, transparent);
  --gold: var(--accent);
  --seam-h: clamp(1.75rem, 1rem + 3vw, 4.5rem);
  --display: clamp(3.4rem, 1.2rem + 9.5vw, 10.5rem);
}

/* ---------- Nutzer-Einstellungen aus der Barrierefreiheits-Leiste ---------- */
html { font-size: calc(100% * var(--user-font-scale, 1)); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Hoher Kontrast: Grund schwarz/weiß, Flächen einfarbig, Links unterstrichen. */
html[data-contrast="high"] {
  --clr-text:        light-dark(oklch(0.14 0 0), oklch(0.99 0 0));
  --clr-bg:          light-dark(oklch(1 0 0), oklch(0.10 0 0));
  --clr-surface:     var(--clr-bg);
  --clr-surface-raised: var(--clr-bg);
  --clr-text-muted:  var(--clr-text);
  --clr-border:      var(--clr-text);
  --clr-border-strong: var(--clr-text);
  --clr-link:        light-dark(oklch(0.36 0.1 40), oklch(0.88 0.08 70));
  --band: var(--clr-bg); --card: var(--clr-bg);
  --earth: oklch(0.10 0 0); --clay: oklch(0.10 0 0); --night: oklch(0.10 0 0);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}
html[data-contrast="high"] a { text-decoration: underline; text-underline-offset: 2px; }
html[data-contrast="high"] .hero__media::after { background: oklch(0.08 0 0 / 0.85); }
html[data-contrast="high"] :is(.card, .widget, .tag) { border: 1px solid var(--clr-border); }
html[data-contrast="high"] :is(.marquee, .hairline, .voices__quote-mark) { display: none; }

/* ---------- Grundlagen ---------- */
figure, blockquote, dl, dd { margin: 0; }
[hidden] { display: none !important; }
section { padding-block: 0; }
img { max-inline-size: 100%; }

body {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: var(--lh-relaxed);
  background: var(--clr-bg);
  color: var(--clr-text);
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--ff-heading);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); }
h3 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); }
p  { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
a  { color: var(--clr-link); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
/* Auf dunklen Flächen hellt der Ring auf. */
:where(.topbar, .site-header, .hero, .voucher, .location, .site-footer) :focus-visible {
  outline-color: var(--accent);
}

.skip-link:focus {
  position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 1000;
  inline-size: auto; block-size: auto; margin: 0; clip: auto; overflow: visible;
  padding: 0.75rem 1rem; background: var(--clr-surface-raised); color: var(--clr-text);
  border-radius: var(--radius-m); box-shadow: var(--shadow-lg);
}

.tag {
  display: inline-block; vertical-align: middle;
  font-family: var(--ff-body); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
  background: light-dark(var(--accent-ultra-light), color-mix(in oklch, var(--accent) 22%, transparent));
  color: light-dark(var(--accent-ultra-dark), var(--accent-light));
}

/* Feine geschwungene Linien im Hintergrund, wie mit dem Pinsel gezogen. */
.hairline {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  z-index: -1; pointer-events: none; fill: none;
  stroke: color-mix(in oklch, var(--primary) 22%, transparent); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hairline path { vector-effect: non-scaling-stroke; }

/* Geschwungene Kante mit Spitze in der Mitte (Thai-Ornament). */
.seam {
  position: absolute; inset-inline: 0; inline-size: 100%; block-size: var(--seam-h);
  display: block; pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-block-size: 3.1rem; padding: 0.8rem 2.1rem;
  font-family: var(--ff-body); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn--cta { background: var(--primary); color: var(--base-ultra-light); }
.btn--cta:hover { background: var(--primary-hover); }
.btn--cta:active { transform: translateY(1px); }
/* Auf dunklen Flächen wird der Knopf zum Bernstein-Knopf mit dunkler Schrift. */
:where(.voucher, .location) .btn--cta { background: var(--accent); color: var(--base-ultra-dark); }
:where(.voucher, .location) .btn--cta:hover { background: var(--accent-semi-light); }

/* ---------- Infobalken ---------- */
.topbar {
  color-scheme: dark;
  background: var(--night); color: var(--on-dark-muted);
  font-size: var(--text-xs); letter-spacing: 0.02em;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  align-items: center; padding-block: 0.3rem;
}
.topbar p { max-inline-size: none; margin: 0; }
.topbar__hours { display: flex; align-items: center; gap: 0.5rem; }
.topbar__hours svg { inline-size: 1rem; block-size: 1rem; color: var(--gold); flex: none; }
.topbar p.topbar__demo { margin-inline-start: auto; }
.topbar__demo strong { color: var(--gold); font-weight: 600; }
@media (max-width: 52rem) {
  .topbar__hours { display: none; }
  .topbar p.topbar__demo { margin-inline-start: 0; flex: 1 1 12rem; }
  .a11y-bar { margin-inline-start: auto; }
}

/* ---------- Kopf ---------- */
.site-header {
  color-scheme: dark;
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--night) 88%, transparent);
  backdrop-filter: blur(12px);
  color: var(--on-dark);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); min-block-size: 4.5rem;
}
.brand { display: inline-flex; flex: none; }
.brand img { block-size: 2.9rem; inline-size: auto; }
.site-nav { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); margin-inline-start: auto; }
.site-nav a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark); text-decoration: none; padding-block: 0.75rem;
  border-block-end: 1px solid transparent;
}
.site-nav a:hover { border-block-end-color: var(--gold); color: var(--gold); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-s); }
.tel-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--on-dark); text-decoration: none; font-weight: 500;
  padding: 0.5rem 0.25rem; white-space: nowrap;
}
.tel-link svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--gold); flex: none; }
.site-header .btn { min-block-size: 2.75rem; padding-inline: 1.4rem; font-size: 0.8rem; }

.burger {
  display: none; place-items: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid color-mix(in oklch, currentColor 35%, transparent); border-radius: var(--radius-pill);
}
.burger svg { inline-size: 1.4rem; block-size: 1.4rem; }
.mobile-panel {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--clr-bg); padding: var(--space-l) var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-m); overflow-y: auto;
}
.mobile-panel__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-panel__logo { block-size: 2.6rem; inline-size: auto; }
.mobile-panel .burger { display: grid; color: var(--clr-text); }
.mobile-panel a[data-nav] {
  display: block; font-family: var(--ff-heading); font-size: 2.2rem;
  color: var(--clr-text); text-decoration: none;
  padding-block: 0.5rem; border-block-end: 1px solid var(--clr-border);
}
.mobile-panel .tel-link { color: var(--clr-text); }
.mobile-panel .tel-link svg { color: var(--primary); }
body.menu-open .to-top { display: none; }

@media (max-width: 64rem) {
  .site-nav { display: none; }
  .burger { display: grid; }
}
@media (max-width: 40rem) {
  .site-header .btn, .site-header .tel-link span { display: none; }
  .site-header .tel-link { inline-size: 2.9rem; block-size: 2.9rem; justify-content: center;
    border: 1px solid color-mix(in oklch, currentColor 35%, transparent); border-radius: var(--radius-pill); }
  .brand img { block-size: 2.4rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  color: var(--base-ultra-light);
  min-block-size: min(58rem, 100svh);
  display: grid; align-items: end;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, oklch(0.2 0.03 30 / 0.55), oklch(0.16 0.03 30 / 0.78) 70%),
    linear-gradient(to top, oklch(0.16 0.03 30 / 0.85), transparent 40%);
}
.hero__inner {
  inline-size: 100%; max-inline-size: var(--width-xxl); margin-inline: auto;
  padding-inline: var(--wrapper-padding-inline);
  padding-block: clamp(4rem, 2rem + 6vw, 7rem) calc(var(--seam-h) + clamp(2rem, 1rem + 3vw, 3.5rem));
  display: grid; justify-items: center; text-align: center;
}
.hero__title {
  position: relative; isolation: isolate;
  display: grid; justify-items: start;
  font-size: var(--display); line-height: 0.86; letter-spacing: -0.02em;
  color: var(--base-ultra-light);
}
.hero__line { display: block; position: relative; z-index: 1; }
.hero__line--1 { justify-self: end; font-size: 0.72em; }
.hero__line--2 { padding-inline-start: 0.1em; }
.hero__line--3 { padding-inline-start: 0.9em; }
/* Die beiden Bernstein-Kreise aus der Quelle, hinter den Buchstaben. */
.hero__dot {
  position: absolute; z-index: 0; border-radius: 50%;
  background: var(--gold); inline-size: 0.44em; aspect-ratio: 1;
}
.hero__dot--a { inset-block-start: 0.7em; inset-inline-start: 2.72em; inline-size: 0.36em; }
.hero__dot--b { inset-block-start: 1.9em; inset-inline-start: 0.12em; inline-size: 0.52em; }
.hero__sub {
  justify-self: end; margin-block-start: 0.9em; margin-inline-end: 4%;
  font-family: var(--ff-heading); font-size: clamp(1.2rem, 0.9rem + 1.3vw, 2.1rem);
  line-height: 1.2; max-inline-size: none; color: var(--on-dark-muted);
}
.hero__title + .hero__sub { text-wrap: balance; }

.quicklinks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 4vw, 4rem); margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.quicklinks__item {
  display: grid; justify-items: center; gap: 0.45rem;
  inline-size: 7.5rem; padding: 0.4rem;
  color: var(--base-ultra-light); text-decoration: none;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3;
}
.quicklinks__item > svg:first-child { inline-size: 3.4rem; block-size: 3.4rem; transition: transform var(--transition-normal); }
.quicklinks__item:hover > svg:first-child { transform: translateY(-3px); color: var(--gold); }
.quicklinks__caret { inline-size: 0.85rem; block-size: 0.85rem; color: var(--gold); }

.seam--hero { inset-block-end: -1px; fill: var(--clr-bg); }

@media (max-width: 40rem) {
  .hero { min-block-size: 0; }
  .hero__line--1 { justify-self: start; padding-inline-start: 0.35em; }
  .hero__line--3 { padding-inline-start: 0.35em; }
  .hero__sub { justify-self: center; margin-inline-end: 0; }
  .quicklinks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
  .quicklinks__item { inline-size: auto; }
  .hero__dot--b { display: none; }
}

/* ---------- Faktenzeile ---------- */
.facts-row { padding-block: var(--space-m) 0; }
.facts-row__list {
  list-style: none; margin-block: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem;
  font-size: var(--text-s); color: var(--clr-text-muted);
}
.facts-row__list li { display: inline-flex; align-items: center; gap: 0.5rem; }
.facts-row__list > li > svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--primary); flex: none; }
.facts-row__stars { display: inline-flex; gap: 1px; color: var(--accent-dark); }
.facts-row__stars svg { inline-size: 0.95rem; block-size: 0.95rem; }

/* ---------- Einleitung + Emblem ---------- */
.intro { position: relative; isolation: isolate; padding-block: var(--section-space-l) var(--space-xl); }
.intro__statement {
  font-family: var(--ff-heading); font-size: clamp(1.6rem, 1rem + 2.3vw, 2.75rem);
  line-height: 1.22; text-align: center; max-inline-size: 30ch; margin-inline: auto;
}
.emblem {
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: var(--space-l);
  margin-block-start: var(--section-space-m);
  padding-block-end: var(--space-xl);
}
/* Vierpass mit Spitzen: eigene Form, nicht der Lotusrahmen der Quelle. */
.emblem__frame {
  inline-size: clamp(11rem, 8rem + 10vw, 15rem); aspect-ratio: 1;
  position: relative; display: grid; place-items: center;
}
.emblem__frame {
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C56 10 62 14 72 14c8 0 14 6 14 14 0 10 4 16 14 22-10 6-14 12-14 22 0 8-6 14-14 14-10 0-16 4-22 14-6-10-12-14-22-14-8 0-14-6-14-14 0-10-4-16-14-22 10-6 14-12 14-22 0-8 6-14 14-14 10 0 16-4 22-14Z'/%3E%3C/svg%3E");
}
.emblem__frame::before {
  content: ""; position: absolute; inset: -0.7rem;
  background: var(--gold);
  mask: var(--frame) center / contain no-repeat;
}
.emblem__frame img {
  position: relative; inline-size: 100%; block-size: 100%; object-fit: cover;
  mask: var(--frame) center / contain no-repeat;
}
.emblem__title { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); max-inline-size: 16ch; }
.emblem__side {
  position: absolute; inset-block-start: 38%; inset-inline-end: calc(-1 * var(--wrapper-padding-inline));
  inline-size: clamp(11rem, 6rem + 12vw, 18rem); z-index: -1;
}
.emblem__side img { display: block; inline-size: 100%; aspect-ratio: 760 / 900; object-fit: cover; }
.emblem__dot {
  position: absolute; inset-block-end: -14%; inset-inline-start: -16%;
  inline-size: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); mix-blend-mode: multiply; opacity: 0.92;
}
@media (max-width: 60rem) {
  .emblem__side { position: relative; inset: auto; inline-size: min(22rem, 80%); justify-self: end; z-index: 0; margin-block-start: var(--space-m); }
}

/* ---------- Laufschrift ---------- */
.marquee {
  overflow: hidden; padding-block: var(--space-l) var(--space-xl);
  font-family: var(--ff-heading); font-size: clamp(4.5rem, 2rem + 10vw, 11rem); line-height: 1;
  color: light-dark(color-mix(in oklch, var(--accent-semi-dark) 38%, var(--clr-bg)),
                    color-mix(in oklch, var(--accent-semi-dark) 30%, var(--clr-bg)));
  white-space: nowrap; user-select: none;
}
.marquee__track { display: inline-flex; animation: marquee 60s linear infinite; }
.marquee__track span { padding-inline-end: 0.3em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Massagen ---------- */
.treatments {
  position: relative; background: var(--band);
  padding-block: var(--space-xl) var(--section-space-l);
  margin-block: var(--seam-h);
}
.seam--up { inset-block-end: calc(100% - 1px); fill: var(--band); }
.seam--down { inset-block-start: calc(100% - 1px); fill: var(--band); }
.treatments__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-s) var(--space-xl); margin-block-end: var(--space-xl);
  color: light-dark(var(--base-ultra-dark), var(--base-ultra-light));
}
.treatments__head p { max-inline-size: 44ch; font-size: var(--text-s); }
.tag--on-band { background: var(--card); color: light-dark(var(--accent-ultra-dark), var(--accent-light)); }

.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-l) clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
/* Jede Spalte sitzt tiefer als die vorige: die Treppe der Quelle. */
.card:nth-child(4n+2) { margin-block-start: 2.5rem; }
.card:nth-child(4n+3) { margin-block-start: 5rem; }
.card:nth-child(4n+4) { margin-block-start: 7.5rem; }
.card {
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: 0.6rem;
  background: var(--card); color: var(--clr-text);
  border-radius: var(--radius-l) var(--radius-l) 1.4rem 1.4rem;
  padding-block-end: var(--space-l);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--base-ultra-dark) 8%, transparent);
}
/* Kleine Spitze unten in der Mitte. */
.card::after {
  content: ""; position: absolute; inset-block-start: calc(100% - 1px); inset-inline-start: 50%;
  inline-size: 1.6rem; block-size: 0.55rem; translate: -50% 0;
  background: var(--card); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.card__media { position: relative; inline-size: 100%; margin-block-end: 1.1rem; }
.card__media img {
  display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-l) var(--radius-l) 2.2rem 2.2rem;
}
.card__price {
  position: absolute; inset-block-end: -0.95rem; inset-inline-start: 50%; translate: -50% 0;
  white-space: nowrap;
  background: var(--base-ultra-dark); color: var(--base-ultra-light);
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 0.3rem 0.95rem; border-radius: 0.55rem;
}
.card__title { padding-inline: var(--space-m); }
.card p { font-size: 0.95rem; line-height: 1.5; padding-inline: var(--space-m); color: var(--clr-text-muted); max-inline-size: 34ch; }
.card__link {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-block-start: 0.4rem;
  min-block-size: 2.75rem; padding-inline: 0.5rem;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clr-text); text-decoration: none;
}
.card__link svg { inline-size: 0.9rem; block-size: 0.9rem; transition: transform var(--transition-fast); }
.card__link:hover { color: var(--clr-link); }
.card__link:hover svg { transform: translateX(3px); }

@media (max-width: 72rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(n) { margin-block-start: 0; }
  .card:nth-child(2n) { margin-block-start: 3rem; }
}
@media (max-width: 36rem) {
  .cards { grid-template-columns: 1fr; gap: var(--space-xl); }
  .card:nth-child(2n) { margin-block-start: 0; }
}

/* ---------- Über uns ---------- */
.about { position: relative; isolation: isolate; padding-block: var(--section-space-l); overflow: hidden; }
.about__grid {
  display: grid; gap: var(--space-l) var(--space-xl);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "title title title pim"
    "hands sub   stamp pim"
    ".     text  text  text";
  align-items: start;
}
.about__title { grid-area: title; font-size: var(--display); line-height: 0.9; color: light-dark(var(--primary-ultra-dark), var(--base-ultra-light)); white-space: nowrap; }
.stamp { grid-area: stamp; inline-size: clamp(7rem, 5rem + 5vw, 10rem); justify-self: start; align-self: center; }
.stamp svg { display: block; inline-size: 100%; overflow: visible; }
.stamp text { font-family: var(--ff-heading); font-size: 20px; letter-spacing: 0.08em; fill: var(--accent-dark); }
.stamp circle { stroke: var(--accent-dark); stroke-width: 1.2; }
.stamp use { color: var(--accent-dark); }
.about__sub {
  grid-area: sub; font-family: var(--ff-heading);
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 5rem); line-height: 1; max-inline-size: 13ch;
}
.about__photo { box-shadow: var(--shadow-lg); }
.about__photo img { display: block; inline-size: 100%; object-fit: cover; }
.about__photo--pim { grid-area: pim; rotate: 7deg; margin-block-start: var(--space-l); }
.about__photo--hands { grid-area: hands; rotate: -13deg; margin-block-start: var(--space-xl); margin-inline-start: calc(-1 * var(--space-xl)); max-inline-size: 15rem; }
.about__text {
  grid-area: text; display: grid; gap: var(--space-l);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about__text p { max-inline-size: 46ch; }
@media (max-width: 64rem) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "sub stamp" "pim hands" "text text";
  }
  .about__title { white-space: normal; }
  .about__photo--hands { margin-inline-start: 0; margin-block-start: var(--space-xl); }
  .about__text { grid-template-columns: 1fr; }
}

/* ---------- Gutscheine ---------- */
.voucher-wrap { padding-block: var(--space-l) var(--section-space-l); }
.voucher {
  color-scheme: dark;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--earth); color: var(--on-dark);
  border-radius: clamp(1.5rem, 1rem + 2vw, 3rem);
  box-shadow: var(--shadow-lg);
  padding: clamp(3rem, 2rem + 5vw, 7rem) clamp(1.5rem, 1rem + 6vw, 8rem);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-l) var(--space-xl); align-items: center;
}
.voucher__mark {
  position: absolute; z-index: -1; inset-block-end: -8%; inset-inline-start: -4%;
  inline-size: clamp(12rem, 8rem + 16vw, 26rem); block-size: auto; aspect-ratio: 1;
  color: color-mix(in oklch, var(--accent) 16%, transparent);
}
.voucher__photo { grid-column: 2; grid-row: 1; justify-self: center; inline-size: clamp(9rem, 6rem + 8vw, 14rem); }
.voucher__photo img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 0.6rem color-mix(in oklch, var(--accent) 25%, transparent); }
.voucher__title {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  font-size: var(--display); line-height: 0.9; color: var(--on-dark);
}
.voucher__title span:first-child { grid-column: 1; }
.voucher__dot { grid-column: 2; inline-size: 0.2em; aspect-ratio: 1; border-radius: 50%; background: var(--gold); margin-inline-start: 0.25em; }
.voucher__title span:last-child { grid-column: 1 / -1; padding-inline-start: 1.3em; }
.voucher__text { grid-column: 1; grid-row: 3; max-inline-size: 44ch; color: var(--on-dark-muted); }
.voucher .btn { grid-column: 2; grid-row: 3; justify-self: start; }
@media (max-width: 52rem) {
  .voucher { grid-template-columns: 1fr; }
  .voucher__photo, .voucher__text, .voucher .btn { grid-column: 1; }
  .voucher__photo { grid-row: 1; justify-self: end; }
  .voucher__title { grid-row: 2; }
  .voucher__text { grid-row: 3; }
  .voucher .btn { grid-row: 4; }
  .voucher__title span:last-child { padding-inline-start: 0.4em; }
}

/* ---------- Stimmen ---------- */
.voices { position: relative; isolation: isolate; padding-block: var(--section-space-m) var(--section-space-l); text-align: center; }
.voices__title { font-size: var(--display); line-height: 0.95; color: light-dark(var(--primary-ultra-dark), var(--base-ultra-light)); }
.voices__note { margin: var(--space-s) auto 0; max-inline-size: 52ch; font-size: var(--text-s); color: var(--clr-text-muted); }
.voices__stage { position: relative; margin-block-start: var(--space-xl); padding-inline: clamp(0rem, 6vw, 6rem); }
.voices__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xl); }
.voices__stage.is-ready .voices__list { gap: 0; }
.voices__stage.is-ready .voice:not(.is-active) { display: none; }
.voice__stars { display: inline-flex; gap: 0.2rem; color: var(--accent-dark); }
.voice__stars svg { inline-size: 1.9rem; block-size: 1.9rem; }
.voice p { margin-inline: auto; }
.voice__name { margin-block-start: 0.3rem; font-weight: 500; }
.voice__text p {
  margin: var(--space-m) auto 0; max-inline-size: 38ch;
  font-family: var(--ff-heading); font-size: clamp(1.45rem, 1rem + 1.6vw, 2.25rem); line-height: 1.3;
}
.voices__quote-mark {
  position: absolute; font-family: var(--ff-heading); font-size: clamp(7rem, 5rem + 6vw, 11rem); line-height: 1;
  color: color-mix(in oklch, var(--neutral) 45%, transparent); pointer-events: none;
}
.voices__quote-mark--open { inset-block-start: -2rem; inset-inline-end: 0; }
.voices__quote-mark--close { inset-block-end: -6rem; inset-inline-start: 0; }
.voices__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-m); margin-block-start: var(--space-xl); }
.voices__btn {
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  color: light-dark(var(--primary-ultra-dark), var(--base-ultra-light));
}
.voices__btn svg { inline-size: 1.6rem; block-size: 1.6rem; }
.voices__btn:hover { color: light-dark(var(--primary), var(--accent)); }
.voices__count { font-size: var(--text-s); color: var(--clr-text-muted); min-inline-size: 5rem; }

/* ---------- Standort ---------- */
.location {
  color-scheme: dark;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--clay); color: var(--on-dark);
  padding-block: var(--section-space-l) var(--section-space-m);
}
:root.scheme--dark { --clay: color-mix(in oklch, var(--primary-ultra-dark), black 10%); }
@media (prefers-color-scheme: dark) {
  :root:not(.scheme--light) { --clay: color-mix(in oklch, var(--primary-ultra-dark), black 10%); }
}
.location .hairline { stroke: color-mix(in oklch, var(--base-ultra-light) 16%, transparent); }
.location__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-xl); align-items: center; }
.location__title { font-size: var(--display); line-height: 0.9; color: var(--on-dark); }
.location__address { margin-block-start: var(--space-l); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 300; line-height: 1.2; }
.location__hint { font-size: var(--text-s); color: var(--on-dark-muted); }
.location__facts { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); }
.location__facts dt { font-size: var(--text-s); color: var(--on-dark-muted); }
.location__facts dd { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); font-weight: 300; }
.location__facts a { color: var(--on-dark); text-decoration-color: color-mix(in oklch, var(--gold) 70%, transparent); text-underline-offset: 0.2em; }
.location__facts a:hover { color: var(--gold); }
.hours { border-collapse: collapse; font-size: var(--text-m); }
.hours th { text-align: start; font-weight: 600; padding: 0.15rem 1.75rem 0.15rem 0; }
.hours td { padding: 0.15rem 0; }
.location__media { position: relative; }
.location__oval { border-radius: 50%; overflow: hidden; aspect-ratio: 11 / 9; rotate: -4deg; }
.location__oval img { inline-size: 100%; block-size: 100%; object-fit: cover; rotate: 4deg; scale: 1.08; }
.round-btn {
  position: absolute; inset-block-end: -2%; inset-inline-end: 4%;
  inline-size: clamp(7.5rem, 5rem + 6vw, 10.5rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: var(--accent); color: var(--base-ultra-dark);
  box-shadow: 0 0 0 0.75rem var(--clay);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;
  text-decoration: none; transition: background var(--transition-fast), transform var(--transition-normal);
}
.round-btn:hover { background: var(--accent-semi-light); transform: rotate(-6deg); }
@media (max-width: 56rem) {
  .location__grid { grid-template-columns: 1fr; }
  .location__media { max-inline-size: 34rem; }
}

.strip { margin-block-start: var(--section-space-m); overflow-x: auto; scrollbar-width: thin; }
.strip__list { list-style: none; margin: 0; padding: 0 var(--wrapper-padding-inline) var(--space-s); display: flex; gap: 1.25rem; inline-size: max-content; }
.strip__list img { display: block; inline-size: clamp(11rem, 8rem + 8vw, 16rem); aspect-ratio: 5 / 6; object-fit: cover; }

/* ---------- Online-Termin ---------- */
.booking { padding-block: var(--section-space-l); background: light-dark(var(--base-light), var(--base-dark)); }
.booking__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xl); align-items: start; }
.booking__lead { margin-block-start: var(--space-m); font-size: var(--text-l); max-inline-size: 42ch; color: var(--clr-text-muted); }
.booking__steps { margin: var(--space-l) 0 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: var(--space-m); }
.booking__steps li { counter-increment: st; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.9rem; color: var(--clr-text-muted); }
.booking__steps li::before {
  content: counter(st); grid-row: span 2;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-heading); font-size: 1.3rem; background: var(--accent); color: var(--base-ultra-dark);
}
.booking__steps strong { display: block; color: var(--clr-text); font-weight: 600; }
.booking__call { margin-block-start: var(--space-l); }
@media (max-width: 60rem) { .booking__grid { grid-template-columns: 1fr; } }

.widget {
  background: var(--clr-surface-raised); color: var(--clr-text);
  border-radius: var(--radius-l); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  display: grid; gap: var(--space-m); box-shadow: var(--shadow-lg);
}
.widget__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); }
.widget__title { font-family: var(--ff-heading); font-size: 1.9rem; line-height: 1; }
.widget__note { font-size: var(--text-xs); color: var(--clr-text-muted); max-inline-size: none; }
.widget__row { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.widget fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; min-inline-size: 0; }
.widget legend { font-size: var(--text-s); font-weight: 500; padding: 0; margin-block-end: 0.5rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--text-s); font-weight: 500; }
.field input, .field select {
  font: inherit; font-size: 1rem; min-block-size: 3rem; padding: 0.6rem 0.85rem;
  background: var(--clr-bg); color: var(--clr-text);
  border: 1px solid var(--clr-border-strong); border-radius: var(--radius-m);
}
.days, .slots { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.day, .slot { position: relative; }
.day input, .slot input { position: absolute; inset: 0; opacity: 0; margin: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
.day span, .slot span {
  display: grid; place-items: center; min-block-size: 3rem; min-inline-size: 3.4rem;
  padding: 0.35rem 0.7rem; line-height: 1.15; text-align: center; font-size: var(--text-s);
  border: 1px solid var(--clr-border-strong); border-radius: var(--radius-m);
}
.day span small { display: block; font-size: 0.72rem; color: var(--clr-text-muted); }
.day input:checked + span, .slot input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--base-ultra-light); font-weight: 600; }
.day input:checked + span small { color: inherit; }
.day input:focus-visible + span, .slot input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.widget__foot { display: grid; gap: var(--space-s); justify-items: start; }
.widget__status {
  background: light-dark(var(--accent-ultra-light), color-mix(in oklch, var(--accent) 20%, transparent));
  color: light-dark(var(--accent-ultra-dark), var(--accent-light));
  border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); font-size: var(--text-s); max-inline-size: none;
}

/* ---------- Schluss ---------- */
.closing { position: relative; isolation: isolate; padding-block: var(--section-space-l); overflow: hidden; }
.closing__lead {
  font-family: var(--ff-heading); font-size: clamp(1.6rem, 1rem + 2.3vw, 2.75rem); line-height: 1.2;
  text-align: center; max-inline-size: 30ch; margin-inline: auto;
}
.closing__media { position: relative; margin: var(--section-space-m) auto 0; max-inline-size: 58rem; }
.closing__media img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(1.25rem, 1rem + 2vw, 2.75rem); }
.closing__pill {
  position: absolute; inset-block-end: -1.4rem; inset-inline-end: -0.5rem;
  background: var(--accent); color: var(--base-ultra-dark);
  font-family: var(--ff-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); text-decoration: none;
  padding: 0.55rem 2.2rem; border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0.5rem var(--clr-bg);
}
.closing__pill:hover { background: var(--accent-semi-light); }
.closing__title {
  margin: var(--section-space-m) auto 0; max-inline-size: 58rem; padding-inline-start: clamp(0rem, 8vw, 8rem);
  font-size: clamp(2.3rem, 1.2rem + 4vw, 5rem); line-height: 1.05; text-wrap: balance;
  color: light-dark(var(--primary-ultra-dark), var(--base-ultra-light));
}

/* ---------- Fuß ---------- */
.site-footer {
  color-scheme: dark;
  background: var(--night); color: var(--on-dark-muted);
  padding-block: var(--section-space-m) var(--space-l);
}
.site-footer__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-m); }
.site-footer__logo { inline-size: clamp(11rem, 8rem + 8vw, 15rem); block-size: auto; }
.site-footer__address a, .site-footer__nav a { color: var(--on-dark); text-decoration: none; }
.site-footer__address a:hover, .site-footer__nav a:hover { color: var(--gold); text-decoration: underline; }
.site-footer__nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2rem; }
.site-footer__nav a { display: inline-block; padding-block: 0.6rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer__base {
  margin-block-start: var(--space-m); padding-block-start: var(--space-m); inline-size: 100%;
  border-block-start: 1px solid color-mix(in oklch, var(--base-ultra-light) 16%, transparent);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem var(--space-l); font-size: var(--text-s);
}

/* ---------- Barrierefreiheits-Leiste + Nach oben ---------- */
.a11y-bar { position: relative; flex: none; }
.a11y-bar__launch {
  display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
  background: transparent; color: inherit; border: 0; border-radius: 50%; cursor: pointer;
}
.a11y-bar__launch:hover, .a11y-bar__launch[aria-expanded="true"] { color: var(--gold); }
.a11y-bar__launch svg { inline-size: 1.25rem; block-size: 1.25rem; }
.a11y-bar__panel {
  color-scheme: inherit;
  position: absolute; inset-block-start: calc(100% + 0.55rem); inset-inline-end: 0; z-index: var(--z-overlay);
  inline-size: min(17rem, calc(100vw - 2.5rem)); font-size: 1rem;
  background: var(--clr-surface-raised); color: var(--clr-text);
  border: 1px solid var(--clr-border); border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
  padding: var(--space-m); display: grid; gap: var(--space-m);
}
.a11y-bar__title { font-family: var(--ff-heading); font-size: 1.5rem; }
.a11y-bar__group { display: grid; gap: 0.4rem; }
.a11y-bar__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); }
.a11y-bar__seg { display: flex; gap: 0.3rem; }
.a11y-bar__seg-btn, .a11y-bar__toggle, .a11y-bar__reset {
  font: inherit; font-size: var(--text-s); cursor: pointer;
  background: var(--clr-bg); color: var(--clr-text);
  border: 1px solid var(--clr-border-strong); border-radius: var(--radius-m);
  min-block-size: 2.75rem; padding: 0.4rem 0.7rem;
}
.a11y-bar__seg-btn { flex: 1; }
.a11y-bar__seg-btn:nth-child(2) { font-size: 1.1rem; }
.a11y-bar__seg-btn:nth-child(3) { font-size: 1.3rem; }
.a11y-bar__seg-btn[aria-pressed="true"], .a11y-bar__toggle[aria-pressed="true"] { background: var(--primary); color: var(--base-ultra-light); border-color: var(--primary); }
.a11y-bar__reset { background: transparent; }

.to-top {
  position: fixed; inset-inline-end: 1rem; inset-block-end: 1.25rem; z-index: var(--z-overlay);
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--base-ultra-dark); border: 0; border-radius: 50%;
  box-shadow: var(--shadow-md);
}
.to-top:hover { background: var(--accent-semi-light); }
.to-top svg { inline-size: 1.3rem; block-size: 1.3rem; }

/* ---------- Druck ---------- */
@media print {
  .topbar, .site-header, .to-top, .quicklinks, .marquee, .strip, .widget, .hairline, .seam { display: none !important; }
  .hero__media::after { background: none; }
  .treatments, .location, .voucher, .site-footer { background: none; color: #000; }
  body { background: #fff; color: #000; }
}