/* Slavyanka — gemeinsames Stylesheet für alle Seiten (bauen.py erzeugt die Seiten) */
:root{
  /* Farbwelt: Beige aus den Kampagnenfotos gemessen, Grün als Markenfarbe, Rot nur aus dem Logo */
  --beige:#E2DAC6; --beige-hell:#ECE6D8; --beige-tief:#D5CBB3; --papier:#F3EFE5;
  --gruen:#1D3A29; --gruen-2:#2B5237; --salbei:#B9C3A6;
  --rot:#C8232A; --rot-text:#A91C22; --ink:#18261D; --ink-2:#4B5647; --ink-3:#596152;   /* AA-Kontrast auf Beige/Papier */
  --linie:rgba(24,38,29,.16); --linie-hell:rgba(236,230,216,.18);
  --display:"Fira Sans Extra Condensed","Arial Narrow",sans-serif;
  --text:"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --rand:clamp(16px,4.4vw,64px); --bahn:1320px; --kopf:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:130px}
body{margin:0;background:var(--beige);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* Papierkorn: gibt der Fläche Material statt Bildschirm-Flachheit */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;font-family:var(--display);text-transform:uppercase;letter-spacing:-.005em;line-height:.9;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.milch :focus-visible,.fuss :focus-visible,.kasten :focus-visible{outline-color:var(--beige-hell)}
/* iPhone im Stromsparmodus: kein Play-Symbol über den Tüten */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
.sprungmarke{position:absolute;left:-999px;top:0}.sprungmarke:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:#000;padding:.5rem}
.bahn{max-width:var(--bahn);margin-inline:auto;padding-inline:var(--rand)}
.marke-klein{font:600 .74rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:.7rem}
.marke-klein::before{content:"";width:18px;height:2px;background:var(--rot)}
.kyr{font-family:var(--display);font-weight:600;text-transform:none;letter-spacing:.01em;color:var(--rot-text)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;white-space:nowrap;min-height:50px;padding:0 1.5rem;border-radius:2px;background:var(--gruen);color:var(--beige-hell);text-decoration:none;font:600 .82rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;border:0;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.knopf:hover{background:var(--gruen-2)}
.knopf svg{width:14px;height:14px;flex:none;transition:translate .25s var(--ease)}
.knopf:hover svg{translate:3px 0}
.knopf--rand{background:transparent;color:var(--gruen);box-shadow:inset 0 0 0 1.5px var(--gruen)}
.knopf--rand:hover{background:var(--gruen);color:var(--beige-hell)}
.knopf--rot{background:var(--rot);color:#fff}.knopf--rot:hover{background:#A91C22}
.knopf--klein{min-height:40px;padding:0 1rem;font-size:.72rem}

/* ───────── Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.kopf.bewegt,.kopf--fest{background:rgba(226,218,198,.88);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:2rem;height:var(--kopf)}
.kopf__marke img{height:32px;width:auto}
.kopf__nav{display:flex;gap:2rem;margin-left:auto}
.kopf__nav .nur-breit{display:none}
.kopf__nav a{text-decoration:none;font:500 .78rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);position:relative;padding:.4rem 0}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rot);scale:0 1;transform-origin:left;transition:scale .3s var(--ease)}
.kopf__nav a:hover{color:var(--ink)}.kopf__nav a:hover::after{scale:1 1}
.kopf__cta{margin-left:1.2rem;flex:none}
@media(max-width:420px){.kopf__innen{gap:1rem}.kopf__cta{margin-left:.6rem;padding:0 .8rem}}
@media(min-width:1000px){.kopf__nav .nur-breit{display:inline}}
@media(max-width:380px){.kopf__marke img{height:28px}.kopf__nav a{font-size:.72rem}}

/* ───────── Held: die Tüte hängt vom oberen Bildschirmrand, ganz sichtbar */
.held{position:relative;overflow:hidden}
.held__raster{display:flex;flex-direction:column}
.held__bild{position:relative;display:block;margin:0 calc(-1 * var(--rand));height:min(118vw,64svh)}
.held__bild video,.held__bild img{position:absolute;top:0;left:50%;translate:-50% 0;height:100%;width:auto;max-width:100%;aspect-ratio:4/5;object-fit:contain;object-position:50% 0}
/* Browser zeigen Videofarben nie exakt wie CSS-Farben (H.264: ein paar Stufen heller, je Browser anders).
   Deshalb laufen Videos an den Seiten und unten weich aus; oben sitzt die Stange bzw. der Bildschirmrand. */
.held__bild video,.buehne > video,.buehne__tuete > video{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 100%);mask-composite:intersect}   /* schmal: Grund ist farbgleich; breiter würde Folienkanten und schwingende Tüten ausblenden */
.held__text{position:relative;z-index:2;margin-top:-1.2rem;padding-bottom:clamp(2.5rem,6vw,4rem)}
.held h1{font-size:clamp(3.2rem,14.5vw,11rem);color:var(--gruen);margin:.8rem 0 0;line-height:.86}
.held h1 > span{display:block}
.held h1 .kyr{font-size:.3em;line-height:1;margin-top:.45em;letter-spacing:.02em}
.held__kat{text-decoration:none}.held__kat:hover{color:var(--rot)}
.held__satz{max-width:38ch;color:var(--ink-2);font-size:clamp(.95rem,1.3vw,1.12rem);margin-top:1rem}
.held__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.held__aktionen .knopf{flex:1 1 auto}
@media(min-width:960px){
  .held__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;min-height:min(100svh,980px)}
  .held__text{order:-1;margin:0;padding:calc(var(--kopf) + 2rem) 0 3rem}
  .held__text{container-type:inline-size}
  .held h1{font-size:min(11rem,24cqi)}   /* „SO SCHMECKT" passt bei jeder Breite in die Spalte */
  .held__aktionen .knopf{flex:0 0 auto}
  .held__bild{margin:0 calc(-1 * var(--rand)) 0 0;align-self:stretch;height:auto;min-height:620px}
}

/* ───────── Ornament: das Blumenmuster der Packung als Band */
.ornament{height:clamp(84px,11vw,150px);background:url(/assets/muster.webp?v=e9659d73) 0 50%/auto 100% repeat-x #252A57;position:relative}
.ornament::before,.ornament::after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--rot) 0 14px,#E8B12E 14px 18px,var(--rot) 18px 32px,var(--gruen) 32px 36px)}
.ornament::before{top:0}.ornament::after{bottom:0}
.ornament--schmal{height:clamp(46px,6vw,72px)}

/* ───────── Abschnittsköpfe */
.abschnitt-kopf{display:grid;gap:1.2rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
@media(min-width:960px){.abschnitt-kopf{grid-template-columns:1.2fr .8fr;align-items:end}
  .sortiment-start .abschnitt-kopf{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.6rem}.sortiment-start .abschnitt-kopf > div{grid-column:1 / 3}.sortiment-start .abschnitt-kopf p{grid-column:3 / 5}}
.abschnitt-kopf h2{font-size:clamp(3rem,8.4vw,7rem);color:var(--gruen);margin-top:1.1rem;line-height:1}   /* 1 statt .9: Ü-Punkte (TÜTE) stoßen sonst an die Zeile darüber */
.abschnitt-kopf h2 em,.gross em{font-style:normal;color:var(--rot)}
.abschnitt-kopf p{color:var(--ink-2);max-width:40ch}

/* ───────── Tüten: eine Tüte = eine Kategorie. Bühne 4:5, oben die Stange, an der hängende Tüten hängen */
.sortiment-start{padding:clamp(4rem,9vw,8rem) 0 clamp(4rem,8vw,6.5rem)}
.tueten{--spalt:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--spalt);row-gap:0}
@media(min-width:960px){.tueten{--spalt:2rem;grid-template-columns:repeat(3,minmax(0,1fr))}}
.tk{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;text-decoration:none;color:inherit;padding-bottom:2.2rem}
@media(min-width:960px){.tk{padding-bottom:3.4rem}}
/* Klassiker: gleicher Aufbau wie alle Kacheln, Bühne doppelt breit, die Tüte mittig und genau eine Spalte breit (gleich groß, gleiche Unterkante) */
@media(min-width:960px){.tueten--mit-klassiker{--spalt:1.6rem;grid-template-columns:repeat(4,minmax(0,1fr))}}
.tk--gross{grid-column:span 2}
.buehne.buehne--breit{aspect-ratio:auto;display:flex;justify-content:center}   /* doppelte Klasse: schlägt die spätere allgemeine .buehne-Regel */
.buehne__tuete{position:relative;flex:0 0 calc((100% - var(--spalt)) / 2);aspect-ratio:4/5}
.buehne__tuete > video,.buehne__tuete > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform-origin:50% 0;transition:rotate .9s var(--ease)}
.tk:hover .buehne__tuete > video,.tk:hover .buehne__tuete > img{rotate:-1.6deg}
.buehne__inhalt{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;padding:0 6% 14% 0}
.buehne__inhalt::after{content:"";position:absolute;left:8%;right:14%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,20,.22),rgba(40,34,20,0))}
.buehne__inhalt img{position:relative;z-index:1;max-width:38%;max-height:58%;width:auto;margin:0 -3%;filter:drop-shadow(0 10px 12px rgba(40,34,20,.16));transition:translate .6s var(--ease)}
.buehne__inhalt img:nth-child(2){z-index:2;max-height:64%}
.tk:hover .buehne__inhalt img{translate:0 -5px}
.tk--gross .tk__kopf{flex-wrap:wrap;column-gap:.7rem}
.tk--gross .tk__kopf .kyr{font-size:1rem}
.tk__intro{font-size:.88rem;color:var(--ink-2);line-height:1.45;margin-top:.3rem;max-width:48ch}
.buehne{position:relative;display:block;aspect-ratio:4/5;align-self:start}
.buehne::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gruen);z-index:3}
.buehne > img,.buehne > video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform-origin:50% 0;transition:rotate .9s var(--ease),translate .6s var(--ease)}
.tk:hover .buehne > img,.tk:hover .buehne > video{translate:0 -6px}
.tk:hover .buehne--haengt > img,.tk:hover .buehne--haengt > video{translate:none;rotate:-1.6deg}
.stellvertreter{position:absolute;inset:16% 8% 10%;display:flex;align-items:flex-end;justify-content:center}
.stellvertreter::after{content:"";position:absolute;left:14%;right:14%;bottom:-3%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,20,.24),rgba(40,34,20,0))}
.stellvertreter img{position:relative;z-index:1;max-width:46%;max-height:78%;width:auto;margin:0 -5%;filter:drop-shadow(0 12px 12px rgba(40,34,20,.16));transition:translate .6s var(--ease)}
.stellvertreter img:nth-child(2){z-index:2;max-height:86%}
.tk:hover .stellvertreter img{translate:0 -5px}
.tk__text{display:grid;grid-template-rows:auto 1fr auto;gap:.25rem;padding-top:.9rem;border-top:1px solid var(--linie);margin-top:.2rem}
.tk__kopf{display:flex;align-items:baseline;gap:.55rem}
.tk__nr{font:600 .66rem/1 var(--text);letter-spacing:.1em;color:var(--ink-3)}
.tk__text b{font:800 clamp(1.35rem,2.6vw,2rem)/1 var(--display);text-transform:uppercase;color:var(--ink)}
.tk__text .kyr{font-size:.95rem}
.tk__zahl{display:flex;align-items:center;gap:.45rem;font:500 .7rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.2rem}
.tk__zahl svg{width:13px;height:13px;transition:translate .3s var(--ease)}
.tk:hover .tk__zahl{color:var(--rot)}.tk:hover .tk__zahl svg{translate:3px 0}

/* Gesamtübersicht wie eine Speisekarte: alle Kategorien, alle Produkte, eine Fläche */
.karte-index{margin-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
.karte-index__kopf{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:2px solid var(--gruen)}
.karte-index__kopf h3{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gruen)}
.karte-index__zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
@media(min-width:760px){.karte-index__zeile{grid-template-columns:260px 1fr;gap:2rem;align-items:baseline}}
.karte-index__kat{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;font:800 1.35rem/1 var(--display);text-transform:uppercase;color:var(--ink)}
.karte-index__kat span{font:600 .66rem/1 var(--text);letter-spacing:.1em;color:var(--ink-3)}
.karte-index__kat sup{font:500 .62rem/1 var(--text);color:var(--rot-text)}
.karte-index__kat:hover{color:var(--rot)}
.karte-index__produkte{font-size:.92rem;color:var(--ink-3);line-height:1.8}
.karte-index__produkte a{color:var(--ink-2);text-decoration:none}
.karte-index__produkte .eintrag{display:inline-block;max-width:100%}   /* Name rutscht als Ganzes in die nächste Zeile, bricht nur, wenn er allein zu breit ist */
.karte-index__produkte a:hover{color:var(--rot);text-decoration:underline;text-underline-offset:3px}

/* ───────── Kategorie-Umschalter: alle Kategorien immer ganz sichtbar, bricht um statt zu scrollen */
.kat-wahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
.kat-wahl a{flex:1 1 auto;text-align:center;padding:.75rem .8rem;border:1px solid var(--linie);text-decoration:none;font:500 .72rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.kat-wahl a sup{font-size:.6rem;margin-left:.25em;line-height:0}
.kat-wahl a:hover{border-color:var(--ink);color:var(--ink)}
.kat-wahl a[aria-current]{background:var(--gruen);border-color:var(--gruen);color:var(--beige-hell)}
@media(min-width:960px){.kat-wahl a{flex:1 1 0}}

/* ───────── Sortiment- und Kategorieseiten */
.seitenkopf{padding-top:1.6rem}
.seitenkopf h1{font-size:clamp(3.4rem,9vw,7.4rem);color:var(--gruen);margin:1rem 0 .8rem}
.seitenkopf > p:last-child{color:var(--ink-2);max-width:48ch}
.seitenkopf + .bahn .kat-wahl{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sortiment-alle{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(4rem,8vw,6rem)}
.gruppe{padding-top:clamp(2.6rem,5vw,4rem);scroll-margin-top:calc(var(--kopf) + 1rem)}
.gruppe__kopf{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.3rem}
.gruppe__nr{font:600 .72rem/1 var(--text);letter-spacing:.1em;color:var(--ink-3)}
.gruppe__kopf h2{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--gruen)}
.gruppe__kyr{font-size:clamp(1.05rem,2vw,1.5rem);justify-self:end;text-align:right}
.gruppe__intro{grid-column:2 / 3;color:var(--ink-2);font-size:.92rem}
@media(min-width:760px) and (max-width:1099px){.gruppe--2 .gruppe__kopf,.gruppe--4 .gruppe__kopf{max-width:66.67%}}
@media(min-width:1100px){.gruppe--3 .gruppe__kopf{max-width:75%}.gruppe--2 .gruppe__kopf{max-width:50%}}
@media(min-width:760px){.gruppe--1 .gruppe__kopf{max-width:560px}}   /* Kopf so breit wie sein (schmaleres) Raster */
.gruppe__kopf--ohne-nr{grid-template-columns:1fr auto}.gruppe__kopf--ohne-nr .gruppe__intro{grid-column:1}.gruppe__kopf--ohne-nr .gruppe__link{grid-column:2}   /* Klassiker: keine Nummer → bündig am Rand */
.gruppe__link{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.4rem;white-space:nowrap;font:500 .7rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.gruppe__link svg{width:13px;height:13px}.gruppe__link:hover{color:var(--rot)}
.verweise{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.verweise li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.verweise li > a{font:800 1.3rem/1 var(--display);text-transform:uppercase;text-decoration:none;color:var(--ink)}
.verweise li > a:hover{color:var(--rot)}
.verweise span{font-size:.84rem;color:var(--ink-3)}
.verweise span a{color:var(--ink-2)}
.verweise span{flex:none;text-align:right}
.kat-kopf{display:grid;gap:1.5rem;padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem);align-items:center}
.kat-kopf h1{font-size:clamp(3.6rem,10vw,8rem);color:var(--gruen);margin:calc(1rem + .1em) 0 .3rem}   /* + .1em: Umlaut-Punkte (KÄSE, ÖL) nicht aufs Label */
.kat-kopf .kyr{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.kat-kopf__intro{color:var(--ink-2);font-size:1.1rem;max-width:40ch;margin-top:1rem;text-wrap:pretty}
@media(min-width:960px){.kat-kopf{grid-template-columns:minmax(0,1fr) 420px;gap:4rem}
  .kat-kopf__text{container-type:inline-size;align-self:start;margin-top:8.25rem}
  .kat-kopf h1{font-size:min(8rem,16.5cqi)}}   /* längstes Wort (KONDENSMILCH) passt in die Textspalte, Tüte bleibt überall 420 px */
@media(max-width:959px){.kat-kopf{grid-template-columns:minmax(0,1fr) 40%;gap:1rem;align-items:end;padding-top:1.4rem;padding-bottom:1.6rem}
  .kat-kopf__text{display:contents}   /* Label, Überschrift, Kyrillisch über die ganze Breite; nur Einleitung + Tüte nebeneinander */
  .kat-kopf .marke-klein,.kat-kopf h1,.kat-kopf .kyr{grid-column:1/-1}
  .kat-kopf__intro{grid-column:1;align-self:center}
  .kat-kopf__bild{grid-column:2}
  .kat-kopf h1{font-size:clamp(2.4rem,13vw,4rem);margin:.7rem 0 0}   /* 13vw: KONDENSMILCH passt bei 320–959 px */
  .kat-kopf .kyr{font-size:1.1rem}
  .kat-kopf__intro{font-size:.92rem;margin-top:.6rem}}
.kat-kopf__zahl{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--linie);font:500 .72rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kat-kopf__zahl b{font:800 1.6rem/1 var(--display);color:var(--ink);margin-right:.3rem;vertical-align:-.1em}
.kat-kopf__bild{max-width:420px;width:100%;justify-self:center}
.kat-produkte{padding-bottom:clamp(2rem,5vw,3rem)}
.weiter{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(var(--gruen),var(--gruen)) content-box top/100% 2px no-repeat;padding-top:2px;margin-bottom:clamp(4rem,8vw,6rem)}
.weiter a{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 0;text-decoration:none;color:var(--ink)}
.weiter a + a{text-align:right;align-items:flex-end;border-left:1px solid var(--linie);padding-left:1rem}
.weiter span{display:flex;align-items:center;gap:.4rem;font:500 .7rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.weiter svg{width:13px;height:13px}
.weiter b{font:800 clamp(1.6rem,4vw,2.6rem)/1 var(--display);text-transform:uppercase;color:var(--gruen)}
.weiter a:hover b{color:var(--rot)}

/* Produktraster */
.raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
@media(min-width:760px){.raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* weniger Produkte als Spalten: Raster schmaler statt leere Felder */
@media(min-width:760px) and (max-width:1099px){.raster--2,.raster--4{max-width:66.67%;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.raster--3{max-width:75%;grid-template-columns:repeat(3,minmax(0,1fr))}.raster--2{max-width:50%;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px){.raster--1{max-width:min(100%,560px);grid-template-columns:1fr}.raster--1 > .karte{flex-direction:row;align-items:stretch}
  .raster--1 .karte__bild{flex:0 0 46%}.raster--1 .karte__text{padding:1rem 1rem 1.1rem 0;justify-content:center}.raster--1 .karte__fuss{margin-top:.5rem}}
/* Handy: eine einzelne letzte Karte liegt quer über beide Spalten */
@media(max-width:759px){.raster > .karte:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .raster > .karte:last-child:nth-child(odd) .karte__bild{flex:0 0 50%}
  .raster > .karte:last-child:nth-child(odd) .karte__fuss{margin-top:.5rem}
  .raster > .karte:last-child:nth-child(odd) .karte__text{padding:1rem 1rem 1.1rem;justify-content:center}}
.karte{display:flex;flex-direction:column;background:var(--papier);position:relative;text-decoration:none;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);transition:background .35s var(--ease)}
.karte:hover{background:#F8F5EE}
.karte:focus-visible{outline:2px solid var(--rot);outline-offset:-2px}
.karte__bild{position:relative;aspect-ratio:1/1.05;overflow:hidden}
.karte__bild::after{content:"";position:absolute;--halb:min(.26,calc(.756 * var(--pa,1) * .475));left:calc(50% - var(--halb) * 100%);right:calc(50% - var(--halb) * 100%);bottom:12%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,20,.26),rgba(40,34,20,0));transition:scale .5s var(--ease),opacity .5s}
.karte__bild img{position:absolute;z-index:1;left:13%;top:13%;width:74%;height:72%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 12px 14px rgba(40,34,20,.16));transition:translate .5s var(--ease)}
.karte:hover .karte__bild img{translate:0 -6px}
.karte:hover .karte__bild::after{scale:.86;opacity:.75}
.karte__text{padding:0 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.karte__name{font:800 clamp(1.15rem,1.9vw,1.45rem)/1.12 var(--display);text-transform:uppercase;color:var(--ink);hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.karte__info{font-size:.8rem;line-height:1.45;color:var(--ink-2)}
.karte__fuss{margin-top:auto;padding-top:.7rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--linie);font:500 .7rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.karte__fuss svg{width:14px;height:14px;transition:translate .3s var(--ease)}
.karte:hover .karte__fuss{color:var(--rot)}
.karte__name .wort{display:inline-block;max-width:100%}
.menge{text-transform:none;letter-spacing:.02em}   /* Einheiten sind kleingeschrieben: g, ml, l */
.karte:hover .karte__fuss svg{translate:3px 0}

/* ───────── Über uns */
.ueber{background:var(--beige)}
.ueber__bild{position:relative;height:clamp(420px,78svh,820px);overflow:hidden}
.ueber__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.ueber__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,38,29,.78) 0%,rgba(24,38,29,.25) 45%,rgba(24,38,29,0) 70%)}
.ueber__titel{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:clamp(2rem,5vw,4rem);color:var(--beige-hell)}
.ueber__titel .marke-klein{color:var(--beige-hell)}
.ueber__titel h2{font-size:clamp(3.4rem,10vw,9rem);margin-top:calc(1rem + .1em);color:var(--beige-hell)}
.ueber__titel h2 em{font-style:normal;color:#F2C9A8}
.ueber__story{display:grid;gap:2rem;padding-block:clamp(3.5rem,8vw,6.5rem)}
@media(min-width:960px){.ueber__story{grid-template-columns:1fr 1fr;gap:5rem}}
.ueber__story .gross{font:800 clamp(2rem,4.4vw,3.6rem)/.95 var(--display);text-transform:uppercase;color:var(--gruen)}
.ueber__story p+p{margin-top:1rem}
.ueber__story .text{color:var(--ink-2);font-size:1.05rem;max-width:52ch}
.saeulen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
@media(min-width:960px){.saeulen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.saeule{text-decoration:none;color:inherit;transition:background .3s var(--ease);padding:1.4rem 1.1rem 1.6rem;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:.5rem}
.saeule b{font:800 clamp(3rem,7vw,5.4rem)/.85 var(--display);color:var(--gruen);letter-spacing:-.01em}
.saeule b small{font-size:.42em;letter-spacing:0;margin-left:.1em}
.saeule strong{font:800 1.2rem/1 var(--display);text-transform:uppercase;color:var(--ink)}
.saeule span{font-size:.84rem;color:var(--ink-2);line-height:1.45}
.saeule:hover{background:var(--beige-hell)}.saeule:hover strong{color:var(--rot)}
.ueber__fotos{display:grid;gap:.8rem;padding-block:clamp(2.5rem,5vw,4rem) clamp(4rem,8vw,6.5rem)}
@media(min-width:760px){.ueber__fotos{grid-template-columns:1.4fr 1fr;gap:1.2rem}}
.ueber__fotos figure{margin:0}
.ueber__fotos .foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--beige-tief)}
@media(min-width:760px){.ueber__fotos > figure:first-child{display:flex;flex-direction:column}.ueber__fotos > figure:first-child .foto{aspect-ratio:auto;flex:1;min-height:420px}}
.ueber__fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ueber__fotos figcaption{font:500 .72rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:.7rem}
.ueber__haus{display:flex;flex-direction:column;gap:1rem;justify-content:space-between}
.ueber__haus .kasten{background:var(--gruen);color:var(--beige-hell);padding:1.6rem 1.4rem}
.ueber__haus .kasten b{display:block;font:800 1.9rem/1 var(--display);text-transform:uppercase;margin-bottom:.6rem}
.ueber__haus .kasten p{color:rgba(236,230,216,.78);font-size:.92rem}

/* ───────── Kondensmilch */
.milch{background:var(--gruen);color:var(--beige-hell);padding:clamp(4.5rem,9vw,8rem) 0;overflow:hidden;position:relative}
.milch__raster{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.milch__raster{grid-template-columns:1fr 1fr;gap:4rem}}
.milch .marke-klein{color:var(--salbei)}
.milch h2{font-size:clamp(3.2rem,7.2vw,6.5rem);color:var(--beige-hell);margin:1.2rem 0 1.4rem}   /* kleiner als vorher: sonst frisst die Zeile die Bildspalte, und die Tüten würden kleiner als im Raster */
.milch h2 em{font-style:normal;color:var(--salbei)}
.milch p{color:rgba(236,230,216,.78);max-width:42ch}
.milch .kyr{color:#F2B8A6}
.milch__dosen{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:6%;text-decoration:none}
.milch__dosen::before{content:"";position:absolute;inset:8% 4% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(226,218,198,.2),rgba(226,218,198,0))}
.milch__dosen::after{content:"";position:absolute;left:12%;right:12%;bottom:2%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0))}
.milch__dosen img{position:relative;z-index:1;height:clamp(230px,34vw,440px);width:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.35))}
.milch__dosen img+img{margin-left:-10%;height:clamp(200px,29vw,380px);z-index:0}
/* Paar: blaue Tüte im beigen Schaufenster, Karamell-Tüte direkt auf dem Grün — gleich groß wie die Kacheln */
.milch__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);align-items:start;text-decoration:none;width:100%}
.milch__paar .milch__fenster{width:100%;margin:0}
.milch__paar .milch__fenster .buehne{box-shadow:0 30px 50px -34px rgba(0,0,0,.6);overflow:hidden}
.milch__gruen{display:block}
.milch__gruen .buehne::after{display:none}   /* keine Stange: die Henkel laufen im Grün aus */
.milch__gruen .buehne > video{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 90%,transparent 100%)}
.milch__paar:hover .buehne > video{rotate:-1.6deg}
@media(max-width:959px){.milch__paar{margin-top:.6rem}}
/* Schaufenster: die Kondensmilch-Tüte hängt auf Beige im Grün, die orange Dose schwebt über die Kante */
.milch__fenster{position:relative;display:block;width:min(100%,440px);justify-self:center;margin-bottom:6%}
.milch__fenster .buehne{background:var(--beige);box-shadow:0 40px 70px -40px rgba(0,0,0,.55)}
.milch__karamell{position:absolute;z-index:4;right:-9%;bottom:-7%;width:34%;height:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.4));transition:translate .6s var(--ease)}
.milch__fenster:hover .milch__karamell{translate:0 -6px}
.milch__fenster:hover .buehne > video{rotate:-1.6deg}
@media(max-width:959px){.milch__fenster{width:min(86%,400px);margin-top:1rem}}
.milch__wege{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie-hell)}
.milch__wege li{padding:1.1rem 0;border-bottom:1px solid var(--linie-hell);font-size:.9rem;color:rgba(236,230,216,.7)}
.milch__wege li:nth-child(odd){padding-right:1rem;border-right:1px solid var(--linie-hell)}
.milch__wege li:nth-child(even){padding-left:1.2rem}
.milch__wege b{display:block;font:800 1.5rem/1 var(--display);text-transform:uppercase;color:var(--beige-hell);margin-bottom:.35rem}
.milch__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
@media(max-width:959px){.milch__aktionen .knopf{flex:1 1 0}}
.milch .knopf--rand{color:var(--beige-hell);box-shadow:inset 0 0 0 1.5px var(--beige-hell)}
.milch .knopf--rand:hover{background:var(--beige-hell);color:var(--gruen)}

/* ───────── Wo kaufen: drei Wege, jeder eine klickbare Zeile */
.kaufen{padding:clamp(4.5rem,9vw,8rem) 0}
.kaufen__raster{display:grid;gap:2.5rem}
@media(min-width:960px){.kaufen__raster{grid-template-columns:1fr 1fr;gap:4rem;align-items:end}}
.kaufen h2{font-size:clamp(3rem,8vw,6.6rem);color:var(--gruen);margin:1.2rem 0 1.2rem;line-height:1}
.kaufen h2 em{font-style:normal;color:var(--rot)}
.kaufen p{color:var(--ink-2);max-width:38ch}
.kaufen__aktionen{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem}
.kaufen__wege{border-top:2px solid var(--gruen)}
.weg{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:1.2rem 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--ink)}
.weg b{font:800 clamp(1.5rem,3vw,2.1rem)/1 var(--display);text-transform:uppercase}
.weg span{grid-column:1;font-size:.9rem;color:var(--ink-2);text-wrap:pretty}
.weg em{grid-column:2;grid-row:1 / 3;align-self:center;font:600 .74rem/1 var(--text);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.weg em svg{width:13px;height:13px;transition:translate .3s var(--ease)}
.weg:hover b,.weg:hover em{color:var(--rot)}.weg:hover em svg{translate:2px -2px}

/* ───────── Fuß */
.fuss{background:var(--gruen);color:rgba(236,230,216,.72);font-size:.88rem}
.fuss__innen{padding-top:3.4rem;padding-bottom:calc(2.4rem + env(safe-area-inset-bottom))}
.fuss__oben{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.fuss__oben img{height:36px;width:auto}
.fuss__satz{font:800 clamp(2rem,5vw,3.4rem)/.9 var(--display);text-transform:uppercase;color:var(--beige-hell);max-width:12ch;margin-top:1.4rem}
.fuss__spalten{display:grid;grid-template-columns:repeat(2,auto);gap:1.5rem 3.5rem}
.fuss__spalten div{display:flex;flex-direction:column;gap:.55rem}
.fuss__spalten b{font:600 .7rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--beige-hell);margin-bottom:.3rem}
.fuss a{text-decoration:none}.fuss a:hover{color:#fff}
.fuss__klein{border-top:1px solid var(--linie-hell);padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:rgba(236,230,216,.5)}
.fuss__klein span:last-child{display:flex;gap:1.2rem}

/* ───────── Produktseite */
.pfad{padding-top:calc(var(--kopf) + 1.2rem);font:500 .72rem/1.75 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:0 .6rem;flex-wrap:wrap}
@media(max-width:759px){.pfad:has(> a:nth-of-type(3)) > span:nth-last-child(2){display:none}.pfad:has(> a:nth-of-type(3)) > span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}   /* optisch weg, für Screenreader bleibt die aktuelle Seite */   /* Handy, Produktseite: letzte Stufe = Überschrift darunter, stand sonst allein in Zeile 2 */
.pfad a{text-decoration:none}.pfad a:hover{color:var(--rot)}
.produkt{display:grid;gap:2rem;padding-block:1.4rem clamp(3rem,7vw,6rem)}
@media(min-width:960px){.produkt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4.5rem;align-items:start}}
.produkt__bild{position:relative;aspect-ratio:1/1.02;background:var(--beige-hell);overflow:hidden}
@media(min-width:960px){.produkt__bild{position:sticky;top:calc(var(--kopf) + 1.5rem)}}
.produkt__bild::after{content:"";position:absolute;--halb:min(.28,calc(.765 * var(--pa,1) * .475));left:calc(50% - var(--halb) * 100%);right:calc(50% - var(--halb) * 100%);bottom:10%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,20,.3),rgba(40,34,20,0))}
.produkt__bild img{position:absolute;z-index:1;left:14%;top:11%;width:72%;height:75%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 18px 20px rgba(40,34,20,.18))}
.produkt__kat{display:flex;justify-content:space-between;align-items:center}
.produkt__kat a{text-decoration:none}
.produkt__info{container-type:inline-size;min-width:0}
.produkt h1{font-size:min(clamp(3rem,7vw,5.6rem),calc(100cqi / (var(--l,10) * .54)));color:var(--gruen);margin:1rem 0 1.2rem;line-height:1.04;hyphens:manual;-webkit-hyphens:manual}   /* --l = längstes Wortstück: das Wort passt immer ganz in die Spalte */
.produkt__text{font-size:1.1rem;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.produkt__daten{display:flex;gap:0;margin:1.6rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.produkt__daten div{flex:1 1 auto;padding:.9rem .6rem .9rem 0;font:500 .68rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.produkt__daten div+div{padding-left:1rem;border-left:1px solid var(--linie)}
.produkt__daten b a{text-decoration:none}.produkt__daten b a:hover{color:var(--rot)}
.produkt__daten b{display:block;font:800 1.5rem/1 var(--display);color:var(--ink);letter-spacing:0;margin-bottom:.3rem;text-transform:uppercase}
.produkt__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
@media(max-width:959px){.produkt{gap:1.2rem}.produkt__bild{aspect-ratio:4/3;max-height:44svh;width:100%}
  .produkt__bild img{left:22%;width:56%;top:9%;height:76%}
  .produkt__bild::after{--halb:min(.28,calc(.57 * var(--pa,1) * .475))}
  .produkt h1{margin:.7rem 0 .8rem}.produkt__text{font-size:1rem}
  .produkt__daten b{font-size:1.2rem}
  .produkt__aktionen .knopf{flex:1 1 100%}}
@media(max-width:359px){.produkt__daten b{font-size:1rem}
  .karte__name{font-size:1rem}   /* 320 px: KARAMELLISIERT, SONNENBLUMEN-, KONDENSMILCH- passen ganz in die Karte */
  .tk__text b{font-size:1.1rem}.gruppe__kopf{column-gap:.6rem}.gruppe__kopf h2{font-size:1.5rem}
}
.info__fuss{font-size:.8rem;color:var(--ink-3);padding-top:1rem;text-wrap:pretty}
.info__inhalt b{color:var(--ink);font-weight:600}
.szene-band{margin-top:0;margin-bottom:clamp(3rem,6vw,5rem)}
.szene-band img{width:100%;max-width:760px;height:auto;   /* Ränder weich ins Beige statt harter Kasten */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
@media(min-width:760px),(orientation:landscape){.szene-band img{display:block;max-height:80svh;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}}   /* nach der Grundregel: Höhe begrenzt, Seitenverhältnis bleibt */
.infos{margin-top:2.4rem;border-top:1px solid var(--linie)}
.produkt__daten + .infos{margin-top:0;border-top:0}.produkt__daten:has(+ .infos){margin-bottom:0}
.info{border-bottom:1px solid var(--linie)}
.info summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;font:800 1.3rem/1 var(--display);text-transform:uppercase;color:var(--ink)}
.info summary::-webkit-details-marker{display:none}
.info summary::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate .3s var(--ease)}
.info[open] summary::after{rotate:45deg}
.info__inhalt{padding:0 0 1.3rem;color:var(--ink-2);font-size:.95rem}
.info__inhalt p+p{margin-top:.6rem}
.naehrwerte{width:100%;border-collapse:collapse;font-size:.92rem}
.naehrwerte td{padding:.55rem 0;border-bottom:1px solid var(--linie)}
.naehrwerte td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.naehrwerte tr.unter td:first-child{padding-left:1rem;color:var(--ink-3)}
.naehrwerte caption{text-align:left;font-size:.78rem;color:var(--ink-3);padding-bottom:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips span{padding:.35rem .6rem;border:1px solid var(--linie);font-size:.82rem;color:var(--ink)}
.hinweis{margin-top:1rem;padding:.9rem 1rem;border-left:3px solid var(--rot);background:var(--beige-hell);font-size:.9rem;text-wrap:pretty}
.produkt__motive{padding-bottom:clamp(3rem,6vw,5rem)}
.klein-titel{font-size:1.6rem;color:var(--gruen);margin-bottom:1.2rem}
.produkt__motive-reihe{display:grid;gap:1.2rem 2rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),340px))}
.szene{margin:0}.szene > img{width:100%;height:auto}
.mehr{background:var(--papier);padding:clamp(3.5rem,7vw,6rem) 0}
.mehr__rahmen .raster{max-width:none}
@media(min-width:760px) and (max-width:1099px){.mehr__rahmen--2,.mehr__rahmen--4{max-width:66.67%}.mehr__rahmen--1{max-width:560px}}
@media(min-width:1100px){.mehr__rahmen--3{max-width:75%}.mehr__rahmen--2{max-width:50%}.mehr__rahmen--1{max-width:560px}}
.mehr__kopf{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.mehr h2{font-size:clamp(2.4rem,5vw,4rem);color:var(--gruen);line-height:1}

/* ───────── Textseiten (Impressum, Datenschutz) */
.textseite{padding-top:calc(var(--kopf) + clamp(2rem,6vw,4rem));padding-bottom:clamp(4rem,8vw,7rem);max-width:820px}
.textseite h1{font-size:clamp(3rem,8vw,5.6rem);color:var(--gruen);margin:1rem 0 2rem}
.textseite h2{font-size:clamp(1.3rem,7.4vw,1.6rem);color:var(--ink);margin:2.2rem 0 .7rem;line-height:1.05;hyphens:manual;-webkit-hyphens:manual}
.textseite p,.textseite li{color:var(--ink-2)}
.textseite p+p{margin-top:.7rem}
.textseite a{color:var(--gruen)}

/* Auftritte */
.js [data-reveal]{opacity:0;translate:0 18px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.js [data-reveal].an{opacity:1;translate:0 0}
.js .held h1 > span{clip-path:inset(0 0 100% 0);translate:0 .25em}
.js .los .held h1 > span{animation:zeile .9s var(--ease) both}
.js .los .held h1 > span:nth-child(2){animation-delay:.08s}.js .los .held h1 > span:nth-child(3){animation-delay:.16s}
@keyframes zeile{to{clip-path:inset(-10% 0 -10% 0);translate:0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js [data-reveal],.js .held h1 > span{opacity:1;translate:0 0;clip-path:none;animation:none;transition:none}}
/* Häufige Fragen auf Produktseiten (gleiche Klappen wie Zutaten/Nährwerte) */
.fragen{margin-top:2.6rem}
.fragen__titel{font-size:1.7rem;color:var(--gruen);padding-bottom:.7rem;border-bottom:2px solid var(--gruen)}
.fragen .info summary{font-size:1.1rem;line-height:1.1;gap:1rem;text-wrap:balance}
.fragen .info summary::after{flex:none}
.fragen .info__inhalt a{color:var(--gruen);text-underline-offset:3px}
/* Wo kaufen: Produkttabelle */
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.6rem}
.wo-tabelle{width:100%;min-width:0}
.wo-tabelle th{text-align:left;font:600 .72rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:.6rem .8rem .6rem 0;border-bottom:2px solid var(--gruen)}
.wo-tabelle td{padding:.65rem .8rem .65rem 0;vertical-align:top}
.wo-tabelle td a{color:var(--gruen);text-underline-offset:3px}
@media (max-width:560px){.wo-tabelle th:nth-child(2),.wo-tabelle td:nth-child(2){display:none}}
.fragen .info summary{font:600 1rem/1.3 var(--text);text-transform:none;letter-spacing:0;padding:1rem 0}
.infos.fragen{border-top:0}