/* ============================================================
   The Aesthetic House – Design-System
   Creme, Gold, Tiefschwarz. Cormorant Garamond + Jost.
   ============================================================ */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #F7F2EA;
  --bg-2: #EDE2D9; /* Rosé-Beige, Merts Wahl 02.08. (vorher #D3BFAF, war ihm zu braun/dunkel) */
  --bg-3: #E0CFC0; /* tieferes Beige NUR fürs Laufband, damit es sich von den Flächen trennt */
  --paper: #FFFDF9;
  --ink: #221D17;
  --ink-soft: #6B6156;
  --gold: #B08D57;
  --gold-2: #D6B87E;
  --gold-deep: #8F7040;
  /* Signalfarbe für Aktionspreise. Gewählt, weil sie auf allen drei Flächen
     der Seite über 5:1 Kontrast liegt — ein helleres Rot wäre auf dem Beige
     unter dem Grenzwert gelandet. */
  --aktion-rot: #B3261E;
  --gold-text: #7C6136; /* dunkles Gold für Kleintext auf hellen Flächen, >=4.5:1 */
  --dark: #17120D;
  --dark-2: #201A13;
  --creme-on-dark: #F2EADD;
  --line: rgba(34, 29, 23, .13);
  --line-gold: rgba(176, 141, 87, .38);
  --shadow: 0 22px 60px -28px rgba(34, 29, 23, .35);
  --serif: "Cormorant Garamond", "Didot", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --r: 4px;
  --nav-h: 76px;
  --pad: clamp(20px, 4.5vw, 56px);
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--ink); color: var(--bg); padding: .8em 1.4em; border-radius: 999px;
  font-size: .85rem; letter-spacing: .08em;
  transform: translateY(-300%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }
main[id] { scroll-margin-top: 0; }
section[id], .b-sektion[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  /* clip statt hidden: hidden würde die sticky-Navigation aushebeln */
  overflow-x: hidden;
  overflow-x: clip;
  /* Footer schließt auch auf kurzen Seiten (404, Impressum) unten ab */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--gold); color: #fff; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: .01em; }

.container { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad); }

/* ---------- Labels & Überschriften ---------- */
.label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 500; font-size: .76rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text);
}
.label::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.on-dark .label { color: var(--gold-text); }

.sec-head { margin-bottom: clamp(1.8rem, 3.6vw, 2.6rem); max-width: 720px; }
.sec-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-top: .9rem; }
.sec-head p { margin-top: 1rem; color: var(--ink-soft); max-width: 56ch; }
.on-dark .sec-head p { color: var(--ink-soft); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .label { justify-content: center; }
.sec-head.center .label::before { display: none; }
.sec-head.center p { margin-inline: auto; }

em.gold, .gold-i { font-style: italic; color: var(--gold-deep); }
.on-dark em.gold, .on-dark .gold-i { color: var(--gold-deep); }

section { padding-block: clamp(2.6rem, 5.5vw, 4.2rem); position: relative; }
/* Ehemals dunkle Sektionen: auf Kundenwunsch komplett hell (beige) */
.on-dark { background: var(--bg-2); color: var(--ink); }
.bg-alt { background: var(--bg-2); }
/* Auf dem warmen Beige brauchen Nebentexte dunklere Töne, sonst kippt der Kontrast */
.on-dark, .bg-alt, .page-head, footer, .marquee {
  --ink-soft: #483D33;
  --gold-text: #533E1C;
  --gold-deep: #6E552D;
  --line: rgba(34, 29, 23, .22);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 1.02em 2.2em; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  transition: color .35s ease, border-color .35s ease, background .35s ease, transform .25s ease;
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateX(-101%); transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
/* Textfarbe MUSS bei :focus-visible mitziehen, sonst steht dunkle Schrift auf der
   dunklen Füllung und der Button ist bei Tastaturbedienung unlesbar */
.btn:hover, .btn:focus-visible { color: #fff; }
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid::after { background: linear-gradient(100deg, var(--gold), var(--gold-2)); }
.btn-solid:hover, .btn-solid:focus-visible { color: var(--ink); }
.btn-gold { background: linear-gradient(100deg, var(--gold), var(--gold-2)); color: var(--ink); font-weight: 600; }
.btn-line { border: 1px solid var(--line-gold); color: var(--ink); background: transparent; }
.on-dark .btn-line { color: var(--ink); border-color: var(--line-gold); }
.btn-line:hover, .btn-line:focus-visible { border-color: transparent; }
/* Hero-Buttons: gleiche Breite, wirkt symmetrisch */
.hero .hero-ctas .btn { min-width: 260px; font-size: .76rem; }
@media (max-width: 700px) {
  /* Schmale Bildschirme: Buttons dürfen umbrechen statt den Viewport zu sprengen */
  .btn { white-space: normal; max-width: 100%; min-width: 0; }
  .hero .hero-ctas .btn { min-width: 0; }
  .hero-ctas .btn { width: min(100%, 340px); }
}
/* Im Hero liegt der Umriss-Button auf bewegtem Video: Glas-Optik statt blanker Linie */
.hero .btn-line {
  color: var(--creme-on-dark);
  background: rgba(23, 18, 13, .42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(242, 234, 221, .5);
}
.btn svg { width: 15px; height: 15px; flex: none; }

.link-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-text); padding-bottom: 4px; position: relative;
}
.link-more::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(.35); transform-origin: left;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.link-more:hover::after { transform: scaleX(1); }
.on-dark .link-more { color: var(--gold-text); }

/* ---------- Navigation ---------- */
.nav {
  /* sticky statt fixed: robuster gegen Chrome-Compositing-Fehler über Video,
     verhält sich beim Scrollen identisch (bleibt oben kleben) */
  position: sticky; top: 0; z-index: 90; height: var(--nav-h);
  margin-bottom: calc(-1 * var(--nav-h));
  display: flex; align-items: center;
  transition: background .4s ease, box-shadow .4s ease, color .4s ease;
  color: var(--creme-on-dark);
  transform: translateZ(0);
}
/* Nav nutzt die volle Fensterbreite: Logo ganz links, Menue ganz rechts */
.nav .container { width: 100%; max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav.solid, .nav.scrolled {
  background: rgba(247, 242, 234, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo {
  display: block; width: 44px; height: 46px; flex: none;
  background-color: var(--gold-2);
  -webkit-mask: url("../img/tah-monogramm.webp") center / contain no-repeat;
  mask: url("../img/tah-monogramm.webp") center / contain no-repeat;
  transition: background-color .4s ease;
}
.nav.solid .brand-logo, .nav.scrolled .brand-logo { background-color: var(--gold-deep); }
body.menu-open .nav .brand-logo { background-color: var(--gold-2); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-sub { font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; }
.nav.solid .brand-sub, .nav.scrolled .brand-sub { color: var(--gold-text); }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.nav-links > a:not(.btn), .nav-item > a {
  font-size: .74rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  position: relative; padding-block: 6px; opacity: .92;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
/* Neun Menüpunkte brauchen früher weniger Abstand, sonst läuft die Kopfzeile über */
@media (max-width: 1320px) {
  .nav-links { gap: 12px; }
  .nav-links > a:not(.btn), .nav-item > a { font-size: .7rem; letter-spacing: .1em; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 8px; }
  .nav-links > a:not(.btn), .nav-item > a { font-size: .66rem; letter-spacing: .07em; }
  .nav-links .btn { padding-inline: 1.1em; font-size: .68rem; }
  .brand-txt { display: none; }
}
.nav-links > a:not(.btn)::after, .nav-item > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav-links > a:not(.btn):hover::after, .nav-links > a.active::after,
.nav-item > a:hover::after, .nav-item > a.active::after { transform: scaleX(1); }

/* ---------- Dropdown: Kategorien unter Behandlungen ---------- */
.nav-item { position: relative; display: flex; align-items: center; height: var(--nav-h); }
.nav-item .chev { width: 10px; height: 8px; flex: none; transition: transform .3s ease; }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 12px);
  min-width: 250px; padding: .7rem 0;
  background: rgba(255, 253, 249, .98);
  border: 1px solid var(--line-gold); border-radius: 8px;
  box-shadow: 0 30px 60px -22px rgba(34, 29, 23, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s;
}
.dropdown a {
  display: flex; align-items: baseline; gap: 14px;
  padding: .62rem 1.5rem; font-size: .78rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; transition: background .25s ease, color .25s ease;
}
.dropdown a:hover, .dropdown a:focus-visible { color: var(--gold-deep); background: rgba(176, 141, 87, .1); }
.dropdown .dd-no { font-size: .6rem; color: var(--gold-text); letter-spacing: .08em; }
.nav .btn { padding: .78em 1.7em; font-size: .74rem; }
.nav-burger { display: none; z-index: 96; width: 44px; height: 44px; position: relative; }
.nav-burger span {
  position: absolute; left: 10px; right: 10px; height: 1.6px; background: currentColor;
  transition: transform .35s ease, opacity .3s ease, top .35s ease;
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger span:nth-child(3) { top: 28px; }
body.menu-open .nav-burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Mobile-Menü */
.menu {
  position: fixed; inset: 0; z-index: 94; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--nav-h) + 1.2rem) var(--pad) 2rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.76, 0, .24, 1);
  visibility: hidden;
}
.menu a.menu-link { flex: none; }
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
body.menu-open { overflow: hidden; }
/* Bei offenem Menü muss die Nav ÜBER dem Overlay liegen, sonst ist das X unerreichbar */
body.menu-open .nav {
  z-index: 95; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink);
}
body.menu-open .nav .brand-sub { color: var(--gold-text); }
body.menu-open .nav .brand-logo { background-color: var(--gold-deep); }
.menu a.menu-link {
  font-family: var(--serif); font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 500;
  padding-block: .35em; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease;
}
body.menu-open .menu a.menu-link { opacity: 1; transform: none; }
.menu a.menu-link span.no { font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; color: var(--gold-text); }
.menu-sub { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: .9rem 0 .3rem; }
.menu-sub a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.menu-foot { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.menu-foot a { color: var(--gold-text); }

/* ---------- Hero ---------- */
.hero {
  /* Video fuellt den ersten Bildschirm exakt bis auf Aktions-Band und
     Laufband auf: das Laufband schliesst buendig mit der Unterkante ab */
  position: relative; min-height: max(520px, calc(100svh - 118px));
  display: flex; align-items: flex-end;
  color: var(--creme-on-dark); overflow: hidden; background: var(--dark);
  padding: calc(var(--nav-h) + 1rem) 0 0;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: heroZoom 22s ease-in-out infinite alternate;
}
/* Fallback-Standbild strikt verstecken (der Reset "img { display:block }"
   wuerde sonst das hidden-Attribut aushebeln und am Videorand durchblitzen) */
.hero-media img.hero-fallback { display: none; position: absolute; inset: 0; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(23, 18, 13, .92) 0%, rgba(23, 18, 13, .38) 45%, rgba(23, 18, 13, .28) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.2rem, 7vh, 5.5rem); text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .78rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2);
  margin-bottom: 1.4rem;
}
.hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 36px; height: 1px; background: var(--gold-2); opacity: .7; }
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 400;
  letter-spacing: .025em; line-height: 1.18;
  margin-inline: auto;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(112%); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
body.loaded .hero h1 .line > span { transform: translateY(0); }
.hero h1 .line:nth-child(2) > span { transition-delay: .12s; }
.hero p.sub { margin-top: 1.1rem; max-width: 72ch; margin-inline: auto; color: rgba(242, 234, 221, .82); font-size: .96rem; letter-spacing: .02em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.9rem; justify-content: center; }
.hero-fade { opacity: 0; transform: translateY(18px); transition: opacity .9s ease .5s, transform .9s ease .5s; }
body.loaded .hero-fade { opacity: 1; transform: none; }

.hero-scroll {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 40px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(242, 234, 221, .65);
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 54px; background: linear-gradient(to bottom, var(--gold-2), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Intro-Overlay ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: clip-path .8s cubic-bezier(.76, 0, .24, 1) .9s, visibility 0s linear 1.8s;
  clip-path: inset(0 0 0 0);
}
.intro-logo {
  width: min(320px, 62vw); aspect-ratio: 900 / 496;
  background-color: var(--gold-deep);
  -webkit-mask: url("../img/tah-lockup.webp") center / contain no-repeat;
  mask: url("../img/tah-lockup.webp") center / contain no-repeat;
  opacity: 0; transform: scale(.92); animation: introMark 1.4s ease forwards;
}
@keyframes introMark { 20% { opacity: 0; } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
body.loaded .intro { clip-path: inset(0 0 100% 0); visibility: hidden; }
body.no-intro .intro { display: none; }

/* ---------- Marquee ---------- */
.marquee {
  --mq-bg: var(--bg-3); --mq-c: var(--gold-text);
  background: var(--mq-bg); color: var(--mq-c); overflow: hidden;
  padding-block: 1.05rem; border-block: 1px solid var(--line-gold);
  white-space: nowrap;
}
/* Nahtlose Endlos-Schleife: 4 identische Gruppen, verschoben wird um exakt
   die Hälfte (= 2 Gruppenbreiten) – dadurch kein sichtbarer Neustart */
.marquee-track { display: inline-flex; animation: mq 72s linear infinite; will-change: transform; }
.marquee-gruppe { display: inline-flex; gap: 3.2rem; padding-right: 3.2rem; flex: none; }
.marquee span {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .34em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 3.2rem; white-space: nowrap;
}
.marquee span::after { content: "✦"; font-size: .7em; color: var(--gold); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s ease var(--d, 0s), transform .85s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Goldlinie der Labels waechst beim Einblenden */
.label.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22, 1, .36, 1) .25s; }
.label.reveal.in::before { transform: scaleX(1); }

/* Bilder enthuellen sich wie ein Vorhang von links.
   WICHTIG: Der Vorhang liegt auf den Kindern, nicht auf dem Container,
   sonst meldet der IntersectionObserver nie einen Schnitt (Flaeche = 0). */
.split-media.reveal > img, .split-media.reveal > video, .split-media.reveal > .diashow {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .1s);
}
.split-media.reveal.in > img, .split-media.reveal.in > video, .split-media.reveal.in > .diashow {
  clip-path: inset(0 0 0 0);
}

/* ---------- Gold-Schimmer auf Schrift ---------- */
.schimmer {
  background: linear-gradient(105deg, var(--gold-2) 0%, var(--gold-2) 38%, #F9EDCE 50%, var(--gold-2) 62%, var(--gold-2) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-2);
  animation: schimmern 5.5s linear infinite;
}
@keyframes schimmern { from { background-position: 120% 0; } to { background-position: -100% 0; } }

/* ---------- Glanz-Streifen auf Gold-Buttons ---------- */
.btn-gold::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 36%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); z-index: -1;
  animation: glanz 7s ease-in-out infinite;
}
@keyframes glanz {
  0%, 74% { left: -60%; }
  92%, 100% { left: 140%; }
}

/* ---------- Schwebende Gold-Funken im Hero ---------- */
.funkeln { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.funke {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 237, 206, .95) 0%, rgba(214, 184, 126, .55) 45%, transparent 70%);
  opacity: 0; animation: schweben linear infinite;
}
@keyframes schweben {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: var(--fo, .4); }
  80% { opacity: var(--fo, .4); }
  100% { transform: translateY(-88vh) translateX(var(--fx, 20px)); opacity: 0; }
}
.funke:nth-child(1)  { left: 8%;  width: 5px; height: 5px; --fx: 34px;  --fo: .40; animation-duration: 13s; animation-delay: 0s; }
.funke:nth-child(2)  { left: 18%; width: 3px; height: 3px; --fx: -22px; --fo: .32; animation-duration: 16s; animation-delay: 3s; }
.funke:nth-child(3)  { left: 29%; width: 6px; height: 6px; --fx: 18px;  --fo: .45; animation-duration: 12s; animation-delay: 6s; }
.funke:nth-child(4)  { left: 41%; width: 4px; height: 4px; --fx: -30px; --fo: .35; animation-duration: 15s; animation-delay: 1.5s; }
.funke:nth-child(5)  { left: 52%; width: 3px; height: 3px; --fx: 26px;  --fo: .30; animation-duration: 17s; animation-delay: 8s; }
.funke:nth-child(6)  { left: 63%; width: 5px; height: 5px; --fx: -16px; --fo: .42; animation-duration: 13.5s; animation-delay: 4.5s; }
.funke:nth-child(7)  { left: 74%; width: 4px; height: 4px; --fx: 30px;  --fo: .36; animation-duration: 14.5s; animation-delay: 10s; }
.funke:nth-child(8)  { left: 84%; width: 6px; height: 6px; --fx: -24px; --fo: .44; animation-duration: 12.5s; animation-delay: 2s; }
.funke:nth-child(9)  { left: 93%; width: 3px; height: 3px; --fx: 14px;  --fo: .30; animation-duration: 16.5s; animation-delay: 7s; }

/* ---------- Ken-Burns in der Diashow ---------- */
.diashow .dia.aktiv { animation: diaZoom 7s ease-out forwards; }
@keyframes diaZoom { from { transform: scale(1); } to { transform: scale(1.045); } }

/* ---------- Gold-Lesebalken ---------- */
.lese-balken {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 120;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2));
  pointer-events: none;
}

/* ---------- Kategorie-Karten ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.cat-card {
  position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 4.6;
  display: flex; align-items: flex-end; color: var(--creme-on-dark);
  background: var(--dark-2); box-shadow: var(--shadow);
}
.cat-card video, .cat-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23, 18, 13, .88) 8%, rgba(23, 18, 13, .12) 55%, rgba(23, 18, 13, .05));
  transition: background .5s ease;
}
.cat-card:hover video, .cat-card:hover > img { transform: scale(1.07); }
.cat-body { position: relative; z-index: 2; padding: clamp(18px, 2.4vw, 30px); width: 100%; }
.cat-body .k-sub { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; }
.cat-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: .35rem; }
.cat-body p { font-size: .92rem; color: rgba(242, 234, 221, .8); margin-top: .5rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .55s ease, margin .55s ease; }
.cat-card:hover .cat-body p, .cat-card:focus-visible .cat-body p { max-height: 130px; opacity: 1; }
/* Touch kennt kein Hover: Text dort dauerhaft zeigen statt unsichtbar vorlesen zu lassen */
@media (max-width: 1020px) and (pointer: coarse) { .cat-body p { max-height: 130px; opacity: 1; } }
/* Text bleibt über dem KI-Badge (unten links): sonst kreuzt der aufklappende Text das Badge */
.cat-card .cat-body { padding-bottom: 56px; }
/* Desktop: alle 6 Kategorien nebeneinander in EINER Reihe (Merts Vorgabe 03.08.),
   damit man alles ohne Scrollen auf einen Blick sieht */
@media (min-width: 1021px) {
  /* Die Reihe nutzt die volle Bildschirmbreite, damit die Karten groß bleiben */
  #kategorien .container { max-width: none; padding-inline: clamp(20px, 2.5vw, 44px); }
  .cat-grid { grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.1vw, 20px); }
  .cat-card { aspect-ratio: 4 / 5.4; }
  .cat-body { padding: clamp(14px, 1.3vw, 24px); }
  .cat-card .cat-body { padding-bottom: clamp(42px, 3.4vw, 54px); }
  .cat-body .k-sub { font-size: clamp(.52rem, .5vw, .64rem); letter-spacing: .12em; }
  .cat-body h3 { font-size: clamp(1.18rem, 1.4vw, 1.8rem); }
  .cat-body p { display: none; } /* Aufklapptext ist bei schmalen Karten zu eng */
  .cat-arrow { width: clamp(32px, 2.6vw, 42px); height: clamp(32px, 2.6vw, 42px); top: 12px; right: 12px; }
  .cat-arrow svg { width: 13px; height: 13px; }
  .cat-card .ki-badge { font-size: clamp(.62rem, .62vw, .72rem); letter-spacing: .06em; padding: .4em .8em; left: 10px; bottom: 10px; }
}
.cat-arrow {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(242, 234, 221, .35); display: grid; place-items: center;
  transition: background .4s ease, transform .4s ease, border-color .4s ease;
}
.cat-arrow svg { width: 15px; height: 15px; }
.cat-card:hover .cat-arrow { background: var(--gold); border-color: var(--gold); transform: rotate(45deg); }

/* ---------- Statistiken ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); }
.stat { text-align: center; padding: clamp(1.4rem, 3vw, 2.4rem) 1rem; border: 1px solid var(--line-gold); border-radius: var(--r); background: var(--paper); }
.stat b { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4rem); color: var(--gold-deep); display: block; line-height: 1; }
.stat span { display: block; margin-top: .55rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Behandlungs-Karten (Startseite) ---------- */
.treat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.treat-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: .8rem;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.treat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-gold); }
.treat-card .t-kat { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); }
.treat-card h3 { font-size: 1.55rem; }
.treat-card p { font-size: .94rem; color: var(--ink-soft); flex: 1; }
.treat-meta { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .3rem; }
.treat-meta .preis { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.treat-meta .preis small { font-size: .58em; font-weight: 500; color: var(--gold-text); margin-left: 2px; }
.treat-meta .dauer { font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); }

/* ---------- Sektion mit Medien-Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.split-media img, .split-media video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/4.4; }

/* ---------- Diashow: Bilder blenden nacheinander weich ineinander ---------- */
.diashow { position: relative; width: 100%; overflow: hidden; }
.diashow .dia {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: auto; opacity: 0; transition: opacity 1.4s ease;
}
.diashow .dia.aktiv { opacity: 1; }
.diashow .dia:first-child { position: relative; }
.dia-punkte {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 2px; align-items: center;
  background: rgba(23, 18, 13, .4); border-radius: 999px; padding: 2px 8px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.dia-punkt {
  position: relative; width: 24px; height: 24px; border: 0; background: none; padding: 0;
}
.dia-punkt::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(255, 253, 249, .95); background: transparent;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.dia-punkt.aktiv::before { background: var(--gold-2); border-color: var(--gold-2); transform: translate(-50%, -50%) scale(1.25); }
@media (pointer: coarse) { .dia-punkt { width: clamp(26px, calc((100vw - 76px) / 9), 44px); height: 44px; } }
.dia-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 18, 13, .38); color: var(--creme-on-dark);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 234, 221, .35);
  transition: background .3s ease, border-color .3s ease;
}
.dia-pfeil svg { width: 9px; height: 15px; }
.dia-pfeil:hover, .dia-pfeil:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.dia-pfeil-zurueck { left: 12px; }
.dia-pfeil-weiter { right: 12px; }
.dia-pfeil-weiter svg { transform: scaleX(-1); }
@media (pointer: coarse) { .dia-pfeil { width: 46px; height: 46px; } }
.split-media .frame {
  position: absolute; inset: 14px; border: 1px solid rgba(214, 184, 126, .5); border-radius: 2px; pointer-events: none;
}
.signatur { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.9rem; color: var(--gold-deep); margin-top: 1.6rem; }
.signatur small { display: block; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; }
/* Aktionsbezogener Zusatz unter einem Knopf. Verschwindet mit der Aktion,
   der Knopf bleibt (siehe data-nur-aktion in main.js). */
.aktion-zusatz { margin-top: .7rem; font-size: .82rem; color: var(--gold-text); }

/* ---------- Zonen-Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: .5em 1.15em; border: 1px solid var(--line-gold); border-radius: 999px;
  font-size: .82rem; letter-spacing: .06em; color: var(--ink); background: var(--paper);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
a.chip:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* „+N weitere Leistungen": liest sich als Weiterklicken, nicht als Leistung.
   Deshalb goldene Schrift und volle Goldlinie statt der blassen 38-%-Linie. */
.chip-mehr { border-color: var(--gold); color: var(--gold-text); font-weight: 500; }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.6rem, 2.6vw, 2.3rem); display: flex; flex-direction: column; gap: 1rem;
  transition: transform .45s ease, box-shadow .45s ease;
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.stars { color: var(--gold-text); letter-spacing: .2em; font-size: .9rem; }
.quote blockquote { font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; font-weight: 500; flex: 1; }
.quote figcaption { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.quote .q-person { display: flex; align-items: center; gap: 12px; }
.quote .q-foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-gold); flex: none; }
.mem-vorort {
  display: block; text-align: center; margin-top: .8rem;
  font-size: .78rem; color: var(--ink-soft); border-bottom: 1px solid var(--line);
  padding-bottom: 2px; align-self: center;
}
.mem-vorort:hover, .mem-vorort:focus-visible { color: var(--gold-text); border-color: var(--line-gold); }
.mem-laufzeit { font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; margin-top: -0.4rem; }
/* Membership-Schalter (Beauty <-> Laser), Vorbild Orbexia */
.mem-schalter {
  display: flex; width: max-content; margin: 0 auto 2.4rem;
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: 999px; padding: 4px; box-shadow: var(--shadow);
}
.mem-tab {
  padding: .75em 2.2em; min-height: 44px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); transition: background .3s ease, color .3s ease;
}
.mem-tab.aktiv { background: var(--gold); color: #fff; }
.mem-grid.zu { display: none; }
.wiz-send .btn.zu { display: none; }
/* Zahlungsarten-Hinweis an den Bezahl-Stellen */
.zahlarten {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  margin-top: 1.1rem; font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft);
}
.zahlarten.zu { display: none; }
.link-more svg { width: 16px; height: 16px; flex: none; }
/* Pflicht-Bestätigung + Rechtshinweise an den Bezahl-Stellen */
.rechts-check {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  max-width: 560px; margin: 0 auto 1rem; font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft); cursor: pointer; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: border-color .3s ease, background .3s ease;
}
.rechts-check.zu { display: none; }
.rechts-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--gold-deep); }
.rechts-check.blinkt { border-color: var(--gold-deep); background: rgba(214, 184, 126, .18); }
/* Hinweis unter einem gesperrten Knopf: sagt, was noch fehlt, statt stumm
   zu bleiben. Leer nimmt er keinen Platz weg. */
.feld-fehler { margin: .7rem 0 0; font-size: .86rem; color: var(--gold-deep); }
.feld-fehler:empty { margin: 0; }

/* ---------- Widerruf und Kündigung ---------- */
/* Bot-Falle: für Menschen unsichtbar, aber nicht display:none — manche
   Ausfüllhelfer überspringen ausgeblendete Felder, Bots nicht. */
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld-blinkt { border-color: var(--gold-deep) !important; box-shadow: 0 0 0 3px rgba(214, 184, 126, .25) !important; }

/* Quittung nach dem Absenden: das ist der Nachweis der Kundin, deshalb
   ruhig, vollständig und ausdruckbar. */
.erkl-quittung { background: var(--paper); border: 1px solid var(--line-gold); border-radius: var(--r); padding: clamp(1.4rem, 4vw, 2.2rem); }
.erkl-quittung h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 0 0 .6rem; }
.erkl-quittung h2:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.erkl-sub { color: var(--ink-soft); margin: 0 0 1.4rem; }
.erkl-daten { display: grid; gap: 1rem; margin: 0 0 1.4rem; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.erkl-daten > div { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.erkl-daten dt { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); flex: 0 0 100%; }
.erkl-daten dd { margin: 0; font-size: 1.05rem; font-weight: 500; }
.erkl-daten .erkl-nr { letter-spacing: .1em; color: var(--gold-text); }
.erkl-label { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; }
.erkl-wortlaut { font: inherit; white-space: pre-wrap; line-height: 1.7; background: var(--bg); border-radius: var(--r); padding: 1rem 1.2rem; margin: 0 0 1.6rem; overflow-x: auto; }
.erkl-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 560px) { .erkl-daten { grid-template-columns: 1fr 1fr; } }

/* Beim Ausdrucken nur die Quittung, ohne Navigation und Fußzeile. */
@media print {
  .nav, .menu, footer, .wa-fab, .cta-bar, .seiten-punkte, .erkl-knoepfe, .wiz-hinweis { display: none !important; }
  .erkl-quittung { border-color: #999; }
  body { background: #fff; }
}
/* Der Block mit der fehlenden Auswahl bekommt kurz einen Rahmen. */
.wiz-behandlungen.blinkt, .wiz-tage.blinkt, .wiz-zeiten.blinkt {
  outline: 2px solid var(--gold); outline-offset: 6px; border-radius: var(--r);
}
.rechts-hinweis {
  max-width: 620px; margin: 0 auto 1.1rem; font-size: .76rem; line-height: 1.6; color: var(--ink-soft);
}
.rechts-hinweis.zu { display: none; }
.rechts-hinweis a { color: var(--gold-text); border-bottom: 1px solid var(--line-gold); }
/* Dieselbe Zeile, aber in der Membership-Karte unmittelbar über dem Knopf.
   Kein flex-Wachstum, sonst zieht sie die Kartenhöhen auseinander. */
/* Preisübersicht direkt über dem Abschluss-Knopf: Monatsbeitrag, Laufzeit
   und was insgesamt zusammenkommt. */
.mem-summe { border-top: 1px solid var(--line); margin: .2rem 0 .8rem; padding-top: .7rem; display: grid; gap: .3rem; }
.mem-summe > div { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.mem-summe span { color: var(--ink-soft); }
.mem-summe b { font-weight: 500; }
.mem-summe-gesamt { padding-top: .35rem; border-top: 1px dashed var(--line); font-size: .92rem !important; }
.mem-summe-gesamt b { color: var(--gold-text); font-weight: 600; }
.mem-aktion b { color: var(--aktion-rot); }
.on-dark .mem-aktion b { color: #FF8A7A; }
.on-dark .mem-summe { border-color: rgba(242, 234, 221, .2); }
.on-dark .mem-summe span { color: rgba(242, 234, 221, .7); }
.on-dark .mem-summe-gesamt b { color: #D6B87E; }
.mem-recht { font-size: .74rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 .7rem; }
.mem-recht a { color: var(--gold-text); border-bottom: 1px solid var(--line-gold); }
.on-dark .mem-recht { color: rgba(242, 234, 221, .74); }
.on-dark .mem-recht a { color: #D6B87E; border-bottom-color: rgba(214, 184, 126, .5); }
.echtheit { max-width: 640px; margin: 1.4rem auto 0; font-size: .75rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Bezahlfenster direkt auf der Seite ---------- */
.pay-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(23, 18, 13, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.pay-offen { overflow: hidden; }
body.pay-offen .pay-overlay { display: flex; }
.pay-box {
  position: relative; width: min(620px, 100%); max-height: 92svh; overflow-y: auto;
  background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 80px rgba(23, 18, 13, .35);
  padding: 1.4rem clamp(1rem, 3vw, 1.8rem) 1.8rem;
}
.pay-kopf {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem; padding-right: 2.6rem;
}
.pay-schliessen {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; color: var(--ink-soft); background: none; border: 0;
}
.pay-schliessen:hover, .pay-schliessen:focus-visible { color: var(--ink); background: var(--bg); }
.pay-laedt { padding: 2.5rem 0; text-align: center; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Sektions-Navigator (One-Pager, nur Desktop) ----------
   Kapsel mit dünnem Rand, innen Punkte; der aktive wird zum Gold-Balken. */
.seiten-punkte {
  position: fixed; right: clamp(14px, 1.6vw, 26px); top: 50%; transform: translateY(-50%);
  z-index: 60; display: none; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 11px; border-radius: 999px;
  border: 1px solid var(--line-gold); background: rgba(255, 253, 249, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .4s ease, background .4s ease;
}
@media (min-width: 1021px) { .seiten-punkte { display: flex; } }
.sp-punkt {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 10px; min-height: 10px;
}
.sp-kreis {
  display: block; width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--gold-deep); opacity: .35;
  transition: height .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, background .3s ease;
}
.sp-punkt:hover .sp-kreis, .sp-punkt:focus-visible .sp-kreis { opacity: .75; }
.sp-punkt.aktiv .sp-kreis {
  height: 26px; opacity: 1;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
}
.sp-name {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(6px, -50%);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold-text); background: var(--paper);
  border: 1px solid var(--line-gold); border-radius: 999px; padding: .35em .9em;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.sp-punkt:hover .sp-name, .sp-punkt:focus-visible .sp-name { opacity: 1; transform: translate(0, -50%); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Über dem dunklen Hero-Video */
.seiten-punkte.auf-dunkel { border-color: rgba(242, 234, 221, .4); background: rgba(23, 18, 13, .3); }
.seiten-punkte.auf-dunkel .sp-kreis { background: rgba(242, 234, 221, .9); opacity: .45; }
.seiten-punkte.auf-dunkel .sp-punkt.aktiv .sp-kreis { background: linear-gradient(180deg, var(--gold-2), var(--gold)); opacity: 1; }

/* Zwei Zahlwege: online bezahlen oder im Studio zahlen */
.zahlwahl-frage {
  font-family: var(--serif); font-size: 1.15rem; margin-bottom: 1.1rem; color: var(--ink);
}
.zahlwahl-oder {
  display: flex; align-items: center; gap: 14px; margin: 1.5rem 0;
  color: var(--ink-soft); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.zahlwahl-oder::before, .zahlwahl-oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.zahlwahl-oder.zu { display: none; }
.zahlwahl-info { font-size: .82rem; color: var(--ink-soft); margin-top: .7rem; line-height: 1.55; }
.zahllogo {
  height: 26px; width: auto; border: 1px solid var(--line); background: #fff;
  border-radius: 5px; padding: 3px 6px;
}
/* Apple/Google Pay liegen als einfarbige Symbole vor: etwas kleiner setzen,
   damit sie neben den breiten Karten-Logos optisch gleich wirken */
.zahllogo.mono { height: 26px; padding: 5px 8px; }
.feedback-mehr { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; margin-bottom: 1.4rem; }
.feedback-mehr .stars { color: var(--gold-deep); letter-spacing: .2em; font-size: .9em; }
.feedback-mehr b { color: var(--gold-deep); font-weight: 600; }

/* ---------- Membership ---------- */
/* minmax(0,1fr) + umbrechender Button: sonst drückt der lange Bezahl-Button
   ("Jetzt abschließen & bezahlen") die Spalten über die Containerbreite und die
   dritte Karte wird rechts abgeschnitten */
.mem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.mem-card .btn { white-space: normal; max-width: 100%; }
.mem-card {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.7rem, 2.8vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.mem-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.mem-card.beliebt { border-color: var(--gold); box-shadow: 0 24px 70px -30px rgba(176, 141, 87, .55); }
.mem-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(100deg, var(--gold), var(--gold-2)); color: var(--ink);
  font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  padding: .5em 1.3em; border-radius: 999px; white-space: nowrap;
}
.mem-card h3 { font-size: 1.7rem; }
.mem-preis { font-family: var(--serif); font-size: 2.9rem; font-weight: 600; line-height: 1; }
.mem-preis small { font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--ink-soft); letter-spacing: .04em; }
.mem-claim { color: var(--ink-soft); font-size: .95rem; }
.mem-card ul { display: flex; flex-direction: column; gap: .55rem; flex: 1; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.mem-card li { display: flex; gap: 10px; font-size: .93rem; align-items: flex-start; }
.mem-card li::before { content: "✦"; color: var(--gold); font-size: .72em; margin-top: .45em; flex: none; }
.mem-dark .mem-card { background: var(--paper); border-color: var(--line); color: var(--ink); }
.mem-dark .mem-card.beliebt { border-color: var(--gold); }
.mem-dark .mem-card .mem-claim, .mem-dark .mem-card .mem-preis small { color: var(--ink-soft); }
.mem-dark .mem-card ul { border-color: var(--line); }

/* ---------- Akkordeon ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 1.15rem 4px; text-align: left; font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
}
.acc-btn .acc-ic { width: 30px; height: 30px; border: 1px solid var(--line-gold); border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .4s ease, background .4s ease; position: relative; }
.acc-ic::before, .acc-ic::after { content: ""; position: absolute; background: var(--gold-deep); transition: inherit; }
.acc-ic::before { width: 11px; height: 1.4px; }
.acc-ic::after { width: 1.4px; height: 11px; }
.acc-item.open .acc-ic { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.acc-item.open .acc-ic::before, .acc-item.open .acc-ic::after { background: #fff; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.65, 0, .35, 1); }
.acc-panel-in { padding: 0 4px 1.3rem; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); counter-reset: step; }
.step { position: relative; padding: clamp(1.6rem, 2.6vw, 2.3rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--serif); font-size: 3.4rem; font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold); display: block; margin-bottom: 1rem;
}
.step h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.step p { font-size: .95rem; color: var(--ink-soft); }

/* ---------- Aktionen ---------- */
/* Drei Vorteile nebeneinander statt einer breiten Karte mit zweien darunter
   (Vorgabe Mert 05.08.2026: „3 kleine und alle nebeneinander"). auto-fit statt
   fester Spaltenzahl: unter rund 900 px werden daraus zwei, auf dem Handy eine
   — ohne dass eine Karte als Waise allein in der Reihe steht. */
.aktion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.aktion {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--paper); color: var(--ink); padding: clamp(1.5rem, 2.2vw, 2.1rem);
  border: 1px solid var(--line-gold);
  display: flex; flex-direction: column;
}
.aktion::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 184, 126, .35), transparent 65%);
}
.aktion .a-tag { font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); }
/* Kleiner als vorher: in einer Drittel-Spalte lief die alte Größe über drei
   Zeilen und die Karte wurde wieder so hoch wie die breite Fassung. */
.aktion h3 { font-size: clamp(1.35rem, 1.7vw, 1.75rem); margin-block: .5rem .6rem; }
.aktion p { color: var(--ink-soft); font-size: .92rem; max-width: 46ch; }
/* Der Knopf sitzt unten bündig, egal wie lang die Texte daneben sind. */
.aktion .hero-ctas { margin-top: auto; padding-top: 1.2rem; }
.aktion .hero-ctas .btn { width: 100%; }

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); }
.k-liste { display: flex; flex-direction: column; gap: 1.5rem; }
.k-item { display: flex; gap: 18px; align-items: flex-start; }
.k-item .k-ic {
  width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--line-gold);
  display: grid; place-items: center; color: var(--gold-deep);
}
.k-item .k-ic svg { width: 19px; height: 19px; }
.k-item b { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .2rem; }
.k-item a:hover { color: var(--gold-deep); }
.zeiten-tab { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: clamp(1.6rem, 2.6vw, 2.4rem); }
.zeiten-tab h3 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.zeiten-tab dl { display: flex; flex-direction: column; }
.zeiten-tab .z-row { display: flex; justify-content: space-between; gap: 16px; padding-block: .8rem; border-bottom: 1px solid var(--line); font-size: .97rem; }
.zeiten-tab .z-row:last-child { border-bottom: 0; }
.zeiten-tab dt { color: var(--ink-soft); }
.zeiten-tab dd { font-weight: 400; }
.zeiten-tab .heute { color: var(--gold-text); font-weight: 500; }

/* ---------- Karte (selbst gehostet, klick oeffnet Google-Maps-Route) ---------- */
.karte {
  position: relative; display: block; margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.karte img {
  width: 100%; height: clamp(240px, 32vw, 460px); object-fit: cover; object-position: 50% 50%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.karte:hover img { transform: scale(1.03); }
.karte-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 3;
  width: 40px; height: 48px; pointer-events: none;
}
.karte-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 34px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(143, 112, 64, .45), transparent 70%);
  animation: pinPuls 2.4s ease-in-out infinite;
}
@keyframes pinPuls { 0%, 100% { transform: translateX(-50%) scale(.7); opacity: .5; } 50% { transform: translateX(-50%) scale(1.15); opacity: 1; } }
.karte-cta {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 253, 249, .95); border: 1px solid var(--line-gold); border-radius: 999px;
  padding: .7em 1.4em; font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); transition: background .3s ease;
}
.karte:hover .karte-cta { background: var(--gold-2); }
.karte-quelle {
  position: absolute; right: 8px; bottom: 6px; z-index: 3;
  font-size: .62rem; color: rgba(34, 29, 23, .55);
  background: rgba(255, 253, 249, .7); padding: .15em .6em; border-radius: 4px;
}

/* ---------- Footer ---------- */
footer { background: var(--bg-2); color: var(--ink-soft); padding: clamp(3.4rem, 7vw, 5.5rem) 0 2rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.brand-logo-lockup {
  display: block; width: 210px; aspect-ratio: 900 / 496; margin-bottom: 1.2rem;
  background-color: var(--gold-deep);
  -webkit-mask: url("../img/tah-lockup.webp") center / contain no-repeat;
  mask: url("../img/tah-lockup.webp") center / contain no-repeat;
}
.foot-brand p { font-size: .92rem; max-width: 34ch; }
footer h4 { font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 1.1rem; }
.foot-grid ul { display: flex; flex-direction: column; gap: .55rem; font-size: .94rem; }
.foot-grid a:hover { color: var(--gold-deep); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; font-size: .78rem; color: var(--ink-soft); }
.foot-legal a:hover { color: var(--gold-deep); }
/* Social-Icons in der Marken-Spalte */
/* Hatice-Porträt im Vertrauensblock: Hochformat, mittig, nicht zu wuchtig */
#studio .hatice-portraet { max-width: 460px; margin-inline: auto; }
#studio .hatice-portraet img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--r); display: block;
}
#studio .split { align-items: center; }
@media (max-width: 800px) {
  #studio .hatice-portraet { max-width: 340px; }
}
/* Gutschein-Hinweis bei den Memberships: kompakt, aber sichtbar */
.tabbar-wrap { transition: opacity .3s ease, transform .3s ease; }
.tabbar-wrap.weg { opacity: 0; transform: translateY(-8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tabbar-wrap { transition: none; } }
.b-preis .b-alt {
  font-family: var(--sans); font-size: .78rem; font-weight: 400;
  color: var(--ink-soft); opacity: .75; margin-right: .35em; text-decoration-thickness: 1px;
}
.gutschein-hinweis {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  max-width: 860px; margin: 2.6rem auto 0; padding: 1.2rem clamp(1.1rem, 2.2vw, 1.8rem);
  background: var(--paper); border: 1px solid var(--line-gold); border-radius: var(--r);
  box-shadow: var(--shadow); text-align: left;
}
.gutschein-hinweis .gh-ic {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-deep);
  background: rgba(214, 184, 126, .16);
}
.gutschein-hinweis .gh-ic svg { width: 22px; height: 22px; }
.gutschein-hinweis .gh-text { flex: 1; min-width: 0; }
.gutschein-hinweis b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; display: block; }
.gutschein-hinweis p { font-size: .86rem; color: var(--ink-soft); margin-top: .25rem; }
.gutschein-hinweis .btn { flex: none; }
@media (max-width: 700px) {
  .gutschein-hinweis { flex-direction: column; text-align: center; gap: 12px; }
  .gutschein-hinweis .gh-text { text-align: center; }
  .gutschein-hinweis .btn { width: 100%; }
}
.foot-social { display: flex; gap: 10px; margin-top: 1.4rem; }
.foot-social a {
  /* 44 px ist das Mindestmaß, das ein Daumen sicher trifft (WCAG 2.5.5). */
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-gold); color: var(--gold-deep);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.foot-social a:hover, .foot-social a:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.foot-social svg { width: 17px; height: 17px; }
/* Öffnungszeiten kompakt in der Kontakt-Spalte */
.foot-zeiten { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .4rem; font-size: .86rem; }
.foot-zeiten > div { display: flex; justify-content: space-between; gap: 1rem; max-width: 230px; }
.foot-zeiten dt { color: var(--ink-soft); }
.foot-zeiten dd { color: var(--ink); }
/* Rechtslinks mit klaren Abständen statt Trennpunkten */
.foot-recht { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ki-hinweis { margin-top: 1.2rem; font-size: .72rem; line-height: 1.6; color: var(--ink-soft); opacity: .85; max-width: 70ch; }
.ki-hinweis { font-size: .82rem; color: var(--ink-soft); margin-top: .6rem; }

/* ---------- Floating WhatsApp + mobile CTA ---------- */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  transform: translateZ(0);
  width: 58px; height: 58px; border-radius: 50%;
  background: #1FAF38; color: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px rgba(31, 175, 56, .55);
  transition: transform .3s ease;
}
.wa-fab:hover { transform: scale(1.08) translateY(-2px); }
.wa-fab svg { width: 28px; height: 28px; }
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: 85; display: none;
  background: rgba(247, 242, 234, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  gap: 10px;
}
.cta-bar .btn { flex: 1; padding: .95em 1em; font-size: .78rem; }
/* Auf sehr schmalen Handys (iPhone SE, 320 px) brach „Termin buchen" in der
   festen Leiste auf zwei Zeilen um. Die Leiste wuchs damit von 68 auf 87 px
   und schnitt den Satz darüber mitten durch die Buchstaben. Muss nach der
   700-px-Regel stehen, die .btn ausdrücklich umbrechen lässt. */
@media (max-width: 360px) {
  .cta-bar .btn { white-space: nowrap; font-size: .7rem; letter-spacing: .08em; padding-inline: .6em; }
}
.cta-bar .btn-line { color: var(--ink); border-color: var(--line-gold); }

/* ---------- Behandlungs-Seite ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.6rem, 6vw, 4.5rem); background: var(--bg-2); color: var(--ink); position: relative; overflow: hidden; }
.page-head h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); max-width: 16ch; }
.page-head p { margin-top: 1.1rem; max-width: 56ch; color: var(--ink-soft); }
.page-head .label { margin-bottom: .4rem; }
.page-head::after {
  content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(176, 141, 87, .35); pointer-events: none;
}
.page-head::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(176, 141, 87, .2); pointer-events: none;
}

.tabbar-wrap { position: sticky; top: var(--nav-h); z-index: 60; background: rgba(247, 242, 234, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.tabbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  padding: .6em 1.35em; border-radius: 999px; white-space: nowrap;
  font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tab:hover { color: var(--ink); border-color: var(--line-gold); }
.tab.active { background: var(--ink); color: var(--bg); }

.b-sektion { padding-block: clamp(2.6rem, 5vw, 4rem); }
.b-sektion + .b-sektion { border-top: 1px solid var(--line); }
.b-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 3vw, 44px); margin-bottom: 1.6rem; }
.b-media {
  flex: none; width: min(360px, 38%); position: relative;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  align-self: center;
}
.b-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 800px) {
  .b-kopf { flex-direction: column; align-items: stretch; }
  .b-media { width: 100%; }
}
.b-kopf h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.b-kopf p { color: var(--ink-soft); max-width: 52ch; margin-top: .4rem; }
/* ---- Preisliste als Karten nebeneinander ----
   Bis 05.08.2026 war jede Behandlung eine Zeile über die volle Breite. Bei
   zwanzig Laserzonen wurde daraus ein sehr langer Weg nach unten, während
   rechts und links Platz frei blieb (Merts Fund). Jetzt drei Karten
   nebeneinander: gleiche Information, ein Drittel der Höhe.
   Auf dem Handy bleibt es bei einer Spalte im kompakten Zeilenlayout — zwei
   Karten mit Beschreibung wären dort 170 px schmal. */
.b-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1180px) { .b-rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .b-rows { grid-template-columns: 1fr; gap: 0; } }
.b-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: clamp(12px, 2.5vw, 34px); align-items: center;
  padding: 1.05rem 14px; border-radius: 10px;
  transition: background .3s ease;
}
@media (min-width: 801px) {
  .b-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "name  name"
      "meta  preis"
      "btn   btn";
    gap: .6rem 12px; align-items: center;
    padding: 1.3rem 1.35rem;
    background: var(--paper); border: 1px solid var(--line);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .b-row:hover { border-color: var(--line-gold); box-shadow: var(--shadow); transform: translateY(-3px); }
  .b-row .b-cell-name { grid-area: name; }
  .b-row .b-dauer { grid-area: meta; }
  .b-row .b-preis { grid-area: preis; text-align: right; }
  .b-row .b-btn { grid-area: btn; margin-top: .35rem; }
  /* Über die ganze Kartenbreite: in der Zeilenfassung war der Knopf die
     kleinste Fläche der Zeile und ging unter. */
  .b-row .b-btn .btn { width: 100%; }
  .b-row .b-desc { max-width: none; }
}
/* Abwechselnde Zeilenfarbe auf dem Handy: das Auge folgt der Zeile bis zum
   Preis, ohne dass Trennlinien die Liste zerhacken */
@media (max-width: 800px) {
  .b-row:nth-child(odd) { background: rgba(255, 253, 249, .75); }
  .b-row:hover { background: rgba(255, 253, 249, 1); }
}
.b-row .b-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; }
.b-row .b-desc { font-size: .86rem; color: var(--ink-soft); margin-top: .15rem; max-width: 60ch; }
.b-row .b-dauer { font-size: .82rem; color: var(--ink-soft); letter-spacing: .06em; white-space: nowrap; }
.b-row .b-preis { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; white-space: nowrap; }
/* Aktionspreis in Rot, damit man ihn im Vorbeiscrollen erkennt.
   Klasse heißt bewusst „preis-aktion": Ein schlichtes „aktion" gibt es schon
   für den Aktionen-Bereich, mit Rahmen und Hintergrund — das legte sich als
   Kasten um jeden Preis. */
.b-preis.preis-aktion, .o-preis.preis-aktion { color: var(--aktion-rot); }
.o-preis .o-alt { color: var(--ink-soft); font-size: .82em; font-weight: 400; margin-right: .25em; }
.b-row .btn { padding: .68em 1.5em; font-size: .72rem; }

/* ---------- Buchen (Wizard) ---------- */
.wizard { max-width: 880px; margin-inline: auto; }
.wiz-progress { display: flex; align-items: center; gap: 0; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.wiz-step-dot { display: flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.wiz-step-dot .dot {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-gold);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
  background: var(--paper);
}
.wiz-step-dot.active { color: var(--ink); }
.wiz-step-dot.active .dot { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wiz-step-dot.done .dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.wiz-line { flex: 1; height: 1px; background: var(--line); margin-inline: 14px; position: relative; overflow: hidden; }
.wiz-line::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.wiz-line.done::after { transform: scaleX(1); }
.wiz-label-sm { display: block; }

.wiz-pane { display: none; animation: paneIn .5s cubic-bezier(.22, 1, .36, 1); }
.wiz-pane.active { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.wiz-h { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .4rem; }
.wiz-sub { color: var(--ink-soft); margin-bottom: 1.6rem; font-size: .97rem; }

.wiz-kats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.4rem; }
.wiz-behandlungen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- Auswahlraster: nebeneinander statt untereinander ----
   Merts Beobachtung 05.08.2026: Die Optionen standen in zwei Spalten und
   liefen viele Reihen tief, während links und rechts breiter Platz frei blieb
   (Schulungen 4 Reihen, Buchungsassistent sogar 10). Der Rahmen ist jetzt
   breiter, und NUR die Raster nutzen die Breite aus. Formularfelder,
   Zusammenfassung und Absende-Bereich bleiben schmal — ein Namensfeld über
   1180 px liest sich schlecht, und lange Textzeilen verliert das Auge. */
.wizard-weit { max-width: 1180px; }
.wizard-weit .wiz-form,
.wizard-weit .wiz-summary,
.wizard-weit .wiz-send,
.wizard-weit .wiz-hinweis,
.wizard-weit .zahlarten,
.wizard-weit .rechts-hinweis { max-width: 620px; }
/* Der letzte Schritt hat kein breites Raster mehr, nur Felder. Deshalb rückt
   dort der ganze Schritt samt Überschrift zusammen in die Mitte — sonst stünde
   die Überschrift ganz links und das Formular einsam daneben. */
.wizard-weit .wiz-pane[data-pane="3"] { max-width: 620px; margin-inline: auto; }

/* Buchungsassistent: drei Behandlungen nebeneinander. Vier wären zu eng —
   „Laser Intimbereich komplett" plus Preis braucht rund 350 px, sonst bricht
   der Name um und die Zeile wird wieder höher statt niedriger. */
#wiz-behandlungen { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { #wiz-behandlungen { grid-template-columns: repeat(2, 1fr); } }
/* Muss sein: die globale Handy-Regel steht auf .wiz-behandlungen (Klasse) und
   verliert gegen den ID-Selektor darüber. Ohne diese Zeile blieben auf dem
   Handy zwei Spalten stehen und die Seite ragte 79 px seitlich heraus. */
@media (max-width: 800px) { #wiz-behandlungen { grid-template-columns: 1fr; } }

/* Schulungen: hier reichen vier, weil nur der Name in der Karte steht.
   Die Beschreibungen stehen oben im Slider — sie hier zu wiederholen hat die
   Auswahl doppelt so hoch gemacht. */
#sch-liste { grid-template-columns: repeat(4, 1fr); }
#sch-liste .opt { justify-content: center; text-align: center; padding: 1rem .9rem; }
#sch-liste .o-name { font-size: 1.06rem; line-height: 1.25; }
@media (max-width: 1020px) { #sch-liste { grid-template-columns: repeat(3, 1fr); } }
/* Auch auf dem Handy nebeneinander: zwei Spalten halbieren die Höhe
   gegenüber der gestapelten Liste. Die Karten bleiben deutlich über 44 px. */
@media (max-width: 800px) { #sch-liste { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 800px) { #sch-liste .o-name { font-size: .98rem; } }
.opt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: .95rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  text-align: left; width: 100%;
}
.opt:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.opt.sel { border-color: var(--gold); box-shadow: 0 12px 34px -18px rgba(176, 141, 87, .6); }
.opt .o-name { font-family: var(--serif); font-size: 1.14rem; font-weight: 500; }
.opt .o-meta { font-size: .78rem; color: var(--ink-soft); }
.opt .o-preis { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }

/* Gutschein-Beträge behalten das feste Raster. Die Uhrzeiten im Buchungs-
   Assistenten nicht mehr — die bringen ihr eigenes Raster mit (.zeit-raster). */
.wiz-zeiten.gs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 800px) { .wiz-zeiten.gs-grid { grid-template-columns: repeat(2, 1fr); } }

.wiz-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 1.5rem; }
#sch-tage { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 560px) {
  /* Kacheln blieben sonst unter 44px Tippfläche */
  #sch-tage { grid-template-columns: repeat(3, 1fr); }
}
.tag-btn {
  padding: .7rem .2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.tag-btn:hover:not(:disabled) { border-color: var(--line-gold); transform: translateY(-2px); }
.tag-btn.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag-btn:disabled { opacity: .32; cursor: not-allowed; }
.tag-btn .t-wt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.tag-btn .t-nr { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.tag-btn .t-mo { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

.wiz-zeiten { display: block; }
.zeit-btn {
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.zeit-btn:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.zeit-btn.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.zeit-btn b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.zeit-btn span { font-size: .74rem; opacity: .75; letter-spacing: .08em; }

.wiz-form { display: flex; flex-direction: column; gap: 14px; }
.feld label { display: block; font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); font: inherit; color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Auswahlfelder sahen als einzige Felder nach Systemvorgabe aus und wurden auf
   schmalen Handys so breit wie ihr laengster Eintrag — auf 320 px lief die Seite
   dadurch seitlich aus dem Bild. Eigener Pfeil, feste Breite, Text bricht ab. */
.feld select {
  appearance: none; -webkit-appearance: none;
  min-width: 0; max-width: 100%; min-height: 52px;
  padding-right: 2.8rem; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B08D57' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 8px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 87, .15); }

.wiz-summary { background: var(--paper); border: 1px solid var(--line-gold); border-radius: var(--r); padding: 1.4rem 1.6rem; margin-block: 1.5rem; }
.wiz-summary .s-row { display: flex; justify-content: space-between; gap: 14px; padding-block: .5rem; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.wiz-summary .s-row:last-child { border-bottom: 0; }
.wiz-summary .s-row b { font-weight: 500; }
.wiz-summary .s-row span:first-child { color: var(--ink-soft); }

.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 2rem; }
.wiz-send { display: flex; flex-direction: column; gap: 12px; margin-top: 1.6rem; }
.wiz-send .btn { width: 100%; }
.wiz-alt { text-align: center; font-size: .86rem; color: var(--ink-soft); margin-top: .6rem; }
.wiz-alt a { color: var(--gold-text); font-weight: 400; border-bottom: 1px solid var(--line-gold); }
.wiz-h:focus { outline: none; }
.wiz-hinweis { font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.code-status { font-size: .84rem; margin-top: .45rem; min-height: 1.2em; }
.code-status.code-ok { color: var(--gold-text); font-weight: 500; }
.code-status.code-fehler { color: #8C3B2E; }

.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.btn:disabled::after { display: none; }
.btn.gs-inaktiv { opacity: .45; cursor: not-allowed; transform: none !important; }
.btn.gs-inaktiv::after { display: none; }

/* ---------- Aktions-Kennzeichnung ---------- */
.aktion-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .32em .95em; border-radius: 999px;
  background: linear-gradient(100deg, rgba(176, 141, 87, .16), rgba(214, 184, 126, .22));
  border: 1px solid var(--line-gold);
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); white-space: nowrap; max-width: 100%;
}
@media (max-width: 800px) {
  .aktion-tag { white-space: normal; line-height: 1.6; border-radius: 14px; }
}
.on-dark .aktion-tag { color: var(--gold-text); border-color: var(--line-gold); }
.b-row .aktion-tag { margin-top: .4rem; }
.treat-card .aktion-tag { align-self: flex-start; }

.promo-band {
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: var(--ink); text-align: center;
  padding: .8rem var(--pad); font-size: .88rem; font-weight: 500; letter-spacing: .04em;
}
.promo-band strong:first-of-type { font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .16em; margin-right: .6em; }
.promo-band a { border-bottom: 1px solid rgba(34, 29, 23, .5); font-weight: 600; margin-left: .6em; white-space: nowrap; }
.promo-band a:hover { border-bottom-color: var(--ink); }
@media (max-width: 700px) {
  .promo-band { font-size: .78rem; padding-block: .55rem; line-height: 1.5; }
  .hero { min-height: max(500px, calc(100svh - 165px)); }
}

/* Die Aktionskarte spannte sich früher über die ganze Breite. Jetzt steht sie
   gleichberechtigt in der Reihe und hebt sich nur noch über die kräftigere
   Goldkante und den Knopf ab. */
.aktion.aktion-feature { border-color: var(--gold); }
.aktion.aktion-feature h3 { max-width: 26ch; }

/* ============================================================
   Interaktive Illustrationen (Stil wie IsoConcept):
   Laser-Simulator + Haut-Schichten-Explorer
   ============================================================ */

/* ---------- Zonen-Körper: Laser-Zonen antippen ---------- */
.zonen {
  position: relative; background: linear-gradient(165deg, #FFFDF9 0%, #F2E8D9 100%);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--shadow);
}
.zonen svg { display: block; width: min(300px, 62%); margin: 0 auto; height: auto; }
.zonen-punkt { cursor: pointer; }
.zonen-punkt .zp-kern { fill: var(--gold); stroke: #FFFDF9; stroke-width: 2; transition: fill .3s ease; }
.zonen-punkt .zp-ring {
  fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .8;
  transform-box: fill-box; transform-origin: center;
  animation: zpPuls 2.4s ease-out infinite;
}
@keyframes zpPuls { 0% { transform: scale(.5); opacity: .8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.zonen-punkt.aktiv .zp-kern { fill: var(--ink); }
.zonen-badge {
  position: absolute; top: clamp(12px, 2vw, 22px); left: clamp(12px, 2vw, 22px); z-index: 4;
  max-width: 240px; background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--r); padding: .85rem 1.1rem; box-shadow: var(--shadow);
}
.zonen-badge .zb-zone { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.zonen-badge .zb-preis { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.zonen-badge .zb-preis small { font-family: var(--sans); font-size: .72rem; font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.zonen-badge .zb-hinweis { font-size: .7rem; color: var(--ink-soft); }
.zonen-badge .zb-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: .5rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); border-bottom: 1px solid var(--line-gold); padding-bottom: 2px;
}
.zonen-badge .zb-link svg { width: 12px; height: 12px; }
.zonen-tipp {
  text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .9rem;
}
@media (max-width: 700px) {
  /* Badge unter die Silhouette statt darüber: verdeckt sonst Oberlippe + Achseln */
  .zonen-badge { position: static; max-width: none; margin-top: .9rem; }
}

/* ---------- Laser-Simulator ---------- */
.lasersim {
  background: linear-gradient(160deg, #FFFDF9 0%, #F4EBDD 100%);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1rem, 2vw, 1.6rem); box-shadow: var(--shadow);
}
.lasersim svg { display: block; width: 100%; height: auto; }
.ls-haar { transition: opacity .5s ease, transform .5s ease; transform-origin: center bottom; transform-box: fill-box; }
.ls-haar.weg { opacity: 0; transform: scaleY(.15); }
.ls-funke { opacity: 0; }
.lasersim.laeuft .ls-funke { animation: lsFunkeln 1.1s ease-in-out infinite; }
.lasersim.laeuft .ls-funke:nth-child(2) { animation-delay: .35s; }
.lasersim.laeuft .ls-funke:nth-child(3) { animation-delay: .7s; }
@keyframes lsFunkeln { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
.lasersim-card {
  margin-top: clamp(.9rem, 1.6vw, 1.3rem); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .95rem 1.2rem;
}
.lasersim-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ls-label { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.ls-prozent { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--gold-deep); }
.ls-name { font-weight: 400; font-size: .98rem; margin-top: .15rem; }
.ls-balken { display: flex; gap: 6px; margin-top: .7rem; }
.ls-balken span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .6s ease; }
.ls-balken span.voll { background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }

/* ---------- Haut-Schichten-Explorer ---------- */
.haut-explorer {
  display: grid; grid-template-columns: 1.45fr 1fr;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
.haut-diagramm { padding: clamp(1.2rem, 2.5vw, 2.2rem); border-right: 1px solid var(--line); }
.haut-diagramm svg { display: block; width: 100%; height: auto; }
.haut-achsen { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.haut-achsen .label::before { width: 24px; }
.haut-note { font-size: .78rem; color: var(--ink-soft); margin-top: 1rem; max-width: 52ch; }
.haut-panel { padding: clamp(1.2rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: .9rem; }
.haut-panel-kopf { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.haut-pfeile { display: flex; gap: 8px; }
.haut-pfeile button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-gold);
  display: grid; place-items: center; color: var(--gold-deep);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.haut-pfeile button:hover, .haut-pfeile button:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.haut-pfeile svg { width: 8px; height: 13px; }
.ht-num { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--gold-text); letter-spacing: .1em; }
.haut-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: -0.4rem; }
.ht-sub { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink-soft); margin-top: -0.5rem; }
.haut-panel .label { margin-top: .3rem; }
.haut-panel p:not(.ht-sub):not(.label):not(.ht-num) { font-size: .94rem; color: var(--ink-soft); }
.ht-box {
  margin-top: auto; border-left: 3px solid var(--gold); background: rgba(214, 184, 126, .12);
  padding: .8rem 1.1rem; border-radius: 0 var(--r) var(--r) 0;
}
.ht-box span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.ht-box b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.haut-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.haut-tab {
  padding: .9rem .6rem .95rem; text-align: left; border-top: 3px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.haut-tab + .haut-tab { border-left: 1px solid var(--line); }
.haut-tab .t-no { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .18em; color: var(--gold-text); }
.haut-tab .t-name { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 500; margin-top: .1rem; }
.haut-tab .t-info { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: .1rem; }
.haut-tab:hover { background: rgba(214, 184, 126, .08); }
.haut-tab.aktiv { border-top-color: var(--gold); background: rgba(214, 184, 126, .12); }

/* SVG-Zustände des Explorers */
.ht-schicht { opacity: .32; transition: opacity .45s ease; }
.ht-schicht .ht-umriss { transition: stroke .45s ease, stroke-width .45s ease; }
.ht-schicht.aktiv { opacity: 1; }
.ht-schicht.aktiv .ht-umriss { stroke: var(--gold); stroke-width: 2.5; }
.ht-marker { cursor: pointer; }
.ht-marker circle { fill: var(--paper); stroke: var(--line-gold); transition: fill .3s ease, stroke .3s ease; }
.ht-marker text { fill: var(--ink); font-size: 13px; letter-spacing: .08em; }
.ht-marker.aktiv circle { fill: var(--gold); stroke: var(--gold); }
.ht-marker.aktiv text { fill: #fff; }
/* Trefferkreis bleibt in jedem Zustand unsichtbar (steht nach .aktiv, gewinnt den Gleichstand) */
.ht-marker circle.ht-treffer { fill: transparent; stroke: none; }
.ht-beam { opacity: 0; transition: opacity .5s ease; }
.zeige-beam .ht-beam { opacity: 1; }

@media (max-width: 900px) {
  .haut-explorer { grid-template-columns: 1fr; }
  .haut-diagramm { border-right: 0; border-bottom: 1px solid var(--line); }
  .haut-tabs { grid-template-columns: repeat(2, 1fr); }
  .haut-tab:nth-child(n+3) { border-top: 1px solid var(--line); }
  .haut-tab.aktiv { border-top-color: var(--gold); }
}

/* ---------- KI-Badge ---------- */
/* Die Kennzeichnung KI-erzeugter Bilder ist eine Pflichtangabe (EU AI Act
   Art. 50) und muss klar erkennbar sein. Sie war mit .66rem die kleinste
   Schrift der ganzen Seite — jetzt lesbar, ohne das Bild zu erschlagen. */
.ki-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(23, 18, 13, .72); color: rgba(242, 234, 221, .92);
  padding: .4em 1em; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 800px; }
.stand { font-size: .84rem; color: var(--ink-soft); margin-top: -.4rem; }

/* Was in einem Paket steckt — als Häkchenliste unter der Beschreibung. */
.b-enthalten { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.b-enthalten li { font-size: .82rem; color: var(--ink-soft); display: flex; align-items: center; gap: .35rem; }
.b-enthalten li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
/* Was das Paket gegenüber Einzelbuchung spart — die Zahl, die den Kauf auslöst. */
.b-spar { margin: .5rem 0 0; font-size: .84rem; color: var(--ink-soft); }
.b-spar strong { color: var(--gold-text); font-weight: 600; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 2rem; overflow-wrap: break-word; hyphens: auto; }
.legal h2 { font-size: 1.5rem; margin: 2.2rem 0 .7rem; }
.legal p, .legal li { color: var(--ink-soft); font-size: .97rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.legal a { color: var(--gold-text); border-bottom: 1px solid var(--line-gold); }

/* ---------- Ergebnisse: Vorher/Nachher + Bewertungsquellen ---------- */
.vn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1020px) { .vn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vn-grid { grid-template-columns: 1fr; } }
.vn-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.vn-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.vn-bilder figure { position: relative; }
.vn-bilder img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.vn-solo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Ergebnisse als Slider: eine Reihe von links nach rechts, Pfeile zum Durchklicken
   (Merts Layout-Regel). Der Slider scrollt intern — der Body nie horizontal. */
.erg-slider-wrap { position: relative; }
.erg-slider {
  display: flex; gap: 18px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 4px;
}
/* Einrasten nur auf Touch (sanft): hartes mandatory-Snap ruckelt in älteren
   Chromes, wenn die Maus über dem Slider steht */
@media (pointer: coarse) {
  .erg-slider { scroll-snap-type: x proximity; }
}
.erg-slider::-webkit-scrollbar { display: none; }
.erg-slider .vn-card { flex: 0 0 min(330px, 76vw); scroll-snap-align: start; }
/* Desktop: exakt 4 Karten pro Ansicht — Reihe füllt die Breite ohne angeschnittene Karte */
@media (min-width: 1021px) {
  .erg-slider .vn-card { flex: 0 0 calc((100% - 54px) / 4); }
}
.vn-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .9rem; padding: 1.6rem;
  background: linear-gradient(165deg, #FFFDF9 0%, var(--bg-2) 100%);
  border: 1px dashed var(--line-gold);
}
.vn-cta .vn-cta-funke { color: var(--gold-deep); font-size: 1.4rem; }
.vn-cta b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.vn-cta p { font-size: .85rem; color: var(--ink-soft); }
.erg-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-gold); color: var(--gold-deep);
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: background .3s ease, color .3s ease;
}
.erg-pfeil svg { width: 9px; height: 14px; }
.erg-pfeil:hover, .erg-pfeil:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.erg-zurueck { left: -10px; }
.erg-weiter { right: -10px; }
.vn-tag {
  position: absolute; left: 10px; bottom: 10px;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(23, 18, 13, .55); color: #FFFDF9; padding: 4px 10px; border-radius: 999px;
}
.vn-info { padding: .9rem 1.1rem; }
.vn-info b { font-family: var(--serif); font-size: 1.05rem; }
.vn-info span { display: block; font-size: .8rem; color: var(--ink-soft); }
.ergebnis-leer {
  text-align: center; border: 1px dashed var(--line-gold); border-radius: var(--r);
  padding: clamp(2rem, 5vw, 3.5rem); color: var(--ink-soft); max-width: 720px; margin: 0 auto;
}
.quelle-tag {
  display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); border: 1px solid var(--line-gold); border-radius: 999px;
  padding: 2px 10px; margin-top: .6rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .treat-grid, .quote-grid, .mem-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .split, .kontakt-grid, .aktion-grid { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .cta-bar { display: flex; }
  .wa-fab { display: none; }
  /* Platz für die feste Buchen-Leiste nur dort reservieren, wo sie auch steht.
     Vorher blieb auf Buchen, Kündigung, Danke und den Rechtstexten unten ein
     64 px hoher leerer Streifen wie ein abgeschnittener Seitenrand. */
  body:has(.cta-bar) { padding-bottom: calc(var(--cta-h, 64px) + env(safe-area-inset-bottom, 0px)); }
  .b-row { grid-template-columns: 1fr auto; grid-template-areas: "name preis" "meta btn"; row-gap: .5rem; }
  .b-row .b-cell-name { grid-area: name; }
  .b-row .b-dauer { grid-area: meta; }
  .b-row .b-preis { grid-area: preis; }
  .b-row .b-btn { grid-area: btn; justify-self: end; }
  .wiz-behandlungen { grid-template-columns: 1fr; }
  .wiz-tage { grid-template-columns: repeat(4, 1fr); }
  .wiz-label-sm { display: none; }
  .hero-scroll { display: none; }
}
@media (max-width: 560px) {
  .cat-grid, .treat-grid, .quote-grid, .mem-grid, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .foot-grid { grid-template-columns: 1fr; }
  .cat-card { aspect-ratio: 4 / 3.4; }
  /* Die Zeile, die sagt WORUM es geht („Gesicht & Haut · 5 Behandlungen"),
     stand in Gold auf dem hellen Foto — auf der Skin-Karte lag sie auf einer
     weißen Gesichtsmaske und war praktisch unsichtbar (gemessener Kontrast
     bis herunter auf 1,05:1). Dunklerer Verlauf im Textbereich, hellere
     Schrift, und durch die engere Sperrung bleibt sie einzeilig. */
  /* 06.08.2026: Der dunkle Bereich reicht weiter nach oben (.5 bei 58 % wurde
     zu .78 bei 72 %). Anlass: Die Laser-Karte trägt jetzt den Pflichthinweis zu
     Sitzungen und Haartyp, Begründung steht in data.js bei der Laser-Kategorie.
     Der längere Text schiebt die Überschrift „Laser" nach oben, und dort liegt
     im Foto der helle Behandlungsraum. Gemessen waren es 4,2:1 statt 4,5:1. */
  .cat-card::after {
    background: linear-gradient(to top,
      rgba(23, 18, 13, .94) 6%, rgba(23, 18, 13, .88) 34%,
      rgba(23, 18, 13, .78) 72%, rgba(23, 18, 13, .3) 100%);
  }
  /* Diese Zeile sitzt am oberen Rand des Textblocks, wo der Verlauf am
     schwächsten ist — auf der Pakete-Karte lag sie über einer weißen Tube.
     Ein eigener, leicht abgedunkelter Grund macht sie unabhängig davon, was
     im Foto zufällig dahinter liegt. Ein einziger Kasten, in dem der Text bei
     Bedarf umbricht — zwei getrennte Kästchen sahen nach Fehler aus. */
  .cat-body .k-sub {
    color: rgba(247, 242, 234, .97); letter-spacing: .08em; font-size: .7rem;
    display: inline-block; max-width: 100%;
    background: rgba(23, 18, 13, .7);
    padding: .34em .7em; border-radius: 6px; line-height: 1.5;
  }
}

/* ---------- Touch-Ziele auf Touch-Geräten ---------- */
@media (pointer: coarse) {
  .tab, .chip, .zeit-btn, .tag-btn, .b-row .btn, .nav-links a:not(.btn), .cta-bar .btn {
    min-height: 44px;
  }
  .tab, .chip { display: inline-flex; align-items: center; }
  .b-row .btn { padding-block: .9em; }
  .haut-pfeile button { width: 44px; height: 44px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-recht { gap: .4rem 16px; }
  .zonen-badge .zb-link { min-height: 44px; }

  /* Textlinks, die man auf dem Handy wirklich antippt: Telefonnummer und
     E-Mail im Kontaktbereich, „Mehr dazu"-Links, „Lieber im Studio abschließen?".
     Sie waren nur 19 bis 26 px hoch. Statt Abstände zu setzen — die würden das
     Layout verschieben und die Unterstreichung mitnehmen — legt sich ein
     unsichtbares Feld über den Link. Aussehen bleibt, Trefferfläche wächst. */
  .k-item a, .link-more, .mem-vorort, .promo-band a { position: relative; }
  .k-item a::before, .link-more::before, .mem-vorort::before, .promo-band a::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: max(44px, 100%);
  }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero-fade { opacity: 1; transform: none; }
  .intro { display: none; }
  .hero-media video { display: none; }
  .hero-media img.hero-fallback { display: block; }
}

/* ---------- Schulungen als Reihe statt Stapel (Merts Vorgabe 05.08.2026) ----------
   Acht Schulungen untereinander waren fast zwei Bildschirmhöhen. Als Slider
   liegen sie nebeneinander, gewischt auf dem Handy, per Pfeil am Rechner.
   Gleiche Mechanik wie der Ergebnis-Slider auf der Startseite. */
.sch-slider-wrap { position: relative; min-width: 0; max-width: 100%; }
.sch-slider {
  display: flex; gap: 18px; overflow-x: auto; max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 4px;
}
@media (pointer: coarse) { .sch-slider { scroll-snap-type: x proximity; } }
.sch-slider::-webkit-scrollbar { display: none; }
.sch-slider .sch-card { flex: 0 0 min(320px, 78vw); scroll-snap-align: start; }
/* Ab Tablet drei Karten nebeneinander, am Rechner vier — ohne angeschnittene Karte */
@media (min-width: 760px)  { .sch-slider .sch-card { flex: 0 0 calc((100% - 18px) / 2); } }
@media (min-width: 1021px) { .sch-slider .sch-card { flex: 0 0 calc((100% - 54px) / 3.4); } }
.sch-card .btn { margin-top: .4rem; text-align: center; }
.sch-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-gold); color: var(--gold-deep);
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: background .3s ease, color .3s ease;
}
.sch-pfeil svg { width: 9px; height: 14px; }
.sch-pfeil:hover, .sch-pfeil:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.sch-zurueck { left: -10px; }
.sch-weiter { right: -10px; }

/* ---------- Konkrete Uhrzeiten im Buchungs-Assistenten (05.08.2026) ----------
   Ersetzt die drei Tageszeit-Blöcke. Viele kleine Knöpfe statt drei großer:
   Raster passt sich der Breite an, Trefferfläche bleibt über 44 px. */
.zeit-hinweis { font-size: .82rem; color: var(--ink-soft); margin-bottom: .8rem; }
.zeit-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.uhr-btn {
  min-height: 48px; padding: .7rem .4rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.uhr-btn:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.uhr-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.uhr-btn.sel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sofort-hinweis {
  margin-top: 1.1rem; padding: .9rem 1.1rem;
  background: var(--bg-2); border: 1px dashed var(--line-gold); border-radius: var(--r);
  font-size: .86rem; color: var(--ink-soft); line-height: 1.55;
}
.sofort-hinweis a { color: var(--gold-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   HAUPTAKTION SICHTBAR MACHEN (Vorgabe Mert, 05.08.2026)

   Der Buchen-Knopf in der Preisliste war eine 1 px dünne Goldlinie ohne eigene
   Fläche: `background: transparent` ergibt rechnerisch 1,00:1 gegen den
   Kartengrund — der theoretische Nullpunkt, nicht bloß ein knapper Wert.
   WCAG 1.4.11 verlangt 3:1 für die Begrenzung eines Bedienelements. Im
   Weichzeichner-Test (Blick aus dem Augenwinkel beim Scrollen) verschwand er
   restlos; übrig blieben nur die roten Aktionspreise.

   Ab hier gilt: gefüllte Fläche + sichtbare Kante + Schatten = Knopf.

   Dieser Block MUSS am Dateiende stehen. Nur so schlägt er die früheren Regeln
   für .cta-bar .btn-line, .b-row .btn und den Touch-Block. Nichts wird
   gelöscht, alles ist additiv.
   ========================================================================= */

/* ---- 1) Der Gold-Knopf bekommt einen Körper -----------------------------
   Ring, Wölbung und Schatten stecken ALLE in box-shadow, nicht in border.
   Dadurch wächst kein Knopf um einen einzigen Bildpunkt: kein Raster
   verschiebt sich, die Kopfzeile mit neun Menüpunkten bleibt in jeder Breite
   im Rahmen.

   Der Ring liegt bewusst AUSSEN (0 0 0 1px), nicht innen. Ein innerer Ring
   wird beim Überfahren von der einfahrenden Tinte (.btn::after, z-index -1)
   überdeckt und verschwindet für 450 ms.

   --gold-deep (#8F7040) misst 4,53:1 auf --paper und 4,13:1 auf --bg. In
   .on-dark, .bg-alt, .page-head und footer schaltet die Variable ohnehin auf
   einen dunkleren Wert. */
.btn-gold {
  box-shadow:
    0 0 0 1px var(--gold-deep),                  /* die Kante, trägt die 3:1-Regel */
    inset 0 1px 0 rgba(255, 255, 255, .34),      /* heller Grat oben: die Wölbung */
    0 6px 16px -10px rgba(60, 44, 20, .55);      /* warmer, weicher Schatten */
  /* box-shadow muss mit übergehen, sonst springt der Schatten hart */
  transition: color .35s ease, border-color .35s ease, background .35s ease,
              transform .25s ease, box-shadow .25s ease;
}

/* Überfahren: .btn hebt den Knopf bereits um 2 px an. Der Schatten wird dabei
   weiter und weicher, dadurch wirkt die Hebung echt. */
.btn-gold:hover, .btn-gold:focus-visible {
  box-shadow:
    0 0 0 1px var(--gold-deep),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 12px 22px -12px rgba(60, 44, 20, .65);
}

/* Drücken: auf dem Handy ist das der EINZIGE Zustand, den es gibt — dort gibt
   es keinen Mauszeiger und damit nie den Hover. Muss NACH der :hover-Regel
   stehen, sonst gewinnt am Rechner die Hebung. */
.btn-gold:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px var(--gold-deep),
    inset 0 2px 5px -1px rgba(74, 55, 24, .5),
    0 2px 6px -4px rgba(60, 44, 20, .45);
}

/* Sonderfall Hero: dort liegt der Knopf auf abgedunkeltem Video, ein dunkler
   Ring versinkt darin. Heller Rand in --gold-2 wirkt wie eine Fassung. */
.hero .btn-gold {
  box-shadow:
    0 0 0 1px var(--gold-2),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 12px 30px -14px rgba(0, 0, 0, .8);
}
.hero .btn-gold:hover, .hero .btn-gold:focus-visible {
  box-shadow: 0 0 0 1px var(--gold-2), 0 16px 34px -16px rgba(0, 0, 0, .85);
}

/* ---- 2) Tastaturbedienung: eigener, sichtbarer Fokusring ------------------
   Bisher hatte .btn KEINE eigene Fokus-Umrandung — es blieb der blaue
   Standardring des Browsers, also ausgerechnet eine Fremdfarbe im
   Creme-Gold-Haus. Im Hero stattdessen creme. */
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero .btn:focus-visible { outline-color: var(--creme-on-dark); }

/* ---- 3) Der Buchen-Knopf in der Behandlungskarte -------------------------
   Am Rechner war er nur 37 px hoch (die 44 px galten allein auf Touch) und in
   .72rem gesetzt — typografisch nicht mehr als die Zeile „15 Min." daneben.

   WICHTIG: 44px, NICHT weniger. Dieser Block steht hinter dem Touch-Block mit
   gleicher Spezifität; ein kleinerer Wert würde dort die 44-px-Tippfläche
   überschreiben und _qa/tippflaeche-test.js rot machen. */
.b-row .btn {
  min-height: 44px;
  padding: .72em 1.5em;
  font-size: .75rem;
  letter-spacing: .12em;
  gap: 8px;
}
/* Der Pfeil sagt „es geht weiter" statt „hier klappt etwas auf". Er rutscht
   beim Überfahren leicht vor — kleine Reaktion, keine Dauerbewegung. */
.b-row .btn svg { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.65, 0, .35, 1); }
.b-row .btn:hover svg, .b-row .btn:focus-visible svg { transform: translateX(3px); }

/* Der 7-Sekunden-Glanzstreifen ist für EINEN Hauptknopf gedacht. 42 Stück
   gleichzeitig wären eine flackernde Lichterkette und genau das, was ein
   gehobenes Studio nicht will. */
.b-row .btn-gold::before { content: none; }

/* Unter 800 px fällt die Karte auf die kompakte Zeile zurück, der Knopf sitzt
   dann rechts unten und ist NICHT kartenbreit. Ohne Mindestbreite schrumpft er
   wieder auf Textgröße. min-width: 0 an der Namensspalte ist das
   Sicherheitsventil, damit das Raster nicht überläuft. */
@media (max-width: 800px) {
  .b-row .b-btn .btn { min-width: 132px; }
  .b-row .b-cell-name { min-width: 0; }
}

/* ---- 4) Sekundäre Umriss-Knöpfe: nur sichtbar, nicht lauter -------------
   „Zurück", „WhatsApp" in der festen Leiste, „Zur Startseite", „Im Studio
   bezahlen" bleiben ungefüllt, ohne Schatten, ohne Größenzuwachs. Sie bekommen
   ausschließlich eine Begrenzung, die man überhaupt sehen kann: von
   rgba(176,141,87,.38) = 1,4:1 auf --gold-deep = 4,1 bis 5,5:1.

   Der Abstand zur Hauptaktion wird dadurch GRÖSSER, nicht kleiner — eine
   Haarlinie kann eine gefüllte Pille mit Ring und Schatten nicht schlagen.

   Beide Zeilen sind Pflicht: .on-dark .btn-line und .cta-bar .btn-line haben
   höhere Spezifität und würden jede Regel schlagen, die nur an .btn-line
   hängt — sonst bliebe ausgerechnet die feste Handy-Buchenleiste blass.

   BEWUSST NICHT dabei: .hero .btn-line (Glas-Optik über dem Video, Rand
   bereits 4,67:1). Die Regel gewinnt von allein. Wer sie hier wiederholt,
   killt nebenbei den Hover-Übergang. */
.btn-line { border-color: var(--gold-deep); }
.on-dark .btn-line, .cta-bar .btn-line { border-color: var(--gold-deep); }

/* ---- 5) Gesperrte Knöpfe behalten wenigstens ihre Kante ------------------
   Gesperrt heißt: kein Körper, keine Hebung — sonst sieht ein Knopf drückbar
   aus, der es nicht ist. Der Ring bleibt, damit man wenigstens sieht, DASS
   dort ein Bedienelement steht. Die Deckkraft bleibt ausdrücklich unangetastet:
   _qa/fix-checks.js prüft genau diesen Wert an #gs-senden. */
.btn:disabled, .btn.gs-inaktiv { box-shadow: 0 0 0 1px var(--gold-deep); }

/* ============================================================================
   MEMBERSHIPS IN IHREM METALL (Vorgabe Mert, 05.08.2026)
   Silber wird silbern, Gold golden, Platin platinfarben.

   Bewusst SEHR zurückhaltend: das Haus ist creme/gold, ein kräftiges Metall
   würde nach Preisschild aussehen statt nach Studio. Getönt wird die Fläche,
   die Kante und der Aufzählungshaken — Schrift bleibt überall Tinte, damit
   kein Kontrast kippt. Der Verlauf läuft diagonal von hell über die Tönung
   zurück ins Helle; das ist es, was das Auge als Metall liest.

   Steht am Dateiende, damit es die .mem-dark-Regeln schlägt.
   ========================================================================= */
.mem-card.mem-silber,
.mem-dark .mem-card.mem-silber {
  background: linear-gradient(157deg, #FCFCFD 0%, #EDEFF2 52%, #F7F8F9 100%);
  border-color: #C3C7CE;
}
.mem-card.mem-gold,
.mem-dark .mem-card.mem-gold {
  background: linear-gradient(157deg, #FFFDF6 0%, #F4E5C6 52%, #FCF6E8 100%);
  border-color: var(--gold);
}
/* Platin liegt eine Spur tiefer und kühler als Silber — das ist der
   Rangunterschied, den man ohne Beschriftung sieht. */
.mem-card.mem-platin,
.mem-dark .mem-card.mem-platin {
  background: linear-gradient(157deg, #F8F9FB 0%, #DDE1E7 52%, #EBEDF1 100%);
  border-color: #A2A8B2;
}

/* Der Haken vor jeder Leistung nimmt das Metall auf. Nur er — die Schrift
   daneben bleibt Tinte. */
.mem-card.mem-silber li::before { color: #8E949D; }
.mem-card.mem-gold   li::before { color: var(--gold-deep); }
.mem-card.mem-platin li::before { color: #6F757F; }

/* Die Trennlinien im Inneren waren auf Tinte gerechnet (rgba(34,29,23,.13))
   und verschwinden auf der getönten Fläche fast. In der Metallfarbe bleiben
   sie sichtbar, ohne hart zu wirken. */
.mem-card.mem-silber ul, .mem-card.mem-silber .mem-summe { border-color: rgba(70, 76, 86, .18); }
.mem-card.mem-platin ul, .mem-card.mem-platin .mem-summe { border-color: rgba(60, 66, 76, .22); }
.mem-card.mem-gold   ul, .mem-card.mem-gold   .mem-summe { border-color: rgba(143, 112, 64, .28); }
.mem-card.mem-silber .mem-summe-gesamt { border-top-color: rgba(70, 76, 86, .3); }
.mem-card.mem-platin .mem-summe-gesamt { border-top-color: rgba(60, 66, 76, .34); }
.mem-card.mem-gold   .mem-summe-gesamt { border-top-color: rgba(143, 112, 64, .4); }

/* Beim Überfahren legt sich der Schatten in die jeweilige Metallfarbe —
   dieselbe Bewegung wie bisher, nur farblich passend. */
.mem-card.mem-silber:hover { box-shadow: 0 24px 60px -30px rgba(70, 76, 86, .5); }
.mem-card.mem-platin:hover { box-shadow: 0 24px 60px -30px rgba(52, 58, 68, .55); }
.mem-card.mem-gold:hover   { box-shadow: 0 24px 60px -30px rgba(176, 141, 87, .55); }

/* Auf der Platin-Tönung fällt --gold-text (#7C6136) auf 4,42:1 und damit unter
   die 4,5:1-Grenze — betrifft den Mindestgesamtpreis und die Links in den
   Pflichtangaben. Eine Spur dunkler bringt 5,51:1, ohne dass man den
   Farbunterschied zu den anderen Karten bemerkt. Platin bleibt dafür so tief
   wie es soll, statt zur zweiten Silberkarte aufgehellt zu werden. */
.mem-card.mem-platin .mem-summe-gesamt b,
.mem-card.mem-platin .mem-recht a { color: #6B5330; }
.mem-card.mem-platin .mem-recht a { border-bottom-color: rgba(107, 83, 48, .45); }

/* ============================================================================
   HANDY-DURCHGANG 05.08.2026
   Aus einer systematischen Aufnahme bei 320, 375, 390 und 430 px. Jeder Punkt
   hier ist nachgemessen und einzeln gegengeprüft worden.
   ========================================================================= */

/* ---- 1) Offenes Menü: Text lief durch das Logo ---------------------------
   Das Menü ist höher als jeder Telefonbildschirm (990 px gegen 568 bis 932),
   man MUSS scrollen. Dabei schoben sich die Menüwörter sichtbar unter das
   TAH-Monogramm und das Schließen-Kreuz — Buchstaben quer im Logo. Ursache:
   die Kopfzeile liegt bei offenem Menü zwar oben (z-index 95), hatte aber
   `background: transparent`. Eine Polsterung am Menü hilft NICHT, das wurde
   gegengeprüft: sie verschiebt nur den Start, gescrollt wird trotzdem darunter. */
body.menu-open .nav { background: var(--bg); }

/* ---- 2) Tippflächen, die unter 44 px lagen -------------------------------
   Fußzeilen-Links waren 22 px, die Menü-Unterpunkte 20 px.

   ACHTUNG: Bei den Fußzeilen-Listen NICHT die unsichtbare ::before-Technik von
   oben verwenden. Der Zeilenabstand dort beträgt nur 12,4 px; die Felder
   benachbarter Links würden sich um rund 10 px überlappen und der spätere Link
   läge oben — man träfe dann zuverlässig den falschen. Stattdessen bekommen
   die Links echte Höhe, und der Listenabstand wird entsprechend kleiner, damit
   die Spalte nicht auseinanderläuft. */
@media (pointer: coarse) {
  .foot-grid ul { gap: 0; }
  .foot-grid ul a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Menü-Unterpunkte (Laser, Skin, Eyes & Brows …) waren 20 px hoch. */
  .menu-sub { gap: 2px 18px; }
  .menu-sub a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-foot a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Zwei wichtige Textlinks im Buchungsschluss: „Hier sofort verbindlich
     buchen" (der Weg in Hatices echten Kalender) und „Per E-Mail senden". */
  .sofort-hinweis a, .wiz-alt a { position: relative; }
  .sofort-hinweis a::before, .wiz-alt a::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: max(44px, 100%);
  }
}

/* ---- 3) Preisliste auf dem Handy ----------------------------------------
   a) Der Preis war senkrecht mittig zum GESAMTEN Namensblock ausgerichtet.
      Bei Paketen mit Zutatenliste rutschte er dadurch bis zu 184 px unter den
      Namen — man sah oben den Paketnamen und den Preis erst weit darunter
      neben irgendeinem Beschreibungssatz. */
@media (max-width: 800px) {
  .b-row .b-preis { align-self: start; }

  /* b) Der Behandlungsname bekam nur 108 px, weil der Knopf mit seiner
        Mindestbreite die zweite Spalte aufspannte und sie sich mit dem Preis
        teilte. 32 von 42 Namen brachen um, bei „Lashlifting & Browlifting
        Kombi" stand das „&" allein auf einer Zeile.
        Der Knopf bekommt jetzt eine eigene Zeile — bewusst NICHT über die
        volle Breite (er bliebe sonst kartenbreit, und 42 kartenbreite
        Goldknöpfe untereinander sind zu viel Gold), sondern rechtsbündig in
        seiner Eigenbreite. Dadurch hängt die Namensspalte nicht mehr am Knopf. */
  .b-row {
    grid-template-areas:
      "name  preis"
      "meta  meta"
      "btn   btn";
  }
  .b-row .b-btn { justify-self: end; margin-top: .2rem; }
  .b-row .b-btn .btn { min-width: 0; }
}
/* c) 21 px Serifenschrift ist auf 320 px zu groß — das war der zweite Grund
      für die Umbrüche, unabhängig von der Spaltenbreite. */
@media (max-width: 400px) {
  .b-row .b-name { font-size: 1.12rem; }
}

/* ---- 4) Aktions-Kennzeichen zerfiel in drei Blöcke ----------------------
   `.aktion-tag` ist ein Flex-Element mit gap. Auf dem Handy wurde daraus:
   links der Textanfang über drei Zeilen, dazwischen einsam die Zahl „41",
   rechts der Rest. Als Fließtext bleibt der Satz zusammen. */
@media (max-width: 800px) {
  .aktion-tag { display: inline; gap: 0; }
}

/* ---- 5) „Termin buchen" im Handy-Menü war der neunte von neun Punkten ----
   Am Rechner steht der goldene Knopf immer oben rechts. Im Handy-Menü stand
   genau dieser Punkt ganz unten, in derselben Schrift wie „Ergebnisse" — bei
   320 px musste man 295 px scrollen, um ihn überhaupt zu sehen. Jetzt klebt er
   als goldener Knopf am unteren Rand des Menüs und ist ab dem Öffnen sichtbar,
   egal wie lang die Liste wird. Kein HTML geändert: die Kopfzeile steht in 15
   Dateien kopiert und wird von scripts/kopfzeile-abgleichen.mjs erzeugt. */
.menu { padding-bottom: 5.5rem; }
.menu a.menu-link[href$="buchen.html"] {
  position: sticky; bottom: .6rem; z-index: 2;
  margin-top: 1.2rem;
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: var(--ink); border-bottom: none; border-radius: 999px;
  justify-content: center;
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1em 1.4em; min-height: 44px;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 10px 26px -12px rgba(60, 44, 20, .6);
}
/* Die Ordnungsziffer „09" ergibt auf einem Knopf keinen Sinn. */
.menu a.menu-link[href$="buchen.html"] span.no { display: none; }

/* ---- 6) Slider-Pfeile: Zustand zeigen, auf dem Handy weglassen -----------
   Der nutzlose Pfeil am Ende sah aus wie ein funktionierender. Und auf dem
   Handy lagen die Pfeile auf den Karten: links schnitt der Kreis in die erste
   Textzeile, rechts verdeckte er genau den angeschnittenen Streifen der
   nächsten Karte — also den Hinweis, dass es überhaupt weitergeht. Dort wird
   ohnehin gewischt (scroll-snap ist auf Touch aktiv), deshalb weg damit. */
.sch-pfeil:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sch-pfeil:disabled:hover { background: var(--paper); border-color: var(--line-gold); color: var(--gold-deep); }
@media (max-width: 800px) { .sch-pfeil { display: none; } }

/* ---- 7) Quellenangabe lag über dem „Route planen"-Knopf ------------------
   Beide sitzen unten an der Karte; bei 320 px überlappten sie sich 104 x 10 px.
   Beschädigt wird dabei der Knopf, nicht die Quellenangabe (die liegt oben).
   Auf schmalen Bildschirmen wandert die Angabe deshalb nach oben. */
@media (max-width: 480px) {
  .karte-quelle { top: 8px; bottom: auto; }
}

/* ---- 8) Schriftgrößen unter 12 px ---------------------------------------
   In den Tag-Kacheln standen Wochentag (10,56 px) und Monat (9,92 px) — genau
   die Angaben, die den Termin ausmachen. Dazu die Zahlungsarten-Zeile. */
@media (max-width: 800px) {
  .tag-btn .t-wt { font-size: .78rem; }
  .tag-btn .t-mo { font-size: .74rem; }
  .zahlarten { font-size: .78rem; }
}

/* ---- 9) Hinweis auf die schon getroffene Wahl (buchen.html?b=…) ----------
   Wer über den Buchen-Knopf der Preisliste kommt, sah oben nicht, dass seine
   Behandlung längst gewählt ist. Der Satz steht jetzt direkt unter der
   Überschrift, die Kachel wird zusätzlich ins Bild geholt (buchen.js). */
.vorwahl-hinweis {
  margin: -.6rem 0 1.4rem; padding: .8rem 1.1rem;
  background: linear-gradient(100deg, rgba(176, 141, 87, .14), rgba(214, 184, 126, .2));
  border: 1px solid var(--line-gold); border-radius: var(--r);
  font-size: .92rem; color: var(--ink);
}
.vorwahl-hinweis b { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
.vorwahl-hinweis span { display: block; margin-top: .2rem; font-size: .8rem; color: var(--ink-soft); }

/* ---- 10) Bezahlfenster: Schließen-Kreuz scrollte weg --------------------
   Das Stripe-Fenster ist höher als ein Telefonbildschirm, man muss darin nach
   unten wischen, um an „Zahlen" zu kommen. Das Kreuz klebte am Inhalt statt am
   Rahmen und stand am Ende bis zu 331 px OBERHALB des Bildschirms. Es gab zwar
   noch Auswege (zurückwischen, neben das Fenster tippen), aber wer abbrechen
   will, sucht das Kreuz — und findet es nicht.
   Als eigenes Element im Overlay statt in der scrollenden Box klebt es fest. */
.pay-overlay > .pay-schliessen,
.pay-box > .pay-schliessen { position: sticky; top: 0; float: right; margin: -8px -8px 0 0; z-index: 3; }
.pay-schliessen { background: var(--paper); box-shadow: 0 2px 10px -4px rgba(23, 18, 13, .3); }

/* ============================================================================
   BILDKREISE IN DER PREISLISTE (Vorgabe Mert, 05.08.2026)
   „Bis jetzt sieht es sehr clean aus, aber zu clean — man könnte noch denken
   Landingpage oder Wikipedia-Eintrag." Ein kleiner runder Bildausschnitt oben
   rechts in jeder Karte bringt Wärme, ohne die Liste zu überladen.

   Bewusst KLEIN (56 px): Es ist Schmuck, keine Information. Der Preis und der
   Buchen-Knopf müssen die stärksten Elemente der Karte bleiben.

   Die Bilder sind mittig auf die Hälfte beschnitten — nachgemessen zerfällt
   das volle Motiv bei dieser Größe zu einem Farbfleck
   (scripts/behandlungsbilder-einpflegen.mjs erklärt das im Detail).
   ========================================================================= */
.b-bild {
  grid-area: bild;
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line-gold), 0 6px 16px -10px rgba(60, 44, 20, .5);
  align-self: start;
}
.b-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ab Tablet: der Kreis sitzt oben rechts neben dem Namen, der Rest der Karte
   bleibt unverändert. Die Rasterfelder heißen wie bisher, es kommt nur die
   Spalte „bild" dazu. */
@media (min-width: 801px) {
  .b-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "name  bild"
      "name  ."
      "meta  preis"
      "btn   btn";
  }
  .b-row .b-cell-name { grid-area: name; }
}

/* ---- Handy: ZWEI Kacheln nebeneinander ----------------------------------
   Merts Vorgabe 05.08.2026: „nicht überall viel von oben nach unten, mehr
   links nach rechts, damit es direkt übersichtlich ist — ein Tickchen kleiner,
   aber besser."

   Aus der breiten Zeile wird deshalb eine schmale Kachel: Kreis oben, Name,
   Dauer, Preis, Knopf — alles untereinander INNERHALB der Kachel, dafür zwei
   Kacheln nebeneinander. Das halbiert die Länge der Liste.

   Die Beschreibung wird auf zwei Zeilen begrenzt. Bei rund 170 px Kachelbreite
   säße sonst mehr Fließtext in der Kachel als Preis und Knopf zusammen, und
   genau das war der Grund für die lange Seite. Der volle Text steht weiter im
   Buchungs-Assistenten und in den Portalen. */
@media (max-width: 800px) {
  .b-rows { grid-template-columns: 1fr 1fr; gap: 10px; }
  .b-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "bild"
      "name"
      "meta"
      "preis"
      "btn";
    gap: .3rem 0;
    padding: .9rem .85rem 1rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  }
  .b-row:nth-child(odd) { background: var(--paper); }  /* kein Zebra mehr — es sind Kacheln */
  .b-row .b-cell-name { grid-area: name; }
  .b-row .b-dauer { grid-area: meta; }
  .b-row .b-preis { grid-area: preis; text-align: left; align-self: end; }
  .b-row .b-btn { grid-area: btn; justify-self: stretch; margin-top: .4rem; }
  .b-row .b-btn .btn { width: 100%; min-width: 0; padding-inline: .6em; }
  .b-bild { width: 44px; height: 44px; margin-bottom: .15rem; }

  .b-row .b-name { font-size: 1.02rem; line-height: 1.25; }
  .b-row .b-desc {
    font-size: .78rem; line-height: 1.45; margin-top: .25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .b-row .b-dauer { font-size: .76rem; }
  .b-row .b-preis { font-size: 1.15rem; }
  /* Pakete tragen zusätzlich die Zutatenliste — in der Kachel ist dafür kein
     Platz, sie steht im Buchungs-Assistenten. */
  .b-row .b-enthalten, .b-row .b-spar { display: none; }
}
/* Unter 360 px sind zwei Kacheln zu schmal (unter 150 px je Kachel bricht jeder
   zweite Name dreizeilig um). Dort geht es zurück auf die kompakte ZEILE —
   nicht auf die einspaltige Kachel: nachgemessen wäre die Liste damit 5353 px
   lang geworden, also länger als vor dem ganzen Umbau. Als Zeile sind es 4386. */
@media (max-width: 359px) {
  .b-rows { grid-template-columns: 1fr; gap: 0; }
  .b-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "bild  name   preis"
      ".     meta   meta"
      "btn   btn    btn";
    column-gap: 10px;
    padding: 1.05rem 14px;
    background: none; border: 0; border-radius: 10px;
  }
  .b-row:nth-child(odd) { background: rgba(255, 253, 249, .75); }
  .b-row .b-preis { text-align: right; align-self: start; }
  .b-row .b-btn { justify-self: end; }
  .b-row .b-btn .btn { width: auto; }
  .b-row .b-desc { -webkit-line-clamp: 3; }
  .b-bild { width: 36px; height: 36px; margin-top: .2rem; }
}

/* ------------------------------------------------------------------
   Anfahrt im Kontaktblock (06.08.2026)
   Drei Faktenzeilen unter der Adresse. Bewusst klein und ohne Aufzählungs-
   punkte: sie sollen die Adresse ergänzen, nicht mit ihr konkurrieren.
   Merts Vorgabe „links nach rechts statt oben nach unten" gilt auch hier —
   ab 720 px stehen die drei Zeilen nebeneinander.
------------------------------------------------------------------ */
.k-anfahrt {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
.k-anfahrt li { position: relative; padding-left: 13px; }
.k-anfahrt li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-deep);
  opacity: .55;
}
@media (max-width: 719px) {
  /* Untereinander erst dann, wenn nebeneinander nicht mehr lesbar wäre */
  .k-anfahrt { flex-direction: column; gap: .18rem; }
}

/* Preishinweis unter dem Sofort-Buchen-Link auf /buchen */
.hinweis-klein {
  display: inline-block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--muted);
}

/* Gutschein-Hinweis unter den Memberships (06.08.2026) */
.gutschein-hinweis {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--muted);
}
.gutschein-hinweis a {
  color: var(--gold-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   Statische Preisliste (06.08.2026, erzeugt von scripts/preisliste-ins-html.mjs)
   Steht in div#katalog und wird von assets/js/behandlungen.js beim Laden
   überschrieben. Sichtbar wird sie nur, wenn JavaScript nicht läuft —
   dann soll sie wenigstens ordentlich aussehen. Bewusst NICHT display:none:
   versteckter Text zählt bei Suchmaschinen weniger, und der Sinn der Liste
   ist ja gerade, dass sie gelesen wird.
------------------------------------------------------------------ */
.preisliste-statisch { padding: 1rem 0 3rem; }
.preisliste-statisch h2 { margin: 2.2rem 0 .3rem; }
.preisliste-statisch > p { color: var(--muted); max-width: 62ch; }
.preisliste-statisch ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.preisliste-statisch li {
  padding: .7rem 0;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.55;
}
.preisliste-statisch li b { font-weight: 600; }