/* ============================================================================
   Classic Lashes JL – „Die Puderdose“ (v2, Studio-Palette)
   Eigenständiges Stylesheet der neuen Startseite (kein Tailwind nötig).
   Welt: eine rosé lackierte Kompaktdose mit Goldrand, Silberspiegel und vier
   Puderpfännchen, die auf dem hellen Tisch im Studio liegt.
   Farben aus dem echten Studio: cremeweiße Wände, Leinen, Rosé der Blumenwand,
   Taupe-Samt der Liegen, Silberspiegel. Rosé nie als ganze Fläche.
   Vorheriger Stand (Lackrosa): _backup/2026-09-30_puderdose-pink/
   Farben, Buttons, Kopfleiste und Footer stehen in studio.css (auch für die
   Unterseiten); diese Datei enthält nur die Startseite.
   ========================================================================== */

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: .01em; text-wrap: balance; hyphens: manual; }
p { margin: 0; }
.hidden { display: none !important; }

/* --- Hero: die Dose auf dem Tisch --------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 48% 62% at 72% 52%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--cream) 0%, #F6EEE6 100%);
  padding: 7.5rem 0 5rem;
  isolation: isolate;
  overflow: hidden;
}
.hero::after { /* Tischkante: feine Taupe-Linie, auf der die Seite „aufliegt“ */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__title { font-size: clamp(2.3rem, 4.7vw, 4.2rem); color: var(--ink); letter-spacing: -.005em; line-height: 1.04; }
.hero__sub { display: block; margin-top: 1.1rem; font-size: clamp(.8rem, 1.25vw, 1.02rem); font-weight: 600; letter-spacing: .26em; color: var(--rose-deep); line-height: 1.5; }
.hero__lede { margin-top: 1.6rem; max-width: 34rem; font-size: 1.1rem; color: var(--ink-soft); }
.hero__usp {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.7rem;
  padding: .7rem 1.15rem .7rem .8rem; border-radius: 999px;
  background: var(--ink); color: var(--gold-hi);
  font-size: .92rem; font-weight: 600; letter-spacing: .01em;
}
.hero__usp .icon { color: var(--gold); width: 1.4em; height: 1.4em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 2rem; }
.hero__addr { margin-top: 1.4rem; font-size: .9rem; color: var(--ink-soft); display: flex; align-items: center; gap: .45rem; }

.stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; justify-content: center; }

/* Geometrie: D = Durchmesser einer Hälfte, G = Scharnierabstand */
.compact {
  --D: clamp(15rem, min(25vw, calc((100svh - 8rem) / 2.06)), 23rem);
  --G: calc(var(--D) * .06);
  position: relative;
  width: var(--D); height: calc(2 * var(--D) + var(--G));
  perspective: 1700px;
  touch-action: manipulation;
}
.compact::before { /* weicher Kontaktschatten auf dem Tisch */
  content: ""; position: absolute; z-index: -1; left: 10%; right: -4%; top: 8%; bottom: -3%;
  border-radius: 45%; background: rgba(var(--shadow), .2); filter: blur(calc(var(--D) * .09));
  translate: calc(var(--D) * .05) calc(var(--D) * .06);
}
.compact__hinge {
  position: absolute; left: 50%; top: calc(var(--D) - var(--D) * .025); translate: -50% 0; z-index: 1;
  width: calc(var(--D) * .32); height: calc(var(--G) + var(--D) * .05); border-radius: calc(var(--D) * .02);
  background:
    linear-gradient(90deg, transparent 32.5%, rgba(92, 62, 18, .6) 32.5% 33.5%, transparent 33.5% 66.5%, rgba(92, 62, 18, .6) 66.5% 67.5%, transparent 67.5%),
    linear-gradient(180deg, var(--gold-lo) 0%, var(--gold-hi) 34%, var(--gold) 58%, var(--gold-lo) 100%);
  box-shadow: 0 1px 1px rgba(var(--shadow), .45), 2px 3px 5px rgba(var(--shadow), .3), inset 0 0 0 .5px rgba(92, 62, 18, .6);
}

/* Goldrand: gebürstetes Metall mit Fase (oben hell, unten dunkel) */
.compact__base, .lid__outer, .lid__inner {
  background: var(--metal-glint), var(--gold-ring);
}
.compact__base, .compact__lid { position: absolute; left: 0; top: calc(var(--D) + var(--G)); width: var(--D); height: var(--D); }
.compact__base {
  border-radius: 50%; padding: calc(var(--D) * .038);
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 18, .55),
    inset 0 calc(var(--D) * .006) calc(var(--D) * .004) rgba(255, 246, 220, .85),
    inset 0 calc(var(--D) * -.008) calc(var(--D) * .01) rgba(92, 62, 18, .55),
    1px 2px 2px rgba(var(--shadow), .35),
    calc(var(--D) * .03) calc(var(--D) * .06) calc(var(--D) * .1) calc(var(--D) * -.02) rgba(var(--shadow), .42);
}
.compact__well {
  position: relative; isolation: isolate;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--case-surface);
  box-shadow:
    0 0 0 1px rgba(92, 62, 18, .6),
    inset 0 calc(var(--D) * .012) calc(var(--D) * .02) rgba(110, 50, 60, .38),
    inset 0 calc(var(--D) * -.006) calc(var(--D) * .01) rgba(255, 255, 255, .45);
  display: grid; place-items: center;
}
.compact__well::before { /* Perlmutt-Schimmer im Lack */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--grain); background-size: 90px; opacity: .1; mix-blend-mode: overlay;
}

.compact__lid {
  transform-origin: 50% calc(var(--G) / -2);
  transform: rotateX(180deg);
  z-index: 2;
}
.js .compact__lid { transform: rotateX(0deg); }
.js .compact.is-open .compact__lid { animation: lid-open 1.5s var(--ease-out) forwards; }
.js .compact.is-settled .compact__lid { animation: none; transform: rotateX(180deg); }
@keyframes lid-open {
  0% { transform: rotateX(0deg); }
  8% { transform: rotateX(-7deg); }
  62% { transform: rotateX(188deg); }
  82% { transform: rotateX(177deg); }
  100% { transform: rotateX(180deg); }
}
.lid__face { position: absolute; inset: 0; border-radius: 50%; }
/* Kein preserve-3d / backface-visibility: Das Umklappen ist rein 2D-gerechnet (rotateX auf dem Deckel,
   Innenseite mit scaleY(-1) gegengespiegelt) und die jeweils verdeckte Seite wird per visibility
   ausgeblendet. Das funktioniert in jedem Browser, auch wenn 3D-Kontexte abgeflacht werden. */
.compact__lid .lid__outer { visibility: hidden; }
.compact__lid .lid__inner { visibility: visible; }
.js .compact__lid .lid__outer { visibility: visible; }
.js .compact__lid .lid__inner { visibility: hidden; }
.js .compact.is-open .compact__lid .lid__outer { animation: face-hide 1.5s steps(1, end) forwards; }
.js .compact.is-open .compact__lid .lid__inner { animation: face-show 1.5s steps(1, end) forwards; }
.js .compact.is-settled .compact__lid .lid__outer { animation: none; visibility: hidden; }
.js .compact.is-settled .compact__lid .lid__inner { animation: none; visibility: visible; }
@keyframes face-hide { 0% { visibility: visible; } 34% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes face-show { 0% { visibility: hidden; } 34% { visibility: visible; } 100% { visibility: visible; } }

.lid__outer {
  padding: calc(var(--D) * .038);
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 18, .55),
    inset 0 2px 1px rgba(255, 246, 220, .85),
    inset 0 -2px 3px rgba(92, 62, 18, .5),
    calc(var(--D) * .03) calc(var(--D) * .06) calc(var(--D) * .1) calc(var(--D) * -.02) rgba(var(--shadow), .45);
}
.lid__outer-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--case-surface); display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(92, 62, 18, .6), inset 0 -3px 8px rgba(110, 50, 60, .3);
}
.lid__outer-disc::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .1; mix-blend-mode: overlay; }
.monogram { width: 86%; height: 86%; color: var(--gold); filter: drop-shadow(0 1px 0 rgba(255, 246, 220, .7)) drop-shadow(0 -1px 0 rgba(92, 62, 18, .35)); }
.monogram text { font-family: var(--serif); fill: currentColor; }

.lid__inner {
  transform: scaleY(-1); padding: calc(var(--D) * .038);
  /* scaleY(-1) und das rotateX(180deg) des Deckels heben sich auf: Schatten laufen normal nach unten rechts */
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 18, .55),
    inset 0 calc(var(--D) * .006) calc(var(--D) * .004) rgba(255, 246, 220, .85),
    inset 0 calc(var(--D) * -.008) calc(var(--D) * .01) rgba(92, 62, 18, .55),
    1px 2px 2px rgba(var(--shadow), .3),
    calc(var(--D) * .03) calc(var(--D) * .06) calc(var(--D) * .1) calc(var(--D) * -.02) rgba(var(--shadow), .38);
}
.mirror {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  padding: calc(var(--D) * .026);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 34%), var(--silver-ring);
  box-shadow: 0 0 0 1px rgba(92, 62, 18, .55), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 2px rgba(40, 36, 44, .45);
}
.mirror__glass { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #d9d4d6; isolation: isolate; }
.mirror__glass::before { /* Glastiefe: Innenschatten am Rand, leicht kühler Spiegelton */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(215, 225, 235, 0) 58%, rgba(40, 48, 60, .3) 100%);
  box-shadow: inset 0 calc(var(--D) * .012) calc(var(--D) * .03) rgba(20, 16, 18, .5), inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.mirror__img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease-out), scale 1.2s var(--ease-out); scale: 1.08; }
.mirror__img.is-on { opacity: 1; scale: 1; }
.mirror__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.42; }
.mirror__tag { /* Beschriftung im Spiegel: verbindet die Auswahl mit dem Ergebnis am Auge */
  position: absolute; z-index: 4; left: 50%; bottom: 9%; translate: -50% 0;
  padding: .32rem .75rem; border-radius: 999px; white-space: nowrap;
  background: rgba(31, 25, 26, .66); color: var(--cream); backdrop-filter: blur(4px);
  font: 600 clamp(.58rem, calc(var(--D) * .036), .74rem)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.mirror__glass::after { /* Glasreflex, folgt dem Zeiger */
  content: ""; position: absolute; inset: -30%; z-index: 3; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.3) 36%, rgba(255,255,255,.06) 41%, rgba(255,255,255,0) 44%, rgba(255,255,255,0) 50%, rgba(255,255,255,.14) 53%, rgba(255,255,255,0) 57%),
    radial-gradient(ellipse 30% 18% at 36% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  translate: calc(var(--mx, 0) * 16%) calc(var(--my, 0) * 10%);
  transition: translate .6s var(--ease-out);
}

/* Pfännchen: Silberschälchen mit gepresstem Puder */
.pans { position: relative; display: grid; grid-template-columns: repeat(2, calc(var(--D) * .31)); gap: calc(var(--D) * .045); }
.powder {
  position: relative; display: block; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 52% at 36% 26%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .035) 1px 2px, rgba(0, 0, 0, 0) 2px 7px),
    radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--c), white 26%) 0%, var(--c) 55%, color-mix(in oklab, var(--c), black 20%) 100%);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .16), inset 0 -1px 1px rgba(255, 255, 255, .28);
}
.powder::before { /* Puderkorn */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: var(--grain-dark), var(--grain); background-size: 46px, 70px; opacity: .32; mix-blend-mode: soft-light;
}
.powder--dark::before, [data-look="mascara"] .powder::before, [data-look="volumen"] .powder::before, .swatch--volumen .powder::before { opacity: .55; mix-blend-mode: screen; background: var(--grain); background-size: 60px; }
[data-look="volumen"] .powder, .swatch--volumen .powder { /* Schimmerpartikel im Schwarz */
  background:
    var(--sparkle),
    radial-gradient(ellipse 72% 52% at 36% 26%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 34% 28%, #3a302c 0%, var(--c) 58%, #070504 100%);
  background-size: 38px, auto, auto;
}
.pan {
  --c: var(--pan-soft); --t: rgba(74, 52, 44, .88); --emb: 0 1px 0 rgba(255, 255, 255, .45); --emb-f: 0 1px 0 rgba(255, 255, 255, .5);
  position: relative; width: calc(var(--D) * .31); aspect-ratio: 1; border-radius: 50%; border: 0;
  padding: calc(var(--D) * .014);
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 38%), var(--silver-ring);
  cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(40, 36, 44, .5), 1px 2px 2px rgba(var(--shadow), .35), 2px 5px 8px -2px rgba(var(--shadow), .35), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(40, 36, 44, .4);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pan[data-look="classic"] { --c: var(--pan-classic); --t: rgba(56, 30, 25, .9); --emb: 0 1px 0 rgba(255, 225, 215, .35); --emb-f: 0 1px 0 rgba(255, 225, 215, .4); }
.pan[data-look="mascara"] { --c: var(--pan-mascara); --t: rgba(244, 228, 210, .92); --emb: 0 -1px 0 rgba(0, 0, 0, .55); --emb-f: 0 -1px 0 rgba(0, 0, 0, .6); }
.pan[data-look="volumen"] { --c: var(--pan-volumen); --t: rgba(243, 224, 181, .95); --emb: 0 -1px 0 rgba(0, 0, 0, .7); --emb-f: 0 -1px 0 rgba(0, 0, 0, .8); }
.pan__powder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--D) * .012); width: 100%; height: 100%;
  color: var(--t); text-shadow: var(--emb);
  font: 700 clamp(.5rem, calc(var(--D) * .034), .7rem)/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.pan__powder::after { /* Fingerspur im Puder, wenn gewählt */
  content: ""; position: absolute; left: 20%; top: 20%; width: 58%; height: 36%; border-radius: 50%; rotate: -24deg;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c), white 30%), color-mix(in oklab, var(--c), white 12%) 55%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  opacity: 0; scale: .4; transition: opacity .5s, scale .6s var(--ease-out);
}
[data-look="mascara"] .pan__powder::after, [data-look="volumen"] .pan__powder::after { background: radial-gradient(closest-side, rgba(255, 244, 225, .22), rgba(255, 244, 225, .08) 60%, transparent); }
.pan[aria-checked="true"] .pan__powder::after { opacity: .45; scale: 1; }
.pan__label { position: relative; z-index: 1; }
.pan__lash { /* in das Puder geprägte Wimpern: die Dichte zeigt die Intensität */
  position: relative; z-index: 1; width: 64%; aspect-ratio: 2; margin-top: calc(var(--D) * -.012);
  color: var(--t); filter: drop-shadow(var(--emb-f));
}
.pan:hover { transform: translateY(-2px) scale(1.03); }
.pan[aria-checked="true"] {
  background: radial-gradient(circle at 30% 22%, rgba(255, 250, 235, .9), rgba(255, 250, 235, 0) 38%), var(--gold-ring);
  box-shadow: 0 0 0 calc(var(--D) * .008) var(--cream), 0 0 0 calc(var(--D) * .016) var(--ink), 2px 6px 12px -3px rgba(var(--shadow), .45), inset 0 1px 0 rgba(255, 250, 235, .9);
}
.pan:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* Anzeige neben der Dose: alle vier Looks stehen im HTML, gezeigt wird der gewählte */
.readout { padding-bottom: calc(var(--D, 18rem) * .12); max-width: 17.5rem; }
.js .look:not(.is-on) { display: none; }
.look + .look { margin-top: 1.5rem; }
.js .look + .look { margin-top: 0; }
.js .look.is-on { animation: look-in .5s var(--ease-out); }
@keyframes look-in { from { opacity: 0; translate: 0 .4rem; } }
.look__name { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.1; }
.look__meta { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.dots { display: inline-flex; gap: .28rem; }
.dots i { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(31, 25, 26, .16); }
.dots i.on { background: var(--ink); }
.look__text { margin-top: .8rem; font-size: .98rem; color: var(--ink-soft); line-height: 1.55; }
.look__price { margin-top: .9rem; font-variant-numeric: tabular-nums; }
.look__price strong { font-weight: 700; }
.look__link { display: inline-block; margin-top: .6rem; font-weight: 600; font-size: .92rem; }
.readout__hint { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.45; color: var(--ink-soft); display: flex; gap: .45rem; align-items: flex-start; }
.readout__hint .icon { margin-top: .05em; }
.readout__quiz { display: inline-block; margin-top: .55rem; font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--rose-deep); }
.readout__quiz .icon { vertical-align: -.2em; margin-left: .15rem; transition: translate .3s var(--ease-out); }
.readout__quiz:hover .icon { translate: .2rem 0; }

/* --- Abschnitte allgemein ---------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.lead { margin-top: 1.1rem; max-width: 40rem; font-size: 1.08rem; color: var(--ink-soft); }
.on-ink { background: var(--ink); color: var(--cream); }
.on-ink .lead { color: #DCCFC8; }
.on-linen { background: var(--linen); }
.on-blush { background: var(--blush); }
.on-blush .lead { color: var(--ink-2); }

/* --- Vorher / Nachher ------------------------------------------------------ */
.proof__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 6vw, 6rem);
  grid-template-areas: "copy media" "controls media"; align-items: center;
}
.proof__copy { grid-area: copy; align-self: end; }
.proof__media { grid-area: media; }
.proof__controls { grid-area: controls; align-self: start; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem 1rem .45rem .7rem; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(251, 247, 242, .07); color: var(--cream); font: 500 .88rem/1 var(--sans);
  box-shadow: inset 0 0 0 1px rgba(251, 247, 242, .22);
  transition: background-color .3s, color .3s;
}
.chip svg { width: 1.9rem; height: .95rem; color: currentColor; opacity: .85; }
.chip:hover { background: rgba(251, 247, 242, .15); }
.chip[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.chip[aria-pressed="true"] svg { opacity: 1; }
.proof__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 2rem; font-size: .9rem; font-weight: 600; }
.proof__links a { color: #E8DCD5; text-decoration-color: rgba(200, 162, 94, .7); }
.proof__links a:hover { color: var(--cream); }

.compare {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 34rem); justify-self: center;
  border-radius: 999px 999px 2rem 2rem; overflow: hidden; background: #2a2224;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 162, 94, .5);
  user-select: none;
}
.compare picture, .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: linear-gradient(var(--gold-hi), var(--gold), var(--gold-hi)); pointer-events: none; }
.compare__knob {
  position: absolute; top: 50%; left: var(--pos); translate: -50% -50%; width: 3.4rem; height: 3.4rem; border-radius: 50%; pointer-events: none;
  background: var(--metal-glint), var(--gold-ring); padding: 4px; box-shadow: 0 10px 22px -6px rgba(0,0,0,.6);
}
.compare__knob span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); color: var(--gold-hi); }
.compare__tag { position: absolute; bottom: 1.2rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(31, 25, 26, .72); color: var(--cream); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.compare__tag--l { left: 1.2rem; } .compare__tag--r { right: 1.2rem; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:has(input:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.compare-caption { margin-top: 1rem; text-align: center; font-size: .82rem; color: #C9BAB2; }

/* --- Jeanny: das Bild verkauft ------------------------------------------------ */
.jeanny__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.portrait {
  position: relative; margin: 0; width: min(100%, 27rem); justify-self: center;
  padding: .55rem; border-radius: 999px 999px 1.8rem 1.8rem;
  background: var(--metal-glint), var(--gold-ring);
  box-shadow: inset 0 0 0 1px rgba(92, 62, 18, .5), inset 0 2px 1px rgba(255, 246, 220, .8), 12px 40px 70px -36px rgba(var(--shadow), .75);
}
.portrait picture, .portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 999px 999px 1.35rem 1.35rem; }
.portrait figcaption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; display: grid; gap: .1rem;
  padding: .7rem 1.1rem; border-radius: 1rem; background: rgba(255, 253, 251, .92); backdrop-filter: blur(6px);
  font-size: .8rem; color: var(--ink-soft); box-shadow: 0 10px 24px -14px rgba(var(--shadow), .6);
}
.portrait figcaption strong { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; color: var(--ink); }
.jeanny .lead { max-width: 33rem; }
.facts { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; }
.facts li { display: flex; gap: 1rem; align-items: center; padding-block: 1rem; border-top: 1px solid rgba(200, 162, 94, .55); color: var(--ink-soft); }
.facts li:last-child { border-bottom: 1px solid rgba(200, 162, 94, .55); }
.facts .icon { width: 1.6rem; height: 1.6rem; color: var(--gold-lo); }
.facts strong { color: var(--ink); font-weight: 600; }

/* --- Preise: die Rückseite der Verpackung ------------------------------------ */
.prices__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.prices__intro { position: sticky; top: 7rem; }
.prices__intro .lead strong { color: var(--ink); }
.prices__intro .btn { margin-top: 2rem; }
.label {
  position: relative; background: var(--paper); color: var(--ink);
  border-radius: 1.6rem; padding: clamp(1.4rem, 3.5vw, 2.8rem);
  box-shadow: 10px 40px 70px -46px rgba(var(--shadow), .75), 0 1px 3px rgba(var(--shadow), .12);
}
.label::before { content: ""; position: absolute; inset: .6rem; border-radius: 1.15rem; border: 1px solid rgba(200, 162, 94, .75); pointer-events: none; }
.label__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.label__head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.label__head span { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.ptable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ptable caption { caption-side: top; text-align: left; padding: 1.6rem 0 .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-deep); }
.ptable th, .ptable td { padding: .78rem 0; border-bottom: 1px solid rgba(31, 25, 26, .13); text-align: left; vertical-align: baseline; }
.ptable tbody th { font-weight: 500; }
.ptable td { text-align: right; font-weight: 700; white-space: nowrap; }
.ptable .meta { display: block; margin-top: .15rem; max-width: 22rem; font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--ink-soft); }
.ptable--matrix thead th { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; padding-bottom: .5rem; }
.ptable--matrix thead th:first-child { text-align: left; }
.ptable--matrix td { width: 5.2rem; }
.ptable abbr { text-decoration: none; }
.label__fine { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.55; }
.label__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem; align-items: center; margin-top: 1.4rem; padding-top: 1rem; border-top: 2px solid var(--ink); font-size: .9rem; }
.label__foot a { font-weight: 600; }

/* --- Studio / Blumenwand ----------------------------------------------------- */
.studio { position: relative; isolation: isolate; padding-block: clamp(4.5rem, 10vw, 9rem); overflow: hidden; }
.studio__wall { position: absolute; inset: 0; z-index: -1; }
.studio__wall picture, .studio__wall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.studio__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.studio__card { background: var(--paper); border-radius: 1.6rem; padding: clamp(1.5rem, 3.5vw, 2.8rem); box-shadow: 10px 40px 70px -40px rgba(var(--shadow), .8); }
.studio__card .lead { font-size: 1rem; }
.studio__addr { margin-top: 1.5rem; display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; font-style: normal; }
.studio__card .btn { margin-top: 1.6rem; }
.studio__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.5vw, 1.2rem); align-items: end; }
.studio__photos figure { margin: 0; padding: .45rem; border-radius: 999px 999px 1.4rem 1.4rem; background: var(--metal-glint), var(--gold-ring); box-shadow: 8px 30px 50px -28px rgba(var(--shadow), .95); }
.studio__photos figure:nth-child(2) { translate: 0 -2.5rem; }
.studio__photos picture, .studio__photos img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; border-radius: 999px 999px 1.1rem 1.1rem; }

/* --- FAQ -------------------------------------------------------------------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid rgba(31, 25, 26, .16); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.25rem 0; cursor: pointer; font-weight: 600; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(200, 162, 94, .8); transition: background-color .3s, rotate .4s var(--ease-out); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px; background: var(--ink); translate: -50% -50%; }
.faq-plus::after { rotate: 90deg; }
.faq-item[open] .faq-plus { rotate: 45deg; background: var(--linen); }
.faq-item summary:hover .faq-plus { background: var(--linen); }
.faq-item p { padding: 0 3.5rem 1.4rem 0; color: var(--ink-soft); max-width: 44rem; }
.faq__more { margin-top: 1.5rem; font-size: .95rem; color: var(--ink-soft); }

/* --- Schluss ------------------------------------------------------------------ */
.close { text-align: center; }
.close__compact { --D: clamp(6.5rem, 12vw, 8.5rem); width: var(--D); height: var(--D); margin: 0 auto 2.4rem; filter: drop-shadow(8px 16px 18px rgba(var(--shadow), .25)); }
.close__compact .lid__outer { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }
.close .lead { margin-inline: auto; }
.close__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.6rem; margin-top: 2.2rem; }
.side-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding: 1.3rem 1.6rem; border-radius: 1.4rem; background: var(--paper); text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.side-note h2 { font-size: 1.1rem; }
.side-note p { font-size: .92rem; color: var(--ink-2); margin-top: .25rem; }
.side-note a { font-weight: 600; font-size: .92rem; }

/* --- Mobile Buchungsleiste ------------------------------------------------ */
.dock { display: none; }

/* --- Rechtstexte (Modal aus site.js) ---------------------------------------- */
#legal-modal { position: fixed; inset: 0; z-index: 100; background: rgba(31, 25, 26, .66); backdrop-filter: blur(6px); padding: 1rem; align-items: center; justify-content: center; }
#legal-modal.flex { display: flex; }
.legal { position: relative; width: min(100%, 52rem); max-height: 90vh; overflow-y: auto; background: var(--paper); border-radius: 1.6rem; padding: clamp(1.4rem, 4vw, 3rem); }
.legal__x { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--linen); cursor: pointer; display: grid; place-items: center; }
.legal__tabs { display: flex; gap: .5rem; border-bottom: 1px solid rgba(200, 162, 94, .7); margin: .5rem 0 2rem; }
.legal__tabs button { font: 500 1.05rem var(--serif); padding: .8rem 1rem; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; color: var(--ink); }
.legal__tabs .border-brand-dark { border-bottom-color: var(--ink); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.legal h3 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
.legal .t { font-size: 1.9rem; margin-bottom: 1rem; }
.legal p { color: var(--ink-soft); margin-bottom: .6rem; }

/* --- Responsiv ---------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero__usp { font-size: .8rem; gap: .55rem; }
}
@media (max-width: 900px) {
  .section { padding-block: clamp(3.25rem, 11vw, 4.5rem); }
  .h2 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
  .lead { margin-top: .8rem; font-size: 1rem; }

  /* Hero auf dem Handy: Titel → Zeit-USP → Dose mit Look-Info → Buchen. Alles im ersten Bildschirm. */
  .hero { padding: 5.6rem 0 2.4rem; background: radial-gradient(ellipse 90% 40% at 40% 52%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--cream), #F6EEE6); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .hero__copy { display: contents; }
  .hero__title { order: 1; }
  .hero__usp { order: 2; margin-top: 0; justify-self: start; }
  .stage { order: 3; }
  .hero__actions { order: 4; margin-top: .2rem; }
  .hero__lede, .hero__addr { display: none; }
  .hero__sub { margin-top: .6rem; }
  .stage { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: stretch; gap: 1rem; }
  .compact { --D: min(46vw, 15rem); }
  .readout { max-width: 22rem; padding-bottom: 0; }
  .pan__powder { letter-spacing: .03em; }

  .proof__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "controls"; }
  .proof__media { margin-top: 1.6rem; }
  .chips { margin-top: 1.3rem; }
  .proof__links { margin-top: 1.3rem; font-size: .86rem; }

  .jeanny__grid, .prices__grid, .studio__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .jeanny__grid { gap: 1.8rem; }
  .facts { margin-top: 1.4rem; }
  .facts li { padding-block: .8rem; font-size: .95rem; }

  .prices__grid { gap: 1.6rem; }
  .prices__intro { position: static; }
  .prices__intro .btn { display: none; } /* Buchungsleiste ist auf dem Handy immer da */
  .studio__photos { order: -1; }
  .faq__grid { gap: 1.4rem; }
  .faq-item summary { padding: 1rem 0; font-size: .98rem; }
  .close__compact { display: none; }
  .side-note { margin-top: 2.6rem; }

  .dock {
    display: flex; align-items: center; gap: .4rem; position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 55;
    padding: .4rem; border-radius: 999px; background: var(--ink);
    box-shadow: 0 18px 40px -12px rgba(var(--shadow), .7);
    transition: translate .5s var(--ease-out), opacity .4s, visibility .5s;
  }
  .dock .btn { flex: 1; min-height: 3rem; --btn-bg: var(--cream); --btn-fg: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(200, 162, 94, .55); }
  .dock__wa { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(251, 247, 242, .3); }
  .dock__wa .icon { width: 1.35rem; height: 1.35rem; }
  .dock.is-away { translate: 0 150%; opacity: 0; visibility: hidden; }
  .foot { padding-bottom: 6.5rem; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero__title { font-size: clamp(2rem, 9.2vw, 2.6rem); }
  .hero__sub { letter-spacing: .16em; font-size: .74rem; }
  .hero__actions { justify-content: center; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__usp { font-size: .755rem; gap: .5rem; padding: .55rem .95rem .55rem .65rem; border-radius: 1.3rem; letter-spacing: 0; }
  .look__name { font-size: 1.3rem; }
  .look__meta { font-size: .68rem; letter-spacing: .1em; gap: .45rem; flex-wrap: wrap; margin-top: .5rem; }
  .dots i { width: .5rem; height: .5rem; }
  .look__text { font-size: .84rem; line-height: 1.45; margin-top: .5rem; }
  .look__price { font-size: .9rem; margin-top: .5rem; }
  .look__link { display: none; }
  .readout__hint { font-size: .72rem; margin-top: .8rem; padding-top: .7rem; line-height: 1.4; align-items: flex-start; }
  .readout__quiz { font-size: .76rem; line-height: 1.35; }
  .portrait { width: min(100%, 21rem); }
  .portrait figcaption { left: 1.1rem; bottom: 1.1rem; }
  .faq-item p { padding-right: 0; }
  .studio__photos figure:nth-child(2) { translate: 0 -1.2rem; }
  .ptable--matrix td { width: auto; padding-left: .6rem; }
  .ptable--matrix thead th { letter-spacing: .02em; }
  .label__head span { display: none; }
  .pan__powder { letter-spacing: 0; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .compact__lid { transform: rotateX(180deg); }
}