/* ==========================================================================
   Super-Mary-Kay · „Editorial Motion" mit dunklem Duft-Kapitel
   Rollenfarben und Regeln: DESIGN.md. Nur transform/opacity bewegen.
   Blend-Regel: mix-blend-mode liegt auf dem Element, das bewegt wird.
   ========================================================================== */

:root{
  --papier:#faf8f4; --creme:#f1ede6; --tinte:#131110; --leise:#6f6a62;
  --bordeaux:#7d1f2e; --linie:#e2dcd2; --linie-kraeftig:#c4bcae; --rose:#e8c9b0;
  /* Nur fuer Bedienelemente: gemessen 3.35:1 auf Papier, damit Suchfeld,
     Sortierung und Schalter ueberhaupt eine Grenze haben. Trennlinien
     bleiben bei --linie, die duerfen leise sein. */
  --linie-bedien:#8d857a;
  --russ:#0e0c0a; --rauch:#1a1613; --elfenbein:#f2ede5; --duft-leise:#a79e92;
  --champagner:#d8c7a9; --violett:#7a68b8;

  --serif:"Bodoni Moda","Didot","Times New Roman",serif;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;

  --rand:clamp(1.4rem,4.5vw,4rem);
  --breite:82rem;
  /* Die feste Kopfleiste und der Abstand darunter gehoeren zusammen.
     Ohne diese Kopplung blieben zwischen Leistenkante und erster Zeile
     18 px am Schreibtisch und 7 px am Handy. */
  --kopf-hoch:7.4rem; --kopf-klein:4.3rem;
  --kopf-luft:clamp(2.75rem,5vh,4.25rem);

  --zahlen:tabular-nums;
  --zeit-hover:320ms; --zeit-auftritt:760ms; --zeit-gross:1200ms;
  --kurve:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0}
/* Ohne diese Regel bleibt das hidden-Merkmal wirkungslos, sobald eine
   Autorenregel eine Anzeigeart setzt: die Browserregel [hidden]{display:none}
   verliert gegen jede Autorenregel, unabhaengig von der Spezifitaet.
   Beim Kaufknopf hiess das, dass ein Farbton ohne Shopadresse weiterhin den
   Knopf des vorigen Tons zeigte — samt dessen Adresse. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scrollbar-color:var(--tinte) var(--creme)}
/* Beim Ankersprung ist die Seite gescrollt, die Leiste also klein. Ohne das
   hier landet die Ueberschrift unter der Leiste statt darunter. */
#hero,#showcase,#kategorien,#duft,#beratung,#kontakt{scroll-margin-top:calc(var(--kopf-klein) + 1px + 1.5rem)}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.6;overflow-x:clip;caret-color:var(--bordeaux);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--tinte);color:var(--papier)}
[data-stimmung="dunkel"] ::selection{background:var(--champagner);color:var(--russ)}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}

.visuell-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:fixed;left:1rem;top:-4rem;z-index:99;background:var(--tinte);color:var(--papier);
  padding:.7rem 1.1rem;transition:top var(--zeit-hover) var(--kurve)}
.sprung:focus-visible{top:1rem}

/* Weicher Seitenwechsel: der Inhalt tritt kurz zurück, während der neue
   geholt wird. Kopf, Fuss und die Musik bleiben stehen. */
main{transition:opacity 220ms var(--kurve)}
body.wechselt main{opacity:.35}
main:focus{outline:none}
@media (prefers-reduced-motion: reduce){
  main{transition:none}
  body.wechselt main{opacity:1}
}

/* --------------------------------------------------------------------------
   Kopf mit Identität
   -------------------------------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;
  background:color-mix(in srgb,var(--papier) 93%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  height:var(--kopf-hoch);display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:height 420ms var(--kurve)}
.kopf.kopf-klein .kopf-innen{height:var(--kopf-klein)}
.identitaet{display:flex;align-items:center;gap:.95rem;min-width:0;flex:0 1 auto}
.identitaet-bild{width:6.6rem;height:6.6rem;border-radius:2px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--champagner),0 0 0 5px var(--papier),0 12px 26px -12px rgba(19,17,16,.5);
  transition:width 420ms var(--kurve),height 420ms var(--kurve),transform var(--zeit-hover) var(--kurve)}
.kopf.kopf-klein .identitaet-bild{width:3.2rem;height:3.2rem;
  box-shadow:0 0 0 1px var(--champagner),0 0 0 4px var(--papier),0 8px 18px -10px rgba(19,17,16,.5)}
.identitaet-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.identitaet-name{font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size 420ms var(--kurve)}
.kopf.kopf-klein .identitaet-name{font-size:.72rem;letter-spacing:.13em}
.identitaet-titel{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--leise);
  letter-spacing:.02em;white-space:nowrap;margin-top:.15rem;transition:font-size 420ms var(--kurve)}
.kopf.kopf-klein .identitaet-titel{font-size:.76rem;margin-top:.1rem}
@media (hover:hover) and (pointer:fine){ .identitaet:hover .identitaet-bild{transform:scale(1.06)} }

.navigation{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem);font-size:.82rem;color:var(--leise);flex:0 0 auto}
.navigation a{position:relative;padding:.2rem 0;transition:color var(--zeit-hover) var(--kurve)}
.navigation a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--bordeaux);transition:right var(--zeit-hover) var(--kurve)}
.navigation a:hover,.navigation a[aria-current="page"]{color:var(--tinte)}
.navigation a[aria-current="page"]::after{right:0}
.navigation a:hover::after{right:0;background:var(--linie-kraeftig)}
.navigation a[aria-current="page"]:hover::after{background:var(--bordeaux)}

/* Klang-Schalter: drei Balken, still wenn stumm, atmend wenn Musik läuft */
.klang{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--linie-bedien);
  padding:.45rem .8rem;cursor:pointer;color:var(--leise);font-size:.8rem;letter-spacing:.04em;
  transition:border-color var(--zeit-hover) var(--kurve),color var(--zeit-hover) var(--kurve)}
.klang:hover{border-color:var(--tinte);color:var(--tinte)}
.klang[aria-pressed="true"]{border-color:var(--bordeaux);color:var(--tinte)}
.klang-balken{display:inline-flex;align-items:flex-end;gap:2px;height:.9rem}
/* scaleY statt height: height loest in jedem Bild eine Neuberechnung des
   Layouts aus — endlos, in der festen Kopfleiste. */
.klang-balken i{display:block;width:2px;height:100%;background:currentColor;transform-origin:bottom;transform:scaleY(.3)}
.klang[aria-pressed="true"] .klang-balken i{background:var(--bordeaux);animation:balken 1.6s ease-in-out infinite}
.klang[aria-pressed="true"] .klang-balken i:nth-child(2){animation-delay:-.5s}
.klang[aria-pressed="true"] .klang-balken i:nth-child(3){animation-delay:-1s}
@keyframes balken{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.klang.klang-bereit{border-color:var(--champagner)}
.klang.klang-bereit .klang-balken i{background:var(--bordeaux);animation:balken-bereit 2.6s ease-in-out infinite}
.klang.klang-bereit .klang-balken i:nth-child(2){animation-delay:-.9s}
.klang.klang-bereit .klang-balken i:nth-child(3){animation-delay:-1.8s}
@keyframes balken-bereit{0%,100%{transform:scaleY(.3);opacity:.55}50%{transform:scaleY(.7);opacity:1}}

/* --------------------------------------------------------------------------
   Gemeinsame Bausteine
   -------------------------------------------------------------------------- */
.kapitel-zeile{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.08;text-wrap:balance;overflow:hidden}
.kapitel-zeile span{display:inline-block;transform:translateY(112%)}
.an .kapitel-zeile span,.kapitel-zeile.an span{transform:translateY(0);transition:transform var(--zeit-auftritt) var(--kurve)}
.kapitel-zeile em{font-style:italic;color:var(--bordeaux)}
[data-stimmung="dunkel"] .kapitel-zeile em{color:var(--champagner)}

/* Weiche Auftritte: Absätze und Knöpfe folgen ihrer Kapitelzeile */
.weich{opacity:0;translate:0 1rem}
.an .weich{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve),translate 700ms var(--kurve)}
.an .weich:nth-child(2){transition-delay:120ms}
.an .weich:nth-child(3){transition-delay:220ms}
.an .weich:nth-child(4){transition-delay:320ms}

.cta,.cta-leise{display:inline-block;font-size:.9rem;letter-spacing:.02em;padding:.95rem 1.7rem;
  position:relative;overflow:hidden;
  transition:transform var(--zeit-hover) var(--kurve),background-color var(--zeit-hover) var(--kurve),
    color var(--zeit-hover) var(--kurve),box-shadow var(--zeit-hover) var(--kurve)}
.cta{background:var(--tinte);color:var(--papier);border:1px solid transparent;
  box-shadow:0 10px 24px -14px rgba(19,17,16,.55)}
.cta-glanz::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,250,240,.28),transparent);transform:skewX(-16deg)}
@media (hover:hover) and (pointer:fine){
  .cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(19,17,16,.6)}
  .cta-glanz:hover::after{animation:knopfglanz 900ms var(--kurve)}
  .cta-leise:hover{background:var(--tinte);color:var(--papier)}
}
@keyframes knopfglanz{from{transform:translateX(0) skewX(-16deg)}to{transform:translateX(460%) skewX(-16deg)}}
/* Wie knopfglanz, blendet aber an den Enden aus: sonst poppt der Streif
   am Rand der Kachel auf und wieder weg. */
@keyframes kartenglanz{0%{transform:translateX(0) skewX(-16deg);opacity:0}
  14%,86%{opacity:1}
  100%{transform:translateX(460%) skewX(-16deg);opacity:0}}
.cta:active{transform:translateY(0) scale(.98)}
.cta-leise{border:1px solid var(--tinte)}
.cta-wartet{background:var(--creme);color:var(--leise);cursor:help;box-shadow:none}
.cta-aussen{margin-left:.5rem;font-size:.85em;opacity:.8}
/* ® und ™ stehen mitten im Produktnamen. Ein fester em-Anteil kann beide
   Faelle nicht bedienen: .42em macht auf dem Kartennamen (18 px) einen
   5,5-Pixel-Fleck, .58em auf der Produktueberschrift (70 px) ein 40 Pixel
   grosses Zeichen, das den Namen dominiert. Deshalb ein kleines Verhaeltnis
   MIT Untergrenze: gross bleibt zurueckhaltend, klein bleibt lesbar.
   Gerechnet: 70 px -> 21 px, 18,4 px -> 9,3 px (die Untergrenze greift). */
.marke{font-size:max(.30em,.58rem);vertical-align:.32em;line-height:0;letter-spacing:0}
.glanz{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light}
.glanz::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,250,240,.9),transparent);transform:skewX(-14deg)}
@keyframes lichtstreif{0%,74%{transform:translateX(0) skewX(-14deg)}86%{transform:translateX(470%) skewX(-14deg)}86.1%,100%{transform:translateX(0) skewX(-14deg)}}

/* --------------------------------------------------------------------------
   1 · Hero: die Beraterin zuerst, die Ware danach
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100dvh;padding:calc(var(--kopf-hoch) + var(--kopf-luft)) var(--rand) 1.2rem;
  max-width:var(--breite);margin:0 auto;display:flex;flex-direction:column;isolation:isolate;background:var(--papier)}
.hero-licht{position:absolute;border-radius:50%;pointer-events:none;filter:blur(48px);z-index:-1;opacity:.75}
.licht-1{width:44vw;height:44vw;max-width:38rem;max-height:38rem;right:-8%;top:-6%;
  background:radial-gradient(closest-side,rgba(232,201,176,.55),transparent 72%);
  animation:treiben-a 28s ease-in-out infinite}
.licht-2{width:36vw;height:36vw;max-width:30rem;max-height:30rem;left:-10%;bottom:6%;
  background:radial-gradient(closest-side,rgba(216,199,169,.45),transparent 72%);
  animation:treiben-b 36s ease-in-out infinite}
@keyframes treiben-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,3vh) scale(1.08)}}
@keyframes treiben-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vh) scale(1.1)}}
.hero-spot{position:absolute;left:50%;top:50%;width:52vw;height:52vw;max-width:46rem;max-height:46rem;
  margin:-26vw 0 0 -26vw;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(closest-side,rgba(255,250,242,.9),transparent 70%);
  transition:opacity 900ms var(--kurve)}
.hero.an .hero-spot{opacity:.6}
@media (max-width:760px){ .hero-spot{display:none} }

.kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leise);margin-top:clamp(.4rem,1.6vh,1.2rem)}

.hero-buehne{flex:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  gap:clamp(1.6rem,4vw,4.5rem);padding:clamp(1rem,3vh,2.4rem) 0}

/* Das Hauptbild: Melanie */
.hero-portraet{position:relative;width:clamp(13rem,27vw,23rem);flex:0 0 auto;
  border:1px solid var(--linie);padding:clamp(.5rem,1.1vw,.85rem);background:#fff;
  box-shadow:0 36px 64px -44px rgba(19,17,16,.5);opacity:0}
.hero-portraet::before{content:"";position:absolute;inset:-16%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,201,176,.5),transparent 72%);filter:blur(34px)}
.hero.an .hero-portraet{opacity:1;animation:portraet-auf 1100ms var(--kurve) 150ms both}
@keyframes portraet-auf{from{opacity:0;transform:translateY(2.2rem) scale(.96)}to{opacity:1;transform:none}}

/* Die Worte: Name zuerst, Anspruch darunter */
.hero-worte{min-width:0;max-width:clamp(20rem,38vw,33rem)}
.hero-zeile{display:block;overflow:hidden}
.hero-zeile > span{display:inline-block;transform:translateY(112%)}
.hero.an .hero-zeile > span{transform:translateY(0);transition:transform 840ms var(--kurve)}
.hero-name{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(2.7rem,6.6vw,5.8rem);line-height:.98;margin:0}
.hero.an .hero-name .hero-zeile:nth-child(1) > span{transition-delay:340ms}
.hero.an .hero-name .hero-zeile:nth-child(2) > span{transition-delay:460ms}
.hero-rolle{font-family:var(--serif);font-style:italic;color:var(--leise);
  font-size:clamp(1rem,1.75vw,1.45rem);margin-top:.55rem;opacity:0;translate:0 .8rem}
.hero.an .hero-rolle{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve) 720ms,translate 700ms var(--kurve) 720ms}
.hero-claim{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.55rem,3.4vw,2.9rem);line-height:1.1;text-wrap:balance;
  margin-top:clamp(1.1rem,2.6vh,1.9rem);padding-top:clamp(1rem,2.4vh,1.6rem);border-top:1px solid var(--linie)}
.hero-claim em{font-style:italic;color:var(--bordeaux)}
.hero.an .hero-claim .hero-zeile > span{transition-delay:900ms}
.hero-sub{color:var(--leise);max-width:42ch;margin-top:.9rem;opacity:0;translate:0 1rem}
.hero-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem;opacity:0;translate:0 1rem}
.hero.an .hero-sub{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve) 1180ms,translate 700ms var(--kurve) 1180ms}
.hero.an .hero-ctas{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve) 1320ms,translate 700ms var(--kurve) 1320ms}

/* Die Ware bleibt Akzent, nicht Hauptsache */
.hero-akzente{position:relative;width:clamp(8rem,16vw,14.5rem);align-self:stretch;min-height:18rem}
.hero-glut{position:absolute;left:50%;top:38%;width:220%;height:44%;translate:-50% -50%;
  border-radius:50%;pointer-events:none;opacity:.3;
  background:radial-gradient(closest-side,rgba(232,201,176,.75),rgba(216,199,169,.25) 55%,transparent 72%)}
.hero-produkt{position:absolute;left:0;right:0;top:22%;mix-blend-mode:multiply}
.hero.an .hero-produkt{animation:hero-einfahrt 950ms var(--kurve) 620ms both,schweben-a 9s ease-in-out 1.7s infinite}
.hero.an .hero-produkt .glanz::after{animation:lichtstreif 11s ease-in-out 2.4s infinite}
@keyframes hero-einfahrt{from{opacity:0;transform:translateX(4rem) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes schweben-a{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-.6deg)}}
.hero-begleiter{position:absolute;left:14%;right:14%;top:63%;mix-blend-mode:multiply;opacity:0}
.hero.an .hero-begleiter{animation:begleiter-auf 1100ms var(--kurve) 1460ms both,schweben-b 12s ease-in-out 2.7s infinite}
@keyframes begleiter-auf{from{opacity:0;transform:translateY(2rem) scale(.92)}to{opacity:.94;transform:none}}
@keyframes schweben-b{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(1.1deg)}}
.hero-schatten{position:absolute;left:8%;right:8%;top:52%;height:1.5rem;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,17,16,.18),transparent 70%);border-radius:50%;opacity:0}
.hero.an .hero-schatten{opacity:1;transition:opacity 800ms ease 1120ms;animation:schatten-atmen 9s ease-in-out 1.7s infinite}
@keyframes schatten-atmen{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}

.hero-fussnote{border-top:1px solid var(--linie);margin-top:.6rem;padding:.9rem 0 .2rem;
  font-size:.8rem;color:var(--leise);display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  opacity:0;translate:0 .6rem}
.hero.an .hero-fussnote{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve) 1460ms,translate 700ms var(--kurve) 1460ms}
.hero-beleg{color:var(--tinte)}
.fn-name{font-family:var(--serif);color:var(--tinte);font-size:.95rem}
.fn-name:hover{color:var(--bordeaux)}

/* --------------------------------------------------------------------------
   2 · Showcase (angeheftete Bühne, drei Akte)
   -------------------------------------------------------------------------- */
.showcase{background:var(--creme)}
.showcase::before{content:"";display:block;height:7rem;margin-bottom:-7rem;background:linear-gradient(var(--papier),var(--creme))}
.showcase-halter{height:340vh;position:relative}
.showcase-buehne{position:sticky;top:0;height:100dvh;overflow:clip;background:var(--creme);
  max-width:var(--breite);margin:0 auto;padding:5.5rem var(--rand) 2rem}
.showcase .kapitel-zeile{position:absolute;top:clamp(4.6rem,10vh,6.5rem);left:var(--rand)}
.akt{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(1rem,4vw,4rem);padding:6rem var(--rand) 3rem;pointer-events:none}
.akt-bild,.akt-text{opacity:0}
.akt-bild{justify-self:center;width:min(38vw,30rem);mix-blend-mode:multiply}
.akt-text{max-width:26rem}
.akt:nth-child(odd) .akt-bild{order:2}
.akt-text h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.15;text-wrap:balance}
.akt-preis{margin-top:.6rem;font-size:1.05rem;font-variant-numeric:var(--zahlen)}
.akt-mehr{display:inline-block;margin-top:1.2rem;font-size:.88rem;border-bottom:1px solid var(--bordeaux);padding-bottom:.15rem;transition:color var(--zeit-hover) var(--kurve)}
.akt-mehr:hover{color:var(--bordeaux)}

.band{background:var(--creme);border-top:1px solid var(--linie)}
.band-innen{max-width:var(--breite);margin:0 auto;padding:clamp(2.2rem,5vh,3.4rem) var(--rand);
  display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap}
.band-satz{font-family:var(--serif);font-size:clamp(1.05rem,1.8vw,1.4rem)}

/* --------------------------------------------------------------------------
   3 · Kategorien (waagerechtes Blättern)
   -------------------------------------------------------------------------- */
.kategorien{background:var(--creme)}
.kategorien-buehne{position:sticky;top:0;height:100dvh;overflow:clip;display:flex;align-items:center;background:var(--creme)}
.kategorien-spur{display:flex;align-items:center;gap:clamp(2.5rem,6vw,6rem);background:var(--creme);
  /* Links auf der Spaltenkante beginnen wie jedes andere Kapitel, rechts
     bewusst randlos: die letzte Karte darf aus dem Bild laufen. */
  padding-left:max(var(--rand),calc((100% - var(--breite)) / 2 + var(--rand)));
  padding-right:var(--rand)}
.spur-kopf{flex:0 0 auto;width:min(34rem,72vw)}
.spur-satz{margin-top:1rem;color:var(--leise);max-width:30ch}
.kategorie{flex:0 0 auto;position:relative;width:min(30rem,74vw);padding:2.2rem 0;display:block}
.kategorie-wort{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
  transition:color var(--zeit-hover) var(--kurve)}
.kategorie-bild{width:min(19rem,46vw);margin:-1.6rem 0 0 clamp(2rem,8vw,7rem);mix-blend-mode:multiply;
  transition:transform 600ms var(--kurve)}
.kategorie:nth-child(odd) .kategorie-bild{animation:schweben-a 10s ease-in-out infinite}
.kategorie:nth-child(even) .kategorie-bild{animation:schweben-b 12s ease-in-out -4s infinite}
.kategorie-zahl{font-size:.85rem;color:var(--leise);margin-top:.4rem;font-variant-numeric:var(--zahlen)}
.kategorie-beispiel{font-size:.85rem;margin-top:.15rem}
.kategorie-pfeil{display:inline-block;margin-top:.7rem;font-size:.85rem;border-bottom:1px solid var(--bordeaux);padding-bottom:.1rem;
  opacity:.75;transition:opacity var(--zeit-hover) var(--kurve)}
@media (hover:hover) and (pointer:fine){
  .kategorie:hover .kategorie-wort{color:var(--bordeaux)}
  .kategorie:hover .kategorie-bild{transform:translateY(-8px) scale(1.03)}
  .kategorie:hover .kategorie-pfeil{opacity:1}
}

/* --------------------------------------------------------------------------
   4 · Duft-Kapitel (der eine Stimmungswechsel)
   -------------------------------------------------------------------------- */
.duft{background:radial-gradient(60% 46% at 50% 38%,rgba(122,104,184,.13),transparent 60%),
  linear-gradient(var(--creme) 0,var(--russ) 9%,var(--russ) 94%,var(--papier) 100%);color:var(--elfenbein)}
.duft-innen{max-width:var(--breite);margin:0 auto;padding:clamp(5rem,12vh,8rem) var(--rand) clamp(4rem,10vh,7rem)}
.duft-titel{text-align:center}
.duft-buehne{position:relative;height:clamp(24rem,64vh,36rem);margin-top:clamp(1.5rem,4vh,3rem)}
.duft-glut{position:absolute;left:50%;top:30%;width:min(60vw,40rem);height:min(60vw,40rem);translate:-50% -40%;border-radius:50%;
  pointer-events:none;opacity:.35;background:radial-gradient(closest-side,rgba(216,199,169,.22),rgba(122,104,184,.10) 50%,transparent 72%)}
.insel{position:absolute;display:block;color:inherit}
.insel::before{content:"";position:absolute;inset:-44%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(238,222,192,.26),rgba(238,222,192,.08) 50%,transparent 72%);
  transition:opacity 600ms var(--kurve)}
.insel img{position:relative;filter:brightness(.9) saturate(1.06);transition:transform 700ms var(--kurve);
  -webkit-mask-image:radial-gradient(closest-side,#000 46%,transparent 86%);mask-image:radial-gradient(closest-side,#000 46%,transparent 86%)}
.insel .glanz{border-radius:50%;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 80%);mask-image:radial-gradient(closest-side,#000 58%,transparent 80%)}
.insel .glanz::after{background:linear-gradient(100deg,transparent,rgba(255,250,240,.32),transparent)}
@media (hover:hover) and (pointer:fine){
  .insel:hover img{transform:translateY(-8px) scale(1.04)}
  .insel:hover::before{opacity:1.4}
}
.insel-1{left:6%;top:34%;width:clamp(8rem,19vw,13rem)}
.insel-2{left:50%;top:0;width:clamp(13rem,30vw,20rem);translate:-50% 0}
.insel-3{left:auto;right:6%;top:40%;width:clamp(7.5rem,17vw,12rem)}
.insel-etikett{position:absolute;left:50%;top:calc(100% + .4rem);translate:-50% 0;text-align:center;white-space:nowrap}
.insel-name{display:block;font-family:var(--serif);font-size:clamp(.9rem,1.4vw,1.1rem)}
.insel-preis{display:block;font-size:.8rem;color:var(--duft-leise);margin-top:.15rem;font-variant-numeric:var(--zahlen)}
.funke{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--champagner);opacity:.15}
.duft .insel{opacity:0}
.duft.an .insel{opacity:1}
.duft.an .insel-2{animation:insel-tiefe var(--zeit-gross) var(--kurve) 150ms both,bahn-mitte 22s ease-in-out 2s infinite}
.duft.an .insel-1{animation:insel-auf 1000ms var(--kurve) 900ms both,bahn-links 20s ease-in-out 2.4s infinite}
.duft.an .insel-3{animation:insel-auf 1000ms var(--kurve) 1100ms both,bahn-rechts 24s ease-in-out 2.8s infinite}
.duft.an .glanz::after{animation:lichtstreif 12s ease-in-out 1.8s infinite}
.duft.an .funke{animation:funkeln 5s ease-in-out infinite}
@keyframes insel-tiefe{from{opacity:0;translate:-50% 0;transform:scale(.82);filter:blur(9px)}60%{filter:blur(2px)}to{opacity:1;translate:-50% 0;transform:scale(1);filter:blur(0)}}
@keyframes insel-auf{from{opacity:0;transform:scale(.9);filter:blur(6px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes bahn-mitte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bahn-links{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-7px)}}
@keyframes bahn-rechts{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,8px)}}
@keyframes funkeln{0%,100%{opacity:.12}50%{opacity:.55}}
.duft-satz{margin:clamp(2.5rem,6vh,4rem) auto 0;text-align:center;color:var(--duft-leise);max-width:52ch}
.duft-satz a{color:var(--elfenbein);text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   5 · Beratung
   -------------------------------------------------------------------------- */
.beratung{background:var(--papier)}
.beratung-innen{max-width:var(--breite);margin:0 auto;padding:clamp(4.5rem,11vh,7.5rem) var(--rand);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.portraet{position:relative;max-width:26rem;border:1px solid var(--linie);padding:clamp(.6rem,1.4vw,1.1rem);background:#fff;
  box-shadow:0 30px 60px -40px rgba(19,17,16,.35)}
.portraet::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,201,176,.45),transparent 72%);filter:blur(30px)}
.beratung-text p{margin-top:1.1rem;max-width:52ch;color:#3a3630}
.beleg{border-left:2px solid var(--bordeaux);padding-left:1rem;color:var(--tinte)}
.beratung-text .cta{margin-top:1.6rem}

/* --------------------------------------------------------------------------
   6 · Kontakt
   -------------------------------------------------------------------------- */
.kontakt{background:var(--creme);border-top:1px solid var(--linie)}
.kontakt-innen{max-width:var(--breite);margin:0 auto;padding:clamp(4rem,10vh,6.5rem) var(--rand);text-align:center}
.kontakt-satz{margin:1.1rem auto 0;max-width:52ch;color:var(--leise)}
.kontakt-wege{margin-top:2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   7 · Fußbereich
   -------------------------------------------------------------------------- */
.fuss{background:var(--papier);border-top:1px solid var(--linie)}
.fuss-innen{max-width:var(--breite);margin:0 auto;padding:2.2rem var(--rand) 2.6rem;
  display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center}
.fuss-marke{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.fuss-recht{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.82rem;color:var(--leise);grid-column:1}
.fuss-recht a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linie-kraeftig)}
.fuss-recht a:hover{color:var(--tinte);text-decoration-color:var(--bordeaux)}
.fuss-preise{grid-column:1;font-size:.75rem;color:var(--leise);max-width:72ch;line-height:1.55}

/* Rechtsseiten: reiner Lesetext */
.rechtsseite{max-width:52rem;margin:0 auto;padding:calc(var(--kopf-hoch) + var(--kopf-luft)) var(--rand) 4.5rem}
.rechtsseite h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1}
.rechtsseite .vorspann{margin-top:1rem;color:var(--leise);max-width:62ch}
.rechtsseite h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.5rem);
  margin:2.6rem 0 .7rem;padding-top:1.3rem;border-top:1px solid var(--linie)}
.rechtsseite h3{font-size:.95rem;font-weight:500;margin:1.4rem 0 .4rem}
.rechtsseite p,.rechtsseite li{max-width:62ch;line-height:1.7}
.rechtsseite p{margin-top:.7rem}
.rechtsseite ul{margin:.7rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem}
.rechtsseite address{font-style:normal;margin-top:.7rem;line-height:1.7}
.rechtsseite .stand{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--linie);
  font-size:.8rem;color:var(--leise)}
/* Was noch fehlt, wird als fehlend gezeigt, nicht erfunden. */
.fehlt-noch{display:inline-block;background:var(--creme);border:1px dashed var(--linie-kraeftig);
  padding:.1rem .5rem;font-size:.85em;color:var(--leise)}
.fuss-klang{grid-column:2;grid-row:1 / span 2;justify-self:end;text-align:right;font-size:.8rem;color:var(--leise);display:grid;gap:.4rem}
.fuss-klang-titel{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--tinte)}
.klang-wechsel{background:transparent;border:1px solid var(--linie-bedien);padding:.4rem .8rem;cursor:pointer;font-size:.78rem;
  transition:border-color var(--zeit-hover) var(--kurve)}
.klang-wechsel:hover{border-color:var(--tinte)}
.fuss-hinweis{grid-column:1;font-size:.75rem;color:var(--leise)}

/* --------------------------------------------------------------------------
   Sortiment: Übersicht und Kapitel
   -------------------------------------------------------------------------- */
.sortiment{max-width:var(--breite);margin:0 auto;padding:calc(var(--kopf-hoch) + var(--kopf-luft)) var(--rand) 4rem}
.sortiment-kopf{max-width:60ch}
.sortiment-satz{margin-top:.9rem;color:var(--leise)}
.kapitel-leiste{margin-top:2rem;display:flex;gap:1.6rem;overflow-x:auto;padding-bottom:.6rem;border-bottom:1px solid var(--linie);
  scrollbar-width:none;font-size:.9rem;white-space:nowrap;
  /* Rechts ausblenden statt hart abschneiden: sonst sieht niemand, dass da
     noch Kapitel folgen (auf dem Handy sind 48 Prozent verborgen). */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent)}
.kapitel-leiste a{scroll-snap-align:start}
.kapitel-leiste::-webkit-scrollbar{display:none}
.kapitel-leiste a{position:relative;padding:.72rem 0;color:var(--leise);transition:color var(--zeit-hover) var(--kurve)}
.kapitel-leiste a small{font-size:.72rem;color:var(--leise);margin-left:.2rem}
.kapitel-leiste a::after{content:"";position:absolute;left:0;right:100%;bottom:-.62rem;height:2px;background:var(--bordeaux);transition:right var(--zeit-hover) var(--kurve)}
.kapitel-leiste a:hover,.kapitel-leiste a[aria-current="page"]{color:var(--tinte)}
/* Der Ort, an dem man IST, und der Ort, auf den man ZEIGT, duerfen nicht
   gleich aussehen. Aktiv traegt den vollen Balken, Hover nur eine Haarlinie. */
.kapitel-leiste a[aria-current="page"]::after{right:0}
.kapitel-leiste a:hover::after{right:0;height:1px;background:var(--linie-kraeftig)}
.kapitel-leiste a[aria-current="page"]:hover::after{height:2px;background:var(--bordeaux)}

.werkzeuge{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:end}
.suche input{width:100%;border:0;border-bottom:1px solid var(--linie-bedien);background:transparent;
  padding:.7rem .2rem;font:inherit;color:var(--tinte);
  transition:border-color var(--zeit-hover) var(--kurve)}
.suche input::placeholder{color:var(--leise)}
@media (hover:hover) and (pointer:fine){
  .suche input:hover,.sortierung select:hover{border-bottom-color:var(--tinte)}
}
/* Muss NACH der Hover-Regel stehen: gleiche Spezifitaet, spaeter gewinnt.
   Sonst uebermalt Hover die Bordeaux-Linie des fokussierten Feldes.
   Der Umriss kommt bereits aus der allgemeinen :focus-visible-Regel. */
.suche input:focus-visible{border-bottom-color:var(--bordeaux)}
.sortierung{display:grid;gap:.3rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.sortierung select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.9rem;letter-spacing:0;
  text-transform:none;color:var(--tinte);background:transparent;border:0;
  border-bottom:1px solid var(--linie-bedien);padding:.62rem 1.4rem .62rem .2rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--leise) 50%),linear-gradient(135deg,var(--leise) 50%,transparent 50%);
  background-position:right .55rem center,right .3rem center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.werkzeuge-knopf{padding:.66rem 1.2rem;font-size:.85rem;background:transparent;line-height:1.5}
/* 44 px Tippflaeche, wie sie .ton schon einhaelt. */
.klang,.klang-wechsel,.werkzeuge-knopf{min-height:2.75rem}
.sortierung select{min-height:2.75rem}

.raster{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2.4rem,3.4vw,3rem) clamp(1rem,2vw,1.8rem)}
.karte{opacity:0;translate:0 1.4rem}
.karte.an{opacity:1;translate:0 0;transition:opacity 700ms var(--kurve),translate 700ms var(--kurve)}
.karte-link{display:flex;flex-direction:column;height:100%;transition:transform 700ms var(--kurve)}
.karte-link.geneigt{transition:transform 140ms ease-out}
.karte-bild{position:relative;aspect-ratio:1;
  background:#fff;border:1px solid var(--linie);overflow:hidden;
  box-shadow:0 1px 2px -1px rgba(19,17,16,.10),0 10px 22px -16px rgba(19,17,16,.34);
  transition:box-shadow 600ms var(--kurve),border-color 600ms var(--kurve)}
.karte-bild::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,250,240,.75),transparent);mix-blend-mode:soft-light;
  transform:skewX(-16deg);opacity:0}
.karte-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  /* Nur noch ein schmaler Saum: die Bilddateien tragen ihre Fuellung von 0,78
     bereits in sich. Zweimal Polster laesst das Produkt auf 65 Prozent der
     Kachelkante schrumpfen. */
  padding:clamp(.35rem,1vw,.7rem);transition:transform 800ms var(--kurve)}
.karte.an .karte-bild{animation:karte-atmen 8s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.1s)}
@keyframes karte-atmen{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.007)}}
.karte-text{display:flex;flex-direction:column;flex:1;padding:.9rem .1rem 0}
.karte-marke{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bordeaux);margin-bottom:.35rem}
.karte-name{display:block;font-family:var(--serif);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.25;text-wrap:balance;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--zeit-hover) var(--kurve)}
.karte-zeile{display:flex;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.35rem;font-size:.85rem;font-variant-numeric:var(--zahlen)}
.karte-toene{color:var(--leise)}
/* Tastatur: der globale Umriss umschliesst sonst die ganze hohe Kachel samt
   Beschriftung und ragt in die Rasterfuge. Hier bekommt stattdessen das
   Bildfeld den Ring — dieselbe Stelle, die auch beim Ueberfahren antwortet. */
.karte-link{-webkit-tap-highlight-color:transparent}
.karte-link:focus-visible{outline:none}
.karte-link:focus-visible .karte-bild{border-color:var(--champagner);
  box-shadow:0 0 0 2px var(--bordeaux),0 2px 5px -2px rgba(19,17,16,.14),0 26px 48px -24px rgba(19,17,16,.42)}
.karte-link:focus-visible .karte-name{text-decoration-color:var(--bordeaux)}
@media (hover:hover) and (pointer:fine){
  .karte-link:hover{transform:perspective(1100px) translateY(-18px) translateZ(96px)}
  .karte-link:hover .karte-bild{box-shadow:0 2px 5px -2px rgba(19,17,16,.14),0 26px 48px -24px rgba(19,17,16,.42);border-color:var(--champagner)}
  .karte-link:hover .karte-bild::after{animation:kartenglanz 1100ms var(--kurve)}
  .karte-link:hover .karte-bild img{transform:scale(1.07) translateY(-1.5%)}
  .karte-link:hover .karte-name{text-decoration-color:var(--bordeaux)}
}
.leer{margin-top:2.4rem;color:var(--leise)}
.ohne-foto{margin-top:3.6rem;border-top:1px solid var(--linie);padding-top:1.6rem}
.ohne-foto h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem)}
.ohne-foto h2 small{font-size:.8rem;color:var(--leise);margin-left:.4rem}
.ohne-foto-liste{list-style:none;padding:0;margin:1rem 0 0;columns:3;column-gap:2.5rem;font-size:.9rem}
.ohne-foto-liste li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:.8rem}
.ohne-foto-liste li span{color:var(--leise);white-space:nowrap}
.ohne-foto-liste a:hover{color:var(--bordeaux)}

/* --------------------------------------------------------------------------
   Produktseite
   -------------------------------------------------------------------------- */
.detail{max-width:var(--breite);margin:0 auto;padding:calc(var(--kopf-hoch) + var(--kopf-luft)) var(--rand) 3rem}
.pfad{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.82rem;color:var(--leise)}
.pfad a:hover{color:var(--tinte)}
.pfad a::after{content:"/";margin-left:.5rem;color:var(--linie)}
.pfad span{color:var(--tinte)}
.detail-innen{margin-top:1.8rem;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.detail-buehne{position:relative;min-height:min(56vh,32rem);display:grid;place-items:center;padding-bottom:2.2rem}
.detail-buehne.buehne-ohne{background:var(--creme);border:1px solid var(--linie);padding:clamp(1.5rem,4vw,3rem)}
.detail-licht{position:absolute;left:50%;top:50%;width:80%;height:80%;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,201,176,.6),rgba(216,199,169,.2) 55%,transparent 72%);filter:blur(24px);opacity:.55}
.buehne-ohne .detail-licht{display:none}
.detail-bild{position:relative;width:min(100%,32rem);opacity:0;transform:translateY(1.4rem) scale(.96)}
.buehne-studio .detail-bild,.buehne-katalog .detail-bild{mix-blend-mode:multiply}
.detail.an .detail-bild{opacity:1;transform:none;transition:opacity 900ms var(--kurve),transform 900ms var(--kurve)}
.detail.an .buehne-studio .detail-bild,
.detail.an .buehne-katalog .detail-bild{animation:schweben-a 10s ease-in-out .9s infinite}
.detail.an .buehne-studio .detail-bild .glanz::after,
.detail.an .buehne-katalog .detail-bild .glanz::after{animation:lichtstreif 12s ease-in-out 2s infinite}
.detail-schatten{position:absolute;left:50%;bottom:.5rem;width:46%;height:1.5rem;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,17,16,.18),transparent 70%)}
.buehne-ohne .detail-schatten{display:none}
.kein-bild{color:var(--leise);font-size:.9rem}
.detail-art{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.detail-name{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.1;text-wrap:balance;margin-top:.5rem}
.detail-preis{margin-top:.9rem;font-size:1.25rem;font-variant-numeric:var(--zahlen)}
.detail-preis s{margin-left:.6rem;font-size:.9rem;color:var(--leise)}
.detail-marken{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.detail-marken span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linie);padding:.3rem .6rem;color:var(--bordeaux)}
.toene{margin-top:1.8rem;border-top:1px solid var(--linie);padding-top:1.2rem}
.toene-titel{font-size:.9rem;color:var(--leise)}
.toene-titel strong{color:var(--tinte);font-weight:500}
.toene-liste{list-style:none;padding:0;margin:.9rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem}
.ton{display:flex;width:100%;align-items:center;gap:.5rem;border:1px solid var(--linie-bedien);background:transparent;
  padding:.62rem .7rem .62rem .5rem;min-height:2.75rem;text-align:left;
  cursor:pointer;font-size:.85rem;transition:border-color var(--zeit-hover) var(--kurve),transform 160ms var(--kurve)}
.ton-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ton:hover{border-color:var(--tinte)}
.ton:active{transform:scale(.97)}
.ton[aria-pressed="true"]{border-color:var(--bordeaux);box-shadow:inset 0 0 0 1px var(--bordeaux)}
.ton-punkt{width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid rgba(19,17,16,.15);background:linear-gradient(135deg,#fff,var(--creme))}
.ton-punkt[data-ohne]{background:repeating-linear-gradient(45deg,#fff 0 3px,var(--creme) 3px 6px)}
.ton-finish{color:var(--leise);font-size:.75rem}
.toene-hinweis{margin-top:.9rem;font-size:.78rem;color:var(--leise);max-width:52ch}
.detail-hinweis{margin-top:1.2rem;font-size:.9rem;border-left:2px solid var(--bordeaux);padding-left:.9rem}
.detail-wege{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap}
.detail-satz{margin-top:1rem;font-size:.85rem;color:var(--leise);max-width:48ch}
.reihe{margin-top:clamp(3rem,7vh,4.5rem);border-top:1px solid var(--linie);padding-top:1.2rem;
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:start;font-family:var(--serif);font-size:.95rem}
.reihe small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin-bottom:.3rem}
.reihe-nach{text-align:right}
.reihe-mitte{font-family:var(--sans);font-size:.82rem;color:var(--leise);padding-top:.9rem;text-decoration:underline;text-underline-offset:3px}
.reihe a:hover{color:var(--bordeaux)}

.leerseite{max-width:var(--breite);margin:0 auto;padding:10rem var(--rand) 5rem;display:grid;gap:1.2rem;justify-items:start}

/* --------------------------------------------------------------------------
   Handy und schmale Fenster
   -------------------------------------------------------------------------- */
@media (max-width:1100px){ .raster{grid-template-columns:repeat(3,minmax(0,1fr))} .ohne-foto-liste{columns:2} }
@media (max-width:760px){
  :root{--kopf-hoch:5.9rem; --kopf-klein:4rem; --kopf-luft:2.75rem}
  .identitaet-bild{width:4.9rem;height:4.9rem}
  .kopf.kopf-klein .identitaet-bild{width:2.7rem;height:2.7rem}
  .identitaet-titel{font-size:.74rem}
  /* Alle vier Verweise bleiben erreichbar. Die Tippflächen wachsen nach oben
     und unten auf 44 px, das kostet keine Breite. */
  .navigation{gap:.62rem;font-size:.76rem}
  .navigation a{padding:.85rem 0;letter-spacing:-.01em}
  .klang-wort{display:none}
  .klang{padding:.6rem;min-width:2.75rem;justify-content:center;border-color:var(--linie)}
  .klang-balken{height:1.05rem}
  .hero{min-height:auto}
  .hero-buehne{grid-template-columns:auto minmax(0,1fr);gap:1rem 1.2rem;align-items:start;padding:1rem 0 0}
  .hero-portraet{width:min(38vw,11rem)}
  .hero-worte{grid-column:2;display:contents}
  .hero-name{grid-column:2;grid-row:1;align-self:end}
  .hero-rolle{grid-column:2;grid-row:2;align-self:start}
  .hero-portraet{grid-row:1 / span 2}
  .hero-name{font-size:clamp(2.1rem,10.5vw,3.2rem)}
  .hero-rolle{font-size:.92rem;margin-top:.35rem}
  .hero-claim{grid-column:1 / -1;font-size:clamp(1.5rem,7vw,2.1rem);margin-top:1.3rem;padding-top:1.1rem}
  .hero-sub{grid-column:1 / -1;max-width:none}
  .hero-ctas{grid-column:1 / -1;margin-top:1.2rem}
  .hero-akzente{position:absolute;right:var(--rand);bottom:5.2rem;width:min(26vw,7.5rem);min-height:0;height:9rem;align-self:auto}
  .hero-begleiter{display:none}
  .hero-glut{width:260%;height:60%}
  .hero-fussnote{flex-direction:column;gap:.35rem}
  .showcase-halter{height:300vh}
  .akt{grid-template-columns:1fr;grid-template-rows:auto auto;gap:1.2rem;padding:5.4rem var(--rand) 2rem;align-content:center}
  .akt:nth-child(odd) .akt-bild{order:0}
  .akt-bild{width:min(62vw,20rem)}
  .duft-buehne{height:auto;display:grid;justify-items:center;gap:2.6rem;margin-top:1.2rem}
  .insel{position:relative;inset:auto;translate:none;width:min(54vw,15rem);display:flex;flex-direction:column;align-items:center}
  .insel-2{width:min(66vw,18rem);grid-row:1}
  .insel-etikett{position:static;translate:none;white-space:normal;margin-top:.6rem}
  .duft.an .insel-1,.duft.an .insel-2,.duft.an .insel-3{animation:insel-auf 900ms var(--kurve) both}
  .duft.an .insel-2{animation-delay:.1s} .duft.an .insel-1{animation-delay:.5s} .duft.an .insel-3{animation-delay:.8s}
  .funke,.duft-glut{display:none}
  .beratung-innen{grid-template-columns:1fr;gap:2rem}
  .portraet{max-width:19rem}
  .fuss-innen{grid-template-columns:1fr}
  .fuss-klang{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
  .werkzeuge{grid-template-columns:1fr 1fr}
  .suche{grid-column:1 / -1}
  .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem .9rem}
  .ohne-foto-liste{columns:1}
  .detail-innen{grid-template-columns:1fr;gap:1.6rem}
  .detail-buehne{min-height:min(60vw,22rem)}
  .reihe{grid-template-columns:1fr 1fr}
  .reihe-mitte{grid-column:1 / -1;order:3;padding-top:0}
}
@media (max-width:430px){
  .identitaet-titel{display:none}
  .identitaet-name{font-size:.72rem;letter-spacing:.1em}
  /* Der Name steht auch oben; er darf umbrechen statt zu verschwinden. */
  .identitaet-name{white-space:normal;line-height:1.15;max-width:7.5rem}
  .kopf.kopf-klein .identitaet-name{white-space:nowrap;max-width:none}
}

/* Waagerechtes Blättern nur mit Bewegungs-Erlaubnis und genug Breite */
@media (max-width:760px),(prefers-reduced-motion: reduce){
  .kategorien-halter{height:auto !important}
  .kategorien-buehne{position:static;height:auto;overflow:visible;display:block}
  .kategorien-spur{flex-direction:column;align-items:flex-start;transform:none !important;padding:clamp(3.5rem,9vh,5rem) var(--rand);gap:3rem}
  .spur-kopf,.kategorie{width:100%;max-width:34rem}
}

/* --------------------------------------------------------------------------
   Ruhe-Modus: alles steht, alles bleibt lesbar
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .kapitel-zeile span{transform:none}
  .hero-sub,.hero-ctas,.hero-schatten,.duft .insel,.hero-begleiter,.weich,.karte,.detail-bild,.akt-bild,.akt-text,
  .hero-portraet,.hero-rolle,.hero-fussnote{opacity:1;translate:0 0;transform:none}
  .hero-zeile > span{transform:none}
  :root{--kopf-hoch:var(--kopf-klein)}
  .identitaet-bild{width:3.2rem;height:3.2rem}
  .hero-spot,.hero-licht{display:none}
  .karte-link:hover{transform:none}
  .karte-link:hover .karte-bild img{transform:none}
  .showcase-halter{height:auto}
  .showcase-buehne{position:static;height:auto;overflow:visible;padding-top:4rem}
  .showcase .kapitel-zeile{position:static;margin-bottom:1rem}
  .akt{position:static;pointer-events:auto;padding:1.5rem 0}
}

/* ==========================================================================
   Ohne JavaScript bleibt nichts verborgen
   --------------------------------------------------------------------------
   Die Auftritte setzen ihren Grundzustand auf opacity 0 und warten auf die
   Klasse "an" aus bewegung.js. Bleibt das Skript aus (Fehler, Blocker, alter
   Browser), wäre die Seite sonst leer. Die Markierung html.js setzt ein
   Einzeiler im Kopf der Seite, bevor irgendetwas gezeichnet wird.
   ========================================================================== */
html:not(.js) .karte,
html:not(.js) .weich,
html:not(.js) .hero-portraet,
html:not(.js) .hero-rolle,
html:not(.js) .hero-sub,
html:not(.js) .hero-ctas,
html:not(.js) .hero-fussnote,
html:not(.js) .hero-schatten,
html:not(.js) .hero-produkt,
html:not(.js) .hero-begleiter,
html:not(.js) .duft .insel,
html:not(.js) .akt-bild,
html:not(.js) .akt-text,
html:not(.js) .detail-bild{opacity:1 !important;translate:0 0 !important;transform:none !important;filter:none !important}
html:not(.js) .hero-zeile > span,
html:not(.js) .kapitel-zeile span{transform:none !important}
html:not(.js) .showcase-halter{height:auto !important}
html:not(.js) .showcase-buehne{position:static;height:auto;overflow:visible;padding-top:4rem}
html:not(.js) .showcase .kapitel-zeile{position:static;margin-bottom:1rem}
html:not(.js) .akt{position:static;pointer-events:auto;padding:1.5rem 0}
html:not(.js) .kategorien-halter{height:auto !important}
html:not(.js) .kategorien-buehne{position:static;height:auto;overflow:visible;display:block}
html:not(.js) .kategorien-spur{flex-direction:column;align-items:flex-start;transform:none !important;
  padding:clamp(3.5rem,9vh,5rem) var(--rand);gap:3rem}
html:not(.js) .spur-kopf,html:not(.js) .kategorie{width:100%;max-width:34rem}

/* ==========================================================================
   Kampagnenbilder
   --------------------------------------------------------------------------
   Sieben offizielle Bilder sind Szenen, keine Freisteller: Beauty Boxes und
   Sets mit Requisiten, Models und GRATIS-Störern. Auf einer weissen Tafel mit
   mix-blend-mode multiply würden sie dunkel und schmutzig — der Blend dunkelt
   jeden farbigen Grund ab. Sie bekommen deshalb die Fläche ganz, ohne Blend,
   ohne Polster: im Raster als Kampagnenkachel, auf der Produktseite als Szene.
   Erkannt und gepflegt in werkzeuge/bilder-korrigieren.py (KAMPAGNE).
   ========================================================================== */
.karte-kampagne .karte-bild{border-color:transparent;background:var(--creme)}
.karte-kampagne .karte-bild img{padding:0;object-fit:cover;mix-blend-mode:normal}
.karte-kampagne .karte-marke{color:var(--tinte)}
@media (hover:hover) and (pointer:fine){
  .karte-kampagne .karte-link:hover .karte-bild img{transform:scale(1.06)}
}

.detail-buehne.buehne-kampagne{background:var(--creme);border:1px solid var(--linie);padding:0;overflow:hidden}
.buehne-kampagne .detail-licht,.buehne-kampagne .detail-schatten{display:none}
.buehne-kampagne .detail-bild{width:100%;mix-blend-mode:normal}
.buehne-kampagne .detail-bild img{width:100%;height:auto;display:block}
.detail.an .buehne-kampagne .detail-bild .glanz::after{animation:lichtstreif 14s ease-in-out 2.4s infinite}
.buehne-kampagne .glanz{mix-blend-mode:overlay}