/* ============================================================
   Azize Beauty · Osnabrück · Stylesheet v2 (16.09.2026 abends)
   Eigenständiges Projekt (nicht IMO Energie). Farben aus dem Bestand:
   Creme, Karte, Gold, Ink; dunkle Flächen wie auf der Live-Seite.
   Schrift: Playfair Display (Display), Jost (Text), DM Mono (Nummern, Labels), lokal.
   Radien: Buttons/Chips pill · Karten/Fotos 20 px · Eingaben 12 px.
   ============================================================ */

:root {
  --paper: #F7F1E8;
  --paper-2: #EFE7DA;
  --card: #FFFDF9;
  --line: #E8DFCE;
  --line-2: #D9CDB8;
  --ink: #2A2420;
  --ink-2: #4D4338;
  --ink-bg: #1C1610;
  --ink-bg-2: #26201A;
  --muted: #7C6F5F;
  --gold: #A5804A;
  --gold-deep: #8A6841;
  --gold-soft: #C6A46B;
  --champagne: #CDA86B;
  --rose: #E3C8B2;
  --ok: #3E7A4F;
  --err: #B4574E;
  --wa: #2E7D4F;

  --bronze: #B0703F;
  --silber: #8E969E;
  --gold-stufe: #C6A46B;
  --diamant: #8FB6C9;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --r-pill: 100px;
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1200px;
  --wrap-wide: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --top-h: 72px;

  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Atmosphäre: Seide als ruhige, feste Ebene, darüber wandernde Lichtflecken in Champagner und Rosé */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("../img/seide.webp") center / cover no-repeat; opacity: .3;
}
body::after {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(205, 168, 107, .30), transparent 70%),
    radial-gradient(34% 30% at 82% 78%, rgba(227, 200, 178, .34), transparent 70%),
    radial-gradient(30% 28% at 70% 18%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(180deg, rgba(247, 241, 232, .55), rgba(247, 241, 232, .4));
  animation: drift 38s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3%, 2%, 0) rotate(2deg); }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-2deg); }
}
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: var(--gold-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
small { font-size: .875em; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--paper); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

.icon { display: inline-block; width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-pill); z-index: 200; }
.skip:focus { top: 12px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, .display, .as-h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; }
h1, .as-h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.08; }
h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.12; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.3rem; line-height: 1.3; }
h1 em, h2 em, .display em { font-style: italic; font-weight: 500; }
p { margin: 0; }
p + p { margin-top: 1em; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.kicker { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }
.eyebrow { font-size: .95rem; font-weight: 500; color: var(--gold-deep); margin-bottom: 14px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.wrap--wide { max-width: var(--wrap-wide); }
.sec { padding-block: clamp(64px, 9vw, 112px); position: relative; }
.sec--tint { background: color-mix(in srgb, var(--paper-2) 78%, transparent); border-top: 1px solid rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(217, 205, 184, .5); }
.sec--tight { padding-block: clamp(40px, 6vw, 72px); }
.sec + .sec:not(.sec--tint):not(.sec--dark) { padding-top: 0; }
.sec--tint + .sec, .sec--dark + .sec { padding-top: clamp(64px, 9vw, 112px); }
.sec--dark { background: var(--ink-bg); color: var(--paper); overflow: hidden; isolation: isolate; }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: var(--paper); }
.sec--dark .lead, .sec--dark p { color: rgba(247, 241, 232, .82); }
.sec--dark .muted { color: rgba(247, 241, 232, .6); }
.sec--dark a { color: var(--gold-soft); }
.sec--dark a:hover { color: var(--paper); }
.sec__video { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sec__video video, .sec__video img { width: 100%; height: 100%; object-fit: cover; }
.sec__video--soft video, .sec__video--soft img { opacity: .55; }
.sec__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 22, 16, .35), rgba(28, 22, 16, .15) 40%, rgba(28, 22, 16, .55)); }
.sec__video--light::after { background: linear-gradient(180deg, rgba(247, 241, 232, .55), rgba(247, 241, 232, .25) 40%, rgba(247, 241, 232, .7)); }
.sec--glow { position: relative; overflow: hidden; }
.sec--glow::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(205, 168, 107, .28), transparent 62%); filter: blur(20px); }
.sec--glow > * { position: relative; }

/* Auftritt beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none; position: relative; overflow: hidden;
  transition: transform 160ms var(--ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); color: var(--paper); }
.btn--gold { background: linear-gradient(135deg, #D9BC84, var(--gold-soft) 55%, #B8935A); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(165, 128, 74, .8); }
.btn--gold::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); transition: transform 700ms var(--ease); }
.btn--gold > * { position: relative; }
.btn--gold:hover::after { transform: translateX(120%); }
.btn--gold:hover { color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.sec--dark .btn--gold, .sec--dark .btn--gold:hover, .page-head--dark .btn--gold { color: var(--ink); }
.sec--dark .btn--ghost { color: var(--paper); border-color: rgba(247, 241, 232, .35); }
.sec--dark .btn--ghost:hover { border-color: var(--paper); color: var(--paper); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #256a42; color: #fff; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; cursor: default; pointer-events: none; }
.link { font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: border-color 200ms ease; }
.link:hover { border-color: var(--ink); }

/* ---------- Kopfleiste ---------- */
.top {
  position: sticky; top: 0; z-index: 60; height: var(--top-h);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.top__in { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.top__logo img { height: 48px; width: auto; }
.nav { display: flex; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 0; background: transparent; font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.nav a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: rgba(165, 128, 74, .12); color: var(--ink); }
.nav a[aria-current="page"] { background: rgba(165, 128, 74, .16); }
.nav__btn .icon { width: 16px; height: 16px; transition: transform 240ms var(--ease); color: var(--gold-deep); }
.nav__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.top__acts { display: flex; align-items: center; gap: 10px; }
.top__login { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: var(--r-pill); transition: background-color 200ms ease; }
.top__login:hover { background: rgba(165, 128, 74, .12); color: var(--ink); }
.top__login .icon { width: 22px; height: 22px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-pill); cursor: pointer; align-items: center; justify-content: center; }
.burger .icon { width: 26px; height: 26px; }
.burger:hover { background: var(--paper-2); }
@media (max-width: 1080px) {
  .top__in { grid-template-columns: 44px 1fr auto; gap: 8px; }
  .top__nav, .nav { display: none; }
  .burger { display: inline-flex; }
  .top__logo { justify-self: center; }
  .top__logo img { height: 40px; }
  .top__login span { display: none; }
  .top__login { padding: 10px; }
  .top__cta { padding: 11px 16px; font-size: .88rem; }
}
@media (max-width: 380px) { .top__cta { display: none; } }

/* Mega-Menü (Desktop): Liste links, Bühne mit Foto rechts */
.mega-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(28, 22, 16, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.mega-backdrop.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega { position: fixed; top: calc(var(--top-h) + 6px); left: 0; right: 0; z-index: 45; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.mega__card {
  width: min(100%, 1040px); background: rgba(255, 253, 249, .96); color: var(--ink);
  border-radius: 24px; box-shadow: 0 30px 80px rgba(28, 22, 16, .28), 0 8px 24px rgba(28, 22, 16, .12);
  padding: 14px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px;
  opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top center; visibility: hidden; pointer-events: auto;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
}
.mega.is-open .mega__card { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mega__list { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 2px; }
.mega__list a { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 500; transition: background-color 180ms ease; }
.mega__list a .num { font-family: var(--font-mono); font-size: .72rem; color: var(--gold-deep); }
.mega__list a small { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; }
.mega__list a:hover, .mega__list a.is-active { background: rgba(165, 128, 74, .12); }
.mega__list .mega__ende { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.mega__stage { position: relative; border-radius: 16px; overflow: hidden; min-height: 340px; background: var(--ink-bg); color: var(--paper); display: grid; align-content: end; }
.mega__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 320ms ease, transform 900ms var(--ease); }
.mega__stage.is-swapping img { opacity: 0; }
.mega__stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 22, 16, 0) 30%, rgba(28, 22, 16, .82) 100%); }
.mega__text { position: relative; z-index: 1; padding: 28px; display: grid; gap: 8px; justify-items: start; }
.mega__text .kicker { color: var(--gold-soft); margin: 0; }
.mega__text .kicker::before { background: var(--gold-soft); }
.mega__text h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; color: var(--paper); }
.mega__text p { color: rgba(247, 241, 232, .85); max-width: 46ch; }
.mega__text .btn { margin-top: 8px; }
@media (max-width: 1080px) { .mega, .mega-backdrop { display: none; } }

/* Schublade (mobil): dunkel, nummeriert, wie die Live-Seite */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__back { position: absolute; inset: 0; background: rgba(28, 22, 16, .55); opacity: 0; transition: opacity 260ms ease; }
.drawer.is-open .drawer__back { opacity: 1; }
.drawer__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 90vw);
  background: var(--ink-bg); color: var(--paper); padding: 18px 22px 28px;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform 360ms var(--ease-drawer);
  box-shadow: 30px 0 80px rgba(0, 0, 0, .35);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(247, 241, 232, .12); }
.drawer__head img { height: 44px; width: auto; }
.drawer__close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper); border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.drawer__close .icon { width: 26px; height: 26px; }
.drawer__tag { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(247, 241, 232, .75); padding: 18px 0 6px; line-height: 1.5; }
.drawer__link { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 8px; padding: 14px 4px; border-bottom: 1px solid rgba(247, 241, 232, .1); color: var(--paper); text-decoration: none; transition: background-color 180ms ease; }
.drawer__link .num { font-family: var(--font-mono); font-size: .72rem; color: var(--gold-soft); }
.drawer__link b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var(--paper); }
.drawer__link.is-current b { color: var(--gold-soft); }
.drawer__link small { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 241, 232, .55); margin-top: 4px; }
.drawer__link:active { background: rgba(247, 241, 232, .06); }
.drawer__foot { margin-top: auto; padding-top: 22px; display: grid; gap: 12px; }
.drawer__wa { display: inline-flex; align-items: center; gap: 10px; color: #7FD3A0; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; text-decoration: none; }
.drawer__wa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7FD3A0; box-shadow: 0 0 0 4px rgba(127, 211, 160, .2); }
.drawer__meta { font-size: .88rem; color: rgba(247, 241, 232, .55); line-height: 1.7; }
.drawer__meta a { color: rgba(247, 241, 232, .8); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 68%); mask-image: linear-gradient(90deg, transparent 26%, #000 68%); }
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  min-height: calc(100dvh - var(--top-h)); max-height: 820px; padding-block: clamp(40px, 6vw, 72px);
}
.hero__text .kicker { margin-bottom: 22px; }
.hero__text h1 { max-width: 12ch; }
/* Die Zeilen sind für den Auftritt beschnitten. Ohne Luft nach unten fräst das dem
   kursiven „beauty“ die Unterlänge des y ab, deshalb padding plus negativer Rand. */
.hero__text h1 .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero__text h1 .line > span { display: block; }
.hero__lead { margin-top: 24px; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Vorher/Nachher-Vergleich */
.ba { position: relative; aspect-ratio: 4 / 5; max-height: 640px; border-radius: var(--r-lg); overflow: hidden; background: var(--rose); box-shadow: 0 40px 70px -34px rgba(42, 36, 32, .5); --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.ba__handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 6px 18px -6px rgba(42, 36, 32, .5);
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232A2420'><path d='M213.66,133.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,136H67.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L67.31,120H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,133.66Z'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.ba__cap { position: absolute; bottom: 14px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(28, 22, 16, .6); color: var(--paper); backdrop-filter: blur(4px); pointer-events: none; }
.ba__cap--l { left: 14px; }
.ba__cap--r { right: 14px; }
.ba__note { margin-top: 10px; font-size: .85rem; color: var(--muted); text-align: right; }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; max-height: none; padding-block: 36px 48px; gap: 32px; }
  .hero__text h1 { max-width: none; }
  .ba { max-height: none; max-width: 440px; }
  .hero__bg img, .hero__bg video { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 80%); mask-image: linear-gradient(180deg, transparent 30%, #000 80%); opacity: .4; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__text h1 .line > span { transform: translateY(110%); animation: rise 700ms var(--ease) forwards; }
  .hero__text h1 .line:nth-child(2) > span { animation-delay: 80ms; }
  .hero__text h1 .line:nth-child(3) > span { animation-delay: 160ms; }
  .hero__text .kicker, .hero__lead, .hero__cta { opacity: 0; animation: fade 600ms var(--ease) forwards; }
  .hero__lead { animation-delay: 260ms; }
  .hero__cta { animation-delay: 360ms; }
  .ba { opacity: 0; transform: translateY(14px); animation: fade-up 800ms var(--ease) 200ms forwards; }
}
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

/* ---------- Vertrauenszeile ---------- */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 253, 249, .45); }
.proof__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof__item { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px 22px 0; }
.proof__item + .proof__item { border-left: 1px solid var(--line); padding-left: 20px; }
.proof__item .icon { width: 24px; height: 24px; color: var(--gold-deep); margin-top: 2px; }
.proof__item b { display: block; font-weight: 600; }
.proof__item span { font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) {
  .proof__in { grid-template-columns: 1fr 1fr; }
  .proof__item { padding: 16px 12px 16px 0; }
  .proof__item + .proof__item { padding-left: 12px; }
  .proof__item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .proof__item:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .proof__in { grid-template-columns: 1fr; }
  .proof__item + .proof__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Behandlungen in Bildern ---------- */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.strip a { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); text-decoration: none; color: var(--paper); box-shadow: 0 30px 50px -36px rgba(42, 36, 32, .55); transform: translateZ(0); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.strip a:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -34px rgba(42, 36, 32, .6); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.strip a:hover img { transform: scale(1.06); }
.strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; font-weight: 600; font-size: 1.02rem; background: linear-gradient(180deg, transparent, rgba(28, 22, 16, .78)); }
.strip small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 3px; }
@media (max-width: 900px) {
  .strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip a { flex: 0 0 68%; scroll-snap-align: start; }
}

/* ---------- Aktionen ---------- */
.deals { display: grid; grid-template-columns: repeat(3, 1fr); }
.deal { padding: 8px 28px 8px 0; }
.deal + .deal { border-left: 1px solid var(--line-2); padding-left: 28px; }
.deal__big { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--ink); }
.deal__big del { color: var(--muted); font-size: .5em; font-weight: 400; margin-left: 6px; vertical-align: middle; }
.deal h3 { margin-top: 10px; font-size: 1.1rem; }
.deal p { margin-top: 6px; color: var(--ink-2); font-size: .98rem; }
.deal a { display: inline-block; margin-top: 12px; }
@media (max-width: 900px) {
  .deals { grid-template-columns: 1fr; gap: 0; }
  .deal { padding: 22px 0; }
  .deal + .deal { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); }
}

/* ---------- Behandlungsmenü ---------- */
.menu-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 40px); }
.menu-sprung a { display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255, 253, 249, .7); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; transition: border-color 200ms ease, background-color 200ms ease; }
.menu-sprung a:hover { border-color: var(--ink); background: var(--card); }
.menu-sprung a small { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.menu-gruppe { margin-top: clamp(40px, 6vw, 64px); scroll-margin-top: calc(var(--top-h) + 20px); }
.menu-gruppe:first-of-type { margin-top: 0; }
.menu-gruppe > h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.menu-gruppe > h2 small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.menu-note { margin: 14px 0 6px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(239, 231, 218, .8); color: var(--ink-2); font-size: .95rem; }
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu-item { border-bottom: 1px solid var(--line); }
.menu-row { width: 100%; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 18px 8px; background: transparent; border: 0; text-align: left; cursor: pointer; border-radius: var(--r-sm); transition: background-color 200ms ease; }
.menu-row:hover { background: rgba(255, 253, 249, .7); }
.menu-row__name { font-weight: 500; font-size: 1.05rem; }
.menu-row__name .tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--ink); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.menu-row__price { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-row__price del { color: var(--muted); font-size: .8em; margin-right: 6px; }
.menu-row__price small { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); text-align: right; }
.menu-row__chev { width: 22px; height: 22px; color: var(--muted); transition: transform 260ms var(--ease); }
.menu-row[aria-expanded="true"] .menu-row__chev { transform: rotate(180deg); }
.menu-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease); }
.menu-detail > div { overflow: hidden; }
.menu-item.is-open .menu-detail { grid-template-rows: 1fr; }
.menu-detail__in { padding: 2px 8px 22px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.menu-detail__in p { color: var(--ink-2); max-width: 64ch; }
@media (max-width: 640px) {
  .menu-row { grid-template-columns: 1fr auto; }
  .menu-row__chev { display: none; }
  .menu-detail__in { grid-template-columns: 1fr; }
}

/* ---------- Technologie (Bento) ---------- */
.tech { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile { background: rgba(255, 253, 249, .85); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 30px 60px -44px rgba(42, 36, 32, .5); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 44px 70px -40px rgba(42, 36, 32, .55); }
.tile--big { grid-column: span 7; grid-row: span 2; }
.tile--side { grid-column: span 5; }
.tile__img { position: relative; background: radial-gradient(120% 100% at 50% 20%, #fff 0%, var(--card) 55%, var(--paper-2) 100%); display: grid; place-items: center; padding: 28px; }
.tile--big .tile__img { min-height: 460px; }
.tile--side .tile__img { min-height: 230px; padding: 20px; }
.tile__img img { max-height: 420px; width: auto; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(42, 36, 32, .18)); transition: transform 900ms var(--ease); }
.tile:hover .tile__img img { transform: translateY(-4px) scale(1.02); }
.tile--side .tile__img img { max-height: 200px; }
.tile__body { padding: 24px 26px 28px; display: grid; gap: 12px; align-content: start; }
.tile__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; }
.tile__body p { color: var(--ink-2); }
.tile__facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.tile__facts li { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); }
.tile__body .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 900px) {
  .tech { grid-template-columns: 1fr; }
  .tile--big, .tile--side { grid-column: auto; grid-row: auto; }
  .tile--big .tile__img { min-height: 320px; }
  .tile__img img { max-height: 300px; }
}

/* ---------- Stufen (Bronze, Silber, Gold, Diamant) ---------- */
.konto-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Was das Konto konkret bringt. Drei Zeilen mit goldener Kante statt Karten: Der Abschnitt
   liegt auf dunklem Grund, Karten darauf würden ihn in Kacheln zerlegen. */
.konto-vorteile { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.konto-vorteile li { padding-left: 16px; border-left: 2px solid var(--gold-soft); }
.konto-vorteile strong { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: var(--paper); }
.konto-vorteile span { display: block; margin-top: 3px; font-size: .95rem; line-height: 1.6; color: rgba(247, 241, 232, .68); max-width: 46ch; }
.konto-teaser__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.medals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.medal { position: relative; text-align: center; padding: 22px 10px 18px; border-radius: var(--r-lg); background: rgba(247, 241, 232, .06); border: 1px solid rgba(247, 241, 232, .12); transition: transform 500ms var(--ease), background-color 300ms ease, border-color 300ms ease; }
.medal:hover { transform: translateY(-6px); background: rgba(247, 241, 232, .1); border-color: rgba(205, 168, 107, .5); }
.medal__img { position: relative; width: min(100%, 132px); aspect-ratio: 1; margin: 0 auto 12px; }
.medal__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.medal__img::after { content: ''; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--medal) center / contain no-repeat; mask: var(--medal) center / contain no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); background-size: 260% 100%; animation: shine 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes shine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.medal b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--paper); }
.medal span { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 241, 232, .6); margin-top: 4px; }
.medal.is-reached { border-color: rgba(205, 168, 107, .55); background: rgba(205, 168, 107, .1); }
.medal.is-current { box-shadow: 0 0 0 2px var(--gold-soft), 0 24px 50px -20px rgba(205, 168, 107, .6); }
.medal.is-locked .medal__img img { filter: grayscale(.85) opacity(.45); }
.medal.is-locked .medal__img::after { display: none; }
.medals--light .medal { background: rgba(255, 253, 249, .7); border-color: rgba(255, 255, 255, .8); }
.medals--light .medal b { color: var(--ink); }
.medals--light .medal span { color: var(--muted); }
.medals--light .medal__img img { filter: drop-shadow(0 18px 24px rgba(42, 36, 32, .25)); }
@media (max-width: 900px) { .konto-teaser { grid-template-columns: 1fr; } .medals { grid-template-columns: repeat(2, 1fr); } }

.stufe { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); }
.stufe img { width: 26px; height: 26px; object-fit: contain; }
.stufe .icon { width: 20px; height: 20px; color: var(--gold-deep); }

/* ---------- Studio ---------- */
.gal { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(160px, auto); gap: 16px; }
.gal figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: 0 30px 50px -40px rgba(42, 36, 32, .6); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.gal figure:hover img { transform: scale(1.04); }
.gal__a { grid-column: 1 / 8; grid-row: 1 / 3; }
.gal__b { grid-column: 8 / 13; grid-row: 1 / 2; }
.gal__c { grid-column: 8 / 13; grid-row: 2 / 3; }
.gal__d { grid-column: 1 / 13; grid-row: 3 / 4; aspect-ratio: 21 / 7; }
.gal__a img { aspect-ratio: 4 / 3; }
.gal__b img, .gal__c img { aspect-ratio: 16 / 10; }
.gal__d img { object-position: 50% 60%; }
.gal figcaption { position: relative; }
@media (max-width: 720px) {
  .gal { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gal__a, .gal__b, .gal__c, .gal__d { grid-column: auto; grid-row: auto; aspect-ratio: auto; }
  .gal__d img { aspect-ratio: 16 / 9; }
}

/* ---------- Philosophie ---------- */
.phil__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.phil__text p { color: var(--ink-2); font-size: 1.12rem; }
.phil__sign { margin-top: 28px; font-family: var(--font-display); font-style: italic; font-size: 2rem; }
.phil__sign small { display: block; font-family: var(--font-mono); font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 900px) { .phil__in { grid-template-columns: 1fr; } }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--line-2); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; color: var(--gold); display: block; margin-bottom: 12px; }
.step h3 { font-size: 1.2rem; }
.step p { margin-top: 8px; color: var(--ink-2); }
.steps--col { grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Bewertungen ---------- */
.rev { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; align-items: stretch; }
.rev__score { text-align: center; padding: clamp(26px, 4vw, 40px) 24px; display: grid; align-content: center; }
.rev__big { font-family: var(--font-display); font-size: clamp(4rem, 8vw, 5.5rem); line-height: 1; color: var(--ink); }
.rev__stars { display: inline-flex; gap: 4px; margin: 10px 0 8px; color: var(--gold); }
.rev__stars .icon { width: 26px; height: 26px; }
.rev__g { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); }
.rev__g i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: .95rem; color: #4285F4; }
.rev__score .btn { margin-top: 18px; }
.rev__score .btn + .btn { margin-top: 10px; }
.rev__slider { position: relative; min-width: 0; }
.rev__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rev__track::-webkit-scrollbar { display: none; }
.rev__card { flex: 0 0 min(100%, 340px); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 22px 22px 18px; background: rgba(255, 253, 249, .9); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(217, 205, 184, .6), 0 24px 44px -36px rgba(90, 70, 40, .5); }
.rev__head { display: flex; align-items: center; gap: 12px; }
.rev__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; color: var(--paper); background: linear-gradient(145deg, var(--gold-soft), var(--gold-deep)); flex: none; }
.rev__who b { display: block; font-weight: 600; font-size: .98rem; }
.rev__who span { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.rev__card .rev__stars { margin: 0; }
.rev__card .rev__stars .icon { width: 17px; height: 17px; }
.rev__text { color: var(--ink-2); font-size: .98rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rev__card.is-open .rev__text { display: block; -webkit-line-clamp: unset; }
.rev__more { justify-self: start; background: none; border: 0; padding: 0; font-weight: 500; color: var(--gold-deep); cursor: pointer; border-bottom: 1px solid var(--line-2); }
.rev__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); }
.rev__foot i { font-family: var(--font-display); font-style: normal; font-weight: 700; color: #4285F4; }
.rev__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.rev__dots { display: flex; gap: 6px; flex-wrap: wrap; }
.rev__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line-2); cursor: pointer; transition: transform 200ms var(--ease), background-color 200ms ease; }
.rev__dots button[aria-current="true"] { background: var(--gold-deep); transform: scale(1.35); }
.rev__nav { display: flex; gap: 8px; }
.rev__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 253, 249, .9); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color 200ms ease, transform 160ms var(--ease); }
.rev__nav button:hover { border-color: var(--ink); }
.rev__nav button:active { transform: scale(.95); }
.rev__nav .icon { width: 22px; height: 22px; }
@media (max-width: 900px) { .rev { grid-template-columns: 1fr; } .rev__score .btn { width: 100%; } .rev__card { flex-basis: min(100%, 86vw); } }

/* ---------- Kontakt / Abschluss ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.contact__list li { display: flex; gap: 14px; align-items: flex-start; }
.contact__list .icon { width: 22px; height: 22px; color: var(--gold-soft); margin-top: 3px; }
.contact__list b { display: block; font-weight: 600; }
.card { background: rgba(255, 253, 249, .84); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(217, 205, 184, .6), 0 24px 50px -36px rgba(90, 70, 40, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); color: var(--ink); }
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ink); }
.card p { margin-top: 10px; color: var(--ink-2); }
.card .btn { margin-top: 14px; }
.card__btns { display: grid; gap: 10px; margin-top: 18px; }
.card__btns .btn { margin-top: 0; }
.sec--dark .card p { color: var(--ink-2); }
.sec--dark .card a:not(.btn) { color: var(--gold-deep); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Fuß (dunkel) ---------- */
.foot { background: var(--ink-bg); color: rgba(247, 241, 232, .8); padding: clamp(40px, 6vw, 64px) 0 28px; border-top: 1px solid rgba(205, 168, 107, .25); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand img { height: 60px; width: auto; }
.foot__brand p { margin-top: 14px; font-family: var(--font-display); font-style: italic; color: rgba(247, 241, 232, .6); font-size: 1rem; max-width: 30ch; }
.foot h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: rgba(247, 241, 232, .85); text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; }
.foot__bottom { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(247, 241, 232, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; color: rgba(247, 241, 232, .55); }
.foot__bottom nav { display: flex; gap: 18px; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------- Schwebende Aktionen ---------- */
.fab-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.fab-wa:hover { color: #fff; transform: translateY(-2px); }
.fab-wa:active { transform: scale(.95); }
/* Beim Herunterscrollen weicht der Knopf zur Seite: Auf der Preisliste sass er sonst
   dauerhaft auf den Preisen am rechten Rand. Beim Hochscrollen kommt er zurueck. */
.fab-wa.is-weg { transform: translateX(84px); opacity: 0; pointer-events: none; }
.fab-wa .icon { width: 28px; height: 28px; }
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .fab-wa { bottom: 78px; }
  .mobile-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 280ms var(--ease); }
  .mobile-bar.is-visible { transform: translateY(0); }
  .mobile-bar span { font-size: .9rem; color: var(--ink-2); }
  body.has-mobile-bar { padding-bottom: 72px; }
}

/* ---------- Unterseiten: Kopf, Tabellen, FAQ ---------- */
.page-head { padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 48px); position: relative; }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: 20px; }
.page-head__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.page-head__cta small { color: var(--muted); }
.page-head--dark { background: var(--ink-bg); color: var(--paper); overflow: hidden; isolation: isolate; padding-block: clamp(56px, 8vw, 104px); }
.page-head--dark h1 { color: var(--paper); }
.page-head--dark .lead { color: rgba(247, 241, 232, .82); }
.page-head--dark .kicker { color: var(--gold-soft); }
.page-head--dark .kicker::before { background: var(--gold-soft); }
.page-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; background: var(--paper-2); box-shadow: 0 40px 70px -34px rgba(42, 36, 32, .5); }
.page-hero figure img, .page-hero figure video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .page-hero { grid-template-columns: 1fr; } .page-hero figure { aspect-ratio: 16 / 11; max-height: none; } }
.facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 28px 0 0; padding: 0; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); background: rgba(255, 253, 249, .8); border: 1px solid var(--line); font-size: .93rem; color: var(--ink-2); }
.facts .icon { color: var(--gold-deep); width: 18px; height: 18px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line-2); }
.price-table td { padding: 16px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table .p { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-deep); white-space: nowrap; }
.price-table a.book { margin-left: 12px; font-size: .9rem; white-space: nowrap; }
.price-table td.name { font-weight: 500; }
@media (max-width: 560px) { .price-table a.book { display: block; margin: 4px 0 0; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 8px; font-weight: 500; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-radius: var(--r-sm); transition: background-color 200ms ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255, 253, 249, .7); }
.faq summary .icon { width: 22px; height: 22px; color: var(--muted); transition: transform 260ms var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .a { padding: 0 8px 20px; color: var(--ink-2); max-width: 68ch; }
.xlinks { display: flex; flex-wrap: wrap; gap: 10px; }
.xlinks a { padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-size: .95rem; transition: border-color 200ms ease; background: rgba(255, 253, 249, .6); }
.xlinks a:hover { border-color: var(--ink); }
.cta-band { background: rgba(255, 253, 249, .84); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: 0 24px 50px -36px rgba(90, 70, 40, .45); }
.cta-band h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cta-band p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 720px) { .cta-band { grid-template-columns: 1fr; } }

/* Paketkarten */
.pk { display: grid; gap: 12px; }
.pk__row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; background: rgba(255, 253, 249, .84); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(217, 205, 184, .6); transition: transform 400ms var(--ease); }
.pk__row:hover { transform: translateY(-2px); }
.pk__row--hot { border-color: var(--gold-soft); box-shadow: 0 16px 30px -24px rgba(90, 70, 40, .5); }
.pk__name { font-weight: 600; font-size: 1.08rem; }
.pk__name .tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--ink); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.pk__sub { color: var(--muted); font-size: .92rem; margin-top: 3px; }
.pk__right { display: flex; align-items: center; gap: 16px; }
.pk__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-deep); white-space: nowrap; }
@media (max-width: 560px) { .pk__row { grid-template-columns: 1fr; } .pk__right { justify-content: space-between; } }

/* Buchungsliste */
.book-cat { margin-top: clamp(32px, 5vw, 48px); }
.book-cat h2 { font-size: 1.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.book-cat h2 small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.book-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.book-list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 15px 18px; background: rgba(255, 253, 249, .84); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: border-color 200ms ease, transform 160ms var(--ease); }
.book-list a:hover { border-color: var(--gold-soft); }
.book-list a:active { transform: scale(.99); }
.book-list .p { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-deep); white-space: nowrap; }
.book-list .icon { color: var(--gold-deep); width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: .92rem; background: rgba(255, 253, 249, .6); }
.chips a:hover { border-color: var(--ink); color: var(--ink); }

/* Behandlungs-Finder */
.quiz { max-width: 600px; margin: 0 auto; }
.quiz__q { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 8px 0 20px; }
.quiz__step { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.quiz__opt { display: block; width: 100%; text-align: left; padding: 15px 18px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 200ms ease, transform 160ms var(--ease); }
.quiz__opt:hover { border-color: var(--gold-soft); }
.quiz__opt:active { transform: scale(.985); }
.quiz__result { text-align: center; }
.quiz__result h2 { margin: 8px 0 12px; }

/* ---------- Formulare ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); transition: border-color 200ms ease, box-shadow 200ms ease; }
.field input::placeholder, .field textarea::placeholder { color: #9A8E7E; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(165, 128, 74, .18); }
.field .hint { font-size: .85rem; color: var(--muted); }
.field.is-error input { border-color: var(--err); }
.field .error { font-size: .85rem; color: var(--err); font-weight: 500; }
.field--pw { position: relative; }
.field--pw input { padding-right: 48px; }
.field--pw .pw-toggle { position: absolute; right: 8px; top: 30px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.field--pw .pw-toggle .icon { width: 20px; height: 20px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: .95rem; margin-bottom: 16px; }
.alert .icon { width: 20px; height: 20px; margin-top: 2px; }
.alert--err { background: #F6E3E1; color: #7A2E27; }
.alert--ok { background: #E3EFE5; color: #24512F; }
.alert--info { background: var(--paper-2); color: var(--ink-2); }
.code-input { letter-spacing: .35em; font-size: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Konto ---------- */
.auth { max-width: 460px; margin: 0 auto; }
.auth .card { padding: clamp(24px, 4vw, 36px); }
.auth__logo { height: 52px; width: auto; margin: 0 auto 18px; }
.auth h1, .auth .as-h1 { font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1.12; text-align: center; }
.auth .lead { text-align: center; margin: 10px auto 26px; font-size: 1rem; }
.auth__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; font-size: .92rem; }
.auth__why { margin-top: 28px; display: grid; gap: 12px; }
.auth__why li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.auth__why .icon { width: 20px; height: 20px; color: var(--gold-deep); margin-top: 3px; }
.view { display: none; }
.view.is-active { display: block; }
.dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.dash__head .as-h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; }
.dash__head p { margin-top: 6px; color: var(--muted); }
.dash__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.dash__col { display: grid; gap: 20px; }
@media (max-width: 900px) { .dash__grid { grid-template-columns: 1fr; } }
.tier { position: relative; overflow: hidden; }
.tier__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.tier__count { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.tier__count small { font-family: var(--font-body); font-size: 1rem; color: var(--muted); display: block; margin-top: 6px; }
.tier__next { margin-top: 18px; font-size: .98rem; color: var(--ink-2); }
.tier .medals { margin-top: 26px; }
.next { display: grid; gap: 6px; }
.next__date { font-family: var(--font-display); font-size: 1.5rem; }
.next__meta { color: var(--muted); font-size: .95rem; }
.next .btn { justify-self: start; margin-top: 10px; }
.empty { display: grid; gap: 10px; justify-items: start; color: var(--ink-2); }
.hist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hist li { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: .97rem; }
.hist time { color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: .8rem; }
.hist .st { font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); }
.hist .st--ok { background: #E3EFE5; color: #24512F; }
.hist .st--plan { background: #EBE4F2; color: #4E3A6A; }
.hist .st--no { background: #F6E3E1; color: #7A2E27; }
@media (max-width: 480px) { .hist li { grid-template-columns: 1fr auto; } .hist time { grid-column: 1 / -1; } }
/* Guthaben und Empfehlung im Konto */
.guthaben__summe { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--gold-deep); margin-top: 8px; }
.guthaben__summe small { display: block; font-family: var(--font-body); font-size: .95rem; color: var(--muted); margin-top: 6px; }
.guthaben__liste { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 8px; }
.guthaben__liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(205, 168, 107, .12); border: 1px solid rgba(205, 168, 107, .35); }
.guthaben__liste b { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-deep); }
.guthaben__liste small { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.empf__link { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0 12px; }
.empf__link input { width: 100%; padding: 12px 14px; font: inherit; font-size: .92rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.empf__link input:focus { outline: none; border-color: var(--gold); }
.empf__teilen { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .empf__link { grid-template-columns: 1fr; } .empf__teilen .btn { flex: 1; } }

.qb__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
/* Die Kategorie-Knöpfe der Schnellbuchung im Konto */
.menu-tab { border: 1px solid var(--line-2); background: rgba(255, 253, 249, .7); border-radius: var(--r-pill); padding: 9px 16px; font-weight: 500; font-size: .92rem; cursor: pointer; color: var(--ink-2); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease); }
.menu-tab:hover { border-color: var(--ink); color: var(--ink); }
.menu-tab:active { transform: scale(.97); }
.menu-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qb__list a { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color 200ms ease; }
.qb__list a:hover { border-color: var(--gold-soft); }
.qb__list .p { font-family: var(--font-display); color: var(--gold-deep); white-space: nowrap; }
.qb__list .icon { width: 18px; height: 18px; color: var(--gold-deep); }
.skel { position: relative; overflow: hidden; background: var(--paper-2); border-radius: var(--r-sm); color: transparent; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.demo-note { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r-pill); font-size: .85rem; }
@media (max-width: 900px) { .demo-note { bottom: 86px; } }

/* ---------- Rechtstexte ---------- */
.legal h2 { font-size: 1.5rem; margin-top: 40px; }
.legal h3 { margin-top: 24px; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin-top: 10px; }
.legal ul { padding-left: 20px; }

/* ---------- Tippflaechen am Handy ----------
   Am Telefon wird mit dem Daumen getippt, nicht mit einem Mauszeiger. Alles, was
   angetippt wird, bekommt deshalb mindestens 44 px Hoehe. Die Fusslinks behalten ihre
   Schriftgroesse und bekommen die Hoehe ueber Innenabstand, die Luecke faellt dafuer weg. */
@media (max-width: 640px) {
  .btn--sm { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
  .foot ul { gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .drawer__wa { min-height: 44px; }
  .drawer__meta a, .foot__bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__bottom nav { gap: 22px; }
  .top__login { min-height: 44px; min-width: 44px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}