/* =====================================================================
   KOYO · Design-System (Landingpage V2)
   Editorialer Neubau: Cormorant Garamond + Inter, warme Ruhe-Palette,
   bewusster Hell/Dunkel-Rhythmus, satter Kontrast, haptische Textur.
   고요 = koreanisch "Stille / Ruhe".
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root{
  /* Flaechen */
  --cream:#F4EFE7;      /* Warm Cream · Basis */
  --bone:#FAF6EF;       /* hellster Ton */
  --sand:#E7DDCF;       /* Warm Sand · zweite Flaeche */
  --sand-2:#DDD0BE;     /* tieferer Sand fuer Kanten */
  --ink:#2A2521;        /* Ink · Text + dunkle Flaechen */
  --ink-deep:#211D19;   /* tiefste dunkle Sektion */
  --ink-black:#191512;  /* Footer */

  /* Toene */
  --taupe:#A89685;      /* Warmes Taupe · Akzent */
  --taupe-d:#8A7663;    /* dunkleres Taupe fuer Labels */
  --paper:#EDE5D8;      /* Text auf Dunkel */
  --paper-mute:#B7AC9C; /* Sekundaertext auf Dunkel */

  /* Linien */
  --line:#D8CBB9;
  --line-strong:#C6B49F;
  --line-soft:rgba(42,37,33,.10);
  --line-on-dark:rgba(237,229,216,.16);

  /* Schrift */
  --font-head:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw:1360px;
  --pad:clamp(1.25rem, 5vw, 4rem);
}

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--taupe);color:var(--bone);}

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

/* --------------------------- Bausteine ------------------------------ */
.container-koyo{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.font-head{font-family:var(--font-head);}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.68rem;
  font-weight:500;
  color:var(--taupe-d);
  margin:0;
}
.eyebrow--light{color:var(--paper-mute);}

.num{font-feature-settings:"tnum" 1,"lnum" 1;}

.display{
  font-family:var(--font-head);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.018em;
}
.display em{font-style:italic;}

.section{
  padding-block:clamp(4.5rem, 10vw, 9.5rem);
  position:relative;
}
.section--cream{background:var(--cream);}
.section--bone{background:var(--bone);}
.section--sand{background:var(--sand);}
.section--ink{background:var(--ink-deep);color:var(--paper);}
.section--line-top{border-top:1px solid var(--line);}
.section--ink.section--line-top{border-top:1px solid var(--line-on-dark);}

.section-head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-head .eyebrow{margin-bottom:1.1rem;}
.section-head h2{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(2.3rem,5.2vw,3.9rem);
  line-height:1;
  letter-spacing:-.02em;
}
.section-head__lead{
  margin-top:1.4rem;
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink);
  max-width:52ch;
}
.section--ink .section-head__lead{color:var(--paper-mute);}

/* Hover-Unterstrich (Mikro-Interaktion 1) */
.hover-link{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.hover-link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.hover-link:hover::after{transform:scaleX(1);}

/* Buttons: Liquid-Glass (Signature-Stil, uebernommen von till-weilemann.de, Fuellfarbe Taupe) */
.btn-whatsapp,.btn-ghost{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:999px;
  white-space:nowrap;
}
.btn-whatsapp > *,.btn-ghost > *{position:relative;z-index:2;}

/* Primaer: dunkles Glas, fuellt sich beim Hover ruhig mit Taupe */
.btn-whatsapp{
  color:var(--bone);
  padding:1.1rem 2rem;
  background-color:var(--ink);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(0,0,0,.1));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 6px rgba(0,0,0,.2),0 8px 22px rgba(42,37,33,.2),0 2px 6px rgba(42,37,33,.14);
  transition:background-color .5s ease,box-shadow .45s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn-whatsapp:hover{
  background-color:var(--taupe);
  transform:scale(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 30px rgba(168,150,133,.4),0 2px 8px rgba(168,150,133,.28);
}

/* Ghost: helles Glas */
.btn-ghost{
  color:var(--ink);
  padding:1.1rem 1.7rem;
  background-color:rgba(255,255,255,.45);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,.12) 50%,rgba(42,37,33,.04));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -2px 6px rgba(42,37,33,.06),0 6px 18px rgba(42,37,33,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .3s ease,box-shadow .4s ease,background-color .4s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn-ghost:hover{
  border-color:rgba(42,37,33,.22);
  transform:scale(1.04);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),0 10px 24px rgba(42,37,33,.14);
}

/* Pfeil laeuft beim Hover mit */
.btn-whatsapp .arr,.btn-ghost .arr{transition:transform .25s ease;}
.btn-whatsapp:hover .arr,.btn-ghost:hover .arr{transform:translateX(4px);}

/* Auf dunklen Flaechen: helles Glas als Primaer, fuellt ebenfalls Taupe */
.section--ink .btn-whatsapp,.kontakt .btn-whatsapp{
  color:var(--ink);
  background-color:var(--bone);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.3) 50%,rgba(42,37,33,.05));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.3);
}
.section--ink .btn-whatsapp:hover,.kontakt .btn-whatsapp:hover{
  color:var(--bone);
  background-color:var(--taupe);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px rgba(168,150,133,.45);
}
.section--ink .btn-ghost,.kontakt .btn-ghost{
  color:var(--paper);
  background-color:rgba(255,255,255,.06);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.12),rgba(255,255,255,.02) 50%,rgba(0,0,0,.12));
  border:1px solid var(--line-on-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.25);
}
.section--ink .btn-ghost:hover,.kontakt .btn-ghost:hover{
  border-color:rgba(237,229,216,.4);transform:scale(1.04);
}

/* Bild-System (einheitlicher Marken-Filter, nie abgeschnitten) */
.img-treat{position:relative;overflow:hidden;background:var(--sand);}
.img-treat img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.10) contrast(1.03) brightness(1.0);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.img-treat::after{
  content:"";
  position:absolute;inset:0;
  background:var(--taupe);
  mix-blend-mode:multiply;
  opacity:.06;
  pointer-events:none;
}
.img-treat:hover img{transform:scale(1.03);}

/* Scroll-Reveal (Mikro-Interaktion 3) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.is-in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================ TOP-TAPE ============================== */
.top-tape{
  background:var(--sand);
  border-bottom:1px solid var(--line);
  color:var(--taupe-d);
}
.top-tape__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.9rem;
  padding-block:.55rem;
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
}
.top-tape__dot{color:var(--taupe);}
@media (max-width:560px){
  .top-tape__inner{font-size:.58rem;letter-spacing:.16em;gap:.6rem;}
}

/* ============================= HEADER ============================== */
.site-header{
  position:sticky;top:-1px;z-index:100;
  padding-top:1px;
  background:rgba(250,246,239,.82);
  backdrop-filter:saturate(1.1) blur(12px);
  -webkit-backdrop-filter:saturate(1.1) blur(12px);
  border-bottom:1px solid var(--line);
}
/* iOS-Safari: beim Scrollen (Adressleiste/Gummiband) entsteht ueber Sticky-Headern
   ein schmaler Spalt — Hintergrund nach oben verlaengern, damit er immer buendig abschliesst.
   Nur im gescrollten Zustand (.is-stuck, per JS), sonst wuerde er die Top-Tape ueberdecken. */
.site-header.is-stuck::before{
  content:"";position:absolute;left:0;right:0;top:-60px;height:60px;
  background:var(--bone);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding-block:.85rem;
}
.site-header__logo{display:flex;align-items:center;color:var(--ink);}
.site-header__logo img{height:3rem;width:auto;}
.site-header__nav{display:flex;align-items:center;gap:.25rem;position:relative;}
.site-header__nav a{
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  position:relative;z-index:2;
  padding:.5rem .85rem;border-radius:999px;
  transition:color .35s ease;
}
.site-header__nav a[aria-current="page"]{color:var(--taupe-d);}
/* Pill-Nav-Indikator (Tubelight), gleitet unter den gehoverten/aktiven Punkt */
.nav-glow{
  position:absolute;top:50%;left:0;width:0;height:2rem;
  transform:translateY(-50%);
  background:var(--sand);
  border-radius:999px;
  opacity:0;z-index:1;pointer-events:none;
  transition:left .38s cubic-bezier(.2,.7,.2,1),width .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
.nav-glow::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:44%;height:3px;border-radius:999px;background:var(--taupe);
  box-shadow:0 0 12px 2px rgba(168,150,133,.55),0 7px 16px rgba(168,150,133,.4);
}
.site-header__actions{display:flex;align-items:center;gap:1rem;}
.site-header__cta{padding:.75rem 1.35rem;font-size:.72rem;}
.site-header__toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:.4rem;
}
.site-header__toggle-bar{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s;}

@media (max-width:960px){
  .site-header__nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bone);
    border-bottom:1px solid var(--line);
    padding:0 var(--pad);
    max-height:0;overflow:hidden;
    transition:max-height .4s ease;
  }
  .site-header__nav.is-open{max-height:70vh;padding-block:1rem;}
  .site-header__nav a{padding:.85rem 0;width:100%;border-bottom:1px solid var(--line-soft);}
  .site-header__toggle{display:flex;}
  .site-header__cta{display:none;}
  .nav-glow{display:none;}
}

/* ============================== HERO =============================== */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(231,221,207,.9) 0%, rgba(244,239,231,0) 55%),
    linear-gradient(178deg, var(--bone) 0%, var(--cream) 46%, var(--sand) 100%);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__hangul{
  position:absolute;
  top:50%;right:-2%;
  transform:translateY(-50%);
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(20rem,44vw,46rem);
  line-height:.8;
  color:var(--taupe);
  opacity:.10;
  user-select:none;pointer-events:none;
  white-space:nowrap;
}
.hero__inner{
  position:relative;z-index:3;
  padding-block:clamp(3.5rem,9vw,7rem) clamp(3.5rem,8vw,6rem);
}
.hero__main{
  position:relative;z-index:2;
  max-width:min(100%,620px);
}
.hero__eyebrow{margin-bottom:1.6rem;}
.hero__headline{
  font-family:var(--font-head);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:.9;
  color:var(--ink);
  margin:0;
}
.hero__headline .l1{
  display:block;
  font-size:clamp(1.6rem,4.4vw,2.9rem);
  font-weight:400;
  letter-spacing:.01em;
  color:var(--taupe-d);
  margin-bottom:.4rem;
}
.hero__headline .l2{
  display:block;
  font-size:clamp(3.6rem,12.5vw,10.5rem);
}
.hero__headline em{font-style:italic;color:var(--ink);}
.hero__brand{letter-spacing:.03em;}
.hero__tagline{
  margin-top:1.2rem;
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(1.3rem,2.7vw,2.05rem);
  line-height:1.15;
  color:var(--taupe-d);
}
.hero__tagline em{font-style:italic;color:var(--ink);}
.hero__byline{
  margin-top:1.8rem;
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--taupe-d);
}
.hero__sub{
  margin-top:1.6rem;
  max-width:44ch;
  font-size:1.02rem;
  line-height:1.75;
  color:var(--ink);
}
.hero__actions{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.hero__location{
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--taupe-d);
  max-width:40ch;
}
/* Produkt-Bild als vollflaechiger Hero-Hintergrund, Text ueber Cream-Scrim lesbar */
.hero__accent{
  position:absolute;inset:0;
  z-index:1;pointer-events:none;
}
.hero__accent img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  transform:translateX(15%);
}
/* Cream-Scrim: links kraeftig (Text lesbar), zur rechten Seite offen (Produkte erkennbar) */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right, var(--cream) 0%, rgba(244,239,231,.92) 22%, rgba(244,239,231,.5) 48%, rgba(244,239,231,.16) 72%, rgba(244,239,231,.32) 100%),
    linear-gradient(to bottom, rgba(250,246,239,.6) 0%, transparent 24%, transparent 74%, rgba(231,221,207,.6) 100%);
}
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;}
  .hero__hangul{opacity:.07;font-size:56vw;right:-10%;}
  /* Produktbild bleibt wie auf Desktop vollflaechig im Hintergrund sichtbar,
     genau wie der beh-hero auf der Produktseite (kein display:none). */
  /* Adresse mobil ausblenden: Buttons schliessen den Hero ab statt mittig zu haengen */
  .hero__location{display:none;}
}

/* =========================== STORY (Fahra) ========================= */
.story__ornament{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.story__ornament .rule{flex:1;height:1px;background:var(--line);min-width:40px;}
@media (max-width:560px){
  .story__ornament{gap:1rem;}
  .story__ornament .eyebrow{letter-spacing:.18em;}
}
.story__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
.story__media{grid-column:1 / span 5;}
.story__body{grid-column:7 / span 6;}
.story__portrait{
  aspect-ratio:2/3;
  border:1px solid var(--line);
  border-radius:2px;
}
.story__portrait img{object-position:50% 24%;}
/* Markierter Portraet-Platzhalter (echtes 4:5-Foto ersetzt spaeter nur den Inhalt) */
.portrait-ph{
  position:relative;
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--sand) 0%, var(--sand-2) 100%);
  overflow:hidden;
}
.portrait-ph__hangul{
  font-family:var(--font-head);
  font-size:16rem;line-height:.8;
  color:var(--taupe);opacity:.22;
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
}
.portrait-ph__label{
  position:relative;z-index:2;
  margin-top:auto;margin-bottom:1.6rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--taupe-d);
  background:rgba(250,246,239,.7);
  padding:.5rem .9rem;border:1px solid var(--line);
}
.story__hi{
  font-family:var(--font-head);
  font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:1.8rem;
}
.story__hi em{font-style:italic;}
.story__body p{
  font-size:1.03rem;
  line-height:1.9;
  color:var(--ink);
  max-width:46ch;
  margin-bottom:1.2rem;
}
.story__sign{
  display:flex;align-items:center;gap:1.3rem;
  margin-top:2rem;
}
.story__sign .rule{flex:1;height:1px;background:var(--line);max-width:120px;}
.story__sign span{
  font-family:var(--font-head);
  font-style:italic;
  font-size:2rem;
  color:var(--taupe-d);
}
@media (max-width:820px){
  .story__media{grid-column:1 / -1;max-width:420px;}
  .story__body{grid-column:1 / -1;}
}

/* ========================= BEHANDLUNGEN ============================ */
/* Behandlungen als Karten (Stilmittel: pricing-cards, mit Hover-Lift + Signature) */
.beh-cards{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;align-items:stretch;
}
.beh-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FDFBF6 0%,var(--bone) 52%,#F1E9DC 100%);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.9rem 1.6rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -14px 26px -20px rgba(42,37,33,.28),
    0 2px 4px rgba(42,37,33,.06),
    0 16px 30px -18px rgba(42,37,33,.26);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.beh-card:hover{
  transform:translateY(-6px) scale(1.012);
  border-color:var(--taupe);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 10px rgba(42,37,33,.08),
    0 34px 60px -24px rgba(42,37,33,.42);
}
.beh-card__no{font-family:var(--font-head);font-style:italic;font-size:1rem;color:var(--taupe);}
/* Signature als reguläre Karte in der Reihe, nur mit dezentem Flagship-Akzent */
.beh-card--signature{
  border-color:var(--taupe);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -14px 26px -20px rgba(42,37,33,.28),
    0 2px 4px rgba(42,37,33,.06),
    0 20px 36px -18px rgba(168,150,133,.5);
}
.beh-card--signature::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--taupe),var(--taupe-d));
  border-radius:4px 4px 0 0;
}
.beh-card__badge{
  position:absolute;top:1.5rem;right:1.4rem;
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);background:var(--taupe);
  padding:.34rem .66rem;border-radius:999px;
}
.beh-card__name{
  font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;
  font-size:1.4rem;line-height:1.12;color:var(--ink);
  margin:.65rem 0 .8rem;
}
.beh-card__desc{font-size:.9rem;line-height:1.7;color:var(--ink);flex:1 1 auto;margin-bottom:1.4rem;}
.beh-card__variants{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.beh-card__variants li{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-size:.82rem;color:var(--ink);
  border-bottom:1px dotted var(--line-strong);padding-bottom:.5rem;
}
.beh-card__variants .num{font-weight:500;font-feature-settings:"tnum" 1,"lnum" 1;white-space:nowrap;}
.beh-card__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line-soft);padding-top:1rem;margin-top:auto;
}
.beh-card__price{
  font-family:var(--font-head);font-size:1.55rem;color:var(--ink);
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.beh-card__dur{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-d);text-align:right;}

/* Signature: flagship-Behandlung als breite, dunkle Feature-Karte */
.beh-signature{
  position:relative;margin-top:1.3rem;
  display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:center;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  padding:clamp(1.8rem,3vw,2.6rem);
  overflow:hidden;
  box-shadow:
    0 2px 4px rgba(42,37,33,.08),
    0 16px 30px -18px rgba(42,37,33,.32);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.beh-signature:hover{
  transform:translateY(-6px) scale(1.006);
  border-color:var(--taupe);
  box-shadow:
    0 4px 10px rgba(42,37,33,.12),
    0 34px 60px -24px rgba(42,37,33,.5);
}
.beh-signature__no{
  display:block;
  font-family:var(--font-head);font-style:italic;font-size:1rem;color:var(--taupe);
  margin-bottom:.9rem;
}
.beh-signature::after{
  content:"";position:absolute;top:-40%;right:-10%;width:340px;height:340px;
  background:radial-gradient(circle,rgba(168,150,133,.28),transparent 70%);pointer-events:none;
}
.beh-signature__badge{
  display:inline-block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink);background:var(--taupe);padding:.4rem .8rem;border-radius:999px;margin-bottom:1rem;
}
.beh-signature__name{
  font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.08;color:var(--bone);margin-bottom:.9rem;
}
.beh-signature__desc{color:var(--paper-mute);font-size:.96rem;line-height:1.75;max-width:52ch;margin:0;}
.beh-signature__aside{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;position:relative;z-index:2;}
.beh-signature__price{font-family:var(--font-head);font-size:clamp(2.2rem,3.4vw,3rem);color:var(--bone);font-feature-settings:"tnum" 1,"lnum" 1;}
.beh-signature__dur{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:1.1rem;}
.beh-signature .btn-whatsapp{
  color:var(--ink);background-color:var(--bone);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.3) 50%,rgba(42,37,33,.05));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.3);
}
.beh-signature .btn-whatsapp:hover{color:var(--bone);background-color:var(--taupe);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px rgba(168,150,133,.45);}
.beh-cta{margin-top:clamp(2.5rem,5vw,3.5rem);}
@media (max-width:960px){
  .beh-cards{grid-template-columns:repeat(2,1fr);}
  .beh-signature{grid-template-columns:1fr;gap:1.4rem;}
}
@media (max-width:560px){
  .beh-cards{grid-template-columns:1fr;}
}

/* ========================== WIRKSTOFFE (dunkel) =================== */
.wirkstoffe__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.wirkstoffe__media{display:flex;flex-direction:column;gap:1.4rem;}
.wirkstoffe__img{
  aspect-ratio:4/3;
  border:1px solid var(--line-on-dark);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);
}
.wirkstoffe__cap{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute);
}
.wirkstoffe__text .eyebrow{color:var(--paper-mute);margin-bottom:1.1rem;}
.wirkstoffe__text h2{
  font-family:var(--font-head);font-weight:400;color:var(--paper);
  font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:1.6rem;
}
.wirkstoffe__text p{color:var(--paper-mute);font-size:1.02rem;line-height:1.85;max-width:48ch;margin-bottom:1.2rem;}
.wirkstoffe__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;}
.prod-note{
  margin-top:2.6rem;
  padding:.2rem 0 .2rem 1.35rem;
  border-left:2px solid var(--taupe);
  color:var(--ink);font-size:1.05rem;line-height:1.8;max-width:60ch;
}
.prod-note strong{color:var(--taupe-d);font-weight:600;}
.wirkstoffe__tags span{
  border:1px solid var(--line-on-dark);
  padding:.45rem .95rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);
}
@media (max-width:820px){
  .wirkstoffe__grid{grid-template-columns:1fr;}
}

/* ============================= ABLAUF ============================== */
.ablauf-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.ablauf-step{position:relative;padding-top:2.4rem;border-top:1px solid var(--line-strong);}
.ablauf-step__num{
  font-family:var(--font-head);font-style:italic;
  font-size:2.6rem;color:var(--taupe);
  position:absolute;top:-.3rem;right:0;opacity:.55;
}
.ablauf-step h3{
  font-family:var(--font-head);font-weight:500;
  font-size:1.4rem;color:var(--ink);margin-bottom:.7rem;
}
.ablauf-step p{font-size:.96rem;line-height:1.7;color:var(--ink);}
@media (max-width:820px){.ablauf-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.ablauf-steps{grid-template-columns:1fr;}}

/* ============================= STUDIO ============================== */
.studio__grid{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(2rem,5vw,4rem);align-items:stretch;
}
.studio__media{grid-column:1;}
.studio__ph{
  position:relative;height:100%;min-height:360px;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, var(--sand) 0%, var(--sand-2) 100%);
}
.studio__ph .h{font-family:var(--font-head);font-size:12rem;color:var(--taupe);opacity:.2;line-height:.8;}
.studio__ph .label{
  position:absolute;bottom:1.4rem;left:1.4rem;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-d);
  background:rgba(250,246,239,.72);padding:.45rem .8rem;border:1px solid var(--line);
}
.studio__text{grid-column:2;display:flex;flex-direction:column;justify-content:center;}
.studio__text .eyebrow{margin-bottom:1.1rem;}
.studio__text h2{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1.4rem;
}
.studio__text p{font-size:1.02rem;line-height:1.8;color:var(--ink);margin-bottom:1rem;max-width:44ch;}
.studio__facts{margin-top:1.4rem;border-top:1px solid var(--line);}
.studio__facts div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.92rem;
}
.studio__facts dt{color:var(--taupe-d);letter-spacing:.05em;}
.studio__facts dd{margin:0;color:var(--ink);text-align:right;font-weight:500;}
@media (max-width:820px){
  .studio__grid{grid-template-columns:1fr;}
  .studio__media,.studio__text{grid-column:1;}
}

/* ============================= WERTE =============================== */
.werte__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
.werte-card{padding-top:2rem;border-top:1px solid var(--line-strong);}
.werte-card__no{font-family:var(--font-head);font-style:italic;font-size:1.1rem;color:var(--taupe);}
.werte-card h3{
  font-family:var(--font-head);font-weight:500;
  font-size:1.7rem;color:var(--ink);margin:.6rem 0 .8rem;
}
.werte-card p{font-size:.98rem;line-height:1.7;color:var(--ink);}
.werte__slot{
  margin-top:clamp(3rem,6vw,4.5rem);
  border:1px dashed var(--line-strong);
  padding:clamp(1.6rem,4vw,2.4rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;
  background:rgba(250,246,239,.4);
}
.werte__slot .l{font-family:var(--font-head);font-style:italic;font-size:1.5rem;color:var(--taupe-d);}
.werte__slot .r{font-size:.82rem;letter-spacing:.05em;color:var(--taupe-d);max-width:46ch;}
@media (max-width:760px){.werte__grid{grid-template-columns:1fr;}}

/* ============================ KONTAKT (dunkel) ==================== */
.kontakt{background:var(--ink-deep);color:var(--paper);position:relative;overflow:hidden;}
.kontakt::after{
  content:"고요";
  position:absolute;bottom:-8rem;left:-2rem;
  font-family:var(--font-head);font-size:34rem;line-height:.7;
  color:var(--paper);opacity:.03;pointer-events:none;user-select:none;
}
.kontakt__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.kontakt__text .eyebrow{color:var(--paper-mute);margin-bottom:1.3rem;}
.kontakt__text h2{
  font-family:var(--font-head);font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;letter-spacing:-.02em;
  margin-bottom:1.8rem;color:var(--paper);
}
.kontakt__text h2 em{font-style:italic;color:var(--taupe);}
.kontakt__facts{margin:2rem 0;border-top:1px solid var(--line-on-dark);}
.kontakt__facts div{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--line-on-dark);
}
.kontakt__facts dt{color:var(--paper-mute);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;}
.kontakt__facts dd{margin:0;text-align:right;color:var(--paper);font-size:.98rem;}
.kontakt__actions{margin-top:2rem;}
.kontakt__map{
  border:1px solid var(--line-on-dark);
  overflow:hidden;min-height:440px;
  filter:grayscale(.3) contrast(1.05);
}
.kontakt__map iframe{display:block;width:100%;height:100%;min-height:440px;border:0;}
@media (max-width:820px){.kontakt__grid{grid-template-columns:1fr;}}

/* ============================= FOOTER ============================= */
.site-footer{background:var(--ink-black);color:var(--paper-mute);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem;}
.site-footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.site-footer__brand img{height:3.5rem;margin-bottom:1.2rem;}
.site-footer__brand p{font-size:.92rem;line-height:1.7;max-width:32ch;}
.site-footer__heading{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  margin-bottom:1.1rem;
}
.site-footer__heading--spaced{margin-top:2rem;}
.site-footer__list{display:flex;flex-direction:column;gap:.6rem;}
.site-footer__list a,.site-footer__list p{font-size:.9rem;line-height:1.6;color:var(--paper-mute);}
.site-footer__wordmark{
  font-family:var(--font-head);
  font-size:clamp(5rem,20vw,15rem);
  line-height:.8;letter-spacing:-.02em;
  color:var(--paper);opacity:.9;
  border-top:1px solid var(--line-on-dark);
  padding-top:clamp(2rem,4vw,3rem);
  margin-bottom:1.5rem;
}
.site-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line-on-dark);padding-top:1.6rem;
  font-size:.78rem;letter-spacing:.05em;
}
.site-footer__legal{display:flex;gap:1.6rem;}
.site-footer__legal a:hover{color:var(--paper);}
@media (max-width:760px){
  .site-footer__grid{grid-template-columns:1fr;gap:2.5rem;}
}