/* Onlineshop von mush room in der Gestaltung von mush-room.net („Schaufenster“, gewählt am 03.11.2026):
   Creme als Grund, Papierkästen, Steinpilzbraun für Knöpfe und Hervorhebungen, Tinte für Schrift.
   Schrift Vollkorn von Friedrich Althausen (selbst gehostet, mit Kyrillisch, Lizenz OFL-vollkorn.txt).
   Der Grundbau unten stammt aus der ersten Fassung, der Abschnitt „Schaufenster“ am Ende setzt das Aussehen. */
@font-face {
  font-family: 'Vollkorn Variable'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-latin-ext-wght-italic.woff2) format('woff2-variations');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vollkorn Variable'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Vollkorn Variable'; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/static/schrift/vollkorn-latin-wght-italic.woff2) format('woff2-variations');
  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;
}

:root {
  --grund: #e7e8e8; --grund-2: #dcdddd; --papier: #fbfbfa; --tafel: #ffffff;
  --tinte: #161616; --tinte-2: #3c3d3f; --tinte-3: #626467;
  --linie: #cfd0d0; --linie-2: #b9babb; --blass: #eeeeed; --marke: #e0a601; --fokus: #3d68b0;
  --koralle: #ffbcb2; --koralle-hell: #ffd8d0; --pfirsich: #fdc39c; --pfirsich-hell: #ffdcc2;
  --steinpilz: #f5c894; --steinpilz-hell: #fddfbe; --stroh: #dfd291; --stroh-hell: #eee6bc;
  --apfel: #bfdda2; --apfel-hell: #d9edc6; --salbei: #9be3c3; --salbei-hell: #c3f1dc;
  --himmel: #99dbff; --himmel-hell: #c2ebff; --flieder: #d4c6ff; --flieder-hell: #e7deff;
  --rosa: #fdbbd9; --rosa-hell: #ffd6ea;
  --druckrand: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  --angehoben: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 16px 30px rgba(20, 20, 40, 0.24), 0 3px 6px rgba(20, 20, 40, 0.12);
  --r: 6px; --rand: 24px; --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --schrift: 'Vollkorn Variable', Georgia, 'Times New Roman', serif;
  --kopf: 84px;
  color-scheme: light;
}
@media (max-width: 860px) { :root { --rand: 16px; --kopf: 56px; } }

.ton-koralle { --ton: var(--koralle); --ton-hell: var(--koralle-hell); }
.ton-pfirsich { --ton: var(--pfirsich); --ton-hell: var(--pfirsich-hell); }
.ton-steinpilz { --ton: var(--steinpilz); --ton-hell: var(--steinpilz-hell); }
.ton-stroh { --ton: var(--stroh); --ton-hell: var(--stroh-hell); }
.ton-apfel { --ton: var(--apfel); --ton-hell: var(--apfel-hell); }
.ton-salbei { --ton: var(--salbei); --ton-hell: var(--salbei-hell); }
.ton-himmel { --ton: var(--himmel); --ton-hell: var(--himmel-hell); }
.ton-flieder { --ton: var(--flieder); --ton-hell: var(--flieder-hell); }
.ton-rosa { --ton: var(--rosa); --ton-hell: var(--rosa-hell); }

* { box-sizing: border-box; }
html { background: var(--grund); scroll-padding-top: calc(var(--kopf) + 12px); }
body {
  margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums lining-nums; text-rendering: optimizeLegibility;
}
::selection { background: var(--marke); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
em, .latein { font-style: italic; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.verborgen { 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: 100; background: var(--tinte); color: var(--grund); padding: 10px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }

.display { font-size: clamp(32px, 4vw, 58px); line-height: 1.02; font-stretch: 112%; }
.headline { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.08; font-stretch: 112%; }
.titel { font-size: clamp(15px, 1.4vw, 21px); line-height: 1.12; letter-spacing: -0.01em; font-stretch: 108%; font-weight: 700; }
.etikett { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--tinte-3); }
.text { font-size: 15px; max-width: 64ch; color: var(--tinte-2); }
.text + .text { margin-top: 0.7em; }
.klein { font-size: 13px; color: var(--tinte-3); }

.buehne { padding: 0 var(--rand); display: grid; }
.abschnitt { padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--linie-2); min-width: 0; }
.buehne > .abschnitt:first-child { border-top: 0; padding-top: clamp(14px, 2.2vw, 32px); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.abschnitt-kopf .text { margin-top: 8px; }

/* Knöpfe */
.knopf {
  height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px;
  border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier);
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--tinte);
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--aus);
}
.knopf:hover { background: var(--tafel); border-color: var(--tinte-3); }
.knopf:active { transform: translateY(1px); }
.knopf.voll { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
.knopf.voll:hover { background: var(--tinte-2); }
.knopf.still { border-color: transparent; background: transparent; }
.knopf.still:hover { background: var(--grund-2); }
.knopf.klein { height: 32px; padding: 0 10px; font-size: 13px; }
.knopf.gross { height: 48px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.farbfeld { width: 22px; height: 22px; border-radius: 2px; background: var(--ton, var(--blass)); box-shadow: var(--druckrand); flex: none; }
.zahl-feld { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 3px; background: var(--marke); color: var(--tinte); font-size: 12px; font-weight: 700; }

/* Kopfleiste */
.kopf { position: sticky; top: 0; z-index: 50; height: var(--kopf); display: flex; align-items: center; gap: 28px; padding: 0 var(--rand); margin-bottom: 6px; background: var(--grund); }
.marke { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; }
.marke img { height: 56px; width: auto; }
.marke span { font-size: 13px; font-weight: 600; color: var(--tinte-3); font-stretch: 108%; }
.luecke { flex: 1; }
.reiter { display: flex; padding: 3px; border-radius: 8px; background: var(--grund-2); }
.reiter a { padding: 9px 16px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--tinte-2); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.reiter a:hover { color: var(--tinte); background: color-mix(in srgb, var(--tafel) 55%, transparent); }
.reiter a[aria-current='page'] { background: var(--tinte); color: var(--grund); font-weight: 600; }
.suche-kopf { display: flex; align-items: center; height: 40px; border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier); padding: 0 4px 0 10px; }
.suche-kopf input { border: 0; background: transparent; font: inherit; font-size: 14px; width: 150px; outline: none; color: var(--tinte); }
.suche-kopf button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); }
.suche-kopf button:hover { background: var(--grund-2); }
@media (max-width: 1280px) { .marke span { display: none; } .kopf { gap: 18px; } .suche-kopf input { width: 120px; } }
@media (max-width: 1140px) { .kopf-laden span, .kopf-korb .korb-text { display: none; } .kopf-laden, .kopf-korb { padding: 0 11px; } .reiter a { padding: 9px 12px; } }
@media (max-width: 860px) {
  .kopf { position: relative; height: auto; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .marke img { height: 40px; }
  .reiter { order: 5; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .reiter a { flex: 1 1 auto; text-align: center; padding: 8px 7px; font-size: 13px; }
  .suche-kopf { order: 6; flex-basis: 100%; }
  .suche-kopf input { width: 100%; flex: 1; }
  .kopf-korb .korb-text { display: none; }
}

/* Auftakt der Startseite */
.auftakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.auftakt .display { margin-bottom: 18px; }
.auftakt-bild { border-radius: 2px; overflow: hidden; box-shadow: var(--druckrand); aspect-ratio: 4 / 3; }
.auftakt-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--bild-y, 50%); }
.wegweiser { display: grid; margin-top: 26px; border-top: 1px solid var(--linie); }
.weiser { display: flex; align-items: center; gap: 14px; padding: 13px 8px; border-bottom: 1px solid var(--linie); text-decoration: none; transition: background 0.15s; }
.weiser:hover { background: var(--ton-hell, var(--grund-2)); }
.weiser .name { font-weight: 700; font-stretch: 108%; }
.weiser .zusatz { color: var(--tinte-3); font-size: 13px; }
.weiser .pfeil { margin-left: auto; transition: transform 0.2s var(--aus); }
.weiser:hover .pfeil { transform: translateX(3px); }
.versprechen { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 13px; color: var(--tinte-2); }
.versprechen span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 860px) { .auftakt { grid-template-columns: 1fr; } }

/* Produktraster: Fotos direkt auf dem Grund, darunter Name, lateinischer Name, Preis */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 34px 22px; }
.ware { display: grid; align-content: start; gap: 4px; text-decoration: none; min-width: 0; }
.ware-bild { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--blass); box-shadow: var(--druckrand); margin-bottom: 8px; }
.ware-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--aus); }
.ware:hover .ware-bild img { transform: scale(1.035); }
.ware-name { font-weight: 700; font-stretch: 106%; line-height: 1.2; }
.ware:hover .ware-name { text-decoration: underline; text-underline-offset: 3px; }
.ware .latein { font-size: 13px; color: var(--tinte-3); }
.ware-preis { font-size: 14px; margin-top: 2px; }
.ware-preis .grundpreis { color: var(--tinte-3); font-size: 12.5px; margin-left: 4px; }
.marker { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 2px; font-size: 12px; font-weight: 600; background: var(--ton, var(--papier)); box-shadow: var(--druckrand); }
.marker.ungedruckt, .ungedruckt {
  background-color: color-mix(in srgb, var(--tinte) 4%, var(--tafel));
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tinte) 16%, transparent) 0 1px, transparent 1px 7px);
  color: var(--tinte-3);
}

/* Produktseite */
.produkt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(22px, 3.5vw, 56px); align-items: start; }
.galerie { display: grid; gap: 10px; }
.galerie-gross { aspect-ratio: 4 / 3.4; border-radius: 2px; overflow: hidden; background: var(--blass); box-shadow: var(--druckrand); }
.galerie-gross img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption { font-size: 12.5px; color: var(--tinte-3); }
.galerie-leiste { display: flex; gap: 8px; flex-wrap: wrap; }
.galerie-leiste button { width: 76px; height: 76px; border-radius: 2px; overflow: hidden; box-shadow: var(--druckrand); opacity: 0.75; transition: opacity 0.15s, box-shadow 0.15s; }
.galerie-leiste button[aria-pressed='true'], .galerie-leiste button:hover { opacity: 1; box-shadow: inset 0 0 0 2px var(--tinte); }
.galerie-leiste img { width: 100%; height: 100%; object-fit: cover; }
.kaufen { position: sticky; top: calc(var(--kopf) + 10px); display: grid; gap: 16px; }
.kaufen .latein { color: var(--tinte-3); font-size: 15px; margin-top: 4px; }
.preis-gross { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
.preis-zeile { display: grid; gap: 2px; }
.groessen { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.groessen legend { font-size: 12px; font-weight: 600; color: var(--tinte-3); margin-bottom: 6px; }
.groesse { position: relative; }
.groesse input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.groesse span { display: grid; gap: 1px; min-width: 84px; padding: 8px 12px; border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.groesse small { font-weight: 400; font-size: 12px; color: var(--tinte-3); }
.groesse input:checked + span { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
.groesse input:checked + span small { color: var(--linie); }
.groesse input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
.groesse input:disabled + span { opacity: 0.5; text-decoration: line-through; cursor: not-allowed; }
.menge-zeile { display: flex; gap: 8px; align-items: stretch; }
.menge { width: 72px; height: 48px; border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier); font: inherit; font-size: 16px; text-align: center; }
.menge-zeile .knopf { flex: 1; }
.fakten { display: grid; border-top: 1px solid var(--linie); }
.fakten > div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; color: var(--tinte-2); align-items: start; }
.hinweis-feld { padding: 12px 14px; border-radius: 2px; background: var(--ton, var(--blass)); box-shadow: var(--druckrand); font-size: 14px; }
.hinweis-feld strong { display: block; margin-bottom: 2px; }
.beschreibung { max-width: 70ch; color: var(--tinte-2); }
.beschreibung p, .beschreibung ul { margin: 0 0 0.8em; }
.beschreibung h3 { font-size: 17px; color: var(--tinte); margin: 1.3em 0 0.4em; font-stretch: 108%; }
.beschreibung ul { padding-left: 1.1em; }
.beschreibung li { margin-bottom: 0.25em; }
@media (max-width: 900px) { .produkt { grid-template-columns: 1fr; } .kaufen { position: static; } }

/* Formulare */
.feldgruppe { display: grid; gap: 14px; }
.feldzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feldzeile.drittel { grid-template-columns: 1fr 2fr; }
@media (max-width: 600px) { .feldzeile, .feldzeile.drittel { grid-template-columns: 1fr; } }
label.eingabe { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinte-2); }
label.eingabe small { font-weight: 400; color: var(--tinte-3); }
.eingabe input, .eingabe select, .eingabe textarea, input.eingabe, select.eingabe, textarea.eingabe {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--papier); font: inherit; font-size: 15px; font-weight: 400; color: var(--tinte);
}
.eingabe textarea, textarea.eingabe { min-height: 90px; resize: vertical; }
.eingabe input:focus, .eingabe select:focus, .eingabe textarea:focus { border-color: var(--tinte-3); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 25%, transparent); }
.wahl { display: grid; border-top: 1px solid var(--linie); }
.wahl label { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 13px 8px; border-bottom: 1px solid var(--linie); cursor: pointer; }
.wahl label:hover { background: var(--grund-2); }
.wahl input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tinte); }
.wahl .name { font-weight: 600; }
.wahl .zusatz { display: block; font-size: 13px; color: var(--tinte-3); font-weight: 400; margin-top: 2px; }
.wahl label.aus { opacity: 0.45; cursor: not-allowed; }
.haken { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--tinte-2); cursor: pointer; }
.haken input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tinte); }
.fehler { padding: 12px 14px; border-radius: 2px; background: var(--koralle); box-shadow: var(--druckrand); font-size: 14px; }
.fehler ul { margin: 4px 0 0; padding-left: 1.1em; }
.erfolg { padding: 12px 14px; border-radius: 2px; background: var(--salbei); box-shadow: var(--druckrand); font-size: 14px; }
.honig { position: absolute; left: -5000px; }

/* Warenkorb, Kasse, Übersichten */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(22px, 3.5vw, 56px); align-items: start; }
@media (max-width: 960px) { .zweispaltig { grid-template-columns: 1fr; } }
.posten { display: grid; border-top: 1px solid var(--linie); }
.posten-zeile { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); align-items: center; }
.posten-zeile img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; box-shadow: var(--druckrand); }
.posten-zeile .name { font-weight: 700; text-decoration: none; }
.posten-zeile .name:hover { text-decoration: underline; }
.posten-zeile .klein { margin-top: 2px; }
.posten-rechts { display: grid; justify-items: end; gap: 6px; }
.posten-rechts form { display: flex; gap: 6px; align-items: center; }
.posten-rechts input[type=number] { width: 58px; height: 32px; border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier); font: inherit; text-align: center; }
.summen { display: grid; gap: 8px; padding: 16px; border-radius: 2px; background: var(--papier); box-shadow: var(--druckrand); }
.summen > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summen .gesamt { font-size: 18px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--linie); }
.summen .klein { justify-content: flex-end; }
.kasten-titel { font-size: 13px; font-weight: 700; color: var(--tinte-3); margin-bottom: 8px; }
.angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; }
.angaben h3 { font-size: 14px; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.angaben h3 a { font-weight: 400; font-size: 13px; color: var(--tinte-3); }
.angaben p { color: var(--tinte-2); font-size: 14px; white-space: pre-line; }
.girocode { display: flex; gap: 18px; align-items: start; flex-wrap: wrap; }
.girocode svg { width: 150px; height: 150px; border-radius: 2px; box-shadow: var(--druckrand); background: #fff; }
.bank { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.bank dt { color: var(--tinte-3); }
.bank dd { margin: 0; font-weight: 600; }
.zustand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 2px; background: var(--ton, var(--blass)); box-shadow: var(--druckrand); font-size: 13px; font-weight: 600; }

/* Textseiten */
.textseite { max-width: 760px; display: grid; gap: 12px; }
.textseite h2.titel { margin-top: 18px; }
.textseite ul { padding-left: 1.1em; margin: 0; }
.textseite li { margin-bottom: 4px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: 12px; color: var(--tinte-3); font-weight: 600; }
.tabelle td.rechts, .tabelle th.rechts { text-align: right; }

/* Fuß */
.fuss { padding: 28px var(--rand) 40px; }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 40px; border-top: 1px solid var(--linie-2); padding-top: 26px; }
.fuss-logo { height: 26px; width: auto; }
.fuss-zeile { font-size: 13px; color: var(--tinte-3); max-width: 70ch; margin-top: 12px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin-top: 14px; }
.fuss-links a { color: var(--tinte-2); text-decoration: none; }
.fuss-links a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.widerruf-knopf { margin-top: 14px; }
.newsletter form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.newsletter input[type=email] { flex: 1; min-width: 200px; height: 40px; padding: 0 12px; border: 1px solid var(--linie-2); border-radius: var(--r); background: var(--papier); font: inherit; }
@media (max-width: 860px) { .fuss-innen { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
.tabelle td.rechts, .tabelle th.rechts { white-space: nowrap; }


/* ===================================================================================
   Schaufenster (seit 04.11.2026): dieselben Farben, Schrift und Knöpfe wie mush-room.net
   (neu/mush-room.net/src/stile.css im Projekt THOMARA). Keine Pastellfelder, keine
   pillenförmigen Flächen. Die Verwaltung behält ihre Farbtöne für den Bestellstatus.
   =================================================================================== */
:root {
  --creme: #f4eee2; --braun: #7a4524; --braun-2: #8f5530; --rot: #a63f2b; --gruen: #3d7a47;
  --grund: var(--creme); --grund-2: #fbf8f2; --papier: #fbf8f2; --tafel: #fffdf8; --blass: #ebe3d3;
  --tinte: #211c17; --tinte-2: #3f372f; --tinte-3: #5b534a;
  --linie: #e1d8c6; --linie-2: #cfc4ae;
  --marke: var(--braun); --akzent: var(--braun); --akzent-text: var(--braun); --fokus: #2f5fb3;
  --dunkel: #211c17; --licht: #fbf8f2;
  --druckrand: inset 0 0 0 1px var(--linie);
  --r: 4px;
  color-scheme: light;
}
body { font-size: 18px; line-height: 1.5; font-variant-numeric: lining-nums; }
::selection { background: var(--braun); color: #fff; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
a { color: var(--braun); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; }
.display { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; font-weight: 700; font-stretch: normal; letter-spacing: -0.01em; }
.headline { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 700; font-stretch: normal; letter-spacing: -0.005em; }
.titel { font-size: clamp(19px, 1.6vw, 23px); font-stretch: normal; letter-spacing: 0; }
.akzent { color: inherit; }
.text { font-size: 18px; line-height: 1.55; color: var(--tinte-2); }
.klein { font-size: 15px; }
.etikett { font-size: 14px; }
.abschnitt { border-top-color: var(--linie); }

/* Leiste ganz oben: Versandhinweise und Sprachen, ruhig auf Papier */
.band { background: var(--papier); color: var(--tinte-3); border-bottom: 1px solid var(--linie);
  font-size: 15px; font-weight: 400; padding: 7px var(--rand); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
@media (max-width: 600px) { .band span:not(:first-child) { display: none; } }
.band-sprachen { display: flex; gap: 12px; }
.band-sprachen a { color: var(--tinte-3); text-decoration: none; }
.band-sprachen a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.band-sprachen a[aria-current] { color: var(--tinte); font-weight: 700; }

/* Kopf wie auf mush-room.net: Creme, Linie darunter, Bereiche als schlichte Wörter */
.kopf { background: var(--creme); border-bottom: 1px solid var(--linie); margin-bottom: 0; height: 80px; }
.marke img { height: 44px; }
.marke span { font-size: 16px; font-weight: 600; color: var(--tinte-3); font-stretch: normal; }
.reiter { background: none; padding: 0; gap: 22px; border-radius: 0; }
.reiter a { padding: 12px 0; border-radius: 0; font-size: 17px; font-weight: 500; color: var(--tinte); background: none; }
.reiter a:hover { background: none; color: var(--tinte); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.reiter a[aria-current='page'] { background: none; color: var(--braun); font-weight: 700; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.suche-kopf { height: 44px; border-color: var(--linie-2); background: var(--papier); }
.suche-kopf input { font-size: 16px; }
.suche-kopf button:hover { background: var(--blass); }
@media (max-width: 1560px) { .kopf .marke span, .kopf-laden span { display: none; } .kopf-laden { padding: 0 12px; } .kopf { gap: 22px; } .reiter { gap: 18px; } }
@media (max-width: 1240px) { .kopf-korb .korb-text { display: none; } .kopf-korb { padding: 0 12px; } .kopf { gap: 16px; } .reiter { gap: 14px; } .reiter a { font-size: 16px; } .suche-kopf input { width: 110px; } }
@media (max-width: 860px) {
  .kopf { height: auto; }
  .marke img { height: 36px; }
  .reiter { gap: 0 18px; flex-wrap: wrap; overflow: visible; }
  .reiter a { flex: none; padding: 8px 0; font-size: 16px; }
}

/* Knöpfe wie auf mush-room.net: Rand in Tinte, füllen sich beim Darüberfahren von links */
.knopf {
  height: 44px; padding: 0 18px; gap: 8px; border: 1.5px solid var(--tinte); border-radius: var(--r); color: var(--tinte);
  font-size: 17px; font-weight: 600;
  background: transparent linear-gradient(var(--tinte), var(--tinte)) no-repeat left / 0% 100%;
  transition: background-size 0.32s var(--aus), color 0.32s var(--aus), border-color 0.32s, transform 0.15s;
}
.knopf:hover { background-color: transparent; background-size: 100% 100%; border-color: var(--tinte); color: var(--papier); }
.knopf .icon { transition: transform 0.32s var(--aus); }
.knopf:hover .icon { transform: translateX(3px); }
.knopf.voll, .kopf .knopf.voll { background-color: var(--braun); background-image: linear-gradient(var(--braun-2), var(--braun-2)); border-color: var(--braun); color: #fff; }
.knopf.voll:hover, .kopf .knopf.voll:hover { background-color: var(--braun); border-color: var(--braun-2); color: #fff; }
.knopf.still { border-color: transparent; background-image: linear-gradient(var(--blass), var(--blass)); }
.knopf.still:hover { color: var(--tinte); border-color: transparent; }
.knopf.klein { height: 38px; padding: 0 14px; font-size: 16px; }
.knopf.gross { height: 52px; padding: 0 24px; font-size: 18px; }
.knopf[disabled]:hover { background-size: 0% 100%; color: var(--tinte); }
.zahl-feld { background: #fff; color: var(--braun); border-radius: 3px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .knopf, .knopf .icon { transition: color 0.2s, background-size 0s; } }

/* Startseite: Wegweiser ohne Farbfelder */
.farbfeld { display: none; }
.weiser { padding: 14px 4px; color: var(--tinte); }
.weiser:hover { background: var(--papier); }
.weiser .name { font-stretch: normal; font-size: 19px; }
.weiser .zusatz { font-size: 15px; }
.auftakt-bild, .galerie-gross { border-radius: var(--r); box-shadow: none; }

/* Produktkarten als Papierkästen */
.raster { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.ware { gap: 0; background: var(--papier); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--linie); color: var(--tinte); }
.ware-bild { margin-bottom: 0; border-radius: 0; box-shadow: none; background: var(--blass); }
.ware-text { display: grid; gap: 2px; padding: 14px 16px 18px; }
.ware-name { font-size: 20px; font-weight: 700; font-stretch: normal; }
.ware .latein { font-size: 16px; color: var(--tinte-3); }
.ware-preis { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--tinte); }
.ware-preis .grundpreis { font-weight: 400; font-size: 15px; color: var(--tinte-3); }
.ware:hover .ware-name { text-decoration: underline; text-underline-offset: 4px; color: var(--braun); }
.marker { border-radius: 3px; background: var(--papier); box-shadow: var(--druckrand); font-size: 14px; }

/* Produktseite */
.etikett-box { padding: 0 0 4px; border-bottom: 1px solid var(--linie); }
.etikett-box .headline { font-size: clamp(32px, 3.6vw, 50px); }
.etikett-box .latein { font-size: 21px; color: var(--tinte-3); margin-top: 8px; }
.etikett-box .unterzeile { font-size: 16px; color: var(--tinte-3); margin: 6px 0 14px; }
.kaufen .latein { font-size: 18px; }
.preis-gross { font-size: clamp(32px, 3vw, 42px); font-weight: 700; font-stretch: normal; color: var(--tinte); }
.groessen legend { font-size: 15px; }
.groesse span { background: var(--papier); border-color: var(--linie-2); border-radius: var(--r); font-size: 16px; }
.groesse small { font-size: 14px; }
.groesse input:checked + span { background: var(--braun); border-color: var(--braun); color: #fff; }
.groesse input:checked + span small { color: #f1e4d6; }
.menge { height: 52px; border-color: var(--linie-2); background: var(--papier); font-size: 18px; }
.fakten > div { font-size: 16px; }
.galerie figcaption { font-size: 14px; }
.galerie-leiste button { border-radius: var(--r); box-shadow: none; outline: 2px solid transparent; }
.galerie-leiste button[aria-pressed='true'], .galerie-leiste button:hover { box-shadow: none; outline-color: var(--braun); }
.beschreibung { font-size: 18px; }
.beschreibung h3 { font-size: 21px; font-stretch: normal; }

/* Hinweise als Papierkasten mit Linie, ohne Pastellfläche */
body:not(.verwaltung) .hinweis-feld, body:not(.verwaltung) .zustand {
  background: var(--papier); background-image: none; color: var(--tinte); box-shadow: var(--druckrand); border-radius: var(--r);
}
.hinweis-feld { font-size: 16px; padding: 14px 16px; }
.zustand { font-size: 15px; }
.fehler { background: #f7e3dc; box-shadow: inset 0 0 0 1px #e3b9aa; border-radius: var(--r); font-size: 16px; }
.erfolg { background: #e3eedf; box-shadow: inset 0 0 0 1px #bcd3b6; border-radius: var(--r); font-size: 16px; }

/* Formulare */
label.eingabe { font-size: 15px; }
.eingabe input, .eingabe select, .eingabe textarea, input.eingabe, select.eingabe, textarea.eingabe {
  min-height: 48px; border-color: var(--linie-2); background: var(--tafel); font-size: 17px;
}
.wahl label:hover { background: var(--papier); }
.wahl .zusatz { font-size: 15px; }
.haken { font-size: 16px; }
.wahl input, .haken input { accent-color: var(--braun); }
.posten-zeile img { border-radius: var(--r); box-shadow: none; }
.posten-rechts input[type=number] { height: 38px; border-color: var(--linie-2); background: var(--tafel); }
.summen { background: var(--papier); box-shadow: 0 0 0 1px var(--linie); border-radius: var(--r); }
.summen > div { font-size: 16px; }
.summen .gesamt { font-size: 21px; }
.kasten-titel { font-size: 15px; }
.angaben h3 { font-size: 17px; }
.angaben p, .bank { font-size: 16px; }
.tabelle { font-size: 16px; }
.tabelle th { font-size: 14px; }

/* Abgesetzte Abschnitte (Laden, Beschreibung) auf Papier */
.hell { background: var(--papier); margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); border-top: 1px solid var(--linie); }

/* Großes Foto mit Papierkasten darauf, wie die Gläser auf mush-room.net */
.buehnenbild { position: relative; margin-inline: calc(var(--rand) * -1); border-top: 0; padding: 0; }
.buehnenbild img { width: 100%; height: clamp(380px, 44vw, 620px); object-fit: cover; }
.buehnenbild .kasten { position: absolute; left: var(--rand); bottom: 40px; max-width: 540px; margin-right: var(--rand);
  background: var(--papier); color: var(--tinte); padding: 30px 32px; border-radius: var(--r); display: grid; gap: 12px;
  box-shadow: 0 30px 60px -20px rgba(20, 14, 8, 0.45); }
.buehnenbild .kasten .text { color: var(--tinte-2); }
@media (max-width: 600px) { .buehnenbild .kasten { position: static; max-width: none; margin: 0; border-radius: 0; box-shadow: none; } }

/* Fuß */
.fuss { background: var(--creme); border-top: 1px solid var(--linie); padding-top: 48px; }
.fuss-innen { border-top: 0; }
.fuss-logo { height: 38px; }
.fuss-zeile { font-size: 16px; color: var(--tinte-3); }
.fuss-links { font-size: 16px; }
.fuss-links a { color: var(--tinte); }
.sprachwahl a[aria-current] { font-weight: 700; }
.newsletter input[type=email] { height: 44px; border-color: var(--linie-2); background: var(--tafel); font-size: 17px; }
.tabelle td.rechts, .tabelle th.rechts { white-space: nowrap; }