/* =====================================================================
   ATELIER FEMME — BEAUTY · Kosmetikinstitut Bonn
   Palette & mood derived from the real salon interior:
   cream walls · sage-green · slate-blue fluted counter · walnut floor ·
   brass/gold (mirror, bees, vases) · crystal-chandelier sparkle
   ===================================================================== */

:root{
  /* fields */
  --cream:#F5F1E8;
  --cream-2:#FBF8F1;
  --sage-pale:#E4E8DB;
  --sage:#A8B29A;
  --sage-deep:#5C6A51;
  --slate:#6E7890;
  --slate-deep:#4C567A;
  --walnut:#6A4327;
  --walnut-deep:#312317;

  /* ink */
  --ink:#2A2620;
  --ink-2:#544D42;
  --ink-soft:#716759;
  --line:rgba(58,48,32,.15);
  --line-2:rgba(58,48,32,.08);

  /* on dark */
  --on-dark:#F0EBE0;
  --on-dark-soft:#B7AE9D;
  --line-dark:rgba(255,255,255,.14);

  /* gold */
  --gold-hi:#EBD199;
  --gold:#C79A52;
  --gold-mid:#B0813B;
  --gold-deep:#8A6531;
  --gold-ink:#6E5026;
  --gold-grad-dark:linear-gradient(112deg,#9A7433 0%,#6E5026 46%,#8A6531 100%);
  --gold-grad:linear-gradient(112deg,#EBD199 0%,#C79A52 42%,#9A6E37 78%,#D9B36A 100%);
  --gold-line:rgba(176,133,66,.5);

  --maxw:1240px;
  --gutter:clamp(20px,5vw,68px);
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --serif:"Cormorant Garamond",Georgia,serif;
  --caps:"Cinzel",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;font-family:var(--sans);font-weight:300;color:var(--ink);
  background:var(--cream);line-height:1.7;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--sage-deep);color:#fff}

body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(74px,12vw,152px);position:relative}
.section--lead{padding-top:clamp(94px,8vw,110px)}
.section--lead .split{align-items:start}
.section--lead .circle-media{margin-top:clamp(24px,2.8vw,32px)}
.feature__actions{display:flex;gap:14px;flex-wrap:wrap}
.bg-cream{background:var(--cream)}
.bg-porcelain{background:var(--cream-2)}
.bg-sage{background:var(--sage-pale)}
.section--dark{background:var(--walnut-deep);color:var(--on-dark)}
.section--dark p{color:var(--on-dark-soft)}
.section--dark .eyebrow{color:var(--gold-hi)}
.section--dark .eyebrow::before,.section--dark .eyebrow::after{background:rgba(235,209,153,.5)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--caps);font-size:clamp(11px,1vw,13px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--sage-deep);font-weight:500;margin:0 0 22px;display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-line)}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:34px;height:1px;background:var(--gold-line)}

h1,h2,h3{font-weight:400;margin:0;line-height:1.08;letter-spacing:.005em}
.h-display{font-family:var(--serif);font-size:clamp(2.6rem,7vw,5.3rem);font-weight:300;line-height:1.02}
.h-section{font-family:var(--serif);font-weight:300;font-size:clamp(2.15rem,4.8vw,3.75rem);line-height:1.04}
.h-section em{font-style:italic;color:var(--sage-deep)}
.section--dark .h-section em{color:var(--gold-hi)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.5;color:var(--ink-2)}
.section--dark .lead{color:var(--on-dark)}
p{margin:0 0 1.1em;max-width:62ch;color:var(--ink-2)}
.muted{color:var(--ink-soft)}
.gold-text{background:var(--gold-grad-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.section--dark .gold-text,.footer .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sage-text{color:var(--sage-deep)}

/* ---------- buttons ---------- */
.btn{
  --pad:16px 34px;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  padding:var(--pad);border-radius:40px;position:relative;overflow:hidden;
  transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),transform .3s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.btn .txt{position:relative;z-index:2}
.btn svg{position:relative;z-index:2;width:15px;height:15px}
.btn-primary{color:#fff;background:var(--sage-deep);border:1px solid var(--sage-deep);box-shadow:0 12px 30px -14px rgba(70,84,54,.7)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:1;background:var(--walnut);opacity:0;transition:opacity .5s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(70,84,54,.75)}
.btn-primary:hover::before{opacity:1}
.btn-gold{color:#fff;background:var(--gold-deep);border:1px solid var(--gold-deep);box-shadow:0 12px 30px -14px rgba(120,86,36,.6)}
.btn-gold::before{content:"";position:absolute;inset:0;z-index:1;background:var(--gold-grad);opacity:0;transition:opacity .5s var(--ease)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold:hover::before{opacity:1}
.btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--line)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn-ghost:hover{color:var(--cream-2);border-color:var(--ink)}
.btn-ghost:hover::before{transform:scaleX(1)}
.section--dark .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
.section--dark .btn-ghost::before{background:var(--on-dark)}
.section--dark .btn-ghost:hover{color:var(--walnut-deep)}

/* ---------- fingerprint device ---------- */
.fp path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.fp--watermark{position:absolute;pointer-events:none;color:var(--gold);opacity:.06}

/* =====================================================================
   PRELOADER
   ===================================================================== */
.loader{position:fixed;inset:0;z-index:10000;background:var(--cream);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity .9s var(--ease),visibility .9s}
.loader__logo{width:clamp(112px,13vw,136px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 26px 54px -26px rgba(60,45,25,.42),0 0 0 1px rgba(58,48,32,.05);opacity:0;transform:scale(.9);animation:loaderIn 1s var(--ease) forwards}
.loader__word{font-family:var(--caps);letter-spacing:.5em;font-size:14px;font-weight:500;text-transform:uppercase;opacity:0;transform:translateY(8px);animation:fadeUp .8s var(--ease) 1s forwards}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes fadeUp{to{opacity:1;transform:none}}
body.loaded .loader{opacity:0;visibility:hidden}
body:not(.loaded){overflow:hidden}
/* Handoff-Ankunft: Preloader komplett überspringen (der Crossover-Vorhang deckt ab) */
body.handoff-in .loader{display:none}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{padding-block:13px;background:rgba(245,241,232,.85);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line-2)}
.nav__brand{font-family:var(--caps);font-weight:600;letter-spacing:.28em;font-size:clamp(14px,1.5vw,17px);text-transform:uppercase;display:flex;align-items:baseline;gap:.55em}
.nav__brand small{font-size:.5em;letter-spacing:.5em;color:var(--sage-deep);font-weight:500;transform:translateY(-.15em)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav__links a{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);position:relative;padding-block:6px;transition:color .35s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta .btn{--pad:11px 24px;font-size:11px}
.nav__burger{display:none;width:34px;height:34px;position:relative;z-index:960}
.nav__burger span{position:absolute;left:5px;right:5px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s var(--ease)}
.nav__burger span:nth-child(1){top:11px}.nav__burger span:nth-child(2){top:17px}.nav__burger span:nth-child(3){top:23px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Zentriert, solange Platz ist — wird das Menü länger als der
   Bildschirm, scrollt es, statt oben stumm abgeschnitten zu werden.
   (margin:auto am ersten/letzten Kind zentriert nur bei Platz.) */
.drawer{position:fixed;inset:0;z-index:940;background:var(--sage-pale);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(24px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom));box-sizing:border-box;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .5s var(--ease),visibility .5s,transform .6s var(--ease)}
.drawer > :first-child{margin-top:auto}
.drawer > :last-child{margin-bottom:auto}
body.menu-open{overflow:hidden}
/* Offenes Menü: die Kopfzeile bleibt über der Menüfläche — so ist das Kreuz antippbar. */
body.menu-open .nav{z-index:950}
/* Der Wisch im Menü bleibt im Menü: kein Weiterreichen an die Seite darunter (iOS). */
.drawer{overscroll-behavior:contain;padding-top:104px}
body.menu-open main,body.menu-open footer{touch-action:none;pointer-events:none}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);font-weight:300;color:var(--ink);padding:5px 0}
.drawer a em{font-style:italic;color:var(--sage-deep)}
.drawer .btn{margin-top:34px;font-size:13px;letter-spacing:.2em;justify-content:center;text-align:center;padding:19px 40px;width:min(300px,84vw);white-space:nowrap}
.drawer .btn-primary{color:#fff}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px var(--gutter) 58px;overflow:hidden}
/* Theke — dezenter kannelierter Empfangs-Sockel am Hero-Fuß (Schieferblau, entsättigt) */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;z-index:1;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 72%);mask:linear-gradient(180deg,transparent,#000 72%);background:repeating-linear-gradient(90deg,#c3c8d6 0,#dfe2ea 7px,#b3bacd 14px,#dfe2ea 21px);opacity:.5}
.hero__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 92% at 50% 16%,var(--cream-2) 0%,var(--cream) 44%,var(--sage-pale) 100%)}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(72% 72% at 50% 42%,#000 28%,transparent 78%);mask-image:radial-gradient(72% 72% at 50% 42%,#000 28%,transparent 78%)}
.hero__glow{position:absolute;left:50%;top:39%;width:min(80vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(199,154,82,.20) 0%,rgba(168,178,154,.12) 38%,transparent 66%);filter:blur(4px);animation:breathe 7s var(--ease-soft) infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
/* crystal-chandelier sparkles */
.hero__spark{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__spark i{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(235,209,153,.6) 60%,transparent);box-shadow:0 0 8px rgba(255,246,222,.9);opacity:0;animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.9;transform:scale(1)}}

.seal{position:relative;z-index:2;width:clamp(210px,32vw,360px);aspect-ratio:1;perspective:1200px;margin-bottom:0;will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* WOW-Auftritt: Gold-Glow blüht hinter dem Siegel auf */
.seal::before{content:"";position:absolute;inset:-16%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(199,154,82,.5),rgba(235,209,153,.18) 55%,transparent 78%);opacity:0;filter:blur(8px)}
body.loaded .seal::before{animation:sealGlow 2.6s var(--ease) .35s both}
.seal__inner{position:relative;width:100%;height:100%;border-radius:50%;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;transition:transform .3s var(--ease-soft)}
body:not(.loaded) .seal{opacity:0}
/* Auftritt auf ÄUSSEREM Element, Schweben auf INNEREM — sonst streiten sie in Safari um transform (Vibrieren) */
body.loaded .seal{animation:heroSealIn 1.5s var(--ease) .35s both}
body.loaded .seal__inner{animation:float 6.5s var(--ease-soft) 2s infinite}
/* clip-path zusätzlich zum border-radius: Auf 3D-animierten Ebenen
   (preserve-3d + Schwebe-Animation) lässt Safari border-radius während
   der Animation fallen — das eckige weiße JPG schien durch. clip-path
   überlebt die Ebenen-Rasterung; der Schatten folgt weiter dem Radius. */
.seal__img{width:100%;height:100%;border-radius:50%;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);object-fit:cover;box-shadow:0 40px 84px -30px rgba(70,60,30,.5),0 8px 24px -12px rgba(70,60,30,.32),inset 0 0 0 1px rgba(255,255,255,.5)}
/* das ECHTE Siegel per Fingerabdruck-Scan erwecken — ein Gold-Balken fährt einmal über das Original-Logo */
.seal__scan{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:1}
.seal__scan::before{content:"";position:absolute;left:-8%;right:-8%;height:22%;top:-32%;background:linear-gradient(180deg,transparent,rgba(255,247,224,.92),rgba(199,154,82,.62),transparent);filter:blur(1px);opacity:0}
body.loaded .seal__scan::before{animation:sealScan 1.4s var(--ease) .55s both}
@keyframes float{0%,100%{transform:translateY(0) rotateZ(0)}50%{transform:translateY(-14px) rotateZ(.4deg)}}
@keyframes heroSealIn{0%{opacity:0;transform:translateX(72px) scale(.9) rotate(2.2deg)}55%{opacity:1;transform:translateX(0) scale(1.05) rotate(0)}100%{opacity:1;transform:none}}
@keyframes sealGlow{0%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.06)}100%{opacity:.5;transform:scale(1)}}
@keyframes sealScan{0%{top:-32%;opacity:0}12%{opacity:1}82%{opacity:1}100%{top:110%;opacity:0}}

/* two-column hero: text left, seal right (Botschaft/Gesicht gewinnt den linken Platz) */
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,74px);align-items:center}
.hero__text{text-align:left}
.hero__logo{display:flex;justify-content:center;align-items:center}
.hero__eyebrow{opacity:0;animation:fadeUp .9s var(--ease) 1.1s forwards}
.hero__title{position:relative;z-index:2;font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.4vw,4.5rem);line-height:1.03;letter-spacing:.01em;margin:0;max-width:16ch;opacity:0;animation:fadeUp 1s var(--ease) 1.25s forwards}
.hero__title em,.hero__title .gold-text{font-style:italic}
.hero__sub{position:relative;z-index:2;margin:26px 0 0;max-width:46ch;font-size:clamp(15px,1.4vw,18px);color:var(--ink-2);opacity:0;animation:fadeUp 1s var(--ease) 1.45s forwards}
.hero__actions{position:relative;z-index:2;margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;opacity:0;animation:fadeUp 1s var(--ease) 1.65s forwards}
.hero__actions .btn{justify-content:center;white-space:nowrap}
@media(max-width:860px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(26px,6vw,42px);text-align:center;max-width:520px}
  .hero__logo{order:-1}
  .hero__text{text-align:center}
  .hero__title,.hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
}
@media(max-width:520px){.hero__actions{flex-direction:column;width:100%;max-width:360px;margin-inline:auto}.hero__actions .btn{width:100%}}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--caps);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-soft);opacity:0;animation:fadeUp 1s var(--ease) 2s forwards}
.hero__scroll .line{width:1px;height:46px;background:linear-gradient(var(--gold-line),transparent);position:relative;overflow:hidden}
.hero__scroll .line::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:linear-gradient(transparent,var(--gold));animation:scrolldot 2.2s var(--ease-soft) infinite}
@keyframes scrolldot{0%{transform:translateY(0)}60%,100%{transform:translateY(92px)}}

/* =====================================================================
   REVEAL
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal].in{transform:none}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.4s}[data-delay="5"]{transition-delay:.5s}[data-delay="6"]{transition-delay:.6s}[data-delay="7"]{transition-delay:.7s}

/* =====================================================================
   KINETIC MARQUEE
   ===================================================================== */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:26px;background:var(--sage-deep);color:var(--on-dark)}
.marquee__track{display:flex;gap:0;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);white-space:nowrap;display:inline-flex;align-items:center;color:var(--on-dark)}
.marquee .dot{display:inline-flex;width:clamp(26px,4vw,44px);justify-content:center;color:var(--gold-hi)}
.marquee .fp{width:20px;height:26px;color:var(--gold-hi)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* =====================================================================
   AKTIONEN — Karten und Bänder unter dem Titelbild, Glieder im Laufband.
   Der Aufbau folgt der Art (Veranstaltung mit Datumsfeld, Angebot mit
   Preis, Hinweis als schmales Band), die Formatvorlage gibt den Ton.
   Töne dieses Hauses, von hell nach dunkel: Creme mit Gold · helles
   Salbei mit Salbei · Walnuss mit hellem Gold. Alle drei sind Flächen,
   die diese Seite ohnehin trägt — Creme die Abschnitte, helles Salbei
   die ruhigen Kästen, Walnuss den Fußbereich. Satt-Salbei und der
   Goldverlauf standen hier einmal als Karten­flächen: Beide kommen
   sonst nirgends großflächig vor, und eine Karte darin sah aus, als
   stamme sie von einer anderen Seite. Gold bleibt Haarstrich und
   Akzent, wofür es gedacht ist.
   ===================================================================== */
[data-aktion="hinweis"]:empty{display:none}
.marquee .marquee__aktion{font-style:normal;font-weight:500;color:var(--gold-hi)}
.aktion--hell{--fl:var(--cream-2);--ti:var(--ink);--tx:var(--ink-2);--az:var(--gold-deep);--auf:#fff;border:1px solid var(--line)}
.aktion--akzent{--fl:var(--sage-pale);--ti:var(--ink);--tx:var(--ink-2);--az:var(--sage-deep);--auf:var(--on-dark)}
.aktion--dunkel{--fl:var(--walnut-deep);--ti:var(--on-dark);--tx:var(--on-dark-soft);--az:var(--gold-hi);--auf:var(--walnut-deep)}
/* Weiter oben steht „p{color:var(--ink-2)}" für die ganze Seite. Eine
   geerbte Farbe verliert gegen jede direkt gesetzte, also trug auch der
   Absatz in einer dunklen Karte die dunkle Schrift der hellen Seite —
   Kontrast 1,8 zu 1, praktisch unlesbar. Jeder Ton bringt darum seinen
   eigenen Fließtextton mit. */
.aktion p,.aktion__zeit,.aktion__inhalt,.aktion__fakten,
.aktion__statt,.aktion__leistung{color:var(--tx)}
.aktionen{background:var(--cream)}
.aktionen__reihe{display:grid;gap:clamp(14px,2vw,22px);padding-block:clamp(26px,4.5vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.aktion{background:var(--fl);color:var(--ti)}
.aktion--veranstaltung,.aktion--angebot{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,28px);
  padding:clamp(22px,3vw,34px);border-radius:var(--r);box-shadow:0 26px 50px -34px rgba(40,34,20,.45)}
.aktion__datum{flex:none;display:flex;flex-direction:column;align-items:center;width:78px;padding:13px 0 11px;
  border:1px solid var(--az);border-radius:var(--r);color:var(--az);font-family:var(--caps);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;line-height:1}
.aktion__datum b{font-family:var(--serif);font-weight:500;font-size:2.6rem;letter-spacing:0;line-height:1;margin:6px 0 5px;color:var(--ti)}
.aktion__text{flex:1;min-width:0}
.aktion__art{display:block;margin-bottom:9px;font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--az)}
.aktion__titel{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.15;color:var(--ti)}
/* Abstufung über die Farbe, nicht über Durchsichtigkeit: Ein Text mit
   opacity wird gegen seinen Untergrund gerechnet, und was auf Creme
   noch ging, fiel auf Walnuss unter jede lesbare Schwelle. */
.aktion__zeit{margin:0 0 12px;font-size:.95rem;letter-spacing:.02em}
.aktion__inhalt{margin:0 0 14px;max-width:58ch}
.aktion__fakten{margin:0 0 16px;font-size:.86rem;letter-spacing:.04em}
.aktion__knopf{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1px solid var(--az);border-radius:999px;
  font-family:var(--caps);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ti);
  transition:background .3s var(--ease),color .3s var(--ease)}
.aktion__knopf:hover,.aktion__knopf:focus-visible{background:var(--az);color:var(--auf)}
.aktion__preis{flex:none;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--az);text-align:right}
.aktion__preis b{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,3.8vw,2.9rem);line-height:1;color:var(--az)}

.aktion__statt{font-size:.9rem}
.aktion__leistung{max-width:18ch;font-size:.78rem;letter-spacing:.05em}
.aktion--hinweis{border-radius:0;border-inline:0}
.aktion--hinweis .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-block:14px}
.aktion--hinweis .aktion__titel{margin:0;font-family:var(--caps);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--az)}
.aktion--hinweis .aktion__inhalt{margin:0;max-width:none;font-size:.95rem}
@media (max-width:560px){
  .aktion--angebot{flex-direction:column}
  .aktion__preis{align-self:stretch;align-items:flex-start;text-align:left;padding:14px 0 0;border-left:0;border-top:1px solid var(--az)}
  .aktion__datum{width:66px}.aktion__datum b{font-size:2.2rem}
}

/* =====================================================================
   SECTION HEAD w/ numeral
   ===================================================================== */
.sec-head{max-width:60ch;position:relative}
.sec-head--center{text-align:center;margin:0 auto}
.sec-head .lead{margin-top:22px}
.sec-num{font-family:var(--caps);font-size:clamp(12px,1.1vw,14px);letter-spacing:.3em;color:var(--gold-ink);font-weight:500;display:block;margin-bottom:16px}

/* =====================================================================
   SPLIT + circular media (echoes the round mirror)
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,92px);align-items:center}
.split--reverse .split__media{order:2}
.split__body{max-width:52ch}
.split__body .lead{margin-bottom:1.2em}

.circle-media{position:relative;width:min(88%,460px);margin-inline:auto;aspect-ratio:1}
.circle-media img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 44px 80px -34px rgba(60,45,25,.4)}
/* Die Ringe liegen als Pseudo-Elemente ueber dem Foto und fingen im Editor jeden Tipp darauf ab — sie sind Zierde, keine Flaeche. */
.circle-media::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid var(--gold-line);pointer-events:none}
.circle-media::after{content:"";position:absolute;inset:-30px;border-radius:50%;border:1px solid rgba(92,106,81,.22);pointer-events:none}
.circle-media .badge{position:absolute;right:2%;bottom:6%;background:var(--cream-2);border-radius:50%;width:clamp(88px,12vw,116px);height:clamp(88px,12vw,116px);display:grid;place-items:center;text-align:center;box-shadow:0 20px 44px -18px rgba(60,45,25,.4);transform:rotate(-6deg)}
.circle-media .badge b{font-family:var(--serif);font-size:1.9rem;color:var(--gold-mid);line-height:.9;display:block}
.circle-media .badge span{font-family:var(--caps);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

.stats{display:flex;gap:clamp(26px,5vw,60px);margin-top:42px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--sage-deep);line-height:1}
.stat span{font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.stat-logo{display:block;height:clamp(32px,4.4vw,42px);width:auto;margin-bottom:11px}

/* =====================================================================
   TREATMENT MENU
   ===================================================================== */
.menu__group + .menu__group{margin-top:clamp(48px,7vw,90px)}
.menu__grouphead{display:flex;align-items:baseline;gap:20px;margin-bottom:8px;padding-bottom:20px}
.menu__grouphead h3{font-family:var(--caps);font-size:clamp(15px,1.8vw,20px);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);white-space:nowrap}
.menu__grouphead .rule{flex:1;height:1px;background:var(--line)}
.menu__grouphead .fp{width:20px;height:26px;color:var(--gold)}

.mitem{display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line-2);transition:translate .45s var(--ease)}
/* Indent on hover via the independent `translate` property (reflow-free): padding-left
   would shrink the 1fr name column and re-wrap the .line-label on borderline titles (#3/#7).
   Guarded to real pointer devices so touch layouts never overflow horizontally. */
@media (hover:hover){.mitem:hover{translate:14px 0}}
.mitem__name{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:400;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;grid-column:1}
.mitem__name .line-label{font-family:var(--caps);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);border:1px solid var(--gold-line);padding:3px 8px;border-radius:2px;transform:translateY(-2px)}
.mitem__price{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;color:var(--gold-ink);white-space:nowrap;grid-row:1;grid-column:2}
.mitem__desc{grid-column:1;margin:0;max-width:60ch;font-size:15px;color:var(--ink-2)}

.pricegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,6vw,80px)}
.pricegrid--zones{align-items:start}
.pricecol{min-width:0}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0}
.prow span{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.prow b{font-family:var(--serif);font-weight:600;color:var(--gold-ink);font-size:1.2rem}
.prow .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);margin:0 4px}

.menu__note{margin-top:34px;font-size:14px;color:var(--ink-2);display:flex;gap:12px;align-items:flex-start}
.menu__note .fp{width:16px;height:20px;flex:none;margin-top:3px;color:var(--gold)}

.treat-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(36px,6vw,80px);align-items:start}
.treat-media{position:sticky;top:110px}
.treat-layout + .menu__group{margin-top:clamp(60px,9vw,120px)}

/* =====================================================================
   PRODUCTS / GUINOT  (dark dramatic section)
   ===================================================================== */
.guinot-logo{height:clamp(40px,5vw,62px);width:auto}
.guinot-lockup{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.guinot-lockup--center{justify-content:center}
.guinot-lockup .tag{font-family:var(--caps);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(235,209,153,.4);padding:6px 12px;border-radius:40px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.chip{font-family:var(--caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line-dark);border-radius:40px;color:var(--on-dark-soft);transition:all .4s var(--ease)}
.chip:hover{border-color:var(--gold-line);color:var(--gold-hi)}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.product-grid figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r)}
.product-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.product-grid figure:hover img{transform:scale(1.05)}

/* =====================================================================
   QUOTE BAND
   ===================================================================== */
.band{position:relative;text-align:center;overflow:hidden;background:var(--sage-pale)}
.band .fp--watermark{width:340px;height:430px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.08}
.band__quote{position:relative;z-index:1;max-width:22ch;margin:0 auto;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.7rem,4vw,3rem);line-height:1.22;color:var(--ink)}
.band__quote .gold-text{font-style:italic}
.band__by{position:relative;z-index:1;margin-top:26px;font-family:var(--caps);letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:var(--sage-deep)}

/* =====================================================================
   CONTACT + MAP
   ===================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:stretch}
.contact__card{background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(32px,4vw,52px);box-shadow:0 40px 80px -46px rgba(60,45,25,.32);display:flex;flex-direction:column}
.cinfo{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.cinfo li{display:flex;gap:18px;align-items:flex-start}
.cinfo .ic{width:42px;height:42px;flex:none;border:1px solid var(--gold-line);border-radius:50%;display:grid;place-items:center;color:var(--gold-mid)}
.cinfo .ic svg{width:18px;height:18px}
.cinfo b{display:block;font-family:var(--caps);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px;font-weight:500}
.cinfo a,.cinfo span{color:var(--ink);font-size:16px}
.cinfo a:hover{color:var(--sage-deep)}
.contact__actions{margin-top:auto;padding-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.map{border-radius:var(--r);overflow:hidden;min-height:360px;box-shadow:0 40px 80px -46px rgba(60,45,25,.32);position:relative;border:1px solid var(--line-2);background:var(--sage-pale)}
.map iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.5) sepia(.28) hue-rotate(35deg) saturate(.85) contrast(.92) brightness(1.05)}
.map__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;pointer-events:none;color:var(--gold-deep);filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.map__pin svg{width:38px;height:38px}
.map__pin::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:14px;height:5px;border-radius:50%;background:rgba(0,0,0,.25);filter:blur(2px)}
.map__route{position:absolute;right:16px;bottom:16px;z-index:4;display:inline-flex;align-items:center;gap:9px;background:rgba(251,248,241,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:11px 18px;border-radius:40px;border:1px solid var(--line-2);font-family:var(--caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);box-shadow:0 12px 30px -14px rgba(60,45,25,.4);transition:color .35s var(--ease),transform .35s var(--ease)}
.map__route svg{width:14px;height:14px;color:var(--gold-mid)}
.map__route:hover{color:var(--sage-deep);transform:translateY(-2px)}
/* 2-Klick-Karte: Consent-Overlay, lädt OpenStreetMap erst nach Klick */
.map__consent{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:clamp(24px,5vw,44px);text-align:center;background:linear-gradient(160deg,var(--cream-2),var(--sage-pale));transition:opacity .55s var(--ease),visibility .55s}
.map__consent.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.map__consent-fp{width:42px;height:54px;color:var(--gold);opacity:.5}
.map__consent-txt{max-width:44ch;margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.map__consent-txt b{color:var(--ink);font-weight:500}
.map__consent-btn{margin-top:3px}
.map__consent-alt{font-family:var(--caps);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.map__consent-alt:hover{color:var(--gold-ink);border-color:var(--gold-line)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--walnut-deep);color:var(--on-dark);position:relative;overflow:hidden}
.footer .fp--watermark{right:-40px;bottom:-80px;width:360px;height:460px;color:#fff;opacity:.04}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-block:clamp(56px,8vw,92px)}
.footer__brand .mark{font-family:var(--caps);letter-spacing:.28em;text-transform:uppercase;font-size:1.4rem;font-weight:600;display:flex;align-items:baseline;gap:.5em}
.footer__brand .mark small{font-size:.42em;letter-spacing:.5em;color:var(--sage)}
.footer__brand p{color:var(--on-dark-soft);max-width:36ch;margin-top:18px}
.footer__guinot{margin-top:26px;display:flex;align-items:center;gap:14px}
.footer__guinot img{height:34px}
.footer__guinot span{font-family:var(--caps);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft)}
.footer h3{font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 20px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer ul a,.footer ul span{color:var(--on-dark-soft);font-size:15px}
.footer ul a:hover{color:#fff}
.footer__bottom{border-top:1px solid var(--line-dark);padding-block:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--on-dark-soft);letter-spacing:.04em}
.footer__bottom a{color:var(--on-dark-soft)}
.footer__bottom a:hover{color:#fff}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1024px){
  .treat-layout{grid-template-columns:1fr}
  .treat-media{position:static;max-width:460px;margin-inline:auto;order:-1;margin-bottom:clamp(30px,5vw,44px)}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media(max-width:920px){.nav__links{display:none}.nav__cta{display:none}.nav__burger{display:block}}
@media(max-width:760px){
  .split,.contact{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .product-grid{grid-template-columns:1fr 1fr}
  .pricegrid{grid-template-columns:1fr}
  .map{min-height:300px}
  .circle-media{width:min(80%,360px)}
}
@media(max-width:440px){
  .mitem{grid-template-columns:1fr;row-gap:4px}
  .mitem__price{grid-row:2;grid-column:1;margin-top:2px}
  .mitem__desc{grid-column:1}
  .has-modal .mitem .mitem__open{grid-column:1;grid-row:auto;margin-top:14px}
}
a:focus-visible,button:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:3px}
.section--dark a:focus-visible,.footer a:focus-visible,.marquee a:focus-visible{outline-color:var(--gold-hi)}
@media(max-width:560px){.menu__grouphead{flex-wrap:wrap}.menu__grouphead h3{white-space:normal}.menu__grouphead .fp{display:none}}
@media(max-width:520px){.hero__actions{display:grid;grid-auto-flow:row;width:100%;max-width:360px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;scroll-behavior:auto!important}
  .seal,.seal__inner,.marquee__track{animation:none}
  .seal,.seal__inner{opacity:1!important;transform:none!important}
  .seal__scan{display:none}
  .seal::before{display:none}
  [data-reveal]{opacity:1;transform:none}
  .loader__logo,.loader__word,.hero__eyebrow,.hero__title,.hero__sub,.hero__actions,.hero__scroll{opacity:1;transform:none;animation:none}
}
@media(max-height:780px){.hero__scroll{display:none}}

/* =====================================================================
   TREATMENT DETAIL MODAL (progressive enhancement)
   ===================================================================== */
.has-modal .mitem{cursor:pointer}
.mitem__open{display:none}
.has-modal .mitem__open{display:inline-flex;align-items:center;gap:8px;grid-column:2;margin-top:12px;font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.mitem__open svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.has-modal .mitem:hover .mitem__open svg,.has-modal .mitem:focus-visible .mitem__open svg{transform:translateX(5px)}
.has-modal .mitem:hover .mitem__name{color:var(--sage-deep)}
.has-modal .mitem:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;border-radius:4px}

.tmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.tmodal.open{opacity:1;visibility:visible}
.tmodal__backdrop{position:absolute;inset:0;background:rgba(30,22,14,.55);-webkit-backdrop-filter:blur(9px) saturate(120%);backdrop-filter:blur(9px) saturate(120%)}
.tmodal__card{position:relative;z-index:2;width:min(940px,100%);max-height:calc(100svh - 28px);min-height:min(560px,calc(100svh - 28px));overflow:hidden;display:grid;grid-template-columns:minmax(0,43%) 1fr;background:var(--cream-2);border-radius:8px;box-shadow:0 60px 130px -40px rgba(20,14,8,.72);transform:translateY(28px) scale(.985);opacity:0;transition:transform .6s var(--ease),opacity .5s var(--ease)}
.tmodal.open .tmodal__card{transform:none;opacity:1}
.tmodal__media{position:relative;min-height:100%;background:var(--sage-pale);overflow:hidden}
.tmodal__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease),transform 8s var(--ease-soft)}
/* Produktkarte: Flakons sind freigestellte Fotos auf Weiß — der
   Kasten wird durchgehend weiß und zeigt das Produkt ganz statt
   beschnitten. Die Behandlungskarten behalten ihre Stimmung. */
#pmodal .tmodal__media{background:#fff}
#pmodal .tmodal__media img{object-fit:contain;padding:22px;box-sizing:border-box}
.tmodal.open .tmodal__media img{transform:scale(1.05)}
/* Swipe-Hinweis — nur auf Touch, blendet beim ersten Öffnen kurz ein und wieder aus (verdeckt das Bild nicht dauerhaft) */
.tmodal__swipe{display:none}
@media (hover:none) and (pointer:coarse){
  .tmodal__swipe{display:inline-flex;position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:3;align-items:center;gap:7px;padding:6px 14px;border-radius:40px;background:rgba(30,24,16,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:var(--caps);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .55s var(--ease)}
  .tmodal__swipe.is-shown{opacity:1}
  .tmodal__swipe svg{width:13px;height:13px;opacity:.85}
}
.tmodal__body{position:relative;z-index:1;padding:clamp(22px,3.2vw,42px);min-width:0;display:flex;flex-direction:column;transition:opacity .25s var(--ease)}
.tmodal__card.switching .tmodal__body{opacity:0}
.tmodal__card.switching .tmodal__media img{opacity:0}
.tmodal__line{font-family:var(--caps);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-mid);display:block;margin-bottom:14px}
.tmodal__name{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;color:var(--ink)}
.tmodal__price{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--gold-ink);margin:6px 0 12px}
.tmodal__desc{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0}
.tmodal__meta{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.tmodal__meta dt{font-family:var(--caps);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px}
.tmodal__meta dd{margin:0;font-size:14px;color:var(--ink);line-height:1.5}
.tmodal__meta .full{grid-column:1/-1}
.tmodal__actions{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.tmodal__nav{display:flex;gap:10px;flex-shrink:0}
.tmodal__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.tmodal__arrow:hover{border-color:var(--gold-line);color:var(--gold-mid);background:var(--cream)}
.tmodal__arrow svg{width:18px;height:18px}
.tmodal__close{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(251,248,241,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;color:var(--ink);box-shadow:0 6px 20px -8px rgba(0,0,0,.45);transition:transform .4s var(--ease),background .3s}
.tmodal__close:hover{transform:rotate(90deg);background:#fff}
.tmodal__close svg{width:18px;height:18px}
.tmodal__card .fp--watermark{right:0;bottom:0;width:210px;height:270px;opacity:.05;z-index:0}
body.tmodal-open{overflow:hidden}
@media(max-width:720px){
  .tmodal__card{grid-template-columns:1fr;max-height:calc(100svh - 20px);overflow-y:auto}
  .tmodal__media{height:170px;min-height:170px}
  .tmodal__meta{grid-template-columns:1fr}
  .tmodal__actions{flex-direction:column-reverse;align-items:stretch}
  .tmodal__actions .btn{justify-content:center}
  .tmodal__nav{justify-content:space-between}
}

/* =====================================================================
   PRODUCT CATALOG — Oberkategorie tiles → image cards → detail modal
   ===================================================================== */
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:clamp(34px,5vw,54px) 0 0}
/* Produktwelt: Intro-Text links, Kategorie-Kacheln rechts (2×2) */
.pw-split{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.pw-split .pw-intro{margin:0}
.pw-split .ptiles{grid-template-columns:repeat(2,1fr);margin:0}
@media(max-width:1150px){.pw-split{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}}
@media(max-width:400px){.pw-split .ptiles{grid-template-columns:1fr}}
.ptile{position:relative;aspect-ratio:5/4;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid var(--line-2);padding:0;background:linear-gradient(158deg,var(--cream-2) 0%,var(--sage-pale) 76%,#DBE1D1 100%);box-shadow:0 20px 44px -30px rgba(60,45,25,.5);transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease)}
.ptile__fp{position:absolute;right:-26px;top:-36px;width:150px;height:190px;color:var(--gold);opacity:.07;pointer-events:none}
/* Icon höhenrelativ gedeckelt: auf niedrigen Kacheln schrumpft es,
   statt in den Titel zu laufen. */
.ptile__icon{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:auto;height:min(120px,44%);aspect-ratio:1/1;color:var(--gold-mid);transition:transform .6s var(--ease),color .4s var(--ease)}
.ptile__c{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;text-align:left}
.ptile__name{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.05;color:var(--ink)}
.ptile__meta{margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:3px 12px;font-family:var(--caps);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
/* Zahl und Wort bleiben zusammen — wird es eng, rutscht „Entdecken"
   als Ganzes in die zweite Zeile statt dazwischenzuquetschen. */
.ptile__meta>*{white-space:nowrap}
.ptile__meta .go{display:inline-flex;align-items:center;gap:6px;color:var(--gold-mid)}
.ptile__meta svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.ptile:hover,.ptile:focus-visible{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(60,45,25,.6)}
.ptile:hover .ptile__icon{transform:translate(-50%,-54%) scale(1.08)}
.ptile:hover .ptile__meta svg{transform:translateX(4px)}
.ptile:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.ptile.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 20px 44px -26px rgba(60,45,25,.5)}
.ptile.active .ptile__icon{color:var(--sage-deep)}

.ppanel{padding-block:clamp(46px,7vw,92px)}
.ppanel__head{position:sticky;top:var(--nav-h,70px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px;padding:13px 0 15px;border-bottom:1px solid var(--line-2);background:var(--cream)}
.ppanel__tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
/* Sticky-Kategorie-Tabs = kompakte Version der Produktkategorie-Kacheln */
.ppanel__tab{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 7px;border:1px solid var(--line-2);border-radius:11px;background:linear-gradient(158deg,var(--cream-2) 0%,var(--sage-pale) 100%);cursor:pointer;white-space:nowrap;box-shadow:0 9px 20px -15px rgba(60,45,25,.55);transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease)}
.ptab__ico{display:grid;place-items:center;width:30px;height:30px;flex:none;color:var(--gold-mid)}
.ptab__ico .cat-ico{width:27px;height:27px;object-fit:contain}
.ptab__name{font-family:var(--caps);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ppanel__tab:hover{transform:translateY(-2px);border-color:var(--gold-line);box-shadow:0 15px 28px -17px rgba(60,45,25,.6)}
.ppanel__tab:hover .ptab__ico{color:var(--sage-deep)}
.ppanel__tab.active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 11px 24px -15px rgba(60,45,25,.5)}
.ppanel__tab.active .ptab__ico{color:var(--sage-deep)}
.ppanel__tab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.ppanel__count{font-family:var(--caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);flex-shrink:0}
@media(max-width:640px){
  .ppanel__head{flex-wrap:nowrap;gap:10px}
  .ppanel__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter)}
  .ppanel__tabs::-webkit-scrollbar{display:none}
  .ppanel__count{display:none}
}
.pprompt{text-align:center;color:var(--ink-soft);font-family:var(--serif);font-style:italic;font-size:1.2rem;padding:12px 0}
.psub{grid-column:1/-1;margin:16px 0 2px;font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:12px}
.psub:first-child{margin-top:0}
.psub .rule{flex:1;height:1px;background:var(--line-2)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pcard{position:relative;text-align:left;display:flex;flex-direction:column;background:var(--cream-2);border:1px solid var(--line-2);border-radius:8px;cursor:pointer;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.pcard:hover,.pcard:focus-visible{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(60,45,25,.5);border-color:var(--line)}
.pcard:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.pcard__thumb{position:relative;aspect-ratio:4/5;background:#fff;overflow:hidden}
.pcard__thumb--icon{background:linear-gradient(160deg,var(--cream-2),var(--sage-pale))}
.pcard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .6s var(--ease)}
.pcard:hover .pcard__thumb img{transform:scale(1.045)}
.pcard__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-mid);transition:transform .6s var(--ease)}
.pcard__ph svg{width:52px;height:52px}
.pcard:hover .pcard__ph{transform:scale(1.06)}
.pcard__b{padding:16px 18px 18px}
.pcard__cat{font-family:var(--caps);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);display:block;margin-bottom:6px}
.pcard__name{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.14;color:var(--ink)}
.pcard__typ{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.pcatalog-note{text-align:center;color:var(--ink-2)}
/* Treatment photos: white studio beauty crops that FILL the card (cover); Gesicht oben halten */
.tmodal__media--photo{background:#fff}
.tmodal__media--photo img{object-fit:cover;object-position:center 20%}
.tmodal.open .tmodal__media--photo img{transform:none}
.tmodal__media--contain{background:#fff}
.tmodal__media--contain img{object-fit:contain;padding:clamp(24px,4vw,54px)}
.tmodal.open .tmodal__media--contain img{transform:none}
.tmodal__media--icon{background:linear-gradient(160deg,var(--cream-2),var(--sage-pale))}
.tmodal__icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-mid);z-index:1;pointer-events:none}
.tmodal__icon svg{width:clamp(76px,12vw,108px);height:auto}
@media(max-width:520px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}.ptiles{grid-template-columns:1fr 1fr;gap:12px}.ptile{aspect-ratio:4/3}.ptile__name{font-size:1.4rem}}
@media(max-width:360px){.ptiles{grid-template-columns:1fr}}

.ptile__icon svg,.pcard__ph svg,.tmodal__icon svg{display:block}
.ptile__icon svg{width:100%;height:100%}
.ptile__icon .cat-ico{width:100%;height:100%;object-fit:contain}
.pcard__ph .cat-ico{width:78px;height:78px;object-fit:contain}
.tmodal__icon .cat-ico{width:clamp(130px,19vw,190px);height:auto;object-fit:contain}

/* ---- Suche ---- */
.nav__end{display:flex;align-items:center;gap:clamp(8px,1.3vw,16px)}
.nav__search{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);border:1px solid transparent;transition:color .3s var(--ease),background .3s var(--ease)}
.nav__search svg{width:19px;height:19px}
.nav__search:hover{color:var(--gold-ink);background:rgba(199,154,82,.09)}
.nav__search:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.search{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:clamp(14px,7vh,88px) clamp(14px,4vw,48px) 24px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.search.open{opacity:1;visibility:visible}
.search__backdrop{position:absolute;inset:0;background:rgba(30,22,14,.55);-webkit-backdrop-filter:blur(9px) saturate(120%);backdrop-filter:blur(9px) saturate(120%)}
.search__panel{position:relative;z-index:1;width:min(680px,100%);max-height:calc(100svh - clamp(28px,14vh,150px));display:flex;flex-direction:column;background:var(--cream-2);border-radius:12px;box-shadow:0 60px 130px -40px rgba(20,14,8,.72);overflow:hidden;transform:translateY(-16px) scale(.99);opacity:0;transition:transform .4s var(--ease),opacity .35s var(--ease)}
.search.open .search__panel{transform:none;opacity:1}
.search__bar{display:flex;align-items:center;gap:14px;padding:16px clamp(18px,3vw,26px);border-bottom:1px solid var(--line-2)}
.search__ico{width:22px;height:22px;color:var(--gold-mid);flex:none}
.search__input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.7rem);color:var(--ink);font-weight:400}
.search__input::placeholder{color:var(--ink-soft);opacity:.75}
.search__input:focus{outline:none}
.search__input::-webkit-search-cancel-button,.search__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search__close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);flex:none;transition:color .3s,background .3s}
.search__close:hover{color:var(--ink);background:var(--cream)}
.search__close svg{width:17px;height:17px}
.search__results{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0}
.search__group{font-family:var(--caps);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);padding:14px clamp(18px,3vw,26px) 8px}
.sres{display:flex;align-items:center;gap:15px;width:100%;text-align:left;padding:10px clamp(18px,3vw,26px);cursor:pointer;transition:background .2s var(--ease)}
.sres:hover,.sres.active{background:var(--cream)}
.sres__thumb{width:46px;height:46px;border-radius:8px;flex:none;background:#fff;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-2)}
.sres__thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.sres__thumb--icon{background:linear-gradient(160deg,var(--cream-2),var(--sage-pale))}
.sres__thumb .cat-ico{width:26px;height:26px;object-fit:contain}
.sres__b{min-width:0;flex:1}
.sres__name{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres__meta{display:block;font-family:var(--caps);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres__price{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--gold-ink);flex:none;margin-left:8px}
.sres mark{background:rgba(199,154,82,.26);color:inherit;border-radius:2px;padding:0 1px}
.search__empty{padding:32px clamp(18px,3vw,26px);text-align:center;color:var(--ink-soft);font-size:15px}
.search__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px clamp(18px,3vw,26px);border-top:1px solid var(--line-2);background:var(--cream)}
.search__hint,.search__keys{font-size:12px;color:var(--ink-soft)}
.search__keys{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.search__keys kbd{font-family:var(--caps);font-size:10px;background:var(--cream-2);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;color:var(--ink-2)}
body.search-open{overflow:hidden}
@media(max-width:560px){.search__foot .search__keys{display:none}.search__panel{max-height:calc(100svh - 28px)}}

/* =====================================================================
   PARTNER — "Im selben Raum" (crossover → happy soul space)
   A window into the sibling brand: this block leans into happy soul's
   signature lime (#A4C736) + the pulse motif, honoured but clearly distinct.
   ===================================================================== */
.pulse path,.pulse line,.pulse rect,.pulse g{fill:currentColor;stroke:none}
.partner{background:linear-gradient(180deg,var(--cream) 0%,#F1F2E2 100%);position:relative;overflow:hidden}
.partner__head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:end}
@media(max-width:820px){.partner__head{grid-template-columns:1fr;gap:22px}}
.partner .sec-num{color:#4E7A24}
.partner .eyebrow{color:#4E7A24}
.partner .eyebrow::before,.partner .eyebrow::after{background:#83A315}
.partner .h-section em{color:#4E7A24;font-style:italic}
.partner__lockup{display:flex;flex-direction:column;gap:14px}
/* real happy soul space mark (lime disc + pulse) instead of a pill */
.partner__logo{display:inline-flex;align-items:center;gap:16px;align-self:start}
.partner__logo-seal{width:clamp(90px,11vw,118px);height:clamp(58px,7vw,74px);border-radius:16px;flex:none;display:grid;place-items:center;background:#A4C736;box-shadow:0 16px 32px -16px rgba(70,110,20,.5),inset 0 0 0 1px rgba(255,255,255,.22)}
.partner__logo-seal .pulse{width:74%;height:auto;color:#fff}
.partner__logo-txt{display:flex;flex-direction:column;gap:4px}
.partner__logo-txt b{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.8vw,19px);letter-spacing:.05em;text-transform:lowercase;color:var(--ink)}
.partner__logo-txt small{font-family:var(--caps);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.partner__note{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.8vw,1.5rem);color:#4E7A24;line-height:1.4}
.twins{display:flex;align-items:center;gap:14px;margin-top:18px;font-family:var(--caps);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.twins .knot{width:40px;height:1px;background:linear-gradient(90deg,var(--gold),#83A315);position:relative}
.twins .knot::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#83A315;transform:translate(-50%,-50%)}

.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(38px,5vw,58px);max-width:880px}
.partner__note strong{font-weight:600;font-style:italic;color:#355417}
/* duo — complementarity made explicit: außen (Haut) ↔ innen (Seele) */
.duo{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,30px);margin:clamp(30px,4.5vw,52px) auto 0;flex-wrap:wrap}
.duo__side{display:flex;flex-direction:column;gap:5px}
.duo__side:first-child{text-align:right;align-items:flex-end}
.duo__side:last-child{text-align:left;align-items:flex-start}
.duo__side b{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:lowercase;color:var(--ink)}
.duo__side span{font-family:var(--caps);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.duo__knot{flex:none;width:clamp(38px,5vw,58px);height:1px;background:linear-gradient(90deg,var(--gold),#83A315);position:relative}
.duo__knot::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--gold-hi),#83A315);transform:translate(-50%,-50%)}
/* shared offering note — waxing is offered by both houses */
.shared-note{display:flex;gap:clamp(16px,2.5vw,26px);align-items:center;margin:clamp(32px,4.5vw,48px) 0;padding:0}
.shared-note__marks{display:flex;align-items:center;gap:14px;flex:none}
.shared-note__marks .seal{width:clamp(44px,5.5vw,52px);height:clamp(44px,5.5vw,52px);border-radius:50%;object-fit:cover;flex:none;box-shadow:0 8px 18px -12px rgba(60,45,25,.35)}
.shared-note__marks .disc{width:clamp(60px,7vw,74px);height:clamp(44px,5.5vw,52px);border-radius:12px;flex:none;display:grid;place-items:center;background:#A4C736;box-shadow:0 8px 18px -12px rgba(70,110,20,.4),inset 0 0 0 1px rgba(255,255,255,.22)}
.shared-note__marks .disc .pulse{width:74%;height:auto;color:#fff}
.shared-note__marks .plus{font-family:var(--serif);font-size:1.4rem;color:var(--ink-soft);line-height:1}
.shared-note p{margin:0;font-size:clamp(14px,1.3vw,15.5px);color:var(--ink-2);line-height:1.62}
.shared-note b{color:var(--gold-ink);font-weight:500}
.shared-note em{font-style:normal;color:var(--ink);font-weight:400}
@media(max-width:560px){.shared-note{flex-direction:column;align-items:flex-start;gap:14px}}
.pcard-x{position:relative;text-align:left;display:flex;flex-direction:column;overflow:hidden;background:var(--cream-2);border:1px solid rgba(131,163,21,.22);border-radius:14px;cursor:pointer;
  box-shadow:0 22px 46px -32px rgba(60,80,25,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pcard-x:hover,.pcard-x:focus-visible{transform:translateY(-5px);box-shadow:0 34px 62px -30px rgba(60,80,25,.55);border-color:#83A315}
.pcard-x:focus-visible{outline:2px solid #6F8E1A;outline-offset:3px}
.pcard-x__media{position:relative;aspect-ratio:16/10;background:radial-gradient(120% 100% at 30% 20%,#F6F8EA 0%,#E5EBC7 70%,#D8E2AB 100%);overflow:hidden;display:grid;place-items:center}
.pcard-x__pulse{width:72%;height:auto;color:#6F8E1A}
.pcard-x__tag{position:absolute;top:12px;left:12px;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:lowercase;color:#3C5417;background:rgba(251,252,245,.85);border:1px solid rgba(131,163,21,.3);border-radius:30px;padding:5px 11px}
.pcard-x__b{padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,28px);display:flex;flex-direction:column;flex:1}
.pcard-x__name{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.1;color:var(--ink)}
.pcard-x__desc{font-size:13.5px;color:var(--ink-2);margin:8px 0 0}
.pcard-x__foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard-x__price{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:#4E7A24}
.pcard-x__go{display:inline-flex;align-items:center;gap:7px;font-family:var(--caps);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#6F8E1A}
.pcard-x__go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.pcard-x:hover .pcard-x__go svg{transform:translateX(4px)}
.partner__cta{margin-top:clamp(30px,4vw,46px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.partner__cta .hint{font-size:13px;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}
.btn-lime{color:#22320F;background:#A4C736;border:1px solid #A4C736;box-shadow:0 14px 34px -14px rgba(131,163,21,.6)}
.btn-lime::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,#BFD670,#83A315);opacity:0;transition:opacity .5s var(--ease)}
.btn-lime:hover{transform:translateY(-2px)}
.btn-lime:hover::before{opacity:1}
/* volles Partner-Menü (Gesamtheit der Behandlungen) — je Zeile ein Deep-Link, Limette-Akzent */
.pmenu{margin-top:clamp(34px,5vw,54px)}
.pmenu__group + .pmenu__group{margin-top:clamp(30px,4vw,46px)}
.pmenu__head{display:flex;align-items:baseline;gap:14px;font-family:var(--caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4E7A24;font-weight:500;margin-bottom:4px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pmenu__head span{color:var(--ink-soft);font-size:.82em;letter-spacing:.16em}
.pmenu__row{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;padding:17px 6px;border-bottom:1px solid var(--line-2);cursor:pointer;color:var(--ink);transition:translate .4s var(--ease),color .35s var(--ease)}
@media (hover:hover){.pmenu__row:hover{translate:8px 0}}
.pmenu__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.9vw,1.4rem);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.pmenu__name em{font-style:normal;font-family:var(--caps);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6F8E1A;border:1px solid rgba(131,163,21,.4);padding:3px 8px;border-radius:2px;transform:translateY(-2px)}
.pmenu__dots{flex:1;min-width:20px;border-bottom:1px dotted var(--line);transform:translateY(-5px)}
.pmenu__price{font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.25rem);color:#4E7A24;white-space:nowrap}
.pmenu__go{width:17px;height:17px;flex:none;color:#6F8E1A;transform:translateX(-2px);opacity:.6;transition:transform .4s var(--ease),opacity .35s var(--ease);align-self:center}
.pmenu__row:hover .pmenu__go,.pmenu__row:focus-visible .pmenu__go{transform:translateX(2px);opacity:1}
.pmenu__row:hover .pmenu__name{color:#4E7A24}
.pmenu__row:focus-visible{outline:2px solid #6F8E1A;outline-offset:3px;border-radius:4px}
@media(max-width:440px){.pmenu__go{display:none}.pmenu__row{padding-inline:0}}
@media(max-width:820px){.pcards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pcards{grid-template-columns:1fr}}
.footer__partner{margin-top:16px;display:inline-flex;align-items:center;gap:9px;font-family:var(--caps);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);border:1px solid var(--line-dark);border-radius:30px;padding:8px 14px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.footer__partner:hover{color:#BFD670;border-color:rgba(164,199,54,.4)}
.footer__partner .pulse{width:22px;height:auto;color:#A4C736}

/* =====================================================================
   CROSSOVER / HANDOFF — shared curtain (atelier gold ↔ happy soul lime)
   ===================================================================== */
.xo{position:fixed;inset:0;z-index:12000;pointer-events:none;display:flex;visibility:hidden;opacity:1}
.xo.is-active{visibility:visible;pointer-events:auto}
.xo__slats{position:absolute;inset:0;display:flex}
.xo__slat{flex:1 1 0;height:100%;transform:scaleY(0);transform-origin:top;transition:transform .62s var(--ease);
  background:#5C6A51}          /* Ankunft bei atelier: das sage-deep Grün (Marquee/Salonwand) */
.xo[data-to="hs"] .xo__slat{background:#A4C736}
.xo__mark{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s}
.xo__mark svg{width:min(48vw,300px);height:auto;color:#fff}
/* happy soul mark in the curtain = full original logo (white on lime), symmetric to the atelier seal */
.to-hs{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vw,20px);color:#fff}
.to-hs .pulse{width:min(52vw,340px);height:auto;color:#fff}
.to-hs__word{font-family:var(--sans);font-weight:500;letter-spacing:.14em;font-size:clamp(22px,4.4vw,40px);text-transform:lowercase;color:#fff;line-height:1}
.to-hs__tag{font-family:var(--sans);font-weight:500;letter-spacing:.2em;font-size:clamp(11px,1.8vw,17px);text-transform:uppercase;color:#fff;display:flex;gap:.7em}
.xo__mark img.to-atelier{width:min(46vw,300px);height:auto;border-radius:50%;box-shadow:0 24px 70px -20px rgba(0,0,0,.45)}
.xo__mark .label{margin-top:20px;font-family:var(--caps);font-size:11px;letter-spacing:.34em;text-transform:uppercase;text-align:center}
.xo[data-to="hs"] .xo__mark .label{color:#22320F}
.xo[data-to="atelier"] .xo__mark .label{color:#F0EBE0}
.xo[data-to="hs"] .to-atelier,.xo[data-to="atelier"] .to-hs{display:none}
.xo.cover .xo__slat{transform:scaleY(1)}
.xo.cover .xo__mark{opacity:1;transform:none}
.xo__slat:nth-child(1){transition-delay:0s}.xo__slat:nth-child(2){transition-delay:.05s}
.xo__slat:nth-child(3){transition-delay:.1s}.xo__slat:nth-child(4){transition-delay:.15s}
.xo__slat:nth-child(5){transition-delay:.2s}.xo__slat:nth-child(6){transition-delay:.25s}
.xo__slat:nth-child(7){transition-delay:.3s}.xo__slat:nth-child(8){transition-delay:.35s}
html.xo-arriving .loader{display:none}
html.xo-arriving .xo{visibility:visible;pointer-events:auto}
html.xo-arriving .xo__slat{transform:scaleY(1)}
html.xo-arriving .xo__mark{opacity:1;transform:none}
/* ---------------------------------------------------------------------
   BEWEGUNG REDUZIEREN — derselbe Vorhang, nur ohne Fahrbewegung.
   Die acht Lamellen stehen bereits in voller Höhe und blenden nacheinander
   von links nach rechts auf. Der Sweep bleibt lesbar, es bewegt sich aber
   nichts: reine Deckkraft, kein transform, kein Verschieben.
   Ein feiner Vertikalverlauf pro Lamelle gibt der Fläche Tiefe, damit die
   Aufblendung nicht flach wirkt.
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .xo__slat{
    transform:scaleY(1)!important;
    opacity:0;
    transition:opacity .42s var(--ease)!important;
    background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 46%,rgba(0,0,0,.12) 100%);
  }
  /* Lamellen-Kanten sichtbar halten, sonst verschmilzt die Fläche beim Aufblenden */
  .xo__slat + .xo__slat{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
  .xo.cover .xo__slat{opacity:1}
  .xo__slat:nth-child(1){transition-delay:0s!important}
  .xo__slat:nth-child(2){transition-delay:.05s!important}
  .xo__slat:nth-child(3){transition-delay:.1s!important}
  .xo__slat:nth-child(4){transition-delay:.15s!important}
  .xo__slat:nth-child(5){transition-delay:.2s!important}
  .xo__slat:nth-child(6){transition-delay:.25s!important}
  .xo__slat:nth-child(7){transition-delay:.3s!important}
  .xo__slat:nth-child(8){transition-delay:.35s!important}
  /* Zeichen: nur einblenden, nicht heranfahren */
  .xo__mark{transform:none!important;transition:opacity .5s var(--ease) .24s!important}
  .xo.cover .xo__mark{opacity:1;transform:none!important}
  /* Ankunft: Vorhang liegt schon vor dem ersten Paint deckend auf */
  html.xo-arriving .xo__slat{opacity:1}
}

/* =====================================================================
   MULTI-PAGE, aber smooth wie ein One-Pager:
   Cross-Document View Transitions (echte Unterseiten, animierter Wechsel)
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .34s var(--ease) both}
::view-transition-new(root){animation:vtIn .46s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
/* Nav & Footer bleiben beim Seitenwechsel ruhig stehen (One-Pager-Gefühl) */
.nav{view-transition-name:site-nav}
.footer{view-transition-name:site-footer}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Sub-Seiten-Hero (schlanker als der Home-Hero) */
.subhero{position:relative;padding:clamp(90px,11vh,116px) var(--gutter) clamp(22px,2.8vw,36px);text-align:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--cream-2) 0%,var(--cream) 52%,var(--sage-pale) 100%)}
.subhero__glow{position:absolute;left:50%;top:-12%;width:min(72vw,660px);aspect-ratio:1;transform:translateX(-50%);z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(199,154,82,.20),rgba(199,154,82,0) 62%);filter:blur(4px)}
.subhero__in{position:relative;z-index:1;max-width:770px;margin:0 auto}
.subhero .eyebrow{justify-content:center}
.subhero .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold-line)}
.subhero__title{font-family:var(--serif);font-weight:300;font-size:clamp(1.95rem,4.6vw,3.25rem);line-height:1.06;margin:0;color:var(--ink)}
.subhero__title em,.subhero__title .gold-text{font-style:italic}
.subhero__sub{margin:15px auto 0;max-width:54ch;font-size:clamp(14.5px,1.4vw,17px);color:var(--ink-2)}
.subhero__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.crumb{font-family:var(--caps);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--gold-ink)}.crumb a:hover{color:var(--gold-mid)}
.crumb span{opacity:.5}

/* Overview-Karten auf der Startseite (verlinken auf die Unterseiten) */
.ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.5vw,26px);margin-top:clamp(38px,5vw,58px)}
.ov__card{position:relative;display:flex;flex-direction:column;background:var(--cream-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;padding:clamp(26px,3vw,34px);box-shadow:0 22px 46px -34px rgba(58,48,32,.4);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);text-align:left}
.ov__card:hover,.ov__card:focus-visible{transform:translateY(-5px);box-shadow:0 34px 62px -32px rgba(58,48,32,.5);border-color:var(--gold-line)}
.ov__card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ov__mark{width:clamp(38px,4.6vw,50px);height:auto;color:var(--gold);margin-bottom:16px}
.ov__mark img{width:100%;height:auto;display:block}
.ov__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--ink);line-height:1.05}
.ov__desc{font-size:14.5px;color:var(--ink-2);margin:10px 0 0}
.ov__foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ov__price{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--gold-ink)}
.ov__go{display:inline-flex;align-items:center;gap:7px;font-family:var(--caps);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-mid)}
.ov__go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.ov__card:hover .ov__go svg{transform:translateX(4px)}

/* ===== Standortübergreifende Suche: Standort-Marke + Partner-Badge ===== */
.sres__mk{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden}
.sres__mk--hs{background:#A4C736}
.sres__mk--hs svg{width:76%;height:auto;color:#fff}
.sres__mk--af{background:#fff;border:1px solid rgba(58,48,32,.1)}
.sres__mk--af img{width:82%;height:82%;object-fit:contain}
.sres__partner{flex:none;margin-left:8px;font-family:var(--caps);font-size:8.5px;letter-spacing:.1em;padding:3px 9px;border-radius:20px;text-transform:none;white-space:nowrap;background:rgba(164,199,54,.22);color:#4d5a42}
.sres__partner::before{content:"→ "}
@media(max-width:560px){.sres__partner{display:none}}

/* ===== Partner-Bereich: große klickbare happy-soul-Logokarte ===== */
.partner__split{display:grid;grid-template-columns:minmax(220px,.9fr) 1.15fr;gap:clamp(30px,5vw,68px);align-items:center;margin-top:clamp(34px,5vw,54px)}
.partner__logobig{display:flex;flex-direction:column;align-items:center;gap:18px;background:none;border:none;cursor:pointer;padding:0;width:100%}
.partner__logobig--hs .hs-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,15px);background:#A4C736;border-radius:clamp(20px,2.6vw,30px);padding:clamp(30px,4vw,44px);width:100%;max-width:340px;aspect-ratio:1.66/1;box-shadow:0 34px 66px -34px rgba(70,110,20,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .5s var(--ease)}
.partner__logobig--hs:hover .hs-card,.partner__logobig--hs:focus-visible .hs-card{transform:scale(1.03)}
.partner__logobig:focus-visible{outline:none}
.partner__logobig--hs:focus-visible .hs-card{outline:2px solid #5c6a51;outline-offset:6px}
.hs-card__mark{width:74%;height:auto;color:#fff}
.hs-card__word{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:lowercase;font-size:clamp(18px,2.3vw,25px);color:#fff;line-height:1;white-space:nowrap}
.hs-card__tag{font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(10px,1.3vw,13px);color:rgba(255,255,255,.94)}
.partner__logobig__hint{display:inline-flex;align-items:center;gap:8px;font-family:var(--caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5c6a51}
.partner__logobig__hint svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.partner__logobig:hover .partner__logobig__hint svg{transform:translateX(4px)}
@media(max-width:760px){.partner__split{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}.partner__split .partner__note{text-align:left}}

/* ===== Kompakte Übersicht (behandlungen.html) ===== */
.subhero--slim{padding-top:clamp(90px,11.5vh,112px);padding-bottom:clamp(14px,2vw,24px)}
.subhero--slim .subhero__title{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.subhero--slim .subhero__sub{margin-top:13px}

/* ===== Menü-Dropdown „Behandlungen" ===== */
.nav__drop{position:relative;display:inline-flex;align-items:center}
.nav__droplink{display:inline-flex;align-items:center;gap:4px}
.nav__chev{width:11px;height:11px;flex:none;transition:transform .3s var(--ease)}
.nav__drop:hover .nav__chev,.nav__drop:focus-within .nav__chev{transform:rotate(180deg)}
.nav__drop::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:16px}
.nav__menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:300px;background:var(--cream-2);border-radius:14px;box-shadow:0 36px 72px -26px rgba(60,45,25,.45),0 0 0 1px var(--line-2);padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:950}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav__menu a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:11px 16px;border-radius:9px;font-family:var(--serif);font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);transition:background .2s,color .2s}
.nav__menu a::after{display:none}
.nav__menu a:hover,.nav__menu a:focus-visible{background:var(--cream);color:var(--gold-ink)}
.nav__menu a em{font-family:var(--caps);font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-mid);flex:none}

/* ===== Drawer-Unterpunkte (mobil) ===== */
/* Unterpunkte: Strich und Name als eine Einheit, mittig. Bricht ein langer Name um,
   bleiben beide Zeilen mittig und der Strich davor — vorher rutschte er an den
   Bildschirmrand und der Text nach links (Meldung 11.10.2026, bei Julia). */
.drawer{padding-left:18px;padding-right:18px}
.drawer a{max-width:100%;text-align:center}
.drawer .drawer__sub{display:flex;align-items:center;justify-content:center;gap:10px;padding-left:2px;font-size:clamp(1.2rem,4.5vw,1.7rem);letter-spacing:.16em;color:var(--ink-2)}
.drawer .drawer__sub::before{content:"";flex:0 0 14px;height:1px;background:var(--gold-line)}

/* ===== Haarentfernung: Text links, Preistabelle rechts ===== */
.wax{padding-top:clamp(100px,13vh,130px);padding-bottom:clamp(40px,6vw,72px)}
.wax__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5.5vw,74px);align-items:center}
.wax__text .crumb{justify-content:flex-start;margin-bottom:16px}
.wax__text .eyebrow{justify-content:flex-start}
.wax__title{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.05;margin:14px 0 0;color:var(--ink)}
.wax__title em{font-style:italic}
.wax__text .lead{margin-top:18px}
.wax__actions{justify-content:flex-start;margin-top:30px}
.wax__prices{background:var(--cream-2);border:1px solid var(--line-2);border-radius:18px;padding:clamp(24px,3.2vw,38px) clamp(26px,3.4vw,44px);box-shadow:0 34px 66px -36px rgba(60,45,25,.34)}
.wax__prices .pricegrid{grid-template-columns:1fr;gap:0}
.wax__note{margin:clamp(36px,5vw,58px) auto 0;max-width:770px}
@media(max-width:820px){.wax__grid{grid-template-columns:1fr;gap:28px}.wax__prices{max-width:520px}}

/* ===== Partner: Logo + kurzer Text links, Behandlungen rechts ===== */
.partner__cols{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,68px);align-items:center;margin-top:0}
.partner__aside{display:flex;flex-direction:column;align-items:center;gap:18px}
.partner__note--short{text-align:center;max-width:38ch;margin:0;font-size:clamp(14.5px,1.35vw,16px);line-height:1.6}
@media(max-width:860px){.partner__cols{grid-template-columns:1fr;gap:26px}.partner__cols .pmenu{width:100%}}

/* Partner: Text in die Überschrift, Tabelle bündig zur Logo-Oberkante, nichts unter dem Logo */
.partner__eyebrow{text-align:center;margin:0 auto clamp(30px,4.5vw,54px)}
.partner__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start}
.partner__col{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3.2vw,40px)}
.partner__col .pmenu{width:100%;margin-top:0}
.partner__col .partner__logobig{align-self:center}
.partner__logobig--static{cursor:default}
.partner__logobig:hover img,.partner__logobig:focus-visible img{transform:scale(1.03)}
.partner__duo .partner__logobig img{width:100%;max-width:200px;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%;box-shadow:0 32px 64px -30px rgba(60,45,25,.34),0 0 0 1px rgba(58,48,32,.06);transition:transform .5s var(--ease)}
.partner__logobig--hs .hs-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,15px);background:#A4C736;border-radius:clamp(20px,2.6vw,30px);padding:clamp(22px,3vw,36px);width:100%;max-width:332px;aspect-ratio:1.66/1;box-shadow:0 34px 66px -34px rgba(70,110,20,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .5s var(--ease)}
.partner__logobig--hs:hover .hs-card,.partner__logobig--hs:focus-visible .hs-card{transform:scale(1.03)}
.hs-card__mark{width:74%;height:auto;color:#fff}
.hs-card__word{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:lowercase;font-size:clamp(18px,2.3vw,25px);color:#fff;line-height:1;white-space:nowrap}
.hs-card__tag{font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(10px,1.3vw,13px);color:rgba(255,255,255,.94)}
.partner__col--af .pmenu__head,.partner__col--af .pmenu__price{color:var(--gold-ink)}
.partner__col--af .pmenu__name em{color:var(--gold-mid);border-color:var(--gold-line)}
.partner__col--af .pmenu__go{color:var(--gold-mid)}
.partner__col--af .pmenu__row:hover .pmenu__name,.partner__col--af .pmenu__row:hover .pmenu__go{color:var(--gold-ink)}
.partner__col--hs .pmenu__head,.partner__col--hs .pmenu__price{color:#4E7A24}
.partner__col--hs .pmenu__name em{color:#6F8E1A;border-color:rgba(131,163,21,.4)}
.partner__col--hs .pmenu__go{color:#6F8E1A}
.partner__col--hs .pmenu__row:hover .pmenu__name,.partner__col--hs .pmenu__row:hover .pmenu__go{color:#4E7A24}
.partner__unify{text-align:center;max-width:56ch;margin:clamp(40px,5.5vw,70px) auto 0}
@media(max-width:820px){.partner__duo{grid-template-columns:1fr;gap:clamp(44px,9vw,60px)}}

/* Auslieferung: genug Abstand zwischen Marke, Menü und Aktionen. */
.nav{gap:20px}
.nav__brand,.nav__end{flex-shrink:0}
.nav__brand{white-space:nowrap}
@media(max-width:1320px){.nav__links{display:none}.nav__cta{display:none}.nav__burger{display:block}}

/* Vorhang zwischen den Häusern (23.09.2026): Wortmarke als Pfad statt Schrift —
   dieselbe Größe wie vorher, aber ohne Nachladen und Umspringen der Schrift beim Ankommen.
   Beide Seiten tragen dasselbe Markup und diese Regeln. */
.xo .xo__mark svg.xo__word{display:block;width:auto;height:calc(clamp(22px,4.4vw,40px) * 1.445);color:#fff}
.xo .xo__mark img.to-atelier{aspect-ratio:1/1}

/* Menüleiste ab Laptopbreite kompakt — dieselbe Regel wie auf Julias Seite (11.10.2026, Go Roman): Mit „Fragen“
   und „Gutscheine“ brach „Weitere Behandlungen“ zwischen 1321 und 1440 px in zwei Zeilen. Nur die Punkte der
   Leiste; das Klappmenü behält seine Schrift. */
@media(min-width:1321px){.nav__links{gap:clamp(12px,1.2vw,24px)}.nav__links>a,.nav__links>.nav__drop>.nav__droplink{font-size:11px;letter-spacing:.12em}}