/* UR-SACHEN Shop - Designsystem "Deckelstapel"
   ------------------------------------------------------------------
   Gewaehlte Richtung: Entwurf B. Produktbilder sind Kreise, wie Tiegel und
   Deckel. Damit der Kreis nichts wegschneidet, wird nicht der Rahmen
   angepasst, sondern der Ausschnitt: Fotos werden mit Rand geschnitten, in
   den Ecken liegt nur Hintergrund. Die drei gerenderten Duftbilder sind auf
   Seite mal Wurzel2 aufgefuellt, weil ihr Motiv bis an den Rand geht; erst
   bei dieser Kante liegt das ganze Quadrat im einbeschriebenen Kreis.
   Bedienelemente sind Kapseln. Tiefe entsteht aus Ueberlagerung, nicht aus
   Rahmen.
   Nicht enthalten: Farbverlaufsblasen, Glasplatten als Deko, Neonglut,
   schwebende Kugeln, Dauerschleifen.

   BILDBUDGET (siehe werkzeuge/bilder.sh und DESIGN.md)
   Kein Bild wird groesser angezeigt als sein nativer Ausschnitt.
   tiegel-stapel 760 | tiegel-gruppe 560 | tiegel-nah 470
   marktstand 960x600 | marktstand-hoch 700x900 | hoerner 820
   tiegel-render 320 | tau-knoten 300 | tau-frau 290 | tau-mann 232
   duft-* 172 (mehr gibt die Druckvorlage nicht her) */

@font-face{font-family:Archivo;src:url(/static/fonts/archivo-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-600-latin.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:ArchivoBlack;src:url(/static/fonts/archivo-black.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  /* Hell ist der Standard. Dunkel steht als zweite Fassung bereit und wird
     ueber data-thema="dunkel" am Wurzelelement gesetzt. Beide Fassungen
     tragen dieselbe Komposition; nur die Rollen der Flaechen tauschen. */
  --grund:#f2f0e9;
  --flaeche:#ffffff;
  --flaeche-2:#f7f5ee;
  --tief:#17170f;          /* Anker: Fusszeile, Hinweisband, Bezahlseite */
  --auf-tief:#f0eee4;      /* Schrift auf dem Anker */
  --bein:#1a1a12;          /* Haupttext */
  --bein-2:#3d3b33;        /* Fliesstext zweiter Ordnung */
  --asche:#5e5b52;         /* Gedaempfter Text, Dienstlabels */
  --signal:#16452c;           /* Flaechen: weisse Schrift darauf erreicht 11:1 */
  --signal-hell:#16452c;      /* Schrift auf hellem Grund, erreicht 9,9:1 */
  --signal-tief:#0f3320;      /* nur die einfahrende Fuellung */
  --signal-flaeche:rgba(22,69,44,.1);
  --signal-auf-tief:#8fcaa8;  /* Gruen auf dem dunklen Anker, in beiden Fassungen gleich */
  --linie:#ded9cc;
  --feld:#ffffff;          /* Eingaben */
  --feld-rand:#cfcabb;
  --platzhalter:#7e7a70;
  --warn-flaeche:#fbe9e5;
  --warn-schrift:#8f2114;
  --gut-flaeche:#e4efe7;
  --gut-schrift:#14522f;
  --aus-flaeche:#e0dccf;   /* deaktivierter Knopf */
  --aus-schrift:#5a574e;
  --rollbalken:#c2bcab;
  --schleier:rgba(23,23,15,.4);
  --glas:rgba(242,240,233,.86);
  --glas-fest:rgba(242,240,233,.96);

  --heb:0 1px 2px rgba(26,26,18,.05),0 12px 34px rgba(26,26,18,.09);
  --heb-stark:0 2px 8px rgba(26,26,18,.08),0 28px 66px rgba(26,26,18,.16);

  --r-klein:14px;
  --r-mittel:24px;
  --r-gross:40px;
  --r-kapsel:999px;

  /* Eine Abstandsleiter, keine Einzelwerte. Gruppen eng, Gruppen zueinander
     weit; ueber einer Ueberschrift mehr Luft als darunter. */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem; --s6:3.25rem;
  --s-abschnitt:clamp(3rem,6.5vw,5.5rem);
  --rand:clamp(1rem,4vw,3.25rem);
  --e:cubic-bezier(.23,1,.32,1);
  --e-weich:cubic-bezier(.32,.72,0,1);
  --kopf-h:66px;
}

[data-thema="dunkel"]{
  --grund:#17170f;
  --flaeche:#20201a;
  --flaeche-2:#26261e;
  --tief:#0e0e09;
  --auf-tief:#f0eee4;
  --bein:#f0eee4;
  --bein-2:#d3d0c6;
  --asche:#a8a49a;
  --signal:#1e6440;         /* auf dunklem Grund braucht die Flaeche eine hellere Stufe */
  --signal-hell:#8fcaa8;    /* Schrift auf dunklem Grund, erreicht 9,4:1 */
  --signal-tief:#154a2f;
  --signal-flaeche:rgba(30,100,64,.26);
  --linie:#2d2d24;
  --feld:#20201a;
  --feld-rand:#2d2d24;
  --platzhalter:#7d7a70;
  --warn-flaeche:#3a2320;
  --warn-schrift:#f7d9d3;
  --gut-flaeche:#1e3324;
  --gut-schrift:#cfe8d8;
  --aus-flaeche:#3a3a30;
  --aus-schrift:#d6d2c7;
  --rollbalken:#3d3d33;
  --schleier:rgba(0,0,0,.55);
  --glas:rgba(23,23,15,.84);
  --glas-fest:rgba(32,32,26,.95);
  --heb:0 2px 6px rgba(0,0,0,.28),0 22px 54px rgba(0,0,0,.38);
  --heb-stark:0 4px 12px rgba(0,0,0,.34),0 34px 78px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--grund);color:var(--bein);font:400 17px/1.55 Archivo,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:var(--r-klein)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--grund)}
::-webkit-scrollbar-thumb{background:var(--rollbalken);border:3px solid var(--grund);border-radius:var(--r-kapsel)}
html{scrollbar-color:var(--rollbalken) var(--grund);scrollbar-width:thin}

.bahn{width:100%;max-width:1500px;margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:780px}
.springen{position:absolute;left:-9999px;top:0;background:var(--tief);color:var(--auf-tief);
  padding:.7rem 1.1rem;border-radius:var(--r-kapsel);z-index:200}
.springen:focus{left:.5rem;top:.5rem}

.gross{font-family:ArchivoBlack,Archivo,sans-serif;font-weight:400;letter-spacing:-.035em;line-height:.9;
  text-wrap:balance}
h1.gross{font-size:clamp(2.7rem,6.4vw,5.4rem)}
h2.gross{font-size:clamp(1.9rem,3.6vw,3rem)}
h3.gross{font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.025em}
.dienst{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--asche)}
.lead{font-size:clamp(1.02rem,1.15vw,1.15rem);color:var(--bein-2);max-width:38ch}
.klein{font-size:.9rem;color:var(--asche)}

/* ---------------------------------------------------- Auftritt-Motion */
.motion [data-auf]:not(.da){opacity:0;transform:translateY(18px);filter:blur(6px)}
.motion [data-auf]{transition:opacity .6s var(--e-weich),transform .6s var(--e-weich),
  filter .6s var(--e-weich);transition-delay:var(--verzug,0ms)}
.zeilen{display:block}
.zeilen > span{display:block;overflow:hidden;padding-bottom:.06em}
.zeilen i{display:block;font-style:normal}
.motion .zeilen i{transform:translateY(105%)}
.motion.geladen .zeilen i{transform:none;transition:transform .85s var(--e-weich);transition-delay:var(--verzug,0ms)}

/* ------------------------------------------------------------- Kopf */
.kopf{position:sticky;top:0;z-index:60;background:var(--glas);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--e)}
.kopf.gescrollt{border-bottom-color:var(--linie)}
@supports not (backdrop-filter:blur(1px)){.kopf{background:var(--grund)}}
.kopf-innen{display:flex;align-items:center;gap:1.3rem;height:var(--kopf-h)}
.marke{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.marke img{width:36px;height:36px;object-fit:contain;transition:transform .4s var(--e)}
.marke:hover img{transform:rotate(-8deg) scale(1.06)}
.marke b{font:400 18px/1 ArchivoBlack,sans-serif;display:block;white-space:nowrap}
.marke span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--asche)}
.haupt{display:flex;gap:.3rem}
.haupt a{font-size:14px;font-weight:500;text-decoration:none;padding:.5rem .9rem;border-radius:var(--r-kapsel);
  background:transparent;transition:color .22s var(--e),background-color .22s var(--e)}
.haupt a:hover,.haupt a:focus-visible{background:var(--bein);color:var(--grund)}
.haupt a[aria-current=page]{color:var(--signal-hell);font-weight:600;background:var(--signal-flaeche)}
.haupt a[aria-current=page]:hover{background:var(--signal-flaeche);color:var(--signal-hell)}

.korbknopf{display:inline-flex;align-items:center;gap:.55rem;font:600 13.5px/1 Archivo,sans-serif;
  color:var(--bein);cursor:pointer;border:1px solid var(--bein);border-radius:var(--r-kapsel);padding:.62rem 1rem;
  background-color:transparent;background-image:linear-gradient(var(--bein),var(--bein));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:color .24s var(--e),background-size .3s var(--e),transform .12s var(--e)}
.korbknopf:hover,.korbknopf:focus-visible{color:var(--grund);background-size:100% 100%}
.korbknopf:active{transform:scale(.97)}
.korbknopf .zahl{min-width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-kapsel);
  background:var(--signal);color:#fff;font-size:11.5px;font-weight:700;padding-inline:6px}
@keyframes korbpuls{0%{transform:scale(1)}38%{transform:scale(1.4)}100%{transform:scale(1)}}
.korbknopf .zahl.pulst{animation:korbpuls .46s var(--e)}

.thema{display:inline-grid;place-items:center;width:42px;height:42px;cursor:pointer;
  border:1px solid var(--linie);border-radius:var(--r-kapsel);background:transparent;color:var(--bein);
  transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e)}
.thema:hover{background:var(--bein);color:var(--grund);border-color:var(--bein)}
.thema:active{transform:scale(.95)}
.thema svg{width:20px;height:20px;grid-area:1/1;transition:opacity .25s var(--e),transform .35s var(--e)}
.thema .mond{opacity:0;transform:rotate(-40deg) scale(.7)}
[data-thema="dunkel"] .thema .sonne{opacity:0;transform:rotate(40deg) scale(.7)}
[data-thema="dunkel"] .thema .mond{opacity:1;transform:none}

.burger{display:none;background:transparent;border:1px solid var(--bein);border-radius:var(--r-kapsel);
  width:42px;height:42px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--bein);border-radius:2px;
  transition:transform .28s var(--e),opacity .18s var(--e)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobilnav{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--e-weich);background:var(--grund)}
.mobilnav > div{overflow:hidden}
.mobilnav.offen{grid-template-rows:1fr}
.mobilnav a{display:block;margin:.4rem var(--rand);padding:.9rem 1.2rem;border-radius:var(--r-mittel);
  background:var(--flaeche);text-decoration:none;font-weight:500}

/* ---------------------------------------------------------- Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:600 15px/1 Archivo,sans-serif;text-decoration:none;cursor:pointer;border:1px solid var(--signal);
  color:#fff;padding:1rem 1.7rem;border-radius:var(--r-kapsel);
  background-color:var(--signal);background-image:linear-gradient(var(--signal-tief),var(--signal-tief));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:transform .14s var(--e),box-shadow .24s var(--e),background-size .32s var(--e),
             color .24s var(--e),background-color .24s var(--e)}
.knopf:hover,.knopf:focus-visible{background-size:100% 100%;transform:translateY(-1px)}
.knopf:active{transform:scale(.97)}
.knopf[disabled]{background-color:var(--aus-flaeche);background-image:none;border-color:var(--aus-flaeche);color:var(--aus-schrift);
  cursor:not-allowed;box-shadow:none}
.knopf.linie{background-color:transparent;background-image:linear-gradient(var(--bein),var(--bein));
  color:var(--bein);border-color:var(--bein)}
.knopf.linie:hover,.knopf.linie:focus-visible{color:var(--grund);box-shadow:none}
.knopf.breit{width:100%}
.textlink{position:relative;font-weight:500;text-decoration:none;padding-bottom:3px}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
  transform-origin:left;transition:transform .3s var(--e)}
.textlink:hover{color:var(--signal-hell)}
.textlink:hover::after{transform:scaleX(0);transform-origin:right}

/* ------------------------------------------------------------- HERO
   Der Faecher: drei Deckel liegen schraeg uebereinander und laufen
   ueber den rechten Rand. Beim Zeigen hebt sich der angesprochene an. */
.hero{padding-block:var(--s5) var(--s6)}
.hero-gitter{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.hero-wort{display:flex;flex-direction:column;gap:var(--s4)}
.hero h1{max-width:9ch}
.hero h1 em{font-style:normal;color:var(--signal)}
.tat{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.preisstart{display:flex;gap:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linie);flex-wrap:wrap}
.preisstart div{display:flex;flex-direction:column;gap:.2rem}
.preisstart b{font:400 1.45rem/1 ArchivoBlack,sans-serif;letter-spacing:-.03em}

.faecher{position:relative;height:clamp(380px,50vw,600px)}
.deckel{position:absolute;border-radius:50%;overflow:hidden;box-shadow:var(--heb);background:var(--flaeche);
  transition:transform .5s var(--e-weich),box-shadow .5s var(--e-weich)}
.deckel img{width:100%;height:100%;object-fit:cover}
.deckel:hover{transform:translateY(-10px);box-shadow:var(--heb-stark);z-index:5}
/* Groessen bleiben unter der nativen Aufloesung der jeweiligen Quelle */
/* Bei Kreisen traegt eine Drehung nichts bei, sie verschiebt nur den Rahmen.
   Die drei Teller ueberlagern sich stattdessen versetzt, das erzeugt die
   Tiefe. Die Prozentwerte halten sie bei jeder Breite im Rahmen. */
.d1{width:min(50%,352px);aspect-ratio:1;left:0;top:4%;z-index:3}
.d2{width:min(54%,380px);aspect-ratio:1;left:23%;top:26%;z-index:2}
.d3{width:min(47%,330px);aspect-ratio:1;right:0;top:0;z-index:1}

/* --------------------------------------------------------- Abschnitt */
/* Rhythmus: der erste Abschnitt nach der ersten Ansicht rueckt naeher heran,
   der abgesetzte Block bekommt mehr Luft als die durchlaufenden. */
.abschnitt{padding-block:var(--s-abschnitt)}
.hero + .abschnitt{padding-top:var(--s5)}
/* Abgesetzter Abschnitt: in der hellen Fassung eine weisse Flaeche im
   Knochengrund, in der dunklen die helle Insel im dunklen Grund. */
.abschnitt.hell{background:var(--flaeche);border-radius:var(--r-gross);
  margin-inline:var(--rand);padding:var(--s6) clamp(1.4rem,3vw,3rem)}
.abschnitt.hell > .bahn{padding-inline:0}
[data-thema="dunkel"] .abschnitt.hell{background:var(--auf-tief);color:#17170f}
[data-thema="dunkel"] .abschnitt.hell .klein,
[data-thema="dunkel"] .abschnitt.hell .dienst{color:#5c594f}
[data-thema="dunkel"] .abschnitt.hell p{color:#3c3a32}
/* Abschnittskopf gestapelt. Ein grosser Titel links und ein kleiner
   Erklaersatz rechts oben ist der haeufigste Baukasten-Griff; hier steht der
   Satz unter der Ueberschrift, wo man ihn auch liest. */
.kopfzeile{margin-bottom:var(--s5)}
.kopfzeile h2{max-width:20ch}
.kopfzeile > p{margin-top:var(--s3);max-width:56ch}
.kopfzeile.mit-tat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);flex-wrap:wrap}
.kopfzeile.mit-tat h2{margin-bottom:0}

/* Duftreihe: liegend, man blaettert durch */
/* Ab drei nebeneinander passenden Kacheln ist die Reihe ein Raster ueber die
   volle Bahn: eine liegende Rolle mit totem Raum rechts waere kein Angebot,
   sondern ein Rest. Erst wenn es zu eng wird, wird daraus wieder eine Rolle
   zum Wischen. */
.reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
  padding-block:var(--s2) var(--s3)}
.reihe .duft{flex:initial;width:auto}
@media (max-width:1100px){
  .reihe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--rand);padding:var(--s2) var(--rand) var(--s5);
    margin-inline:calc(-1*var(--rand));
    scrollbar-width:thin;scrollbar-color:var(--signal) var(--flaeche)}
  .reihe .duft{flex:0 0 min(360px,80vw)}
}
.reihe::-webkit-scrollbar{height:10px}
.reihe::-webkit-scrollbar-track{background:var(--flaeche);border-radius:var(--r-kapsel)}
.reihe::-webkit-scrollbar-thumb{background:var(--signal);border-radius:var(--r-kapsel)}
/* Die Duftkachel ist mittig gesetzt: das runde Bild gibt die Achse vor,
   Ueberschrift, Noten, Text, Preise und Knopf folgen ihr. */
.duft{flex:0 0 min(360px,80vw);scroll-snap-align:start;background:var(--flaeche);border-radius:var(--r-gross);
  padding:var(--s4) var(--s4) var(--s5);display:flex;flex-direction:column;text-align:center;
  transition:background .3s var(--e),transform .3s var(--e)}
.duft:hover,.duft:focus-within{background:var(--flaeche-2);transform:translateY(-5px)}
.duft figure{width:216px;height:216px;border-radius:50%;overflow:hidden;margin:0 auto var(--s4);
  background:var(--flaeche-2)}
.duft img{width:100%;height:100%;object-fit:cover}
.duft h3{margin-bottom:var(--s1)}
.duft .noten{font-size:13px;font-weight:600;color:var(--signal-hell);margin-bottom:var(--s2)}
.duft p{font-size:.94rem;color:var(--bein-2);margin:0 auto var(--s4);max-width:34ch}
.duft .fuss{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  align-items:end;justify-items:center;border-top:1px solid var(--linie);padding-top:var(--s3)}
.duft .fuss .knopf{grid-column:1/-1;width:100%}
.duft .fuss b{font:400 1.1rem/1 ArchivoBlack,sans-serif;letter-spacing:-.02em}
.duft .fuss .klein{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}

/* Argumente */
/* Vier Belege, keine vier gleichen Kacheln. Getrennt wird durch eine Linie
   und durch Luft, nicht durch einen Kasten. */
.spalten{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s6)}
.spalten article{border-top:1px solid var(--linie);padding:var(--s4) 0 var(--s5)}
.spalten h3{margin-bottom:var(--s2)}
.spalten p{font-size:.96rem;color:var(--bein-2);max-width:52ch}
[data-thema="dunkel"] .abschnitt.hell .spalten article{border-top-color:#cdc9ba}
[data-thema="dunkel"] .abschnitt.hell .spalten p{color:#3c3a32}

/* Bildband: auf die native Breite der Quelle begrenzt, damit es scharf bleibt */
/* Bildband. Liegende Motive laufen ueber die volle Bahn, hochkante stehen
   neben ihrem Text: ein Hochformat ueber die volle Breite waere entweder
   riesig oder beschnitten. Beschnitten ist keine Option. */
.band{width:min(960px,calc(100% - 2*var(--rand)));margin-inline:auto;
  margin-block:var(--s-abschnitt) 0}
.band img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:var(--r-gross)}
.band figcaption{padding:var(--s4) 0 0;max-width:52ch}
.band figcaption h3{margin-bottom:var(--s2)}
.band figcaption p{font-size:.94rem;color:var(--bein-2)}

.band.hoch{width:min(1100px,calc(100% - 2*var(--rand)));display:grid;
  grid-template-columns:minmax(0,420px) 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.band.hoch img{aspect-ratio:auto;object-fit:contain}
.band.hoch figcaption{padding:0;max-width:44ch}
.band.hoch figcaption h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.band.hoch figcaption p{font-size:1rem}

/* ------------------------------------------------------ Produktseite */
.pdp{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.4rem,3vw,3rem);
  padding:clamp(1rem,2.5vw,2rem) var(--rand) clamp(2rem,4vw,3.4rem)}
.pdp-bild{position:sticky;top:calc(var(--kopf-h) + var(--s3));align-self:start;
  display:grid;place-items:center;background:var(--flaeche);border-radius:var(--r-gross);
  padding:var(--s6)}
.tiegel{position:relative;width:min(380px,84%);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:var(--heb-stark)}
.tiegel img{width:100%;height:100%;object-fit:cover}
.pdp-kauf{display:flex;flex-direction:column;gap:var(--s4);padding-block:var(--s3)}
.pdp-kauf h1{font-size:clamp(2rem,3.2vw,2.9rem)}

/* Duftwahl auf der Produktseite: die Bilder bleiben bei 172 px, weil die
   Druckvorlage nicht mehr hergibt. Ausgewaehlt wird ueber Ring und Farbe. */
.duftwahl{display:flex;gap:.9rem;flex-wrap:wrap}
.duftwahl label{position:relative;cursor:pointer;display:grid;justify-items:center;width:112px}
.duftwahl input{position:absolute;opacity:0;width:0;height:0}
.duftwahl .rund{display:block;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--flaeche-2);
  outline:3px solid transparent;outline-offset:3px;
  transition:outline-color .28s var(--e),transform .28s var(--e)}
.duftwahl .rund img{width:100%;height:100%;object-fit:cover}
.duftwahl label:hover .rund{transform:translateY(-4px)}
.duftwahl input:checked + .rund{outline-color:var(--signal)}
.duftwahl input:focus-visible + .rund{outline-color:var(--signal);outline-style:dashed}
.duftwahl .name{display:block;margin-top:.6rem;font-size:13px;font-weight:600;text-align:center;line-height:1.2}
.duftwahl input:checked ~ .name{color:var(--signal-hell)}

.wahlblock{border:0}
.wahlblock legend{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--asche);
  margin-bottom:.7rem}
.wahlreihe{display:grid;gap:.6rem}
.wahlreihe.zwei{grid-template-columns:1fr 1fr}
.wahl{position:relative;display:block;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl .feld{display:flex;align-items:baseline;gap:.6rem;background:var(--flaeche);border:1.5px solid transparent;
  border-radius:var(--r-mittel);padding:.85rem 1.1rem;
  transition:border-color .2s var(--e),transform .2s var(--e),background .2s var(--e)}
.wahl .feld b{font-weight:600;font-size:1rem}
.wahl .feld span{font-size:12.5px;color:var(--asche);margin-left:auto;text-align:right}
.wahl:hover .feld{transform:translateY(-2px);background:var(--flaeche-2)}
.wahl input:checked + .feld{border-color:var(--signal-hell);background:var(--signal-flaeche)}
.wahl input:focus-visible + .feld{outline:2px solid var(--signal);outline-offset:2px}

.preiszeile{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  background:var(--flaeche);border-radius:var(--r-mittel);padding:1.1rem 1.3rem}
.preiszeile b{font:400 2.1rem/1 ArchivoBlack,sans-serif;letter-spacing:-.04em;
  transition:filter .18s var(--e),opacity .18s var(--e)}
.preiszeile b.rechnet{filter:blur(5px);opacity:.55}

.mengenwahl{display:inline-flex;align-items:center;background:var(--flaeche);border-radius:var(--r-kapsel);padding:4px}
.mengenwahl button{width:40px;height:40px;background:transparent;border:0;border-radius:50%;cursor:pointer;
  font-size:19px;font-family:inherit;color:inherit;transition:background .16s var(--e),transform .12s var(--e)}
.mengenwahl button:hover{background:var(--flaeche-2)}
.mengenwahl button:active{transform:scale(.9)}
.mengenwahl output{width:44px;display:grid;place-items:center;font-weight:600}

.merkzeile{display:grid;gap:.5rem;list-style:none}
.merkzeile li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.93rem;color:var(--bein-2)}
.merkzeile .haken{width:19px;height:19px;margin-top:.18rem;border-radius:50%;background:var(--signal-flaeche);
  flex:0 0 auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M5.4 9.8l2.7 2.7 5.5-6' fill='none' stroke='%2316452c' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
[data-thema="dunkel"] .abschnitt.hell .merkzeile li{color:#3c3a32}
/* Auf dunklem Grund braucht der Haken die helle Gruenstufe */
[data-thema="dunkel"] .merkzeile .haken{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M5.4 9.8l2.7 2.7 5.5-6' fill='none' stroke='%238fcaa8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-thema="dunkel"] .abschnitt.hell .merkzeile .haken{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M5.4 9.8l2.7 2.7 5.5-6' fill='none' stroke='%2316452c' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Tabellen */
.tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;
  background:var(--flaeche);border-radius:var(--r-mittel);overflow:hidden}
.tabelle th,.tabelle td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tr:last-child th,.tabelle tr:last-child td{border-bottom:0}
.tabelle thead th{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--asche);font-weight:600;
  background:var(--flaeche-2)}
.tabelle th[scope=row]{width:34%;font-weight:600}
.tabelle tbody tr{transition:background .18s var(--e)}
.tabelle tbody tr:hover{background:var(--flaeche-2)}
[data-thema="dunkel"] .abschnitt.hell .tabelle{background:#e5e2d6;color:#241f19}
[data-thema="dunkel"] .abschnitt.hell .tabelle th,[data-thema="dunkel"] .abschnitt.hell .tabelle td{border-bottom-color:#cdc9ba}
[data-thema="dunkel"] .abschnitt.hell .tabelle thead th{background:#d8d4c5;color:#5c594f}
[data-thema="dunkel"] .abschnitt.hell .tabelle tbody tr:hover{background:#dedac9}

/* --------------------------------------------------------- Schublade */
.schleier{position:fixed;inset:0;background:var(--schleier);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s var(--e);z-index:80}
.schleier.auf{opacity:1;pointer-events:auto}
.schublade{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--flaeche);
  border-radius:var(--r-gross) 0 0 var(--r-gross);z-index:90;display:flex;flex-direction:column;
  box-shadow:var(--heb-stark);
  transform:translateX(100%);transition:transform .42s var(--e-weich),visibility .42s;visibility:hidden}
.schublade.auf{transform:none;visibility:visible}
.schublade-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.3rem;border-bottom:1px solid var(--linie)}
.schublade-kopf h2{font:400 1.2rem/1 ArchivoBlack,sans-serif;letter-spacing:-.02em}
.zu{width:40px;height:40px;border:0;border-radius:50%;background:var(--flaeche-2);color:inherit;cursor:pointer;
  font-size:19px;line-height:1;transition:transform .24s var(--e)}
.zu:hover{transform:rotate(90deg)}
.schublade-liste{flex:1;overflow-y:auto;padding:0 1.3rem}
.schublade-fuss{border-top:1px solid var(--linie);padding:1.2rem 1.3rem;display:grid;gap:.85rem}
.summenzeile{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.summenzeile b{font:400 1.5rem/1 ArchivoBlack,sans-serif;letter-spacing:-.03em}

.posten{display:grid;grid-template-columns:78px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
.posten:last-child{border-bottom:0}
.posten img{width:78px;height:78px;object-fit:cover;border-radius:50%;background:var(--flaeche-2)}
.posten .kopf-z{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline}
.posten b{font-weight:600}
.posten .meta{font-size:.87rem;color:var(--asche);margin-bottom:.55rem}
.posten .steuerung{display:flex;align-items:center;gap:.8rem}
.posten .mengenwahl{background:var(--flaeche-2)}
.posten .mengenwahl button{width:32px;height:32px;font-size:16px}
.posten .mengenwahl button:hover{background:var(--grund)}
.posten .mengenwahl output{width:34px;font-size:.9rem}
@keyframes postenrein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.posten.neu{animation:postenrein .42s var(--e-weich)}
.entfernen{background:transparent;border:0;cursor:pointer;font:500 12.5px/1 Archivo,sans-serif;color:var(--asche);
  text-decoration:underline;text-underline-offset:3px;padding:.3rem 0;transition:color .16s var(--e)}
.entfernen:hover{color:var(--signal-hell)}
.leerstand{padding:2.4rem 0;display:grid;gap:1rem;justify-items:start}
.leerstand p{color:var(--asche)}

.flugpunkt{position:fixed;z-index:120;width:16px;height:16px;border-radius:50%;background:var(--signal);
  pointer-events:none}

.kaufleiste{position:fixed;left:.7rem;right:.7rem;bottom:.7rem;z-index:70;display:none;
  align-items:center;gap:.8rem;background:var(--glas-fest);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-radius:var(--r-gross);padding:.7rem .8rem .7rem 1.2rem;
  box-shadow:var(--heb-stark);transform:translateY(160%);transition:transform .42s var(--e-weich)}
.kaufleiste.da{transform:none}
.kaufleiste .info{display:grid;line-height:1.25}
.kaufleiste .info b{font:400 1.15rem/1 ArchivoBlack,sans-serif;letter-spacing:-.02em}
.kaufleiste .knopf{padding:.85rem 1.3rem;margin-left:auto}

/* --------------------------------------------------------- Formular */
.formular{display:grid;gap:1.15rem}
.feldgruppe{display:grid;gap:.4rem}
.feldgruppe label{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--asche)}
.feldgruppe input,.feldgruppe textarea,.feldgruppe select{
  font:400 16px/1.4 Archivo,sans-serif;color:var(--bein);background:var(--feld);
  border:1.5px solid var(--feld-rand);border-radius:var(--r-klein);padding:.85rem .95rem;width:100%;
  transition:border-color .18s var(--e),box-shadow .18s var(--e)}
.feldgruppe textarea{border-radius:var(--r-mittel);resize:vertical}
.feldgruppe input::placeholder,.feldgruppe textarea::placeholder{color:var(--platzhalter)}
.feldgruppe input:focus,.feldgruppe textarea:focus{border-color:var(--signal);
  outline:2px solid var(--signal);outline-offset:2px}
.feldgruppe .hinweis{font-size:12.5px;color:var(--asche)}
.fehler{display:block;font-size:12.5px;color:var(--warn-schrift);font-weight:500}
@keyframes ruettel{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.feldgruppe.falsch input{border-color:var(--warn-schrift);outline:2px solid var(--warn-schrift);
  outline-offset:2px;animation:ruettel .3s var(--e)}
.reihe2{display:grid;grid-template-columns:1fr 2fr;gap:1.15rem}
.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.93rem}
.zustimmung input{width:21px;height:21px;accent-color:var(--signal);margin-top:.15rem}

.meldung{background:var(--flaeche);border-radius:var(--r-mittel);padding:1.1rem 1.25rem;display:grid;gap:.4rem}
.meldung.warn{background:var(--warn-flaeche);color:var(--warn-schrift)}
.meldung.gut{background:var(--gut-flaeche);color:var(--gut-schrift)}
.meldung b{font-weight:600}
.hinweisband{background:var(--tief);color:#c9c6bc;font-size:12.5px}
.hinweisband .bahn{display:flex;gap:1.2rem;flex-wrap:wrap;padding-block:.6rem;justify-content:center;text-align:center}
.hinweisband a{color:var(--auf-tief)}
.hinweisband b{color:var(--signal-auf-tief)}

.kasse-gitter{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.4rem,3vw,2.6rem);
  padding:0 var(--rand) clamp(2rem,4vw,3.4rem)}
.kasse-summe{background:var(--flaeche);border-radius:var(--r-gross);padding:clamp(1.4rem,2.5vw,2rem);align-self:start}
.kasse-summe .klebe{position:sticky;top:calc(var(--kopf-h) + 1.2rem);display:grid;gap:1rem}
.schritt{font:400 1.1rem/1 ArchivoBlack,sans-serif;letter-spacing:-.02em;margin-bottom:1rem}
.wegwahl{display:grid;gap:.6rem}

.bezahlen{min-height:100svh;display:grid;place-items:center;padding:2rem var(--rand);background:var(--grund)}
@keyframes karterein{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.bezahlkarte{width:min(520px,100%);border-radius:var(--r-gross);background:var(--flaeche);overflow:hidden;
  box-shadow:var(--heb-stark);animation:karterein .5s var(--e-weich)}
.bezahlkarte .oben{padding:1.2rem 1.5rem;border-bottom:1px solid var(--linie);display:flex;
  justify-content:space-between;align-items:center;gap:1rem}
.bezahlkarte .betrag{padding:1.7rem 1.5rem;border-bottom:1px solid var(--linie);display:grid;gap:.35rem}
.bezahlkarte .betrag b{font:400 2.4rem/1 ArchivoBlack,sans-serif;letter-spacing:-.04em}
.bezahlkarte .tasten{padding:1.5rem;display:grid;gap:.7rem}
.demo-plakette{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border-radius:var(--r-kapsel);background:var(--warn-flaeche);color:var(--warn-schrift);padding:.35rem .75rem}

.seitenfuss{background:var(--tief);color:var(--auf-tief);padding-block:clamp(2.2rem,4vw,3.4rem);
  border-radius:var(--r-gross) var(--r-gross) 0 0;margin-top:clamp(2rem,4vw,3.4rem)}
.seitenfuss-gitter{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.seitenfuss h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a8a49a;
  margin-bottom:.9rem}
.seitenfuss ul{list-style:none;display:grid;gap:.5rem}
.seitenfuss a{text-decoration:none;position:relative}
.seitenfuss a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e)}
.seitenfuss a:hover::after{transform:scaleX(1)}
.seitenfuss p{color:#c9c6bc;font-size:.95rem;max-width:34ch}
.seitenfuss .rest{margin-top:2rem;padding-top:1rem;border-top:1px solid #2d2d24;display:flex;gap:1.4rem;
  flex-wrap:wrap;font-size:12px;color:#a8a49a}

.recht{padding-block:clamp(2rem,4vw,3.4rem)}
.recht h1{margin-bottom:1.4rem}
.recht h2{font:400 1.25rem/1.2 ArchivoBlack,sans-serif;letter-spacing:-.025em;margin:var(--s5) 0 var(--s2)}
.recht p,.recht li{max-width:72ch;margin-bottom:.7rem;color:var(--bein-2)}
.recht ul,.recht ol{margin-left:1.2rem;margin-bottom:1rem}
.luecke{display:inline-block;border-radius:var(--r-kapsel);background:var(--warn-flaeche);color:var(--warn-schrift);
  padding:.15rem .7rem;font-size:.92rem;font-weight:600}

@media (max-width:1040px){
  .hero-gitter{grid-template-columns:1fr}
  .faecher{height:clamp(340px,86vw,520px)}
  .pdp,.kasse-gitter{grid-template-columns:1fr}
  .pdp-bild{position:relative;top:auto;min-height:0}
  .haupt{display:none}
  .burger{display:block}
  .seitenfuss-gitter{grid-template-columns:1fr 1fr}
  .kaufleiste{display:flex}
}
@media (max-width:760px){
  .band.hoch{grid-template-columns:1fr;gap:var(--s4)}
  .band.hoch img{max-width:420px;margin-inline:auto}
  .marke span span{display:none}
  .marke img{width:32px;height:32px}
  .kopf-innen{gap:.7rem}
  .spalten{grid-template-columns:1fr}
  .reihe2{grid-template-columns:1fr}
  .seitenfuss-gitter{grid-template-columns:1fr}
  .wahlreihe.zwei{grid-template-columns:1fr}
  .abschnitt.hell{border-radius:var(--r-mittel)}

}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .duft:hover,.deckel:hover{transform:none}
  .flugpunkt{display:none}
  .zu:hover{transform:none}
}