@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-400.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-700.woff2) format("woff2"); }
@font-face { font-family: "Taviraj"; font-weight: 300; font-display: swap; src: url(/fonts/taviraj-300.woff2) format("woff2"); }
@font-face { font-family: "Taviraj"; font-weight: 400; font-display: swap; src: url(/fonts/taviraj-400.woff2) format("woff2"); }
@font-face { font-family: "Taviraj"; font-weight: 500; font-display: swap; src: url(/fonts/taviraj-500.woff2) format("woff2"); }
@font-face { font-family: "Taviraj"; font-weight: 600; font-display: swap; src: url(/fonts/taviraj-600.woff2) format("woff2"); }
@font-face { font-family: "Charm"; font-weight: 400; font-display: swap; src: url(/fonts/charm-400.woff2) format("woff2"); }

:root {
  --paper: #ffffff;
  --ink: #43632a;
  --ink-deep: #34501f;
  --ink-soft: #55614b;
  --rule: #8d9c80;
  --hairline: #bccab0;
  --wash: #eef2e7;
  --ground: #e4eadc;
  --open: #5c8a1e;
  --serif: "Taviraj", Georgia, serif;
  --script: "Charm", "Taviraj", cursive;
  /* Wide enough for a phone in landscape to clear the notch. */
  --gutter: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge: clamp(90px, 12vw, 170px);
  /* The painted edges keep their brush strokes' shape (1600 × ~160): on a phone they are cropped, never squeezed. */
  --edge-w: max(100%, calc(var(--edge) * 9.5));
  --measure: 1320px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  font-family: "Montserrat", system-ui, sans-serif;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--hairline) var(--paper);
  caret-color: var(--ink);
  scroll-padding-top: 88px;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
ol, ul { list-style: none; }
::selection { background: #dce7cc; color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.nowrap, a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
.narrow-only { display: none; }
@media (max-width: 760px) {
  .narrow-only { display: inline; }
  br.narrow-only { display: block; }
  .wide-only { display: none; }
}

/* Type: Taviraj speaks, Montserrat informs, Charm signs. */
.display {
  font-family: var(--serif);
  font-size: clamp(3rem, 6.4vw, 6.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.9vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
/* Hand-lettered words: never a whole sentence of reading text, never below 1.15rem. */
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
/* The hero's ampersand, brushed in; line-height 0 keeps it from opening the line. */
.amp { font-family: var(--script); font-size: 1.22em; line-height: 0; letter-spacing: 0; }
.script-line { display: block; margin-top: 0.08em; font-family: var(--script); font-size: 1.12em; line-height: 1.15; letter-spacing: 0; }
.h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.body { margin-top: 18px; max-width: 34em; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.caps { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.split .w { display: inline-block; }
.link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: text-decoration-color 0.25s;
}
.link:active { text-decoration-color: var(--ink); }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border-radius: 999px;
  background: var(--ink); color: #f5f9ef;
  font: 600 1rem/1 "Montserrat", sans-serif; letter-spacing: 0.005em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 10px 22px -10px rgb(43 64 27 / 0.55);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.35s var(--ease-out), background-color 0.25s, box-shadow 0.35s var(--ease-out);
}
/* Pressed: answers the moment a finger lands, quicker than the hover lift. */
.btn:active { background: var(--ink-deep); transform: scale(0.97); transition-duration: 0.12s; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 0.875rem; gap: 8px; }
.btn-ghost { background: rgb(255 255 255 / 0.5); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn-ghost:active { background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink); }
/* Hover only where there is a real pointer; on touch it would stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--ink); }
  .btn:hover { background: var(--ink-deep); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 14px 26px -10px rgb(43 64 27 / 0.6); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn-ghost:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink); }
  .nav-links > ul > li > a:hover { color: var(--ink); }
  .nav-sub-list a:hover { background: var(--wash); }
  .nav-sub-list a:hover img { transform: scale(1.06) rotate(-1.5deg); }
  .service-row:hover .art { transform: scale(1.015); }
  .more:hover { text-decoration-color: var(--ink); }
  .more:hover .icon { transform: translateX(4px); }
  .card:hover { border-color: var(--rule); transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgb(43 64 27 / 0.4); }
  .service-row:hover .more .icon { transform: translateX(4px); }
  .menu-links a:hover, .menu-massages a:hover, .menu-langs a:hover { color: var(--ink-deep); }
  .menu-button:hover, .menu-close:hover { background: var(--ink-deep); }
}
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.status { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.status.is-open .status-dot { background: var(--open); }
.status.is-open .status-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--open); opacity: 0;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drift-a, .drift-b, .status.is-open .status-dot::after { animation: none; }
}

/* Intro: the page settles out of the blurred pond */
.backdrop { display: none; }
html.intro { background: var(--ground); }
html.intro .backdrop {
  display: block; position: fixed; inset: -60px; z-index: 0;
  background: url(/assets/hero-blur.webp) center 70% / cover;
  filter: blur(26px) saturate(1.05);
}
.app { position: relative; z-index: 1; background: var(--paper); }
html.intro .app { transform: scale(0.9); transform-origin: 50% 50vh; border-radius: 28px; overflow: clip; }
html.intro .hero-copy, html.intro [data-nav] { opacity: 0; }
/* Other pages: the first screen settles in; the script lifts this, or the boot script after 2.5 s. */
html.enter main > section:first-child :is(.split, [data-rise], [data-visit-card]) { opacity: 0; }
html.enter main > section:first-child .art { --paint: 0; }
html.enter main > section:first-child .fan-card { opacity: 0; }

/* Nav */
.nav {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 20;
  display: flex; align-items: center; gap: clamp(16px, 3.2vw, 48px);
  width: max-content; max-width: calc(100% - 24px);
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 0 0 1px rgb(67 99 42 / 0.08), 0 10px 30px -12px rgb(43 64 27 / 0.22);
  translate: -50% 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: auto; height: 2.08rem; }
/* The wordmark: the one serif on the site, always in tracked capitals. */
.brand-name, .footer-name { font-family: "Taviraj", serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
/* Beside the logo the name drops to the painting's weight, the castle. */
.brand-name { position: relative; top: 0.3em; font-size: 0.8rem; }
/* The links share the lowered wordmark's baseline, so name and menu read as one line.
   (Padding, not a relative offset: the massage panel below must belong to the nav, not to this list.) */
.nav-links > ul { padding-top: 0.26rem; display: flex; gap: clamp(14px, 2.4vw, 36px); }
.nav-links > ul > li > a { position: relative; display: inline-flex; align-items: center; gap: 3px; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.nav-links > ul > li > a[aria-current] { color: var(--ink); }
.nav-links > ul > li > a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--open); }
.has-sub > a .icon { width: 14px; height: 14px; margin-right: -4px; transition: rotate 0.3s var(--ease-out); }
.has-sub:is(:hover, :focus-within) > a { color: var(--ink); }
.has-sub:is(:hover, :focus-within) > a .icon { rotate: 180deg; }

/* Every massage at a glance: a sheet of paper drops from the nav while "Massagen" is hovered or focused.
   It belongs to the nav bar, so it sits centred under it whatever the screen. Closing waits a moment,
   so a pointer that slips off on its way down does not lose it. */
.nav-sub {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  width: min(720px, calc(100vw - 32px)); padding-top: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.985); transform-origin: 50% 0;
  transition: opacity 0.2s var(--ease-out) 0.12s, transform 0.3s var(--ease-out) 0.12s, visibility 0s linear 0.42s;
}
.has-sub:is(:hover, :focus-within) > .nav-sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.25s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s;
}
.nav-sub-card {
  padding: 12px; border-radius: 28px; background: var(--paper);
  box-shadow: 0 0 0 1px rgb(67 99 42 / 0.08), 0 28px 60px -24px rgb(43 64 27 / 0.35);
}
.nav-sub-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.nav-sub-list a {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 6px 12px 6px 6px; border-radius: 18px; transition: background-color 0.2s;
}
.nav-sub-list a[aria-current] { background: var(--wash); }
.nav-sub-list img { grid-row: span 2; width: 84px; height: 56px; object-fit: contain; transition: transform 0.45s var(--ease-out); }
.nav-sub-name { align-self: end; font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
.nav-sub-meta { align-self: start; margin-top: 2px; font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.nav-sub-foot { display: flex; justify-content: space-between; gap: 16px; margin: 8px 6px 0; padding: 4px 6px 0; border-top: 1px solid var(--hairline); }
.nav-sub-foot .more { padding-bottom: 4px; }

/* The menu button: two lines that cross into the close button, in the same spot. */
.menu-button, .menu-close {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--ink); color: #f5f9ef; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 18px -10px rgb(43 64 27 / 0.55);
  transition: transform 0.3s var(--ease-out), background-color 0.2s;
}
.menu-button:active, .menu-close:active { background: var(--ink-deep); transform: scale(0.92); transition-duration: 0.12s; }
.menu-lines { position: relative; display: block; width: 18px; height: 10px; }
.menu-lines::before, .menu-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
}
.menu-lines::before { top: 0; }
.menu-lines::after { bottom: 0; }
.menu-lines.is-x::before { transform: translateY(4.25px) rotate(45deg); }
.menu-lines.is-x::after { transform: translateY(-4.25px) rotate(-45deg); }
/* DE | EN: a small pill beside the call on wide screens; where the menu button shows, the choice lives in the menu. */
.lang-switch {
  display: grid; place-items: center; flex: none;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline);
  touch-action: manipulation;
  transition: box-shadow 0.2s, background-color 0.2s;
}
.lang-switch:active { background: var(--wash); }
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
/* Where the menu links get tight beside the switch, the call keeps only its icon (the number is its label). */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-call { width: 40px; padding: 0; justify-content: center; }
  .nav-call-number { display: none; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .menu-button { display: grid; }
  .nav { padding-right: 6px; }
  .lang-switch { display: none; }
}
/* Phones: the logo, the name and the menu button; the call lives in the menu and on every page.
   The bar spans the screen (16px each side), logo left, button right, so it keeps one width whatever it holds. */
@media (max-width: 760px) {
  .nav { gap: 12px; width: calc(100% - 32px); justify-content: space-between; padding-left: 16px; }
  .nav-call { display: none; }
  /* The wider bar has room: a bigger logo and a name you can read at a glance (user, 2026-11-10). */
  .brand-mark { height: 2.3rem; }
  .brand-name { font-size: 0.875rem; }
}
@media (max-width: 369px) { .brand-name { display: none; } }

/* The menu: a sheet of paper over the page, big serif links rising out of the blur. */
.menu:focus-visible { outline: none; }
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu::backdrop { background: transparent; }
html:has(.menu[open]) { overflow: hidden; }
.menu-close { display: grid; }
.menu-sheet {
  position: relative; min-height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 108px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.menu-nav, .menu-foot { position: relative; z-index: 1; }
.menu-links a {
  position: relative; display: inline-block; padding: 3px 0;
  font-family: var(--serif); font-size: clamp(2.25rem, 10vw, 3.25rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em;
  transition: color 0.2s;
}
.menu-links a:active { color: var(--ink-deep); }
.menu-links a[aria-current]::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--open);
}
.menu-label { margin-top: 30px; color: var(--ink-soft); }
.menu-massages { margin-top: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.menu-massages a, .menu-langs a { display: block; padding: 9px 0; font-size: 0.95rem; font-weight: 500; }
.menu-massages a[aria-current], .menu-langs a[aria-current] { color: var(--open); }
/* Language: a globe, then Deutsch and English side by side. */
.menu-langs { margin-top: 22px; display: flex; align-items: center; gap: 0 22px; }
.menu-langs .icon { margin-right: -10px; color: var(--ink-soft); }
.menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; justify-items: start; }
.menu-call { width: 100%; }
.menu-address { font-size: 0.875rem; color: var(--ink-soft); }
/* Most phones in a browser (700 to 860px of height left): a little less air, so the call button stays on the first screen. */
@media (max-height: 860px) {
  .menu-sheet { padding-top: calc(env(safe-area-inset-top, 0px) + 100px); }
  .menu-label { margin-top: 24px; }
  .menu-massages a, .menu-langs a { padding: 8px 0; }
  .menu-foot { padding-top: 24px; }
}
/* Short phones (SE, mini in landscape): smaller links, so the call button is on the first screen. */
@media (max-height: 700px) {
  .menu-sheet { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
  .menu-links a { font-size: clamp(1.75rem, 7.8vw, 2.2rem); padding: 1px 0; }
  .menu-label { margin-top: 16px; }
  .menu-massages a, .menu-langs a { padding: 6px 0; }
  .menu-langs { margin-top: 12px; }
  .menu-foot { padding-top: 18px; gap: 10px; }
}
.menu-lotus {
  position: absolute; z-index: 0; right: -16%; top: 18%; width: min(66%, 360px); height: auto;
  opacity: 0.2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 40%);
  mask-image: linear-gradient(to top, transparent, #000 40%);
}
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in 0.4s var(--ease-out) both; }
  .menu.is-closing { animation: menu-out 0.24s ease-in both; }
  .menu[open] .menu-lines.is-x::before, .menu[open] .menu-lines.is-x::after { animation: menu-x 0.5s var(--ease-out) both; }
  .menu[open] :is(.menu-links li, .menu-label, .menu-massages, .menu-langs, .menu-foot) { animation: menu-rise 0.8s var(--ease-out) both; }
  /* Specific enough to beat the shorthand above, which resets the delay. */
  .menu[open] .menu-sheet .menu-links li:nth-child(2) { animation-delay: 45ms; }
  .menu[open] .menu-sheet .menu-links li:nth-child(3) { animation-delay: 90ms; }
  .menu[open] .menu-sheet .menu-links li:nth-child(4) { animation-delay: 135ms; }
  .menu[open] .menu-sheet .menu-links li:nth-child(5) { animation-delay: 180ms; }
  .menu[open] .menu-sheet .menu-links li:nth-child(6) { animation-delay: 225ms; }
  .menu[open] .menu-sheet .menu-links li:nth-child(7) { animation-delay: 270ms; }
  .menu[open] .menu-sheet :is(.menu-label, .menu-massages, .menu-langs) { animation-delay: 305ms; }
  .menu[open] .menu-sheet .menu-foot { animation-delay: 365ms; }
  .menu[open] .menu-lotus { animation: menu-lotus 1.4s var(--ease-out) both; }
}
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-out { to { opacity: 0; } }
@keyframes menu-x { from { transform: none; } }
@keyframes menu-rise { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } }
@keyframes menu-lotus { from { opacity: 0; transform: translateY(40px); } }

/* Hero */
/* --sink lowers the pond and the copy together; the drip edge's faint tail falls below the fold. The mists stay put. */
/* Above the price list, so the lotus can start its drift tucked under the hero. */
.hero { --sink: calc(var(--edge) * .3); position: relative; z-index: 1; height: 100svh; min-height: 660px; overflow: hidden; background: var(--paper); }
.hero-copy {
  position: absolute; z-index: 6; left: 0; right: 0;
  top: calc(clamp(116px, 20vh, 210px) + var(--sink));
  padding: 0 20px;
  text-align: center;
}
.lede { margin-top: 18px; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 500; color: var(--ink-soft); text-wrap: balance; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
/* The pond fades into the white sky at the top and bleeds into the paper at the bottom. */
.hero-media {
  position: absolute; inset: auto 0 calc(var(--sink) * -1) 0; height: 74%; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 calc(100% - var(--sink) - 16px), transparent calc(100% - var(--sink))), url(/assets/edge-bottom.webp), linear-gradient(#000, #000);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 calc(100% - var(--sink) - 16px), transparent calc(100% - var(--sink))), url(/assets/edge-bottom.webp), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--edge-w) var(--edge), 100% calc(100% - var(--edge) + 4px);
  mask-size: 100% 100%, var(--edge-w) var(--edge), 100% calc(100% - var(--edge) + 4px);
  -webkit-mask-position: 0 0, 50% 100%, 0 0;
  mask-position: 0 0, 50% 100%, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
}
.hero-media img, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 82%;
}
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-video.is-playing { opacity: 1; }
.mist { position: absolute; z-index: 4; pointer-events: none; }
.mist img { width: 100%; height: auto; }
.mist-a { top: -6%; left: -9%; width: min(46vw, 700px); }
.mist-b { top: 4%; right: -11%; width: min(44vw, 660px); }
.drift-a { animation: drift-a 16s ease-in-out infinite alternate; }
.drift-b { animation: drift-b 19s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(34px, 6px); } }
@keyframes drift-b { to { transform: translate(-38px, 8px); } }
.petals { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

/* Prices: the lotus rises while the three lengths light up */
.prices { position: relative; background: var(--paper); overflow-x: clip; }
.prices-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  gap: clamp(24px, 5vw, 88px);
  max-width: var(--measure); min-height: 100svh;
  margin: 0 auto; padding: clamp(96px, 13vh, 150px) var(--gutter) clamp(64px, 8vh, 96px);
}
.durations { margin-top: 40px; border-top: 1px solid var(--hairline); }
.duration {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px 28px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--hairline);
}
.duration-min { display: flex; align-items: baseline; gap: 10px; }
.duration-num { font-family: var(--serif); font-size: clamp(3.75rem, 6.4vw, 5.75rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.duration-price { justify-self: end; font-family: var(--serif); font-size: clamp(1.85rem, 2.4vw, 2.3rem); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.prices-copy { grid-column: 1; grid-row: 1; }
.prices-foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; color: var(--ink-soft); }
/* The growing lotus: 9:16 frames on white paper, drawn to a canvas as you scroll.
   The edges fade out, so no frame edge ever shows against the page. */
.grow {
  position: relative; grid-column: 2; grid-row: 1; justify-self: center;
  width: min(100%, calc(min(84vh, 760px) * 9 / 16)); aspect-ratio: 9 / 16;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.grow-poster, .grow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The still bloom is for reduced motion and Save-Data. While the page opens, and once the
   lotus grows, it stays hidden, so it never flashes before the bud. */
html.intro .grow-poster, .grow.is-growing .grow-poster { visibility: hidden; }
.grow-canvas { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.grow.is-live .grow-canvas { opacity: 1; }

/* How a visit works: stamp circles fill as you read */
.ritual {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center;
  gap: clamp(28px, 5vw, 96px);
  max-width: var(--measure); margin: 0 auto;
  padding: clamp(96px, 16vh, 190px) var(--gutter);
}
.ritual-art img { width: 100%; height: auto; }
.steps { margin-top: 40px; display: grid; gap: 30px; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 20px; align-items: start; }
.step .body { margin-top: 6px; }
.stamp {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink-soft);
  font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color 0.5s var(--ease-out), color 0.5s, transform 0.5s var(--ease-out);
}
.js .step .stamp { border-color: var(--hairline); }
.js .step.is-on .stamp { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: rotate(-8deg); }
.js .step > div { transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), filter 0.6s; }
.js .step:not(.is-on) > div { opacity: 0.32; transform: translateX(-14px); filter: blur(4px); }

/* Stamp cards */
.gift {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center;
  gap: clamp(32px, 5vw, 88px) clamp(24px, 5vw, 88px);
  max-width: var(--measure); margin: 0 auto;
  padding: clamp(72px, 10vh, 120px) var(--gutter) clamp(110px, 18vh, 200px);
}
.gift-head { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; text-align: center; }
.gift-head .body { margin-inline: auto; }
/* --fan runs 0 (a neat stack) to 1 (a hand of cards); the script scrubs it. */
.fan { --fan: 1; position: relative; aspect-ratio: 1.2; }
.fan-card {
  position: absolute; left: 50%; top: 50%; width: 70%; height: auto;
  border-radius: 8px; transform-origin: 50% 130%;
  box-shadow: 0 2px 6px rgb(43 64 27 / 0.08), 0 24px 48px -22px rgb(43 64 27 / 0.42);
  translate: calc(-50% + var(--x) * var(--fan)) calc(-50% + var(--y) * var(--fan));
  rotate: calc(var(--r) * var(--fan));
}
.fan-card:nth-child(1) { --r: -13deg; --x: -12%; --y: 4%; }
.fan-card:nth-child(2) { --r: -4.5deg; --x: -4%; --y: 0%; }
.fan-card:nth-child(3) { --r: 4.5deg; --x: 4%; --y: 0%; }
.fan-card:nth-child(4) { --r: 13deg; --x: 12%; --y: 4%; }
.deals { border-top: 1px solid var(--hairline); }
.deal {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px;
  padding: 20px 0; border-bottom: 1px solid var(--hairline);
}
.deal-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
/* "10 × 30 Min." moves to its own line as a whole rather than splitting. */
.deal-offer { margin-left: 6px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.deal-unit { grid-row: 2; color: var(--ink-soft); }
.deal-value { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.deal-bonus {
  grid-column: 1 / -1; justify-self: start; margin-top: 6px;
  padding: 6px 12px; border-radius: 6px; background: var(--wash);
  font-size: 0.9rem; color: var(--ink-soft);
}
.deal-bonus strong { font-weight: 600; color: var(--ink); }
.deal-order { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding-bottom: 0; }
/* The Gutschein: the inside page behind, the cover on top, both wider and flatter than a stamp card. */
.fan-voucher { aspect-ratio: 1.5; }
.fan-voucher .fan-card { width: 84%; border-radius: 3px; transform-origin: 50% 150%; }
.fan-voucher .fan-card:nth-child(1) { --r: -6deg; --x: -7%; --y: -14%; }
.fan-voucher .fan-card:nth-child(2) { --r: 3deg; --x: 6%; --y: 14%; }

/* Visit: the same pond at dusk */
/* Dusk paints in out of the paper and bleeds back into it before the footer. */
.visit { position: relative; min-height: 100svh; overflow: hidden; background: var(--paper); color: #fff; isolation: isolate; }
.visit-art {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: url(/assets/edge-top.webp), linear-gradient(#000, #000), url(/assets/edge-bottom.webp);
  mask-image: url(/assets/edge-top.webp), linear-gradient(#000, #000), url(/assets/edge-bottom.webp);
  -webkit-mask-size: var(--edge-w) var(--edge), 100% calc(100% - 2 * var(--edge) + 8px), var(--edge-w) var(--edge);
  mask-size: var(--edge-w) var(--edge), 100% calc(100% - 2 * var(--edge) + 8px), var(--edge-w) var(--edge);
  -webkit-mask-position: 50% 0, 0 calc(var(--edge) - 4px), 50% 100%;
  mask-position: 50% 0, 0 calc(var(--edge) - 4px), 50% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* 8% spare above and below for the drift; a height here would cancel the inset and cut the painting short. */
.visit-art picture { position: absolute; inset: -8% 0; display: block; }
.visit-art img { display: block; width: 100%; height: 100%; }
.visit-art img { object-fit: cover; object-position: 72% 58%; }
.visit .petals { z-index: 0; }
.visit-inner {
  position: relative; z-index: 1;
  max-width: var(--measure); margin: 0 auto;
  padding: calc(var(--edge) + clamp(40px, 7vh, 80px)) var(--gutter) calc(var(--edge) + clamp(56px, 9vh, 110px));
}
.visit :is(.h2, .display) { max-width: 12em; text-shadow: 0 2px 24px rgb(20 28 48 / 0.35); }
.visit-lede { margin-top: 18px; max-width: 30em; color: rgb(255 255 255 / 0.94); text-shadow: 0 1px 16px rgb(20 28 48 / 0.45); }
.visit .more { color: #fff; text-decoration-color: rgb(255 255 255 / 0.5); }
.visit .more-row { margin-top: 14px; }
.visit-card {
  width: min(100%, 470px); margin-top: 32px; padding: clamp(22px, 3vw, 32px);
  border-radius: 22px; color: var(--ink);
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 34px 70px -28px rgb(0 0 0 / 0.45);
}
.visit-address { display: grid; gap: 2px; font-style: normal; font-size: 1.05rem; line-height: 1.5; }
.visit-address strong { font-weight: 700; }
.hours { margin-top: 20px; border-top: 1px solid var(--hairline); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.hours dt { color: var(--ink-soft); }
.hours dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.visit-card .status { margin-top: 14px; }
/* Ruled like the hours; each whole row is the link, a full finger's height. */
.contact { margin-top: 16px; border-top: 1px solid var(--hairline); }
.contact li {
  position: relative; display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem;
}
.contact .link::after { content: ""; position: absolute; inset: 0; }
.contact .caps { color: var(--ink-soft); }
.visit-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Footer */
.footer { padding: clamp(64px, 10vh, 96px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); text-align: center; background: var(--paper); }
.footer-logo { display: grid; justify-items: center; }
.footer-logo img { width: auto; height: 84px; }
/* Tracking also follows the last letter; pull it back so the name sits centred. */
.footer-name { margin: 16px -0.12em 0 0; font-size: 0.95rem; line-height: 1; }
/* The tagline signs off by hand under the name. */
.footer-tagline { margin-top: 8px; font-size: 1.25rem; line-height: 1.2; color: var(--ink-soft); }
.footer-line { margin-top: 28px; font-size: 0.9rem; line-height: 1.8; color: var(--ink-soft); }
.footer-line .link { font-weight: 400; }
.footer-legal { margin-top: 10px; display: flex; justify-content: center; gap: 10px; font-size: 0.85rem; }
.footer-legal .link { padding: 12px 8px; }

/* "Go deeper" links: a word and an arrow that leans forward. */
.more {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0;
  font-size: 0.95rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--hairline); text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s;
}
.more .icon { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
.more:active .icon { transform: translateX(4px); }
.more-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }

/* Painted art brushes onto the paper: motion.ts runs --paint from 0 to 1. Without it the art is simply there. */
.art { --paint: 1; position: relative; }
.art img, .art video {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--paint) * 160% - 60%), transparent calc(var(--paint) * 160%));
  mask-image: linear-gradient(100deg, #000 calc(var(--paint) * 160% - 60%), transparent calc(var(--paint) * 160%));
}
.art { transition: transform 0.8s var(--ease-out); }
/* A massage painting's clip lies exactly over its still (same painting, same paper white) and fades in once it plays. */
.art .live-video { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-out); pointer-events: none; }
.art .live-video.is-playing { opacity: 1; }

/* The close-up on a massage page: a round window onto the painting's hands or stones, a stamp ring
   around it. motion.ts opens the window, draws the ring and lets the view settle (--open, --ring, --zoom). */
.lens { --open: 1; --ring: 0; --zoom: 1; position: relative; width: min(100%, 340px); aspect-ratio: 1; }
.lens-window { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; clip-path: circle(calc(var(--open) * 50%) at 50% 50%); }
.lens-window img {
  position: absolute; max-width: none; width: 240%; height: auto;
  left: calc(50% - var(--fx) * 240%); top: calc(50% - var(--fy) * 160%);
  transform: scale(var(--zoom)); transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}
.lens-ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); overflow: visible; rotate: -90deg; }
.lens-ring circle { fill: none; stroke: var(--ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--ring); }

/* A page's first screen */
.page-hero { position: relative; overflow: hidden; background: var(--paper); padding: calc(112px + env(safe-area-inset-top, 0px)) 0 clamp(40px, 7vh, 88px); }
.page-hero-inner {
  position: relative; z-index: 6;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  max-width: var(--measure); min-height: min(72svh, 720px); margin: 0 auto; padding: 0 var(--gutter);
}
.page-hero-plain .page-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.page-hero-plain .page-hero-copy { max-width: 860px; }
.display-page { font-size: clamp(2.75rem, 5vw, 4.75rem); -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.page-hero .lede { margin-top: 20px; max-width: 31em; text-wrap: pretty; }
.page-hero .hero-actions, .section .hero-actions { justify-content: flex-start; }
.crumb { margin-bottom: 10px; }
.crumb a { display: inline-block; padding: 10px 0; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.crumb a::after { content: "/"; margin-left: 0.7em; color: var(--hairline); }
.facts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li {
  padding: 8px 14px; border-radius: 999px; background: var(--wash);
  font-size: 0.875rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.page-hero-art { position: relative; }
.page-hero-art .art { margin-inline: -4%; }
.page-hero-art .fan { width: 100%; }
.page-hero-legal { padding-bottom: 8px; }

/* Sections */
.section { max-width: var(--measure); margin: 0 auto; padding: clamp(64px, 11vh, 128px) var(--gutter); }
.section-head { max-width: 720px; }
.section-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 28px; }
.body-lead { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.5; color: var(--ink); }

/* A massage: what it is, how it goes, what it costs */
.about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 8px clamp(24px, 5vw, 96px); }
.about-head { display: grid; justify-items: start; gap: clamp(36px, 7vh, 72px); }
.about-head .lens { margin-left: 14px; }
.about-text .body:first-child { margin-top: 0; }
.flow { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 28px clamp(24px, 5vw, 96px); }
.flow-head { position: sticky; top: 120px; }
.flow .steps { margin-top: 0; }
/* A thread runs from stamp to stamp and fills as you read down (motion.ts --thread). */
.flow .step { position: relative; }
.flow .step:not(:last-child)::before, .flow .step:not(:last-child)::after {
  content: ""; position: absolute; left: 22.25px; top: 54px; bottom: -22px; width: 1.5px; border-radius: 1px; background: var(--hairline);
}
.flow .step:not(:last-child)::after { background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--thread, 1)); }
.price-panel {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 32px clamp(28px, 5vw, 88px);
  padding: clamp(28px, 5vw, 64px); border-radius: 32px; background: var(--wash);
}
.price-panel .hero-actions { margin-top: 26px; }
.price-groups { display: grid; gap: 32px; }
.price-group-name { margin-bottom: 8px; color: var(--ink-soft); }
.price-groups .durations { margin-top: 0; }
.durations-md .duration { padding: 14px 0 15px; }
.durations-md .duration-num { font-size: clamp(2.75rem, 4.2vw, 3.6rem); }
.durations-md .duration-price { font-size: clamp(1.5rem, 2vw, 1.85rem); }
.price-note { margin-top: 18px; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); }
.price-note .more { padding-bottom: 0; }

/* Massages as painted cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  position: relative; padding: 10px 10px 20px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--paper);
  transition: transform 0.4s var(--ease-out), border-color 0.25s, box-shadow 0.4s var(--ease-out);
}
.card:active { transform: scale(0.98); transition-duration: 0.12s; }
.card:focus-within { border-color: var(--ink); }
.card img { width: 100%; height: auto; }
.card-name { margin-top: 4px; padding: 0 10px; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.card-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-name a:focus-visible { outline: none; }
.card-meta { margin-top: 6px; padding: 0 10px; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }

/* /massagen/: one row per massage, art and words taking turns */
.service-list { display: grid; gap: clamp(56px, 11vh, 128px); }
.service-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 12px clamp(24px, 5vw, 88px); }
.service-row:nth-child(even) > .art { order: 2; }
.service-index { margin-bottom: 8px; font-family: var(--serif); font-size: 1rem; letter-spacing: 0.12em; color: var(--ink-soft); }
/* The whole row is the link. Above the copy, which motion.ts lifts into its own layer as it rises in. */
.service-row h2 a::after { content: ""; position: absolute; inset: -12px; z-index: 2; border-radius: 24px; }
.service-row h2 a:focus-visible { outline: none; }
.service-row h2 a:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 4px; }
.service-row .more { margin-top: 14px; }

/* A stamp-card teaser on other pages */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px clamp(28px, 5vw, 96px); }
.teaser .deals { margin-top: 28px; }

/* /preise/ */
.price-list { padding-top: 0; }
.price-block {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 24px clamp(24px, 5vw, 96px);
  padding: clamp(32px, 5vh, 56px) 0; border-top: 1px solid var(--hairline);
}
.price-block-head { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; column-gap: 16px; }
.price-block-head img { grid-row: 1; width: 100%; height: auto; }
.price-block-name { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.12; -webkit-hyphens: auto; hyphens: auto; }
.price-block-summary { grid-column: 1 / -1; margin-top: 14px; max-width: 30em; line-height: 1.65; color: var(--ink-soft); }
.price-block-head .more { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

/* /stempelkarten/, /gutscheine/ */
.deals-section, .voucher-kinds { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 28px clamp(24px, 5vw, 96px); }
/* Beside the long deal list the heading stays in view. Not on /gutscheine/: there the massage cards run
   full width below the two kinds, and a pinned heading would slide underneath their pictures. */
.deals-section .section-head { position: sticky; top: 120px; }
/* The two kinds of Gutschein, each on its pale wash; then every massage to choose from. */
.kinds { display: grid; gap: 14px; }
.kind { padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--wash); }
.kind-name { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.12; }
.kind .body { margin-top: 10px; }
.kind .more { margin-top: 6px; padding-bottom: 0; }
.voucher-massages { grid-column: 1 / -1; margin-top: clamp(16px, 4vh, 40px); }
.voucher-massages-label { margin-bottom: 16px; color: var(--ink-soft); }
.flow-art { margin: 28px -4% 0; max-width: 520px; }
/* Ordering by e-mail: a painting, what to write, the prefilled mail. */
.order { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 24px clamp(24px, 5vw, 96px); }
.order-label { margin-top: 28px; color: var(--ink-soft); }
.order-list { margin-top: 10px; max-width: 34em; border-top: 1px solid var(--hairline); }
.order-list li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--hairline); font-size: 1rem; line-height: 1.5; }
/* An empty stamp field in front of each line. */
.order-list li::before { content: ""; position: absolute; left: 2px; top: calc(12px + 0.75em - 6px); width: 12px; height: 12px; border: 1.5px solid var(--rule); border-radius: 50%; }
.order .hero-actions { margin-top: 28px; }
.order .fine { margin-top: 16px; max-width: 34em; font-size: 0.85rem; line-height: 1.6; }
/* Questions and answers: disclosure rows between hairlines, like the order list. */
.faq { max-width: calc(880px + 2 * var(--gutter)); }
.faq-list { margin-top: clamp(20px, 4vh, 36px); border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none; touch-action: manipulation;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 400; line-height: 1.3; text-wrap: pretty; }
.faq-mark { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow 0.2s; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px;
  border-radius: 1px; background: currentColor; transition: transform 0.35s var(--ease-out);
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a { padding-bottom: 22px; }
.faq-a .body { margin-top: 0; }
.faq-a .more { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover .faq-mark { box-shadow: inset 0 0 0 1px var(--ink); }
}
.price-more { margin-top: 6px; }
/* On the home page the Gutschein follows the stamp cards, which already leave room below. */
.gift + .voucher-teaser { padding-top: 0; }

/* /studio/: rooms cascading left and right */
.gallery { display: grid; gap: clamp(48px, 10vh, 120px); }
.room { width: min(100%, 780px); }
.room:nth-child(even) { margin-left: auto; }
.room .art { margin-inline: -3%; }
.room-name { margin-top: 6px; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 400; line-height: 1.1; }
.room .body { margin-top: 8px; }
.gallery-note { margin-top: clamp(48px, 8vh, 88px); text-align: center; font-family: var(--script); font-size: 1.4rem; color: var(--ink-soft); }

/* /kontakt/#anfahrt */
.directions { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 24px clamp(24px, 5vw, 96px); }
.directions-address { margin: 18px 0 26px; font-style: normal; font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
.directions .h3 { margin-top: 8px; }
.directions .hero-actions { margin-top: 26px; }
.fine { margin-top: 12px; font-size: 0.8rem; color: var(--ink-soft); }
.visit-first .visit-inner { padding-top: calc(var(--edge) + clamp(64px, 10vh, 112px)); }

/* Impressum, Datenschutz */
.prose { max-width: 760px; padding-top: 16px; }
.prose h2 { margin-top: 2.2em; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose address { margin-top: 12px; font-size: 1rem; font-style: normal; line-height: 1.75; color: var(--ink-soft); }
.prose .prose-lead { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: var(--ink); }

/* Footer: every page, then the massages */
.footer-nav { display: grid; gap: 6px; max-width: 720px; margin: 36px auto 0; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.footer-nav a { display: inline-block; padding: 9px 0; font-size: 0.95rem; }
.footer-massages a { font-size: 0.875rem; font-weight: 400; color: var(--ink-soft); }

@media (max-width: 900px) {
  .page-hero-inner, .about, .flow, .price-panel, .teaser, .price-block, .deals-section, .voucher-kinds, .order, .directions, .service-row { grid-template-columns: minmax(0, 1fr); }
  .page-hero-inner { min-height: 0; gap: 8px; }
  .page-hero-art { max-width: 640px; }
  .flow-head, :is(.deals-section, .voucher-kinds) .section-head { position: static; }
  .flow-art { margin-top: 20px; }
  .about-head { justify-items: center; gap: 28px; margin-bottom: 28px; }
  .about-head .h2 { justify-self: start; }
  .about-head .lens { width: min(72vw, 300px); margin: 14px 0; }
  .order-art { max-width: 560px; }
  .teaser > .fan { order: -1; max-width: 560px; width: 100%; margin: 0 auto; }
  .service-row:nth-child(even) > .art { order: 0; }
  .room { width: 100%; }
  /* Phones and tablets: the cards become a row to swipe, bleeding off both edges. */
  .cards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .page-hero { padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: 32px; }
  .display-page { font-size: clamp(2.3rem, 10.6vw, 3rem); }
  .page-hero-art { margin-inline: calc(var(--gutter) * -0.5); }
  .section { padding: 48px var(--gutter); }
  .price-panel { padding: 24px 20px 28px; border-radius: 24px; }
  .price-block-head { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .service-list { gap: 56px; }
  .visit-first .visit-inner { padding-top: calc(var(--edge) + 48px); }
  .footer-nav ul { gap: 0 18px; }
}

@media (max-width: 900px) {
  .prices-inner, .ritual, .gift { grid-template-columns: minmax(0, 1fr); }
  .prices-inner { min-height: 0; }
  /* Phones and tablets: the lotus grows above the price list, four fifths of the screen tall. */
  .grow, .prices-copy { grid-column: auto; grid-row: auto; }
  .grow { width: auto; height: min(80svh, 177.8vw); margin-inline: auto; }
  .ritual-art { max-width: 640px; }
  .fan { max-width: 640px; width: 100%; margin: 0 auto; }
  .fan-card { width: 62%; }
}
/* Phones: the design's first home. Sections sit closer, art leads but never buries the facts. */
@media (max-width: 760px) {
  .display { font-size: clamp(2.5rem, 12.4vw, 3.25rem); }
  .hero { min-height: 640px; }
  .hero-copy { top: calc(clamp(96px, 15svh, 140px) + var(--sink)); }
  .hero-media { height: 62%; }
  /* The sala across the water sits in the middle, a lotus either side. */
  .hero-media img, .hero-video { object-position: 74% 100%; }
  .mist-a { width: 78vw; top: -2%; left: -24%; }
  .mist-b { width: 74vw; top: 10%; right: -30%; }
  .btn { height: 50px; }
  .prices-inner { padding: 24px var(--gutter) 64px; }
  .duration { padding: 16px 0; }
  .ritual { padding: 56px var(--gutter) 64px; gap: 24px; }
  .gift { padding: 56px var(--gutter) 72px; gap: 28px; }
  .gift-head { margin: 0; text-align: left; }
  .gift-head .body { margin-inline: 0; }
  .visit { min-height: 0; }
  .visit-art img { object-position: 84% 50%; }
  .visit-inner { padding: calc(var(--edge) + 24px) var(--gutter) calc(var(--edge) + 48px); }
  .visit-actions { display: grid; }
  .footer-line > span { display: block; }
  .footer-line > .footer-sep { display: none; }
}
/* Small phones: the email needs the card's full width, so labels sit above their values. */
@media (max-width: 400px) {
  .visit-card { padding: 20px 18px; }
  .contact li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  /* Every card's offer on its own line, so the four rows match. */
  .deal-offer { display: block; margin: 2px 0 0; font-size: 1rem; }
}