/* ============================================================
   UR-SACHEN Shop — Duft-Bühne, Warenkorb, Checkout, Konto
   Konsumiert Tokens aus tokens.css. Ergänzt site.css.
   ============================================================ */

.shop-lede { max-width: var(--messe-body); }

/* ---------- Duft-Bühne ---------- */
.buehne {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr 1fr;
  gap: clamp(var(--s-3), 3vw, var(--s-5));
  align-items: center;
  margin-top: var(--s-5);
}
.buehne__these { display: flex; flex-direction: column; gap: var(--s-3); }
.buehne__these h1 { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: var(--w-black); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }

.duftwahl { display: flex; flex-direction: column; gap: var(--s-1); }
.duftwahl button {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-karte);
  background: transparent; border: var(--stroke) solid var(--line);
  text-align: left; transition: border-color var(--t-hover), background var(--t-hover), transform var(--t-press);
}
.duftwahl button:hover { border-color: var(--line-2); }
.duftwahl button[aria-pressed="true"] { border-color: var(--duft, var(--akzent)); background: color-mix(in srgb, var(--duft, var(--akzent)) 12%, transparent); }
.duftwahl__icon { width: 42px; height: 42px; border-radius: var(--r-voll); display: grid; place-items: center; flex: none; color: var(--dot, var(--akzent)); background: color-mix(in srgb, var(--dot, var(--akzent)) 13%, var(--surface-2)); border: var(--stroke-fein) solid color-mix(in srgb, var(--dot, var(--akzent)) 36%, transparent); }
.duftwahl__icon svg { width: 23px; height: 23px; }
.duftwahl__txt { display: flex; flex-direction: column; line-height: 1.2; }
.duftwahl__txt b { font-weight: var(--w-halb); color: var(--text); }
.duftwahl__txt small { font-size: var(--fs-mini); color: var(--text-3); }

/* Produktlinse */
.linse {
  position: relative; aspect-ratio: 4/5; border-radius: 46% 46% 40% 40% / 50% 50% 42% 42%;
  overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--duft, var(--akzent)) 42%, var(--surface)) 0%, var(--surface) 70%);
  border: var(--stroke) solid var(--line);
  transition: background var(--t-enter) var(--ease-out);
  box-shadow: var(--schatten);
}
.linse__licht { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 18%, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.linse img { width: 78%; height: auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.5)); transition: opacity var(--t-hover); }
.linse.is-wechsel img { opacity: 0; }
.linse__marke { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: var(--fs-mini); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-3); }

/* Regie rechts */
.regie { display: flex; flex-direction: column; gap: var(--s-3); }
.regie__kopf p { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--duft, var(--akzent)); font-weight: var(--w-halb); }
.regie__kopf h2 { font-family: var(--font-display); font-size: var(--fs-heading-lg); font-weight: var(--w-black); text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: .01em; }
.regie__these { color: var(--text-2); font-style: italic; }
.noten { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.note { padding: 5px 12px; border-radius: var(--r-voll); border: var(--stroke-fein) solid var(--line-2); font-size: var(--fs-small); color: var(--text-2); }
.regie__text { color: var(--text-2); font-size: var(--fs-small); }

.groessenwahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.groessenwahl label {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3);
  border: var(--stroke) solid var(--line); border-radius: var(--r-karte); cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.groessenwahl input { position: absolute; opacity: 0; pointer-events: none; }
.groessenwahl label:has(input:checked) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.groessenwahl label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.groessenwahl b { font-weight: var(--w-halb); }
.groessenwahl small { font-size: var(--fs-mini); color: var(--text-3); }
.groessenwahl .preis { font-size: var(--fs-small); color: var(--akzent); font-weight: var(--w-halb); }

.regie__notiz { font-size: var(--fs-mini); color: var(--text-3); }

/* ---------- Warenkorb-Button in der Nav ---------- */
.korb { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: var(--r-voll); border: var(--stroke) solid var(--line-2); background: transparent; color: var(--text); font-size: .88rem; font-weight: var(--w-halb); }
.korb:hover { border-color: var(--text); }
.korb__zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-voll); background: var(--akzent); color: var(--auf-akzent); font-size: .72rem; display: grid; place-items: center; }

/* ---------- Warenkorb-Dialog ---------- */
dialog.korb-dialog { border: none; padding: 0; background: transparent; max-width: 460px; width: min(460px, 92vw); margin-left: auto; margin-right: 0; margin-top: 0; min-height: 100vh; }
dialog.korb-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.korb-inner { background: var(--surface); min-height: 100vh; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); border-left: var(--stroke) solid var(--line); }
.korb-kopf { display: flex; align-items: center; justify-content: space-between; }
.korb-kopf h2 { font-family: var(--font-display); font-size: var(--fs-heading-md); font-weight: var(--w-halb); }
.korb-liste { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; overflow-y: auto; }
.korbzeile { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-2); align-items: center; padding-bottom: var(--s-2); border-bottom: var(--stroke-fein) solid var(--line); }
.korbzeile img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-klein); }
.korbzeile h3 { font-size: .95rem; font-weight: var(--w-halb); }
.korbzeile p { font-size: var(--fs-mini); color: var(--text-3); }
.korbzeile button { background: none; border: none; color: var(--text-3); font-size: var(--fs-mini); text-decoration: underline; }
.korb-leer { color: var(--text-2); text-align: center; padding: var(--s-5) 0; }
.korb-summe { display: flex; flex-direction: column; gap: var(--s-2); }
.korb-summe p { font-size: var(--fs-small); color: var(--text-3); }

/* ---------- Checkout ---------- */
.checkout-raster { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(var(--s-4), 4vw, var(--s-6)); margin-top: var(--s-5); align-items: start; }
.demo-band { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; padding: var(--s-2) var(--s-3); border-radius: var(--r-karte); background: color-mix(in srgb, var(--akzent) 14%, transparent); border: var(--stroke-fein) solid var(--line-2); margin-top: var(--s-3); }
.demo-band strong { color: var(--akzent); }
.demo-band span { color: var(--text-2); font-size: var(--fs-small); }
.bestellbild { background: var(--surface); border: var(--stroke-fein) solid var(--line); border-radius: var(--r-flaeche); padding: var(--s-3); position: sticky; top: calc(var(--nav-h) + var(--s-2)); }
.bereich-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-2); }
.bereich-kopf h2 { font-family: var(--font-display); font-size: var(--fs-heading-md); font-weight: var(--w-halb); }
.bereich-kopf a, .bereich-kopf span { font-size: var(--fs-small); color: var(--akzent); }
.checkout-artikel { display: flex; flex-direction: column; gap: var(--s-2); }
.checkout-zeile { display: grid; grid-template-columns: 54px 1fr auto; gap: var(--s-2); align-items: center; }
.checkout-zeile img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-klein); }
.checkout-zeile.ohne-bild { grid-template-columns: 1fr auto; }
.checkout-zeile h3 { font-size: .92rem; font-weight: var(--w-halb); }
.checkout-zeile p { font-size: var(--fs-mini); color: var(--text-3); }
.preis-offen { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--stroke-fein) solid var(--line); }
.preis-offen .zeile { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text-2); }
.preis-offen strong { color: var(--text); }
.preis-offen p { font-size: var(--fs-mini); color: var(--text-3); margin-top: 6px; }

.wegwahl { display: inline-flex; padding: 4px; border-radius: var(--r-voll); border: var(--stroke-fein) solid var(--line); gap: 4px; margin-bottom: var(--s-3); }
.wegwahl button { padding: .5rem 1rem; border-radius: var(--r-voll); border: none; background: transparent; color: var(--text-2); font-size: var(--fs-small); }
.wegwahl button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); font-weight: var(--w-halb); }

.formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
label.feld-breit { grid-column: 1 / -1; }
.bestellformular label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-small); color: var(--text-2); }
.bestellformular label small { color: var(--text-3); }
.bestellformular input, .bestellformular select {
  padding: .65rem .75rem; background: #FCF6EA; border: var(--stroke) solid var(--line-2);
  border-radius: var(--r-klein); color: var(--text); font: inherit; font-size: .92rem;
}
.bestellformular input:focus, .bestellformular select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.bestellformular input[aria-invalid="true"] { border-color: var(--terra-500); background: color-mix(in srgb, var(--terra-500) 8%, #FCF6EA); }
.bestellformular fieldset { border: none; padding: 0; margin: 0 0 var(--s-3); }
.bestellformular legend { font-family: var(--font-display); font-size: var(--fs-heading-md); font-weight: var(--w-fett); text-transform: uppercase; letter-spacing: .01em; margin-bottom: var(--s-2); }
.zahlungswahl { display: flex; flex-direction: column; gap: var(--s-1); }
.zahlungswahl label { flex-direction: row; align-items: flex-start; gap: var(--s-2); padding: var(--s-2); border: var(--stroke) solid var(--line); border-radius: var(--r-karte); cursor: pointer; }
.zahlungswahl label:has(input:checked) { border-color: var(--akzent); }
.zahlungswahl strong { display: block; color: var(--text); font-size: .95rem; }
.zahlungswahl small { color: var(--text-3); }
.datennotiz { padding: var(--s-2) var(--s-3); background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: var(--r-karte); border: var(--stroke-fein) solid var(--line); margin-bottom: var(--s-3); }
.datennotiz h3 { font-size: .9rem; font-weight: var(--w-halb); margin-bottom: 4px; }
.datennotiz p { font-size: var(--fs-mini); color: var(--text-3); }
.bestaetigung { flex-direction: row !important; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-2); }
.bestaetigung input { margin-top: 3px; }
.formular-fehler { padding: var(--s-2) var(--s-3); background: color-mix(in srgb, var(--terra-600) 22%, transparent); border: var(--stroke-fein) solid var(--terra-500); border-radius: var(--r-karte); color: #FFD9C9; font-size: var(--fs-small); margin-bottom: var(--s-2); }
.checkout-senden.is-loading { opacity: .7; pointer-events: none; }

/* ---------- Konto ---------- */
.konto-raster { max-width: 720px; margin-inline: auto; }
.konto-tabs { display: inline-flex; padding: 4px; border-radius: var(--r-voll); border: var(--stroke-fein) solid var(--line); gap: 4px; margin-bottom: var(--s-4); }
.konto-tabs button { padding: .55rem 1.2rem; border-radius: var(--r-voll); border: none; background: transparent; color: var(--text-2); }
.konto-tabs button[aria-selected="true"] { background: var(--akzent); color: var(--auf-akzent); font-weight: var(--w-halb); }
.konto-form { display: flex; flex-direction: column; gap: var(--s-2); max-width: 420px; }
.konto-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-small); color: var(--text-2); }
.konto-form input { padding: .65rem .75rem; background: #FCF6EA; border: var(--stroke) solid var(--line-2); border-radius: var(--r-klein); color: var(--text); font: inherit; }
.konto-form input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.konto-form .bestaetigung { font-size: var(--fs-small); }
.profil { display: flex; flex-direction: column; gap: var(--s-3); }
.profil__kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: var(--stroke-fein) solid var(--line); }
.bestellung { padding: var(--s-3); border: var(--stroke-fein) solid var(--line); border-radius: var(--r-karte); margin-bottom: var(--s-2); }
.bestellung h3 { font-size: .95rem; font-weight: var(--w-halb); }
.bestellung time { font-size: var(--fs-mini); color: var(--text-3); }
.bestellung ul { list-style: none; padding: var(--s-1) 0 0; }
.bestellung li { font-size: var(--fs-small); color: var(--text-2); }
.tlink { background: none; border: none; color: var(--akzent); text-decoration: underline; font-size: var(--fs-small); }
.gefahr { color: var(--terra-500); }

/* ---------- Danke ---------- */
.danke { max-width: 620px; margin-inline: auto; text-align: center; }
.danke__ok { width: 68px; height: 68px; border-radius: var(--r-voll); background: color-mix(in srgb, var(--forst-400) 30%, transparent); color: var(--forst-400); display: grid; place-items: center; font-size: 2rem; margin: 0 auto var(--s-3); }

@media (max-width: 940px) {
  .buehne { grid-template-columns: 1fr; }
  .buehne__these { order: 0; }
  .linse { order: 1; max-width: 340px; margin-inline: auto; }
  .regie { order: 2; }
  .checkout-raster { grid-template-columns: 1fr; }
  .bestellbild { position: static; order: 2; }
  .formular-raster { grid-template-columns: 1fr; }
}