/* Duft-Seite: jeder Sammlungsduft als Vollbild, wischbar. Dunkle Buehne wie
   der Hero der Hauptseite. Tokens wie in templates/seite.html. */
:root{
  --ink:#0B0C0F;--bone:#F4F5F7;--iris:#A79CFF;
  /* Nebentext als durchscheinendes Weiss, nicht als festes Grau: #9AA1AD
     war auf hellen Verlaeufen (Zitrisch, Blumig) dreimal zu schwach
     (Julian, 05.09.). So traegt es auf jeder Familienfarbe. */
  --ash:rgba(244,245,247,.76);--ash2:rgba(244,245,247,.58);
  --line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.07);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ziffern:'Inter',system-ui,-apple-system,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);--d-schnell:.22s;--d-mittel:.3s;--d-ruhig:.45s;
  --r-s:10px;--r:16px;--r-btn:14px;--r-pill:99px;--tr-label:.12em;
  --t-xs:11.5px;--t-sm:12.5px;--t-base:13.5px;--t-md:14.5px;--t-lg:16px;
  --top:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--bone)}
body{font-family:var(--sans);font-size:15px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
b,strong{font-weight:600}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
.mono{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;font-weight:500}
.num{font-family:var(--ziffern);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}
[inert]{pointer-events:none}

/* Uebergang von der Karte (Hauptseite) hierher und zurueck: der Name der
   aktiven Folie und ihre Buehne tragen die Namen, die dort die Karte traegt.
   Nur die aktive Folie ist nicht inert - so bleibt jeder Name einmalig. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(duftname),::view-transition-group(duftband){animation-duration:.42s;animation-timing-function:var(--e)}
.slide:not([inert]) .name{view-transition-name:duftname}
.slide:not([inert]) .buehne{view-transition-name:duftband}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Kopfleiste */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:20;display:flex;align-items:center;gap:12px;padding:0 14px 0 12px;
  background:linear-gradient(to bottom,rgba(11,12,15,.97) 70%,rgba(11,12,15,.7) 90%,transparent)}
.ident{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.ident img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.ident .wm{display:flex;flex-direction:column;line-height:1.15}
.ident .wm .mono{color:var(--ash);font-size:10.5px}
.ident .wm b{font-size:var(--t-md)}
.top .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.zurueck{color:var(--ash);font-size:var(--t-base);text-decoration:none;padding:8px 10px;border-radius:var(--r-s)}
.zurueck:hover{color:var(--bone)}
@media(max-width:480px){.zurueck span{display:none}}
.steuer{display:flex;align-items:center;gap:6px;color:var(--ash)}
.steuer .num{font-size:var(--t-base);min-width:7ch;text-align:center;color:var(--bone)}
.arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-grid;place-items:center;color:var(--bone);background:rgba(11,12,15,.4)}
.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arrow:disabled{opacity:.3;cursor:default}
@media(max-width:600px){.arrow{display:none}}
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:21;background:rgba(255,255,255,.12)}
.prog i{display:block;height:100%;width:0;background:var(--bone);transition:width var(--d-ruhig) var(--e)}

/* Deck */
#deck{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
#deck::-webkit-scrollbar{display:none}
/* Der Slide selbst scrollt nicht mehr: die Buehne fuellt ihn, und .in
   scrollt darueber. Vorher endete die Buehne nach einer Bildschirmhoehe und
   der Hintergrund brach am Scrollpunkt (Julian, 05.09.). */
.slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.slide::-webkit-scrollbar{display:none}
/* Die Buehne (Schleier, drei Farbflecken) fuellt den sichtbaren Ausschnitt
   und sperrt alles ein - vorher ragte der untere Fleck unter den Rand und
   machte den Slide scrollbar (Julian, 05.09.). Der Verlauf selbst liegt als
   Hintergrund auf dem Slide, damit er auch unter langem Inhalt weiterlaeuft:
   Ink zu 78 % ueber der Familienfarbe entspricht dem frueheren .bg mit 22 %. */
.slide{background:linear-gradient(rgba(11,12,15,.78),rgba(11,12,15,.78)),var(--verlauf)}
.buehne{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.buehne>*{position:absolute}
.veil{inset:0;background:linear-gradient(to bottom,rgba(11,12,15,.6),rgba(11,12,15,.25) 40%,rgba(11,12,15,.72))}
.blob{width:78vmin;height:78vmin;border-radius:50%;opacity:.14;transition:opacity 1.1s ease,transform 1.1s ease}
.slide.live .blob{filter:blur(70px)}
.blob.k{background:var(--r1,var(--k));top:-22vmin;left:-16vmin}
.blob.h{background:var(--r2,var(--h));top:22%;right:-26vmin}
.blob.b{background:var(--r3,var(--b));bottom:-30vmin;left:8%}
.slide.flach .blob{animation:atmen 10.5s ease-in-out infinite paused}
.slide.flach.live .blob{animation-play-state:running}
.slide.flach .blob.h{animation-delay:-3.5s}.slide.flach .blob.b{animation-delay:-7s}
@keyframes atmen{0%,100%{opacity:.16;transform:scale(.95)}50%{opacity:.42;transform:scale(1.08)}}

.in{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;max-width:none;padding:calc(var(--top) + 12px) 18px 76px;display:grid;gap:22px;align-content:start}
.in::-webkit-scrollbar{display:none}
.in>*{max-width:1180px;width:100%;margin:0 auto}
@media(min-width:900px){.in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:64px;padding-top:calc(var(--top) + 44px);padding-inline:max(48px,calc((100% - 1180px)/2 + 48px));padding-bottom:48px;align-content:center}.in>*{max-width:none;margin:0}.col-b{padding-top:14px}}

.kicker{display:flex;align-items:center;gap:12px;color:var(--ash);flex-wrap:wrap}
.kicker .brand{font-size:var(--t-md);color:var(--bone);font-weight:500;text-decoration:none}
/* Auf hellen Verlaeufen (Zitrisch, Blumig) war Ash kaum lesbar - Julian, 04.09. */
.kicker .fam{display:inline-flex;align-items:center;gap:6px;color:var(--bone);opacity:.85}
.kicker .fam i{width:8px;height:8px;border-radius:50%;background:var(--famc);box-shadow:0 0 12px var(--famc)}
.name{font-family:var(--serif);font-weight:400;font-size:clamp(38px,9vw,88px);line-height:.95;letter-spacing:-.01em;margin:10px 0 0;text-wrap:balance;overflow-wrap:anywhere}
@media(min-width:900px){.name{font-size:clamp(56px,6.2vw,104px)}}
.bew{display:flex;align-items:baseline;gap:6px;margin-top:20px}
.bew .z{font-size:clamp(32px,7vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}
.bew .von{color:var(--ash);font-size:var(--t-lg)}
.bew .ohne{color:var(--ash);font-size:var(--t-md)}
.top10{align-self:center;display:inline-flex;align-items:baseline;gap:4px;background:var(--bone);color:var(--ink);padding:4px 9px;border-radius:var(--r-pill)}
.top10 .mono{font-size:10.5px}
.top10 .num{font-size:var(--t-sm);font-weight:700}
/* Statements in Inter wie auf der Hauptseite (31.08.). Die Serife bleibt den Namen. */
.zitat{font-size:clamp(17px,4.6vw,20px);line-height:1.5;margin:24px 0 0;max-width:36ch;text-wrap:pretty;overflow-wrap:anywhere}
@media(min-width:900px){.zitat{font-size:clamp(18px,1.5vw,22px);max-width:40ch}}
.zitat.leer{color:var(--ash);font-size:var(--t-lg)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:var(--ash);font-size:var(--t-base);align-items:baseline}
.meta .lab{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;margin-right:6px}
.werk{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;border-radius:var(--r-btn);border:1px solid transparent;background:var(--bone);color:var(--ink);font-size:var(--t-base);font-weight:500}
.wbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Verlauf: vom Skript gesteuert, ziehbar, Phasen antippbar. */
.tl{border-top:1px solid var(--line);padding-top:14px}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--ash);margin-bottom:12px;gap:10px}
.tl-head .mono:last-child{color:var(--ash)}
/* Duftrichtung: alle erfassten Richtungen in Parfumos Reihenfolge, gleich
   gross - erfasst ist nur die Reihenfolge, keine Anteile (Julian, 13.09.).
   Der helle Ring haelt dunkle Farben (Rauchig, Orientalisch) auf der dunklen
   Buehne sichtbar. Fuenf passen auf 375 px nebeneinander. */
.richt{border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
.rkreise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;max-width:360px}
.rkreise li{display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;font-size:var(--t-xs);line-height:1.25;color:var(--bone);text-align:center;hyphens:auto;overflow-wrap:anywhere}
.rk{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.track{position:relative;height:28px;cursor:pointer;touch-action:none}
.track .schiene{position:absolute;left:0;right:0;top:11px;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.1)}
.track .seg{position:absolute;top:11px;height:6px;border-radius:var(--r-pill);opacity:.35;transition:opacity .6s}
.track .seg.k{left:0;width:33.3%;background:var(--k)}
.track .seg.h{left:33.3%;width:33.4%;background:var(--h)}
.track .seg.b{left:66.7%;width:33.3%;background:var(--b)}
.track .seg.an{opacity:1}
.head{position:absolute;top:14px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bone);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(11,12,15,.6),0 0 18px rgba(255,255,255,.6);pointer-events:none}
.track:active .head{transform:translate(-50%,-50%) scale(1.25)}
.phasen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
/* Schaltflaechen zentrieren ihren Inhalt vertikal - die drei Phasen sollen
   aber oben beginnen wie Spalten (Julian, 04.09.). */
.phase{min-width:0;opacity:.55;transition:opacity .5s;cursor:pointer;border:0;text-align:left;padding:6px 0 0;display:grid;align-content:start;justify-items:start;align-self:start;width:100%}
.phase.an{opacity:1}
.phase .lab{display:flex;align-items:center;gap:7px;color:var(--ash);margin-bottom:8px}
.phase.an .lab{color:var(--bone)}
.phase .lab i{width:7px;height:7px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 7px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-sm);line-height:1.2;background:rgba(11,12,15,.35);max-width:100%;overflow-wrap:anywhere}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
/* Bis 480px einspaltig: in drei schmalen Spalten liefen lange Noten unter die Nachbarspalte (Pruefer, 05.09.). */
@media(max-width:480px){.phasen{grid-template-columns:1fr;gap:6px}}
.tl.flach .chips{margin-top:2px;gap:7px}
.tl.flach .chip{font-size:var(--t-base);padding:6px 11px 6px 8px;animation:schimmer 7s ease-in-out infinite paused;animation-delay:calc(var(--i) * .38s)}
.slide.live .tl.flach .chip{animation-play-state:running}
@keyframes schimmer{0%,100%{opacity:.7;border-color:var(--line)}6%{opacity:1;border-color:rgba(255,255,255,.4)}14%{opacity:.7}}

/* Bezug */
/* Luft ueber der Linie: die Notenchips liefen sonst direkt an sie heran (Julian, 04.09.). */
.bezug{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;display:grid;gap:12px}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:11px 18px;border-radius:var(--r-btn);background:var(--bone);color:var(--ink);font-weight:600;font-size:var(--t-md);text-decoration:none}
.btn sup{font-size:.72em;line-height:0;vertical-align:.35em;font-weight:500;opacity:.8}
.btn .ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--bone);border:1px solid var(--line)}
.preiszeile{display:flex;align-items:baseline;gap:6px;color:var(--ash);font-size:var(--t-base);margin:0}
.preiszeile b{color:var(--bone);font-size:var(--t-lg)}
.preiszeile .aus{color:var(--ash2)}
.code{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.08em;border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--bone)}
.boxtipp{color:var(--ash);font-size:var(--t-sm);margin:0}
/* Auf hellen Verlaeufen war Ash hier kaum lesbar (Julian, 05.09.): Links in Bone. */
.shops{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--bone);font-size:var(--t-base);align-items:baseline}
.shops .mono{color:var(--bone);opacity:.85}
.shops a{text-decoration:none;border-bottom:1px solid var(--line);opacity:.92}
.shops a:hover{opacity:1;border-color:var(--bone)}
.shops a.aus{opacity:.62}
.shops a sup{font-size:.72em;line-height:0;vertical-align:.35em}
.hinweis{color:var(--ash);font-size:var(--t-sm);margin:0;max-width:60ch}
.vlink{color:var(--ash);font-size:var(--t-base);text-decoration:none;border-bottom:1px solid var(--line2)}

/* Aehnliche Noten aus der Sammlung: Zeilen mit Name, Marke, Bewertung und
   den gemeinsamen Noten. Fuehrt auf die andere Duft-Seite. */
.aehnlich{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;display:grid;gap:4px}
.aehnlich>.mono{color:var(--ash);margin:0 0 6px}
.ae{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:9px 10px;margin:0 -10px;border-radius:var(--r-s);text-decoration:none;color:var(--bone);transition:background var(--d-schnell)}
.ae:hover{background:rgba(255,255,255,.06)}
.ae-k{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.ae-k b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.1;letter-spacing:-.005em}
.ae-k span{color:var(--ash);font-size:var(--t-sm)}
.ae-b{font-size:var(--t-md);font-weight:600;letter-spacing:-.02em}
.ae-b small{font-weight:400;color:var(--ash);font-size:var(--t-xs);margin-left:2px}
.ae-n{grid-column:1/-1;color:var(--ash);font-size:var(--t-sm)}
.ae-n .mehr{color:var(--ash2)}
.aehnlich .hinweis{margin-top:8px}

/* Listen-Strecke: Chip in der Kopfleiste, das Kreuz fuehrt zurueck zu allen. */
.strecke{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--bone);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 10px 6px 12px;font-size:var(--t-sm);max-width:44vw}
.strecke[hidden]{display:none}
.strecke .mono{color:var(--ash)}
.strecke b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strecke .x{font-size:16px;line-height:1;color:var(--ash)}
.strecke:hover .x{color:var(--bone)}
@media(max-width:480px){.strecke .mono{display:none}}
.toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%,10px);z-index:60;background:var(--bone);color:var(--ink);padding:9px 14px;border-radius:var(--r-pill);font-size:var(--t-base);font-weight:500;opacity:0;transition:var(--d-ruhig) var(--e);pointer-events:none;max-width:90vw;text-align:center}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* Duftkarte als Dialog */
dialog{border:0;padding:0;margin:0;outline:none;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;background:var(--ink);color:var(--bone)}
dialog::backdrop{background:rgba(11,12,15,.9)}
.ov{display:flex;flex-direction:column;height:100%}
.ov-kopf{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:56px}
.ov-kopf .mono{color:var(--ash)}
.ov-kopf .titel{color:var(--bone)}
.ov-kopf .zu{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;line-height:1}
.ov-body{flex:1;min-height:0;display:grid;grid-template-rows:1fr auto;gap:12px;padding:0 16px 16px;justify-items:center}
.karte-wrap{position:relative;height:100%;max-height:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line2)}
.karte-wrap img{width:100%;height:100%;display:block;-webkit-touch-callout:default}
.karte-fuss{display:grid;gap:10px;justify-items:center;width:100%;max-width:520px}
.karte-fuss .zeile{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.karte-fuss .hinweis{text-align:center}
@media(min-width:900px){.ov-body{grid-template-columns:auto 320px;grid-template-rows:1fr;align-items:center;gap:40px;padding:0 40px 40px}.karte-fuss{justify-items:start}.karte-fuss .zeile{justify-content:flex-start}.karte-fuss .hinweis{text-align:left}}

@media(prefers-reduced-motion:reduce){.blob{transition:none;animation:none!important;opacity:.3}.tl.flach .chip{animation:none;opacity:1}.prog i{transition:none}}