/* ==========================================================================
   DIE FUNDGRUBE — Sonderpostenmarkt, Blumen & Gartencenter Aßweiler
   --------------------------------------------------------------------------
   Die Farben sind KEINE Design-Erfindung. Sie sind aus dem echten
   Markenmaterial gemessen:
     · Wortmarke „FUNDGRUBE"      → Gelb  #FFC814, Kontur Rot #D81E05
     · Schriftzug „Sonderposten…" → Rot   #D81E05
     · Aktionsbanner „Kalender"   → Verlauf #6E0F03 → #B71708, Gelb #FFD426
     · Siegel „BEST PREIS"        → Beere #D4145A
   Grundton warm-creme (Markt, nicht Klinik). Rot = Marke. Gelb = Preis.
   Gelb wird NIE für Fließtext benutzt — nur für Zahlen, Etiketten, Aktion.
   ========================================================================== */

@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(../fonts/SpaceGrotesk.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(../fonts/Inter.woff2) format('woff2');
}

:root{
  /* ---- Marke (gemessen) ---- */
  --rot:        #C4170B;
  --rot-tief:   #7E1004;
  --rot-dunkel: #4A0A02;
  --rot-hell:   #E8412E;
  --gelb:       #FFC814;
  --gelb-hell:  #FFD84D;
  --gelb-tief:  #C79000;   /* Gelb, das auf Weiß noch lesbar ist (AA) */
  --beere:      #D4145A;

  /* ---- Grundton ---- */
  --creme:      #FFF8F0;
  --creme-2:    #FDEFE0;
  --weiss:      #FFFFFF;
  --tinte:      #1C0F0A;
  --tinte-2:    #2C1913;
  --text:       #241511;
  --grau:       #6E5A51;
  --grau-hell:  #94827A;
  --linie:      #EFE0CF;
  --linie-dunkel:#3E241B;

  /* ---- Signal ---- */
  --gruen:      #1E7F4B;
  --gruen-hell: #34C77B;
  --warn:       #A85B00;
  --fehler:     #B3261E;

  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --breit: 1200px;
  --schmal: 760px;
  --radius: 14px;
  --radius-gross: 24px;
  --schatten: 0 1px 2px rgba(28,15,10,.05), 0 8px 24px -12px rgba(28,15,10,.22);
  --schatten-hoch: 0 2px 4px rgba(28,15,10,.06), 0 24px 48px -20px rgba(28,15,10,.35);

  --kopf-hoehe: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--creme);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.4rem,7vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.015em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* Fokus: immer sichtbar, nie wegdesignt (BFSG/WCAG 2.4.7) */
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:4px}
.auf-dunkel :focus-visible,.fg-kopf :focus-visible{outline-color:var(--gelb)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:200;background:var(--rot);color:#fff;
  padding:12px 18px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

.huelle{width:min(100% - 2.5rem,var(--breit));margin-inline:auto}
.huelle-schmal{width:min(100% - 2.5rem,var(--schmal));margin-inline:auto}
@media (max-width:640px){.huelle,.huelle-schmal{width:min(100% - 1.75rem,var(--breit))}}

section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.abschnitt-kopf{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.abschnitt-kopf p{color:var(--grau);font-size:1.06rem}

/* Kleiner Rubrik-Titel über den Überschriften */
.rubrik{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rot);
  margin-bottom:.85rem;
}
.rubrik::before{content:"";width:26px;height:3px;background:var(--gelb);border-radius:2px}
.auf-dunkel .rubrik{color:var(--gelb)}

/* ==========================================================================
   1 · Knöpfe
   ========================================================================== */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s;
  min-height:48px;
}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
.knopf--rot{background:var(--rot);color:#fff;box-shadow:0 8px 20px -10px rgba(196,23,11,.9)}
.knopf--rot:hover{background:#A81208;box-shadow:0 14px 28px -12px rgba(196,23,11,.95)}
.knopf--gelb{background:var(--gelb);color:var(--tinte);box-shadow:0 8px 20px -10px rgba(199,144,0,.8)}
.knopf--gelb:hover{background:var(--gelb-hell)}
.knopf--linie{background:transparent;border-color:currentColor}
.knopf--linie:hover{background:rgba(255,255,255,.08)}
.knopf--hell{background:#fff;color:var(--rot-tief);border-color:var(--linie)}
.knopf--hell:hover{background:var(--creme-2)}
.knopf--klein{padding:.6rem 1.1rem;font-size:.9rem;min-height:40px}
.knopf--breit{width:100%}
.knopf[aria-disabled="true"],.knopf:disabled{opacity:.5;pointer-events:none}

.knopf-reihe{display:flex;flex-wrap:wrap;gap:.85rem}

/* ==========================================================================
   2 · Preis-Etikett — das Erkennungszeichen der Marke
   Ein gekipptes Schild mit Loch, wie am Warenkorb im Markt.
   ========================================================================== */
.etikett{
  position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;
  background:var(--gelb);color:var(--tinte);
  padding:.5rem .95rem .55rem 1.5rem;border-radius:6px 10px 10px 6px;
  font-family:var(--font-display);line-height:1;
  box-shadow:0 6px 16px -8px rgba(126,16,4,.55);
}
.etikett::before{ /* Loch für die Schnur */
  content:"";position:absolute;left:.5rem;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--creme);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.etikett__zahl{font-size:1.65rem;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.etikett__zusatz{font-size:.66rem;font-weight:500;letter-spacing:.04em;color:#6B4E00;margin-top:.28rem;
  font-family:var(--font-body)}
.etikett--gross .etikett__zahl{font-size:clamp(2.4rem,6vw,3.6rem)}
.etikett--gross{padding:.85rem 1.4rem .9rem 2rem;transform:rotate(-2.5deg)}
.etikett--rot{background:var(--rot);color:#fff}
.etikett--rot .etikett__zusatz{color:#FFD8D3}

/* Streichpreis nach PAngV: nur mit 30-Tage-Bezug daneben */
.streich{color:var(--grau);text-decoration:line-through;font-size:.92rem}
.preis-hinweis{font-size:.74rem;color:var(--grau);line-height:1.4;margin-top:.35rem}

/* ==========================================================================
   3 · Kopf & Navigation
   ========================================================================== */
/* Fest am oberen Rand, nicht klebend. `sticky` heftet sich nur innerhalb des
   eigenen Elternelements an — die Scroll-Buehne davor schob den Kopf deshalb
   erst nach unten weg und holte ihn danach zurueck. `fixed` haelt ihn immer
   oben: Logo, Menue und Telefonnummer sind auf jeder Scrollhoehe erreichbar.
   Der Ausgleich unten (`body`) verhindert, dass er den ersten Bildschirm
   verdeckt. */
.fg-kopf{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(255,248,240,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
  transition:box-shadow .25s,background .25s;
}
body{padding-top:var(--kopf-hoehe)}
/* Sprungziele duerfen nicht unter dem Kopf landen. */
:target,[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 12px)}
.fg-kopf.ist-gescrollt{box-shadow:0 6px 24px -18px rgba(28,15,10,.7)}
.fg-kopf__innen{
  display:flex;align-items:center;gap:1.25rem;height:var(--kopf-hoehe);
}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.marke svg{height:38px;width:auto}
.marke__zusatz{
  display:none;font-family:var(--font-display);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rot);line-height:1.25;
  border-left:2px solid var(--linie);padding-left:.7rem;
}
@media (min-width:900px){.marke__zusatz{display:block}}

.haupt-nav{margin-left:auto;display:none;align-items:center;gap:.35rem}
@media (min-width:1000px){.haupt-nav{display:flex}}
.haupt-nav a{
  padding:.55rem .8rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.94rem;color:var(--text);
  transition:background .16s,color .16s;
}
.haupt-nav a:hover{background:var(--creme-2)}
.haupt-nav a[aria-current="page"]{color:var(--rot);background:rgba(196,23,11,.09)}

.kopf-tat{margin-left:auto;display:flex;align-items:center;gap:.5rem}
@media (min-width:1000px){.kopf-tat{margin-left:.5rem}}
.kopf-tat .knopf{padding:.6rem 1.15rem;font-size:.92rem;min-height:42px}
.nur-gross{display:none}
@media (min-width:760px){.nur-gross{display:inline-flex}}

.burger{
  display:inline-grid;place-items:center;width:46px;height:46px;flex-shrink:0;
  background:transparent;border:1px solid var(--linie);border-radius:12px;cursor:pointer;
}
@media (min-width:1000px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile Schublade */
.schublade{
  position:fixed;inset:var(--kopf-hoehe) 0 0;z-index:88;
  background:var(--creme);padding:1.5rem 0 4rem;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .22s,transform .22s var(--ease),visibility .22s;
}
.schublade.ist-offen{opacity:1;transform:none;visibility:visible}
.schublade a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem .25rem;border-bottom:1px solid var(--linie);
  text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.2rem;
}
.schublade a::after{content:"›";color:var(--rot);font-size:1.4rem}
.schublade .knopf-reihe{margin-top:1.75rem}

/* ==========================================================================
   4 · Öffnungsstatus-Pille
   ========================================================================== */
.status{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem .9rem;border-radius:999px;
  font-size:.85rem;font-weight:600;line-height:1.3;
  background:rgba(30,127,75,.12);color:#12603A;border:1px solid rgba(30,127,75,.28);
}
.status__punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen);flex-shrink:0}
.status--zu{background:rgba(110,90,81,.12);color:#4F423C;border-color:rgba(110,90,81,.25)}
.status--zu .status__punkt{background:var(--grau-hell)}
.status--gleich{background:rgba(168,91,0,.13);color:#8A4B00;border-color:rgba(168,91,0,.3)}
.status--gleich .status__punkt{background:var(--warn)}
.auf-dunkel .status{background:rgba(52,199,123,.16);color:#9BF0C4;border-color:rgba(52,199,123,.3)}
.auf-dunkel .status--zu{background:rgba(255,255,255,.1);color:#E4D6CE;border-color:rgba(255,255,255,.18)}
.auf-dunkel .status--gleich{background:rgba(255,200,20,.16);color:var(--gelb-hell);border-color:rgba(255,200,20,.3)}
/* Lebendiger Punkt, solange geöffnet */
.status:not(.status--zu) .status__punkt{animation:puls 2.6s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(30,127,75,.45)}50%{box-shadow:0 0 0 6px rgba(30,127,75,0)}}

/* ==========================================================================
   5 · Das Opening — zwei Türen öffnen den Markt
   ========================================================================== */
.opening{
  position:fixed;inset:0;z-index:120;background:var(--rot-dunkel);
  display:grid;place-items:center;overflow:hidden;
}
.opening[hidden]{display:none}
.opening__tuer{
  position:absolute;top:0;bottom:0;width:50.6%;
  background:linear-gradient(160deg,#8E1206 0%,#5C0C02 55%,#3A0701 100%);
  will-change:transform;
  transition:transform 1.05s cubic-bezier(.7,0,.2,1);
}
.opening__tuer--links{left:0;box-shadow:inset -18px 0 34px -22px #000}
.opening__tuer--rechts{right:0;box-shadow:inset 18px 0 34px -22px #000}
/* Lichtstreifen, der über die geschlossene Tür fährt */
.opening__tuer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,200,20,.22) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:streif 1.5s .15s var(--ease) 1 forwards;
}
@keyframes streif{to{transform:translateX(120%)}}

.opening__inhalt{
  position:relative;z-index:2;text-align:center;padding:1.5rem;
  color:#fff;max-width:640px;
}
.opening__inhalt svg{height:clamp(52px,11vw,86px);width:auto;margin:0 auto}
.opening__satz{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,4.6vw,2.3rem);letter-spacing:-.02em;line-height:1.15;
  margin:1.5rem 0 .6rem;
  opacity:0;transform:translateY(14px);
  animation:einblenden .7s .55s var(--ease) forwards;
}
.opening__unter{
  color:#F5D9C8;font-size:clamp(.92rem,2.4vw,1.05rem);margin:0;
  opacity:0;transform:translateY(14px);
  animation:einblenden .7s .78s var(--ease) forwards;
}
@keyframes einblenden{to{opacity:1;transform:none}}

.opening__ueber{
  position:absolute;right:1rem;bottom:1rem;z-index:3;
  background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:.6rem 1.1rem;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;
}
/* geöffnet: Türen fahren auseinander, Overlay verschwindet */
.opening.ist-offen .opening__tuer--links{transform:translateX(-101%)}
.opening.ist-offen .opening__tuer--rechts{transform:translateX(101%)}
.opening.ist-offen .opening__inhalt,.opening.ist-offen .opening__ueber{opacity:0;transition:opacity .3s}
.opening.ist-weg{opacity:0;pointer-events:none;transition:opacity .45s}

/* Wer wenig Bewegung möchte oder JS aus hat, sieht das Opening gar nicht. */
html:not(.js) .opening{display:none}
@media (prefers-reduced-motion:reduce){
  .opening__tuer,.opening__tuer::after{animation:none;transition:none}
  .opening__satz,.opening__unter{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   6 · Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  /* Farbe nur noch als Unterlage. Das Foto liegt darueber und traegt jetzt
     die Flaeche — vorher erschlug der Verlauf den Laden. */
  background:linear-gradient(165deg,#7E1004 0%,#4A0A02 100%);
  padding:clamp(5rem,13vw,9rem) 0 clamp(4rem,10vw,7rem);
  min-height:clamp(560px,88vh,900px);display:flex;align-items:center;
}
/* Foto hinter dem Hero. Bewusst tief abgedunkelt: Die Schrift muss auch auf
   dem hellsten Bildpunkt lesbar bleiben — ein Kontrast, der von der Bildwahl
   abhängt, ist keiner. Das Bild trägt die Stimmung, nicht die Information. */
/* Das Foto bleibt beim Scrollen stehen, waehrend der Text darueber
   weiterlaeuft. Dadurch bleibt der Laden die ganze Zeit sichtbar, statt dass
   die Flaeche ins Schwarze kippt — genau das wirkte vorher hart.
   `fixed` nur auf Zeigergeraeten: iOS ruckelt damit. */
.hero__foto{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.62;filter:saturate(1.12) contrast(1.05);
}
@media (hover:hover) and (min-width:900px){
  .hero__foto{background-attachment:fixed}
}
/* Abdunklung nur dort, wo Schrift steht: unten und links. Der Rest des Bildes
   bleibt offen. Ein Verlauf ueber alles waere wieder die schwarze Flaeche. */
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(50,7,1,.92) 0%,rgba(60,9,2,.55) 42%,rgba(74,10,2,.12) 100%),
    linear-gradient(to right,rgba(74,10,2,.72) 0%,transparent 62%);
}
.hero > .huelle,.hero > .hero__splitter{position:relative;z-index:1}

/* Bildfläche mit Text darauf — Ladenreise, Blumenwelt, Filialbereich */
.bildflaeche{
  position:relative;overflow:hidden;border-radius:var(--radius-gross);
  background:linear-gradient(150deg,var(--creme-2),#F3D9BC);
}
.bildflaeche img{width:100%;height:100%;object-fit:cover;display:block}
.bildflaeche--hoch{aspect-ratio:3/4}
.bildflaeche--quer{aspect-ratio:16/10}
/* Konfetti-Splitter wie im echten Aktionsbanner — rein dekorativ */
.hero__splitter{position:absolute;inset:0;pointer-events:none;opacity:.55}
.hero__splitter i{
  position:absolute;display:block;width:14px;height:14px;background:var(--gelb);
  clip-path:polygon(0 0,100% 22%,32% 100%);opacity:.7;
  animation:schweben 9s ease-in-out infinite;
}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(22deg)}}
@media (prefers-reduced-motion:reduce){.hero__splitter i{animation:none}}

.hero__gitter{position:relative;display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media (min-width:960px){.hero__gitter{grid-template-columns:1.05fr .95fr}}
.hero h1{
  margin:1.1rem 0 1.2rem;
  font-size:clamp(2.9rem,9.5vw,6.4rem);letter-spacing:-.04em;line-height:.98;
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
}
.hero h1 em{font-size:1.06em}
/* Die Wortmarke im Hero deutlich groesser — sie ist das Erste, was man sieht. */
.hero .fg-logo,.hero svg.logo{width:min(460px,74vw);height:auto}
.hero h1 em{font-style:normal;color:var(--gelb);display:block}
.hero__text{
  font-size:clamp(1.1rem,2.9vw,1.5rem);color:#FBEADD;max-width:46ch;
  font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hero .knopf-reihe{margin-top:1.9rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.7rem 1.25rem;align-items:center;margin-top:1.6rem;
  font-size:.92rem;color:#EEC9B6}
.hero__meta a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.hero__meta a:hover{border-color:var(--gelb);color:var(--gelb)}

/* Rechte Seite: gestapelte Fundstück-Karten */
/* KEINE Ueberlappung mehr. Drei absolut gesetzte Karten koennen sich immer
   irgendwo ueberdecken — je nach Textlaenge, Schriftgroesse und Fensterbreite
   trifft es mal die eine, mal die andere Ueberschrift. Genau das ist zweimal
   passiert. Jetzt liegen sie in einem Raster und sind nur noch versetzt und
   leicht gedreht: Das sieht weiter nach hingeworfenem Stapel aus, aber kein
   Buchstabe kann je verdeckt werden. */
.stapel{display:grid;gap:1.1rem;justify-items:stretch}
.stapel__karte{
  position:relative;background:#fff;color:var(--text);border-radius:var(--radius-gross);
  padding:1.15rem;box-shadow:var(--schatten-hoch);width:min(300px,100%);
}
.stapel__karte h3{font-size:1.02rem;margin-bottom:.15rem}
.stapel__karte p{font-size:.83rem;color:var(--grau);margin:0}
/* Die drei Karten lagen so eng, dass die mittlere die Ueberschriften der
   beiden anderen verdeckt hat — man las „Heute e…" und „en & Pflanzen".
   Jetzt sitzen sie weiter auseinander: Jede Karte deckt hoechstens noch das
   Bild der Nachbarin ab, nie deren Text. */
.stapel__karte{
  animation:schweben 7s ease-in-out infinite;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  will-change:transform;
}
/* Versatz nach links und rechts statt uebereinander. */
.stapel__karte:nth-child(1){--dreh:-3.5deg;justify-self:start;animation-delay:0s}
.stapel__karte:nth-child(2){--dreh:3deg;  justify-self:end;  animation-delay:-2.4s}
.stapel__karte:nth-child(3){--dreh:-1.5deg;justify-self:center;animation-delay:-4.8s}

/* Ein langsames Atmen, kein Zappeln: drei Sekunden hoch, drei runter, jede
   Karte zeitversetzt. Damit wirkt der Stapel lebendig, ohne vom Text
   abzulenken. */
@keyframes schweben{
  0%,100%{transform:rotate(var(--dreh)) translate3d(0,0,0)}
  50%    {transform:rotate(calc(var(--dreh) * .55)) translate3d(0,-14px,0)}
}
/* Beim Zeigen kommt die Karte nach vorn — dann ist auch garantiert nichts verdeckt. */
.stapel__karte:hover,.stapel__karte:focus-within{
  animation-play-state:paused;
  transform:rotate(0deg) translate3d(0,-18px,0) scale(1.04);
  box-shadow:0 26px 60px -22px rgba(28,15,10,.6);z-index:9;
}
@media (prefers-reduced-motion:reduce){
  .stapel__karte{animation:none;transform:rotate(var(--dreh))}
}
@media (max-width:720px){
  /* Auf schmalen Geraeten auch die Drehung weg — sie kostet dort nur Platz. */
  .stapel__karte{width:100%;animation:none;transform:none;justify-self:stretch}
}
.stapel__bild{
  aspect-ratio:4/3;border-radius:12px;margin-bottom:.8rem;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--creme-2),#F6DCC2);font-size:2.6rem;
}
@media (max-width:959px){
  .stapel{min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem}
  .stapel__karte{position:static;width:auto;transform:none!important}
}

/* ==========================================================================
   7 · Bänder & Laufschrift
   ========================================================================== */
.band{background:var(--gelb);color:var(--tinte);padding:.85rem 0;overflow:hidden}
.band--rot{background:var(--rot);color:#fff}
.band__spur{display:flex;gap:2.5rem;width:max-content;animation:laufen 34s linear infinite}
.band__spur span{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:2.5rem;
}
.band__spur span::after{content:"◆";color:var(--rot);font-size:.7rem}
.band--rot .band__spur span::after{color:var(--gelb)}
@keyframes laufen{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none}}
.band:hover .band__spur{animation-play-state:paused}

/* ==========================================================================
   8 · Karten: Produkt, Kategorie, Info
   ========================================================================== */
.raster{display:grid;gap:1.1rem}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.raster--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

.karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch);border-color:#E2CDB4}
.karte__bild{
  position:relative;aspect-ratio:1;background:linear-gradient(140deg,var(--creme-2),#F7E2CA);
  display:grid;place-items:center;overflow:hidden;
}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__bild .platzhalter{font-size:2.8rem;opacity:.5}
.karte__koerper{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.karte__kat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.karte h3{font-size:1.04rem;line-height:1.3}
.karte__fuss{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap}

/* Abzeichen */
.abzeichen{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .62rem;border-radius:999px;
  font-size:.71rem;font-weight:700;letter-spacing:.03em;line-height:1.35;
  background:var(--creme-2);color:#7A4A16;border:1px solid #EBD3B4;
}
.abzeichen--neu{background:rgba(30,127,75,.13);color:#12603A;border-color:rgba(30,127,75,.3)}
.abzeichen--aktion{background:var(--gelb);color:#5A4100;border-color:#E0AC00}
.abzeichen--markt{background:rgba(196,23,11,.1);color:#8E1206;border-color:rgba(196,23,11,.25)}
.abzeichen--reserv{background:rgba(212,20,90,.1);color:#9C0F41;border-color:rgba(212,20,90,.25)}
.karte__bild .abzeichen{position:absolute;top:.7rem;left:.7rem;z-index:2;box-shadow:0 3px 10px -4px rgba(0,0,0,.3)}

/* Kategorie-Kachel */
.kachel{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:172px;padding:1.1rem;border-radius:var(--radius-gross);
  text-decoration:none;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--rot) 0%,var(--rot-tief) 100%);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.kachel:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--schatten-hoch)}
.kachel::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.22;
  background:radial-gradient(70% 70% at 80% 10%,var(--gelb),transparent 70%);
  transition:opacity .25s;
}
.kachel:hover::after{opacity:.4}
.kachel__zeichen{font-size:2rem;line-height:1;margin-bottom:auto}
.kachel h3{font-size:1.1rem;color:#fff}
.kachel span{font-size:.82rem;color:rgba(255,255,255,.78)}
.kachel--gruen{background:linear-gradient(150deg,#1E7F4B 0%,#0E4D2C 100%)}
.kachel--gelb{background:linear-gradient(150deg,#E5A800 0%,#A87400 100%);color:var(--tinte)}
.kachel--gelb h3{color:var(--tinte)}
.kachel--gelb span{color:rgba(28,15,10,.66)}
.kachel--tinte{background:linear-gradient(150deg,#2C1913 0%,#150A06 100%)}

/* Info-Kachel (Vorteile, FAQ …) */
.info{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:1.4rem}
.info__zeichen{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--creme-2);font-size:1.35rem;margin-bottom:.9rem;
}
.info h3{margin-bottom:.4rem}
.info p{color:var(--grau);font-size:.95rem;margin:0}

/* Leerzustand — bewusst gestaltet, nie eine tote Kategorie */
.leer{
  border:2px dashed #E5CFB4;border-radius:var(--radius-gross);
  background:rgba(255,255,255,.6);padding:2.5rem 1.5rem;text-align:center;
}
.leer__zeichen{font-size:2.4rem;margin-bottom:.6rem}
.leer h3{margin-bottom:.5rem}
.leer p{color:var(--grau);max-width:46ch;margin-inline:auto}
.leer .knopf-reihe{justify-content:center;margin-top:1.4rem}

/* ==========================================================================
   9 · Ladenreise — Sticky-Sequenz
   ========================================================================== */
.reise{background:var(--tinte);color:#fff}
.reise__buehne{position:relative}
@media (min-width:960px){
  .reise__gitter{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .reise__anker{position:sticky;top:calc(var(--kopf-hoehe) + 3rem);align-self:start}
}
.reise__station{
  padding:clamp(2rem,5vw,3.4rem) 0;border-top:1px solid var(--linie-dunkel);
}
.reise__station:first-child{border-top:0}
.reise__nr{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.2em;
  color:var(--gelb);margin-bottom:.6rem;display:block;
}
.reise__station h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.6rem}
.reise__station p{color:#D8C4BA;max-width:46ch}
.reise__bild{
  aspect-ratio:16/10;border-radius:var(--radius-gross);overflow:hidden;
  background:linear-gradient(150deg,#3E241B,#1C0F0A);display:grid;place-items:center;
  border:1px solid var(--linie-dunkel);
}
.reise__bild span{font-size:4rem;opacity:.55}

/* ==========================================================================
   10 · Bühne „Fundstück der Woche"
   ========================================================================== */
.buehne{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:#fff;border:1px solid var(--linie);border-radius:28px;
  padding:clamp(1.25rem,3.5vw,2.4rem);box-shadow:var(--schatten);
}
@media (min-width:860px){.buehne{grid-template-columns:1fr 1.05fr}}
.buehne__bild{
  aspect-ratio:4/3;border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,var(--creme-2),#F3D9BC);display:grid;place-items:center;
}
.buehne__bild img{width:100%;height:100%;object-fit:cover}
.buehne__bild .platzhalter{font-size:4rem;opacity:.5}
.buehne__preise{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:1.2rem 0 .5rem}

/* ==========================================================================
   11 · Filiale / Karte / Kontakt
   ========================================================================== */
.filial-gitter{display:grid;gap:1.6rem}
@media (min-width:900px){.filial-gitter{grid-template-columns:1fr 1fr}}
.karte-einbett{
  border-radius:var(--radius-gross);overflow:hidden;border:1px solid var(--linie);
  background:var(--creme-2);min-height:320px;position:relative;
}
.karte-einbett iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
/* Datenschutz: Karte erst nach Klick laden (kein Google-Kontakt ohne Einwilligung) */
.karte-zustimmung{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.9rem;
  text-align:center;padding:2rem 1.5rem;background:var(--creme-2);
}
.karte-zustimmung p{font-size:.9rem;color:var(--grau);max-width:38ch;margin:0}

.datenliste{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.datenliste li{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--linie);align-items:flex-start}
.datenliste li:last-child{border-bottom:0}
.datenliste dt,.datenliste b{font-weight:600;min-width:9.5rem;flex-shrink:0;font-size:.9rem;color:var(--grau)}
.datenliste a{color:var(--rot);font-weight:600;text-decoration:none}
.datenliste a:hover{text-decoration:underline}

.zeiten{width:100%;border-collapse:collapse;font-size:.96rem}
.zeiten th,.zeiten td{text-align:left;padding:.62rem .4rem;border-bottom:1px solid var(--linie)}
.zeiten th{font-weight:600;color:var(--grau);font-size:.9rem}
.zeiten td{font-variant-numeric:tabular-nums}
.zeiten tr.heute{background:rgba(255,200,20,.16)}
.zeiten tr.heute th,.zeiten tr.heute td{font-weight:700;color:var(--text)}
.zeiten tr.zu td{color:var(--grau-hell)}

/* Hinweisbanner (Feiertag, Betriebsferien, kurzfristige Änderung) */
.hinweis{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--gelb);color:var(--tinte);padding:.9rem 1.1rem;border-radius:14px;
  font-size:.95rem;font-weight:500;border:1px solid #E0AC00;
}
.hinweis__zeichen{font-size:1.15rem;line-height:1.4}
.hinweis--rot{background:rgba(196,23,11,.1);border-color:rgba(196,23,11,.3);color:#7E1004}

/* ==========================================================================
   12 · Formulare
   ========================================================================== */
.feld{display:grid;gap:.4rem;margin-bottom:1.05rem}
.feld > label{font-weight:600;font-size:.92rem}
.feld small{color:var(--grau);font-size:.82rem;line-height:1.45}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem;
  background:#fff;border:1px solid #E2CFB8;border-radius:12px;color:var(--text);
  transition:border-color .16s,box-shadow .16s;min-height:50px;
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(196,23,11,.16);
}
.feld input[aria-invalid="true"],.feld select[aria-invalid="true"],.feld textarea[aria-invalid="true"]{
  border-color:var(--fehler);box-shadow:0 0 0 3px rgba(179,38,30,.14);
}
.feld__fehler{color:var(--fehler);font-size:.85rem;font-weight:600;min-height:0}
.feld--zwei{display:grid;gap:1.05rem}
@media (min-width:600px){.feld--zwei{grid-template-columns:1fr 1fr}}

.hakerl{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;line-height:1.55;cursor:pointer}
.hakerl input{width:22px;height:22px;min-height:0;flex-shrink:0;margin-top:.12rem;accent-color:var(--rot)}
.hakerl a{color:var(--rot);font-weight:600}

.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form-antwort{
  margin-top:1.1rem;padding:1rem 1.15rem;border-radius:14px;font-weight:500;font-size:.95rem;
}
.form-antwort--ok{background:rgba(30,127,75,.12);color:#12603A;border:1px solid rgba(30,127,75,.3)}
.form-antwort--fehler{background:rgba(179,38,30,.1);color:#8E1B15;border:1px solid rgba(179,38,30,.28)}
.form-antwort[hidden]{display:none}

.form-karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:clamp(1.25rem,3.5vw,2.2rem);box-shadow:var(--schatten);
}

/* ==========================================================================
   13 · Fuß
   ========================================================================== */
.fg-fuss{background:var(--tinte);color:#D8C4BA;padding:clamp(3rem,6vw,4.5rem) 0 2rem;margin-top:0}
.fg-fuss__gitter{display:grid;gap:2.2rem}
@media (min-width:760px){.fg-fuss__gitter{grid-template-columns:1.35fr 1fr 1fr 1fr}}
.fg-fuss h4{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gelb);margin-bottom:.95rem;
}
.fg-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fg-fuss a{text-decoration:none;font-size:.94rem;transition:color .16s}
.fg-fuss a:hover{color:var(--gelb)}
.fg-fuss__marke svg{height:40px;width:auto;margin-bottom:1rem}
.fg-fuss__marke p{font-size:.92rem;max-width:34ch}
.fg-fuss__unten{
  margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--linie-dunkel);
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;
  font-size:.85rem;color:var(--grau-hell);
}
.sozial{display:flex;gap:.6rem;margin-top:1.1rem}
.sozial a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid var(--linie-dunkel);
  transition:background .16s,transform .16s;
}
.sozial a:hover{background:var(--rot);transform:translateY(-2px)}
.sozial svg{width:19px;height:19px;fill:currentColor}

/* ==========================================================================
   14 · Mobile Aktionsleiste
   ========================================================================== */
.tatleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:rgba(255,248,240,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--linie);
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.tatleiste.ist-da{transform:none}
@media (min-width:1000px){.tatleiste{display:none}}
.tatleiste a{
  display:grid;justify-items:center;gap:.18rem;padding:.5rem .25rem;border-radius:12px;
  text-decoration:none;font-size:.7rem;font-weight:600;color:var(--text);
}
.tatleiste a:active{background:var(--creme-2)}
.tatleiste svg{width:21px;height:21px;stroke:var(--rot);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
body.hat-tatleiste{padding-bottom:0}
@media (max-width:999px){body.hat-tatleiste .fg-fuss{padding-bottom:5.5rem}}

/* ==========================================================================
   15 · Flächen & Hilfsklassen
   ========================================================================== */
.flaeche-weiss{background:#fff}
.flaeche-creme{background:var(--creme-2)}
.flaeche-tinte{background:var(--tinte);color:#E7D8D0}
.flaeche-tinte h2,.flaeche-tinte h3{color:#fff}
.flaeche-rot{
  background:linear-gradient(160deg,#8E1206 0%,#4A0A02 100%);color:#F7DECF;
}
.flaeche-rot h2,.flaeche-rot h3{color:#fff}
.auf-dunkel{color:#E7D8D0}

.mitte{text-align:center}
.mitte .abschnitt-kopf{margin-inline:auto}
.klein{font-size:.86rem;color:var(--grau)}
.auf-dunkel .klein{color:#C3ADA3}

/* Fließtext-Seiten (Recht, Über uns) */
.fliess{max-width:72ch}
.fliess h2{font-size:clamp(1.35rem,3vw,1.85rem);margin:2.4rem 0 .8rem}
.fliess h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
.fliess ul,.fliess ol{padding-left:1.3rem;margin:0 0 1em}
.fliess li{margin-bottom:.45rem}
.fliess a{color:var(--rot);font-weight:500}
.fliess table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
.fliess th,.fliess td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top}
.fliess th{font-weight:600;background:var(--creme-2)}

/* Aufklapper (FAQ) */
.aufklapp{border:1px solid var(--linie);border-radius:16px;background:#fff;margin-bottom:.7rem;overflow:hidden}
.aufklapp summary{
  cursor:pointer;padding:1.05rem 1.2rem;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.aufklapp summary::-webkit-details-marker{display:none}
.aufklapp summary::after{content:"+";color:var(--rot);font-size:1.5rem;line-height:1;flex-shrink:0;transition:transform .2s}
.aufklapp[open] summary::after{transform:rotate(45deg)}
.aufklapp__inhalt{padding:0 1.2rem 1.2rem;color:var(--grau);font-size:.96rem}
.aufklapp__inhalt p:last-child{margin-bottom:0}

/* Brotkrumen */
.krumen{font-size:.85rem;color:var(--grau);padding:1.1rem 0 0}
.krumen a{color:var(--rot);text-decoration:none}
.krumen a:hover{text-decoration:underline}
.krumen span{margin:0 .4rem;color:var(--grau-hell)}

/* Filter-Leiste (Sortiment) */
.filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filter button{
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--linie);background:#fff;
  font-size:.9rem;font-weight:600;cursor:pointer;transition:all .16s;min-height:42px;
}
.filter button:hover{border-color:var(--rot);color:var(--rot)}
.filter button[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:#fff}

.suche{position:relative;margin-bottom:1.2rem}
.suche input{
  width:100%;padding:.95rem 1.1rem .95rem 3rem;font:inherit;font-size:1rem;min-height:52px;
  background:#fff;border:1px solid #E2CFB8;border-radius:999px;
}
.suche input:focus{outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(196,23,11,.16)}
.suche svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:19px;height:19px;
  stroke:var(--grau);fill:none;stroke-width:2;stroke-linecap:round}

/* ==========================================================================
   16 · Scroll-Reveal
   Ohne JS und bei „weniger Bewegung" ist alles sofort sichtbar.
   ========================================================================== */
html.js .zeig{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .zeig.ist-da{opacity:1;transform:none}
html.js .zeig--stufe > *{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .zeig--stufe.ist-da > *{opacity:1;transform:none}
html.js .zeig--stufe.ist-da > *:nth-child(2){transition-delay:.07s}
html.js .zeig--stufe.ist-da > *:nth-child(3){transition-delay:.14s}
html.js .zeig--stufe.ist-da > *:nth-child(4){transition-delay:.21s}
html.js .zeig--stufe.ist-da > *:nth-child(5){transition-delay:.28s}
html.js .zeig--stufe.ist-da > *:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  html.js .zeig,html.js .zeig--stufe > *{opacity:1!important;transform:none!important;transition:none!important}
}
/* Notaus: wenn ein Skript stirbt, darf nichts unsichtbar bleiben */
html.fg-notaus .zeig,html.fg-notaus .zeig--stufe > *{opacity:1!important;transform:none!important}
html.fg-notaus .opening{display:none}

/* Druck */
@media print{
  .fg-kopf,.tatleiste,.opening,.band,.sozial{display:none!important}
  body{background:#fff;font-size:11pt}
  .hero,.flaeche-tinte,.flaeche-rot,.reise{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ==========================================================================
   17 · Kategorie-Kacheln mit Foto
   Flächen aus Farbe und Emoji sagen nichts über das Sortiment. Ein echtes
   Regalbild schon. Der Verlauf darüber ist kein Effekt, sondern Zweck: Die
   Schrift muss auf jedem Bild lesbar sein, auch auf einer hellen Deko-Fläche.
   ========================================================================== */
.kachel--foto{
  min-height:220px;padding:1.15rem;background:var(--tinte);
  border:1px solid rgba(255,255,255,.08);
}
.kachel--foto::after{display:none}
.kachel__bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.02);transition:transform .5s var(--ease),filter .4s;
  filter:saturate(1.05);
}
.kachel--foto::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(20,7,3,.94) 0%,rgba(20,7,3,.72) 38%,rgba(20,7,3,.18) 72%,rgba(20,7,3,.05) 100%);
}
.kachel--foto:hover .kachel__bild{transform:scale(1.09)}
.kachel--foto h3{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.kachel--foto span{color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* Gelbe Marken-Kante unten — verbindet die Kacheln mit dem Preisschild-Motiv. */
.kachel--foto h3::before{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--gelb);margin-bottom:.55rem;
}

/* ==========================================================================
   18 · Shorts — hochkant, wie man sie vom Telefon kennt
   Die Clips laden NICHT automatisch: Ein Standbild steht da, das Video kommt
   erst auf Klick. Das spart auf dem Handy Datenvolumen und verhindert, dass
   die Seite mit drei Videostreams startet.
   ========================================================================== */
.shorts{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.short{
  position:relative;aspect-ratio:9/16;border-radius:var(--radius-gross);
  overflow:hidden;background:var(--tinte);border:1px solid var(--linie);
  cursor:pointer;padding:0;display:block;width:100%;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.short:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.short__bild,.short video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short__spiel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--rot);color:#fff;font-size:1.4rem;padding-left:.2rem;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.6);transition:transform .2s var(--ease);
}
.short:hover .short__spiel{transform:translate(-50%,-50%) scale(1.09)}
.short__text{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem .9rem .9rem;
  background:linear-gradient(to top,rgba(20,7,3,.94),transparent);
  color:#fff;text-align:left;
}
.short__text b{display:block;font-family:var(--font-display);font-size:.98rem;line-height:1.3}
.short__text span{display:block;margin-top:.2rem;font-size:.78rem;color:rgba(255,255,255,.75)}
.short.laeuft .short__spiel,.short.laeuft .short__text{opacity:0;pointer-events:none}

/* ==========================================================================
   19 · Info-Karte mit Bild
   Ein Emoji sagt nichts über eine Abteilung. Ein Regalbild schon.
   ========================================================================== */
.info--foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.info__foto{aspect-ratio:16/10;overflow:hidden;background:var(--creme-2)}
.info__foto img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.info--foto:hover .info__foto img{transform:scale(1.06)}
.info--foto h3{margin:1rem 1.15rem .35rem}
.info--foto p{margin:0 1.15rem 1.15rem;color:var(--grau);font-size:.95rem}

/* Shorts: unmissverständlich anklickbar. Der ganze Kachelbereich ist der
   Knopf, nicht nur das kleine Dreieck in der Mitte. */
.short{-webkit-tap-highlight-color:transparent}
.short:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.short__marke{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  background:var(--gelb);color:var(--tinte);
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  padding:.24rem .6rem;border-radius:999px;letter-spacing:.02em;
}

/* Preisetikett ohne Zahl: gleiche Form, ruhiger Ton - es verspricht nichts. */
.etikett--offen{background:var(--creme-2);color:var(--tinte-2)}
.etikett--offen .etikett__zahl{font-size:.9rem;letter-spacing:0}

/* ==========================================================================
   Fliegender WhatsApp-Knopf
   Sitzt unten rechts ueber allem, wandert auf dem Handy ueber die
   Aktionsleiste hinaus und wird beim Zeigen zu einem Knopf mit Text.
   `hidden` bleibt gesetzt, bis app.js eine echte Nummer gefunden hat.
   ========================================================================== */
.wa{
  position:fixed;z-index:95;
  right:max(1.1rem,env(safe-area-inset-right));
  bottom:calc(max(1.1rem,env(safe-area-inset-bottom)) + var(--leiste-hoehe,0px));
  display:inline-flex;align-items:center;gap:0;overflow:hidden;
  height:58px;padding:0 15px;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.65),0 4px 12px rgba(0,0,0,.22);
  transition:gap .3s var(--ease),padding .3s var(--ease),transform .25s var(--ease);
}
.wa__zeichen{width:28px;height:28px;fill:currentColor;flex:0 0 auto}
/* Der Text ist erst zusammengefaltet und klappt beim Zeigen auf — so bleibt
   der Knopf klein, sagt aber trotzdem, was er tut. */
.wa__text{
  max-width:0;opacity:0;white-space:nowrap;font-weight:700;font-size:.95rem;
  transition:max-width .3s var(--ease),opacity .25s var(--ease);
}
.wa:hover,.wa:focus-visible{gap:10px;padding:0 20px;transform:translateY(-2px)}
.wa:hover .wa__text,.wa:focus-visible .wa__text{max-width:11rem;opacity:1}
/* Ein ruhiger Puls, damit er auffaellt, ohne zu blinken. */
@keyframes waPuls{0%,100%{box-shadow:0 10px 30px -8px rgba(37,211,102,.65),0 0 0 0 rgba(37,211,102,.5)}
                 60%{box-shadow:0 10px 30px -8px rgba(37,211,102,.65),0 0 0 16px rgba(37,211,102,0)}}
.wa{animation:waPuls 3.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.wa{animation:none}}
/* Auf dem Handy sitzt unten die Aktionsleiste — dort darueber. */
@media (max-width:720px){.wa{--leiste-hoehe:68px;height:54px}}