/* Hierber Brennerei: dunkles Premium-Design (Charcoal, Gold- und Kupferakzente), ruhig und editorial. Farben siehe tools/pruefe_kontrast.mjs (WCAG-Nachrechnung). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format("woff2")}

:root{
  /* Palette „Dark Luxury“ (vom Nutzer vorgegeben): Charcoal #171B19, Deep Black #0D0E0D, Dark Oak #453126, Copper #B47B4B, Champagne Gold #D6B477, Warm Sand #E9DDC9, Ivory #F8F5EF */
  --holz:#171B19;            /* Seitengrund (Charcoal Black) */
  --tief:#0D0E0D;            /* Kopf beim Scrollen, Fuß, Hero-Grund (Deep Black) */
  --flaeche:#1E2220;         /* Karten, Abschnittswechsel (aus Charcoal abgeleitet) */
  --eiche:#453126;           /* Dark Oak: warme Akzentfläche, sparsam */
  --papier:#F8F5EF;          /* Ivory, Papierfläche der Sorten- und Pflichtseiten */
  --papier2:#E9DDC9;         /* Warm Sand, Papier etwas dunkler */
  --text-papier:#171B19;     /* Text auf Papier */
  --kupfer:#B47B4B;          /* Copper: Linien, Flächen, große Schrift */
  --gold:#D6B477;            /* Champagne Gold: Knöpfe, Akzentlinien */
  --sand:#E9DDC9;            /* Warm Sand: Hover heller Knöpfe */
  --text:#F8F5EF;            /* Text auf Dunkel (Ivory) */
  --gedaempt:#BDB2A2;        /* gedämpfter Text auf Dunkel */
  --kupfer-hell:#D6B477;     /* Textakzent auf Dunkel: Links, Eyebrows (Champagne Gold) */
  --gedaempt-papier:#5A4E43; /* gedämpfter Text auf Papier */
  --kupfer-dunkel:#7A4A26;   /* Kupfer als Textton auf Papier */
  --kreide:#ece6d8;          /* Kreideschrift auf den schwarzen Tafeln (#1a1d1f) */
  --linie:rgba(214,180,119,.22);
  --linie-stark:rgba(214,180,119,.45);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rand:clamp(1rem,4vw,2rem);
  /* Radien, Abstände (Abschnitte clamp-basiert), Bewegung */
  --r-klein:3px;
  --r:6px;
  --a-1:.5rem;
  --a-2:1rem;
  --a-3:clamp(1.25rem,3vw,1.75rem);
  --a-4:clamp(2rem,5vw,3.25rem);
  --a-5:clamp(3.5rem,8vw,6.5rem);
  --a-6:clamp(5rem,11vw,9rem);
  --dauer:.5s;
  --dauer-kurz:.25s;
  --kurve:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--holz);color:var(--text);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:1.125rem}}
.js:not(.alter-ok) body{padding-bottom:6rem}
img,picture,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0 0 .6em}
h1{font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:.005em}
h2{font-size:clamp(2.1rem,5vw,3.1rem)}
h3{font-size:1.6rem;line-height:1.2}
h4{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin:1.4rem 0 .5rem}
p{margin:0 0 1em}
address{font-style:normal}
a{color:var(--kupfer-hell);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
.papier a{color:var(--kupfer-dunkel)}
:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:3px}
.papier :focus-visible{outline-color:var(--kupfer-dunkel)}
.sr-only,.sr-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--papier);color:var(--text-papier);padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--rand)}
.wrap.schmal{max-width:820px}

/* Abschnitte: Wechsel dunkel / Papier */
.sektion{padding-block:var(--a-5)}
.dunkel{background:var(--holz);color:var(--text)}
.dunkel.flaeche{background:var(--flaeche)}
.papier{background:var(--papier) url(/assets/papier.webp);color:var(--text-papier)}
.papier.papier2{background-color:var(--papier2)}
.lead-klein,.lead,.intro{max-width:66ch}
.lead{font-size:1.25rem;line-height:1.55}
.lead-klein{color:var(--gedaempt)}
.papier .lead-klein{color:var(--gedaempt-papier)}
.eyebrow{font:500 .82rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kupfer-hell);margin-bottom:1rem}
.platzhalter{font-style:italic;color:var(--gedaempt)}
.papier .platzhalter{color:var(--gedaempt-papier)}
.platzhalter-inline{border-bottom:1px dashed currentColor}
.todo [data-todo]{outline:2px dashed #d33;outline-offset:2px}

/* Kopf, Hauptnavigation, Menüpanel: siehe Block „Kopf und Navigation“ weiter unten */

/* Knöpfe und Chips */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;padding:.7rem 1.5rem;background:var(--gold);color:var(--tief);font:500 .95rem/1.2 var(--sans);letter-spacing:.03em;text-decoration:none;border:1px solid var(--gold);border-radius:var(--r-klein);cursor:pointer}
.knopf:hover{background:var(--sand);border-color:var(--sand);color:var(--tief)}
.knopf:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.knopf-hell{background:transparent;color:var(--text);border-color:rgba(248,245,239,.55)}
.knopf-hell:hover{background:transparent;border-color:var(--gold);color:var(--gold)}
.knopf-pfeil{flex:none}
.knopf-klein{padding:.5rem 1.1rem;font-size:.9rem}
.knopf-kreis{flex:none;width:1rem;height:1rem;border:1.5px solid currentColor;border-radius:50%}
.papier .knopf{color:var(--tief)}
.papier .knopf:hover{background:var(--kupfer);border-color:var(--kupfer);color:var(--tief)}
.papier .knopf-hell{background:transparent;color:var(--text-papier);border-color:var(--kupfer-dunkel)}
.papier .knopf-hell:hover{background:transparent;color:var(--kupfer-dunkel);border-color:var(--kupfer-dunkel)}
@media(prefers-reduced-motion:no-preference){
  .knopf-pfeil{transition:transform var(--dauer-kurz) var(--kurve)}
  .knopf:hover .knopf-pfeil{transform:translateX(3px)}
}
.knoepfe,.kauf-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip,.chip-radio>span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border:1px solid var(--kupfer);background:transparent;color:var(--text);font:400 .98rem/1.2 var(--sans);border-radius:2px;cursor:pointer}
.chip:hover,.chip-radio:hover>span{background:rgba(180,123,75,.18)}
.chip[aria-pressed="true"],.chip-radio input:checked+span{background:var(--kupfer);color:var(--holz);font-weight:500}
.papier .chip-radio>span{color:var(--text-papier);border-color:var(--kupfer-dunkel)}
.papier .chip-radio input:checked+span{background:var(--kupfer-dunkel);color:var(--papier)}
.chip-radio{position:relative;display:inline-block}
.chip-radio input{position:absolute;opacity:0;width:100%;height:100%;margin:0;left:0;top:0;cursor:pointer}
.chip-radio input:focus-visible+span{outline:2px solid var(--kupfer-hell);outline-offset:3px}
.papier .chip-radio input:focus-visible+span{outline-color:var(--kupfer-dunkel)}
.papier .chip{color:var(--text-papier);border-color:var(--kupfer-dunkel)}
.papier .chip:hover{background:rgba(122,74,38,.14)}
.papier .chip[aria-pressed="true"]{background:var(--kupfer-dunkel);color:var(--papier)}
.nojs [data-anlass-box],.nojs [data-geniess-box],.nojs .knopf[data-merk-add],.nojs .varianten,.nojs .auswahl,.nojs .alter{display:none}

/* Hero: Vollbild mit Foto des Fassraums, dunkler Verlauf für die Lesbarkeit, langsamer Zoom (Ken-Burns) */
.hero-voll{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;background:var(--holz);
  min-height:max(30rem,calc(100svh - 5rem));padding-block:clamp(5rem,14vh,9rem) clamp(5.5rem,12vh,8rem)}
.hero-bild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bild picture{display:block;width:100%;height:100%}
.hero-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:60% 55%;animation:hero-zoom 30s ease-out both}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero-voll::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(13,14,13,.95) 0,rgba(13,14,13,.7) 34%,rgba(13,14,13,.34) 68%,rgba(13,14,13,.55) 100%),linear-gradient(to right,rgba(13,14,13,.6),transparent 70%)}
.hero-inhalt{width:100%}
.hero-text{max-width:46rem}
.hero-voll h1{font-size:clamp(3.4rem,11.5vw,8.5rem);line-height:.95;letter-spacing:0;margin-bottom:.22em;text-shadow:0 2px 36px rgba(0,0,0,.5)}
.hero-voll .eyebrow{font-size:.9rem}
.hero-voll .lead{font-size:clamp(1.15rem,2.2vw,1.45rem);max-width:40ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.rahmen{margin:0;max-width:960px;border:1px solid var(--kupfer);padding:8px;background:var(--flaeche)}
.rahmen img,.rahmen picture{display:block;width:100%}

/* Zahlenband unter dem Hero (Werte aus den Daten) */
.zahlenband{background:var(--flaeche);border-block:1px solid var(--linie)}
.zahlen{list-style:none;margin:0 auto;padding:1.4rem var(--rand);max-width:1200px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:relative}
.zahlen li{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding-inline:.4rem}
.zahlen li+li{border-left:1px solid var(--linie)}
.zahl{font:600 clamp(1.8rem,6vw,3.2rem)/1 var(--serif);font-variant-numeric:lining-nums;color:var(--kupfer-hell)}
.zahl-label{font:500 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempt)}
@media(min-width:700px){.zahl-label{font-size:.82rem}.zahlen{padding-block:2rem}}
/* Kennzahlenband auf Sorten- und Kistenseite: längere Beschriftungen (auch französisch) dürfen auf kleinen Bildschirmen enger laufen und umbrechen */
.zahlenband-eng .zahl-label{overflow-wrap:break-word}
@media(max-width:519px){.zahlenband-eng .zahl-label{letter-spacing:.06em}}

/* Bilder: gerahmt mit dünner Linie, nicht eingefärbt */
.bildrahmen{margin:2rem 0 0;max-width:1150px;margin-inline:auto}
.bildrahmen figcaption,.besuch-foto figcaption{margin-top:.6rem;font-size:.9rem;color:var(--gedaempt)}
.papier .besuch-foto figcaption{color:var(--gedaempt-papier)}

/* Fassreihe: Foto, darunter die Kreidetafeln nebeneinander (mobil horizontal mit scroll-snap) */
.fassreihe-sektion{border-top:1px solid var(--linie)}
.schilder-rahmen{max-width:1500px;margin:1.6rem auto 0;padding-inline:0}
.schilder{display:flex;gap:.6rem;list-style:none;margin:0;padding:.4rem var(--rand) 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);scrollbar-width:thin;scrollbar-color:var(--kupfer) transparent}
.schild-li{flex:0 0 7.6rem;scroll-snap-align:start}
.schild{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;height:100%;min-height:5.6rem;padding:.6rem .35rem;text-align:center;text-decoration:none;
  color:var(--kreide);border:2px solid #0b0c0d;border-radius:2px;box-shadow:0 0 0 1px #4a4038,0 4px 8px rgba(0,0,0,.45);
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.07),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(255,255,255,.04),transparent 50%),#1a1d1f}
.schild-name{font:italic 400 1.25rem/1.1 var(--serif);overflow-wrap:anywhere;hyphens:auto}
.schild-abv{font:italic 400 1.05rem/1 var(--serif);color:var(--kreide);border-top:1px solid rgba(236,230,216,.45);padding-top:.3rem;min-width:2.6rem}
.schild:hover,.schild:focus-visible{box-shadow:0 0 0 1px var(--kupfer-hell),0 4px 8px rgba(0,0,0,.45)}
@media(min-width:1280px){
  .schilder{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:.4rem;overflow:visible;padding-inline:var(--rand)}
  .schild-li{flex:none}
  .schild{padding:.6rem .2rem}
  .schild-name{font-size:clamp(.82rem,1.05vw,1.1rem)}
  .schild-abv{font-size:clamp(.85rem,.95vw,1rem)}
}
.platz span{font-size:.85rem;color:var(--gedaempt)}
.platz{display:grid;place-items:center;text-align:center;padding:1rem;border:1px dashed var(--kupfer-dunkel);background:rgba(23,27,25,.06)}
.papier .platz span{color:var(--gedaempt-papier)}
.dunkel .platz{border-color:var(--linie);background:rgba(255,255,255,.03)}

/* Theke */
.theke{border-top:1px solid var(--linie)}
.theke-foto img{width:100%}
@media(min-width:900px){.theke-foto img{aspect-ratio:2/1;object-fit:cover;object-position:50% 88%}}
.anlass-foto{max-width:520px;margin:1.6rem 0 0}
.anlass{margin:1.6rem 0 2.2rem}
.anlass-titel{font:500 .82rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell);margin-bottom:.8rem}
.gruppe{margin-top:2.6rem}
.gruppe h3{font-size:1.9rem;border-bottom:1px solid var(--linie);padding-bottom:.4rem;margin-bottom:1.2rem}
/* Dichte Sortenkarten: Handy 3, ab 700 px 4, ab 1000 px 6 Spalten. Die Flaschenfotos (2:3) haben viel Rand; auf dem Handy ist das Bildfeld schmal (1:2), ab 700 px 5:7 (dort bleibt genug Breite, die Flasche wirkt nicht gequetscht); das Foto füllt es mittig (cover) */
.karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
@media(min-width:700px){.karten{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}}
@media(min-width:1000px){.karten{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}}
/* verwandte Sorten (Sortenseite): immer drei, ab 700 px mit begrenzter Kartenbreite, linksbündig */
.karten-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:700px){.karten-3{grid-template-columns:repeat(3,minmax(0,13rem))}}
.karte-li[hidden],.gruppe[hidden]{display:none}
.karte{display:flex;flex-direction:column;height:100%;padding:.4rem .4rem .6rem;background:var(--holz);border:1px solid var(--linie);color:var(--text);text-decoration:none}
.karte:hover,.karte:focus-visible{border-color:var(--kupfer-hell)}
.karte-bild{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1/2;margin-bottom:.55rem;container-type:size;overflow:hidden;
  background:linear-gradient(to top,#c9baa0 0 6%,transparent 6%),linear-gradient(#ece3d2,#e2d6c0)}
.karte-bild{position:relative}
@media(min-width:700px){.karte-bild{aspect-ratio:5/7}}
/* Bildwechsel beim Darüberfahren mit der Maus: zweites Bild (Serviervorschlag) blendet weich ein; auf Touch-Geräten bleibt es ausgeblendet und lädt nicht */
@property --kreis{syntax:"<percentage>";inherits:false;initial-value:0%}
.karte-wechsel,.karte-badge,.karte-band{display:none}
@media (hover:hover) and (pointer:fine){
  .karte-wechsel{display:block;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none;background:#000}
  .karte-wechsel picture{display:block;width:100%;height:100%}
  .karte-wechsel-bild{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
  .karte:hover .karte-wechsel,.karte:focus-visible .karte-wechsel{opacity:1}
  /* Hinweis „Symbolbild“ und Band mit dem Vorschlag: Grundform; mit Bewegung gleiten sie herein (unten), bei reduzierter Bewegung erscheinen sie ohne Bewegung */
  .karte-badge{display:block;opacity:0}
  .karte-band{display:block;position:absolute;left:0;right:0;bottom:0;padding:2.4rem .5rem .6rem;text-align:left;opacity:0;
    background:linear-gradient(to top,rgba(13,14,13,.94) 0,rgba(13,14,13,.86) 50%,rgba(13,14,13,0))}
  .karte:hover .karte-badge,.karte:focus-visible .karte-badge,.karte:hover .karte-band,.karte:focus-visible .karte-band{opacity:1}
  .karte-band-typ{display:block;font:500 .6rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
  .karte-band-name{display:block;margin-top:.25rem;font:600 clamp(.85rem,9cqw,1.15rem)/1.15 var(--serif);overflow-wrap:break-word;hyphens:auto;color:var(--text)}
}
/* Mit Bewegung (Maus, keine reduzierte Bewegung): das Serviervorschlag-Bild öffnet sich als Kreis ab der Eintrittsstelle der Maus (--mx/--my setzt site.js,
   ohne JavaScript und bei Tastaturfokus die Mitte), die Flasche tritt zurück, die Karte kippt sehr dezent (max. 2°) mit kupferfarbenem Glanz (--rx/--ry/--gx/--gy aus site.js),
   unten gleitet ein Band mit Art und Name des Vorschlags herein. Bewegt wird nur --kreis (registriert, daher animierbar), transform, opacity und filter.
   Zeiten bewusst ruhig (Kreis 1,4 s, sanft an- und auslaufend), damit die Einblendung nicht hektisch wirkt. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .karte-li{perspective:900px}
  .karte{position:relative;transition:transform 1s cubic-bezier(.33,1,.68,1),border-color .4s ease}
  .karte:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .karte:focus-visible{transform:none;--mx:50%!important;--my:50%!important}
  .karte::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
    background:radial-gradient(circle 14rem at var(--gx,50%) var(--gy,50%),rgba(214,180,119,.2),rgba(180,123,75,.07) 45%,transparent 100%)}
  .karte:hover::after{opacity:1}
  .karte-wechsel{clip-path:circle(var(--kreis,0%) at var(--mx,50%) var(--my,50%));transition:--kreis .9s cubic-bezier(.45,0,.25,1),opacity .2s linear .7s}
  .karte:hover .karte-wechsel,.karte:focus-visible .karte-wechsel{--kreis:150%;transition:--kreis 1.4s cubic-bezier(.45,0,.25,1),opacity .2s linear 0s}
  .karte-wechsel-bild{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.33,1,.68,1)}
  .karte:hover .karte-wechsel-bild,.karte:focus-visible .karte-wechsel-bild{transform:none}
  .karte-bild .ff-bild,.karte-bild .flasche,.karte-bild .karte-foto-bild{transform-origin:50% 100%;transition:transform 1.2s cubic-bezier(.45,0,.25,1),filter 1.2s ease}
  .karte:hover .ff-bild,.karte:focus-visible .ff-bild,.karte:hover .flasche,.karte:focus-visible .flasche{transform:scale(.94);filter:blur(2px) brightness(.78)}
  .karte:hover .karte-foto-bild,.karte:focus-visible .karte-foto-bild{transform:scale(1.06);filter:blur(2px) brightness(.78)}
  .karte-badge{transition:opacity .6s ease}
  .karte:hover .karte-badge,.karte:focus-visible .karte-badge{transition-delay:.7s}
  .karte-band{transform:translateY(40%);transition:transform .9s cubic-bezier(.33,1,.68,1),opacity .7s ease}
  .karte:hover .karte-band,.karte:focus-visible .karte-band{transform:none;transition-delay:.6s}
}
.karte-foto{display:block;width:100%;height:100%;background:#000}
.karte-foto picture,.karte-foto img{display:block;width:100%;height:100%}
.karte-foto-bild{object-fit:cover}
.karte-platzhalter{display:grid;align-content:center;gap:.4rem;width:100%;height:100%;border:1px dashed var(--kupfer-dunkel);text-align:center;padding:.3rem;color:var(--text-papier)}
.karte-platzhalter span:first-child{font:600 .95rem/1.15 var(--serif);overflow-wrap:break-word;hyphens:auto}
.karte-platzhalter span{font-size:.72rem;color:var(--gedaempt-papier)}
@media(min-width:700px){.karte-platzhalter span:first-child{font-size:1.05rem}.karte-platzhalter span{font-size:.8rem}}

/* Vektor-Flasche: Silhouette und Füllung als SVG, Etikett als Bild darüber */
.flasche{position:relative;display:block;flex:none;height:var(--fh,88cqh);aspect-ratio:var(--ar,100/380);margin-bottom:6cqh}
.flasche>svg{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
/* Etikett: vorverzerrtes Bild (halber Umfang, zu den Rändern gestaucht), gewölbte Ober-/Unterkante per clip-path, Rundungsschatten und Glanzkante als Verlauf */
.fl-etikett{position:absolute;display:block}
.flasche-schlank .fl-etikett{clip-path:url(#cl-schlank)}
.flasche-rund .fl-etikett{clip-path:url(#cl-rund)}
.flasche-karaffe .fl-etikett{clip-path:url(#cl-karaffe)}
.fl-etikett picture,.fl-bild{display:block;width:100%;height:100%;max-width:none}
.fl-bild{object-fit:fill}
.fl-etikett::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(28,17,9,.5) 0,rgba(28,17,9,.2) 7%,rgba(28,17,9,0) 22%,rgba(255,255,255,.09) 31%,rgba(255,255,255,0) 44%,rgba(28,17,9,0) 62%,rgba(28,17,9,.16) 82%,rgba(28,17,9,.55) 100%),
    linear-gradient(90deg,transparent 5.5%,rgba(255,255,255,.3) 6.3%,transparent 7.4%)}
.karte-name{font:600 .95rem/1.15 var(--serif);margin-bottom:.25rem;text-align:center;overflow-wrap:break-word;hyphens:auto}
.karte-meta{display:flex;flex-direction:column;align-items:center;gap:.05rem;font-size:.78rem;line-height:1.25;color:var(--gedaempt);text-align:center}
.karte-meta>[aria-hidden]{display:none} /* Trennpunkt entfällt: Alkohol oben, Preis darunter */
@media(min-width:700px){.karte{padding:.5rem .5rem .8rem}.karte-name{font-size:1.1rem}.karte-meta{font-size:.85rem}}
/* Desktop: Alkohol und Preis wieder in einer Zeile mit Trennpunkt; bricht bei langem Preistext („Preis auf Anfrage“) sauber um */
@media(min-width:1000px){.karte-meta{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:.3rem}.karte-meta>*{white-space:nowrap}.karte-meta>[aria-hidden]{display:inline}}
/* Flaschenfoto füllt das schmale Bildfeld (Flasche steht mittig, Rand wird beschnitten; die breiteste Flasche nutzt ca. 60 % der Fotobreite, sichtbar bleiben 75 %) */
.karte-bild .ff-bild{object-fit:cover;object-position:center}
.papier .karte{background:var(--flaeche);color:var(--text)}
.papier .karte:hover{color:var(--text)}
.weitere{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.weitere h3{font-size:1.4rem}
.weitere p{color:var(--gedaempt)}

/* So genießen: Karten mit Serviervorschlag, waagerecht blätterbar (scroll-snap), Filter nach Art */
.geniessen .reveal{margin-bottom:1.4rem}
.geniess-steuerung{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem}
.geniess-pfeile{display:none;gap:.5rem;margin:0}
.pfeil{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;color:var(--text);border:1px solid var(--linie-stark);border-radius:50%;font:400 1.3rem/1 var(--sans);cursor:pointer}
.pfeil:hover{border-color:var(--gold);color:var(--gold)}
@media(min-width:700px){.js .geniess-pfeile{display:flex}}
.geniess-rahmen{margin:1.6rem 0 0;--rand-links:max(var(--rand),calc(50vw - 600px + var(--rand)))}
.geniess-liste{display:flex;gap:1rem;list-style:none;margin:0;padding:.4rem var(--rand) 1.2rem var(--rand-links);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand-links) var(--rand);scrollbar-width:thin;scrollbar-color:var(--kupfer) transparent}
.geniess-li{flex:0 0 clamp(16rem,78vw,24rem);scroll-snap-align:start}
.geniess-li[hidden]{display:none}
.geniess-karte{display:flex;flex-direction:column;height:100%;background:var(--flaeche);color:var(--text);text-decoration:none;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.papier .geniess-karte,.papier .geniess-karte:hover{color:var(--text)}
.geniess-karte:hover,.geniess-karte:focus-visible{border-color:var(--kupfer-hell)}
.geniess-bild{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:#000}
.geniess-bild picture,.geniess-bild-img{display:block;width:100%;height:100%}
.geniess-bild-img{object-fit:cover;transition:transform .8s ease}
@media (hover:hover) and (pointer:fine){.geniess-karte:hover .geniess-bild-img{transform:scale(1.05)}}
.geniess-badge,.karte-badge,.kachel-badge{position:absolute;left:.5rem;top:.5rem;padding:.2rem .5rem;background:rgba(13,14,13,.78);color:var(--text);font:500 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
.karte-badge{left:.3rem;top:.3rem;padding:.15rem .35rem;font-size:.6rem;letter-spacing:.05em}
.geniess-typ{margin:.9rem 1rem 0;font:500 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
.geniess-name{margin:.3rem 1rem 0;font:600 1.7rem/1.15 var(--serif)}
.geniess-sorte{margin:.35rem 1rem 1rem;font-size:.92rem;color:var(--gedaempt)}

/* Probierkiste: auffälliges Band mit Kupferglanz */
.probierkiste{background:radial-gradient(ellipse at 22% 50%,rgba(180,123,75,.3),transparent 62%),linear-gradient(var(--flaeche),var(--holz));border-block:1px solid var(--kupfer)}
.probier-raster{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.probier-raster{grid-template-columns:minmax(320px,540px) 1fr;gap:4rem}}
.probier-bild{max-width:540px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.probierkiste h2{font-size:clamp(2.6rem,6vw,4.2rem)}
.probier-text .lead-klein{font-size:1.2rem}

/* Wie wir brennen: Zeilen im Wechsel Foto links/rechts */
.schritte{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:3rem}
.schritt{display:grid;gap:1.2rem;align-items:center}
@media(min-width:900px){.schritt{grid-template-columns:1.1fr 1fr;gap:3.5rem}.schritt:nth-child(even) .schritt-foto{order:2}}
.schritt-foto{margin:0;border:1px solid var(--kupfer-dunkel);padding:6px;background:var(--papier2)}
.schritt-foto picture,.schritt-foto img{display:block;width:100%}
.schritt-bild{aspect-ratio:4/3;object-fit:cover}
.schritt-foto.platz{aspect-ratio:4/3;border-style:dashed;background:rgba(23,27,25,.06)}
.schritt-nr{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-dunkel);margin-bottom:.5rem}
.schritt h3{font-size:2.2rem;margin-bottom:.4rem}
.schritt-text p:last-child{color:var(--gedaempt-papier);max-width:46ch}
.brennen .schritt-foto{border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.brennen .schritt-nr{color:var(--kupfer-hell)}
.brennen .schritt-text p:last-child{color:var(--gedaempt)}

/* Besuch */
.besuch-raster{display:grid;gap:2.4rem;align-items:start}
@media(min-width:900px){.besuch-raster{grid-template-columns:1fr 1fr;gap:3.5rem}}
.besuch-text h3{font:500 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-dunkel);margin:1.6rem 0 .3rem}
.dunkel .besuch-text h3{color:var(--kupfer-hell)}
.karte-box{max-width:480px;margin:1.6rem 0 .8rem}
.karte-flaeche{display:grid;place-items:center;aspect-ratio:16/9;border:1px solid var(--kupfer-dunkel);background-color:var(--papier);overflow:hidden;
  /* ruhiges Kartenraster: feine Linien, zwei dezente Straßenzüge */
  background-image:linear-gradient(115deg,transparent 46%,rgba(122,74,38,.22) 46.4%,rgba(122,74,38,.22) 47.6%,transparent 48%),linear-gradient(28deg,transparent 61%,rgba(122,74,38,.18) 61.4%,rgba(122,74,38,.18) 62.4%,transparent 62.8%),repeating-linear-gradient(0deg,rgba(23,27,25,.07) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(23,27,25,.07) 0 1px,transparent 1px 28px)}
@media(max-width:520px){.karte-flaeche{aspect-ratio:4/3}} /* schmal: höher, damit Symbol, Adresse und Knopf Platz haben */
.karte-flaeche:focus-visible{outline:2px solid var(--kupfer-dunkel);outline-offset:3px}
.karte-vorschau{display:grid;justify-items:center;gap:.35rem;text-align:center;padding:.7rem 1.1rem;margin:.5rem;background:rgba(248,245,239,.92);border:1px solid rgba(122,74,38,.35);color:var(--text-papier)}
.karte-pin{color:var(--kupfer-dunkel)}
.karte-adresse{margin:0;font:600 1.15rem/1.2 var(--serif)}
.karte-knopf{margin-top:.2rem}
.karte-flaeche iframe{display:block;width:100%;height:100%;border:0}
.karte-hinweis{margin:.6rem 0 0;font-size:.9rem;line-height:1.45;color:var(--gedaempt-papier)}
.nojs .karte-knopf,.nojs .karte-hinweis{display:none}
.besuch-bilder{display:grid;gap:1.6rem}
.besuch-foto{margin:0;border:1px solid var(--kupfer-dunkel);padding:6px;background:var(--papier2);width:100%}
.besuch-foto picture,.besuch-foto img{display:block;width:100%}
.dunkel .besuch-foto{border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.dunkel .karte-flaeche{border-color:var(--linie-stark);border-radius:var(--r);background-color:var(--tief);
  background-image:linear-gradient(115deg,transparent 46%,rgba(214,180,119,.22) 46.4%,rgba(214,180,119,.22) 47.6%,transparent 48%),linear-gradient(28deg,transparent 61%,rgba(214,180,119,.18) 61.4%,rgba(214,180,119,.18) 62.4%,transparent 62.8%),repeating-linear-gradient(0deg,rgba(248,245,239,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(248,245,239,.05) 0 1px,transparent 1px 28px)}
.dunkel .karte-vorschau{background:rgba(13,14,13,.92);border-color:var(--linie-stark);color:var(--text)}
.dunkel .karte-pin{color:var(--kupfer-hell)}
.dunkel .karte-hinweis{color:var(--gedaempt)}
.dunkel .karte-flaeche:focus-visible{outline-color:var(--kupfer-hell)}
.besuch-foto.klein{max-width:320px}
.besuch-foto figcaption{padding-inline:2px}
.textlink{font-weight:500}

/* Sortenseite */
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:.3rem .6rem;list-style:none;margin:0 0 2rem;padding:0;font-size:.9rem;color:var(--gedaempt)}
.brotkrumen li+li::before{content:"/";margin-right:.6rem;color:var(--kupfer)}
.brotkrumen a{color:var(--gedaempt)}
/* Produktkopf im Stil des Probierkiste-Bands: kräftiger Kupferglanz, großer Name, Bühne mit Tiefenschatten */
.produkt-kopf{background:radial-gradient(ellipse at 22% 38%,rgba(180,123,75,.3),transparent 62%),linear-gradient(var(--flaeche),var(--holz));padding-top:2.5rem}
.produkt-kopf h1{font-size:clamp(3rem,8vw,5rem);line-height:1;overflow-wrap:break-word;text-wrap:balance}
.haupt-bild .buehne,.haupt-bild.rahmen{box-shadow:0 18px 50px rgba(0,0,0,.5)}
.produkt-raster{display:grid;gap:2rem;align-items:start}
@media(min-width:800px){.produkt-raster{grid-template-columns:minmax(320px,540px) 1fr;gap:4rem;align-items:center}.mit-foto .produkt-raster{grid-template-columns:minmax(300px,560px) 1fr}.produkt-raster{align-items:start}}
@media(min-width:800px) and (max-width:1099px){.produkt-raster,.mit-foto .produkt-raster{grid-template-columns:minmax(280px,44%) minmax(0,1fr);gap:2.5rem}}
.haupt-bild{margin:0;max-width:540px}
.buehne{container-type:size;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:3/4;width:100%;overflow:hidden;border:1px solid var(--kupfer);
  background:linear-gradient(to top,#c9baa0 0 6%,transparent 6%),linear-gradient(#ece3d2,#e2d6c0)}
.foto-rahmen{max-width:560px}
/* Neu erzeugte Produktflasche (Hochformat 2:3, Grund auf Weiß normalisiert): multiply legt den hellen Grund auf die Bühnenfarbe, Flasche steht auf der Tischkante */
.flasche-foto{display:block;flex:none;width:100%;height:100%}
.flasche-foto picture{display:block;width:100%;height:100%}
.ff-bild{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}
.foto-rahmen picture,.foto-rahmen img{display:block;width:100%}
.etikett-platzhalter{width:min(100%,290px);aspect-ratio:1/1.6;display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.etikett-platzhalter .platz-marke{font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.etikett-platzhalter .platz-name{font:600 2rem/1.1 var(--serif);color:var(--text)}
.lux{font:italic 400 1.35rem/1.3 var(--serif);color:var(--kupfer-hell);margin-bottom:.4rem}
.kurz{font-size:1.1rem;color:var(--gedaempt);margin-bottom:1rem}
.abv{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:1.4rem}
.abv-label{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
.abv-wert{font:600 1.7rem/1 var(--serif)}
.verkostung{display:grid;gap:0;margin:1.4rem 0 0;max-width:780px}
.verkostung>div{display:grid;gap:.2rem 2rem;padding:1rem 0;border-top:1px solid rgba(23,27,25,.22)}
@media(min-width:700px){.verkostung>div{grid-template-columns:11rem 1fr}}
.verkostung dt{font:500 .8rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-dunkel)}
.verkostung dd{margin:0}

/* Serviervorschläge */
.tablist{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.6rem;margin:1.6rem 0 2rem;scrollbar-width:thin}
@media(min-width:900px){.tablist{flex-wrap:wrap;overflow:visible}}
.nojs .tablist{display:none}
.tab{flex:0 0 auto;min-width:10rem;max-width:15rem;text-align:left;min-height:44px;padding:.6rem .85rem;background:transparent;border:1px solid rgba(23,27,25,.38);color:var(--text-papier);font:inherit;cursor:pointer;scroll-snap-align:start}
.tab:hover{border-color:var(--kupfer-dunkel)}
.tab[aria-selected="true"]{background:var(--holz);color:var(--text);border-color:var(--holz)}
.tab-typ{display:block;font:500 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempt-papier);margin-bottom:.2rem}
.tab[aria-selected="true"] .tab-typ{color:var(--kupfer-hell)}
.tab-name{display:block;font:600 1.12rem/1.2 var(--serif)}
.panel{display:grid;gap:1.6rem;align-items:start}
@media(min-width:800px){.panel{grid-template-columns:minmax(240px,380px) 1fr;gap:3rem}}
.nojs .panel+.panel{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(23,27,25,.25)}
.js .panel:not(.aktiv){display:none}
.panel-foto{min-height:14rem}
.panel-bild{margin:0}
.panel-bild picture,.panel-bild img{display:block;width:100%;height:auto}
.panel-bild picture{overflow:hidden;border-radius:2px}
.panel-bild img{border-radius:2px;transition:transform .8s ease}
/* sanfter Zoom wie bei den Karten von „So genießen“: nur mit Maus und nur ohne reduzierte Bewegung */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.panel-bild:hover img{transform:scale(1.05)}}
.schritt-foto figcaption{margin-top:.4rem;font:400 .8rem/1.4 var(--sans);color:var(--gedaempt-papier)}
.dunkel .schritt-foto figcaption{color:var(--gedaempt)}
.panel-bild figcaption{margin-top:.5rem;font:400 .8rem/1.4 var(--sans);color:var(--gedaempt-papier)}
@media(min-width:800px){.panel.mit-bild{grid-template-columns:minmax(280px,min(500px,45%)) 1fr}}
.panel-typ{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-dunkel);margin-bottom:.5rem}
.panel h3{font-size:2rem}
.panel-glas{color:var(--gedaempt-papier);font-size:.95rem}
.zutaten{list-style:none;margin:0;padding:0}
.zutaten li{padding:.4rem 0;border-bottom:1px solid rgba(23,27,25,.15)}
.menge{display:inline-block;min-width:6.5rem;font-weight:500}
.schritte-liste{margin:0;padding-left:1.3rem}
.schritte-liste li{margin-bottom:.4rem;padding-left:.3rem;max-width:62ch}
.passt{margin-top:1.4rem}
.passt-label{font-weight:500}
.einblenden{animation:einblenden .55s cubic-bezier(.22,1,.36,1)}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Kauf */
.kauf h2{margin-bottom:1rem}
/* Kauf-Box im dunklen Produktkopf: kompakt, Erwerb sofort unter der Beschreibung */
.kauf-box{margin:1.2rem 0 0;padding:1rem 1.2rem 1.1rem;background:var(--flaeche);border:1px solid var(--linie);max-width:640px}
.kauf-box h2{font:500 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell);margin:0 0 .7rem}
.kauf-box .varianten{margin-bottom:.8rem}
.kauf-box .variante-abv{margin-bottom:.7rem}
.kauf-einzeln .variante-abv{display:none}
.kauf-box .groessen legend{margin-bottom:.5rem}
.kauf-box .auswahl{margin-top:.9rem;padding:.6rem 0}
.kauf-box .auswahl-preis{font-size:1.6rem}
.kauf-box .kauf-knoepfe{margin-top:.9rem}
.kauf-box .status{min-height:0;margin:.5rem 0 0}
.kauf-box .status:empty{display:none}
.zu-servieren{margin:.6rem 0 1.4rem;font-size:.95rem}
.zu-servieren a{color:var(--kupfer-hell)}
/* Verkostung im Kopf: dunkler Stil, zweispaltig ab 900 px */
.kopf-verkostung{margin-top:1.8rem}
.kopf-verkostung h2{font-size:clamp(1.6rem,3.5vw,2.1rem);margin-bottom:.4rem}
/* Ankersprung #produkt: Kopfabschnitt liegt knapp unter dem oberen Rand; die Kopfleiste verdeckt nur dessen Innenabstand (2,5 rem) */
#produkt{scroll-margin-top:calc(var(--kopf-hoehe) - 2.5rem)}
.produkt-kopf .verkostung{margin-top:.6rem;max-width:none}
.produkt-kopf .verkostung>div{display:block;padding:.7rem 0;border-top:1px solid var(--linie)}
.produkt-kopf .verkostung dt{color:var(--kupfer-hell)}
.produkt-kopf .verkostung dd{color:var(--text)}
@media(min-width:900px){.produkt-kopf .verkostung{grid-template-columns:1fr 1fr;column-gap:2rem}}
@media(max-width:799px){
  .produkt-kopf .brotkrumen ol{margin-bottom:1rem}
  .produkt-raster{gap:1.2rem}
  .haupt-bild .buehne{max-height:50vh}
  .haupt-bild.foto-rahmen img{max-height:50vh;object-fit:cover}
  .produkt-text .kurz{margin-bottom:.6rem}
  .produkt-text .abv{margin-bottom:.4rem}
  .kauf-box{margin-top:.8rem}
}
.varianten{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.nojs .variante+.variante{margin-top:2rem}
.js .variante-kopf{display:none}
.js .variante:not(.aktiv){display:none}
.variante-kopf{font-size:1.5rem}
.variante-abv{color:var(--gedaempt);margin-bottom:1rem}
.groessen{border:0;margin:0;padding:0}
.groessen legend{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell);padding:0;margin-bottom:.7rem}
.preis.anfrage{font:600 1.5rem/1.2 var(--serif)}
.auswahl{margin:1.6rem 0 0;padding:1rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;max-width:780px}
.auswahl-label{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
.auswahl-preis{font:600 1.9rem/1 var(--serif)}
.mwst{color:var(--gedaempt);font-size:.9rem}
.status{min-height:1.6rem;margin:1rem 0 0;color:var(--kupfer-hell)}
.hinweis{color:var(--gedaempt)}

/* Anfrage */
.anfrage h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.liste{list-style:none;margin:2rem 0 0;padding:0}
.liste li{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.2rem;padding:1rem 0;border-top:1px solid rgba(23,27,25,.22)}
.liste li:last-child{border-bottom:1px solid rgba(23,27,25,.22)}
.pos-name{font:600 1.35rem/1.2 var(--serif)}
.pos-meta{color:var(--gedaempt-papier);font-size:.95rem}
.pos-faecher{margin-top:.35rem;color:var(--gedaempt-papier);font-size:.95rem;line-height:1.5}
.pos-hinweis{margin-top:.25rem;font-style:italic}
.pos-ctl{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;grid-column:1/-1}
.pos-ctl label{font-size:.9rem}
.pos-ctl input[type=number]{width:5.5rem}
.pos-summe{text-align:right;font-weight:500}
.linkknopf{background:none;border:0;padding:.6rem .2rem;font:inherit;color:var(--kupfer-dunkel);text-decoration:underline;cursor:pointer;min-height:44px}
.summe{margin:1.2rem 0 2rem;font-size:1.1rem}
.summe strong{font:600 1.6rem/1 var(--serif)}
.summe .mwst{display:block;margin-top:.2rem}
.papier .mwst{color:var(--gedaempt-papier)}
.anfrage-form{margin-top:2rem}
.feld{margin-bottom:1.2rem;border:0;padding:0}
.feld label,.feld legend{display:block;font-weight:500;margin-bottom:.35rem;padding:0}
.feld .chip-radio{margin-right:.5rem}
.feld .chip-radio>span{font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=number]{width:100%;min-height:44px;padding:.6rem .8rem;font:inherit;background:#fffdf8;color:var(--text-papier);border:1px solid #85735f;border-radius:2px}
.fehler{color:#8a2a16;font-size:.95rem;margin:.3rem 0 0}
.hinweis-klein{font-size:.95rem;color:var(--gedaempt-papier)}
.vorschau{margin-top:1rem}
.vorschau pre{white-space:pre-wrap;word-break:break-word;font:400 .9rem/1.5 var(--sans);background:rgba(23,27,25,.06);padding:1rem;margin:.6rem 0 0}
.direkt{margin-top:2.4rem}
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage-status{margin:1.2rem 0 0;padding:1rem 1.2rem;border:1px solid var(--kupfer-dunkel);background:rgba(23,27,25,.06)}
.anfrage-status p{margin:0 0 .8rem}
.anfrage-status p:last-child{margin-bottom:0}
.anfrage-status-fehler{border-color:#8a2a16}
.leer .knopf{margin-top:.4rem}

/* Pflichtseiten */
.prose{max-width:70ch}
.prose h2{font-size:1.9rem;margin-top:2rem}
.impressum>div{display:grid;gap:.2rem 2rem;padding:.9rem 0;border-top:1px solid rgba(23,27,25,.22)}
@media(min-width:700px){.impressum>div{grid-template-columns:14rem 1fr}}
.impressum dt{font:500 .8rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-dunkel)}
.impressum dd{margin:0}

/* Fuß und Altershinweis */
.fuss{background:var(--tief);border-top:1px solid var(--linie-stark);padding:var(--a-4) 0 2rem;font-size:.97rem}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:600px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.fuss-raster{grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:2.5rem}}
.fuss-logo{display:inline-block}
.fuss-logo img{display:block;height:64px;width:auto;max-width:none}
.fuss address{margin-top:1rem;color:var(--gedaempt)}
.fuss-titel{font:500 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.fuss-titel-2{margin-top:1.8rem}
.fuss-liste{list-style:none;margin:0;padding:0}
.fuss-liste a,.fuss p a{display:inline-block;padding:.25rem 0;color:var(--text);text-decoration:none}
.fuss-liste a:hover,.fuss p a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:.25em}
.fuss p{margin-bottom:.4rem}
.fuss-klein{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--gedaempt);font-size:.9rem}
.fuss-klein p{margin-bottom:.4rem;max-width:80ch}
.alter{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.4rem;padding:.8rem var(--rand);background:var(--flaeche);border-top:1px solid var(--kupfer);color:var(--text)}
.alter p{margin:0;font-size:.97rem}
.alter-ok .alter{display:none}

/* weiches Einblenden beim Scrollen: die Kinder eines .reveal gleiten nacheinander herein (site.js setzt --i je Kind), leicht entschärft, mit langer, ruhig auslaufender Kurve */
.js .reveal>*{opacity:0;transform:translate3d(0,22px,0);filter:blur(5px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal.sichtbar>*{opacity:1;transform:none;filter:none}
@media print{.js .reveal>*{opacity:1!important;transform:none!important;filter:none!important}}
@media(prefers-reduced-motion:reduce){
  .js .reveal>*{opacity:1;transform:none;filter:none;transition:none}
  .einblenden{animation:none}
  html{scroll-behavior:auto}
  .hero-bild img{animation:none}
  .karte-wechsel,.geniess-bild-img,.geniess-karte,.panel-bild img{transition:none}
}

/* Überschriften: Enthüllung aus einer Maske (site.js ergänzt .h2-maske/.h2-innen und setzt .sichtbar beim Scrollen; ohne JS, bei reduzierter Bewegung und im Druck sofort sichtbar) */
@media(prefers-reduced-motion:no-preference){
  .js .h2-maske{clip-path:inset(-.1em -.3em -.1em -.3em)}
  .js .h2-innen{display:block;transform:translateY(125%)}
  .js .h2-maske.sichtbar .h2-innen{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1)}
}
@media print{.js .h2-innen{transform:none!important}}

/* Sparsames Parallax (nur ab 700 px und ohne reduzierte Bewegung; site.js setzt --pv in px für sichtbare Elemente). Das Hero-Foto bekommt oben und unten 4 % Überstand,
   die Schrittfotos sind 1,08-fach vergrößert und werden vom Rahmen beschnitten, damit nie ein Rand sichtbar wird; das Kistenbild verschiebt sich als Ganzes. */
@media(min-width:700px) and (prefers-reduced-motion:no-preference){
  .js .hero-bild{inset:-4% 0;transform:translate3d(0,var(--pv,0px),0)}
  .js .probier-bild{transform:translate3d(0,var(--pv,0px),0)}
  .js .schritt-foto picture{overflow:hidden}
  .js .schritt-bild{transform:translate3d(0,var(--pv,0px),0) scale(1.08)}
}

/* Feinschliff */
.karte-meta .preis.anfrage{font:inherit}
.schild-name{font-size:1.3rem}
@media(min-width:1280px){.schild-name{font-size:clamp(.95rem,1.15vw,1.2rem)}.schild-abv{font-size:clamp(.9rem,1vw,1.05rem)}}

/* Holzkiste 4 x 0,2 l: Live-Vorschau (Koordinaten in site/data/holzkiste.js, in Prozent des Kistenfoto-Zuschnitts) */
.kiste-raster{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.kiste-raster{grid-template-columns:minmax(320px,560px) 1fr;gap:3.5rem}}
.kiste-bild{margin:0;max-width:560px;width:100%}
.kiste-buehne{position:relative;overflow:hidden;background:#0b0907}
.kiste-buehne>picture,.kiste-vorn>picture{display:block}
.kiste-buehne img.kiste-grund,.kiste-vorn img{display:block;width:100%;height:auto}
.kiste-vorn{position:absolute;inset:0;pointer-events:none}
.kiste-fl{position:absolute;display:block;transform:translateX(-50%);pointer-events:none}
.kiste-buehne img.kiste-flasche{display:block;height:100%;width:auto;max-width:none}
/* Glanz über dem Glas (kiste.js): nur im Umriss der Flasche (Maske = Freisteller), ein heller Streifen läuft einmal von links nach rechts */
.kiste-licht{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:var(--maske) center/100% 100% no-repeat;mask:var(--maske) center/100% 100% no-repeat}
.kiste-licht i{position:absolute;top:0;bottom:0;left:-45%;width:40%;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6) 50%,rgba(255,255,255,0))}
[data-bewegt] .kiste-fl,[data-bewegt] .reihe-flasche,[data-bewegt] .kiste-schatten{will-change:transform,opacity}
.kiste-schatten{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,10,0,.9),rgba(20,10,0,0) 70%);pointer-events:none}
.kiste-preis{margin:1.2rem 0 1rem}
.kiste-preis .auswahl-preis{font-size:2.2rem}
.kiste-fest{color:var(--gedaempt);font-size:.9rem}
.kiste-fach{border:0;margin:0 0 1rem;padding:0;min-width:0}
.kiste-fach legend{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell);padding:0;margin-bottom:.5rem}
.kiste-pos{text-transform:none;letter-spacing:.04em;color:var(--gedaempt)}
.kiste-abv{color:inherit;opacity:.75;font-size:.85em;margin-left:.3rem}
.nojs .kiste-wahl{display:none}
.nojs .kiste-auswahl{display:flex}
.kiste-raster .kauf-knoepfe{margin-top:1.4rem}
.kiste-raster .status{min-height:0;margin:.5rem 0 0}
.kiste-raster .status:empty{display:none}
.nojs .knopf[data-kiste-add]{display:none}
@media(min-width:900px){.kiste-bild{position:sticky;top:calc(var(--kopf-hoehe) + 1rem)}}
/* Sortenwahl der Kistenseiten (kiste.js): jede Sorte eine Kachel im Raster; oben links die Zahl, oben rechts × (eigene Schaltfläche).
   Gewählt = kräftige Umrandung und leichte Kupferfläche (Text bleibt hell). Gedrückt halten setzt die Sorte zurück: kein Kontextmenü, keine Textauswahl. */
.kiste-hilfe{margin:0 0 .8rem;font-size:.88rem;color:var(--gedaempt)}
.kiste-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:.6rem}
.kiste-kachel{position:relative;min-width:0}
.kiste-knopf{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.1rem;width:100%;height:100%;min-height:4.4rem;padding:1.6rem .7rem .55rem;border:1px solid var(--kupfer);border-radius:2px;background:transparent;color:var(--text);font:400 .98rem/1.2 var(--sans);text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kiste-knopf:hover{background:rgba(180,123,75,.18)}
.kiste-knopf[aria-pressed="true"]{border-color:var(--kupfer-hell);background:rgba(180,123,75,.26);box-shadow:inset 0 0 0 1px var(--kupfer-hell);font-weight:500}
.kiste-knopf:focus-visible,.kiste-weg:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:2px}
.kiste-knopf .kiste-abv{margin-left:0;font-size:.78rem}
.kiste-zahl{position:absolute;left:.4rem;top:.4rem;min-width:1.5rem;height:1.5rem;padding:0 .35rem;display:inline-grid;place-items:center;border-radius:99px;background:var(--kupfer);color:var(--holz);font:600 .85rem/1 var(--sans);font-variant-numeric:lining-nums;pointer-events:none}
.kiste-weg{position:absolute;right:.2rem;top:.2rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;padding:0;border:0;border-radius:99px;background:transparent;color:var(--text);font:400 1.5rem/1 var(--sans);cursor:pointer}
.kiste-weg:hover{background:rgba(180,123,75,.35)}
.kiste-zaehler{margin:.9rem 0 0;font-size:.92rem;color:var(--gedaempt)}
.kiste-hinweis{margin:.8rem 0 0;padding:.8rem 1rem;border:1px solid var(--kupfer);background:rgba(180,123,75,.14);color:var(--text)}
.kiste-hinweis p{margin:0 0 .2rem}
.kiste-hinweis .knopf{margin-top:.6rem}
.kiste-summe{display:inline-block;margin-top:.3rem;color:var(--kupfer-hell);font-weight:500}
.kiste-fach-leer{visibility:hidden}
/* Mehrere Kisten (kiste.js legt zweite und weitere als Klon unter die erste): ohne Klon ist der Umschlag unsichtbar (display:contents), die Kiste verhält sich wie zuvor.
   Die aktive Kiste ist umrandet; der Titel „Kiste n“ mit „Kiste entfernen“ steht über jeder Vorschau. */
.kisten-stapel,.kiste-eintrag{display:contents}
.kiste-kopfzeile{display:none}
.kisten-stapel[data-mehrere]{display:grid;gap:1.6rem;width:100%;max-width:560px}
.kisten-stapel[data-mehrere] .kiste-eintrag{display:block;min-width:0}
.kisten-stapel[data-mehrere] .kiste-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 0 .4rem}
.kisten-stapel[data-mehrere] .kiste-bild{position:static;cursor:pointer}
.kisten-stapel[data-mehrere] .kiste-bild[data-aktiv]{border-color:var(--kupfer-hell);box-shadow:0 0 0 3px var(--kupfer-hell),0 18px 50px rgba(0,0,0,.5);cursor:default}
.kiste-titel{font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
.kiste-eintrag[data-aktiv] .kiste-titel{font-weight:600;text-decoration:underline;text-underline-offset:.3em}
.kiste-kiste-weg{min-height:36px;padding:.3rem .8rem;border:1px solid var(--kupfer);border-radius:2px;background:transparent;color:var(--text);font:400 .85rem/1.2 var(--sans);cursor:pointer}
.kiste-kiste-weg:hover{background:rgba(180,123,75,.18)}
/* Kiste wird befüllt (kiste.js): Flaschen werden per Web Animations bewegt (nur transform/opacity). Vorab ausgeblendet werden sie nur mit html.js und ohne
   „Bewegung reduzieren“, bis kiste.js .kiste-bereit setzt; fällt das Skript aus, blendet die Notfall-Animation sie nach 3,5 s ein. Ohne JavaScript und im Druck bleiben sie sichtbar. */
.kiste-kachel::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;opacity:0;box-shadow:0 0 0 1px rgba(214,180,119,.9),0 0 22px 5px rgba(214,180,119,.5)}
@keyframes kiste-notfall{to{visibility:visible}}
@keyframes kiste-glanz{0%{opacity:0;transform:scale(1)}28%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@media screen and (prefers-reduced-motion:no-preference){
  .js [data-kiste-buehne]:not(.kiste-bereit) .kiste-fl,.js [data-kiste-buehne]:not(.kiste-bereit) .kiste-schatten,.js [data-reihe-buehne]:not(.kiste-bereit) .reihe-flasche{visibility:hidden;animation:kiste-notfall 0s linear 3.5s forwards}
  .kiste-kachel.kiste-glanz::after{animation:kiste-glanz 1.2s cubic-bezier(.3,0,.3,1)}
}
.kiste-raster .produkt-text h1{font-size:clamp(2.6rem,6vw,4.2rem)}
.kiste-bild{box-shadow:0 18px 50px rgba(0,0,0,.5)}
@media(min-width:900px) and (max-width:1099px){.kiste-raster{grid-template-columns:minmax(300px,45%) minmax(0,1fr);gap:2.5rem}}
/* Holzkiste auf dem Handy (< 900 px): kompakt. Das Kistenbild klebt unter der Kopfleiste (Streifen über die volle Breite, Höhe höchstens 38 % des Bildschirms,
   Breite aus dem Seitenverhältnis des Zuschnitts, also ohne Verzerrung); darunter die Sortenkacheln als Raster (Geschenke: je Platz eine Zeile mit Nummer/Lage links und dem Auswahlfeld).
   .kiste-raster ist hier ein Flex-Block und .produkt-text löst sich per display:contents auf, damit das Bild über die ganze Seitenlänge kleben kann (sticky gilt nur im Elternblock).
   Das Label (.kiste-label) ist für Screenreader ausgeblendet: dort bleibt die legend („Fach n · Lage“) der Name der Gruppe, sie ist nur visuell versteckt. */
.kiste-label{display:none}
@media(max-width:899px){
  .kiste.produkt-kopf{padding-top:1rem;padding-bottom:2rem}
  .kiste .brotkrumen ol{margin-bottom:.7rem}
  .kiste-raster{display:flex;flex-direction:column;gap:0}
  .kiste-raster .produkt-text{display:contents}
  .kiste-bild{position:sticky;top:var(--kopf-hoehe);z-index:30;width:auto;max-width:none;margin:0 calc(-1 * var(--rand)) .8rem;padding:.4rem var(--rand);border:0;border-bottom:1px solid var(--linie);background:var(--holz);box-shadow:0 10px 14px -8px rgba(0,0,0,.55)}
  .kiste-buehne{width:min(100%,calc(38vh * var(--kiste-b) / var(--kiste-h)));width:min(100%,calc(38svh * var(--kiste-b) / var(--kiste-h)));margin-inline:auto;border:1px solid var(--kupfer)}
  .kiste-raster .eyebrow{margin-bottom:.3rem;font-size:.74rem}
  .kiste-raster .produkt-text h1{font-size:1.9rem;margin:0 0 .5rem}
  .kiste-raster .kurz{font-size:.95rem;margin-bottom:.4rem}
  .kiste-raster .intro{font-size:.92rem;margin-bottom:.8rem}
  .kiste-preis{order:1;margin:.8rem 0 0}
  .kiste-preis .auswahl-preis{font-size:1.7rem}
  .kiste-fest{font-size:.82rem}
  .kiste-auswahl,.kiste-raster .kauf-knoepfe,.kiste-raster .status,.kiste-raster noscript{order:2}
  .kiste-raster .auswahl{margin-top:.8rem;padding:.5rem 0}
  .kiste-raster .kauf-knoepfe{margin-top:.8rem}
  .kiste-wahl{width:100%;min-width:0}
  .kiste-fach{display:flex;align-items:center;gap:.6rem;margin:0 0 .3rem}
  .kiste-fach legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .kiste-label{display:flex;flex:none;flex-direction:column;justify-content:center;width:5.2rem;line-height:1.1}
  .kiste-nr{font:600 1.5rem/1 var(--serif);font-variant-numeric:lining-nums;color:var(--kupfer-hell)}
  .kiste-lage{font-size:.7rem;letter-spacing:.03em;color:var(--gedaempt)}
  /* Sortenkacheln als Raster (zwei bis drei Spalten) statt waagerechter Streifen */
  .kiste-hilfe{font-size:.8rem;margin-bottom:.6rem}
  .kiste-kacheln{grid-template-columns:repeat(auto-fill,minmax(7.6rem,1fr));gap:.45rem}
  .kiste-knopf{min-height:3.9rem;padding:1.5rem .55rem .4rem;font-size:.88rem;line-height:1.15}
  .kiste-knopf .kiste-abv{font-size:.72rem}
  /* Mehrere Kisten: die Streifen liegen nebeneinander (waagerecht wischbar) im klebenden Kopf, damit die aktive Kiste beim Tippen sichtbar bleibt */
  .kisten-stapel[data-mehrere]{position:sticky;top:var(--kopf-hoehe);z-index:30;display:flex;gap:.6rem;max-width:none;margin:0 calc(-1 * var(--rand)) .8rem;padding:.4rem var(--rand);overflow-x:auto;overscroll-behavior-x:contain;border-bottom:1px solid var(--linie);background:var(--holz);box-shadow:0 10px 14px -8px rgba(0,0,0,.55)}
  .kisten-stapel[data-mehrere] .kiste-eintrag{flex:0 0 min(64%,15rem)}
  .kisten-stapel[data-mehrere] .kiste-bild{position:static;width:auto;max-width:none;margin:0;padding:.25rem;border:1px solid var(--kupfer);background:var(--flaeche);box-shadow:none}
  .kisten-stapel[data-mehrere] .kiste-bild[data-aktiv]{box-shadow:0 0 0 2px var(--kupfer-hell);border-color:var(--kupfer-hell)}
  .kisten-stapel[data-mehrere] .kiste-buehne{width:100%;border:0}
  .kisten-stapel[data-mehrere] .reihe-buehne{border:0}
}


.sektion[id],.kopf-verkostung[id],.kauf-box[id],[data-anlass-box]{scroll-margin-top:var(--kopf-hoehe)}

/* Weichere Übergänge zwischen den Abschnitten (nur CSS): schmaler Verlauf von der Farbe des vorigen Abschnitts */
.sektion{position:relative}
.sektion::before{content:"";position:absolute;inset:0 0 auto 0;height:clamp(1.5rem,4vw,2.75rem);background:linear-gradient(var(--von,transparent),transparent);pointer-events:none}
.start .fassreihe-sektion,.start .theke{border-top:0}
.zahlenband+.sektion{--von:var(--flaeche)}
.start .fassreihe-sektion+.theke{--von:var(--holz)}
.start .theke+.probierkiste{--von:var(--flaeche)}
.start .etikett-band+.brennen{--von:var(--holz)}
.start .brennen+.geniessen{--von:var(--flaeche)}
.start .geniessen+.bs-teaser{border-top:1px solid var(--linie)}
.start .bs-teaser+.sektion{--von:var(--holz)}
.start .kacheln{padding-top:0}
.start .kacheln+.zahlenband{border-top:1px solid var(--linie)}
.start .geschmack+.fassreihe-sektion{border-top:1px solid var(--linie)}
.papier+.probierkiste{--von:var(--papier)}
.papier2+.probierkiste{--von:var(--papier2)}
.probierkiste+.papier{--von:var(--holz)}
.papier+.papier2{--von:var(--papier)}
.papier2+.papier{--von:var(--papier2)}
.produkt-kopf+.papier{--von:var(--holz)}
/* Kennzahlenband unter dem Produktkopf: weich aus dem dunklen Kopf */
.produkt-kopf+.zahlenband::before{content:"";position:absolute;inset:0 0 auto 0;height:1.25rem;background:linear-gradient(var(--holz),transparent);pointer-events:none}
.produkt-kopf+.zahlenband{position:relative}

/* ---------- Weichere Bewegung auf der ganzen Seite (nur mit Bewegung; bei „Bewegung reduzieren“ gilt der sofortige Zustand) ---------- */
/* Seitenübergänge: weiches Überblenden beim Wechsel zwischen den Seiten (Browser mit View Transitions; kopf und alter bleiben stehen und werden nicht überblendet) */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .kopf{view-transition-name:kopf}
  .alter{view-transition-name:alter}
  ::view-transition-old(root){animation:vt-aus .35s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-ein .45s cubic-bezier(.22,1,.36,1) both}
  ::view-transition-group(kopf),::view-transition-group(alter){animation-duration:0s}
}
@keyframes vt-aus{to{opacity:0}}
@keyframes vt-ein{from{opacity:0}}

/* Hero: Eyebrow, Überschrift, Text und Knöpfe erscheinen nacheinander mit etwas Tiefe (der langsame Zoom des Fotos bleibt) */
@keyframes hero-ein{from{opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:no-preference){
  .hero-text>*{animation:hero-ein 1.25s cubic-bezier(.22,1,.36,1) both}
  .hero-text>:nth-child(1){animation-delay:.12s}
  .hero-text>:nth-child(2){animation-delay:.28s}
  .hero-text>:nth-child(3){animation-delay:.46s}
  .hero-text>:nth-child(4){animation-delay:.64s}
  .knopf,.chip,.pfeil,.schild{transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .45s ease}
  .haupt a,.sprache a,.merk{transition:color .3s ease}
}

/* ---------- Geschmacksfinder (Startseite): Diagramm mit vier Stillleben, Sortenpunkten und ziehbarem Tropfen (Logik: site.js) ---------- */
.gf-kopf{margin-bottom:1.8rem}
.gf{display:grid;gap:1.6rem;align-items:start}
@media(min-width:1000px){.gf{grid-template-columns:minmax(0,46rem) minmax(16rem,1fr);gap:3.2rem;align-items:center}}
.gf-flaeche{position:relative;container-type:size;width:100%;max-width:46rem;aspect-ratio:4/5;margin-inline:auto;overflow:hidden;background:#120c08;border:1px solid var(--kupfer);
  box-shadow:0 18px 50px rgba(0,0,0,.5);cursor:crosshair;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
@media(min-width:700px){.gf-flaeche{aspect-ratio:1/1}}
@media(min-width:1000px){.gf-flaeche{margin-inline:0}}
/* Die Stillleben liegen übereinander; site.js setzt --o1 bis --o4 (Deckkraft je Bild) so, dass sich aus den Gewichten der vier Ecken ein fließender Übergang ergibt.
   Rechts angeschnitten (object-position), damit die freie Stelle auf dem Tisch für die Flasche immer an derselben Stelle liegt. */
.gf-bilder,.gf-schleier,.gf-achsen,.gf-feld,.gf-tisch{position:absolute}
.gf-bilder,.gf-schleier,.gf-achsen{inset:0}
.gf-bild{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 50%}
.gf-bild:nth-child(1){opacity:var(--o1,1)}
.gf-bild:nth-child(2){opacity:var(--o2,.5)}
.gf-bild:nth-child(3){opacity:var(--o3,.3333)}
.gf-bild:nth-child(4){opacity:var(--o4,.25)}
.gf-schleier{pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(13,14,13,.05) 0,rgba(13,14,13,.38) 100%),linear-gradient(rgba(13,14,13,.4),rgba(13,14,13,.14) 35%,rgba(13,14,13,.14) 62%,rgba(13,14,13,.5))}
/* Achsenbeschriftungen an den vier Enden (im Rand außerhalb des Feldes) */
.gf-achse{position:absolute;font:500 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--kupfer-hell);text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}
.gf-achse-oben{top:.75rem;left:50%;transform:translateX(-50%)}
.gf-achse-unten{bottom:.75rem;left:50%;transform:translateX(-50%)}
.gf-achse-links{left:.7rem;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.gf-achse-rechts{right:.7rem;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}
.gf-feld{inset:clamp(2.1rem,8cqw,2.7rem);z-index:2}
/* Kennzeichnung der Hintergrundbilder als Symbolbild (KI), klein in der Ecke unten links außerhalb des Feldes */
.gf-symbolbild{position:absolute;left:.45rem;bottom:.45rem;z-index:2;padding:.15rem .4rem;background:rgba(13,14,13,.78);color:var(--text);font:500 .6rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:2px;pointer-events:none}
.gf-kreuz{position:absolute;inset:0;pointer-events:none}
.gf-kreuz::before,.gf-kreuz::after{content:"";position:absolute}
.gf-kreuz::before{left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(214,180,119,.75),rgba(214,180,119,.4) 12%,rgba(214,180,119,.4) 88%,rgba(214,180,119,.75))}
.gf-kreuz::after{top:0;bottom:0;left:50%;width:1px;background:linear-gradient(rgba(214,180,119,.75),rgba(214,180,119,.4) 12%,rgba(214,180,119,.4) 88%,rgba(214,180,119,.75))}
/* Quadrantentitel in den Ecken des Feldes */
.gf-titel-reihe{position:absolute;inset:0;pointer-events:none}
.gf-titel{position:absolute;display:flex;flex-direction:column;gap:.15rem}
.gf-titel-name{font:italic 600 clamp(1.05rem,3.6cqh,1.7rem)/1.05 var(--serif);color:var(--text);text-shadow:0 2px 16px rgba(0,0,0,.75)}
.gf-titel-sub{font:500 .62rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer-hell);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.gf-titel-klar-fruchtig{left:0;top:0}
.gf-titel-kraeftig-wuerzig{right:0;top:0;align-items:flex-end;text-align:right}
.gf-titel-suess-fruchtig{left:0;bottom:0}
.gf-titel-weich-warm{left:calc(50% + .8rem);bottom:0}
@media(max-width:699px){.gf-titel-sub{display:none}}
/* Sortenpunkte: reine Dekoration. --n (0 bis 1) setzt site.js nach dem Abstand zum Tropfen: Nähe macht Punkt und Name größer und heller, Ferne lässt sie zurücktreten. */
.gf-sorten{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.gf-punkt{position:absolute;left:calc((var(--x) + 1) * 50%);top:calc((1 - var(--y)) * 50%);width:0;height:0;--n:0}
.gf-pkt{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--kreide);box-shadow:0 0 0 1px rgba(13,14,13,.55);
  opacity:calc(.5 + var(--n) * .5);transform:scale(calc(.75 + var(--n) * 1.15))}
/* Namen: Nicht-Treffer gedämpft ohne Schild; Treffer (.schild, von site.js nach Platz gewählt) auf dunklem Schild, der Favorit in Kupfer. Schmale Fläche (< 600 px): nur Schilder, sonst nur Punkte. */
.gf-name{position:absolute;left:.7rem;top:0;width:max-content;max-width:9em;box-sizing:border-box;font:400 .62rem/1.08 var(--sans);color:var(--kreide);text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);
  transform:translateY(-50%);transform-origin:0 50%;opacity:calc(.3 + var(--n) * .3);visibility:visible;transition:opacity .3s ease,visibility 0s}
.gf-links .gf-name,.gf-punkt.gf-l .gf-name{left:auto;right:.7rem;text-align:right;transform-origin:100% 50%}
.gf-punkt.gf-r .gf-name{left:.7rem;right:auto;text-align:left;transform-origin:0 50%}
.gf-punkt.treffer .gf-pkt{background:var(--kupfer-hell);box-shadow:0 0 0 1px rgba(13,14,13,.55),0 0 9px 2px rgba(214,180,119,.75)}
.gf-punkt.gf-schild{z-index:2}
.gf-punkt.favorit{z-index:3}
.gf-punkt.gf-schild .gf-name{padding:.2rem .45rem;background:rgba(13,14,13,.86);border-radius:4px;color:#fff;font-size:.72rem;line-height:1.15;text-shadow:none;opacity:1;pointer-events:auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.45)}
@supports((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .gf-punkt.gf-schild .gf-name{background:rgba(13,14,13,.78);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
}
.gf-punkt.favorit .gf-name{padding:.28rem .6rem;background:var(--kupfer);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--holz);font-size:.82rem;font-weight:600;box-shadow:0 0 0 1px rgba(251,230,194,.55),0 3px 12px rgba(0,0,0,.55)}
@container (max-width:599px){
  .gf-punkt:not(.gf-schild) .gf-name{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
  .gf-pkt{opacity:calc(.35 + var(--n) * .5)}
  .nojs .gf-punkt:not(.gf-schild) .gf-name{opacity:.85;visibility:visible}
}
/* Namen, die der Flasche des Favoriten nicht ausweichen können (site.js), zeigen nur den Punkt */
.gf-punkt.gf-aus .gf-name{visibility:hidden;pointer-events:none}
/* Tropfen: ziehbar, mit Glut und Fokusring. Der Auswahlpunkt ist die SPITZE (oben): der Knopf hängt mit seiner oberen Mitte an (x, y), der Tropfen darunter.
   Maße als Variablen: Spitze im SVG (viewBox 0 0 32 44) bei y = 1, also Versatz = Höhe / 44 nach oben. */
.gf-marker{position:absolute;left:0;top:0;z-index:3;width:56px;height:56px;margin:0 0 0 -28px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:grab;touch-action:none;will-change:transform;-webkit-tap-highlight-color:transparent}
.gf-marker:focus-visible{outline:none}
.gf-marker:focus-visible::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px var(--holz),0 0 0 4px var(--kupfer-hell)}
.gf-marker::before{content:"";position:absolute;z-index:2;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--kupfer),0 0 10px 3px rgba(247,205,150,.85);pointer-events:none}
.gf-zieht,.gf-zieht .gf-marker{cursor:grabbing}
.gf-tropfen{--tb:32px;--th:44px;position:absolute;left:50%;top:0;width:var(--tb);height:var(--th);margin:calc(var(--th) / -44) 0 0 calc(var(--tb) / -2);pointer-events:none}
.gf-tropfen::before{content:"";position:absolute;left:50%;top:66%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,205,150,.62),rgba(180,123,75,.22) 42%,transparent 70%)}
.gf-tropfen-svg{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
@keyframes gf-fall{from{opacity:0;transform:translate3d(0,-70px,0) scale(.6)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes gf-puls{0%,100%{opacity:.75;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:no-preference){
  .js .gf:not(.gf-bereit) .gf-tropfen,.js .gf:not(.gf-bereit) .gf-marker::before{opacity:0}
  .gf-bereit .gf-tropfen{animation:gf-fall 1.1s cubic-bezier(.22,1,.36,1) both}
  .gf-tropfen::before{animation:gf-puls 3.4s ease-in-out infinite}
  .gf-zieht .gf-tropfen::before{animation-play-state:paused}
}
/* Flasche des Favoriten auf dem Tisch des Stilllebens (Maße in Einheiten der Bildhöhe, damit sie zur freien Stelle im Bild passen) */
/* Flasche liegt hinter den Sortennamen (Feld), der Favoriten-Link darüber */
.gf-tisch{right:3cqh;bottom:0;width:22.2cqh;height:60cqh;pointer-events:none}
.gf-flaschenbuehne{position:absolute;z-index:1;left:0;right:0;bottom:19cqh;height:38cqh}
.gf-flaschenbuehne::after{content:"";position:absolute;left:8%;right:8%;bottom:-1.3cqh;height:3.2cqh;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%)}
.gf-fl{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.gf-fl>img,.gf-fl>svg{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 .8cqh 1.2cqh rgba(0,0,0,.55))}
.gf-favorit{position:absolute;z-index:3;left:-3cqh;right:-3cqh;bottom:3cqh;margin:0;text-align:center;font:italic 600 clamp(.95rem,3cqh,1.4rem)/1.15 var(--serif);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.gf-favorit-label{display:block;margin-bottom:.15rem;font:500 .6rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell);font-style:normal}
.gf-favorit a{pointer-events:auto;color:var(--text)}
.gf-favorit a:hover{color:var(--kupfer-hell)}
@media(max-width:699px){.gf-favorit-label{display:none}.gf-favorit{bottom:.55rem}} /* schmal: nur der Name, unterhalb des Quadrantentitels */
/* rechte Spalte bzw. Zeile darunter */
.gf-leiste{display:grid;gap:1.1rem;align-content:start}
.gf-status{margin:0;min-height:2.5em;font:600 1.3rem/1.25 var(--serif);color:var(--text)}
.gf-hinweis{margin:0;font-size:.92rem;line-height:1.5;color:var(--gedaempt)}
.gf-quadranten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.gf-quadrant{justify-content:center;text-align:center}
.gf-quadrant [aria-hidden=true]{font-size:1.5rem;line-height:1}
.gf-quadrant[aria-current=true]{background:rgba(180,123,75,.28);border-color:var(--kupfer-hell)}
.gf-knoepfe{margin:.2rem 0 0}
/* Hinweis in der Theke, solange der Geschmacksfilter aktiv ist */
.gf-filterhinweis{margin:.9rem 0 0;color:var(--kupfer-hell)}
.dunkel .linkknopf{color:var(--kupfer-hell)}
/* ohne JavaScript: statisches Diagramm ohne Bedienung */
.nojs .gf{grid-template-columns:1fr}
.nojs .gf-flaeche{cursor:default;touch-action:auto}
.nojs .gf-marker,.nojs .gf-tisch,.nojs .gf-leiste{display:none}

/* Auswahl-Streifen (Handy, < 900 px): Knopfgruppen mit der Klasse .streifen sind EINE waagerecht wischbare Zeile statt umzubrechen. Gemeinsame Klasse im Markup (statt langer
   Selektorliste), weil sie genau die Gruppen kennzeichnet, die so laufen sollen, und die Holzkiste (.kiste-fach .chips, eigenes Muster oben) nicht erfasst.
   Der Streifen reicht bis an den Bildschirmrand (negativer Rand = Innenabstand, --streifen-aus; in der Kauf-Box deren Innenabstand), rechts und, sobald nicht am Anfang, links
   blendet eine Maske aus. site.js setzt .streifen-ende / .streifen-versetzt und hält die gewählte Option sichtbar; ohne Skript bleibt alles per Wischen erreichbar. */
@media(max-width:899px){
  .streifen{--streifen-aus:var(--rand);--fl:0px;--fr:2.2rem;display:flex;flex-wrap:nowrap;gap:.6rem;margin-inline:calc(-1 * var(--streifen-aus));padding:.35rem var(--streifen-aus);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--streifen-aus);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
  .streifen::-webkit-scrollbar{display:none}
  .streifen.streifen-versetzt{--fl:2.2rem}
  .streifen.streifen-ende{--fr:0px}
  .streifen>*{flex:none;scroll-snap-align:start}
  .streifen .chip,.streifen .chip-radio>span{white-space:nowrap}
  .kauf-box .streifen{--streifen-aus:1.2rem}
  .groessen,.produkt-text{min-width:0} /* Fieldset und Rasterspalte dürfen schmaler als der Streifen sein, sonst weitet er die Seite */
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){.streifen{scroll-behavior:auto}}

/* ---------- Merkzettel (Herz in der Kopfleiste, Schublade von rechts) und Merken-Knöpfe (Logik: site.js) ---------- */
.merk-herz{background:none;border:0;margin:0;font:inherit;cursor:pointer;padding:.6rem .2rem;min-width:38px;min-height:44px;justify-content:center}
.merk-herz[aria-expanded=true]{color:var(--kupfer-hell)}
.merk-herz:focus-visible,.merk:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:2px}
.nojs .merk-herz,.nojs .mz,.nojs .karte-herz,.nojs .mz-merken,.nojs .gf-fav-aktion,.nojs [data-gf-alle-merken]{display:none}
.herz path{transition:fill .25s ease}
[aria-pressed=true]>.herz path{fill:currentColor}
/* Herz auf der Sortenkarte: Geschwister des Links im <li>, oben rechts über dem Kartenbild */
.karte-li{position:relative}
.karte-herz{position:absolute;z-index:3;top:.2rem;right:.2rem;display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:1px solid var(--linie);border-radius:50%;
  background:rgba(13,14,13,.78);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.karte-herz:hover{color:var(--kupfer-hell);border-color:var(--kupfer-hell)}
.karte-herz:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:2px}
.karte-herz[aria-pressed=true]{color:var(--kupfer-hell)}
.karte-herz .herz{width:20px;height:20px}
@media(min-width:700px){.karte-herz{top:.35rem;right:.35rem}}
/* Merken neben „In den Warenkorb“ (Sortenseite) und Knöpfe zum Favoriten im Geschmacksfinder */
.mz-merken,.gf-merken{gap:.5rem}
.mz-merken .herz,.gf-merken .herz{width:20px;height:20px;flex:none}
/* Sortenseite, Handy: „In den Warenkorb“ und „Merken“ in einer Zeile (Warenkorb-Knopf füllt den Rest; unter 380 px nur Herz, Name steht im aria-label) */
@media(max-width:519px){
  .kauf-box .kauf-knoepfe{gap:.6rem}
  .kauf-box .kauf-knoepfe .knopf{padding-inline:1rem}
  .kauf-box .kauf-knoepfe [data-merk-add]{flex:1 1 auto}
  .kauf-box .kauf-knoepfe .mz-merken{gap:.4rem}
}
@media(max-width:379px){.kauf-box .kauf-knoepfe .mz-merken>span{display:none}}
.mz-merken[aria-pressed=true],.gf-merken[aria-pressed=true]{border-color:var(--kupfer-hell);box-shadow:inset 0 0 0 1px var(--kupfer-hell)}
.gf-fav-aktion{display:flex;flex-wrap:wrap;gap:.6rem}
.gf-fav-aktion .knopf{padding-inline:1rem}
[data-gf-alle-merken][aria-disabled=true]{opacity:.55;cursor:default}
/* Schublade: dialog, von rechts hereinfahrend (nur transform/opacity), Hintergrund abgedunkelt */
html.mz-offen{overflow:hidden;padding-right:var(--sb,0px)}
.mz{position:fixed;inset:0 0 0 auto;width:min(26rem,100vw);max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--kupfer);
  background:var(--flaeche);color:var(--text);overflow:hidden;box-shadow:-18px 0 50px rgba(0,0,0,.5)}
.mz:not([open]){display:none}
.mz::backdrop{background:rgba(10,6,3,.62);opacity:0}
.mz.offen::backdrop{opacity:1}
.mz-innen{display:flex;flex-direction:column;width:100%;height:100%}
.mz-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem .6rem 1.2rem;border-bottom:1px solid var(--linie)}
.mz-kopf h2{margin:0;font:600 1.6rem/1.2 var(--serif)}
.mz-zu{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--linie);border-radius:50%;background:transparent;color:var(--text);font:400 1.6rem/1 var(--sans);cursor:pointer}
.mz-zu:hover{color:var(--kupfer-hell);border-color:var(--kupfer-hell)}
.mz-zu:focus-visible,.mz-entfernen:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:2px}
.mz-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1.2rem}
.mz-leer p{margin:0 0 1rem;color:var(--gedaempt)}
.mz-liste{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.mz-eintrag{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.4rem 1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--linie)}
.mz-eintrag:last-child{border-bottom:0}
.mz-bild{display:flex;align-items:flex-end;justify-content:center;height:7.5rem}
.mz-bild img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 .4rem .5rem rgba(0,0,0,.5))}
.mz-tropfen{display:block;width:2rem;height:2.75rem;opacity:.8}
.mz-rest{min-width:0}
.mz-name-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.mz-name{margin:0;font:600 1.4rem/1.2 var(--serif)}
.mz-entfernen{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-.6rem -.6rem 0 0;padding:0;border:0;background:transparent;color:var(--gedaempt);font:400 1.5rem/1 var(--sans);cursor:pointer}
.mz-entfernen:hover{color:var(--kupfer-hell)}
.mz-legende{margin:.6rem 0 .1rem;font:500 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-hell)}
.mz .streifen{--streifen-aus:1.2rem;--fl:0px;--fr:2.2rem;display:flex;flex-wrap:nowrap;gap:.6rem;margin-inline:calc(-1 * var(--streifen-aus));padding:.35rem var(--streifen-aus);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--streifen-aus);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.mz .streifen::-webkit-scrollbar{display:none}
.mz .streifen.streifen-versetzt{--fl:2.2rem}
.mz .streifen.streifen-ende{--fr:0px}
.mz .streifen>*{flex:none;scroll-snap-align:start}
.mz .streifen .chip-radio>span{white-space:nowrap}
.mz .preis.anfrage{margin:.6rem 0 0;font-size:1.2rem}
.mz-add{margin-top:.7rem;width:100%}
.mz-fuss{flex:none;padding:.9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linie)}
.mz-fuss .knopf{width:100%}
.mz-liste:empty{display:none}
@media(prefers-reduced-motion:no-preference){
  .mz{transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .mz.offen{transform:none}
  .mz::backdrop{transition:opacity .4s ease}
}
@media(prefers-reduced-motion:reduce){
  .mz::backdrop{transition:none}
  .herz path{transition:none}
}

/* Besuchs-Seite /besuch/ (Hofführung, Testseite) und Teaser auf der Startseite: alle Klassen mit Präfix .bs-; Farben nur aus den Variablen oben */
.bs-hero h1{font-size:clamp(2.8rem,8vw,6rem);line-height:1}
.bs-hero .hero-bild img{object-position:60% 55%}

/* Kurzfakten-Band: Textpunkte statt Zahlen, zwei Spalten schmal, vier Spalten ab 700 px */
.bs-fakten-liste{list-style:none;margin:0 auto;padding:1.4rem var(--rand);max-width:1200px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 0}
.bs-fakten-liste li{text-align:center;padding-inline:.6rem;font:600 clamp(1.25rem,3.6vw,1.8rem)/1.15 var(--serif);color:var(--kupfer-hell)}
.bs-fakten-liste li:nth-child(even){border-left:1px solid var(--linie)}
@media(min-width:700px){.bs-fakten-liste{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:2rem}.bs-fakten-liste li+li{border-left:1px solid var(--linie)}}

/* Gruppen: drei Karten */
.bs-karten{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem}
@media(min-width:800px){.bs-karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.bs-karte{padding:1.4rem 1.4rem 1.2rem;background:var(--papier2);border:1px solid var(--kupfer-dunkel);border-radius:2px}
.bs-karte h3{font-size:1.7rem;margin-bottom:.4rem}
.bs-karte p{margin:0;color:var(--gedaempt-papier)}
.bs-gruppen-hinweis{margin:1.6rem 0 0;font:600 1.5rem/1.2 var(--serif)}

/* Gut zu wissen: Liste, daneben Foto */
.bs-wissen-raster{display:grid;gap:2.4rem;align-items:start}
@media(min-width:900px){.bs-wissen-raster{grid-template-columns:1fr 1fr;gap:3.5rem}}
.bs-liste{list-style:none;margin:1.2rem 0 0;padding:0}
.bs-liste li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid rgba(122,74,38,.3)}
.bs-liste li::before{content:"";position:absolute;left:0;top:1.25rem;width:.8rem;height:2px;background:var(--kupfer-dunkel)}
.bs-wissen-bild{display:grid;gap:1.2rem}
.bs-freude{margin:0;font:600 1.6rem/1.2 var(--serif)}

/* Schluss: große Anfrage, Adresse, Telefon */
.bs-knopf-gross{min-height:56px;padding:.9rem 2rem;font-size:1.15rem}
.bs-adresse{margin-top:2rem;margin-bottom:1rem}

/* Teaser auf der Startseite (vor „Besuch & Verkauf“) */
.bs-teaser-raster{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.bs-teaser-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4rem}}
.bs-teaser-foto{max-width:none}
.bs-teaser-text h2{margin-bottom:.4em}
.papier+.bs-teaser{--von:var(--papier)}
.bs-teaser+.papier{--von:var(--holz)}

/* Mobil: Knopf-Streifen unten. Erst sichtbar, wenn der Altershinweis bestätigt ist (html.alter-ok), damit beide nie übereinanderliegen; ab 900 px aus. Seitenende bekommt Abstand. */
.bs-streifen{display:none}
@media(max-width:899px){
  .alter-ok .bs-streifen{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.6rem var(--rand);background:var(--flaeche);border-top:1px solid var(--kupfer)}
  .alter-ok .bs-streifen .knopf{display:flex;width:100%}
  .alter-ok .seite-besuch{padding-bottom:4.5rem}
}

/* ---------- Weitere Holzkisten (0,1 l), Geschenkideen, Übersicht ---------- */
/* Vorschau als Flaschenreihe (kiste.js): je Reihe ein Raster, Flaschen stehen auf einer Holzleiste; die Vektor-Flasche misst sich an der Höhe des Fachs (container-type:size) */
.reihe-buehne{overflow:hidden;display:grid;gap:.5rem;padding:1rem .8rem .7rem;background:linear-gradient(#1a120b,#0b0907);--rh:15rem}
.reihe-zeile{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.4rem;border-bottom:4px solid var(--kupfer-dunkel);padding-bottom:.35rem}
.reihe-fach{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.reihe-flasche{display:flex;align-items:flex-end;justify-content:center;width:100%;height:var(--rh);container-type:size}
.reihe-flasche .reihe-bild{height:96%;width:auto;max-width:100%;object-fit:contain;margin-bottom:2%}
.reihe-flasche .flasche{margin-bottom:2cqh}
.reihe-alt{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.reihe-apo{display:block;height:94%;aspect-ratio:70/150;margin-bottom:2%}
.reihe-apo svg{display:block;width:100%;height:100%}
.reihe-name{margin-top:.35rem;min-height:2.3em;font-size:.74rem;line-height:1.15;text-align:center;color:var(--gedaempt);overflow-wrap:anywhere;hyphens:auto}
.kiste-reihe .kiste-bild{max-width:560px}
/* Vektor-Apothekerflasche in der Bühne der Sortenseite (Auswahl „Apothekerflasche 0,1 l“, solange kein Foto vorliegt) */
.buehne .flasche-apo{position:relative;display:block;flex:none;height:78cqh;aspect-ratio:70/150;margin-bottom:6cqh}
.flasche-apo>svg{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.flasche-apo .fl-bild{object-fit:contain}
@media(max-width:899px){
  .kiste-reihe .reihe-buehne{--rh:calc((34vh - 3.6rem) / var(--zeilen));--rh:calc((34svh - 3.6rem) / var(--zeilen));padding:.5rem .5rem .4rem;gap:.3rem;border:1px solid var(--kupfer)}
  .kiste-reihe .reihe-name{font-size:.62rem;min-height:2.3em;margin-top:.2rem}
}
.kiste-beispiel .kiste-beispiel-bild{max-width:620px;margin:1.2rem auto 0}
.kiste-beispiel-foto{display:block;width:100%;height:auto}
.kiste-beispiel figcaption{padding:.6rem .2rem 0;font-size:.9rem;color:var(--gedaempt-papier)}
/* Abschnitt „eigene Etiketten“ */
.etikett-raster{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 3rem}
.etikett-text{flex:1 1 32rem;min-width:0}
.etikett-band{border-block:1px solid var(--kupfer)}
.etikett-band .knoepfe{margin-top:0}
.etikett-kompakt{padding-block:clamp(1.6rem,4vw,2.6rem)}
.etikett-kompakt h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:.5rem}
.etikett-kompakt .lead-klein{font-size:1rem;margin:0}
.kisten-hinweis{padding-block:1.6rem;border-top:1px solid var(--linie)}
.kisten-hinweis .lead-klein{margin:0;max-width:none}
/* Geschenkideen */
.geschenke-kopf,.kisten-kopf{padding-bottom:clamp(2rem,5vw,3.5rem)}
.geschenke-kopf .brotkrumen ol,.kisten-kopf .brotkrumen ol{margin-bottom:1rem}
.geschenk-raster{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.geschenk-bild{margin:0}
.geschenk-foto{display:block;width:100%;height:auto}
.geschenk-raster .geschenk-foto{aspect-ratio:4/5;object-fit:cover}
.advent-raster{display:grid;gap:2rem;align-items:center}
/* Geschenkkörbe und Adventskalender: Bühnen wie bei den Kisten (kiste.js), Auswahl je Platz als Auswahlfeld */
.stufe-titel{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:0 0 1rem}
.geschenk-stufe,.advent.kiste{border-top:1px solid var(--linie)}
.kiste-select{display:block;width:100%;min-height:44px;padding:.5rem 2.2rem .5rem .8rem;font:inherit;color:var(--text);background-color:var(--holz);border:1px solid var(--kupfer);border-radius:2px;cursor:pointer}
.kiste-select:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:3px}
@media(max-width:899px){.kiste-platz .kiste-select{flex:1 1 auto;min-width:0}.stufe-titel{font-size:1.6rem;margin:0 0 .5rem}}
@media(min-width:900px){.advent-raster{grid-template-columns:minmax(300px,520px) 1fr;gap:4rem}}
/* Adventskalender: 24 Auswahlfelder „Türchen n“ in einem aufklappbaren Bereich (details), als Raster; die Legende bleibt sichtbar (auch mobil) */
.kiste-details{margin:1.2rem 0 0;border:1px solid var(--kupfer);border-radius:2px}
.kiste-details>summary{display:flex;align-items:center;gap:.8rem;min-height:44px;padding:.5rem .9rem;cursor:pointer;font:500 .95rem/1.2 var(--sans);color:var(--text);list-style:none}
.kiste-details>summary::-webkit-details-marker{display:none}
.kiste-details>summary::after{content:"+";margin-left:auto;color:var(--kupfer-hell);font-size:1.4rem;line-height:1}
.kiste-details[open]>summary::after{content:"\2212"}
.kiste-details>summary:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:3px}
.kiste-wahl-advent{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.4rem,1fr));gap:.6rem .7rem;padding:.3rem .9rem .9rem}
.kiste-wahl-advent .kiste-fach{display:block;margin:0}
.kiste-wahl-advent .kiste-fach legend{position:static;width:auto;height:auto;margin:0 0 .3rem;overflow:visible;clip:auto;white-space:normal;font-size:.72rem}
.kiste-wahl-advent .kiste-label{display:none}
.advent .geschenk-bild{max-width:520px}
.advent .kauf-knoepfe{margin-top:1.4rem}
.advent .status{min-height:0;margin:.5rem 0 0}
.advent .status:empty{display:none}
.nojs .advent .knopf[data-kiste-add]{display:none}
/* Übersicht */
.kisten-karten{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.kisten-karte a{display:flex;flex-direction:column;gap:.5rem;height:100%;color:inherit;text-decoration:none}
.kisten-karte-bild{display:block;aspect-ratio:1/1;overflow:hidden;background:#0b0907;border:1px solid var(--kupfer-dunkel)}
.kisten-karte-bild picture,.kisten-karte-foto{display:block;width:100%;height:100%}
.kisten-karte-foto{object-fit:cover}
.kisten-karte-kiste{margin:0;width:100%;height:100%;display:flex;align-items:center}
.kisten-karte-kiste .kiste-buehne{width:100%}
.kisten-karte-name{font:600 1.25rem/1.2 var(--serif)}
.kisten-karte-meta{color:var(--kupfer-hell)}
.kisten-karte a:hover .kisten-karte-name,.kisten-karte a:focus-visible .kisten-karte-name{text-decoration:underline}
.kisten-karte a:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:3px}

/* ---------- Kopf und Navigation (Dark Luxury) ----------
   Kopf: feste Höhe (--kopf-hoehe), klebt oben. Auf der Startseite transparent über dem Hero (der Hero rückt per negativem Rand darunter), nach ca. 40 px Scrollen
   (site.js setzt .fest) mit dunklem Grund, Unschärfe und Goldlinie; auf allen anderen Seiten von Anfang an --tief.
   Ab 1100 px steht die Navigation in einer Reihe (Produkte mit Ausklappmenü); darunter öffnet der Hamburger-Knopf ein Vollflächen-Panel (absolut unter dem Kopf,
   nicht fixed: view-transition-name/backdrop-filter machen den Kopf sonst zum Bezugsrahmen fixer Nachfahren). Ohne JavaScript (.nojs) bleibt alles als umbrechende Liste sichtbar. */
:root{--kopf-hoehe:4rem}
@media(min-width:1100px){:root{--kopf-hoehe:5rem}}
.kopf{position:sticky;top:0;z-index:40;box-sizing:border-box;height:var(--kopf-hoehe);background:var(--tief);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1600px;height:100%;margin-inline:auto;padding-inline:var(--rand);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;flex:none;align-items:center;padding:.2rem 0;text-decoration:none}
.logo-bild{display:block;height:44px;width:auto;max-width:none}
@media(min-width:1100px){.logo-bild{height:54px}}
.start .kopf:not(.fest){background:transparent;border-bottom-color:transparent}
.kopf.fest{background:rgba(13,14,13,.92);border-bottom-color:var(--linie-stark);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.menue-offen .kopf{background:var(--tief);border-bottom-color:var(--linie);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:no-preference){
  .kopf{transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
}
.sektion[id],.kopf-verkostung[id],.kauf-box[id],[data-anlass-box]{scroll-margin-top:var(--kopf-hoehe)}
.start .hero-voll{margin-top:calc(-1 * var(--kopf-hoehe))}

/* Navigation (Desktop) */
.haupt{display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.9rem)}
.haupt a,.haupt-produkte{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 0;color:var(--text);font:500 .9rem/1.2 var(--sans);letter-spacing:.03em;text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer}
.haupt a:hover,.haupt-produkte:hover,.haupt-produkte[aria-expanded=true]{color:var(--gold)}
.haupt [aria-current=page]{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.55em}
.haupt [aria-current=true]{color:var(--gold)}
.haupt-gruppe{position:relative}
.chevron{flex:none}
.haupt-produkte[aria-expanded=true] .chevron{transform:rotate(180deg)}
.untermenue{list-style:none;margin:0;padding:.5rem;min-width:16rem;background:var(--tief);border:1px solid var(--linie-stark);border-radius:var(--r)}
.untermenue a{display:flex;padding:.7rem .9rem;border-radius:var(--r-klein)}
.untermenue a:hover{background:rgba(214,180,119,.1)}
.menue-knopf{display:none}
@media(min-width:1100px){
  .menue-panel{display:contents}
  .untermenue{position:absolute;left:-1rem;top:calc(100% + .6rem);visibility:hidden;opacity:0;transform:translateY(6px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .untermenue::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
  .haupt-produkte[aria-expanded=true]+.untermenue{visibility:visible;opacity:1;transform:none}
  .sprache-panel{display:none}
}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
  .untermenue{transition:opacity var(--dauer-kurz) var(--kurve),transform var(--dauer-kurz) var(--kurve),visibility 0s linear var(--dauer-kurz)}
  .haupt-produkte[aria-expanded=true]+.untermenue{transition-delay:0s}
  .chevron{transition:transform var(--dauer-kurz) var(--kurve)}
}

/* rechts: Merkzettel-Herz, Tasche (Warenkorb), Sprache, Hamburger */
.kopf-rechts{display:flex;align-items:center;gap:.5rem}
@media(min-width:520px){.kopf-rechts{gap:.8rem}}
.merk,.sprache a{color:var(--text);text-decoration:none;font-size:.9rem;padding:.6rem 0;display:inline-block}
.merk:hover,.sprache a:hover{color:var(--gold)}
.merk{display:inline-flex;align-items:center;gap:.4rem;position:relative}
.merk-text{display:none}
@media(min-width:1500px){.merk-text{display:inline;margin-left:.2rem}} /* Abstand, damit der Zähler am Symbol den Text („Ma sélection“) nicht überdeckt */
.zaehler{background:var(--gold);color:var(--tief);font:600 .7rem/1 var(--sans);border-radius:99px;min-width:1.15rem;height:1.15rem;display:inline-grid;place-items:center;padding:0 .3rem}
/* Zähler als Aufsatz am Symbol (oben rechts am Herz bzw. an der Tasche) */
.merk .zaehler{position:absolute;top:.1rem;left:calc(22px - 1rem);box-shadow:0 0 0 2px var(--tief)}
.merk-herz .zaehler{left:calc(50% + 2px)}
.zaehler[hidden]{display:none}
.sprache{display:flex;align-items:center;gap:.3rem;color:var(--gedaempt)}
.sprache a{padding:.6rem .3rem;letter-spacing:.08em}
.sprache [aria-current]{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
.sprache-panel{display:none}

/* Schmal und mittel (< 1100 px): Hamburger und Vollflächen-Panel */
@media(max-width:1099px){
  .menue-knopf{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 -.4rem 0 0;padding:0;background:none;border:0;color:var(--text);cursor:pointer}
  .menue-knopf:hover{color:var(--gold)}
  .menue-striche{position:relative;display:block;width:22px;height:14px}
  .menue-striche i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px}
  .menue-striche i:nth-child(1){top:0}
  .menue-striche i:nth-child(2){top:6px}
  .menue-striche i:nth-child(3){top:12px}
  .menue-knopf[aria-expanded=true] i:nth-child(1){top:6px;transform:rotate(45deg)}
  .menue-knopf[aria-expanded=true] i:nth-child(2){opacity:0}
  .menue-knopf[aria-expanded=true] i:nth-child(3){top:6px;transform:rotate(-45deg)}
  .menue-panel{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--kopf-hoehe));height:calc(100dvh - var(--kopf-hoehe));overflow-y:auto;overscroll-behavior:contain;background:var(--tief);padding:1.2rem var(--rand) 3rem;border-top:1px solid var(--linie)}
  html.menue-offen{overflow:hidden}
  html.menue-offen .menue-panel{display:block}
  .haupt{flex-direction:column;align-items:stretch;gap:0;max-width:34rem;margin-inline:auto}
  .haupt a,.haupt-produkte{display:flex;justify-content:space-between;width:100%;padding:.8rem 0;font:600 clamp(1.7rem,6vw,2.2rem)/1.15 var(--serif);letter-spacing:0;border-bottom:1px solid var(--linie);text-align:left}
  .haupt [aria-current=page]{text-decoration:none}
  .haupt [aria-current=page]::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);align-self:center}
  .chevron{width:16px;height:16px}
  .haupt-gruppe{border-bottom:0}
  .untermenue{display:none;padding:0 0 .4rem 1rem;min-width:0;border:0;border-radius:0;background:none}
  .haupt-produkte[aria-expanded=true]+.untermenue{display:block}
  .untermenue a{padding:.6rem 0;font:500 1.15rem/1.3 var(--sans);letter-spacing:.02em;border-bottom:0;color:var(--gedaempt)}
  .untermenue a:hover{background:none;color:var(--gold)}
  .untermenue [aria-current]{color:var(--gold)}
  .haupt-gruppe .haupt-produkte{border-bottom:1px solid var(--linie)}
}
@media(max-width:519px){
  .sprache-kopf{display:none}
  .menue-panel .sprache-panel{display:flex;max-width:34rem;margin:1.6rem auto 0;font-size:1.05rem}
  .menue-panel .sprache-panel a{font-size:1.05rem;padding:.7rem .5rem}
}
@media(max-width:1099px) and (prefers-reduced-motion:no-preference){
  .menue-striche i{transition:transform var(--dauer-kurz) var(--kurve),opacity var(--dauer-kurz) var(--kurve),top var(--dauer-kurz) var(--kurve)}
  html.menue-offen .menue-panel{animation:panel-ein var(--dauer-kurz) var(--kurve) both}
  .untermenue{animation:none}
  .haupt-produkte[aria-expanded=true]+.untermenue{animation:panel-ein var(--dauer-kurz) var(--kurve) both}
  .chevron{transition:transform var(--dauer-kurz) var(--kurve)}
}
@keyframes panel-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Ohne JavaScript: Navigation als umbrechende Liste unter dem Logo, Produkte-Links offen, kein Hamburger */
.nojs .menue-knopf,.nojs .haupt-produkte{display:none}
.nojs .haupt-gruppe,.nojs .untermenue,.nojs .untermenue li{display:contents}
.nojs .start .kopf{background:var(--tief);border-bottom-color:var(--linie)}
.nojs .start .hero-voll{margin-top:0}
@media(max-width:1099px){
  .nojs .kopf{height:auto}
  .nojs .kopf-innen{flex-wrap:wrap;padding-block:.4rem}
  .nojs .menue-panel{display:block;position:static;height:auto;overflow:visible;order:3;width:100%;padding:0;border:0}
  .nojs .haupt{flex-direction:row;flex-wrap:wrap;max-width:none;gap:0 1.2rem}
  .nojs .haupt a,.nojs .untermenue a{display:inline-flex;width:auto;padding:.5rem 0;font:500 .95rem/1.2 var(--sans);border:0;color:var(--text)}
  .nojs .sprache-panel{display:none}
  .nojs .sprache-kopf{display:flex}
}

/* ---------- Hero (Startseite) ---------- */
.start .hero-voll{align-items:center;min-height:max(34rem,calc(100svh - 6rem));padding-block:calc(var(--kopf-hoehe) + 2rem) clamp(8rem,18vh,11rem);background:var(--tief)}
.start .hero-voll::before{background:
  linear-gradient(to right,rgba(13,14,13,.9) 0,rgba(13,14,13,.7) 38%,rgba(13,14,13,.22) 72%,transparent 100%),
  linear-gradient(to top,rgba(13,14,13,1) 0,rgba(13,14,13,.55) 18%,transparent 46%),
  linear-gradient(to bottom,rgba(13,14,13,.6),transparent 24%)}
@media(max-width:699px){
  .start .hero-voll::before{background:linear-gradient(to top,rgba(13,14,13,1) 0,rgba(13,14,13,.78) 45%,rgba(13,14,13,.55) 100%),linear-gradient(to bottom,rgba(13,14,13,.6),transparent 24%)}
}
.start .hero-text{max-width:40rem}
.start .hero-voll h1{font-size:clamp(2.8rem,6.2vw,5.2rem);font-weight:600;line-height:1.02;letter-spacing:0;color:var(--papier);margin-bottom:.35em;text-shadow:none;text-wrap:balance}
.start .hero-voll .eyebrow{font-size:.82rem;letter-spacing:.22em;color:var(--gold)}
.start .hero-voll .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:36ch;color:var(--sand);text-shadow:none}
.start .hero-voll .knoepfe{margin-top:2rem}
@keyframes hero-ein2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .start .hero-text>*{animation:hero-ein2 .8s var(--kurve) both;filter:none}
  .start .hero-text>:nth-child(1){animation-delay:.1s}
  .start .hero-text>:nth-child(2){animation-delay:.2s}
  .start .hero-text>:nth-child(3){animation-delay:.32s}
  .start .hero-text>:nth-child(4){animation-delay:.44s}
}
@media print{.start .hero-text>*{animation:none!important}}

/* ---------- Unsere Klassiker (Slider) ---------- */
.klassiker{position:relative;z-index:2;margin-top:-6rem;padding-top:var(--a-4);padding-bottom:var(--a-5);background:linear-gradient(to bottom,transparent 0,var(--holz) 7rem)}
.klassiker::before{display:none}
.klassiker-raster{display:grid;gap:2rem 3.5rem;align-items:center}
@media(min-width:1000px){.klassiker-raster{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}}
.slider{min-width:0}
.slider-spur{list-style:none;margin:0;padding:0;display:flex;position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slider-spur::-webkit-scrollbar{display:none}
.slider-spur>li{flex:0 0 71%;scroll-snap-align:start}
@media(min-width:600px){.slider-spur>li{flex-basis:42%}}
@media(min-width:1000px){.slider-spur>li{flex-basis:33.3334%}}
.klassiker-karte{display:flex;flex-direction:column;align-items:center;height:100%;padding:0 .6rem 1rem;color:var(--text);text-align:center;text-decoration:none}
/* Flasche steht auf einer dunklen Steinkante (Verlauf und feine Goldlinie), dahinter ein ruhiger, warmer Lichtschein */
.klassiker-bild{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:clamp(17rem,34vw,24rem);padding-bottom:.85rem;
  background:radial-gradient(ellipse 58% 52% at 50% 60%,rgba(214,180,119,.17),transparent 72%)}
.klassiker-bild::after{content:"";position:absolute;left:-.6rem;right:-.6rem;bottom:0;height:.85rem;background:linear-gradient(#3a372f,#141514);border-top:1px solid rgba(214,180,119,.45)}
.klassiker-bild img{position:relative;z-index:1;display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;margin-bottom:-1px}
.klassiker-kat{margin-top:1.1rem;font:500 .7rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.klassiker-name{position:relative;margin-top:.35rem;padding-bottom:.55rem;font:600 1.55rem/1.15 var(--serif);overflow-wrap:break-word}
.klassiker-name::after{content:"";position:absolute;left:50%;bottom:0;width:2.5rem;height:1px;margin-left:-1.25rem;background:var(--gold);opacity:0}
.klassiker-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem .45rem;font-size:.85rem;color:var(--gedaempt)}
.klassiker-karte:focus-visible{outline-offset:-2px}
.klassiker-karte:focus-visible .klassiker-name::after{opacity:1}
@media(hover:hover) and (pointer:fine){.klassiker-karte:hover .klassiker-name::after{opacity:1}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .klassiker-bild img{transition:transform var(--dauer-kurz) var(--kurve)}
  .klassiker-karte:hover .klassiker-bild img{transform:translateY(-4px)}
  .klassiker-name::after{transition:opacity var(--dauer-kurz) var(--kurve)}
}
.slider-steuerung{display:flex;align-items:center;gap:.9rem;margin-top:1.1rem}
.slider-pfeil{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0 0 .15rem;background:transparent;color:var(--text);border:1px solid var(--linie-stark);border-radius:50%;font:400 1.6rem/1 var(--sans);cursor:pointer}
.slider-pfeil:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.slider-pfeil:disabled{opacity:.35;cursor:default}
.slider-punkte{display:flex;flex-wrap:wrap;align-items:center}
.slider-punkt{position:relative;width:24px;height:24px;padding:0;background:none;border:0;cursor:pointer}
.slider-punkt::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(248,245,239,.3)}
.slider-punkt[aria-current=true]::after{background:var(--gold);transform:scale(1.3)}
.slider-punkt:hover::after{background:var(--sand)}
.nojs .slider-steuerung{display:none}
.klassiker-text h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.klassiker-text .lead-klein{font-size:1.1rem}

/* ---------- Erlebnis-Kacheln ---------- */
.kachel-raster{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media(min-width:900px){.kachel-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.kachel{position:relative;display:flex;flex-direction:column;min-height:27rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.kachel-text{position:relative;z-index:1;padding:1.6rem 1.6rem 1.2rem}
.kachel-icon{display:block;margin-bottom:.9rem;color:var(--gold)}
.kachel h3{font-size:clamp(1.7rem,2.4vw,2.1rem);margin-bottom:.4rem}
.kachel-text p{color:var(--gedaempt);margin-bottom:0;max-width:34ch}
.kachel-text .knoepfe{margin-top:1.2rem}
.kachel-bild{position:relative;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.kachel-bild picture{display:block;width:100%;height:100%}
.kachel-bild img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.kachel-bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--flaeche),rgba(30,34,32,.25) 40%,transparent 70%)}
.kachel-badge{left:auto;top:auto;right:.6rem;bottom:.6rem;z-index:2}
@media(min-width:700px) and (max-width:899px){
  .kachel{flex-direction:row;min-height:0}
  .kachel-text{flex:1 1 55%}
  .kachel-bild{flex:0 0 45%;margin:0;aspect-ratio:auto}
  .kachel-bild::after{background:linear-gradient(to right,var(--flaeche),transparent 55%)}
}
@media(hover:hover) and (pointer:fine){
  .kachel:hover{border-color:var(--linie-stark)}
  .kachel:hover .knopf-pfeil{transform:translateX(3px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .kachel{transition:border-color var(--dauer) var(--kurve)}
  .kachel-bild img{transition:transform var(--dauer) var(--kurve)}
  .kachel:hover .kachel-bild img{transform:scale(1.04)}
}

/* ---------- Die Brennerei (dunkel) ---------- */
.brennen-intro{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.brennen-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4rem}}
.brennen-foto{margin:0;border:1px solid var(--linie-stark);border-radius:var(--r);overflow:hidden}
.brennen-foto picture{display:block}
.brennen-foto img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover}
.brennen-text h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.brennen-text .lead-klein{font-size:1.1rem}
.merkmale{list-style:none;margin:var(--a-4) 0 0;padding:1.6rem 0;border-block:1px solid var(--linie);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
@media(min-width:900px){.merkmale{grid-template-columns:repeat(4,minmax(0,1fr))}}
.merkmale li{display:flex;align-items:center;gap:.9rem;min-width:0;font:600 1.25rem/1.2 var(--serif);overflow-wrap:anywhere}
.merkmale li>span:last-child{min-width:0}
.merkmal-icon{flex:none;display:inline-grid;color:var(--gold)}
.merkmal-icon svg{width:36px;height:36px}
.brennen-schritte-kopf{margin-top:var(--a-5)}
.brennen-schritte-kopf h3{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.start .zahlenband{border-block:1px solid var(--linie)}
.start .zahl{color:var(--gold)}

/* ===== Stufe 2A „Dark Luxury“: Sortenseite, Sortenübersicht, Geschmacksfinder, Fassreihe (Überschreibungen, nur Darstellung) ===== */
/* Auswahlchips: unausgewählt feine Linie, ausgewählt Gold-Fläche mit dunklem Text (helle Papier-Varianten bleiben in ihren eigenen Regeln) */
.chip,.chip-radio>span{border-color:var(--linie-stark);border-radius:var(--r-klein)}
.chip:hover,.chip-radio:hover>span{background:rgba(214,180,119,.1);border-color:var(--gold)}
.chip[aria-pressed="true"],.chip-radio input:checked+span{background:var(--gold);border-color:var(--gold);color:#0D0E0D;font-weight:500}
.papier .chip-radio input:checked+span,.papier .chip[aria-pressed="true"]{background:var(--kupfer-dunkel);border-color:var(--kupfer-dunkel);color:var(--papier)}

/* Sortenseite: durchgehend dunkel (Wechsel Holz / Fläche, Goldlinien) */
.sektion.dunkel#servieren,.sektion.dunkel#passt{border-top:1px solid var(--linie)}
.produkt-kopf+.zahlenband+.dunkel,.flaeche+.probierkiste{--von:var(--flaeche)}
.dunkel#passt h2,.dunkel#servieren h2{margin-bottom:var(--a-3)}
.dunkel .tab{border-color:var(--linie-stark);border-radius:var(--r-klein);color:var(--text)}
.dunkel .tab:hover{border-color:var(--gold)}
.dunkel .tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#0D0E0D}
.dunkel .tab-typ{color:var(--gedaempt)}
.dunkel .tab[aria-selected="true"] .tab-typ{color:#0D0E0D}
.dunkel .panel-typ{color:var(--kupfer-hell)}
.dunkel .panel-glas,.dunkel .panel-bild figcaption{color:var(--gedaempt)}
.dunkel .zutaten li{border-bottom-color:var(--linie)}
.dunkel .nojs .panel+.panel,.nojs .dunkel .panel+.panel{border-top-color:var(--linie)}
.dunkel .panel-bild picture{border:1px solid var(--linie-stark);border-radius:var(--r)}
.dunkel .panel-bild img{border-radius:var(--r)}
.dunkel .panel{gap:clamp(1.6rem,4vw,3.5rem)}
/* Produktbühne: Fotos sind auf hellem Grund normalisiert (multiply), deshalb bleibt die helle Bühne, jetzt als gerahmtes Bild mit Goldrahmen und warmem Schein */
.buehne,.foto-rahmen.rahmen{border:1px solid var(--gold);border-radius:var(--r)}
.foto-rahmen.rahmen{padding:0;overflow:hidden}
.foto-rahmen.rahmen img{border-radius:var(--r)}
.haupt-bild .buehne,.haupt-bild.rahmen{box-shadow:0 0 0 6px rgba(214,180,119,.06),0 22px 60px rgba(0,0,0,.55),0 0 80px rgba(214,180,119,.08)}
.kauf-box{border-color:var(--linie-stark);border-radius:var(--r)}

/* Sortenübersicht */
.karte{background:var(--flaeche);border-radius:var(--r)}
.theke .karte{background:var(--holz)}
.karte-bild{border-radius:var(--r-klein)}
.karte:hover,.karte:focus-visible{border-color:var(--linie-stark)}
.karte-name{color:var(--text)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .karte-li{transition:transform var(--dauer) var(--kurve)}
  .karte-li:hover{transform:translateY(-4px)}
}
.gruppe h3::before{content:"";display:block;width:2.5rem;height:1px;margin-bottom:.8rem;background:var(--gold)}
.gruppe h3{border-bottom-color:var(--linie)}
.theke-foto{border-color:var(--linie-stark);border-radius:var(--r);overflow:hidden}
.theke-foto img{border-radius:var(--r-klein)}

/* Geschmacksfinder: Geschmackskarte, Goldmarker, Ergebniskarte */
.gf-flaeche{border-color:var(--linie-stark);border-radius:var(--r);box-shadow:0 0 0 6px rgba(214,180,119,.05),0 22px 60px rgba(0,0,0,.55)}
.gf-marker::before{background:var(--gold);box-shadow:0 0 0 2px rgba(13,14,13,.6),0 0 14px 3px rgba(214,180,119,.6)}
.gf-leiste{padding:clamp(1.1rem,3vw,1.9rem);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.gf-status{padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.gf-quadrant[aria-current=true]{background:var(--gold);border-color:var(--gold);color:#0D0E0D}
@media(prefers-reduced-motion:no-preference){.gf-flaeche,.gf-leiste{transition:box-shadow var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}.gf-flaeche:hover{border-color:var(--gold)}}

/* Fassreihe als virtueller Fasskeller */
.fassreihe-sektion{position:relative;overflow:hidden;background:var(--tief)}
.fass-atmo{position:absolute;inset:0;z-index:0;pointer-events:none}
.fass-atmo picture,.fass-atmo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.fass-atmo img{opacity:.22;filter:brightness(.55) saturate(.8)}
.fass-atmo::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--tief),rgba(13,14,13,.55) 30%,rgba(13,14,13,.7) 70%,var(--tief))}
.fassreihe-sektion>.wrap,.fassreihe-sektion>.schilder-rahmen{position:relative;z-index:1}
.schilder{padding-top:1.1rem;padding-bottom:1.6rem;align-items:flex-start}
.schild-li{flex:0 0 8.4rem}
.schild{position:relative;height:auto;min-height:0;aspect-ratio:1/1;border:0;border-radius:50%;padding:0 .15rem;gap:.2rem;
  background:radial-gradient(circle at 50% 50%,#1a1d1f 0 35%,rgba(26,29,31,0) 35.6%), /* runde Kreidetafel innerhalb des inneren Reifens (inset 13 %) */
    repeating-radial-gradient(circle at 50% 50%,rgba(13,14,13,.22) 0 1px,transparent 1px 7px),
    radial-gradient(circle at 38% 32%,#6a4a36,var(--eiche) 58%,#24170f);
  box-shadow:0 0 0 1px #0D0E0D,0 8px 18px rgba(0,0,0,.55)}
.schild::before,.schild::after{content:"";position:absolute;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(214,180,119,.18)}
.schild::before{inset:0;border:5px solid #1b1c1b}
.schild::after{inset:13%;border:3px solid #232422}
.schild-name,.schild-abv{position:relative;z-index:1}
.schild-name{font-size:1.05rem;max-width:74%}
.schild-abv{font-size:.95rem;padding-top:.2rem;min-width:0;border-top-color:rgba(236,230,216,.4)}
.schild:hover,.schild:focus-visible{box-shadow:0 0 0 2px var(--gold),0 12px 26px rgba(0,0,0,.6),0 0 30px rgba(214,180,119,.28);outline:none}
.schild:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
  .schild{transition:transform var(--dauer-kurz) var(--kurve),box-shadow var(--dauer) var(--kurve)}
  .schild:hover,.schild:focus-visible{transform:translateY(-6px)}
}
@media(min-width:1280px){
  .schilder{gap:.5rem}
  .schild-li{flex:none}
  .schild{padding:0}
  .schild-name{max-width:70%;font-size:clamp(.7rem,.9vw,.98rem)}
  .schild-abv{font-size:clamp(.75rem,.85vw,.92rem)}
}
.fass-info{max-width:46rem;margin:.6rem auto 0;padding:1.3rem 1.6rem;text-align:center;background:rgba(30,34,32,.82);border:1px solid var(--linie-stark);border-radius:var(--r)}
.fass-info-leer{margin:0;font:italic 400 1.2rem/1.3 var(--serif);color:var(--gedaempt)}
.fass-info-inhalt .eyebrow{margin-bottom:.4rem}
.fass-info-inhalt h3{margin-bottom:.4rem}
.fass-info-inhalt p{margin-bottom:.9rem}
.nojs .fass-info{display:none}
@media(prefers-reduced-motion:no-preference){.fass-info-inhalt{animation:einblenden .4s var(--kurve)}}

/* ===== Stufe 2B „Dark Luxury“: Besuch, Kisten, Holzkisten, Geschenke, Anfrage, Impressum, Datenschutz, Altershinweis, Merkzettel (Überschreibungen, nur Darstellung) ===== */
/* Seitenköpfe: Gold-Eyebrow, große Cormorant-H1, Lead, dünne Goldlinie unten */
.kisten-kopf,.geschenke-kopf,.kiste#produkt{border-bottom:1px solid var(--linie-stark)}
.kisten-kopf h1,.geschenke-kopf h1,.seiten-kopf h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;text-wrap:balance}
.kisten-kopf .lead-klein,.seiten-kopf .lead-klein{font-size:clamp(1.05rem,2vw,1.25rem)}
.seiten-kopf{margin-bottom:var(--a-4);padding-bottom:var(--a-3);border-bottom:1px solid var(--linie-stark)}
.seiten-kopf .lead-klein{margin-bottom:0}
.bs-hero{min-height:clamp(26rem,64svh,42rem);padding-block:clamp(4rem,10vh,6rem) clamp(3rem,7vh,4.5rem);border-bottom:1px solid var(--gold)}
.bs-hero .hero-bild img{filter:brightness(.62) saturate(.85)}
.bs-hero h1{font-size:clamp(2.8rem,8vw,5.4rem);line-height:1.02}

/* Besuch: Ablauf, Info-Karten, Liste */
.dunkel .schritt-foto{border:1px solid var(--linie-stark);border-radius:var(--r);background:var(--flaeche);overflow:hidden}
.dunkel .schritt-foto.platz{border-color:var(--linie);background:rgba(255,255,255,.03)}
.schritt-bild{border-radius:var(--r-klein)}
.dunkel .schritt-nr{color:var(--kupfer-hell)}
.dunkel .schritt-text p:last-child{color:var(--gedaempt)}
.bs-karte{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.bs-karte::before{content:"";display:block;width:2.5rem;height:1px;margin-bottom:.9rem;background:var(--gold)}
.bs-karte p{color:var(--gedaempt)}
.bs-liste li{border-bottom-color:var(--linie)}
.bs-liste li::before{height:1px;background:var(--gold)}
.bs-gruppen-hinweis{color:var(--kupfer-hell)}
.bs-schluss{border-top:1px solid var(--linie)}
.bs-schluss .textlink{display:inline-flex;align-items:center;min-height:44px}
.brotkrumen a{display:inline-flex;align-items:center;min-height:44px}
.brotkrumen ol{align-items:center}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bs-karte,.kisten-karte a{transition:transform var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
  .bs-karte:hover{transform:translateY(-4px);border-color:var(--linie-stark)}
  .kisten-karte a:hover{transform:translateY(-4px)}
}

/* Kistenkarten wie die Sortenkarten; Produktbühnen mit Goldrahmen und Radius (Fotos bleiben auf ihrem Grund) */
.kisten-karte a{padding:.8rem .8rem 1rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.kisten-karte a:hover,.kisten-karte a:focus-visible{border-color:var(--linie-stark)}
.kisten-karte-bild,.kiste-buehne,.reihe-buehne{border:1px solid var(--gold);border-radius:var(--r)}
.kisten-karte-bild{border-radius:var(--r-klein)}
.kisten-karte-name{color:var(--text)}
.kiste-beispiel .kiste-beispiel-bild.rahmen{padding:0;overflow:hidden;border:1px solid var(--gold);border-radius:var(--r);box-shadow:0 0 0 6px rgba(214,180,119,.06),0 22px 60px rgba(0,0,0,.55)}
.kiste-beispiel figcaption{padding:.8rem 1rem;color:var(--gedaempt)}
.kiste-bild{box-shadow:0 0 0 6px rgba(214,180,119,.06),0 22px 60px rgba(0,0,0,.55)}
.kiste-reihe .reihe-buehne{border:1px solid var(--gold)}

/* Fach-Auswahl und Auswahlfelder der Kisten: wie Auswahlchips (aktiv Gold) */
.kiste-knopf{border-color:var(--linie-stark);border-radius:var(--r-klein);padding-top:2.15rem;min-height:4.9rem} /* Zahlenkreis (.kiste-zahl, top .4rem + 1.5rem) überdeckt den Sortennamen nicht */
.kiste-knopf:hover{background:rgba(214,180,119,.1);border-color:var(--gold)}
.kiste-knopf[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:#0D0E0D;box-shadow:none}
.kiste-knopf[aria-pressed="true"] .kiste-zahl{background:#0D0E0D;color:var(--gold)}
.kiste-knopf[aria-pressed="true"]~.kiste-weg{color:#0D0E0D}
.kiste-knopf[aria-pressed="true"]~.kiste-weg:hover{background:rgba(13,14,13,.18)}
.kiste-weg{width:44px;height:44px;right:0;top:0}
.kiste-weg:hover{background:rgba(214,180,119,.25)}
.kiste-knopf:focus-visible,.kiste-weg:focus-visible,.kiste-select:focus-visible{outline-color:var(--gold)}
.kiste-kiste-weg{min-height:44px;border-color:var(--linie-stark);border-radius:var(--r-klein)}
.kiste-kiste-weg:hover{background:rgba(214,180,119,.1);border-color:var(--gold)}
.kiste-select{background-color:var(--flaeche);border-color:var(--linie-stark);border-radius:var(--r-klein)}
.kiste-select:hover{border-color:var(--gold)}
.kiste-details{border-color:var(--linie-stark);border-radius:var(--r);background:var(--flaeche)}
.kiste-hinweis{border-color:var(--gold);border-radius:var(--r);background:rgba(214,180,119,.08)}
.geschenk-koerbe .knoepfe{margin-top:var(--a-3)}

/* Anfrage: dunkles Formular */
input[type=text],input[type=email],input[type=tel],input[type=number]{background:var(--flaeche);color:var(--text);border:1px solid var(--linie-stark);border-radius:var(--r-klein)}
input::placeholder{color:var(--gedaempt);opacity:1}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,input[type=number]:hover{border-color:var(--gold)}
input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
input[aria-invalid=true]{border-color:#f2a08e}
.feld label,.feld legend{color:var(--text)}
.fehler{color:#f2a08e;border-left:2px solid #f2a08e;padding-left:.6rem;margin-top:.45rem}
.hinweis-klein,.pos-meta,.pos-faecher,.mwst,.vorschau pre{color:var(--gedaempt)}
.liste{display:grid;gap:.8rem}
.liste li{padding:1rem 1.2rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.liste li:last-child{border-bottom:1px solid var(--linie)}
.pos-name{color:var(--text)}
.summe{padding-top:1rem;border-top:1px solid var(--linie-stark)}
.summe strong{color:var(--kupfer-hell)}
.vorschau pre{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-klein)}
.anfrage-status{background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r)}
.anfrage-status-fehler{border-color:#f2a08e}
.anfrage .knopf[type=submit]{min-height:48px}

/* Impressum und Datenschutz: ruhige Textseiten */
.wrap.schmal.prose{max-width:calc(70ch + 2 * var(--rand))}
.prose p,.prose dd{line-height:1.7}
.prose h2{font-size:clamp(1.6rem,3.2vw,2rem);margin:2.4rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.impressum{margin:0}
.impressum>div{padding:1rem 0;border-top-color:var(--linie)}
.impressum>div:last-child{border-bottom:1px solid var(--linie)}
.impressum dt{color:var(--kupfer-hell)}

/* Altershinweis und Merkzettel: Deep Black mit Goldlinie */
.alter{background:var(--tief);border-top:1px solid var(--gold)}
.alter .knopf:focus-visible,.mz .knopf:focus-visible{outline-color:var(--text)}
.mz{background:var(--tief);border-left:1px solid var(--gold)}
.mz-kopf,.mz-fuss{border-color:var(--linie-stark)}
.mz-eintrag{border-bottom-color:var(--linie)}
.mz-zu{border-color:var(--linie-stark)}
.mz-zu:hover{border-color:var(--gold);color:var(--gold)}
.kiste-zahl{background:var(--tief);color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ---------- Flyer-Popup (Startseite, natives <dialog>) ---------- */
dialog.flyer{border:0;background:transparent;padding:0;margin:auto;width:fit-content;max-width:none;max-height:none;overflow:visible;color:var(--text)}
dialog.flyer::backdrop{background:rgba(13,14,13,.78);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
dialog.flyer img{display:block;width:min(92vw,calc((100dvh - 3.5rem)*1199/1312));height:auto;border:1px solid var(--gold);border-radius:var(--r-klein);box-shadow:0 12px 40px rgba(0,0,0,.55)}
.flyer-x{position:absolute;top:-1.5rem;right:-.9rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--tief);color:var(--text);border:1px solid var(--gold);border-radius:50%;font:400 1.7rem/1 var(--sans);cursor:pointer;transition:color var(--dauer-kurz) var(--kurve),border-color var(--dauer-kurz) var(--kurve)}
.flyer-x:hover{color:var(--gold)}
.flyer-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  dialog.flyer[open]{animation:flyer-ein var(--dauer) var(--kurve)}
  @keyframes flyer-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}