/* ============================================================
   CORINNA'S BEAUTYSTUDIO — Design System v2 „Stille Präzision"
   Geteilt von: index.html · produkte.html · technologie.html
   ------------------------------------------------------------
   Inhalt
   01 Tokens          06 Buttons            11 Preiskarte
   02 Reset/Basis     07 Hero               12 Statement-Band
   03 Typografie      08 Ticker             13 Produkt-/Tech-Layouts
   04 Layoutraster    09 Medienrahmen       14 Kontakt & Footer
   05 Header/Nav      10 Behandlungsraster  15 Utilities/Responsive
   ============================================================ */

/* 00 — SELBST GEHOSTETE SCHRIFTEN (DSGVO: kein Drittanbieter-Request an Google Fonts) */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 500;
  font-display:optional;
  src:url("../assets/fonts/fraunces-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:300 500;
  font-display:optional;
  src:url("../assets/fonts/jost-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 01 — TOKENS */
:root{
  --bg:        #EDE8EC;            /* Lavendelgrau — Galeriewand   */
  --paper:     #F6F3F5;            /* helle Flächen                */
  --ink:       #2E2430;            /* Text                         */
  --ink-soft:  #6B5D6D;            /* Sekundärtext (WCAG AA ≥4.5:1) */
  --plum:      #6B2D6B;            /* Tinte: Links, CTAs, Akzentwort */
  --nav:       #4A3842;            /* dunkles Band, Footer         */
  --mauve:     #7B5B70;            /* Labels, Kicker               */
  --hairline:  rgba(74,56,66,.16);
  --hairline-strong: rgba(74,56,66,.32);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --space-section: clamp(5.5rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --ease: cubic-bezier(.21,.7,.25,1);
}

/* 02 — RESET & BASIS */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-anchor:none; }
section[id],
article[id]{
  scroll-margin-top:clamp(5.5rem, 10vw, 7.5rem);
}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:300;
  font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
::selection{ background:var(--plum); color:#fff; }
:focus-visible{ outline:2px solid var(--plum); outline-offset:4px; }

/* Feinstes Korn — kaum sichtbar, nimmt dem Digitalen die Glätte */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9990; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.03;
}

/* 03 — TYPOGRAFIE */
.kicker{
  font-size:.68rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--mauve);
}
.h-display{
  font-family:var(--font-display); font-weight:380;
  font-size:clamp(2.1rem, 4.6vw, 3.7rem);
  line-height:1.12; letter-spacing:-.01em;
}
.h-display .tint{ color:var(--plum); }
.h-page{
  font-family:var(--font-display); font-weight:340;
  font-size:clamp(2.8rem, 7.4vw, 5.6rem);
  line-height:1.05; letter-spacing:-.015em;
}
.lede{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink-soft); max-width:33em; }
.measure{ max-width:36em; }

/* 04 — LAYOUTRASTER */
.wrap{ width:min(1280px, 100% - 2*var(--gutter)); margin-inline:auto; }
section{ position:relative; padding-block:var(--space-section); }
section.flush{ padding-block:0; }
.tone-paper{ background:var(--paper); }
.rule-top{ border-top:1px solid var(--hairline); }

/* Marginalspalte: Sektionslabel links, Inhalt rechts — das Editorial-Raster */
.note-grid{
  display:grid; grid-template-columns:220px 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.note-grid > .margin-note{
  position:sticky; top:7.5rem;
  padding-top:.35rem;
  border-top:1px solid var(--hairline-strong);
}
.margin-note .kicker{ display:block; }
.margin-note .note-sub{
  margin-top:.5rem;
  font-size:.82rem;
  line-height:1.45;
  font-weight:400;
  color:#6F6270;
}

/* Scroll-Reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="2"]{ transition-delay:.1s } [data-reveal="3"]{ transition-delay:.2s }
[data-reveal="4"]{ transition-delay:.3s } [data-reveal="5"]{ transition-delay:.4s }

/* 05 — HEADER & NAVIGATION */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader span{
  font-family:var(--font-display); font-weight:380; font-size:1.3rem; letter-spacing:.02em;
  opacity:0; animation:fadeUp 1s var(--ease) .1s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  transition:background .5s var(--ease), box-shadow .5s, transform .5s var(--ease);
}
.site-header.is-solid{
  background:rgba(237,232,236,.85);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline);
}
.site-header.is-hidden{ transform:translateY(-100%); }
/* Weißer Nav-Text über dunklem Hero auf Unterseiten — bis Glaseffekt einsetzt */
.site-header.over-dark-hero:not(.is-solid) .brand{ color:#fff; }
.site-header.over-dark-hero:not(.is-solid) .brand small{ color:rgba(237,232,236,.55); }
.site-header.over-dark-hero:not(.is-solid) .main-nav a:not(.btn){ color:#fff; }
.site-header.over-dark-hero:not(.is-solid) .main-nav a:not(.btn)::after{ background:#fff; }
.site-header.over-dark-hero:not(.is-solid) .nav-toggle span{ background:#fff; }
/* Dropdown selbst bleibt immer dunkel — heller Hintergrund */
.site-header.over-dark-hero .nav-dropdown a{ color:var(--ink) !important; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.15rem; }

.brand{ font-family:var(--font-display); font-weight:420; font-size:1.3rem; line-height:1.1; letter-spacing:.005em; }
.brand small{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; color:var(--mauve); margin-top:.2rem;
}

.main-nav{ display:flex; gap:2.1rem; align-items:center; }
.main-nav a:not(.btn){
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  position:relative; padding-block:.3rem; color:var(--ink);
}
.main-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--plum); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.main-nav a:not(.btn):hover::after,
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a[aria-current="page"]{ color:var(--plum); }

.nav-toggle{ display:none; width:44px; height:44px; position:relative; z-index:1102; }
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:1.5px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s, background .3s;
}
.nav-toggle span:nth-child(1){ top:17px } .nav-toggle span:nth-child(2){ top:23px } .nav-toggle span:nth-child(3){ top:29px }
.nav-toggle[aria-expanded="true"] span{ background:var(--bg); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:1100; background:var(--nav);
  display:grid; place-items:center; text-align:center;
  opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.nav-overlay ul{ display:grid; gap:1.15rem; }
.nav-overlay a{
  font-family:var(--font-display); font-weight:360;
  font-size:clamp(1.8rem,6.5vw,2.5rem); color:var(--bg);
  transition:color .3s;
}
.nav-overlay a:hover{ color:#cdb9c6; }
.nav-overlay .overlay-meta{
  margin-top:2.4rem; color:#b7a3b0;
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
}

/* 06 — BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  padding:1rem 1.85rem; border-radius:999px; white-space:nowrap;
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
  will-change:transform;
}
.btn-solid{ background:var(--plum); color:#fff; }
.btn-solid:hover{ background:var(--nav); }
.btn-ghost{ border:1px solid var(--hairline-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--plum); color:var(--plum); }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.text-link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plum);
}
.text-link::after{ content:"→"; transition:transform .35s var(--ease); }
.text-link:hover::after{ transform:translateX(5px); }

/* 07 — HERO (Split: Typografie | Hairline | Bild) */
.hero{
  min-height:100svh; display:grid; align-items:center;
  padding-block:8.5rem 4.5rem;
}
.hero h1{
  font-family:var(--font-display); font-weight:340;
  font-size:clamp(2.9rem, 7.6vw, 6.2rem);
  line-height:1.04; letter-spacing:-.018em;
}
.hero-line{ display:block; overflow:hidden; padding-bottom:.07em; margin-bottom:-.07em; }
.hero-line > span{ display:block; transform:translateY(112%); transition:transform 1.05s var(--ease); }
.is-loaded .hero-line:nth-child(1) > span{ transition-delay:.12s }
.is-loaded .hero-line:nth-child(2) > span{ transition-delay:.26s }
.is-loaded .hero-line:nth-child(3) > span{ transition-delay:.4s }
.is-loaded .hero-line > span{ transform:none; }
.hero .tint{ color:var(--plum); }

.hero-kicker{ margin-bottom:2.2rem; display:flex; align-items:center; gap:1rem; }
.hero-kicker::before{ content:""; width:2.6rem; height:1px; background:var(--mauve); }

.hero-sub, .hero-actions{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease) .65s, transform .9s var(--ease) .65s;
}
.hero-actions{ transition-delay:.8s; margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-sub{ margin-top:2.4rem; }
.is-loaded .hero-sub, .is-loaded .hero-actions{ opacity:1; transform:none; }

.hero-scroll{
  position:absolute; left:var(--gutter); bottom:2rem;
  display:flex; align-items:center; gap:1rem;
  font-size:.64rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft);
}
.hero-scroll i{ width:3.2rem; height:1px; background:var(--ink-soft); position:relative; overflow:hidden; }
.hero-scroll i::after{
  content:""; position:absolute; inset:0; background:var(--plum);
  transform:translateX(-100%); animation:scrollline 2.8s var(--ease) infinite;
}
@keyframes scrollline{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* 08 — TICKER (gerade, ruhig, zwischen Hairlines) */
.ticker{
  border-block:1px solid var(--hairline); padding-block:1rem;
  overflow:hidden;
}
.ticker-track{ display:flex; gap:3.2rem; width:max-content; animation:ticker 48s linear infinite; }
.ticker span{
  display:flex; align-items:center; gap:3.2rem; white-space:nowrap;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
}
.ticker span::after{ content:"·"; color:var(--mauve); }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* 09 — MEDIENRAHMEN */
.frame{ position:relative; overflow:hidden; background:#e3dde2; }
.frame img, .frame video{ width:100%; height:100%; object-fit:cover; }
.frame[data-reveal] img{ transform:scale(1.06); transition:transform 1.6s var(--ease); }
.frame[data-reveal].is-in img{ transform:scale(1); }
.frame-caption{
  margin-top:.85rem; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:1rem;
}
a .frame img{ transition:transform .9s var(--ease); }
a:hover .frame img{ transform:scale(1.035); }

/* Vertikales Video-Panel (9:16 Reels) */
.reel{
  max-width:380px; width:100%;
  border:1px solid var(--hairline); padding:10px; background:var(--paper);
}
.reel .frame{ aspect-ratio:9/16; }

/* 11 — PREISKARTE */
.carte-group + .carte-group{ margin-top:2.6rem; }
.carte-group h2{
  font-family:var(--font-display); font-weight:420; font-size:1.2rem;
  color:var(--plum); margin-bottom:.9rem;
}
.carte-item{
  display:flex; align-items:baseline; gap:.9rem;
  padding-block:.72rem; border-bottom:1px solid var(--hairline);
  font-size:.99rem;
}
.carte-item:last-child{ border-bottom:0; }
.carte-item .name small{
  display:block;
  max-width:48rem;
  margin-top:.2rem;
  font-size:.82rem;
  line-height:1.45;
  font-weight:400;
  color:#5F5261;
}
.carte-item .spacer{ flex:1; }
.carte-item .price{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:400; }
.carte-item .was{ font-size:.82rem; color:var(--ink-soft); text-decoration:line-through; margin-right:.55rem; font-weight:300; }
.carte-info-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.25rem;
  height:1.15rem;
  margin-left:.35rem;
  padding-inline:.45rem;
  border:1px solid rgba(107,45,107,.35);
  border-radius:999px;
  color:var(--plum);
  background:rgba(107,45,107,.09);
  font-size:.66rem;
  line-height:1;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  vertical-align:middle;
}
.carte-info-link:hover{
  border-color:var(--plum);
  background:var(--plum);
  color:#fff;
}
.carte-footnote{
  margin-top:2.2rem;
  font-size:.82rem;
  line-height:1.45;
  font-weight:400;
  color:#6F6270;
}

/* 12 — STATEMENT-BAND (dunkel, ein Gedanke pro Seite) */
.statement{ background:var(--nav); color:var(--bg); }
.statement .wrap{ max-width:900px; text-align:center; }
.statement .kicker{ color:#b7a3b0; }
.statement p{
  font-family:var(--font-display); font-weight:340;
  font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.3; margin-top:1.6rem;
}
.statement .tint{ color:#d9bfd2; }

/* 13 — PRODUKT- & TECHNOLOGIE-LAYOUTS */
.page-hero{ padding-top:10rem; padding-bottom:clamp(3rem,7vw,5.5rem); }
/* flush-Klasse hat höhere Spezifität als .page-hero/.legal-hero allein — hier wiederherstellen */
.page-hero.flush{ padding-top:10rem; }
.page-hero .kicker{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.page-hero .kicker::before{ content:""; width:2.6rem; height:1px; background:var(--mauve); }
.page-hero .lede{ margin-top:1.8rem; }
.page-hero.product-hero{
  min-height:88svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  padding-block:clamp(8rem,13vw,12rem) clamp(4rem,8vw,6.5rem);
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.82), rgba(255,255,255,0) 28rem),
    linear-gradient(135deg, #f7f2f5 0%, var(--bg) 46%, #efe7ee 100%);
}
.page-hero.product-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:22%;
  background:linear-gradient(180deg, rgba(237,232,236,0), var(--bg));
  pointer-events:none;
}
.product-hero-content{
  position:relative;
  z-index:1;
}
.product-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(22rem, .82fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:center;
}
.product-hero .h-page{
  max-width:8.4em;
  font-size:clamp(3.5rem,7vw,6.6rem);
  line-height:.98;
}
.product-hero .lede{
  max-width:28rem;
  color:#6f6270;
}
.product-hero-note{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plum);
}
.product-hero-card{
  justify-self:end;
  width:min(100%, 34rem);
  padding:clamp(.9rem,1.5vw,1.25rem) clamp(.9rem,1.5vw,1.25rem) clamp(1rem,1.8vw,1.45rem);
  background:#fbf8f6;
  border:1px solid rgba(74,56,66,.12);
  box-shadow:0 1.6rem 3.8rem rgba(74,56,66,.12);
  transform:rotate(1.4deg) translateY(.3rem);
}
.product-hero-photo{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#eadfe6;
}
.product-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 42%, rgba(123,91,112,.08));
  pointer-events:none;
}
.product-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% center;
}
.product-hero-card figcaption{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  color:var(--mauve);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.split.media-right .split-media{ order:2; }
.split h2{ margin-block:1.3rem 1.1rem; }
.split p + p{ margin-top:1rem; }
.split .frame{ aspect-ratio:4/5; }
.split .frame.landscape{ aspect-ratio:4/3; }

/* Produkt-Editorial-Liste */
.product-row{
  display:grid; grid-template-columns:5fr 7fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
  padding-block:clamp(2.8rem,6vw,4.5rem);
  border-top:1px solid var(--hairline);
}
.product-row:last-of-type{ border-bottom:1px solid var(--hairline); }
.product-row.media-right .product-media{ order:2; }
.product-media .frame{
  aspect-ratio:1/1;
  overflow:visible;
  background:transparent;
  isolation:isolate;
}
.product-media .frame.portrait{ aspect-ratio:4/5; }
.product-media .frame::before{
  content:"";
  position:absolute;
  inset:clamp(-.8rem,-1.8vw,-.45rem);
  z-index:0;
  border-radius:28px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.74) 0%, rgba(246,243,245,.54) 56%, rgba(237,232,236,0) 78%);
  pointer-events:none;
}
.product-media .frame img{
  position:relative;
  z-index:1;
  border-radius:18px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, #000 66%, rgba(0,0,0,.72) 82%, transparent 100%);
  mask-image:radial-gradient(ellipse at center, #000 0%, #000 66%, rgba(0,0,0,.72) 82%, transparent 100%);
}
.product-body .kicker{ letter-spacing:.28em; }
.product-body h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.2rem); margin-block:.9rem .8rem; line-height:1.15;
}
.product-body p{ color:var(--ink-soft); max-width:32em; }
.product-meta{
  margin-top:1.4rem; display:flex; gap:2rem; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.product-meta span{ border-top:1px solid var(--hairline-strong); padding-top:.55rem; }
.partner-link-note{
  margin-top:1.45rem;
  max-width:34em;
  padding-top:1rem;
  border-top:1px solid var(--hairline);
}
.partner-link-note > span{
  display:inline-flex;
  align-items:center;
  min-height:1.8rem;
  padding:.18rem .72rem;
  border:1px solid var(--hairline-strong);
  border-radius:999px;
  color:var(--plum);
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
}
.partner-link-note .text-link{
  display:inline-flex;
  margin-left:.85rem;
  vertical-align:middle;
}
.partner-link-note p{
  margin-top:.55rem;
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.55;
}

.parallax-image{
  width:100%;
  min-height:420px;
  background-image:url('../assets/produkte-duo-weiss.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* Hairline-Spezifikationen */
.spec-list{ border-top:1px solid var(--hairline); }
.spec-list div{
  display:grid; grid-template-columns:240px 1fr; gap:1.5rem;
  padding-block:1.05rem; border-bottom:1px solid var(--hairline);
}
.spec-list dt{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mauve); padding-top:.2rem; }
.spec-list dd{ color:var(--ink); }

/* Behandlungs-Info auf Unterseiten */
.treatment-info .lede{ margin-top:1.4rem; }
.treatment-media-showcase{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(15rem, 22rem);
  gap:clamp(2rem,4.5vw,3.5rem);
  align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.treatment-video{
  max-width:22rem;
  width:100%;
  justify-self:end;
}
.treatment-video-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:9/16;
  border-radius:22px;
  background:#d8d0d7;
  box-shadow:0 2.5rem 4.5rem -1.2rem rgba(46,36,48,.32), 0 1rem 2rem rgba(46,36,48,.1);
  transform:scale(1);
  transition:transform 2s var(--ease);
}
.treatment-video.is-in .treatment-video-frame{ transform:scale(1.03); }
.treatment-video-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.24) 100%);
  pointer-events:none;
}
.treatment-video-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.treatment-video figcaption{
  margin-top:.9rem;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mauve);
}
.treatment-media-copy{
  max-width:30rem;
}
.treatment-media-copy h3{
  margin-block:.7rem 1.2rem;
  font-family:var(--font-display);
  font-weight:420;
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.08;
}
.treatment-media-copy h4{
  margin-top:2rem;
  font-family:var(--font-display);
  font-weight:420;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.2;
}
.treatment-media-copy h4 + p{
  margin-top:.6rem;
  color:var(--ink-soft);
}
.treatment-info-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(2.3rem,5vw,3.6rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--hairline);
}
.treatment-info-grid--single{ grid-template-columns:1fr; }
.treatment-info-grid h3{
  font-family:var(--font-display); font-weight:420;
  font-size:clamp(1.35rem,2.4vw,1.8rem);
  line-height:1.18; margin-bottom:1rem;
}
.treatment-info-grid p,
.quiet-list{ color:var(--ink-soft); max-width:34em; }
.quiet-list{ display:grid; gap:.85rem; }
.quiet-list li{
  position:relative; padding-left:1.4rem;
}
.quiet-list li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:.45rem; height:1px; background:var(--plum);
}

/* 14 — KONTAKT & FOOTER */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact h2{ margin-block:1.4rem 1rem; }
.contact-phone{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--font-display); font-weight:380;
  font-size:clamp(2rem,4.2vw,3.1rem); color:var(--plum); line-height:1.1;
  border-bottom:1px solid transparent; transition:border-color .35s;
}
.contact-phone:hover{ border-color:var(--plum); }
.contact-meta{ margin-top:1.9rem; display:grid; gap:.35rem; color:var(--ink-soft); }
.contact-meta strong{ font-weight:400; color:var(--ink); }
.contact .text-link{ margin-top:1.2rem; }

.hours-card{ border:1px solid var(--hairline); padding:clamp(1.8rem,4vw,2.6rem); background:var(--paper); }
.hours-card h3{
  font-family:var(--font-display); font-weight:420; font-size:1.45rem; margin-bottom:1.3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.open-badge{
  font-family:var(--font-body); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.4rem .8rem; border:1px solid var(--hairline-strong); color:var(--ink-soft); border-radius:999px;
}
.open-badge.is-open{ border-color:var(--plum); color:var(--plum); }
.hours-card table{ width:100%; border-collapse:collapse; }
.hours-card td{ padding-block:.66rem; border-bottom:1px solid var(--hairline); font-size:.96rem; }
.hours-card td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.hours-card tr:last-child td{ border-bottom:0; }
.hours-card tr.is-today td{ color:var(--plum); font-weight:400; }

/* Terminhinweis (Absage-Policy) — bewusst kein Popup, dezente Karte mit einmaligem Akzent-Puls */
.appointment-notice{
  display:flex; align-items:flex-start; gap:.9rem;
  margin-top:1.4rem;
  padding:1.1rem 1.3rem;
  border:1px solid var(--hairline);
  border-left:4px solid var(--plum);
  background:var(--paper);
  border-radius:2px;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
}
.appointment-notice strong{ color:var(--plum); font-weight:480; }
.appointment-notice .notice-icon{ flex:none; font-size:1.3rem; line-height:1; color:var(--plum); margin-top:.05rem; }
.appointment-notice.is-in{ animation:noticeFlash 1.5s var(--ease) .25s both; }
@keyframes noticeFlash{
  0%{ background:var(--paper); box-shadow:0 0 0 0 rgba(107,45,107,0); }
  40%{ background:#F3E6F0; box-shadow:0 0 0 4px rgba(107,45,107,.14); }
  100%{ background:var(--paper); box-shadow:0 0 0 0 rgba(107,45,107,0); }
}

.site-footer{ background:var(--nav); color:rgba(237,232,236,.72); padding-block:4.2rem 2.4rem; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.8rem; border-bottom:1px solid rgba(237,232,236,.14);
}
.site-footer .brand{ color:var(--bg); }
.site-footer .brand small{ color:rgba(237,232,236,.45); }
.footer-col h3{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; font-weight:400;
  color:rgba(237,232,236,.65); margin-bottom:1rem;
}
.footer-col ul{ display:grid; gap:.5rem; font-size:.94rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.4rem;
  padding-top:1.7rem; font-size:.78rem; color:rgba(237,232,236,.65);
}
.footer-copy{ display:contents; }
.footer-copy > span:first-child{ justify-self:start; }
.footer-credit{ justify-self:center; white-space:nowrap; }
.footer-bottom nav{ display:flex; justify-self:end; gap:1.5rem; }
.footer-bottom a:hover{ color:#fff; }

/* Mobile Sticky-Leiste */
.mobile-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:900;
  display:none; gap:1px; background:var(--hairline);
  transform:translateY(110%); transition:transform .55s var(--ease);
  box-shadow:0 -8px 24px rgba(46,36,48,.12);
}
.mobile-bar.is-visible{ transform:none; }
.mobile-bar a{ flex:1; text-align:center; padding:1.02rem .5rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.mobile-bar .bar-call{ background:var(--bg); }

/* 15 — UTILITIES & RESPONSIVE */
@media (max-width:1024px){
  .note-grid{ grid-template-columns:1fr; }
  .note-grid > .margin-note{ position:static; border-top:0; border-bottom:1px solid var(--hairline-strong); padding-bottom:.6rem; margin-bottom:-1rem; }
  .spec-list div{ grid-template-columns:1fr; gap:.3rem; }
}
@media (max-width:880px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .hero{ padding-top:7.5rem; }
  .page-hero.product-hero{
    min-height:86svh;
    align-items:center;
    padding-block:8.2rem 4.5rem;
    background:
      radial-gradient(circle at 68% 28%, rgba(255,255,255,.8), rgba(255,255,255,0) 18rem),
      linear-gradient(135deg, #f7f2f5 0%, var(--bg) 52%, #efe7ee 100%);
  }
  .product-hero-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .product-hero .h-page{ font-size:clamp(3rem,13vw,4.8rem); }
  .product-hero .lede{ max-width:32rem; }
  .product-hero-card{
    justify-self:center;
    width:min(100%, 28rem);
    transform:rotate(.8deg);
  }
  .product-hero-card figcaption{
    letter-spacing:.18em;
    font-size:.62rem;
  }
  .split, .contact-grid{ grid-template-columns:1fr; }
  .split.media-right .split-media{ order:0; }
  .product-row{ grid-template-columns:1fr; }
  .product-row.media-right .product-media{ order:0; }
  .product-media{ max-width:26rem; }
  .treatment-media-showcase{ grid-template-columns:1fr; }
  .treatment-video{ max-width:24rem; margin-inline:auto; justify-self:stretch; }
  .treatment-info-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-copy > span:first-child,
  .footer-credit,
  .footer-bottom nav{ justify-self:center; }
  .mobile-bar{ display:flex; }
  .site-footer{ padding-bottom:6.4rem; }
  .hero-scroll{ display:none; }
}
@media (max-width:768px){
  .parallax-image{
    background-attachment:scroll;
  }
}
@media (max-width:560px){
  .partner-link-note .text-link{
    display:flex;
    width:max-content;
    margin-left:0;
    margin-top:.85rem;
  }
}

/* Reduced Motion — vollständige Beruhigung */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  [data-reveal], .hero-line > span, .hero-sub, .hero-actions{ opacity:1 !important; transform:none !important; }
  .frame[data-reveal] img{ transform:none !important; }
  .treatment-video-frame{ transform:none !important; }
  .preloader{ display:none; }
  .ticker-track{ flex-wrap:wrap; }
}

/* Rechtsseiten (Impressum · Datenschutz · AGB) */
.legal-hero{ padding-top:10rem; padding-bottom:clamp(2rem,5vw,3.5rem); }
.legal-hero.flush{ padding-top:10rem; }
.legal-body{ max-width:46rem; }
.legal-body h2{
  font-family:var(--font-display); font-weight:420; font-size:1.45rem;
  margin-top:2.6rem; margin-bottom:.7rem; line-height:1.25;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  color:var(--mauve); margin-top:1.8rem; margin-bottom:.4rem;
}
.legal-body p{ margin-top:.8rem; color:var(--ink); }
.legal-body p + p{ margin-top:.7rem; }
.legal-body ul{ margin-top:.6rem; padding-left:1.1rem; list-style:disc; color:var(--ink); }
.legal-body li{ margin-top:.3rem; }
.legal-body a{ color:var(--plum); border-bottom:1px solid rgba(107,45,107,.35); }
.legal-body a:hover{ border-color:var(--plum); }
.legal-body .legal-meta{ color:var(--ink-soft); font-size:.92rem; }
.legal-body ol{ margin-top:.6rem; padding-left:1.2rem; color:var(--ink); }
.legal-body ol li{ margin-top:.35rem; }

/* ── FULLSCREEN HERO mit Hintergrundbild ─────────────────── */
.hero-fullscreen{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding-bottom:clamp(3.5rem,8vw,6rem);
  overflow:hidden;
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  user-select:none;
  -webkit-user-select:none;
}
.hero-fullscreen--page{
  min-height:0;
  height:clamp(22rem, 50svh, 34rem);
  padding-bottom:clamp(2rem, 5vw, 3.5rem);
}
/* Overlay für Unterseiten — Bild direkt auf <section> */
.hero-fullscreen--page::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(46,36,48,.42), rgba(46,36,48,.42)),
    linear-gradient(to top, rgba(46,36,48,.94) 0%, rgba(46,36,48,.68) 48%, rgba(46,36,48,.18) 100%);
}
.hero-fullscreen .hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('../assets/hero.webp') center 30% / cover no-repeat;
}
/* dunkler Verlauf von unten — Text lesbar, Bild oben frei */
.hero-fullscreen .hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(46,36,48,.78) 0%,
    rgba(46,36,48,.38) 45%,
    transparent 75%
  );
}
.hero-fullscreen .hero-content{
  position:relative; z-index:1;
  max-width:680px;
}
.hero-fullscreen h1{
  font-family:var(--font-display);
  font-weight:340;
  font-size:clamp(2.8rem,7.5vw,5.8rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:#fff;
}
.hero-fullscreen h1,
.hero-fullscreen h1 span{
  font-family:var(--font-display) !important;
}
.hero-fullscreen h1 .tint{ color:#f5edf3; }
.hero-fullscreen .hero-kicker{ color:rgba(255,255,255,.88); margin-bottom:1.8rem; }
.hero-fullscreen .hero-kicker::before{ background:rgba(255,255,255,.72); }
.hero-fullscreen .lede{ color:rgba(255,255,255,.9); margin-top:1.6rem; max-width:32em; }
.hero-fullscreen .hero-actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-fullscreen .btn-ghost{
  border-color:rgba(237,232,236,.4); color:#fff;
}
.hero-fullscreen .btn-ghost:hover{ border-color:#fff; }

/* Scroll-Indikator auf weißem Bild */
.hero-fullscreen .hero-scroll{ color:rgba(237,232,236,.55); }
.hero-fullscreen .hero-scroll i{ background:rgba(237,232,236,.4); }

/* Weiße Schrift im Unterseiten-Hero — stark genug für alle Basis-Regeln */
.hero-fullscreen--page .hero-content h1,
.hero-fullscreen--page .hero-content h1 span{ color:#fff !important; }
.hero-fullscreen--page .hero-content h1 .tint{ color:#f5edf3 !important; }
.hero-fullscreen--page .hero-content .kicker,
.hero-fullscreen--page .hero-content .hero-kicker{ color:rgba(255,255,255,.9) !important; }
.hero-fullscreen--page .hero-content p,
.hero-fullscreen--page .hero-content .lede,
.hero-fullscreen--page .hero-content .hero-sub{ color:rgba(255,255,255,.92) !important; }

/* ── 4 SERVICE-CARDS UNTEREINANDER (edel) ───────────────── */
.services-list{ display:flex; flex-direction:column; gap:0; }
.service-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:22rem;
  border-top:1px solid var(--hairline);
  overflow:hidden;
  transition:background .4s var(--ease);
}
.service-item:last-child{ border-bottom:1px solid var(--hairline); }
.service-item:nth-child(even) .service-item-media{ order:2; }

.service-item-media{
  position:relative; overflow:hidden;
  min-height:18rem;
}
.service-item-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.service-item:hover .service-item-media img{ transform:scale(1.04); }

/* — Kennzeichnung KI-generierter Bilder (Symbolbilder) — */
.ai-note{
  position:absolute; z-index:2;
  font-family:var(--font-sans, inherit);
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  color:rgba(255,255,255,.85);
  background:rgba(46,36,48,.38);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.4rem .65rem; border-radius:2px;
  pointer-events:none;
}
.service-item-media .ai-note{ right:.85rem; bottom:.85rem; }
.hero-fullscreen .ai-note{
  right:clamp(1rem,4vw,2.5rem);
  bottom:clamp(1rem,3vw,1.8rem);
}
@media (max-width:640px){
  .ai-note{ font-size:.5rem; padding:.32rem .5rem; letter-spacing:.12em; }
}

.service-item-body{
  display:flex; flex-direction:column;
  justify-content:center;
  gap:1rem;
  padding:clamp(2.5rem,5vw,4.5rem);
}
.service-item-body .kicker{ margin-bottom:.2rem; }
.service-item-body h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.1;
}
.service-item-body p{ color:var(--ink-soft); max-width:28em; }
.service-item-body .text-link{ margin-top:.6rem; }

/* Nummer-Akzent */
.service-num{
  font-family:var(--font-display); font-weight:300;
  font-size:5rem; line-height:1; color:var(--hairline);
  margin-bottom:-.5rem; /* optisch nach oben schieben */
  letter-spacing:-.04em;
}

@media(max-width:760px){
  .service-item{ grid-template-columns:1fr; min-height:auto; }
  .service-item:nth-child(even) .service-item-media{ order:0; }
  .service-item-media{ min-height:55vw; }
}

/* ── NAVBAR — Dropdown für Services ─────────────────────── */
.nav-has-dropdown{ position:relative; }
.nav-dropdown{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(6px);
  background:rgba(245,241,244,.96);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--hairline);
  min-width:200px; padding:.6rem 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:200;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-dropdown.is-open{
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{
  display:block; padding:.65rem 1.3rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); transition:color .2s, background .2s;
}
.main-nav .nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ background:var(--bg); color:var(--plum); }
.nav-dropdown-arrow{
  display:inline-block; margin-left:.35rem;
  font-size:.55rem; vertical-align:middle;
  transition:transform .3s var(--ease);
}
.nav-has-dropdown:hover .nav-dropdown-arrow,
.nav-has-dropdown:focus-within .nav-dropdown-arrow{ transform:rotate(180deg); }