/* Booking band + call-to-action rows */
#termin-buchen { text-align: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.4rem; }
.cta-note { margin-top: 1.8rem; color: var(--color-text-muted); font-size: var(--fs-small); }
.event__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.event__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.event__meta svg { width: 14px; height: 14px; flex: none; color: var(--color-gold-dim); }


/* =============================================================================
   CHEZ MONIQUE — styles.css
   Kosmetik · Fashion · Art
   -----------------------------------------------------------------------------
   NO TRACKING / NO COOKIES / NO THIRD-PARTY SCRIPTS
   This stylesheet loads nothing from the internet. All fonts live in
   /assets/fonts. Never add an @import pointing at fonts.googleapis.com or any
   other CDN: that hands every visitor's IP address to a third party and makes
   a cookie/consent banner legally mandatory.
   -----------------------------------------------------------------------------
   ONE STYLESHEET, THREE PAGES
   index.html (Kosmetik), fashion.html and art.html share everything below.
   Page-specific rules are grouped under their own headings and are scoped with
   the data-page attribute on <body>, e.g.  body[data-page="art"] ...
   -----------------------------------------------------------------------------
   TABLE OF CONTENTS
     1. DESIGN TOKENS ......... colours, fonts, logo, timing   <-- EDIT HERE
     2. WEBFONTS
     3. RESET & BASE
     4. UTILITIES ............. container, buttons, headings, reveal
     5. BRAND LOCKUP .......... the always-visible logo, top left
     6. HEADER & NAV .......... auto-hide bar, page switcher
     7. MENU PANEL
     8. HERO .................. sticky "cover" effect, stage, floating type
     9. PAGE CONTENT .......... the layer that slides over the hero
    10. KOSMETIK PAGE
    11. FASHION PAGE
    12. ART PAGE .............. gallery + lightbox
    13. BUILDING BLOCKS ....... offers / news / events (used by vorlage.html)
    14. FOOTER
    15. BACK-TO-TOP
    16. SUBPAGES .............. vorlage + legal pages
    17. RESPONSIVE
    18. MOTION & PRINT
   ========================================================================== */


/* =============================================================================
   1. DESIGN TOKENS — the one-stop theming block
   Change a value here and it updates on every page.
   ========================================================================== */
:root {
  /* ---- Surfaces: warm near-blacks ----------------------------------------- */
  --color-bg:          #14100c;
  --color-bg-alt:      #1b1510;
  --color-surface:     #241c15;
  --color-surface-2:   #2d241b;
  --color-nav-solid:   #0a0705;   /* the "solid opaque black" nav on hover    */

  /* ---- Gold -----------------------------------------------------------------
     --color-champagne is sampled from Reference_landing_Kosmetik.jpeg: the
     light, warm gold of the lettering. It is used for the logo and for the big
     floating type on the heroes.
     --color-gold is a slightly deeper version of it for small UI details
     (buttons, labels, hairlines), where the lighter tone would look washed out.
     ALTERNATIVE: the cooler gold of the first design was  #c9a063            */
  --color-champagne:   #eec39c;
  --color-gold:        #dcb28a;
  --color-gold-bright: #f3d4b3;   /* hover state                               */
  --color-gold-dim:    #9a8570;   /* captions, de-emphasised labels            */
  --color-burgundy:    #5b1a28;

  /* ---- Text ---------------------------------------------------------------- */
  --color-text:        #ece4d8;
  --color-text-muted:  #b3a390;
  --color-line:        rgb(220 178 138 / 0.24);
  --color-line-soft:   rgb(236 228 216 / 0.10);

  /* ---- Typography -----------------------------------------------------------
     --font-caps    Belleza — flared capitals, the closest free match to the
                    lettering in the reference (hero slogans, pillar labels,
                    section titles)
     --font-display Cormorant Garamond — elegant serif for headings and quotes
     --font-body    Jost — clean geometric sans for everything else           */
  --font-caps:    "Belleza", Optima, Candara, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Garamond, Constantia, Georgia, serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-h2:      clamp(1.9rem, 4vw, 3.1rem);
  --fs-h3:      clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.72rem;

  --tracking-caps: 0.06em;        /* letter-spacing of the Belleza capitals   */
  --tracking-wide: 0.2em;         /* small uppercase labels                    */
  --tracking-nav:  0.14em;

  /* ---- The logo lockup (hibiscus + wordmark), top left -----------------------
     --logo-h            height of the wordmark at the top of the page
     --logo-scrolled     how much it shrinks once the visitor scrolls (1 = off)
     --logo-stroke       the faux-bold outline. 0px = the original thin script,
                         1px = a touch bolder, 1.5px starts to look heavy
     --hibiscus-scale    flower size relative to the wordmark height          */
  --logo-h:          clamp(36px, 4.6vw, 68px);
  --logo-scrolled:   0.74;
  --logo-stroke:     0.45px;   /* 'etwas filigraner' — was 1px */
  --script-stroke:   1px;      /* "L’Art Monique" on the Art photo */
  --logo-color:      var(--color-champagne);
  --hibiscus-scale:  1.12;
  --logo-left:       clamp(0.9rem, 2.4vw, 2.6rem);   /* distance from the LEFT EDGE of the screen */

  /* ---- Layout --------------------------------------------------------------- */
  --container:   1320px;
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --nav-h:       108px;
  --nav-h-mobile: 76px;
  /* how tall the brand block is at the top of the page: the bar, plus on
     phones the strip with the four areas (set further down) */
  --brand-h:     var(--nav-h);
  --radius:      2px;

  /* ---- Motion --------------------------------------------------------------- */
  --dur-underline: 220ms;
  --dur-fast:      160ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;
  --dd-item-dur:   160ms;         /* dropdown item fade (dropdowns are dormant) */
  --dd-stagger:     32ms;
  --float-dur:     7s;            /* one full up-and-down cycle of the slogan  */
  --float-dist:    9px;           /* how far it drifts                         */
  --ease-out:      cubic-bezier(0.22, 0.72, 0.28, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Depth ---------------------------------------------------------------- */
  --shadow-soft:  0 18px 46px rgb(0 0 0 / 0.45);
  --shadow-nav:   0 14px 34px rgb(0 0 0 / 0.55);
  --shadow-cover: 0 -36px 70px rgb(0 0 0 / 0.55);   /* edge of the sliding layer */
  --type-float-shadow: drop-shadow(0 6px 16px rgb(0 0 0 / 0.55));

  /* ---- Stacking order ------------------------------------------------------- */
  --z-content:   2;
  --z-backtotop: 60;
  --z-header:    100;
  --z-brand:     110;             /* the logo sits above the nav bar           */
  --z-drawer:    120;
}


/* =============================================================================
   2. WEBFONTS — self-hosted, latin subset, zero external requests
   To re-download or add weights: tools/download-fonts.ps1 (or .sh).
   font-display: swap = show fallback text at once, swap when the font arrives.
   ========================================================================== */
@font-face { font-family: "Belleza"; src: url("assets/fonts/belleza-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }


/* =============================================================================
   3. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-gold-dim) var(--color-bg);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  /* "clip", not "hidden": hidden would turn <body> into a scroll container,
     and that silently breaks position:sticky — which the hero depends on. */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }   /* drawer or lightbox open */

/* The hidden attribute must always win, even over a class that sets display. */
[hidden] { display: none !important; }

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

/* lining-nums: Cormorant's default old-style figures make "Werk 01" read as "Werk oI". */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; margin: 0 0 0.4em; font-variant-numeric: lining-nums; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

/* Anchor jumps land flush with the top of the screen: the nav bar hides while
   scrolling down, and every section brings generous top padding of its own. */
:where(section, article, div, footer)[id] { scroll-margin-top: 0; }

:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 3px; }
::selection { background: var(--color-gold); color: #14100c; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #3a2f24; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dim); }


/* =============================================================================
   4. UTILITIES
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: calc(var(--z-drawer) + 10);
  padding: 0.85rem 1.5rem;
  background: var(--color-gold); color: #14100c;
  font-size: var(--fs-small); letter-spacing: var(--tracking-nav); text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-pad); position: relative; }
.section--alt { background: var(--color-bg-alt); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: block; margin-bottom: 1.1rem;
  color: var(--color-gold); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.section-title { font-size: var(--fs-h2); margin-bottom: 0.5em; }
.section-lead { color: var(--color-text-muted); max-width: 62ch; }
.section-head--center .section-lead { margin-inline: auto; }

/* Belleza capitals, as in the reference. Used for pillar titles and slogans. */
.caps {
  font-family: var(--font-caps);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* The small gold diamond divider. */
.ornament { display: flex; align-items: center; justify-content: center; gap: 0.9rem; color: var(--color-gold); margin-block: 1.6rem; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: clamp(46px, 12vw, 130px); background: linear-gradient(to right, transparent, currentColor); }
.ornament::after { background: linear-gradient(to left, transparent, currentColor); }
.ornament svg { width: 18px; height: 10px; }
.ornament--left { justify-content: flex-start; }
.ornament--left::before { display: none; }

/* --- Buttons: the gold fill sweeps in from the left on hover --------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 1.05em 2.4em;
  border: 1px solid var(--color-gold); border-radius: var(--radius);
  color: var(--color-gold); background: transparent;
  font-size: var(--fs-small); font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: #14100c; border-color: var(--color-gold-bright); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn--solid { background: var(--color-gold); color: #14100c; }
.btn--solid::before { background: var(--color-gold-bright); }
.btn--ghost { border-color: var(--color-line); color: var(--color-text); }
.btn--small { padding: 0.8em 1.7em; font-size: 0.78rem; }

/* --- Text link with the nav's grow-from-left underline --------------------- */
/* A row of small bordered links — treatments, tags, "more of this" lists. */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.chips a {
  display: block;
  padding: 0.62em 1.15em;
  border: 1px solid var(--color-line);
  color: var(--color-champagne);
  font-size: 0.82rem; letter-spacing: 0.06em;
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.chips a:hover, .chips a:focus-visible { border-color: var(--color-gold); color: var(--color-gold-bright); background: rgb(220 178 138 / 0.06); }

.link-underline { position: relative; color: var(--color-gold); }
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-underline) var(--ease-out);
}
.link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); }

/* --- Reveal on scroll. Gated behind .js so no-JS visitors see everything. --- */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-reveal-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-reveal-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-reveal-delay="3"] { transition-delay: 270ms; }


/* =============================================================================
   5. BRAND LOCKUP — hibiscus + wordmark, always visible, bound to the LEFT EDGE
   -----------------------------------------------------------------------------
   It is deliberately NOT inside the <header>: the header slides away when you
   scroll down, the logo stays. script.js adds .is-compact once the page has
   scrolled, which shrinks it to --logo-scrolled so it does not sit on top of
   the text you are reading.
   The wordmark is an inline SVG (<use href="#cm-logo">) rather than an <img>,
   because only inline SVG can be recoloured and outlined from CSS:
     fill + stroke = --logo-color, stroke-width = --logo-stroke (the faux bold).
   ========================================================================== */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand {
  position: fixed;
  z-index: var(--z-brand);
  left: var(--logo-left);
  /* The box is exactly as tall as the nav bar and centres what is inside, so
     the lockup sits in the middle of the bar at every size. */
  top: 0;
  height: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* shrink around the vertical middle, so the compact logo stays centred too */
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
  /* soft shadow so the gold stays legible over any photo or section */
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.55));
  pointer-events: none;           /* only the links inside take clicks */
}
.brand a { pointer-events: auto; }
.brand.is-compact { transform: scale(var(--logo-scrolled)); }

.brand__home {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.1);
  transition: opacity var(--dur-fast);
}
.brand__home:hover { opacity: 0.88; }

.brand__flower {
  height: calc(var(--logo-h) * var(--hibiscus-scale));
  width: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.brand__home:hover .brand__flower { transform: rotate(-10deg); }

/* KOSMETIKINSTITUT · MEDICAL BEAUTY · FASHION LOUNGE · L'ART MONIQUE
   One line under the wordmark (it starts where the lettering starts). The dots
   are drawn by CSS, so screen readers hear four plain links. Each name has a
   short gold hairline under it; now and then a faint light runs along the
   four lines, one after the other (area-sweep). */
.brand__areas {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.6em;
  margin: calc(var(--logo-h) * 0.02) 0 0 calc(var(--logo-h) * (var(--hibiscus-scale) * 207 / 191 + 0.1));
  max-height: 2.6em;
  font-size: clamp(0.68rem, 0.84vw, 0.8rem);
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.85);
  transition: opacity var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.brand__areas a { position: relative; padding-bottom: 0.5em; color: var(--color-champagne); transition: color var(--dur-fast); }
.brand__areas a + a::before {             /* the dot, centred in the gap */
  content: "·";
  position: absolute; left: -0.8em; top: 0;
  translate: -50% 0;
  color: var(--color-gold);
}
.brand__areas a::after {                  /* the hairline under each name */
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: min(3.2em, 70%); height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgb(255 238 218 / 0.95), transparent) no-repeat rgb(220 178 138 / 0.42);
  background-size: 45% 100%;
  background-position: -90% 0;
  animation: area-sweep 7s var(--ease-in-out) infinite;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.brand__areas a:nth-child(2)::after { animation-delay: 0.35s; }
.brand__areas a:nth-child(3)::after { animation-delay: 0.7s; }
.brand__areas a:nth-child(4)::after { animation-delay: 1.05s; }
@keyframes area-sweep {
  0%, 60% { background-position: -90% 0; }
  100%    { background-position: 190% 0; }
}
.brand__areas a:hover, .brand__areas a:focus-visible { color: var(--color-gold-bright); }
.brand__areas a:hover::after, .brand__areas a:focus-visible::after { width: 100%; background-color: rgb(220 178 138 / 0.75); }
/* the area you are in */
body[data-page="kosmetik"] .brand__areas [data-area="kosmetik"],
body[data-page="behandlung"] .brand__areas [data-area="kosmetik"],
body[data-page="medical-beauty"] .brand__areas [data-area="medical"],
body[data-page="fashion"] .brand__areas [data-area="fashion"],
body[data-page="art"] .brand__areas [data-area="art"] { color: var(--color-gold-bright); }
body[data-page="kosmetik"] .brand__areas [data-area="kosmetik"]::after,
body[data-page="behandlung"] .brand__areas [data-area="kosmetik"]::after,
body[data-page="medical-beauty"] .brand__areas [data-area="medical"]::after,
body[data-page="fashion"] .brand__areas [data-area="fashion"]::after,
body[data-page="art"] .brand__areas [data-area="art"]::after { background-color: var(--color-gold); }
/* while reading, only the logo stays */
.brand.is-compact .brand__areas {
  opacity: 0; max-height: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), max-height var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.brand__logo {
  height: var(--logo-h);
  width: calc(var(--logo-h) * 1200 / 276);   /* the wordmark's own proportions */
  fill: var(--logo-color);
  stroke: var(--logo-color);
  stroke-width: var(--logo-stroke);
  stroke-linejoin: round;                     /* no spikes on the script's cusps */
  overflow: visible;
}


/* =============================================================================
   6. HEADER & NAVIGATION
   -----------------------------------------------------------------------------
   Classes toggled by script.js -> initNav():
     .is-solid     pointer or keyboard focus on a nav element -> opaque black
     .is-scrolled  page has moved -> a faint scrim fades in behind the links
     .is-hidden    visitor scrolled DOWN -> the bar slides up out of view
   The bar spans the full width; its links sit on the right, leaving the left
   side free for the brand lockup that floats above it.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--nav-h);
  background-color: transparent;
  transition: transform var(--dur-base) var(--ease-in-out),
              background-color var(--dur-fast) linear;
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(10 7 5 / 0.62), rgb(10 7 5 / 0));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-solid { background-color: var(--color-nav-solid); }
.site-header.is-solid::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }

.nav-shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
  padding-right: var(--gutter);
  /* keep the links clear of the logo lockup */
  padding-left: calc(var(--logo-left) + var(--logo-h) * 5.9 + 2rem);
}

.nav-desktop { height: 100%; }
.nav-list { display: flex; align-items: stretch; height: 100%; gap: clamp(1rem, 2vw, 2.25rem); }
.nav-item { position: relative; display: flex; align-items: center; }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45em;
  padding-block: 0.5rem;
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--color-gold-bright); }

/* ANIMATED UNDERLINE — grows left to right, ~220 ms, ease-out. */
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-underline) var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item.is-open > .nav-link::after { transform: scaleX(1); }

/* --- PAGE SWITCHER: the two "other" areas, top right ---------------------- */
.page-switch { display: flex; align-items: center; gap: 0.6rem; }
.page-switch__link {
  position: relative;
  padding: 0.72em 1.35em;
  border: 1px solid var(--color-gold);
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-out);
}
.page-switch__link::before {             /* gold fill sweeps in from the left */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--color-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.page-switch__link:hover, .page-switch__link:focus-visible { color: #14100c; }
.page-switch__link:hover::before, .page-switch__link:focus-visible::before { transform: scaleX(1); }

/* --- Dropdowns: the treatments under Pro-Aging, Anti-Aging, Well-Aging and
   Medical Beauty. The menu is as wide as its longest entry and the entries
   fade in one after the other (--i is their position, --dd-stagger the step).
   Markup:  <li class="nav-item has-dropdown"> <a class="nav-link">…</a>
            <ul class="dropdown"> <li style="--i:0"><a class="dropdown-link">…   */
.nav-caret { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.nav-item.is-open .nav-caret { transform: translateY(1px) rotate(-135deg); }
.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 100%; width: max-content;
  padding-block: 0.85rem;
  background: var(--color-nav-solid);
  border-top: 1px solid var(--color-gold);
  box-shadow: var(--shadow-nav);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.nav-item.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown-link {
  display: block; padding: 0.52rem 1.9rem;
  color: var(--color-text-muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateY(-7px);
  transition: opacity var(--dd-item-dur) var(--ease-out), transform var(--dd-item-dur) var(--ease-out), color var(--dur-fast);
}
.nav-item.is-open .dropdown-link { opacity: 1; transform: none; transition-delay: calc(min(var(--i, 0), 14) * var(--dd-stagger)); }
.dropdown-link:hover, .dropdown-link:focus-visible { color: var(--color-gold-bright); }

/* Medical Beauty is not one of the three -Aging concepts, so a hairline sets
   it apart from them in the bar. */
.nav-item--medical { margin-left: 0.3rem; padding-left: 0.9rem; }
.nav-item--medical::before {
  content: "";
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 15px;
  background: var(--color-line);
}

/* --- SHOP: the one area that gets its own button in the bar ---------------- */
.shop-link { padding-inline: 1.6em; }

/* --- ANGEBOTE: wine-red glass, only on the Kosmetik and Fashion pages ---------
   Two links are in the (synced) bar; <body data-page> decides which one shows:
   Kosmetik, the concept and treatment pages and Medical Beauty lead to the
   offers on index.html, the Fashion page to its own. A soft glint crosses the
   glass every few seconds (offers-glint). */
.offers-link {
  display: none;
  padding-inline: 1.4em;
  background: linear-gradient(180deg, #7d2538 0%, var(--color-burgundy) 55%, #461220 100%);
  border-color: rgb(220 178 138 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 0 0 / 0.25), 0 6px 18px rgb(91 26 40 / 0.35);
}
.offers-link::after {
  content: "";
  position: absolute; top: -30%; bottom: -30%; left: 0; z-index: -1;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.24) 45%, rgb(255 255 255 / 0.08) 62%, transparent);
  transform: translateX(-130%) skewX(-18deg);
  animation: offers-glint 5.5s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes offers-glint {
  0%, 68% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(260%) skewX(-18deg); }
}
body[data-page="kosmetik"] .offers-link[data-offers="kosmetik"],
body[data-page="behandlung"] .offers-link[data-offers="kosmetik"],
body[data-page="medical-beauty"] .offers-link[data-offers="kosmetik"],
body[data-page="fashion"] .offers-link[data-offers="fashion"] { display: block; }

/* --- MENÜ: the word plus three lines, at every screen width --------------- */
.burger {
  display: flex; align-items: center; gap: 0.7rem;
  height: 44px; padding: 0 0.3rem 0 0.5rem; margin-right: -0.3rem;
  color: var(--color-text);
  font-size: 0.78rem; letter-spacing: var(--tracking-nav); text-transform: uppercase;
  transition: color var(--dur-fast);
}
.burger:hover, .burger:focus-visible { color: var(--color-gold); }
.burger__icon { position: relative; width: 22px; height: 14px; }
.burger__icon span {
  position: absolute; left: 0; top: 6.25px; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) linear, width var(--dur-base) var(--ease-in-out);
}
.burger__icon span:nth-child(1) { transform: translateY(-6px); }
.burger__icon span:nth-child(3) { transform: translateY(6px); width: 15px; }
.burger[aria-expanded="true"] .burger__icon span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__icon span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__icon span:nth-child(3) { transform: rotate(-45deg); width: 22px; }


/* =============================================================================
   7. MENU PANEL — a side panel that slides in from the left, at every width
   Lives outside <header>, so hiding the header can never drag it away.
   ========================================================================== */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgb(6 4 3 / 0.7);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
  width: min(86vw, 390px);
  display: flex; flex-direction: column;
  background: var(--color-nav-solid);
  border-right: 1px solid var(--color-line);
  transform: translateX(-101%);
  visibility: hidden;   /* keeps the closed panel out of the tab order */
  transition: transform var(--dur-base) var(--ease-in-out), visibility 0s linear var(--dur-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 1rem 1.5rem; border-bottom: 1px solid var(--color-line); }
.drawer__brand { display: flex; align-items: center; gap: 0.35rem; }
.drawer__brand img { height: 38px; width: auto; }
.drawer__brand svg { height: 30px; width: calc(30px * 1200 / 276); fill: var(--logo-color); stroke: var(--logo-color); stroke-width: var(--logo-stroke); stroke-linejoin: round; overflow: visible; }
.drawer__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-text); transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.drawer__close:hover { color: var(--color-gold); transform: rotate(90deg); }
.drawer__close svg { width: 18px; height: 18px; }

.drawer__nav { padding: 0.5rem 0 1rem; }
.drawer__item { border-bottom: 1px solid var(--color-line-soft); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  color: var(--color-text);
  font-size: 0.82rem; font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.drawer__link:hover, .drawer__link:focus-visible { color: var(--color-gold); background: rgb(220 178 138 / 0.06); }

/* Sub-menus on phones are native <details>: they open and close on their
   own, without a single line of JavaScript. */
.drawer__group summary { list-style: none; cursor: pointer; }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__caret {
  flex: none;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.drawer__group[open] .drawer__caret { transform: translateY(1px) rotate(-135deg); }
.drawer__sub { padding-bottom: 0.7rem; background: rgb(0 0 0 / 0.22); }
.drawer__sub a {
  display: block;
  padding: 0.6rem 1.5rem 0.6rem 2.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem; letter-spacing: 0.05em;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.drawer__sub a:hover, .drawer__sub a:focus-visible { color: var(--color-gold); background: rgb(220 178 138 / 0.06); }

.drawer__label { display: block; padding: 1.4rem 1.5rem 0.6rem; color: var(--color-gold-dim); font-size: 0.68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.drawer__switch { display: grid; gap: 0.6rem; padding: 0 1.5rem; }
.drawer__link--shop { color: var(--color-gold); }
.drawer__switch .page-switch__link { text-align: center; }

.drawer__foot { margin-top: auto; padding: 1.5rem; border-top: 1px solid var(--color-line); }
.drawer__socials { display: flex; gap: 1.25rem; justify-content: center; }
.drawer__socials a { color: var(--color-text-muted); transition: color var(--dur-fast); }
.drawer__socials a:hover { color: var(--color-gold); }
.drawer__socials svg { width: 20px; height: 20px; }


/* =============================================================================
   8. HERO
   -----------------------------------------------------------------------------
   THE "COVER" EFFECT
   The hero is position:sticky. It stays pinned to the top of the screen while
   .page-content (section 9) scrolls up OVER it, like a sheet of paper sliding
   across a photograph. Nothing in the photo ever scrolls off the top — so the
   owner's face is never cut in half.

   THE STAGE — how the floating lettering stays exactly where the old text was
   A plain `object-fit: cover` image crops differently on every screen shape,
   so text positioned in % of the SCREEN would drift across the photo. Instead,
   .hero__stage is a box with the photo's own proportions (--ar), sized to cover
   the screen. The photo fills the stage, and the slogan is positioned in % of
   the STAGE — i.e. in % of the photo itself. It stays glued to the same patch
   of wall on a laptop, a 4K monitor and an ultra-wide.

     .hero                 one screen tall, the size container (cqw / cqh units)
     └ .hero__stage        photo-shaped box, anchored top-centre, covers .hero
        ├ <img>            fills the stage
        ├ .hero__slogan    positioned in % of the photo
        └ .pillars         (Kosmetik) the three buttons along the bottom

   Photo proportions are set per page with --ar (width / height of the file).
   Positions (--slogan-x, --slogan-y …) come straight from the reference image.
   ========================================================================== */
.hero {
  --sw: max(100cqw, 100cqh * var(--ar));   /* rendered width of the stage */
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;        /* svh = correct height on phones with a sliding URL bar */
  overflow: hidden;
  container-type: size;  /* lets children use cqw / cqh = % of the hero box   */
  background: var(--color-bg);
}
.hero[data-hero="kosmetik"] {
  --ar: 1840 / 1080;
  /* The -Aging trio along the bottom is placed from three numbers (the
     slogan keeps its distance from them too):
       --trio-fs   size of the trio's labels (and therefore of the buttons)
       --trio-h    how tall a button ends up: line + gap + rule + padding
       --trio-top  where the trio sits — the lower of "82.5 % of the photo"
                   and "7rem clear of the bottom of the screen" */
  --trio-fs:  min(calc(var(--sw) * 0.024), 2.2cqw, 2.4rem);
  --trio-h:   calc(var(--trio-fs) * 3.07);
  --trio-top: min(82.5%, calc(100cqh - var(--trio-h) - 7rem));
  /* the slogan keeps its place on the wall, but never comes closer to the
     trio than its own two lines need (ultra-wide, short windows) */
  --slogan-fs: min(calc(var(--sw) * 0.046), calc((var(--sw) * 0.04 + 50cqw - 5rem) / 9.2));
}
.hero[data-hero="fashion"]  { --ar: 1920 / 1600; }
.hero[data-hero="art"]      { --ar: 2720 / 1536; }

.hero__stage {
  position: absolute;
  top: 0;                /* anchored to the TOP: extra height is cropped from the
                            bottom (floor, legs) — never from the head          */
  left: 50%;
  translate: -50% 0;
  width: var(--sw);
  aspect-ratio: var(--ar);
}
.hero__stage picture { display: contents; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Legibility scrim at the top (logo, nav) and bottom (buttons). */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(10 7 5 / 0.5) 0%, transparent 16%, transparent 66%, rgb(10 7 5 / 0.5) 100%);
}
/* Darkens the photo as the content slides over it. script.js writes --cover,
   0 at the top of the page -> 1 when the hero is fully covered. */
.hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: #0a0705;
  opacity: calc(var(--cover, 0) * 0.7);
}

/* --- The floating lettering ------------------------------------------------ */
.hero__slogan {
  position: absolute;
  margin: 0;
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-weight: 400;
  line-height: 1.2;          /* room for the dots on Ü between the two lines */
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 4px 16px rgb(0 0 0 / 0.55), 0 1px 1px rgb(0 0 0 / 0.35);
}
.hero__line {
  display: block;
  animation: float var(--float-dur) var(--ease-in-out) infinite;
}
/* A negative delay starts the second line part-way through its cycle, so the
   two lines drift slightly out of step — calmer and more organic than moving
   as one block. */
.hero__line + .hero__line { animation-delay: calc(var(--float-dur) * -0.22); }
.hero__line + .hero__line + .hero__line { animation-delay: calc(var(--float-dur) * -0.44); }

/* A fully covered hero is invisible: stop animating it. */
.hero.is-covered .hero__line { animation-play-state: paused; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--float-dist) * -1)); }
}

/* KOSMETIK — "Jung bleiben. Jünger werden."  Left third of the wall, as in the
   reference. The size is the smaller of "5% of the photo width" and "whatever
   still fits between the screen edge and the model". */
.hero[data-hero="kosmetik"] .hero__slogan {
  left: max(calc((100% - 100cqw) / 2 + var(--gutter)), 10%);
  top: min(40%, calc(var(--trio-top) - var(--slogan-fs) * 2.6));
  font-size: var(--slogan-fs);
}

/* FASHION — "FASHION LOUNGE", a fine rule, "Mode, die deine Ausstrahlung
   verstärkt." — as in the reference picture: centred at 68 % of the photo, on
   the dark wall above the champagne and left of Monique. All sizes are shares
   of the photo width (--sw), so it keeps its place on every screen. */
.hero[data-hero="fashion"] .hero__slogan {
  left: 68%;
  top: 16.4%;
  translate: -50% 0;
  font-size: calc(var(--sw) * 0.0468);
  line-height: 0.98;
  letter-spacing: 0.08em;
}
.hero__rule {
  display: block;
  width: 1.5em; height: max(1px, 0.028em);
  margin: 0.334em auto 0.434em;
  background: currentColor;
  opacity: 0.8;
}
.hero__tagline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.518em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ART — "L’Art Monique" in Bickley Script. The lettering is an SVG drawing
   (vector outlines of the font, like the logo), so it is sized by WIDTH as a
   share of the photo. It sits on the empty wall between the mirror and the
   artist's hair; the max()/min() keep it clear of both when the photo is
   cropped at the sides. */
.hero__slogan--script { white-space: normal; text-shadow: none; }
.hero__script {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--color-champagne);
  stroke: var(--color-champagne);
  stroke-width: var(--script-stroke);      /* faux-bold outline, see section 1 */
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 14px rgb(0 0 0 / 0.55));
}
.hero__script path { vector-effect: non-scaling-stroke; }
.hero[data-hero="art"] .hero__slogan {
  left: max(calc((100% - 100cqw) / 2 + var(--gutter)), 20%);
  top: 30%;
  width: min(27%, calc(47% - (100% - 100cqw) / 2 - var(--gutter)));
  translate: 0 -50%;
}

/* --- KOSMETIK: the three pillar buttons along the bottom -------------------
   --x on each link is its centre, in % of the photo, taken from the reference.
   The clamp() keeps every label fully on screen when the photo is cropped at
   the sides; min(…) on `top` keeps them above the bottom edge on wide screens. */
.pillars { position: absolute; inset: 0; pointer-events: none; }
.pillar-link {
  pointer-events: auto;
  position: absolute;
  top: var(--trio-top);
  left: clamp(calc((100% - 100cqw) / 2 + 7rem), var(--x), calc((100% + 100cqw) / 2 - 7rem));
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.55em;
  padding: 0.4em 0.6em;
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-size: var(--trio-fs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 3px 12px rgb(0 0 0 / 0.6);
  transition: color var(--dur-fast) var(--ease-out);
}
/* The short gold line under each label; it grows to full width on hover. */
.pillar-link::after {
  content: "";
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.52);
  transition: transform var(--dur-base) var(--ease-out);
}
.pillar-link:hover, .pillar-link:focus-visible { color: var(--color-gold-bright); }
.pillar-link:hover::after, .pillar-link:focus-visible::after { transform: scaleX(1); }

/* --- Scroll cue (Fashion, Art) --------------------------------------------- */
.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(1.25rem, 4vh, 2.75rem);
  translate: -50% 0;
  display: grid; justify-items: center; gap: 0.8rem;
  color: var(--color-champagne);
  font-size: 0.68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.7);
}
.hero__cue:hover { color: var(--color-gold-bright); }
/* Fashion: in the dark gap between the champagne table and Monique (74 % of
   the photo) rather than on the skirt in the middle. */
.hero[data-hero="fashion"] .hero__cue { left: calc(50% + var(--sw) * 0.24); }
.hero__cue-line { position: relative; width: 1px; height: 52px; background: rgb(238 195 156 / 0.3); overflow: hidden; }
.hero__cue-line::after {
  content: ""; position: absolute; inset-inline: 0; top: -60%; height: 60%;
  background: currentColor;
  animation: cue-drop 2.1s var(--ease-in-out) infinite;
}
@keyframes cue-drop {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* --- NARROWER LANDSCAPE WINDOWS (3:2, iPads, 4:3) ----------------------------
   The narrower the window, the more the photo is cropped at both sides, and
   the strip right of the model gets narrower than the word "Well-Aging".
   There the trio is set a size smaller and may come closer to the edge —
   in two steps. 16:10 and wider windows keep the full size. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 39/25) {      /* up to 1.56 : 1 */
  .hero[data-hero="kosmetik"] { --trio-fs: min(calc(var(--sw) * 0.024), 1.6cqw, 2.4rem); }
  .pillar-link { left: clamp(calc((100% - 100cqw) / 2 + 5.25rem), var(--x), calc((100% + 100cqw) / 2 - 5.25rem)); }
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {        /* 4:3, 5:4 */
  .hero[data-hero="kosmetik"] { --trio-fs: min(calc(var(--sw) * 0.024), 1.2cqw, 2.4rem); }
  .pillar-link { left: clamp(calc((100% - 100cqw) / 2 + 3.4rem), var(--x), calc((100% + 100cqw) / 2 - 3.4rem)); }
}

/* --- PORTRAIT SCREENS (phones, upright tablets) ----------------------------
   The side-by-side composition cannot work on a tall screen, so the phone crop
   of the photo is loaded (see <picture> in the HTML), the stage stops being a
   positioned box, and the type stacks at the bottom over a darker scrim.
   The face stays in the upper half, clear of all text. */
@media (max-width: 767px), (orientation: portrait) {
  .hero__stage { position: static; translate: none; width: auto; aspect-ratio: auto; }
  .hero__img { object-position: 50% 0; }
  .hero__scrim {
    background: linear-gradient(to bottom, rgb(10 7 5 / 0.55) 0%, transparent 14%, transparent 44%, rgb(10 7 5 / 0.88) 80%, rgb(10 7 5 / 0.95) 100%);
  }
  /* [data-hero] gives these the same specificity as the per-page desktop
     rules above, so being later in the file is enough for them to win. */
  .hero[data-hero] .hero__slogan {
    left: 50%; top: auto; translate: -50% 0;
    width: calc(100% - 2 * var(--gutter));
    white-space: normal;
    text-wrap: balance;
  }
  .hero[data-hero="kosmetik"] .hero__slogan { bottom: clamp(7.5rem, 17svh, 10rem); font-size: clamp(2rem, 8.6vw, 3.4rem); }
  .hero[data-hero="fashion"] .hero__slogan  { bottom: clamp(7rem, 16svh, 9.5rem); font-size: clamp(1.9rem, 8.6vw, 3.2rem); }
  .hero[data-hero="fashion"] .hero__tagline { font-size: 0.6em; }

  .hero[data-hero="art"] .hero__slogan { bottom: clamp(7rem, 16svh, 9.5rem); width: min(80%, 24rem); }

  .pillars {
    inset: auto 0 0 0;
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: end;
    padding: 0 0.5rem clamp(1.75rem, 5svh, 3rem);
    pointer-events: auto;
  }
  .pillar-link { position: static; translate: none; font-size: clamp(0.8rem, 3.6vw, 1.15rem); letter-spacing: 0.05em; padding-inline: 0.2em; }
  .pillars { padding-bottom: clamp(2rem, 5svh, 3rem); }
  /* the photo starts under the brand block (bar + the strip with the areas) */
  .hero__img { top: var(--brand-h); height: calc(100% - var(--brand-h)); }
  .hero[data-hero="kosmetik"] .hero__cue { display: none; }
  .hero[data-hero="fashion"] .hero__cue { left: 50%; }
}


/* =============================================================================
   9. PAGE CONTENT — the sheet that slides over the hero
   A solid background and a higher z-index are what make the "cover" work;
   the shadow along its top edge sells the depth.
   ========================================================================== */
.page-content {
  position: relative;
  z-index: var(--z-content);
  background: var(--color-bg);
  box-shadow: var(--shadow-cover);
}


/* =============================================================================
   10. KOSMETIK PAGE (index.html)
   ========================================================================== */

/* --- The three pillars: Pro-Aging, Anti-Aging, Well-Aging ------------------
   Photo on one side, text on the other. .pillar--reverse swaps the sides. */
.pillar__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.pillar--reverse .pillar__media { order: 2; }
.pillar__body { max-width: 56ch; }

.pillar__index {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--color-gold-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
}
.pillar__title {
  display: inline-grid;
  gap: 0.45em;
  margin-bottom: 1.1em;
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}
/* the same short gold underline as the hero buttons */
.pillar__title::after {
  content: "";
  justify-self: start;
  width: 3.2em; height: 1px;
  background: var(--color-gold);
}
.pillar__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--color-text);
}
.pillar__body p:not(.pillar__lead):not(.pillar__ideal) { color: var(--color-text-muted); }
.pillar__ideal {
  margin: 1.8rem 0 2.2rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--color-gold);
  color: var(--color-champagne);
}
.pillar__body .btn { margin-top: 0.4rem; }

/* --- The price list under each concept ------------------------------------
   The rows themselves are the .pricelist building block (section 13), so a
   price list looks the same everywhere on the site. */
.treatments { margin-top: clamp(2.5rem, 5vw, 4rem); }
.treatments__head {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--color-champagne);
}
.treatments .pricelist { margin-bottom: 0.9rem; }
.treatments__vat, .facts__vat, .products__vat, .lightbox__vat {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.treatments__vat { margin-bottom: 1.8rem; text-align: right; }
.treatments__more { margin-top: 1.5rem; color: var(--color-text-muted); }

/* Every treatment name is a link to its own page; the › says so at a glance. */
a.pricelist__name { color: var(--color-champagne); transition: color var(--dur-fast) var(--ease-out); }
a.pricelist__name::after { content: "›"; margin-left: 0.4em; color: var(--color-gold-dim); }
a.pricelist__name:hover, a.pricelist__name:focus-visible { color: var(--color-gold-bright); }
a.pricelist__name:hover::after, a.pricelist__name:focus-visible::after { color: var(--color-gold-bright); }

/* --- The four areas under the photo: calm, one line each ------------------
   The whole card is clickable: the "Entdecken" link stretches over it. */
.areas-section .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.areas4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); }
.area-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(2rem, 3.2vw, 2.8rem) clamp(0.75rem, 1.4vw, 1.4rem) clamp(1.75rem, 2.6vw, 2.4rem);
  border-top: 1px solid var(--color-line);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-out);
}
.area-card:hover { border-color: var(--color-gold); }
.area-card__title {
  display: grid; justify-items: center; gap: 0.7em;
  margin: 0 0 1.1rem;
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;           /* "Medical Beauty" stays on one line like the others */
}
.area-card__title::after { content: ""; width: 2.2em; height: 1px; background: var(--color-gold); }
.area-card__lead {
  flex: 1;
  margin: 0 0 1.6rem;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.45;
}
.area-card__more {
  color: var(--color-gold);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast);
}
.area-card__more::after { content: " →"; }
.area-card .area-card__more::before { content: ""; position: absolute; inset: 0; }   /* whole card */
.area-card__more:hover, .area-card__more:focus-visible { color: var(--color-gold-bright); }

/* --- Fashion Lounge and L'Art Monique: photo, name, one line ---------------- */
.worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); max-width: 1080px; }
.world { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 4:3 shows (nearly) the whole hero photo; --focus is set per picture in index.html. */
.world__media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.8rem; border: 1px solid var(--color-line-soft); }
.world__media picture { height: 100%; }
.world__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform var(--dur-slow) var(--ease-out); }
.world:hover .world__media img { transform: scale(1.03); }
.world__title {
  margin: 0 0 0.8rem;
  color: var(--color-champagne);
  font-family: var(--font-caps);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.world__lead { margin: 0 0 1.4rem; color: var(--color-text-muted); font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

/* --- Über mich + Philosophie: text beside a photo -------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__body { max-width: 58ch; }
.split__body p { color: var(--color-text-muted); }

/* A statement sentence set large, e.g. "Schönheit ist individuell …" */
.statement {
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.38;
  color: var(--color-text) !important;
}
.signature { margin-top: 2rem; font-family: var(--font-display); font-style: italic; font-size: 1.45rem; color: var(--color-champagne) !important; }

/* Offset hairline "picture frame" behind a photo. */
.media-frame { position: relative; }
.media-frame img { position: relative; z-index: 1; width: 100%; }
.media-frame::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--color-line);
  transform: translate(20px, 20px);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.media-frame:hover::after { transform: translate(10px, 10px); }
.media-frame--left::after { transform: translate(-20px, 20px); }
.media-frame--left:hover::after { transform: translate(-10px, 10px); }

/* --- Kontakt ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 5rem); }
.contact-list { display: grid; gap: 1.6rem; }
.contact-list__row { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.contact-list__row svg { width: 18px; height: 18px; margin-top: 0.35rem; color: var(--color-gold); }
.contact-list__label { display: block; margin-bottom: 0.2rem; color: var(--color-gold-dim); font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hours { border: 1px solid var(--color-line); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--color-surface); }
.hours__title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.hours dl { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1.5rem; margin: 0; }
.hours dt { color: var(--color-text-muted); font-size: 0.95rem; }
.hours dd { margin: 0; text-align: right; font-size: 0.95rem; }
.hours dd.is-closed { color: var(--color-gold-dim); }
.hours__note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line-soft); color: var(--color-text-muted); font-size: var(--fs-small); }


/* =============================================================================
   11. FASHION PAGE (fashion.html) — the storefront
   Every card is a plain link to the product page on Shopify. No Shopify script
   runs on this site, so no cookies are set here (see README, Shopify).
   ========================================================================== */
.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.product {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface);
  border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.product:hover, .product:focus-visible { background: var(--color-surface-2); border-color: var(--color-line); transform: translateY(-4px); }
.product__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.product:hover .product__media img { transform: scale(1.04); }
.product__badge { position: absolute; top: 0.9rem; left: 0.9rem; padding: 0.3em 0.8em; background: var(--color-burgundy); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.product__body { display: grid; gap: 0.3rem; padding: 1.2rem 1.25rem 0.6rem; }
.product__cat { color: var(--color-gold-dim); font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.product__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.product__price { color: var(--color-gold); letter-spacing: 0.04em; }
.product__cta {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding: 0.9rem 1.25rem 1.2rem;
  color: var(--color-text-muted); font-size: 0.7rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--dur-fast);
}
.product__cta svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.product:hover .product__cta { color: var(--color-gold); }
.product:hover .product__cta svg { transform: translate(3px, -3px); }

.storefront__foot { display: grid; justify-items: center; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.storefront__note { color: var(--color-text-muted); font-size: var(--fs-small); max-width: 52ch; }


.products__vat { margin-top: 1.4rem; text-align: right; }

/* --- ANGEBOTE: the offers carousel (index.html before Kontakt, fashion.html
       at the top). One offer = one <li class="offer-slide">; see the comment
       above the section in the HTML. Without JavaScript all offers are simply
       listed one below the other. ------------------------------------------ */
.section--offers {
  background:
    radial-gradient(70% 90% at 12% 0%, rgb(91 26 40 / 0.30), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgb(91 26 40 / 0.20), transparent 70%),
    var(--color-bg-alt);
}
.offer-carousel { max-width: 1120px; margin-inline: auto; }
.offer-carousel__track { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.js .offer-carousel__track { gap: 0; }
.js .offer-slide {
  grid-area: 1 / 1;                      /* all on the same spot: the tallest sets the height */
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s var(--ease-out), visibility 0s linear 0.8s;
}
.js .offer-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.offer-slide {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.offer-slide--image { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; width: 100%; }
.offer-slide__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}
.offer-slide__media picture { height: 100%; }
.offer-slide__media img { width: 100%; height: 100%; object-fit: cover; }
/* a very slow drift on the picture that is showing (it resets only once the
   offer has faded out, so nothing jumps) */
.js .offer-slide .offer-slide__media img { transform: scale(1); transition: transform 0s linear 0.8s; }
.js .offer-slide.is-active .offer-slide__media img { transform: scale(1.04); transition: transform calc(var(--offer-ms, 7000ms) + 1500ms) linear; }

.offer-slide__tag {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.4em 0.95em;
  background: var(--color-burgundy);
  border: 1px solid rgb(220 178 138 / 0.5);
  color: var(--color-champagne);
  font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.offer-slide__title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin-bottom: 0.55em; }
.offer-slide__text { color: var(--color-text-muted); }
.offer-slide__price { margin: 1.3rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.55rem; color: var(--color-champagne); }
.offer-slide__price s { margin-right: 0.45em; font-size: 0.72em; color: var(--color-gold-dim); }
.offer-slide__vat { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; color: var(--color-gold-dim); }
.offer-slide__valid { margin: 0.9rem 0 1.6rem; color: var(--color-gold-dim); font-size: 0.8rem; letter-spacing: 0.06em; }

/* arrows, one line per offer (it fills up while the offer is showing), pause */
.offer-carousel__controls { display: none; }
.js .offer-carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.js .offer-carousel.is-single .offer-carousel__controls { display: none; }
.offer-carousel__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.offer-carousel__btn:hover, .offer-carousel__btn:focus-visible { border-color: var(--color-gold); color: var(--color-gold-bright); }
.offer-carousel__btn svg { width: 16px; height: 16px; }
.offer-carousel__btn[hidden] { display: none; }
.offer-carousel__toggle .icon-play { display: none; }
.offer-carousel.is-stopped .offer-carousel__toggle .icon-play { display: block; }
.offer-carousel.is-stopped .offer-carousel__toggle .icon-pause { display: none; }
.offer-carousel__dots { display: flex; gap: 0.45rem; }
.offer-carousel__dot { position: relative; width: 36px; height: 44px; }
.offer-carousel__dot::before,
.offer-carousel__fill {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px;
}
.offer-carousel__dot::before { content: ""; background: rgb(220 178 138 / 0.28); }
.offer-carousel__fill { background: var(--color-gold); transform: scaleX(0); transform-origin: left center; }
.offer-carousel__dot[aria-current="true"] .offer-carousel__fill { animation: offer-progress var(--offer-ms, 7000ms) linear forwards; }
.offer-carousel.is-paused .offer-carousel__fill { animation-play-state: paused; }
.offer-carousel.is-stopped .offer-carousel__dot[aria-current="true"] .offer-carousel__fill { animation: none; transform: scaleX(1); }
@keyframes offer-progress { to { transform: scaleX(1); } }


/* =============================================================================
   12. ART PAGE (art.html) — gallery + lightbox
   ========================================================================== */

/* Every artwork hangs on the same dark "passe-partout" tile, so paintings of
   any shape line up in a calm grid — and none of them is ever cropped. */
.artworks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 3rem) clamp(1rem, 2.5vw, 2.25rem);
}
.artwork__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 90% at 50% 30%, #231b14, #150f0b);
  border: 1px solid var(--color-line-soft);
  transition: border-color var(--dur-base) var(--ease-out);
  cursor: zoom-in;
}
.artwork__frame {
  position: absolute; inset: 10%;
  display: flex; align-items: center; justify-content: center;
}
.artwork__img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.artwork__link:hover, .artwork__link:focus-visible { border-color: var(--color-line); }
.artwork__link:hover .artwork__img, .artwork__link:focus-visible .artwork__img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 26px 50px rgb(0 0 0 / 0.6), 0 4px 10px rgb(0 0 0 / 0.4);
}
/* The only thing a sold painting shows on the wall. */
.artwork__badge {
  position: absolute; top: 0.85rem; right: 0.85rem;
  padding: 0.45em 0.9em;
  background: rgb(10 7 5 / 0.82);
  border: 1px solid var(--color-gold-dim);
  color: var(--color-champagne);
  font-size: 0.6rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.artwork__caption { padding-top: 1rem; text-align: center; }
.artwork__title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text); }
/* Technique, size and price are in the HTML for search engines and screen
   readers, but on the wall only the title shows — the rest opens in the
   lightbox. */
.artwork__meta, .artwork__sale, .artwork__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Lightbox: a native <dialog>, which brings Escape-to-close, focus
       trapping and the dimmed ::backdrop for free. ------------------------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #090705;
  color: var(--color-text);
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.72); }
.lightbox[open] { animation: lightbox-in var(--dur-base) var(--ease-out); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(4.5rem, 7vh, 6rem) clamp(4.5rem, 6vw, 7rem) clamp(2rem, 5vh, 4rem);
}
/* The figure is a size container, so the picture can be measured against it
   (cqw / cqh) while the frame around it shrinks to exactly the picture —
   that is what keeps the AI label on the picture's own corner. */
.lightbox__figure { margin: 0; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.lightbox__frame { position: relative; display: flex; }
.lightbox__img {
  max-width: 100cqw; max-height: 100cqh; width: auto; height: auto;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.65);
  animation: lightbox-img-in var(--dur-slow) var(--ease-out);
}
@keyframes lightbox-img-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
/* "AI MODIFIED" on the room views (EU AI Act) — small, but readable on a phone. */
.lightbox__ai {
  position: absolute; right: 3%; bottom: 3.5%;
  width: clamp(92px, 13%, 150px); height: auto;
  pointer-events: none;
}
.lightbox__ai[hidden] { display: none; }

/* The switch between the room view and the painting alone. */
.lightbox__views { display: inline-flex; margin-bottom: 1.3rem; border: 1px solid var(--color-line); }
.lightbox__views[hidden] { display: none; }
.lightbox__views button {
  padding: 0.7em 1.15em;
  color: var(--color-text-muted);
  font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.lightbox__views button + button { border-left: 1px solid var(--color-line); }
.lightbox__views button:hover { color: var(--color-champagne); }
.lightbox__views button[aria-pressed="true"] { background: var(--color-gold); color: #14100c; }

.lightbox__info { align-self: center; max-height: 100%; overflow-y: auto; }
.lightbox__text { margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: 0.95rem; }
.lightbox__text p + p { margin-top: 0.8rem; }
.lightbox__count { display: block; margin-bottom: 1.2rem; color: var(--color-gold-dim); font-size: 0.7rem; letter-spacing: var(--tracking-wide); }
.lightbox__title { font-variant-numeric: lining-nums; margin-bottom: 1.4rem; font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--color-champagne); }
.lightbox__meta { display: grid; gap: 0.9rem; margin: 0 0 1.8rem; }
.lightbox__meta div { display: grid; gap: 0.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-line-soft); }
.lightbox__meta dt { color: var(--color-gold-dim); font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.lightbox__meta dd { margin: 0; }
.lightbox__sale { margin-bottom: 1.3rem; color: var(--color-champagne); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; }
.lightbox__vat { margin: -0.9rem 0 1.3rem; }
.lightbox__sale.is-sold + .lightbox__vat, .lightbox__sale[hidden] + .lightbox__vat { display: none; }
.lightbox__sale.is-sold {
  display: inline-block;
  padding: 0.45em 1em;
  border: 1px solid var(--color-line);
  color: var(--color-gold-dim);
  font-family: var(--font-body); font-style: normal;
  font-size: 0.72rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

.lightbox__close, .lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgb(9 7 5 / 0.85);    /* on phones they float over the scrolling text */
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--color-gold); border-color: var(--color-gold); color: #14100c; }
.lightbox__close svg, .lightbox__nav svg { width: 16px; height: 16px; }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }


/* =============================================================================
   13. BUILDING BLOCKS — parked sections, used by vorlage.html
   Angebote, News and Events were taken off the Kosmetik page ("less fluff").
   Their markup waits in vorlage.html; paste one back into any page and these
   styles still apply.
   ========================================================================== */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.offer { position: relative; display: flex; flex-direction: column; padding: clamp(2rem, 3.5vw, 3rem); background: var(--color-surface); border: 1px solid var(--color-line); }
.offer__tag { align-self: flex-start; margin-bottom: 1.2rem; padding: 0.35em 0.9em; border: 1px solid var(--color-gold); color: var(--color-gold); font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.offer__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.offer__list { display: grid; gap: 0.75rem; margin: 1.5rem 0 2rem; }
.offer__list li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--color-line-soft); color: var(--color-text-muted); }
.offer__list b { color: var(--color-gold); font-weight: 400; }
.offer .btn { align-self: flex-start; margin-top: auto; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.news-card { display: flex; flex-direction: column; background: var(--color-surface); }
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.news-card__date { margin-bottom: 0.8rem; color: var(--color-gold-dim); font-size: 0.68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.news-card__title { font-size: var(--fs-h3); }
.news-card__excerpt { flex: 1; color: var(--color-text-muted); font-size: 0.95rem; }

.events { display: grid; gap: 1px; background: var(--color-line-soft); border-block: 1px solid var(--color-line-soft); }
.event { display: grid; grid-template-columns: 110px 1fr auto; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem) 0; background: var(--color-bg); }
.event__date { display: grid; justify-items: center; padding: 0.9rem 0.5rem; border: 1px solid var(--color-line); color: var(--color-gold); line-height: 1; }
.event__day { font-family: var(--font-display); font-size: 2rem; }
.event__month { font-size: 0.66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.event__title { font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.event__meta { color: var(--color-text-muted); font-size: 0.9rem; }


/* =============================================================================
   14. FOOTER — identical on every page (synced by tools/sync-chrome.py)
   ========================================================================== */
.site-footer { position: relative; z-index: var(--z-content); background: #0d0a07; border-top: 1px solid var(--color-line); padding-top: clamp(3.5rem, 7vw, 6rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.footer-col__title { margin-bottom: 1.5rem; color: var(--color-gold); font-family: var(--font-body); font-size: 0.72rem; font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.footer-brand svg { height: 38px; width: calc(38px * 1200 / 276); margin-bottom: 1.4rem; fill: var(--logo-color); stroke: var(--logo-color); stroke-width: var(--logo-stroke); stroke-linejoin: round; overflow: visible; }
.footer-brand p { color: var(--color-text-muted); font-size: 0.92rem; max-width: 34ch; }
.footer-areas { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; font-family: var(--font-caps); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; }
.footer-areas a { color: var(--color-champagne); }
.footer-areas a:hover { color: var(--color-gold-bright); }
.footer-links { display: grid; gap: 0.85rem; }
.footer-links a { position: relative; justify-self: start; color: var(--color-text-muted); font-size: 0.92rem; transition: color var(--dur-fast); }
.footer-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-underline) var(--ease-out); }
.footer-links a:hover { color: var(--color-gold); }
.footer-links a:hover::after { transform: scaleX(1); }
.footer-contact { display: grid; gap: 0.9rem; color: var(--color-text-muted); font-size: 0.92rem; }
.footer-contact a:hover { color: var(--color-gold); }
.footer-hours { margin-top: 1.75rem; }
.footer-hours dl { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.25rem; margin: 0; font-size: 0.88rem; }
.footer-hours dt { color: var(--color-text-muted); }
.footer-hours dd { margin: 0; text-align: right; }
.socials { display: flex; gap: 0.75rem; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-line); color: var(--color-text-muted); transition: color var(--dur-base), background-color var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.socials a:hover, .socials a:focus-visible { color: #14100c; background: var(--color-gold); border-color: var(--color-gold); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--color-line-soft); padding-block: 1.75rem; }
.footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; color: var(--color-text-muted); font-size: var(--fs-small); }
.footer-bottom__inner p { margin: 0; }
.hibiskus { width: 30px; height: auto; opacity: 0.45; filter: grayscale(0.65); transition: opacity var(--dur-slow), filter var(--dur-slow), transform var(--dur-slow) var(--ease-out); }
.hibiskus:hover { opacity: 1; filter: none; transform: rotate(-12deg) scale(1.25); }


/* =============================================================================
   15. BACK-TO-TOP
   ========================================================================== */
.back-to-top {
  position: fixed; right: clamp(1rem, 2.5vw, 2.5rem); bottom: clamp(1rem, 2.5vw, 2.5rem);
  z-index: var(--z-backtotop);
  width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid var(--color-gold); background: rgb(10 7 5 / 0.8); backdrop-filter: blur(8px);
  color: var(--color-gold);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), visibility 0s linear var(--dur-base);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.back-to-top:hover { background: var(--color-gold); color: #14100c; }
.back-to-top svg { width: 16px; height: 16px; }


/* =============================================================================
   16. SUBPAGES — vorlage.html and the legal pages
   ========================================================================== */
.subpage-hero {
  position: relative;
  padding: calc(var(--brand-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
  background: radial-gradient(90% 130% at 15% 0%, rgb(91 26 40 / 0.28), transparent 60%), linear-gradient(to bottom, #1d1610, var(--color-bg));
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.breadcrumb { display: flex; justify-content: center; margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: 0.72rem; letter-spacing: var(--tracking-nav); text-transform: uppercase; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.6rem; color: var(--color-gold-dim); }
.breadcrumb a:hover { color: var(--color-gold); }
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 2.5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin-top: 2em; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose ul { display: grid; gap: 0.6rem; margin: 0 0 1.4em; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: var(--color-gold); }
.prose a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: 3rem 0; }
.pricelist { display: grid; margin: 2rem 0 3rem; }
.pricelist__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--color-line-soft); }
.pricelist__row:first-child { border-top: 1px solid var(--color-line-soft); }
.pricelist__name { font-family: var(--font-display); font-size: 1.2rem; }
.pricelist__desc { display: block; margin-top: 0.25rem; color: var(--color-text-muted); font-size: 0.9rem; }
.pricelist__meta { text-align: right; white-space: nowrap; }
.pricelist__price { color: var(--color-gold); font-size: 1.1rem; }
.pricelist__dur { display: block; margin-top: 0.2rem; color: var(--color-gold-dim); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* --- A treatment page: text on the left, the facts box on the right -------- */
.treatment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.facts {
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.facts__title { font-size: var(--fs-h3); margin-bottom: 1.3rem; }
.facts dl { display: grid; gap: 1.2rem; margin: 0 0 1.8rem; }
.facts dt { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-champagne); }
.facts dd { margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: 0.88rem; }
.facts__price { display: block; margin-top: 0.2rem; color: var(--color-gold); font-size: 1rem; }
.facts .btn { display: block; text-align: center; }
.facts__vat { margin: -0.9rem 0 1.4rem; }

/* The closing line of a treatment page: which concepts it belongs to. */
.prose .treatment-belongs {
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-line-soft);
  color: var(--color-gold-dim);
  font-size: 0.88rem;
}

/* --- Medical Beauty: the list carries a description per treatment --------- */
.treatments--described .pricelist__desc { max-width: 70ch; font-size: 0.92rem; line-height: 1.6; }
.treatments--described .pricelist__row { padding-block: 1.4rem; }

.note-box { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-left: 2px solid var(--color-gold); background: var(--color-surface); color: var(--color-text-muted); font-size: 0.92rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin: 2rem 0 3rem; }
.photo-grid figure { margin: 0; overflow: hidden; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }


/* =============================================================================
   17. RESPONSIVE
   ========================================================================== */

/* NAV BREAKPOINT: below 1240px the bar gets lower and the logo smaller.
   (The menu panel works at every width; there is no desktop link row.) */
@media (max-width: 1240px) {
  :root { --nav-h: var(--nav-h-mobile); --logo-h: clamp(28px, 5.8vw, 43px); }
  .nav-shell { gap: 0.9rem; }
  .page-switch__link { padding: 0.6em 1em; font-size: 0.78rem; }
}

/* Five links plus the two area buttons are a lot for a 1280 px laptop: between
   the nav breakpoint and 1500 px everything in the bar shrinks a little. */
@media (min-width: 1241px) and (max-width: 1500px) {
  .nav-shell { gap: 1.2rem; padding-left: calc(var(--logo-left) + var(--logo-h) * 5.9 + 1rem); }
  .nav-list { gap: clamp(0.9rem, 1.45vw, 1.6rem); }
  .nav-link { font-size: 0.73rem; letter-spacing: 0.11em; }
  .page-switch__link { padding: 0.66em 1.05em; font-size: 0.79rem; }
}

@media (max-width: 1100px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .pillar__grid, .split, .contact-grid, .offers, .treatment-grid, .offer-slide { grid-template-columns: 1fr; }
  .offer-slide__body { max-width: 34rem; margin-inline: auto; text-align: center; }
  .areas4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { position: static; }
  .pillar--reverse .pillar__media, .split--reverse .split__media { order: 0; }
  .pillar__media, .split__media { max-width: 520px; }
  .artworks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .media-frame::after, .media-frame--left::after { transform: translate(12px, 12px); }
  /* Picture on top, text below; the whole panel scrolls when the text is long. */
  .lightbox__inner { display: flex; flex-direction: column; padding: 4.5rem 1.25rem 1.5rem; gap: 1.25rem; overflow-y: auto; }
  .lightbox__figure { flex: none; height: auto; container-type: normal; }
  .lightbox__img { max-width: calc(100vw - 2.5rem); max-height: 62dvh; }
  .lightbox__info { flex: none; align-self: stretch; max-height: none; overflow: visible; }
  .lightbox__nav { top: auto; bottom: 1.25rem; translate: none; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__info { padding-bottom: 4.5rem; }
}

/* TABLETS AND SMALL LAPTOPS: the four areas stack as two short lines under
   the name, so they stay clear of the photo's subject. */
@media (min-width: 768px) and (max-width: 1240px) {
  :root { --nav-h: 94px; }
  .brand__areas { display: grid; grid-template-columns: auto auto; justify-content: start; justify-items: start; gap: 0.1em 1.6em; max-height: 4.4em; }
  .brand__areas a { padding-bottom: 0.3em; }
  .brand__areas a:nth-child(3)::before { content: none; }
}

/* UPRIGHT TABLETS: like the phones — one row in a strip under the bar (they
   already get the phone crops of the photos, which start below the strip). */
@media (min-width: 768px) and (max-width: 1240px) and (orientation: portrait) {
  :root { --areas-h: 2.7rem; --brand-h: calc(var(--nav-h) + var(--areas-h)); }
  .brand__areas {
    position: absolute; top: 100%; left: calc(-1 * var(--logo-left)); width: 100vw;
    display: flex; justify-content: center; align-items: center; gap: 2.4em;
    height: var(--areas-h); max-height: var(--areas-h);
    margin: 0;
    font-size: 0.74rem;
  }
  .brand__areas a { padding-bottom: 0.45em; }
  .brand__areas a:nth-child(3)::before { content: "·"; }
  .brand__areas a + a::before { left: -1.2em; }
}

/* PHONES: the four areas become one row in a strip under the bar, and the
   hero photos start below it, so no word ever sits on a face. The size is
   worked out from the screen width so all four always fit (about 10 px on
   most phones); there are no dots here, the hairlines keep them apart. */
@media (max-width: 767px) {
  :root { --nav-h: 64px; --areas-h: 2.5rem; --brand-h: calc(var(--nav-h) + var(--areas-h)); }
  .brand__areas {
    position: absolute; top: 100%; left: calc(-1 * var(--logo-left)); width: 100vw;
    display: flex; justify-content: space-between; align-items: center; gap: 0;
    padding-inline: max(10px, 3vw);
    height: var(--areas-h); max-height: var(--areas-h);
    margin: 0;
    font-size: clamp(9px, calc((100vw - 24px) / 35.5), 12.5px);
    letter-spacing: 0.04em; line-height: 1.5;
  }
  .brand__areas a + a::before { content: none; }
  .burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .burger { padding: 0 0.5rem; }
  /* logo, ANGEBOTE, SHOP and the menu icon side by side down to 360 px */
  .nav-shell { gap: 0.55rem; padding-left: 0; }
  .shop-link, .offers-link { flex-shrink: 0; padding: 0.5em 0.72em; font-size: 0.64rem; letter-spacing: 0.06em; }
}

@media (max-width: 640px) {
  :root { --logo-h: clamp(26px, 7.6vw, 34px); }
  .page-switch { display: none; }          /* lives in the drawer on phones */
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .product__body { padding: 0.9rem 0.9rem 0.4rem; }
  .product__cta { padding: 0.7rem 0.9rem 1rem; }
  .cards-3, .footer-grid { grid-template-columns: 1fr; }
  .event { grid-template-columns: 84px 1fr; }
  .event .btn { grid-column: 2; justify-self: start; }
  .footer-bottom__inner { justify-content: center; text-align: center; }
  .back-to-top { width: 44px; height: 44px; }
}

@media (max-width: 380px) {             /* the smallest phones: a little more room for the logo */
  .burger { padding: 0 0.2rem; margin-right: -0.2rem; }
  .nav-shell { gap: 0.45rem; }
}

@media (max-width: 480px) {
  .artworks { grid-template-columns: 1fr; }
  .areas4, .worlds { grid-template-columns: 1fr; }
}


/* =============================================================================
   18. MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__cue-line::after { display: none; }
}

@media print {
  .site-header, .brand, .drawer, .drawer-backdrop, .back-to-top, .hero__cue, .lightbox, .skip-link { display: none !important; }
  .hero { position: relative; height: auto; }
  body { background: #fff; color: #000; }
}