@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/youngserif-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/youngserif-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrumentsans-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrumentsans-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Teehandlung Ohlsen — Mustershop. Regal und Etikett: dunkles Regalgrün, cremefarbene Etiketten, Messing.
   Kontraste vorab gerechnet: Creme auf Grün 13,4:1 · Grün-hell auf Grün 8,6:1 · Messing auf Grün 6,6:1 ·
   Tinte-2 auf Creme 6,3:1 · Rot auf Creme 6,0:1 · Grün auf Messing (Knopf) 6,6:1. */
:root {
  --gruen: #14281F; --gruen-2: #1A3429; --gruen-3: #234638; --grund-tief: #0F1F18;
  --creme: #F2EAD8; --creme-2: #E6DBC3; --papier: #FBF7EE;
  --tinte: #1C1A14; --tinte-2: #5B5346;
  --hell: #F2EAD8; --hell-2: #B8C4B6;
  --messing: #C9A45C; --messing-2: #E2C482; --messing-tief: #7D5F27;
  --rot: #9E3127;
  --eiche: #9A774B; --eiche-2: #5E4429;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(16px, 4vw, 56px);
  --abstand: clamp(64px, 9vw, 128px);
  --sanft: cubic-bezier(.22, .8, .24, 1);
  --feder: cubic-bezier(.34, 1.4, .5, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--gruen); color: var(--hell); font: 400 1.0625rem/1.6 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--creme); color: var(--tinte); border-radius: 6px; }
.sprung:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--messing-2); outline-offset: 3px; }
.js .ohne-js { display: none; }
.ohne-js { margin-top: 12px; color: var(--hell-2); font-size: .9375rem; }

/* ------------------------------------------------------------ Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--messing); color: var(--gruen); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .25);
  transition: background-color .2s, transform .2s var(--sanft); }
.knopf:hover { background: var(--messing-2); transform: translateY(-1px); }
.knopf:active { transform: translateY(1px); }
.knopf.breit { width: 100%; }
.knopf-leise { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 600; }

/* ------------------------------------------------------------ Kopf: Ladenschild */
.muster-leiste { background: var(--creme-2); color: var(--tinte); font-size: .875rem; text-align: center; padding: 7px var(--rand); }
.muster-leiste a { color: var(--tinte); font-weight: 600; display: inline-block; padding-block: 2px; }
.schild { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; padding: 22px var(--rand); border-bottom: 1px solid rgba(242, 234, 216, .14); }
.marke { display: grid; text-decoration: none; margin-right: auto; }
.marke-name { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--hell); }
.marke-zusatz { margin-top: 4px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hell-2); }
.schild nav ul { display: flex; gap: 4px 26px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.schild nav a { display: inline-block; padding-block: 10px; text-decoration: none; font-weight: 500; background: linear-gradient(var(--messing), var(--messing)) 0 calc(100% - 6px) / 0 2px no-repeat; transition: background-size .3s var(--sanft); }
.schild nav a:hover, .schild nav a[aria-current] { background-size: 100% 2px; }
.tuete-knopf { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px 8px 14px; border: 1.5px solid var(--messing); border-radius: 999px; text-decoration: none; font-weight: 600; transition: background-color .2s; }
.tuete-knopf:hover { background: rgba(201, 164, 92, .14); }
.tuete-zahl { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 999px; background: var(--messing); color: var(--gruen); font-size: .875rem; font-weight: 700; }
.tuete-zahl.huepf, .tuete-schwebe.huepf { animation: huepf .5s var(--feder); }
@keyframes huepf { 40% { transform: scale(1.35); } }
.tuete-schwebe { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--messing); color: var(--gruen); font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.tuete-schwebe[hidden] { display: none; }

/* ------------------------------------------------------------ Schaufenster */
.fenster { padding: clamp(20px, 3vw, 40px) var(--rand) 0; }
.scheibe { position: relative; margin: 0; overflow: hidden; border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px; background: var(--grund-tief); box-shadow: 0 0 0 10px var(--eiche-2), 0 0 0 12px rgba(0, 0, 0, .35), 0 30px 60px rgba(0, 0, 0, .45); }
.scheibe img { width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; }
.scheibe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 12, .72) 0%, rgba(8, 16, 12, .25) 42%, rgba(8, 16, 12, 0) 60%); pointer-events: none; }
.scheibe::before { content: ""; position: absolute; inset: -20% -40%; z-index: 2; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; }
.bewegt .scheibe::before { animation: spiegeln 2.6s .5s var(--sanft) both; }
@keyframes spiegeln { to { transform: translateX(60%); } }
.scheibe-schrift { position: absolute; z-index: 1; inset: 9% 0 auto; text-align: center; }
.scheibe-schrift h1 { color: #E8C987; font-size: clamp(2.6rem, 8.4vw, 7.4rem); line-height: .95; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(60, 40, 10, .8), 0 2px 18px rgba(0, 0, 0, .55); }
.sch-klein { display: block; margin-bottom: .2em; font-size: .3em; letter-spacing: .34em; text-transform: uppercase; }
.fenster-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 5vw, 60px) 0; max-width: 1180px; margin-inline: auto; }
.fenster-zeile > p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; max-width: 46ch; }
.tuerschild { position: relative; margin: 0; padding: 18px 24px; border-radius: 10px; background: var(--creme); color: var(--tinte); display: grid; gap: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.tuerschild::before, .tuerschild::after { content: ""; position: absolute; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #EFD9A6, var(--messing-tief)); }
.tuerschild::before { left: 10px; } .tuerschild::after { right: 10px; }
.tuerschild div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.tuerschild dt { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); padding-top: 3px; }
.tuerschild dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------ Regal */
.regal { padding: var(--abstand) var(--rand); max-width: 1320px; margin-inline: auto; }
.regal-kopf { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(24px, 5vw, 72px); align-items: end; margin-bottom: 32px; }
.regal-kopf h2, .tafel h2, .laden-text h2, .nachbarn h2, .aufguss-karte h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.regal-kopf p { color: var(--hell-2); max-width: 58ch; }
.schubladen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: 14px; background: var(--eiche-2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.schublade { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 92px; padding: 14px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, #24493A, var(--gruen-2)); color: var(--hell); font-weight: 600; font-size: .98rem; line-height: 1.25; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(242, 234, 216, .1), inset 0 -3px 0 rgba(0, 0, 0, .3); transition: transform .35s var(--sanft), background-color .3s, box-shadow .35s; }
.griff { width: 52px; height: 9px; border-radius: 9px; background: linear-gradient(180deg, var(--messing-2), var(--messing-tief)); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.schublade:hover { transform: translateY(-2px); }
.schublade[aria-pressed="true"] { background: var(--creme); color: var(--tinte); transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0, 0, 0, .4); }
.regal-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 20px 0 40px; }
.schalter { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; }
.schalter input { appearance: none; width: 46px; height: 26px; margin: 0; border-radius: 26px; background: var(--gruen-3); border: 1.5px solid var(--hell-2); position: relative; cursor: pointer; transition: background-color .2s; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--hell); transition: transform .3s var(--feder); }
.schalter input:checked { background: var(--messing); border-color: var(--messing); }
.schalter input:checked::after { transform: translateX(20px); background: var(--gruen); }
.sortierung { display: inline-flex; align-items: center; gap: 10px; }
.sortierung select { min-height: 44px; padding: 8px 36px 8px 14px; border: 1.5px solid var(--hell-2); border-radius: 8px; background: var(--gruen-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EAD8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; appearance: none; }
.regal-zahl { margin-left: auto; color: var(--hell-2); }
.regal-wand { padding: clamp(18px, 3vw, 36px) clamp(10px, 2vw, 28px) clamp(10px, 2vw, 20px); border-radius: 16px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 180px), linear-gradient(180deg, #19362A, #122A20); box-shadow: inset 0 0 0 1px rgba(242, 234, 216, .06), inset 0 30px 60px rgba(0, 0, 0, .35); }
.fach { margin-bottom: clamp(40px, 5vw, 64px); }
.fach[hidden] { display: none; }
.fach-schild { position: relative; display: inline-grid; gap: 2px; margin: 0 0 22px clamp(4px, 1vw, 14px); padding: 12px 26px 12px 22px; border-radius: 6px; background: var(--creme); color: var(--tinte); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.fach-schild::before, .fach-schild::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #EFD9A6, var(--messing-tief)); }
.fach-schild::before { left: 8px; } .fach-schild::after { right: 8px; }
.fach-schild h3 { font-size: 1.45rem; }
.fach-schild p { font-size: .9rem; color: var(--tinte-2); }
.brett { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 44px; }
.ware { position: relative; padding-inline: clamp(8px, 1.3vw, 16px); }
.ware[hidden] { display: none; }
.ware-bild { display: block; margin-inline: calc(-1 * clamp(8px, 1.3vw, 16px)); padding: 0 clamp(8px, 1.3vw, 16px) 16px; position: relative;
  background: linear-gradient(180deg, #A9865A, var(--eiche) 30%, var(--eiche-2)) left bottom / 100% 16px no-repeat; }
.ware-bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.ware-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px 5px 0 0; transition: transform .45s var(--sanft); }
.ware-bild:hover img { transform: translateY(-5px); }
.etikett { position: relative; z-index: 1; margin: 0 6px; padding: 16px 14px 12px; border-radius: 0 0 6px 6px; background: var(--creme); color: var(--tinte);
  transform: rotate(var(--dreh, 0deg)); transform-origin: 50% 0; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); transition: transform .5s var(--feder); }
.etikett::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 5px; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, var(--messing-2), var(--messing-tief)); }
.ware:hover .etikett, .ware:focus-within .etikett { transform: rotate(0deg); }
.et-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; padding-right: 40px; }
.et-herkunft { margin-top: 2px; font-size: .8125rem; color: var(--tinte-2); }
.et-preis { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(28, 26, 20, .3); }
.et-menge { font-size: .875rem; color: var(--tinte-2); }
.et-preis strong { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--rot); white-space: nowrap; }
.et-grund { font-size: .8125rem; color: var(--tinte-2); }
.etikett-plus { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--gruen); color: var(--creme); transition: background-color .2s, transform .3s var(--feder); }
.etikett-plus:hover { background: var(--gruen-3); transform: scale(1.08); }
.etikett-plus.gelegt { background: var(--messing-tief); }
.bewegt .fach .ware { opacity: 0; transform: translateX(-26px); transition: opacity .6s var(--sanft), transform .8s var(--sanft); transition-delay: calc(var(--i, 0) * 80ms); }
.bewegt .fach.in .ware { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Aufgusstafel */
.aufguss { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; padding: 0 var(--rand) var(--abstand); max-width: 1320px; margin-inline: auto; }
.tafel { padding: clamp(24px, 4vw, 48px); border-radius: 6px; background: #1B1E1B; color: #EDECE4; border: 14px solid var(--eiche-2);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4), inset 0 0 80px rgba(255, 255, 255, .04), 0 20px 40px rgba(0, 0, 0, .4); }
.tafel h2 { color: #EDECE4; }
.tafel-lede { margin: 12px 0 24px; color: #BFC2B8; max-width: 56ch; }
.tafel-huelle { overflow-x: auto; }
.tafel-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; }
.tafel-tabelle th, .tafel-tabelle td { padding: 11px 12px 11px 0; text-align: left; border-bottom: 1px dashed rgba(237, 236, 228, .25); font-variant-numeric: tabular-nums; }
.tafel-tabelle thead th { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: #BFC2B8; font-weight: 500; }
.tafel-tabelle tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
.tafel-tabelle tbody th a { text-decoration: none; display: inline-block; padding-block: 2px; }
.tafel-tabelle tbody th a:hover { text-decoration: underline; text-underline-offset: 4px; }
.aufguss-bild { margin: 0; border-radius: 8px; overflow: hidden; }
.aufguss-bild img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* ------------------------------------------------------------ Laden */
.laden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: var(--abstand) var(--rand); background: var(--grund-tief); }
.laden-bild { margin: 0; border-radius: 8px; overflow: hidden; }
.laden-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.laden-text { max-width: 560px; }
.laden-text > p { margin: 18px 0 26px; color: var(--hell-2); }
.laden-daten { margin: 0; display: grid; gap: 16px; }
.laden-daten div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid rgba(242, 234, 216, .16); }
.laden-daten dt { color: var(--messing); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.laden-daten dd { margin: 0; }

/* ------------------------------------------------------------ Fuß */
.fuss { padding: clamp(48px, 6vw, 80px) var(--rand) 28px; background: var(--grund-tief); border-top: 1px solid rgba(242, 234, 216, .12); }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1320px; margin-inline: auto; }
.fuss-marke .marke-name { font-size: 2.2rem; margin-bottom: 8px; display: block; }
.fuss-innen p, .fuss-innen li { color: var(--hell-2); font-size: .95rem; }
.fuss-titel { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--messing); margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-block; padding-block: 4px; color: var(--hell); }
.fuss-unten { max-width: 1320px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(242, 234, 216, .12); color: var(--hell-2); font-size: .875rem; }
.fuss-unten a { color: var(--hell); display: inline-block; padding-block: 3px; }

/* ------------------------------------------------------------ Produktseite */
.produkt { padding: 24px var(--rand) var(--abstand); max-width: 1320px; margin-inline: auto; }
.krumen ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0 0 28px; padding: 0; font-size: .9375rem; color: var(--hell-2); }
.krumen li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.krumen a { display: inline-block; padding-block: 6px; color: var(--hell); }
.produkt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.produkt-bild { position: sticky; top: 20px; margin: 0; padding: clamp(10px, 1.6vw, 20px); border-radius: 10px; background: var(--creme); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.produkt-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.p-herkunft { color: var(--messing); font-size: .9375rem; letter-spacing: .04em; }
.produkt-text h1 { margin: 10px 0 18px; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.p-text { font-size: 1.12rem; max-width: 52ch; }
.noten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 30px; padding: 0; }
.noten li { padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(242, 234, 216, .35); font-size: .9375rem; }
.waage { padding: clamp(20px, 3vw, 32px); border-radius: 12px; background: var(--gruen-2); box-shadow: inset 0 0 0 1px rgba(242, 234, 216, .1); }
.waage fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.waage legend { padding: 0; font-family: var(--serif); font-size: 1.45rem; margin-bottom: 14px; }
.waage-anzeige { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px 24px; align-items: end; }
.waage-svg { width: 100%; overflow: visible; }
.w-skala { fill: none; stroke: var(--hell-2); stroke-width: 1.5; }
.w-ticks line { stroke: var(--hell-2); stroke-width: 1.2; }
.w-ticks .t-lang { stroke: var(--hell); stroke-width: 2; }
.w-zahlen text { fill: var(--hell-2); font: 500 12px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.w-einheit { fill: var(--hell-2); font: 500 11px var(--sans); text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; }
.w-zeiger { transform: rotate(-90deg); transition: transform 1s var(--feder); }
.w-zeiger line { stroke: var(--messing-2); stroke-width: 3; stroke-linecap: round; }
.w-zeiger circle { fill: var(--messing); stroke: var(--gruen); stroke-width: 2; }
.waage-preis { display: grid; gap: 4px; padding-bottom: 6px; }
.waage-preis strong { white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.waage-preis span { color: var(--hell-2); font-size: .9375rem; }
.gewichte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.gewicht { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 10px; cursor: pointer; text-align: center; border: 1.5px solid rgba(242, 234, 216, .2); transition: border-color .2s, background-color .2s, transform .3s var(--feder); }
.gewicht input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gw-stueck { position: relative; display: grid; justify-items: center; padding: 12px 18px 8px; min-width: 88px; border-radius: 6px 6px 12px 12px; background: linear-gradient(180deg, var(--messing-2), var(--messing) 60%, #B08F4A); color: var(--gruen); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); }
.gw-stueck::before { content: ""; position: absolute; top: -9px; left: 50%; width: 24px; height: 12px; margin-left: -12px; border: 3px solid var(--messing); border-bottom: 0; border-radius: 12px 12px 0 0; }
.gw-stueck b { font-size: 1.05rem; }
.gw-stueck small { font-size: .78rem; font-weight: 600; }
.gw-preis { margin-top: 6px; font-weight: 600; }
.gw-grund { font-size: .78rem; color: var(--hell-2); }
.gewicht:has(input:checked) { border-color: var(--messing); background: rgba(201, 164, 92, .1); transform: translateY(-3px); }
.gewicht:has(input:focus-visible) { outline: 3px solid var(--messing-2); outline-offset: 3px; }
.steuer { margin-top: 16px; color: var(--hell-2); font-size: .9375rem; }
.steuer a { color: var(--hell); display: inline-block; padding-block: 3px; }
.kauf-zeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.kauf-zeile .knopf { flex: 1 1 200px; }
.stueck { display: inline-flex; align-items: center; border: 1.5px solid rgba(242, 234, 216, .35); border-radius: 999px; }
.stueck button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.stueck button:hover { background: rgba(242, 234, 216, .1); }
.stueck input { width: 44px; border: 0; background: transparent; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.stueck input::-webkit-inner-spin-button, .stueck input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.aufguss-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; margin-top: var(--abstand); padding: clamp(24px, 4vw, 48px); border-radius: 12px; background: var(--creme); color: var(--tinte); }
.aufguss-karte h2 { grid-column: 1 / -1; color: var(--tinte); font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.aufguss-daten { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.aufguss-daten div { padding-top: 12px; border-top: 2px solid var(--tinte); }
.aufguss-daten dt { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.aufguss-daten dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.3rem; }
.teeuhr { position: relative; display: grid; justify-items: center; gap: 10px; width: 200px; }
.uhr-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.ur-spur { fill: none; stroke: var(--creme-2); stroke-width: 9; }
.ur-wert { fill: none; stroke: var(--messing-tief); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.uhr-zeit { position: absolute; top: 46px; left: 0; right: 0; text-align: center; font-family: var(--serif); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.teeuhr .knopf-leise { color: var(--tinte); }
.uhr-fertig { min-height: 1.4em; font-weight: 600; color: var(--rot); text-align: center; }
.aufschlagen { max-width: 30ch; color: var(--tinte-2); }
.nachbarn { margin-top: var(--abstand); }
.nachbarn h2 { margin-bottom: 28px; }
.nachbarn .brett { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }

/* ------------------------------------------------------------ Tüte */
.tuete-seite, .kasse-seite { padding: clamp(28px, 4vw, 56px) var(--rand) var(--abstand); max-width: 1320px; margin-inline: auto; }
.tuete-raster, .kasse-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tuete-liste h1, .kasse h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 26px; }
.posten { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.posten li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; gap: 8px 18px; align-items: center; padding: 14px; border-radius: 10px; background: var(--creme); color: var(--tinte); }
.posten li.weg { opacity: 0; transform: translateX(30px); transition: opacity .3s, transform .35s var(--sanft); }
.posten img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.po-name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.po-name a { text-decoration: none; display: inline-block; padding-block: 2px; }
.po-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.po-info { font-size: .9rem; color: var(--tinte-2); }
.posten .stueck { border-color: rgba(28, 26, 20, .3); }
.posten .stueck button:hover { background: rgba(28, 26, 20, .08); }
.po-summe { min-width: 6.5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.po-weg { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--tinte-2); }
.po-weg:hover { background: rgba(28, 26, 20, .08); color: var(--rot); }
.tuete-leer { display: grid; gap: 18px; justify-items: start; padding: 28px; border-radius: 10px; border: 1.5px dashed rgba(242, 234, 216, .3); }
.tuete-leer[hidden] { display: none; }
.tuete-summe { position: sticky; top: 20px; padding: clamp(22px, 3vw, 32px); border-radius: 12px; background: var(--gruen-2); box-shadow: inset 0 0 0 1px rgba(242, 234, 216, .1); }
.tuete-summe[hidden] { display: none; }
.tuete-summe h2 { font-size: 1.9rem; margin-bottom: 18px; }
.glas { position: relative; width: 74px; height: 92px; margin-bottom: 12px; border: 3px solid var(--hell-2); border-top: 0; border-radius: 0 0 16px 16px; overflow: hidden; }
.glas-tee { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fuell, 0) * 100%); background: linear-gradient(180deg, #D49A4A, #8E4F1E); transition: height 1.1s var(--sanft); }
.glas-tee::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255, 230, 180, .45); }
.frei-text { color: var(--hell-2); margin-bottom: 18px; }
.frei-text strong { color: var(--hell); }
.summe-liste { margin: 0 0 12px; display: grid; gap: 8px; }
.summe-liste div { display: flex; justify-content: space-between; gap: 16px; }
.summe-liste dd { margin: 0; font-variant-numeric: tabular-nums; }
.summe-liste .gesamt { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(242, 234, 216, .2); font-size: 1.25rem; font-weight: 700; }
.tuete-summe .knopf { margin-top: 18px; }
.zahlarten { margin-top: 14px; color: var(--hell-2); font-size: .875rem; text-align: center; }

/* ------------------------------------------------------------ Kasse */
.form-notiz { margin: -12px 0 26px; padding: 10px 14px; border-radius: 8px; background: rgba(201, 164, 92, .14); color: var(--hell); font-size: .9375rem; }
.schritt { margin: 0 0 22px; padding: clamp(18px, 3vw, 28px); border: 0; border-radius: 12px; background: var(--gruen-2); box-shadow: inset 0 0 0 1px rgba(242, 234, 216, .1); min-width: 0; }
.schritt legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font-family: var(--serif); font-size: 1.4rem; }
.schritt legend + * { clear: both; }
.s-nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--messing); color: var(--gruen); font: 700 1rem var(--sans); }
.feld { display: grid; gap: 6px; margin-bottom: 14px; }
.feld span { font-size: .9375rem; font-weight: 500; }
.feld input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1.5px solid transparent; border-radius: 8px; background: var(--creme); color: var(--tinte); }
.feld input:focus { border-color: var(--messing); outline: none; box-shadow: 0 0 0 3px rgba(201, 164, 92, .35); }
.feld input[aria-invalid="true"] { border-color: #E07A6E; }
.feld-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.feld-reihe.schmal { grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); }
.wahl { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid rgba(242, 234, 216, .2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.wahl:has(input:checked) { border-color: var(--messing); background: rgba(201, 164, 92, .1); }
.wahl input { margin: 4px 0 0; width: 20px; height: 20px; accent-color: var(--messing); flex: none; }
.wahl span { display: grid; gap: 2px; }
.wahl small { color: var(--hell-2); font-size: .9rem; }
.haken-feld { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; cursor: pointer; }
.haken-feld input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--messing); flex: none; }
.haken-feld a { color: var(--hell); display: inline-block; padding-block: 1px; }
.form-fehler { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(224, 122, 110, .15); color: #FFD8D2; }
.bon-spalte { position: sticky; top: 20px; }
.bon { position: relative; padding: 28px 26px 40px; background: var(--papier); color: var(--tinte); font-stretch: 82%; font-variant-numeric: tabular-nums; box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.bon-kopf { display: grid; justify-items: center; gap: 2px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1.5px dashed rgba(28, 26, 20, .4); text-align: center; }
.bon-kopf .marke-name { color: var(--tinte); font-size: 1.8rem; }
.bon-kopf span:last-child { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.bon-posten { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 8px; border-bottom: 1.5px dashed rgba(28, 26, 20, .4); }
.bon-posten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: .98rem; }
.bon-posten small { grid-column: 1 / -1; color: var(--tinte-2); font-size: .875rem; }
.bon-leer a { color: var(--tinte); }
.bon-summe { margin: 12px 0 0; display: grid; gap: 6px; }
.bon-summe div { display: flex; justify-content: space-between; gap: 12px; }
.bon-summe dd { margin: 0; }
.bon-summe .gesamt { padding-top: 8px; margin-top: 4px; border-top: 3px double var(--tinte); font-size: 1.3rem; font-weight: 700; }
.bon-summe .klein { font-size: .875rem; color: var(--tinte-2); }
.bon-fuss { margin-top: 18px; text-align: center; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.bestellt { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(8, 16, 12, .7); }
.bestellt[hidden] { display: none; }
.bestellt-karte { max-width: 520px; padding: clamp(24px, 4vw, 40px); border-radius: 14px; background: var(--creme); color: var(--tinte); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.bestellt-karte h2 { font-size: 2rem; margin-bottom: 12px; }
.bestellt-karte p + p { margin-top: 12px; }
.bestellt-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px !important; }
.bestellt-karte .knopf-leise { color: var(--tinte); }
.bewegt .bestellt-karte { animation: auf .5s var(--feder); }
@keyframes auf { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ------------------------------------------------------------ Hinweise, Flug in die Tüte */
.hinweis-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 10px; background: var(--creme); color: var(--tinte); font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--feder), opacity .3s; pointer-events: none; }
.hinweis-toast.an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.hinweis-toast a { color: var(--tinte); margin-left: 6px; display: inline-block; padding-block: 2px; }
.flieger { position: fixed; z-index: 45; border-radius: 6px; pointer-events: none; box-shadow: 0 10px 20px rgba(0, 0, 0, .4); }

/* ------------------------------------------------------------ Rechtliches */
.recht { max-width: 760px; margin-inline: auto; padding: clamp(36px, 5vw, 64px) var(--rand) var(--abstand); }
.recht h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 24px; }
.recht h2 { font-size: 1.5rem; margin: 32px 0 10px; }
.recht p + p { margin-top: 12px; }
.recht a { color: var(--messing-2); display: inline-block; padding-block: 3px; }
.recht .knopf { color: var(--gruen); margin-top: 20px; }
.recht-hinweis { margin: 0 0 24px; padding: 16px 18px; border-radius: 10px; background: var(--creme); color: var(--tinte); }

/* ------------------------------------------------------------ Schmale Bildschirme */
@media (max-width: 1060px) {
  .schubladen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
  .aufguss-daten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fenster-zeile, .regal-kopf, .aufguss, .laden, .produkt-raster, .tuete-raster, .kasse-raster { grid-template-columns: minmax(0, 1fr); }
  .scheibe img { aspect-ratio: 4 / 4.2; }
  .scheibe { border-radius: 50% 50% 12px 12px / 22% 22% 12px 12px; }
  .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nachbarn .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nachbarn .ware:nth-child(3) { display: none; }
  .produkt-bild, .tuete-summe, .bon-spalte { position: static; }
  .aufguss-karte { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .regal-zahl { margin-left: 0; width: 100%; }
  .schild nav { order: 3; width: 100%; }
}
@media (max-width: 560px) {
  .schubladen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schubladen .schublade:first-child { grid-column: 1 / -1; min-height: 64px; }
  .schublade { min-height: 80px; font-size: .94rem; }
  .fuss-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .waage-anzeige { grid-template-columns: minmax(0, 1fr); }
  .waage-svg { max-width: 280px; }
  .gewichte { gap: 6px; }
  .gw-stueck { min-width: 0; width: 100%; padding-inline: 8px; }
  .aufguss-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posten li { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .posten img { width: 72px; height: 72px; }
  .po-summe { grid-column: 2; text-align: left; }
  .posten .stueck { grid-column: 2 / 4; justify-self: start; }
  .po-weg { grid-column: 3; grid-row: 1; }
  .feld-reihe, .feld-reihe.schmal { grid-template-columns: minmax(0, 1fr); }
  .tuerschild div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .laden-daten div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .et-name { font-size: 1.02rem; padding-right: 0; }
  /* Plus sitzt auf der Bildecke über dem Brett, damit der Name die ganze Etikettbreite hat */
  .etikett-plus { top: -64px; right: 2px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
  .etikett { margin-inline: 2px; padding-inline: 10px; }
  .et-preis { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}