/* ==========================================================================
   BEST PREIS Zweibrücken — Gestaltungssystem
   --------------------------------------------------------------------------
   Bewusst NICHT die Handschrift der Schwesterfiliale. Die FUNDGRUBE trägt ein
   gekipptes Preisetikett und arbeitet mit Creme und ruhigem Rot. BEST PREIS
   hat ein anderes Logo — Goldzacken-Sunburst, Daumen hoch, Banderole — und
   damit eine andere Lautstärke: Markt statt Boutique.

   Die Farben sind aus dem echten Logo genommen, nicht erfunden:
     Rot   #D91E18   Oval und Banderole
     Tief  #A3120D   Schattenkanten
     Gold  #F5D98B   Sunburst und Rahmen
     Sonne #FFC61A   die kräftige Goldspitze

   Regeln, die hier gelten:
   1. Ein Preis erscheint nur, wenn er wirklich gepflegt ist. Sonst „Preis im
      Markt" — eine Null wäre eine falsche Preisangabe.
   2. Keine erfundenen Bewertungen, keine erfundenen Kunden.
   3. Öffnungszeiten stehen erst da, wenn der Betrieb sie bestätigt hat.
   ========================================================================== */

:root{
  --rot:#D91E18; --rot-tief:#A3120D; --rot-dunkel:#6E0B07;
  --gold:#F5D98B; --sonne:#FFC61A;
  --creme:#FFF6E9; --creme-2:#FBE9CE;
  --tinte:#2A1006; --tinte-2:#6B4B37;
  --weiss:#fff;
  --rund:14px; --rund-gross:26px;
  --ease:cubic-bezier(.22,1,.36,1);
  --schrift:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --anzeige:"Space Grotesk","Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--schrift);color:var(--tinte);
  background:var(--creme);line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

.huelle{width:min(1180px,100% - 2.4rem);margin-inline:auto}

/* ---- Kopf ---- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--weiss);border-bottom:3px solid var(--rot);
}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.kopf__logo{height:52px;width:auto}
.kopf__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--rot);color:#fff;text-decoration:none;font-weight:700;
  padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 0 -2px var(--rot-tief);
}
.kopf__tel:hover{background:var(--rot-tief);box-shadow:0 4px 0 -2px var(--rot-dunkel)}

/* ---- Laufband: die Marktstimme, ohne Prozentversprechen ---- */
.band{
  background:var(--rot);color:#fff;overflow:hidden;
  border-block:3px solid var(--rot-tief);
}
.band__spur{display:flex;gap:2.6rem;padding:.55rem 0;white-space:nowrap;
  font-family:var(--anzeige);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
  animation:laufen 34s linear infinite;will-change:transform}
.band b{color:var(--sonne)}
@keyframes laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none;flex-wrap:wrap;white-space:normal}}

/* ---- Bühne ---- */
.buehne{
  position:relative;padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,8vw,6rem);
  text-align:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--creme) 55%,var(--creme-2) 100%);
}
/* Strahlen aus dem Logo aufgenommen — als Fläche, nicht als Bild. */
.buehne::before{
  content:"";position:absolute;inset:-30% -20% auto;height:150%;
  background:conic-gradient(from 0deg at 50% 30%,
    rgba(255,198,26,.16) 0 6deg, transparent 6deg 18deg);
  pointer-events:none;
}
.buehne__logo{position:relative;width:min(560px,88%);margin:0 auto 1.4rem}
.buehne h1{
  position:relative;font-family:var(--anzeige);font-weight:700;
  font-size:clamp(1.7rem,5.2vw,3.1rem);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 .7rem;
}
.buehne h1 em{font-style:normal;color:var(--rot)}
.buehne__unter{position:relative;max-width:52ch;margin:0 auto 1.8rem;color:var(--tinte-2);font-size:clamp(1rem,2.3vw,1.16rem)}
.reihe{position:relative;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

.knopf{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;text-decoration:none;font-size:1rem;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.knopf--rot{background:var(--rot);color:#fff;box-shadow:0 7px 0 -2px var(--rot-tief)}
.knopf--rot:hover{transform:translateY(-2px);box-shadow:0 9px 0 -2px var(--rot-tief)}
.knopf--gold{background:var(--sonne);color:var(--tinte);box-shadow:0 7px 0 -2px #C99A00}
.knopf--gold:hover{transform:translateY(-2px);box-shadow:0 9px 0 -2px #C99A00}
.knopf--klar{background:#fff;color:var(--tinte);border:2px solid var(--creme-2)}

/* ---- Abschnitte ---- */
.teil{padding:clamp(2.6rem,6vw,4.6rem) 0}
.teil--weiss{background:var(--weiss)}
.teil__kopf{text-align:center;margin-bottom:2.2rem}
.teil h2{
  font-family:var(--anzeige);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,4vw,2.3rem);margin:0 0 .5rem;
}
.teil__kopf p{margin:0;color:var(--tinte-2);max-width:56ch;margin-inline:auto}

.gitter{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.feld{
  position:relative;background:var(--weiss);border:2px solid var(--creme-2);
  border-radius:var(--rund-gross);padding:1.6rem 1.4rem;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.feld:hover{transform:translateY(-4px);border-color:var(--sonne)}
.feld__zeichen{
  width:56px;height:56px;display:grid;place-items:center;margin-bottom:.9rem;
  background:var(--rot);color:#fff;border-radius:16px;font-size:1.6rem;
  box-shadow:0 5px 0 -1px var(--rot-tief);
}
.feld h3{font-family:var(--anzeige);font-size:1.15rem;margin:0 0 .4rem}
.feld p{margin:0;color:var(--tinte-2);font-size:.95rem}

/* ---- Zackenschild, direkt aus dem Logo ---- */
.zacke{
  display:inline-block;padding:.5rem 1.1rem;
  background:var(--sonne);color:var(--tinte);
  font-family:var(--anzeige);font-weight:700;font-size:.9rem;
  clip-path:polygon(6% 0,94% 0,100% 25%,96% 50%,100% 75%,94% 100%,6% 100%,0 75%,4% 50%,0 25%);
}

/* ---- Filiale ---- */
.filiale{
  display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:var(--rot);color:#fff;border-radius:var(--rund-gross);
  padding:clamp(1.6rem,4vw,2.6rem);
}
.filiale h2{color:#fff}
.filiale a{color:var(--sonne)}
/* ⚠️ Ausnahme für Schaltflächen im roten Block: Die Regel darüber färbt JEDEN
   Link gold — auf dem goldenen Knopf stand „Anrufen" damit gold auf gold und
   war schlicht nicht zu lesen. Im eigenen Screenshot als leerer Knopf sichtbar
   geworden; in der Vorschau am Bildschirm fällt so etwas leicht durch. */
.filiale .knopf--gold{color:var(--tinte)}
.filiale .knopf--rot{color:#fff}
.filiale .knopf--klar{color:var(--tinte)}
.filiale dl{margin:0;display:grid;gap:.7rem}
.filiale dt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.filiale dd{margin:0;font-weight:600}
.hinweis{
  margin-top:1rem;padding:.8rem 1rem;border-radius:var(--rund);
  background:rgba(0,0,0,.22);font-size:.9rem;
}

/* ---- Fuß ---- */
.fuss{background:var(--tinte);color:#E7D6C8;padding:2.6rem 0 1.6rem;font-size:.92rem}
.fuss a{color:var(--sonne)}
.fuss__gitter{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fuss h3{font-family:var(--anzeige);color:#fff;font-size:1rem;margin:0 0 .6rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fuss__unten{margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;opacity:.75;font-size:.84rem}

/* ---- Rechtstext-Seiten ---- */
.recht{max-width:74ch;margin-inline:auto;padding:clamp(2rem,5vw,3.4rem) 0}
.recht h1{font-family:var(--anzeige);font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 1.4rem}
.recht h2{font-family:var(--anzeige);font-size:1.15rem;margin:2rem 0 .5rem}
.recht p{margin:0 0 .8rem}

@media (max-width:640px){
  .kopf__logo{height:40px}
  .feld{padding:1.3rem 1.1rem}
}

/* ---- Fliegender Kontaktknopf ----
   Gleiche Mechanik wie bei der Schwesterfiliale: klein im Ruhezustand,
   klappt beim Zeigen auf. Ruhiger Puls statt Blinken. */
.wa{
  position:fixed;z-index:95;
  right:max(1.1rem,env(safe-area-inset-right));
  bottom:max(1.1rem,env(safe-area-inset-bottom));
  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}
.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}
@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}}

/* ==========================================================================
   Leben: Einfahren, Geschenkboxen, Laufbänder
   Die Startklasse `ist-zu` setzt erst das Skript. Ohne JavaScript ist alles
   sichtbar — ein Effekt darf nie Inhalte verstecken.
   ========================================================================== */
[data-auf]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-auf].ist-zu{opacity:0;transform:translateY(28px)}

.gitter--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* ---- Geschenkbox ---- */
.box{
  position:relative;background:var(--weiss);border:2px solid var(--creme-2);
  border-radius:var(--rund-gross);padding:1.5rem 1.4rem 1.6rem;text-align:center;
  cursor:pointer;outline-offset:4px;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.box:hover,.box:focus-visible,.box.ist-offen{
  transform:translateY(-6px);border-color:var(--sonne);
  box-shadow:0 20px 44px -20px rgba(169,18,13,.45);
}
.box h3{font-family:var(--anzeige);font-size:1.18rem;margin:1rem 0 .4rem}
.box p{margin:0;color:var(--tinte-2);font-size:.95rem}

/* Der Karton: Körper, Deckel, Band und Schleife als reine Formen — kein Bild,
   damit es in jeder Größe scharf bleibt und nichts nachgeladen wird. */
.box__koerper{position:relative;width:120px;height:104px;margin:0 auto}
.box__koerper::after{                       /* Kartonkörper */
  content:"";position:absolute;left:6px;right:6px;bottom:0;height:70px;
  background:linear-gradient(160deg,var(--rot) 0%,var(--rot-tief) 100%);
  border-radius:8px;box-shadow:inset 0 -8px 14px -8px rgba(0,0,0,.5);
}
.box__band{                                  /* senkrechtes Geschenkband */
  position:absolute;left:50%;bottom:0;width:20px;height:70px;margin-left:-10px;z-index:2;
  background:linear-gradient(var(--sonne),#E0A800);
}
.box__deckel{
  position:absolute;left:0;right:0;top:22px;height:26px;z-index:3;
  background:linear-gradient(160deg,#F5352C 0%,var(--rot) 100%);
  border-radius:6px;box-shadow:0 4px 0 -1px var(--rot-tief);
  transition:transform .45s var(--ease);
}
.box__schleife{
  position:absolute;left:50%;top:2px;width:54px;height:30px;margin-left:-27px;z-index:4;
  transition:transform .45s var(--ease);
}
/* Zwei Schlaufen aus Kreisen — zusammen ergibt das die Masche. */
.box__schleife::before,.box__schleife::after{
  content:"";position:absolute;top:0;width:26px;height:26px;border-radius:50% 50% 50% 10%;
  background:linear-gradient(var(--sonne),#E0A800);
}
.box__schleife::before{left:0;transform:rotate(-18deg)}
.box__schleife::after{right:0;transform:rotate(18deg) scaleX(-1)}

/* Öffnen: Deckel hebt ab und kippt, Schleife fliegt mit. */
.box:hover .box__deckel,.box:focus-visible .box__deckel,.box.ist-offen .box__deckel{
  transform:translateY(-26px) rotate(-9deg)
}
.box:hover .box__schleife,.box:focus-visible .box__schleife,.box.ist-offen .box__schleife{
  transform:translateY(-32px) rotate(-9deg) scale(1.06)
}
@media (prefers-reduced-motion:reduce){
  .box__deckel,.box__schleife{transition:none}
}

/* ---- Laufbänder mit echten Artikelfotos ---- */
.lauf{display:grid;gap:1rem;overflow:hidden;padding:.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lauf__bahn{display:flex;gap:1rem;width:max-content;animation:bahn 64s linear infinite;will-change:transform}
.lauf__bahn--zurueck{animation-duration:78s;animation-direction:reverse}
@keyframes bahn{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.lauf:hover .lauf__bahn{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lauf__bahn{animation:none;overflow-x:auto}}

.lauf__k{margin:0;width:172px;flex:0 0 auto;background:var(--weiss);
  border:2px solid var(--creme-2);border-radius:18px;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.lauf__k:hover{transform:translateY(-6px) scale(1.03);border-color:var(--sonne)}
.lauf__k img{width:100%;aspect-ratio:1;object-fit:cover}
.lauf__k figcaption{padding:.55rem .6rem .7rem;font-size:.76rem;line-height:1.3;
  color:var(--tinte-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.lauf__k{width:132px}}

/* ==========================================================================
   Tagesschnapper, Angebote, Kategorien, drei Schritte
   --------------------------------------------------------------------------
   Der Tagesschnapper ist das Versprechen der Seite: ein Artikel am Tag für
   0,00 €. Er bekommt deshalb die lauteste Fläche — Gold auf Rot, ein Knopf.

   Wichtig: Der Block hat einen RUHEZUSTAND, der ohne JavaScript und ohne
   laufende Aktion vollständig funktioniert. Er behauptet dann nichts über
   Verfügbarkeit, sondern führt auf die Aktionsseite. Eine Zahl wie „noch 2
   Stück" darf nur der Server sagen, und die steht nie in dieser Datei.
   ========================================================================== */
.schnapper{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--rot),var(--rot-dunkel));
  border:3px solid var(--sonne);border-radius:var(--rund-gross);
  color:#fff;padding:clamp(1.4rem,4vw,2.4rem);
  display:grid;gap:clamp(1.2rem,3vw,2.2rem);grid-template-columns:minmax(0,1fr);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
}
@media (min-width:820px){ .schnapper{grid-template-columns:320px minmax(0,1fr);align-items:center} }
/* Sunburst-Anklang aus dem Logo — leise, nur als Untergrund. */
.schnapper::before{
  content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,198,26,.32),transparent 62%);
  pointer-events:none;
}
.schnapper__bild{
  position:relative;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--rund);border:3px solid var(--sonne);background:#fff;
}
/* Ruhezustand ohne Aktion: bewusst FLACH statt quadratisch. Als Quadrat stand
   dort eine große leere Fläche mit einem kleinen Zeichen darin — das sieht
   nach fehlendem Bild aus, obwohl gerade nur keine Aktion läuft. */
.schnapper__leer{
  position:relative;display:grid;place-items:center;min-height:120px;border-radius:var(--rund);
  border:3px dashed rgba(255,255,255,.35);font-size:2.6rem;
}
.schnapper__inhalt{position:relative;min-width:0}
.schnapper__marke{
  display:inline-block;background:var(--sonne);color:var(--tinte);
  font-family:var(--anzeige);font-weight:800;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.34rem .9rem;border-radius:999px;
}
.schnapper h2{font-family:var(--anzeige);font-size:clamp(1.5rem,4.4vw,2.4rem);line-height:1.1;margin:.7rem 0 .5rem;color:#fff}
.schnapper p{margin:0 0 1rem;color:#FFE9CF;font-size:clamp(1rem,2.4vw,1.1rem)}
/* [hidden] muss staerker sein als jede display-Regel — sonst zeigt der Ruhezustand
   einen Preis fuer eine Aktion, die es gar nicht gibt. */
[hidden]{display:none !important}
.schnapper__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.schnapper__null{font-family:var(--anzeige);font-size:clamp(2rem,7vw,3.2rem);font-weight:800;color:var(--sonne);line-height:1}
.schnapper__statt{color:#FFD9BD;text-decoration:line-through;font-size:1.05rem}
/* Zustand trägt IMMER Zeichen und Text — nie nur Farbe. */
.schnapper__stand{
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.5rem 1rem;font-weight:700;margin-bottom:1.1rem;
}
.schnapper__stand--frei{background:#0F5132;border-color:#22C55E}
.schnapper__stand--weg{background:rgba(0,0,0,.42)}
.schnapper .knopf{min-height:52px}

/* ---- Drei Schritte ---- */
.schritte{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s}
.schritt{
  background:var(--weiss);border:2px solid var(--creme-2);border-radius:var(--rund-gross);
  padding:1.5rem 1.3rem;position:relative;
}
.schritt__nr{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--rot);color:#fff;font-family:var(--anzeige);font-weight:800;font-size:1.3rem;
  box-shadow:0 5px 0 -1px var(--rot-tief);margin-bottom:.9rem;
}
.schritt h3{font-family:var(--anzeige);font-size:1.15rem;margin:0 0 .45rem}
.schritt p{margin:0;color:var(--tinte-2);font-size:.97rem}

/* ---- Kategorien: echte Bereiche mit echter Artikelzahl ---- */
.kats{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.kat{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--weiss);border:2px solid var(--creme-2);border-radius:999px;
  padding:.6rem 1.1rem;font-weight:700;transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.kat:hover{transform:translateY(-3px);border-color:var(--sonne)}
.kat__zahl{background:var(--rot);color:#fff;border-radius:999px;padding:.1rem .6rem;font-size:.82rem}

/* ---- Artikelkarten: Foto, Name, „Preis im Markt" ---- */
.waren{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ware{
  display:flex;flex-direction:column;text-decoration:none;background:var(--weiss);
  border:2px solid var(--creme-2);border-radius:var(--rund-gross);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ware:hover{transform:translateY(-5px);border-color:var(--sonne);box-shadow:0 16px 30px -22px rgba(42,16,6,.7)}
.ware img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--creme)}
.ware__text{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.ware__name{font-weight:700;font-size:.98rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ware__kat{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2)}
/* Kein Preis in der Quelle = kein Preis auf der Seite. „0,00 €" wäre gelogen. */
.ware__preis{margin-top:auto;font-family:var(--anzeige);font-weight:800;color:var(--rot)}

/* ==========================================================================
   Unterseiten: Kopfnavigation, kleine Bühne, Fragen & Antworten
   ========================================================================== */
.kopf__nav{display:flex;flex-wrap:wrap;gap:.2rem;margin-left:auto;margin-right:.6rem}
.kopf__nav a{
  text-decoration:none;font-weight:700;font-size:.92rem;padding:.45rem .7rem;border-radius:999px;
  color:var(--tinte-2);transition:background .2s var(--ease),color .2s var(--ease);
}
.kopf__nav a:hover{background:var(--creme-2);color:var(--tinte)}
.kopf__nav a[aria-current="page"]{background:var(--rot);color:#fff}
/* Am Handy zählt jeder Millimeter über der Falz: Vorher brauchten Logo,
   Telefonknopf und Menü zusammen den halben ersten Bildschirm — die Aussage
   der Seite begann erst darunter. Alles bleibt bedienbar (Knöpfe ≥ 44 px),
   nur eben kompakt. */
@media (max-width:760px){
  .kopf__innen{flex-wrap:wrap;padding:.4rem 0}
  .kopf__logo{height:40px}
  .kopf__tel{padding:.5rem .85rem;font-size:.86rem;box-shadow:0 4px 0 -2px var(--rot-tief)}
  .kopf__nav{order:3;width:100%;margin:.15rem 0 0;justify-content:center;gap:.1rem;flex-wrap:nowrap}
  .kopf__nav a{font-size:.8rem;padding:.4rem .55rem}
  /* Der schwebende Knopf lag genau auf dem „Route"-Knopf der Bühne. */
  .wa{width:52px;height:52px;right:12px;bottom:12px}
  .wa__zeichen{width:24px;height:24px}
  .buehne .reihe{padding-bottom:3.2rem}
}

/* Kleine Bühne für Unterseiten — dieselbe Handschrift, halbe Lautstärke. */
.mini{
  background:linear-gradient(180deg,var(--creme-2),var(--creme));
  padding:clamp(2rem,5vw,3.2rem) 0 clamp(1.6rem,4vw,2.4rem);text-align:center;
  border-bottom:3px solid var(--rot);
}
.mini h1{font-family:var(--anzeige);font-size:clamp(1.7rem,5vw,2.7rem);line-height:1.1;margin:.6rem 0 .5rem}
.mini p{max-width:56ch;margin:0 auto;color:var(--tinte-2)}

/* Fragen & Antworten: aufklappbar, ohne JavaScript. */
.faq{display:grid;gap:.7rem;max-width:52rem;margin-inline:auto}
.faq details{
  background:var(--weiss);border:2px solid var(--creme-2);border-radius:var(--rund);
  padding:.2rem .3rem;transition:border-color .25s var(--ease);
}
.faq details[open]{border-color:var(--sonne)}
.faq summary{
  cursor:pointer;list-style:none;padding:.95rem 1.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--anzeige);font-size:1.4rem;color:var(--rot);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 1.1rem 1.1rem;color:var(--tinte-2)}
.faq a{color:var(--rot);font-weight:600}

/* Karte für Kontaktangaben auf der Marktseite. */
.kontakt{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kontakt__karte{background:var(--weiss);border:2px solid var(--creme-2);border-radius:var(--rund-gross);padding:1.4rem}
.kontakt__karte h3{font-family:var(--anzeige);font-size:1.05rem;margin:0 0 .5rem}
.kontakt__karte p{margin:0;color:var(--tinte-2)}
.kontakt__karte a{font-weight:700;color:var(--rot)}

/* ==========================================================================
   Das Kino — der Opener als Scroll-Verwandlung
   --------------------------------------------------------------------------
   Zwei Zustaende derselben Szene: Karton zu (Ebene A) → Karton explodiert
   (Ebene B). Ohne JavaScript ist .kino ein stehendes Bild mit Logo, Satz und
   Knoepfen — vollstaendig benutzbar. Erst kino.js setzt html.hat-kino und
   macht daraus die 320vh-Scroll-Strecke. Inhalt haengt NIE an der Animation.
   ========================================================================== */
.kino{position:relative}
.kino__sticky{position:relative;min-height:92vh;overflow:hidden;background:var(--rot-dunkel)}
.kino__ebene{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform,opacity}
/* Die beiden Zustaende der Verwandlung. Am Handy die kleinen Fassungen —
   der Unterschied sind 270 KB gegen 66 KB. */
.kino__ebene--zu{background-image:url(../img/kino/karton-zu.webp)}
.kino__ebene--auf{background-image:url(../img/kino/karton-auf.webp)}
@media (max-width:760px){
  .kino__ebene--zu{background-image:url(../img/kino/karton-zu-m.webp)}
  .kino__ebene--auf{background-image:url(../img/kino/karton-auf-m.webp)}
  /* Das 16:9-Bild im Hochformat: ohne diese Zeile ist der Karton unten
     angeschnitten und die Schleife fuellt den halben Bildschirm. */
  .kino__ebene{background-position:50% 72%}
  .kino__wort{white-space:normal;line-height:1;top:40%}
}
/* Stehende Fassung: das offene Paket traegt die Botschaft, A liegt darunter. */
.kino__ebene--zu{opacity:1}
.kino__ebene--auf{opacity:1}
.kino__dunst{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 62%,transparent 30%,rgba(60,6,2,.55) 100%),
  linear-gradient(180deg,rgba(60,6,2,.35),transparent 30%,transparent 70%,rgba(60,6,2,.6))}
.kino__wort{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:var(--anzeige);font-weight:800;letter-spacing:.02em;text-align:center;
  font-size:clamp(2.6rem,9vw,7.5rem);line-height:.95;color:#fff;white-space:nowrap;
  text-shadow:0 4px 40px rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.kino__wort--gold{color:var(--sonne)}
.kino__ende{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.5rem;
  transition:opacity .5s var(--ease);
}
/* Weiche Abdunklung hinter Logo, Satz und Knoepfen — das Schlussbild liegt
   sonst genau auf dem hellsten Punkt der Explosion und der Satz ersaeuft. */
.kino__ende-innen{
  max-width:860px;padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,4vw,3.4rem);
  background:radial-gradient(closest-side,rgba(50,5,2,.72) 40%,rgba(50,5,2,.38) 72%,transparent 100%);
  border-radius:50%;
}
.kino__logo{width:min(430px,72vw);height:auto;margin:0 auto 1.2rem;filter:drop-shadow(0 18px 50px rgba(0,0,0,.45))}
.kino__satz{color:#FFE9CF;font-size:clamp(1.02rem,2.4vw,1.25rem);max-width:54ch;margin:0 auto 1.6rem;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.kino__wink{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  color:#FFE9CF;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  transition:opacity .4s var(--ease);animation:winken 2.2s ease-in-out infinite;
}
@keyframes winken{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* Rotierender Sunburst hinter dem Logo im Schlussbild — Anklang ans Logo. */
.kino__sonne{
  position:absolute;left:50%;top:50%;width:130vmax;height:130vmax;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.16;
  background:conic-gradient(from 0deg,
    transparent 0deg 14deg, rgba(255,198,26,.9) 14deg 20deg,
    transparent 20deg 34deg, rgba(255,198,26,.9) 34deg 40deg,
    transparent 40deg 54deg, rgba(255,198,26,.9) 54deg 60deg,
    transparent 60deg 74deg, rgba(255,198,26,.9) 74deg 80deg,
    transparent 80deg 94deg, rgba(255,198,26,.9) 94deg 100deg,
    transparent 100deg 114deg, rgba(255,198,26,.9) 114deg 120deg,
    transparent 120deg 134deg, rgba(255,198,26,.9) 134deg 140deg,
    transparent 140deg 154deg, rgba(255,198,26,.9) 154deg 160deg,
    transparent 160deg 174deg, rgba(255,198,26,.9) 174deg 180deg,
    transparent 180deg 194deg, rgba(255,198,26,.9) 194deg 200deg,
    transparent 200deg 214deg, rgba(255,198,26,.9) 214deg 220deg,
    transparent 220deg 234deg, rgba(255,198,26,.9) 234deg 240deg,
    transparent 240deg 254deg, rgba(255,198,26,.9) 254deg 260deg,
    transparent 260deg 274deg, rgba(255,198,26,.9) 274deg 280deg,
    transparent 280deg 294deg, rgba(255,198,26,.9) 294deg 300deg,
    transparent 300deg 314deg, rgba(255,198,26,.9) 314deg 320deg,
    transparent 320deg 334deg, rgba(255,198,26,.9) 334deg 340deg,
    transparent 340deg 354deg, rgba(255,198,26,.9) 354deg 360deg);
  animation:sonneDrehen 46s linear infinite;
}
@keyframes sonneDrehen{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Mit JS: Die Strecke wird lang, das Bild klebt, die Worte erzaehlen. */
.hat-kino .kino{height:340vh}
.hat-kino .kino__sticky{position:sticky;top:0;height:100vh;min-height:0}
.hat-kino .kino__ebene--auf{opacity:0}
.hat-kino .kino__ende{opacity:0;pointer-events:none}

/* Ohne JS (oder wenn kino.js abbricht): Worte sind reine Deko und bleiben
   weg — ihre Aussage steht wortgleich im immer sichtbaren Schlussblock. */
html:not(.hat-kino) .kino__wort{display:none}
html:not(.hat-kino) .kino__wink{display:none}
html:not(.hat-kino) .kino__sonne{opacity:.1}

@media (prefers-reduced-motion:reduce){
  .kino__sonne,.kino__wink{animation:none}
}

/* ---- Mehr Leben in den Bausteinen ---- */
/* Pulsierender Haupt-Knopf: eine goldene Druckwelle alle 2,6 s. */
.knopf--puls{position:relative}
.knopf--puls::after{
  content:"";position:absolute;inset:-3px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,198,26,.65);animation:pulsen 2.6s ease-out infinite;
}
@keyframes pulsen{0%{box-shadow:0 0 0 0 rgba(255,198,26,.65)}70%{box-shadow:0 0 0 22px rgba(255,198,26,0)}100%{box-shadow:0 0 0 0 rgba(255,198,26,0)}}

/* Karten kippen dem Zeiger entgegen — nur am Rechner, nur mit Maus. */
@media (hover:hover) and (pointer:fine){
  .ware{transform-style:preserve-3d}
  .ware:hover{transform:translateY(-6px) rotateX(2.5deg) rotateY(-2.5deg) scale(1.02)}
  .kat:hover{transform:translateY(-3px) rotate(-1.2deg)}
}

/* Der Schnapper-Karton schwebt — und die Karte glitzert am Rand. */
.schnapper{animation:schnapperGlanz 5.5s ease-in-out infinite}
@keyframes schnapperGlanz{
  0%,100%{box-shadow:0 18px 40px -22px rgba(0,0,0,.7),0 0 0 0 rgba(255,198,26,.0)}
  50%{box-shadow:0 24px 54px -20px rgba(0,0,0,.8),0 0 34px -6px rgba(255,198,26,.45)}
}
.schnapper__leer,.schnapper__bild{animation:schweben 4.6s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Die Schritte bekommen eine goldene Verbindungslinie. */
@media (min-width:820px){
  .schritte{position:relative}
  .schritte::before{
    content:"";position:absolute;left:8%;right:8%;top:46px;height:3px;
    background:repeating-linear-gradient(90deg,var(--sonne) 0 14px,transparent 14px 26px);
    opacity:.5;
  }
  .schritt{position:relative;z-index:1}
}

@media (prefers-reduced-motion:reduce){
  .knopf--puls::after,.schnapper,.schnapper__leer,.schnapper__bild{animation:none}
  .ware:hover,.kat:hover{transform:none}
}

/* ---- Video im Schnapper-Block + Konfetti ---- */
.schnapper__bild--video{aspect-ratio:16/10;object-fit:cover;background:var(--rot-dunkel)}
@media (min-width:820px){.schnapper__bild--video{aspect-ratio:1}}

/* Sieben Goldflocken rieseln durch die Karte — reine Deko, reines CSS.
   Bei reduzierter Bewegung: keine einzige. */
.konfetti{
  position:absolute;top:-14px;width:10px;height:16px;border-radius:2px;
  background:linear-gradient(var(--sonne),#E0A800);opacity:.85;pointer-events:none;
  animation:rieseln 6.5s linear infinite;
}
.konfetti:nth-child(1){left:8%;animation-delay:0s;transform:rotate(15deg)}
.konfetti:nth-child(2){left:22%;animation-delay:1.4s;width:7px;height:12px}
.konfetti:nth-child(3){left:38%;animation-delay:3.1s;background:linear-gradient(#fff,var(--gold))}
.konfetti:nth-child(4){left:55%;animation-delay:.8s}
.konfetti:nth-child(5){left:70%;animation-delay:2.3s;width:8px;height:13px}
.konfetti:nth-child(6){left:84%;animation-delay:4.2s}
.konfetti:nth-child(7){left:93%;animation-delay:5.4s;background:linear-gradient(#fff,var(--gold))}
@keyframes rieseln{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:.85}
  100%{transform:translateY(460px) rotate(320deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.konfetti{display:none}}