/* ============================================================
   SCHMELZTIEGEL — Stylesheet
   Ein Krämerladen aus dem Wilden Westen, mit heutiger Technik gebaut.
   Alles lokal: keine Google Fonts, keine CDNs, keine Fremdskripte.
   ============================================================ */

/* --- Schriften (liegen unter assets/fonts/, OFL-Lizenzen daneben) --- */
@font-face {
  font-family: 'Rye';                       /* Das Ladenschild. Sparsam einsetzen. */
  src: url('../fonts/rye-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';                    /* Überschriften, Preisschilder */
  src: url('../fonts/bitter-var-latin.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';                     /* Fließtext, Bedienelemente */
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ============================================================
   1. Farben und Maße
   ============================================================ */
:root {
  /* Tageslicht im Laden */
  --papier:      #FBF6EE;   /* hellster Grund */
  --pergament:   #F2E7D5;   /* Seitenhintergrund */
  --pergament-2: #E8D9C1;   /* Kanten, Regalbretter */
  --tinte:       #241A13;   /* Text, fast schwarz mit Braunstich */
  --tinte-weich: #5C4B3C;   /* Nebentext */
  --rost:        #A6412A;   /* Akzent: Emailleschild-Rot */
  --rost-hell:   #C25539;
  --messing:     #B5842A;   /* Zweitakzent: Messing, Petroleumlampe */
  --salbei:      #6E7E62;   /* Ruhiger dritter Ton */
  --erfolg:      #4F7A4A;
  --warnung:     #9C5B14;

  --grund:       var(--pergament);
  --karte:       var(--papier);
  --text:        var(--tinte);
  --text-weich:  var(--tinte-weich);
  --kante:       color-mix(in oklab, var(--tinte) 18%, transparent);
  --kante-zart:  color-mix(in oklab, var(--tinte) 9%, transparent);
  --schatten:    color-mix(in oklab, var(--tinte) 22%, transparent);
  --schild:      var(--tinte);          /* Grund des Emailleschilds */
  --schild-text: var(--papier);

  /* Maße */
  --breite:      76rem;
  --breite-eng:  42rem;
  --luft:        clamp(1.25rem, 3vw, 2.5rem);
  --radius:      14px;
  --radius-s:    8px;
  --kopf-hoehe:  4.5rem;

  /* Bewegung */
  --weich:       380ms cubic-bezier(.22,.68,.24,1);
  --schnell:     180ms cubic-bezier(.3,.7,.3,1);

  color-scheme: light dark;
}

/* Abendlicht: der Laden nach Ladenschluss, Petroleumlampe an.
   Folgt der Systemeinstellung — außer der Kunde hat oben im Kopf selbst
   umgeschaltet (data-farbe="hell" bzw. "dunkel" auf <html>, siehe laden.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    --papier:      #221A13;
    --pergament:   #171009;
    --pergament-2: #2E2318;
    --tinte:       #F1E4D0;
    --tinte-weich: #B7A891;
    --rost:        #E0714F;
    --rost-hell:   #EE8A69;
    --messing:     #E0AE4E;
    --salbei:      #93A385;
    --erfolg:      #7CB275;
    --warnung:     #D9963F;

    --grund:       var(--pergament);
    --karte:       var(--papier);
    --text:        var(--tinte);
    --text-weich:  var(--tinte-weich);
    --kante:       color-mix(in oklab, var(--tinte) 22%, transparent);
    --kante-zart:  color-mix(in oklab, var(--tinte) 12%, transparent);
    --schatten:    #000000AA;
    --schild:      #0E0A06;
    --schild-text: #F1E4D0;
  }
}
:root[data-farbe="dunkel"] {
    --papier:      #221A13;
    --pergament:   #171009;
    --pergament-2: #2E2318;
    --tinte:       #F1E4D0;
    --tinte-weich: #B7A891;
    --rost:        #E0714F;
    --rost-hell:   #EE8A69;
    --messing:     #E0AE4E;
    --salbei:      #93A385;
    --erfolg:      #7CB275;
    --warnung:     #D9963F;

    --grund:       var(--pergament);
    --karte:       var(--papier);
    --text:        var(--tinte);
    --text-weich:  var(--tinte-weich);
    --kante:       color-mix(in oklab, var(--tinte) 22%, transparent);
    --kante-zart:  color-mix(in oklab, var(--tinte) 12%, transparent);
    --schatten:    #000000AA;
    --schild:      #0E0A06;
    --schild-text: #F1E4D0;
}
:root[data-farbe="hell"]   { color-scheme: light; }
:root[data-farbe="dunkel"] { color-scheme: dark; }

/* Animierter Winkel für die Messing-Verläufe (echte Eigenschaft, damit
   der Verlauf sich weich drehen kann statt zu springen). */
@property --lampe {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}

/* ============================================================
   2. Grundgerüst
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankersprünge nicht unter die klebende Kopfleiste laufen lassen */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv05';
  overflow-x: hidden;
}

/* Feine Papierkörnung über allem — gibt dem Flächigen Substanz.
   Ein einziges SVG als data:-URI, kein Bild vom Server. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) body::before { mix-blend-mode: soft-light; opacity: .5; }
}
:root[data-farbe="dunkel"] body::before { mix-blend-mode: soft-light; opacity: .5; }

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:where(:not(.knopf, .schild-link)):hover { color: var(--rost); }

:where(h1, h2, h3, h4) {
  font-family: 'Bitter', Georgia, serif;
  line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance; margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem); font-weight: 650; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 650; }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--rost);
  outline-offset: 3px;
  border-radius: 4px;
}

.huelle { width: min(100% - 2 * var(--luft), var(--breite)); margin-inline: auto; }
.huelle--eng { width: min(100% - 2 * var(--luft), var(--breite-eng)); margin-inline: auto; }
/* Für Bilder, die breiter dürfen als eine Textspalte. Ab 52rem nimmt das
   Schauregal darüber die ganze Fensterbreite — siehe Abschnitt 15. */
.huelle--weit { width: min(100% - 2 * var(--luft), var(--breite)); margin-inline: auto; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.springmarke {
  position: fixed; top: .5rem; left: .5rem; z-index: 10000;
  background: var(--rost); color: #fff; padding: .6rem 1rem;
  border-radius: var(--radius-s); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--schnell);
}
.springmarke:focus { transform: translateY(0); }

/* ============================================================
   3. Wiederkehrende Bausteine
   ============================================================ */

/* --- Zierleiste: gestrichelte Linie mit Stern in der Mitte --- */
.zierleiste {
  display: flex; align-items: center; gap: .9rem;
  color: color-mix(in oklab, var(--text) 45%, transparent);
  margin: 1.4rem 0;
}
.zierleiste::before, .zierleiste::after {
  content: ''; flex: 1; height: 0;
  border-top: 2px dashed currentColor; opacity: .5;
}
.zierleiste span { font-size: .85rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 600; }

/* --- Knöpfe: gestanztes Blech --- */
.knopf {
  --knopf-grund: var(--rost);
  --knopf-text: #FFF6EC;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  font: 600 1rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: .01em;
  color: var(--knopf-text);
  background: var(--knopf-grund);
  border: 2px solid color-mix(in oklab, var(--knopf-grund) 78%, #000);
  border-radius: 999px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 color-mix(in oklab, var(--knopf-grund) 62%, #000),
              0 6px 18px -8px var(--schatten);
  transition: transform var(--schnell), box-shadow var(--schnell), background var(--schnell);
}
.knopf:hover {
  background: var(--rost-hell);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--knopf-grund) 62%, #000),
              0 12px 24px -10px var(--schatten);
  color: var(--knopf-text);
}
.knopf:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in oklab, var(--knopf-grund) 62%, #000); }
.knopf[disabled], .knopf[aria-disabled='true'] {
  opacity: .5; cursor: not-allowed; transform: none;
  box-shadow: 0 2px 0 color-mix(in oklab, var(--knopf-grund) 62%, #000);
}
.knopf--still {
  --knopf-grund: transparent; --knopf-text: var(--text);
  border-color: var(--kante);
  box-shadow: none;
}
.knopf--still:hover {
  background: color-mix(in oklab, var(--text) 7%, transparent);
  color: var(--text); box-shadow: none;
}
.knopf--messing { --knopf-grund: var(--messing); --knopf-text: #1B1206; }
.knopf--breit { width: 100%; }

/* --- Emailleschild: der Signaturbaustein des Ladens --- */
.emaille {
  position: relative;
  background: var(--schild); color: var(--schild-text);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--schild-text) 26%, transparent),
              inset 0 0 0 7px var(--schild),
              inset 0 0 0 9px color-mix(in oklab, var(--schild-text) 14%, transparent),
              0 18px 40px -24px var(--schatten);
}
/* Die vier Schraubenlöcher in den Ecken */
.emaille::before, .emaille::after {
  content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in oklab, var(--schild-text) 30%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, #000 40%, transparent) inset;
  top: 16px; left: 16px;
}
.emaille::after { left: auto; right: 16px; }
.emaille > .emaille-fuesse { position: absolute; inset: auto 16px 16px 16px; height: 9px; }
.emaille > .emaille-fuesse::before, .emaille > .emaille-fuesse::after {
  content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in oklab, var(--schild-text) 30%, transparent);
  bottom: 0; left: 0;
}
.emaille > .emaille-fuesse::after { left: auto; right: 0; }

/* --- Karte: Papier auf dem Ladentisch --- */
.karte {
  background: var(--karte);
  border: 1px solid var(--kante-zart);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--tinte) 8%, transparent),
              0 12px 28px -22px var(--schatten);
}

/* --- Etikett / Merkmalsplakette --- */
/* Früher eine abgerundete Kapsel in Versalien mit Rahmen — genau die
   „Pille", die sofort generiert wirkt. Marcs feste Vorgabe: keine Pillen.
   Jetzt schlichte, kleine, fette Schrift in der Signalfarbe. */
.etikett {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 650 .84rem/1.35 'Inter', sans-serif;
  letter-spacing: 0; text-transform: none;
  color: color-mix(in oklab, var(--messing) 70%, var(--text));
}
.etikett--rost { color: var(--rost); }
.etikett--salbei { color: color-mix(in oklab, var(--salbei) 78%, var(--text)); }
.etikett--leer { color: var(--text-weich); }

/* ============================================================
   4. Kopfleiste — das Ladenschild über der Tür
   ============================================================ */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--grund) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--kante-zart);
}
@supports not (backdrop-filter: blur(2px)) { .kopf { background: var(--grund); } }

.kopf-innen {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--kopf-hoehe);
}
.wortmarke {
  font-family: 'Rye', 'Bitter', Georgia, serif;
  font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem);
  letter-spacing: .02em; line-height: 1;
  text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; gap: .6rem;
  margin-right: auto;
}
.wortmarke:hover { color: var(--rost); }
.wortmarke .tiegel { width: 1.9em; height: 1.9em; flex: none; }

.kopf-weg { display: flex; align-items: center; gap: .3rem; }
.kopf-weg a {
  padding: .5rem .8rem; border-radius: var(--radius-s);
  font-weight: 550; font-size: .95rem; text-decoration: none;
  transition: background var(--schnell), color var(--schnell);
}
.kopf-weg a:hover { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--rost); }
.kopf-weg a[aria-current='page'] { color: var(--rost); background: color-mix(in oklab, var(--rost) 10%, transparent); }
@media (max-width: 46rem) { .kopf-weg { display: none; } }

/* Der Warenkorb als Blechkanne mit Zähler */
.korbknopf {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem .55rem .8rem;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  border: 1px solid var(--kante); border-radius: 999px;
  font: 600 .92rem/1 'Inter', sans-serif; color: var(--text);
  cursor: pointer; transition: background var(--schnell), transform var(--schnell);
}
.korbknopf:hover { background: color-mix(in oklab, var(--rost) 12%, transparent); border-color: color-mix(in oklab, var(--rost) 35%, transparent); }
.korbknopf svg { width: 1.25rem; height: 1.25rem; }
.korb-zahl {
  min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem;
  display: grid; place-items: center;
  background: var(--rost); color: #fff;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Zähler verschwindet, wenn der Korb leer ist */
.korbknopf[data-anzahl='0'] .korb-zahl { display: none; }

/* --- Hell/Dunkel-Schalter: rundes Symbol neben dem Korb ---
   Zeigt, wohin es geht: im Hellen der Mond, im Dunkeln die Sonne. */
.farbknopf {
  display: grid; place-items: center; flex: none;
  width: 2.55rem; height: 2.55rem; padding: 0;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  border: 1px solid var(--kante); border-radius: 50%;
  color: var(--text); cursor: pointer;
  transition: background var(--schnell), transform var(--schnell), color var(--schnell);
}
.farbknopf:hover { background: color-mix(in oklab, var(--messing) 16%, transparent); color: var(--messing); transform: rotate(-14deg); }
.farbknopf:focus-visible { outline: 2px solid var(--rost); outline-offset: 2px; }
.farbknopf svg { width: 1.2rem; height: 1.2rem; }
.farbknopf .sonne { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .farbknopf .sonne { display: block; }
  :root:not([data-farbe="hell"]) .farbknopf .mond { display: none; }
}
:root[data-farbe="dunkel"] .farbknopf .sonne { display: block; }
:root[data-farbe="dunkel"] .farbknopf .mond { display: none; }
/* Schmale Handys: Platz für Wortmarke, Schalter und Korb — „Korb" als Wort
   entfällt, das Symbol mit Zahl bleibt (der Knopf trägt sein aria-label). */
@media (max-width: 26rem) {
  .kopf-innen { gap: .55rem; }
  .korbknopf { padding: .55rem .7rem; }
  .korbknopf > span[aria-hidden='true']:not(.korb-zahl) { display: none; }
  .farbknopf { width: 2.4rem; height: 2.4rem; }
}
@keyframes korb-stups {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.32) rotate(-7deg); }
  70% { transform: scale(.94); }
}
.korb-zahl.stups { animation: korb-stups 460ms cubic-bezier(.3,1.4,.4,1); }

/* ============================================================
   5. Schaufenster (Startseite)
   ============================================================ */
.schaufenster {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
/* Warmes Licht aus der Petroleumlampe, das sich langsam dreht */
.schaufenster::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in oklab, var(--messing) 26%, transparent), transparent 70%),
    conic-gradient(from var(--lampe), transparent 0 40%, color-mix(in oklab, var(--rost) 10%, transparent) 50%, transparent 60% 100%);
  animation: lampe 34s linear infinite;
  pointer-events: none; z-index: -1;
  filter: blur(30px);
}
@keyframes lampe { to { --lampe: 360deg; } }
@media (prefers-reduced-motion: reduce) { .schaufenster::before { animation: none; } }

.schaufenster-kopf { text-align: center; }
.schaufenster h1 { margin-bottom: .35em; }
.schaufenster h1 .betont {
  font-family: 'Rye', 'Bitter', serif;
  color: var(--rost);
  display: inline-block;
}
.vorsatz {
  font: 600 .82rem/1 'Inter', sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-weich); margin-bottom: 1.2rem;
}
.anriss {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
  color: var(--text-weich);
  max-width: 46ch; margin-inline: auto;
}
.schaufenster-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* --- Laufband: das Papierband im Schaufenster --- */
.laufband {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--schild); color: var(--schild-text);
  border-block: 2px solid color-mix(in oklab, var(--messing) 55%, transparent);
  padding: .7rem 0; overflow: hidden;
  --lauf-dauer: 42s;
}
.laufband-spur { display: flex; width: max-content; animation: laufen var(--lauf-dauer) linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-stueck {
  display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem;
  font: 600 .85rem/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
.laufband-stueck span { display: inline-flex; align-items: center; gap: 2.5rem; }
.laufband-stueck span::after { content: '✦'; color: var(--messing); font-size: 1.1em; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
  .laufband { overflow-x: auto; }
}

/* ============================================================
   6. Regale und Produktraster
   ============================================================ */
.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.abschnitt-kopf p { margin: .2rem 0 0; color: var(--text-weich); max-width: 52ch; }

/* --- Das Möbel: unter JEDER Reihe steht ein echtes Regalbrett ---
   Die Bretter werden von laden.js eingehängt, sobald klar ist, wie die
   Karten umbrechen. Ohne JS bleibt das Raster einfach brettlos — das ist
   Zierde, keine Funktion. */
.regal { position: relative; }

.brett {
  position: absolute; left: -1.5rem; right: -1.5rem;
  height: 16px; pointer-events: none;
  border-radius: 2px 2px 4px 4px;
  background:
    /* Maserung */
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      color-mix(in oklab, var(--tinte) 5%, transparent) 7px 8px,
      transparent 8px 26px),
    /* Brettkante: helle Oberseite, dunkle Vorderkante */
    linear-gradient(180deg,
      color-mix(in oklab, var(--pergament-2) 88%, #FFF) 0 4px,
      var(--pergament-2) 4px 7px,
      color-mix(in oklab, var(--pergament-2) 72%, var(--tinte)) 7px 100%);
  box-shadow: 0 6px 16px -9px var(--schatten),
              inset 0 1px 0 color-mix(in oklab, #FFF 45%, transparent);
  transition: top var(--weich);
}
/* Die beiden Konsolen, auf denen das Brett ruht */
.brett::before, .brett::after {
  content: ''; position: absolute; top: 15px; width: 26px; height: 22px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--tinte) 38%, transparent),
    color-mix(in oklab, var(--tinte) 22%, transparent));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.brett::before { left: 3.5rem; }
.brett::after  { right: 3.5rem; transform: scaleX(-1); }

@media (max-width: 34rem) {
  .brett { left: -1rem; right: -1rem; }
  .brett::before { left: 1.5rem; } .brett::after { right: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .brett { transition: none; } }

/* Die Karten stehen auf dem Brett, statt in der Luft zu schweben */
.raster { padding-bottom: 0; }
.regal .ware { align-self: end; }

/* Sortierregale = Filterknöpfe */
/* Regalwahl als schlichte Reiter mit Unterstrich — früher eine Reihe
   gerahmter Kapseln, also genau die Schlagwort-Pillen, die generiert wirken. */
.regalwahl {
  display: flex; gap: .3rem 1.5rem; flex-wrap: wrap; margin-bottom: 2rem;
  border-bottom: 1px solid var(--kante-zart);
}
.regalwahl button {
  margin-bottom: -1px; padding: .55rem 0 .6rem;
  font: 550 .95rem/1.2 'Inter', sans-serif;
  color: var(--text-weich);
  background: transparent;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  cursor: pointer; transition: color var(--schnell), border-color var(--schnell);
}
.regalwahl button:hover { color: var(--rost); border-bottom-color: color-mix(in oklab, var(--rost) 45%, transparent); }
.regalwahl button[aria-pressed='true'] {
  color: var(--text); border-bottom-color: var(--rost); font-weight: 650;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .regalwahl button[aria-pressed='true'] { border-bottom-color: var(--rost); color: var(--text); }   /* Reiter, keine Fläche */
}
:root[data-farbe="dunkel"] .regalwahl button[aria-pressed='true'] { border-bottom-color: var(--rost); color: var(--text); }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: clamp(1.2rem, 2.5vw, 2rem);
  row-gap: clamp(3.5rem, 6vw, 5rem);   /* Platz für das Brett unter jeder Reihe */
}

/* --- Produktkarte: das Preisschild am Regal --- */
.ware {
  container-type: inline-size;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--karte);
  border: 1px solid var(--kante-zart);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--weich), box-shadow var(--weich), border-color var(--weich);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--tinte) 6%, transparent);
}
.ware:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--rost) 40%, transparent);
  box-shadow: 0 20px 38px -26px var(--schatten), 0 3px 8px -6px var(--schatten);
  color: inherit;
}
.ware-bild {
  position: relative; aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in oklab, var(--papier) 88%, var(--messing)) 0%, transparent 62%),
    var(--pergament-2);
  overflow: hidden;
}
.ware-bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms cubic-bezier(.2,.7,.2,1), filter var(--weich);
}
.ware:hover .ware-bild img { transform: scale(1.045); }
/* Zweites Foto, falls vorhanden: blendet beim Überfahren auf */
.ware-bild .zweitbild { position: absolute; inset: 0; opacity: 0; transition: opacity var(--weich); }
.ware:hover .ware-bild .zweitbild { opacity: 1; }
.ware-bild:empty::after,
.ware-bild--leer::after {
  content: 'Foto folgt';
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 .8rem/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--text) 35%, transparent);
}
.ware-fahne {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: flex; flex-direction: column; gap: .4rem; align-items: start;
}
/* Auf dem Foto braucht die Schrift einen Grund — ein schlichtes, eckiges
   Schildchen wie ein Preisschild, keine Kapsel. */
.ware-fahne .etikett {
  padding: .22rem .5rem; border-radius: 3px;
  background: var(--karte); color: var(--text);
  box-shadow: 0 3px 12px -5px rgba(0, 0, 0, .4);
}
.ware-fahne .etikett--rost { color: var(--rost); }
.ware-koerper { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ware-koerper h3 { margin: 0; font-size: 1.12rem; font-weight: 650; }
.ware-notiz { margin: 0; font-size: .92rem; color: var(--text-weich); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ware-fuss { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .6rem; }

/* Der Preis: Papierschild mit Loch und Schnur */
.preisschild {
  position: relative;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700; font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: .28rem .75rem .28rem 1.5rem;
  background: color-mix(in oklab, var(--messing) 15%, var(--karte));
  border: 1px dashed color-mix(in oklab, var(--messing) 55%, transparent);
  border-radius: 4px 999px 999px 4px;
  line-height: 1.25;
}
.preisschild::before {
  content: ''; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in oklab, var(--messing) 75%, var(--text));
}
.preis-klein { font-size: .78rem; color: var(--text-weich); font-family: 'Inter', sans-serif; font-weight: 500; }

@container (max-width: 15rem) {
  .ware-koerper { padding: .9rem 1rem 1rem; }
  .ware-fuss { flex-direction: column; align-items: start; gap: .5rem; }
}

/* Ausverkauft: Karte wird blass, Stempel quer drüber */
.ware[data-leer='ja'] .ware-bild img { filter: grayscale(.75) contrast(.92); }
.ware[data-leer='ja']::after {
  content: 'Ausverkauft';
  position: absolute; top: 2.6rem; left: 50%; transform: translate(-50%, 0) rotate(-9deg);
  font: 700 1.05rem/1 'Bitter', serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rost); padding: .45rem 1rem;
  border: 3px double var(--rost); border-radius: 6px;
  background: color-mix(in oklab, var(--karte) 78%, transparent);
  z-index: 3;
}

/* Sanftes Auftauchen beim Scrollen — moderne Scroll-Zeitleiste,
   mit Fallback für Browser, die sie nicht können. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auftauchen {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes auftauchen {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Leere Meldung, wenn ein Regal nichts enthält */
.leermeldung {
  grid-column: 1 / -1; text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  color: var(--text-weich);
  border: 2px dashed var(--kante); border-radius: var(--radius);
}
.leermeldung strong { display: block; font-family: 'Bitter', serif; font-size: 1.25rem; color: var(--text); margin-bottom: .4rem; }

/* ============================================================
   7. Produktseite
   ============================================================ */
.ware-seite { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
@media (min-width: 60rem) {
  .ware-seite { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .ware-galerie { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
}

.galerie-gross {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--pergament-2);
  border: 1px solid var(--kante-zart);
}
.galerie-gross img { width: 100%; height: 100%; object-fit: cover; }
.galerie-gross .lupe { cursor: zoom-in; }
.galerie-streifen { display: flex; gap: .6rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
.galerie-streifen button {
  flex: 0 0 5.2rem; aspect-ratio: 1; padding: 0; scroll-snap-align: start;
  border: 2px solid transparent; border-radius: var(--radius-s);
  background: var(--pergament-2); overflow: hidden; cursor: pointer;
  transition: border-color var(--schnell), opacity var(--schnell);
  opacity: .72;
}
.galerie-streifen button:hover { opacity: 1; }
.galerie-streifen button[aria-current='true'] { border-color: var(--rost); opacity: 1; }
.galerie-streifen img { width: 100%; height: 100%; object-fit: cover; }

.ware-titel { margin-bottom: .3em; }
.ware-preis-gross {
  font-family: 'Bitter', serif; font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ware-steuer { font-size: .9rem; color: var(--text-weich); margin: .25rem 0 0; }
.ware-text { margin: 1.5rem 0; }
.ware-text p { margin: 0 0 1em; }

/* Steckbrief: die Datentafel am Regal */
.steckbrief { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .95rem; }
.steckbrief th, .steckbrief td { text-align: left; padding: .65rem .2rem; border-bottom: 1px dashed var(--kante); vertical-align: top; }
.steckbrief th { font-weight: 600; color: var(--text-weich); width: 42%; font-family: 'Inter', sans-serif; }
.steckbrief tr:last-child th, .steckbrief tr:last-child td { border-bottom: 0; }

.kaufleiste { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.5rem; }
.menge {
  display: inline-flex; align-items: center;
  border: 1px solid var(--kante); border-radius: 999px; overflow: hidden;
  background: var(--karte);
}
.menge button {
  width: 2.7rem; height: 2.9rem; border: 0; background: transparent; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--text);
  transition: background var(--schnell);
}
.menge button:hover { background: color-mix(in oklab, var(--text) 8%, transparent); }
.menge input {
  width: 3rem; height: 2.9rem; border: 0; background: transparent; text-align: center;
  font: 600 1.05rem/1 'Inter', sans-serif; color: var(--text);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.menge input::-webkit-outer-spin-button, .menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   8. Warenkorb (Schublade und Seite)
   ============================================================ */
.schublade {
  border: 0; padding: 0; margin: 0 0 0 auto;
  width: min(28rem, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
  background: var(--karte); color: var(--text);
  box-shadow: -24px 0 60px -30px #000;
  transform: translateX(100%);
  transition: transform var(--weich), overlay var(--weich) allow-discrete, display var(--weich) allow-discrete;
}
.schublade[open] { transform: translateX(0); }
@starting-style { .schublade[open] { transform: translateX(100%); } }
.schublade::backdrop {
  background: color-mix(in oklab, #1A120A 60%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--weich), overlay var(--weich) allow-discrete, display var(--weich) allow-discrete;
}
.schublade[open]::backdrop { opacity: 1; }
@starting-style { .schublade[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .schublade, .schublade::backdrop { transition: none; } }

.schublade-innen { display: flex; flex-direction: column; height: 100%; }
.schublade-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--kante-zart);
}
.schublade-kopf h2 { margin: 0; font-size: 1.25rem; }
.schliessen {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 1px solid var(--kante); border-radius: 999px; background: transparent;
  cursor: pointer; color: var(--text); font-size: 1.1rem; line-height: 1;
  transition: background var(--schnell);
}
.schliessen:hover { background: color-mix(in oklab, var(--text) 9%, transparent); }
.schublade-liste { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.schublade-fuss { border-top: 1px solid var(--kante-zart); padding: 1.1rem 1.25rem 1.4rem; background: color-mix(in oklab, var(--messing) 6%, var(--karte)); }

.korbzeile { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .9rem; align-items: start; padding: .9rem 0; border-bottom: 1px dashed var(--kante); }
.korbzeile:last-child { border-bottom: 0; }
.korbzeile-bild { aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden; background: var(--pergament-2); }
.korbzeile-bild img { width: 100%; height: 100%; object-fit: cover; }
.korbzeile h3 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; font-family: 'Inter', sans-serif; }
.korbzeile-preis { font-family: 'Bitter', serif; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.korbzeile-weg {
  background: none; border: 0; padding: .15rem 0; margin-top: .3rem; cursor: pointer;
  font: 500 .82rem/1 'Inter', sans-serif; color: var(--text-weich);
  text-decoration: underline; text-underline-offset: .2em;
}
.korbzeile-weg:hover { color: var(--rost); }
.menge--klein button { width: 2.1rem; height: 2.2rem; font-size: 1.1rem; }
.menge--klein input { width: 2.3rem; height: 2.2rem; font-size: .92rem; }

.summenblock { display: grid; gap: .45rem; margin-bottom: 1rem; font-size: .95rem; }
.summenzeile { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-weich); }
.summenzeile span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.summenzeile--gross {
  font-family: 'Bitter', serif; font-size: 1.25rem; font-weight: 700; color: var(--text);
  padding-top: .55rem; margin-top: .2rem; border-top: 2px solid var(--kante);
}
.summenzeile--gross span:last-child { font-size: 1.35rem; }
.versandhinweis {
  font-size: .85rem; color: var(--erfolg); font-weight: 550;
  display: flex; gap: .4rem; align-items: start; margin: .2rem 0 .8rem;
}
/* display:flex sticht das hidden-Attribut aus — deshalb hier ausdruecklich. */
.versandhinweis[hidden] { display: none; }
.fortschritt { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--text) 12%, transparent); overflow: hidden; margin-bottom: .8rem; }
.fortschritt i { display: block; height: 100%; background: linear-gradient(90deg, var(--messing), var(--rost)); border-radius: 999px; transition: width var(--weich); }

.korb-leer { text-align: center; padding: 3rem 1rem; color: var(--text-weich); }
.korb-leer svg { width: 4rem; height: 4rem; margin: 0 auto 1rem; opacity: .35; }

/* ============================================================
   9. Werkstatt / Vertrauensbausteine
   ============================================================ */
.dreispalt { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.merksatz { padding: 1.5rem; }
.merksatz .zeichen {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; margin-bottom: .9rem;
  border-radius: 50%; background: color-mix(in oklab, var(--rost) 14%, transparent); color: var(--rost);
}
.merksatz .zeichen svg { width: 1.5rem; height: 1.5rem; }
.merksatz h3 { margin-bottom: .35rem; }
.merksatz p { margin: 0; color: var(--text-weich); font-size: .95rem; }

/* ============================================================
   10. Formulare, Meldungen
   ============================================================ */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
input[type='text'], input[type='email'], input[type='number'], input[type='password'],
input[type='url'], input[type='search'], select, textarea {
  width: 100%; padding: .7rem .85rem;
  font: 400 1rem/1.4 'Inter', system-ui, sans-serif; color: var(--text);
  background: var(--karte);
  border: 1px solid var(--kante); border-radius: var(--radius-s);
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rost);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rost) 22%, transparent);
}
textarea { min-height: 8rem; resize: vertical; }
.feldpaar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.feld { margin-bottom: 1rem; }
.feldhilfe { font-size: .84rem; color: var(--text-weich); margin: .3rem 0 0; font-weight: 400; }

.meldung {
  padding: .9rem 1.1rem; border-radius: var(--radius-s); margin-bottom: 1.2rem;
  border-left: 4px solid var(--messing);
  background: color-mix(in oklab, var(--messing) 12%, var(--karte));
  font-size: .95rem;
}
.meldung--fehler { border-left-color: var(--rost); background: color-mix(in oklab, var(--rost) 12%, var(--karte)); }
.meldung--gut { border-left-color: var(--erfolg); background: color-mix(in oklab, var(--erfolg) 14%, var(--karte)); }

/* ============================================================
   11. Rechtstexte
   ============================================================ */
.rechtstext { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.rechtstext h2 { margin-top: 2.2rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
.rechtstext h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: .45rem; }
.rechtstext .kasten {
  border: 2px solid var(--kante); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin: 1.5rem 0; background: var(--karte);
}

/* ============================================================
   12. Fußbereich
   ============================================================ */
.fuss {
  background: var(--schild); color: color-mix(in oklab, var(--schild-text) 82%, transparent);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; margin-top: clamp(2rem, 5vw, 4rem);
}
.fuss a { color: color-mix(in oklab, var(--schild-text) 88%, transparent); text-decoration: none; }
.fuss a:hover { color: var(--messing); text-decoration: underline; }
.fuss-raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.fuss h3 { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--messing); font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: .9rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .95rem; }
.fuss-marke { font-family: 'Rye', serif; font-size: 1.4rem; color: var(--schild-text); margin-bottom: .6rem; }
.fuss-unten {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--schild-text) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .86rem; color: color-mix(in oklab, var(--schild-text) 62%, transparent);
}

/* ============================================================
   13. Seitenwechsel — weiche Übergänge zwischen den Seiten
   ============================================================ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 200ms ease-out both weg; }
  ::view-transition-new(root) { animation: 300ms ease-out both her; }
  @keyframes weg { to { opacity: 0; } }
  @keyframes her { from { opacity: 0; transform: translateY(10px); } }
}

/* Beim Drucken: alles Schmückende weg */
@media print {
  .kopf, .fuss, .laufband, .schublade, .schaufenster-knoepfe, body::before { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   14. Das begehbare Schauregal

   Die Kulisse ist ein FOTO — ein echtes altes Krämerladen-Regal.
   Gezeichnet wird hier nichts mehr: die Stücke sollen in einem
   echten Regal stehen, nicht in einer Zeichnung.

   Die Brettkanten des Fotos sind einmal ausgemessen und stehen in
   laden.js unter KULISSEN. laden.js rechnet daraus aus, wo ein Stück
   stehen muss — auch wenn das Bild beschnitten wird (Handy).
   ============================================================ */

.schauregal-rahmen {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
}

.schauregal {
  position: relative;
  aspect-ratio: var(--kulisse, 16 / 9);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: #2A1E14;
  box-shadow: 0 24px 60px -34px var(--schatten),
              inset 0 0 0 1px color-mix(in oklab, var(--tinte) 22%, transparent);
}
/* Auf schmalen Geräten wird das Foto seitlich beschnitten statt geschrumpft —
   sonst wäre das Regal ein Streifen und die Stücke briefmarkengroß. */
@media (max-width: 52rem) { .schauregal { aspect-ratio: 4 / 5; } }
@media (max-width: 30rem) { .schauregal { aspect-ratio: 3 / 4; } }

/* Ab Tabletbreite ist das Regal ein Herobild: volle Fensterhöhe, randlos.

   Die Breite wird AUS DER HÖHE gerechnet (`--kulisse-quer`, setzt laden.js aus
   den Maßen des Regalfotos) und erst dann auf die Fensterbreite gedeckelt.
   Ohne diesen Deckel würde `object-fit: cover` auf einem breiten, flachen
   Fenster oben und unten beschneiden — und damit das oberste und unterste
   Brett abschneiden. Seitlich beschneiden ist dagegen harmlos: laden.js
   kennt über `sichtbarVon`/`sichtbarBis`, was wirklich zu sehen ist, und
   stellt nur dorthin. */
@media (min-width: 52.0625rem) {
  .huelle--weit { width: 100%; }
  .schauregal {
    aspect-ratio: auto;
    height: 100svh;
    width: min(100%, calc(100svh * var(--kulisse-quer, 1.79)));
    margin-inline: auto;
    border-radius: 0;
  }
  /* Randlos heißt randlos — der Rahmen drumherum darf nicht mehr drücken. */
  .schauregal-rahmen { padding-bottom: 0; }
}

.regal-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  user-select: none; -webkit-user-drag: none;
}

/* Die Messingleiste vor jedem Brett, noch einmal über die Stücke gelegt.
   Derselbe Bildausschnitt in derselben cover-Geometrie wie .regal-foto —
   deshalb sitzt sie deckungsgleich. Den Beschnitt setzt laden.js. */
.regal-leiste {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

/* --- Ein Stück im Regal --- */
.stueck {
  position: absolute;
  display: block;
  transform: translateX(-50%);
  transform-origin: bottom center;
  text-decoration: none; color: inherit;
  transition: transform var(--weich);
  z-index: 2;
}
.stueck img {
  height: 100%; width: auto; max-width: none;
  object-fit: contain; object-position: bottom center;
  display: block;
}

/* Das eigentliche Stück. Die Schlagschatten sitzen HIER und nicht am
   Container — sonst bekäme der geworfene Schatten (siehe unten) selbst
   noch einmal Schatten und würde matschig.
   Drei Lagen: ein harter Saum direkt am Körper, ein mittlerer Wurf und ein
   weiter, weicher in den Fachraum. */
.stueck-bild { transition: filter var(--weich); }   /* Filter: siehe Fachlicht */

/* Der GEWORFENE Schatten: dasselbe Bild, flachgelegt und nach rechts
   gekippt (das Licht kommt von links). Dadurch hat der Schatten die echte
   Silhouette — ein Kürbis mit Beinen wirft Beine, ein Schriftzug wirft
   Buchstaben. Keine zusätzliche Datei: das Bild ist schon geladen.
   Nach hinten weg wird er weicher und blasser, wie in Wirklichkeit. */
.stueck-wurf {
  position: absolute; left: 0; bottom: 0;
  transform-origin: bottom left;
  transform: skewX(-46deg) scaleY(.26);
  filter: blur(5px) brightness(0);
  opacity: .5;
  pointer-events: none;
  z-index: -2;
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, .35) 62%, transparent 100%);
          mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, .35) 62%, transparent 100%);
  transition: transform var(--weich), filter var(--weich), opacity var(--weich);
}
/* Angehoben: das Stück wird aus dem Regal genommen. Es steigt, wird eine
   Spur größer — und weil es weiter von der Standfläche weg ist, wandert der
   Schatten nach unten, wird größer und weicher statt dunkler. Genau daran
   liest das Auge Höhe ab. Es steigt über die Messingleiste (z-index 5). */
.stueck:hover, .stueck:focus-visible {
  transform: translateX(-50%) translateY(-16px) scale(1.06);
  z-index: 5;
}
/* Die Schatten des angehobenen Stücks stehen weiter unten beim Fachlicht —
   sie müssen die Helligkeit des Fachs mitnehmen und dürfen deshalb nicht
   zweimal gesetzt werden. */

/* Angehoben wandert der Wurf weiter weg, wird länger, weicher und blasser. */
.stueck:hover .stueck-wurf, .stueck:focus-visible .stueck-wurf {
  transform: skewX(-54deg) scaleY(.32) translateY(14px);
  filter: blur(11px) brightness(0);
  opacity: .32;
}
.stueck[data-leer='ja'] .stueck-bild {
  filter: grayscale(.65) drop-shadow(1px 1px 1px rgba(0, 0, 0, .6))
          drop-shadow(6px 6px 7px rgba(0, 0, 0, .45));
}

/* Der Schatten, der auf dem Brett liegt. Liegt hinter dem Stück (z-index -1)
   und damit auch hinter der Messingleiste — wie es sich gehört. */
.stueck::before {
  content: ''; position: absolute; left: 56%; bottom: -3px;
  width: 112%; height: 13px; transform: translateX(-50%);
  background: radial-gradient(closest-side at 42% 50%,
              rgba(0, 0, 0, .8), rgba(0, 0, 0, .34) 58%, transparent 80%);
  filter: blur(4px);
  transition: opacity var(--weich), width var(--weich),
              height var(--weich), filter var(--weich), transform var(--weich);
  z-index: -1;
}
.stueck:hover::before, .stueck:focus-visible::before {
  width: 132%; height: 17px; opacity: .55;
  filter: blur(9px);
  transform: translateX(-50%) translateY(9px);
}

/* Das Licht ist nicht in jedem Fach gleich. Aus halloween.jpg gemessen
   (mittlere Leuchtdichte der Rückwand je Fach, in linearem Licht, über die
   nutzbare Breite): oben 0,858 — Mitte 1,118 — unten 1,023, jeweils relativ
   zum Mittel. In sRGB umgerechnet sind das die Werte unten. Die Farbe
   unterscheidet sich dagegen kaum (R/B 8,9 / 8,4 / 8,8), deshalb wird nur
   die Helligkeit nachgezogen und nicht am Farbton gedreht.

   Das läuft ZUR LAUFZEIT, nicht im Freisteller: welches Fach ein Stück
   bekommt, entscheidet erst der Umbruch auf dem jeweiligen Bildschirm. */
.stueck[data-brett='0'] .stueck-bild { --fachlicht: .93; }
.stueck[data-brett='1'] .stueck-bild { --fachlicht: 1.05; }
.stueck[data-brett='2'] .stueck-bild { --fachlicht: 1.01; }
.stueck-bild { filter: brightness(var(--fachlicht, 1))
          drop-shadow(1px 1px 1px rgba(0, 0, 0, .7))
          drop-shadow(5px 5px 5px rgba(0, 0, 0, .5))
          drop-shadow(14px 12px 16px rgba(0, 0, 0, .36)); }
.stueck:hover .stueck-bild, .stueck:focus-visible .stueck-bild {
  filter: brightness(calc(var(--fachlicht, 1) * 1.06))
          drop-shadow(2px 4px 3px rgba(0, 0, 0, .45))
          drop-shadow(10px 18px 14px rgba(0, 0, 0, .4))
          drop-shadow(24px 30px 34px rgba(0, 0, 0, .32))
          drop-shadow(0 0 24px color-mix(in oklab, var(--messing) 45%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .stueck, .stueck::before, .stueck-bild, .stueck-wurf { transition: none; }
  .stueck:hover, .stueck:focus-visible { transform: translateX(-50%); }
}

/* Das Schildchen am Stück */
.stueck-schild {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 6px);
  opacity: 0; pointer-events: none;
  white-space: nowrap;
  background: #17100A; color: #F6EDDF;
  padding: .35rem .7rem; border-radius: 4px;   /* Schildchen, keine Kapsel */
  font: 600 .78rem/1.3 'Inter', sans-serif;
  box-shadow: 0 8px 20px -8px #000, inset 0 0 0 1px rgba(255, 235, 200, .18);
  transition: opacity var(--schnell), transform var(--schnell);
}
.stueck-schild b { font-family: 'Bitter', serif; font-weight: 700; margin-left: .45rem; color: var(--messing); }
.stueck:hover .stueck-schild, .stueck:focus-visible .stueck-schild {
  opacity: 1; transform: translate(-50%, 0);
}
@media (hover: none) {
  /* Ohne Maus gibt es kein Überfahren — Schilder immer zeigen */
  .stueck-schild { opacity: 1; transform: translate(-50%, 0); font-size: .68rem; padding: .22rem .5rem; }
}

/* --- Kopfzeile des Regals --- */
.regal-kopfleiste {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.regal-saison {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .78rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase;
}

/* --- Leeres Regal --- */
.regal-leer {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: 2rem; z-index: 3;
  color: #D8C6AC; text-shadow: 0 2px 8px #000;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.55), transparent 75%);
}
.regal-leer strong { display: block; font-family: 'Bitter', serif; font-size: 1.25rem; color: #F6EDDF; margin-bottom: .3rem; }

/* ============================================================
   16. Größenauswahl auf der Produktseite

   Ein Stück, mehrere Größen. Die Knöpfe zeigen Name UND Preis —
   niemand soll erst klicken müssen, um zu erfahren, was es kostet.
   ============================================================ */

.groessen-titel {
  font: 600 .82rem/1 'Inter', sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-weich);
  margin: 1.6rem 0 .7rem;
}

.groessenwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: .6rem;
  margin-bottom: .4rem;
}

.groesse {
  display: flex; flex-direction: column; align-items: start; gap: .15rem;
  padding: .8rem .95rem;
  background: var(--karte);
  border: 2px solid var(--kante);
  border-radius: var(--radius-s);
  cursor: pointer; text-align: left;
  color: var(--text);
  transition: border-color var(--schnell), background var(--schnell), transform var(--schnell);
}
.groesse:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--rost) 55%, transparent);
  transform: translateY(-1px);
}
.groesse[aria-checked='true'] {
  border-color: var(--rost);
  background: color-mix(in oklab, var(--rost) 9%, var(--karte));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rost) 35%, transparent);
}
.groesse:disabled {
  opacity: .5; cursor: not-allowed;
  background: color-mix(in oklab, var(--text) 5%, transparent);
}

.groesse-name  { font: 650 1rem/1.2 'Bitter', Georgia, serif; }
.groesse-preis {
  font: 600 .95rem/1.2 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--rost);
}
.groesse[aria-checked='true'] .groesse-preis { color: var(--rost); }
.groesse-hinweis {
  font: 500 .74rem/1.2 'Inter', sans-serif;
  color: var(--warnung);
  margin-top: .1rem;
}
.groesse:disabled .groesse-hinweis { color: var(--text-weich); }

/* Der große Preis oben wechselt mit der Auswahl — kurz aufblitzen lassen,
   damit die Änderung nicht übersehen wird. */
@media (prefers-reduced-motion: no-preference) {
  .ware-preis-gross { transition: color var(--schnell); }
}

/* --- Versand oder Abholung im Korb -------------------------------
   Zwei echte Schalter, keine Schlagwort-Kapseln: der Kunde soll die
   Summe daneben ändern können, ohne erst zu Stripe zu müssen. */
.versandwahl {
  border: 1px solid var(--kante-zart);
  border-radius: var(--radius-s);
  padding: .7rem .8rem .8rem;
  margin: 0 0 1rem;
  display: grid;
  gap: .15rem;
}
.versandwahl legend {
  padding: 0 .3rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-weich);
  font-family: Inter, sans-serif;
}
.versandwahl label {
  /* Drei Spalten statt flex: bricht der Text um, bleibt der Preis trotzdem
     in seiner eigenen Spalte rechts stehen. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem .4rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  line-height: 1.35;
}
.versandwahl label:hover { background: color-mix(in oklab, var(--messing) 10%, transparent); }
.versandwahl input[type='radio'] {
  width: 1.05rem; height: 1.05rem; margin: 0;
  accent-color: var(--rost);
}
.versandwahl span { min-width: 0; }
.versandwahl b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 650;
}
.versandwahl label:has(input:checked) {
  background: color-mix(in oklab, var(--rost) 9%, transparent);
}

/* --- Farbwahl auf der Warenseite -------------------------------
   Je Teil eine Reihe Farbfelder. Das Radio bleibt für Tastatur und
   Vorleser im Spiel, sichtbar ist der Farbtupfer mit Namen. */
.farbwahl { margin: 1.2rem 0 .4rem; display: grid; gap: .9rem; }
.farbgruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.farbgruppe legend {
  padding: 0; margin-bottom: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.farbgruppe-wert { font-weight: 450; color: var(--text-weich); }
.farbreihe { display: flex; flex-wrap: wrap; gap: .45rem; }
.farbfeld {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .7rem .42rem .5rem;
  border: 1px solid var(--kante-zart);
  border-radius: var(--radius-s);
  font-size: .9rem; line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--schnell, .15s), background-color var(--schnell, .15s);
}
.farbfeld:hover { background: color-mix(in oklab, var(--messing) 9%, transparent); }
.farbfeld input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.farbfeld:has(input:checked) {
  border-color: var(--rost);
  background: color-mix(in oklab, var(--rost) 10%, transparent);
  font-weight: 600;
}
.farbfeld:has(input:focus-visible) { outline: 2px solid var(--rost); outline-offset: 2px; }
.farbtupfen {
  display: inline-block; flex: none;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 25%, transparent),
              0 1px 2px color-mix(in oklab, #000 30%, transparent);
}
.farbwahl-hinweis { margin: 0; font-size: .82rem; color: var(--text-weich); }

/* Farbangabe in Korb und Schublade */
.farbzeile {
  display: flex; flex-wrap: wrap; gap: .25rem .8rem;
  margin: .15rem 0 .25rem; font-size: .82rem; color: var(--text-weich);
}
.farbzeile span { display: inline-flex; align-items: center; gap: .35rem; }
.farbzeile .farbtupfen { width: .8rem; height: .8rem; }

/* Farbbild-Wechsel auf der Warenseite: kurz abblenden, dann das neue Foto */
#galeriebild { transition: opacity var(--schnell), filter var(--schnell); }
#galeriebild.galerie-wechsel { opacity: .35; filter: blur(2px); }

/* „Deine Farben" vorn in der Bildleiste: Bildchen mit kleiner Beschriftung */
.galerie-farbbild { position: relative; }
.galerie-farbbild span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .15rem .2rem; font: 600 .62rem/1.2 Inter, sans-serif; text-align: center;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.galerie-streifen[hidden], .galerie-farbbild[hidden] { display: none; }

/* --- Stopper fürs Regal: hüpfende Stücke + tippende Hand ------------------
   Beim ersten Mal, wenn das Regal gut im Bild ist (laden.js, regalAnstossen).
   Das Hüpfen läuft über die Einzel-Eigenschaften translate/scale, damit es
   sich mit dem transform (translateX(-50%), Hover-Anheben) nicht beißt. */
@keyframes regal-hop {
  0%   { translate: 0 0;     scale: 1 1; }
  14%  { translate: 0 0;     scale: 1.05 .93; }    /* in die Knie */
  42%  { translate: 0 -16%;  scale: .97 1.04; }    /* oben */
  70%  { translate: 0 0;     scale: 1.04 .95; }    /* landen */
  86%  { translate: 0 -2%;   scale: .99 1.01; }
  100% { translate: 0 0;     scale: 1 1; }
}
@keyframes regal-hop-schatten {
  0%, 14%, 100% { opacity: 1;   scale: 1 1; }
  42%           { opacity: .35; scale: .72 .8; }
  70%           { opacity: 1;   scale: 1.06 1; }
}
.stueck.hopst {
  animation: regal-hop 620ms cubic-bezier(.33, .7, .35, 1) var(--hop-verzug, 0ms) 2 both;
}
.stueck.hopst::before {
  animation: regal-hop-schatten 620ms cubic-bezier(.33, .7, .35, 1) var(--hop-verzug, 0ms) 2 both;
}

/* Die Hand: Fingerspitze zeigt aufs Stück, tippt im Takt, darunter ein Wellenring.
   Normale Schrift mit Schatten — kein Kasten, keine Kapsel. */
.regal-tipp {
  position: absolute; z-index: 7; pointer-events: none;
  display: grid; justify-items: start; gap: .35rem;
  translate: -8px 0;
  color: #fff; font: 700 clamp(1rem, .9rem + .45vw, 1.3rem)/1.2 Inter, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .75);
  animation: tipp-ein 380ms cubic-bezier(.2, .8, .3, 1) both;
}
.regal-tipp svg {
  width: clamp(3.4rem, 2.6rem + 2.4vw, 4.8rem); height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  transform-origin: 30% 10%;
  animation: tipp-tap 1.15s ease-in-out .2s infinite;
}
.regal-tipp span { white-space: nowrap; margin-left: .2rem; }
/* Dunkler Lichthof hinter Hand und Text — kein Kasten, nur weiches Dunkel */
.regal-tipp::after {
  content: ''; position: absolute; z-index: -1; left: -2.5rem; top: -2rem;
  width: calc(100% + 5rem); height: calc(100% + 4rem);
  background: radial-gradient(closest-side, rgba(10, 6, 3, .62), rgba(10, 6, 3, .3) 55%, transparent);
  filter: blur(6px);
}
.regal-tipp::before {                       /* Wellenring unter der Fingerspitze */
  content: ''; position: absolute; left: 8px; top: 0;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  translate: -50% -50%;
  border: 2px solid color-mix(in oklab, var(--messing) 85%, #fff);
  box-shadow: 0 0 18px color-mix(in oklab, var(--messing) 70%, transparent);
  opacity: 0;
  animation: tipp-ring 1.15s ease-out .45s infinite;
}
.regal-tipp--weg { animation: tipp-aus 400ms ease both; }
@keyframes tipp-ein  { from { opacity: 0; transform: translateY(14px); } }
@keyframes tipp-aus  { to   { opacity: 0; transform: translateY(8px); } }
@keyframes tipp-tap  { 0%, 55%, 100% { transform: translate(0, 0) scale(1); }
                       25% { transform: translate(-2px, 5px) scale(.9); } }
@keyframes tipp-ring { 0% { opacity: .95; scale: .25; } 80%, 100% { opacity: 0; scale: 1.25; } }

/* Das angetippte Stück hebt sich kurz an — wie beim Hover */
.stueck.angetippt { transform: translateX(-50%) translateY(-10px) scale(1.04); z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .stueck.hopst, .stueck.hopst::before { animation: none; }
  .regal-tipp, .regal-tipp svg, .regal-tipp::before { animation: none; }
  .regal-tipp::before { opacity: .8; scale: .8; }
}