/* qamer-beta3.css – Beta 3 (Inhaber 11.10.2026, Vorlage beta3-design/01 + 03). Wird zuletzt geladen.
   Kopfzeile voller (Siegel groß + Wortmarke + Unterzeile), eine ruhige Ankündigungszeile, Hero Creme/Navy mit eingebettetem
   Duftberater, schwebender Berater-Knopf ab Seitenaufruf, kein WhatsApp-Knopf. Farben durchgehend Navy / Gold / Creme;
   Duftfarben nur noch als Akzent je Produkt. */
:root{
  --q-navy:#0f1b33;
  --q-navy-2:#1b2b4d;
  --q-gold:#b8913f;          /* Linien, Flächen, große Schrift; kleine Schrift in Gold: --c-gold-ink */
  --q-creme:#f6f0e4;
  --q-creme-hell:#fbf7ee;
  --c-bg:var(--q-creme);
  --c-surface:var(--q-creme-hell);
  --c-surface-alt:#efe6d2;
  --c-ink:var(--q-navy);
  --c-primary:var(--q-navy);
  --c-primary-hover:var(--q-navy-2);
  --c-on-primary:var(--q-creme);
  --c-gold:var(--q-gold);
  --c-line:#e2d6bb;
  --c-announce-bg:var(--q-navy);
  --c-announce-fg:var(--q-creme);
}

/* ---------- Ankündigungsleiste: eine Zeile, kein Wechsel ---------- */
.announce .wrap{min-height:40px;justify-content:center}
.announce-zeile{margin:0;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;white-space:nowrap;font-family:var(--font-display);font-size:1rem;letter-spacing:.02em}
.announce-zeile>span{overflow:hidden;text-overflow:ellipsis}
.announce-zeile a{color:inherit;text-decoration:underline;text-decoration-color:var(--q-gold);text-underline-offset:3px}
.announce-stern{flex:none;width:11px;height:11px;fill:var(--q-gold)}
@media(max-width:420px){.announce-zeile{font-size:.875rem;gap:8px}.announce-stern{width:8px;height:8px}}

/* ---------- Kopfzeile ---------- */
.kopf3.site-header{background:var(--q-creme);border-bottom:1px solid var(--q-gold);box-shadow:0 1px 0 0 rgba(184,145,63,.35),0 4px 0 -2px var(--q-creme),0 4px 0 -1px rgba(184,145,63,.45)}
.kopf3.site-header.scrolled{box-shadow:0 1px 0 0 rgba(184,145,63,.35),0 6px 18px -10px rgba(15,27,51,.35)}
.kopf3 .wrap{max-width:1320px;min-height:68px;flex-wrap:nowrap;gap:var(--sp-3)}
.kopf3-marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--q-navy);flex:none;padding:6px 0}
.kopf3 .logo img,.kopf3 .logo picture img,.kopf3 .logo .logo-dark{width:50px;height:50px;border-radius:50%}
.kopf3-wort{display:grid;gap:5px;line-height:1}
.kopf3-name{font-family:var(--font-display);font-weight:600;font-size:1.9rem;letter-spacing:.07em;color:var(--q-navy)}
.kopf3-unter{display:none;font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold-ink);white-space:nowrap}
.kopf3 .nav{gap:2px;flex-wrap:nowrap}
.kopf3 .nav a{color:var(--q-navy)}
.kopf3 .nav-secondary a{font-family:var(--font-display);font-size:1.12rem;font-weight:600;padding:0 10px;border-radius:0;background:none;position:relative}
.kopf3 .nav-secondary a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:var(--q-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base,.25s) var(--ease-out,ease-out)}
.kopf3 .nav-secondary a:hover,.kopf3 .nav-secondary a[aria-current="page"]{background:none}
.kopf3 .nav-secondary a:hover::after,.kopf3 .nav-secondary a[aria-current="page"]::after{transform:none}
.kopf3 .icon-btn svg,.kopf3-korb svg{width:24px;height:24px;stroke:var(--q-navy);fill:none;stroke-width:1.5}
.kopf3-korb{position:relative;display:inline-grid!important;place-items:center;width:var(--target-min);min-height:var(--target-min);padding:0!important}
.kopf3 .kopf3-korb::before{content:none!important}
.kopf3-korb .count{position:absolute;top:2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--q-gold);color:var(--q-navy);font-size:.72rem;font-weight:700;display:grid;place-items:center;line-height:1}
.kopf3 .search-form{display:none}
.kopf3-lupe{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;stroke:var(--q-navy);fill:none;stroke-width:1.6;pointer-events:none}
@media(min-width:600px){.kopf3-unter{display:block}}
@media(min-width:768px){
  .kopf3 .wrap{min-height:96px}
  .kopf3 .logo img,.kopf3 .logo picture img,.kopf3 .logo .logo-dark{width:64px;height:64px}
  .kopf3-name{font-size:2.3rem}
  .kopf3 .nav{margin-left:auto}
}
@media(min-width:768px) and (max-width:1023px){
  .kopf3-unter{display:none}
  .kopf3 .wrap{gap:var(--sp-2)}
  .kopf3 .logo img,.kopf3 .logo picture img,.kopf3 .logo .logo-dark{width:52px;height:52px}
  .kopf3-marke{gap:8px}
  .kopf3-name{font-size:1.6rem;letter-spacing:.05em}
  .kopf3 .nav{min-width:0;gap:0}
  .kopf3 .nav-secondary a{font-size:.9rem;padding:0 5px}
  .kopf3 .nav-secondary a::after{left:5px;right:5px}
  .kopf3 .icon-btn,.kopf3-korb{flex:none}
}
@media(min-width:1280px){
  .kopf3 .wrap{min-height:108px;gap:var(--sp-5)}
  .kopf3 .logo img,.kopf3 .logo picture img,.kopf3 .logo .logo-dark{width:72px;height:72px}
  .kopf3-name{font-size:2.75rem}
  .kopf3 .search-form{display:block;position:relative;margin:0 4px 0 10px}
  .kopf3 .search-form .input{width:210px;min-height:44px;border-radius:999px;border:1px solid var(--q-gold);background:var(--q-creme-hell);padding-left:40px;font-size:.92rem}
  .kopf3 .search-form .input:focus{width:260px}
  .kopf3-suche{display:none!important}
}

/* ---------- Hero mit Duftberater ---------- */
.hb{position:relative;width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:1fr;background:var(--q-creme) var(--hb-textur) -56px top/auto 100% no-repeat;color:var(--q-navy);border-bottom:1px solid rgba(184,145,63,.5)}
.hb-text{padding:var(--sp-5) var(--sp-4) var(--sp-6);display:grid;gap:var(--sp-4);align-content:center;max-width:720px}
.hb-kicker{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold-ink)}
.hb-titel{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(2.5rem,1rem + 3.3vw,4.25rem);line-height:.98;letter-spacing:-.015em;color:var(--q-navy)}
.hb-titel span{display:block}
.hb-titel span+span{color:var(--q-navy)}
.hb-karte{margin:var(--sp-2) 0 0;padding:var(--sp-5) var(--sp-4) var(--sp-4);border:1px solid var(--q-gold);border-radius:14px;background:rgba(251,247,238,.92);box-shadow:inset 0 0 0 5px var(--q-creme-hell),inset 0 0 0 6px rgba(184,145,63,.28);display:grid;gap:var(--sp-4)}
.hb-karte-kopf{display:flex;gap:14px;align-items:flex-start}
.hb-karte-icon{flex:none;width:48px;height:48px;border-radius:50%}
.hb-karte h2{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);line-height:1.1;color:var(--q-navy)}
.hb-karte p{margin:0;font-size:.95rem;line-height:1.5;color:#3b4459}
.hb-feld{display:flex;align-items:center;gap:8px;border:1px solid var(--q-gold);border-radius:999px;background:#fffdf8;padding:5px 5px 5px 20px}
.hb-feld:focus-within{outline:2px solid var(--q-navy);outline-offset:2px}
.hb-feld input{flex:1;min-width:0;min-height:44px;border:0;background:none;font:inherit;font-size:1rem;color:var(--q-navy)}
.hb-feld input:focus{outline:none}
.hb-feld input::placeholder{color:#6d7385}
.hb-feld button{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--q-gold);color:var(--q-navy);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast,.15s)}
.hb-feld button:hover{background:#c9a457}
.hb-feld button:focus-visible{outline:3px solid var(--q-navy);outline-offset:2px}
.hb-feld svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.hb-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hb-chips button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--q-gold);border-radius:999px;background:transparent;color:var(--q-navy);font:inherit;font-size:.9rem;cursor:pointer;transition:background var(--dur-fast,.15s),color var(--dur-fast,.15s)}
.hb-chips button::before{content:"";width:10px;height:10px;background:var(--q-gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.hb-chips button:hover{background:var(--q-navy);color:var(--q-creme)}
.hb-chips button:focus-visible{outline:3px solid var(--q-navy);outline-offset:2px}
.hb-wege{margin:0;display:flex;flex-wrap:wrap;gap:4px 24px}
/* Handy: Duftfinder und Probenset stehen in der Tab-Leiste; so liegt der Berater-Knopf nie über diesen Links */
@media(max-width:767px){.hb-wege{display:none}}
.hb-weg{display:inline-flex;align-items:center;min-height:44px;color:var(--q-navy);font-family:var(--font-display);font-size:1.15rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--q-gold);text-underline-offset:5px}
.hb-weg:hover{text-decoration-thickness:2px}
.hb-bild{margin:0;background:var(--q-navy);aspect-ratio:4/5;max-height:72svh;overflow:hidden}
.hb-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* Kleiner Desktop 1024–1279 px: Korb und Konto bleiben sichtbar, Navigation rückt enger */
@media(min-width:1024px) and (max-width:1279px){.kopf3 .nav{min-width:0;gap:0}.kopf3 .nav-secondary a{font-size:.95rem;padding:0 7px}.kopf3 .nav-secondary a::after{left:7px;right:7px}.kopf3 .icon-btn,.kopf3-korb{flex:none}.kopf3-name{font-size:2rem}.kopf3-unter{font-size:.62rem}}
/* Tablet einspaltig: Bild über die volle Breite (kein leerer Streifen neben dem 4:5-Ausschnitt) */
@media(min-width:768px) and (max-width:899px){.hb-bild{aspect-ratio:16/9;max-height:none;width:100%}}
@media(min-width:900px){
  .hb{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(720px,calc(100svh - 150px))}
  .hb-text{padding:var(--sp-7) var(--sp-6) var(--sp-7) max(110px,calc((100vw - 1320px)/2 + 100px));gap:var(--sp-5);max-width:none}
  .hb-karte{max-width:600px;padding:var(--sp-5) var(--sp-5) var(--sp-5)}
  .hb-bild{aspect-ratio:auto;max-height:none;border-left:1px solid var(--q-gold)}
}

/* ---------- Karussell: Navy-Fläche, Duftfarbe nur als Schein hinter dem Flakon (Akzent je Duft, keine Seitenfläche) ---------- */
html .kar{background:var(--q-navy);border-top:1px solid rgba(184,145,63,.6);border-bottom:1px solid rgba(184,145,63,.6)}
html .kar.is-live .kar-stage{background:radial-gradient(34% 44% at 64% 46%,rgba(var(--c),.6) 0%,rgba(var(--c),.2) 55%,rgba(var(--c),0) 80%),var(--q-navy)}

/* Duftwelten-Kacheln: Navy mit Goldkante, die Duftfarbe nur als Band oben */
.world-tile{background:var(--q-navy);color:var(--q-creme);border:1px solid rgba(184,145,63,.55);box-shadow:inset 0 6px 0 0 var(--tile)}
.world-tile span{color:#d9cfb8}
.world-tile:hover{box-shadow:inset 0 10px 0 0 var(--tile),var(--shadow-2)}

/* ---------- Duftberater: schwebender Knopf ab Seitenaufruf ---------- */
html:not(.js) .berater{display:none}
.berater{left:auto;right:16px;bottom:calc(56px + 14px + env(safe-area-inset-bottom));z-index:31}
html.in-stage-wort .berater-toggle,html.in-stage-kar .berater-toggle{opacity:1!important;pointer-events:auto!important}
/* Rundes Siegel-Icon, Beschriftung als Band darunter (Vorlage 03): schmal genug für den rechten Seitenrand, nie über Kauf-Knöpfen */
.berater-toggle{display:inline-flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;color:var(--q-creme);font-family:var(--font-display);cursor:pointer;transition:transform var(--dur-base,.25s) var(--ease-out,ease-out)}
.berater-toggle picture,.berater-toggle img{display:block;width:60px;height:60px;border-radius:50%}
.berater-toggle img{box-shadow:0 0 0 2px var(--q-gold),0 10px 22px -8px rgba(15,27,51,.6)}
.berater-toggle span{margin-top:-10px;position:relative;padding:3px 12px 4px;border:1px solid var(--q-gold);border-radius:999px;background:var(--q-navy);font-size:.95rem;font-weight:600;letter-spacing:.02em;line-height:1.1;white-space:nowrap}
.berater-toggle:hover{transform:translateY(-2px)}
.berater-toggle:focus-visible{outline:3px solid var(--q-gold);outline-offset:4px;border-radius:14px}
.berater-toggle[aria-expanded="true"] span{background:var(--q-navy-2)}
.berater-panel{left:auto;right:0;width:min(400px,calc(100vw - 32px));background:var(--q-creme-hell);border:1px solid var(--q-gold);border-radius:14px}
.berater-head h2{font-family:var(--font-display);font-weight:600;font-size:1.45rem}
.berater .msg-me{background:var(--q-navy);color:var(--q-creme)}
.berater-wa{display:inline-flex;align-items:center;margin-top:var(--sp-2);min-height:44px;padding:0 18px;border-radius:999px;background:var(--q-navy);color:var(--q-creme);border:1px solid var(--q-gold);font-weight:600;text-decoration:none}
.berater-wa:hover{background:var(--q-navy-2)}
.berater-wa:focus-visible{outline:3px solid var(--q-gold);outline-offset:2px}
@media(min-width:768px){
  .berater{right:24px;bottom:24px}
  .berater-toggle picture,.berater-toggle img{width:66px;height:66px}
  .berater-toggle span{font-size:1.02rem}
}
@media(prefers-reduced-motion:reduce){.berater-toggle{transition:none}.berater-toggle:hover{transform:none}}
/* Der Knopf liegt nie über Copyright oder Tab-Leiste: Fußzeile endet mit Platz darunter */
.footer-r2{padding-bottom:calc(var(--sp-6) + 84px)}
@media(min-width:768px){.footer-r2{padding-bottom:calc(var(--sp-6) + 72px)}}
/* Mobil R1 (Inhaber 11.10.2026 „alles verschoben“): unter 768 px schwebt der Berater nicht mehr über Fotos, Preisen und
   Kauf-Knöpfen, sondern sitzt als fünfter Platz in der Tab-Leiste. Ohne JS bleibt die Leiste vierteilig (Berater ist dann aus). */
@media(max-width:767px){
  html.js body.has-tabbar .tabbar{grid-template-columns:repeat(5,1fr)}
  body.has-tabbar .berater{left:auto;right:0;bottom:env(safe-area-inset-bottom);width:20%;max-width:none}
  body.has-tabbar .berater-toggle{width:100%;min-height:56px;justify-content:center;gap:2px;color:var(--c-muted);font-family:var(--font-body)}
  body.has-tabbar .berater-toggle picture,body.has-tabbar .berater-toggle img{width:26px;height:26px}
  body.has-tabbar .berater-toggle img{box-shadow:0 0 0 1.5px var(--q-gold)}
  body.has-tabbar .berater-toggle span{margin:0;padding:0;border:0;background:none;color:inherit;font-size:min(var(--fs-xs),3.1vw);font-weight:var(--fw-medium);letter-spacing:-.01em}
  body.has-tabbar .berater-toggle[aria-expanded="true"]{color:var(--c-primary)}
  body.has-tabbar .berater-toggle[aria-expanded="true"] span{background:none;font-weight:var(--fw-semibold)}
  body.has-tabbar .berater-toggle:hover{transform:none}
  body.has-tabbar .berater-toggle:focus-visible{outline-offset:-3px;border-radius:8px}
  body.has-tabbar .berater-panel{right:12px;width:min(400px,calc(100vw - 24px))}
  .footer-r2{padding-bottom:var(--sp-6)}
}

/* ---------- Kontakt: Berater zuerst ---------- */
.kontakt-berater{display:inline-flex;align-items:center;margin-top:var(--sp-2);min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--q-gold);background:var(--q-navy);color:var(--q-creme);font:inherit;font-size:1rem;font-weight:600;cursor:pointer}
.kontakt-berater:hover{background:var(--q-navy-2)}
.kontakt-berater:focus-visible{outline:3px solid var(--q-gold);outline-offset:2px}

/* ---------- Läden: echte Anschrift, Zeiten als Liste, Telefon/Mail (Inhaber 11.10.2026) ---------- */
.store-lage{margin:0;font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--q-navy)}
.store-body{align-content:start}
.store-hours p{margin:0}
.store-hours ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:2px;font-variant-numeric:tabular-nums}
.store-kontakt{margin:0}
.store-kontakt a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.foot-laeden address{font-style:normal;color:var(--q-creme);opacity:.86;line-height:1.6;margin:0 0 var(--sp-3);font-size:var(--fs-sm)}
/* Mobil R2: Spalten dürfen schrumpfen (lange Mail-Adresse sprengte bei 768 px die Breite); Tablet dreispaltig, ab 1024 px fünf */
.foot-cols>*{min-width:0;overflow-wrap:anywhere}
@media(min-width:768px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.foot-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}}
/* Mobil R2: Kopfzeile passt bei 360 px (Siegel, Wortmarke, Suche, Konto, Korb ohne Überstand) */
@media(max-width:400px){
  .kopf3 .wrap{gap:var(--sp-2)}
  .kopf3 .logo img,.kopf3 .logo picture img,.kopf3 .logo .logo-dark{width:44px;height:44px}
  .kopf3-marke{gap:8px;min-width:0}
  .kopf3-name{font-size:1.5rem;letter-spacing:.05em}
  .kopf3 .nav{min-width:0;gap:0;flex:none}
  .kopf3-korb .count{right:0}
}
/* Lite-Marke M-5a: Zeile unter dem Logo */
.kopf3-stapel{display:flex;flex-direction:column;align-items:flex-start;flex:none;min-width:0}
.kopf3-stapel .fm-kopf{margin-top:-4px;color:var(--q-navy)}