@font-face{font-family:"Anton";src:url("../schrift/anton.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --tinte:#222222;
  --tinte-2:#2c2c2c;
  --tinte-3:#383838;
  --papier:#ffffff;
  --sand:#f3f3f3;
  --sand-2:#e9e9e9;
  --limette:#AADE31;
  --limette-hell:#C4F73A;
  --gruen:#4B6F0E;
  --gruen-tief:#3F5E0B;
  --beere:#b8123f;
  --beere-hell:#e0356a;
  --text:#262626;
  --text-leise:#5a5a5a;
  --text-invers:#f5f5f5;
  --text-invers-leise:#c4c4c4;
  --linie:rgba(34,34,34,.12);
  --linie-invers:rgba(255,255,255,.14);
  --radius:18px;
  --radius-s:10px;
  --schatten:0 18px 50px -18px rgba(34,34,34,.35);
  --schatten-weich:0 8px 30px -12px rgba(34,34,34,.25);
  --breite:1240px;
  --breite-text:70ch;
  --kopf:74px;
  --display:"Anton","Arial Narrow Bold","Arial Black",Impact,sans-serif;
  --serif:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--serif);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--limette);color:var(--tinte)}
:focus-visible{outline:3px solid var(--limette);outline-offset:3px;border-radius:4px}

.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.springlink{position:fixed;top:8px;left:8px;z-index:200;background:var(--limette);color:var(--tinte);padding:.6em 1em;border-radius:999px;transform:translateY(-160%);transition:transform .2s;font-weight:700;text-decoration:none}
.springlink:focus{transform:none}

.hf{width:min(100% - 2.4rem,var(--breite));margin-inline:auto}
.hf-schmal{width:min(100% - 2.4rem,900px);margin-inline:auto}
@media (max-width:600px){.hf,.hf-schmal{width:calc(100% - 1.6rem)}}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--kopf);display:flex;align-items:center;
  background:rgba(34,34,34,.28);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:background .35s,box-shadow .35s,height .35s}
.kopf.fest{background:rgba(34,34,34,.94);box-shadow:0 10px 34px -20px #000}
.kopf-innen{display:flex;align-items:center;gap:1.4rem;width:min(100% - 2.4rem,var(--breite));margin-inline:auto}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text-invers);flex:0 0 auto}
.marke img{height:52px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@media (max-width:600px){.marke img{height:40px}}
.marke-text{display:flex;flex-direction:column;line-height:1}
.marke-text b{font-family:var(--display);font-size:1.12rem;letter-spacing:.04em;text-transform:uppercase}
.marke-text span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--limette);margin-top:.28em}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{position:relative;text-decoration:none;color:var(--text-invers);padding:.55rem .78rem;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;border-radius:8px;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.32rem;height:2px;background:var(--limette);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--limette)}
.kopf-tel{display:inline-flex;align-items:center;gap:.5rem;background:var(--limette);color:var(--tinte);text-decoration:none;
  padding:.62rem 1.05rem;border-radius:999px;font-weight:800;font-size:.84rem;letter-spacing:.02em;white-space:nowrap;
  flex:0 0 auto;transition:transform .2s,background .2s}
.kopf-tel:hover{transform:translateY(-2px);background:var(--limette-hell)}
.kopf-tel svg{width:15px;height:15px;fill:currentColor}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--linie-invers);background:rgba(255,255,255,.06);border-radius:12px;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text-invers);transition:.28s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
@media (max-width:1080px){
  .nav,.kopf-tel{display:none}
  .burger{display:block}
}
.mobilmenue{position:fixed;inset:0;z-index:99;background:var(--tinte);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--kopf) + 2rem) 1.6rem 2rem;transform:translateY(-102%);transition:transform .45s cubic-bezier(.7,0,.2,1);overflow-y:auto}
.mobilmenue.offen{transform:none}
.mobilmenue a{display:block;text-decoration:none;color:var(--text-invers);font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.7rem,7vw,2.6rem);padding:.28em 0;border-bottom:1px solid var(--linie-invers)}
.mobilmenue a:last-of-type{border-bottom:0}
.mobilmenue .mm-tel{margin-top:1.6rem;font-family:var(--serif);font-size:1rem;color:var(--limette);letter-spacing:.05em}

/* ---------- Buttons ---------- */
.knopf{display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;text-decoration:none;
  padding:.95rem 1.5rem;border-radius:999px;font-weight:800;font-size:.92rem;letter-spacing:.02em;
  background:var(--limette);color:var(--tinte);transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.knopf:hover{transform:translateY(-3px);background:var(--limette-hell);box-shadow:0 16px 30px -16px rgba(0,0,0,.55)}
.knopf svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.knopf-geist{background:transparent;color:var(--text-invers);border:1.5px solid var(--linie-invers);box-shadow:none}
.knopf-geist:hover{background:rgba(255,255,255,.1);border-color:var(--limette)}
.knopf-dunkel{background:var(--tinte);color:var(--text-invers)}
.knopf-dunkel:hover{background:var(--tinte-3)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:flex-end;overflow:hidden;background:var(--tinte);isolation:isolate}
.hero-medium{position:absolute;inset:0;z-index:-2}
.hero-medium img,.hero-medium video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(34,34,34,.85) 0%,rgba(34,34,34,.45) 45%,rgba(34,34,34,.15) 75%),
             linear-gradient(180deg,rgba(34,34,34,.62) 0%,rgba(34,34,34,.30) 38%,rgba(34,34,34,.88) 100%)}
.hero-innen{width:min(100% - 2.4rem,var(--breite));margin:0 auto;padding:clamp(6rem,14vh,10rem) 0 clamp(3rem,7vh,5rem);color:var(--text-invers)}
.hero-kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--limette);font-weight:700;margin-bottom:1.4rem}
.hero-kicker::before{content:"";width:34px;height:2px;background:var(--limette)}
.hero-wortmarke{height:clamp(92px,15vw,225px);width:auto;max-width:min(88vw,760px);object-fit:contain;object-position:left center;
  margin-bottom:1.5rem;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.hero h1{max-width:16ch;text-shadow:0 10px 40px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--limette)}
.hero-text{max-width:52ch;margin-top:1.4rem;font-size:1.1rem;color:#e8e8e8}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero-jubi{position:absolute;right:clamp(1rem,4vw,3.5rem);top:calc(var(--kopf) + clamp(1rem,4vh,3rem));width:clamp(110px,15vw,190px);z-index:2;
  animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.hero-jubi{animation:none}}
.hero-scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;color:#fff;opacity:.75;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:tropf 2.2s infinite}
@keyframes tropf{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:820px){
  .hero{min-height:88svh}
  .hero-jubi{width:92px;top:auto;bottom:1.2rem;right:1rem;animation:none}
  .hero-scroll{left:1.4rem;transform:none;align-items:flex-start}
}

/* Seiten-Hero (Unterseiten) */
.kopfbild{position:relative;background:var(--tinte);color:var(--text-invers);overflow:hidden;isolation:isolate}
.kopfbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kopfbild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(34,34,34,.78) 0%,rgba(34,34,34,.35) 55%,rgba(34,34,34,.05) 100%),linear-gradient(180deg,rgba(34,34,34,.55) 0%,rgba(34,34,34,0) 35%,rgba(34,34,34,.45) 100%)}
.kopfbild h1,.kopfbild p,.krume{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.kopfbild-innen{width:min(100% - 2.4rem,var(--breite));margin-inline:auto;padding:calc(var(--kopf) + clamp(3.5rem,9vw,6.5rem)) 0 clamp(2.6rem,6vw,4.5rem)}
.kopfbild h1{font-size:clamp(2.3rem,6vw,4.4rem)}
.kopfbild p{max-width:56ch;margin-top:1rem;color:#e6e6e6;font-size:1.05rem}
.krume{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-invers-leise);margin-bottom:1.1rem}
.krume a{text-decoration:none}
.krume a:hover{color:var(--limette)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(3.6rem,8vw,7rem) 0}
.abschnitt-sand{background:var(--sand)}
.abschnitt-dunkel{background:var(--tinte);color:var(--text-invers)}
.abschnitt-dunkel .kicker{color:var(--limette)}
.abschnitt-dunkel .fuehrung{color:var(--text-invers-leise)}
.kicker{display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gruen);font-weight:800;margin-bottom:1rem}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 auto}
.fuehrung{max-width:62ch;color:var(--text-leise);font-size:1.06rem;margin-top:1.1rem}
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vw,3rem)}
.kopfzeile>div{max-width:70ch}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--linie-invers);border-radius:var(--radius);overflow:hidden}
.zahl{background:var(--tinte-2);padding:2rem 1.4rem;text-align:center}
.zahl b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);color:var(--limette);line-height:1}
.zahl span{display:block;margin-top:.5rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-invers-leise)}

/* Sortimentskacheln */
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.1vw,.9rem)}
@media (max-width:980px){.kacheln{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.kacheln{grid-template-columns:repeat(2,1fr)}}
.kachel{position:relative;display:block;text-decoration:none;color:#fff;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--tinte-2);isolation:isolate}
.kachel img,.kachel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.kachel video{z-index:0}
.kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.72));z-index:1}
.kachel:hover img,.kachel:hover video{transform:scale(1.07)}
.kachel b{position:absolute;left:1rem;right:1rem;bottom:.95rem;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.7);font-family:var(--display);text-transform:uppercase;
  font-size:1.22rem;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kachel b i{font-style:normal;font-family:var(--serif);font-size:.62rem;letter-spacing:.14em;color:var(--limette);opacity:0;transform:translateX(-6px);transition:.3s}
.kachel:hover b i{opacity:1;transform:none}
.kachel-saison{position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--limette);color:var(--tinte);font-size:.62rem;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.34em .7em;border-radius:999px}

/* Saisonkalender */
.saison-huelle{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--linie);background:var(--papier);box-shadow:var(--schatten-weich)}
.saison{width:100%;min-width:660px;border-collapse:collapse;font-size:.86rem}
.saison th{font-weight:700;padding:.75rem .3rem;text-align:center;color:var(--text-leise);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--papier)}
.saison th.s-name{text-align:left;padding-left:1.1rem;min-width:150px}
.saison td{padding:.34rem .18rem;border-bottom:1px solid var(--linie)}
.saison td.s-name{padding-left:1.1rem;font-weight:700;white-space:nowrap}
.saison td.s-name a{text-decoration:none}
.saison td.s-name a:hover{color:var(--gruen)}
.saison i{display:block;height:16px;border-radius:5px;background:#e3e3e3}
.saison i.an{background:linear-gradient(135deg,var(--limette),#8FC525)}
.saison i.top{background:linear-gradient(135deg,var(--gruen),#8FC525);box-shadow:0 3px 10px -4px var(--gruen)}
.saison .jetzt{background:rgba(170,222,49,.14)}
.saison-legende{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.1rem;font-size:.8rem;color:var(--text-leise)}
.saison-legende span{display:inline-flex;align-items:center;gap:.5rem}
.saison-legende b{width:22px;height:12px;border-radius:4px;display:inline-block}

/* Split */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split-bild{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.split-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-bild.hoch img{aspect-ratio:3/4}
.split-marke{position:absolute;left:0;bottom:0;background:var(--limette);color:var(--tinte);padding:.9rem 1.2rem;font-family:var(--display);
  text-transform:uppercase;font-size:1.1rem;border-top-right-radius:var(--radius)}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--schatten-weich);
  transition:transform .3s,box-shadow .3s}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.karte h3{margin-bottom:.6rem}
.karte p{color:var(--text-leise);font-size:.97rem}
.karte-nr{font-family:var(--display);font-size:2.4rem;color:var(--limette);line-height:1;margin-bottom:.5rem}
.abschnitt-dunkel .karte{background:var(--tinte-2);border-color:var(--linie-invers)}
.abschnitt-dunkel .karte p{color:var(--text-invers-leise)}
.ikon{width:44px;height:44px;border-radius:12px;background:rgba(170,222,49,.18);display:grid;place-items:center;margin-bottom:1rem}
.ikon svg{width:22px;height:22px;stroke:var(--gruen);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.abschnitt-dunkel .ikon svg{stroke:var(--limette)}

/* Zitat */
.zitat{position:relative;text-align:center;max-width:24ch;margin-inline:auto;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.02}
.zitat span{color:var(--limette)}
.zitat-quelle{display:block;margin-top:1.6rem;font-family:var(--serif);text-transform:none;font-size:.85rem;letter-spacing:.16em;color:var(--text-invers-leise)}

/* Produktabschnitt */
.ware{position:relative;padding:clamp(3rem,7vw,5.5rem) 0;border-bottom:1px solid var(--linie)}
.ware:nth-child(even){background:var(--sand)}
.ware-gitter{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media (max-width:860px){.ware-gitter{grid-template-columns:1fr}}
.ware-bild{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.ware-bild img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ware-bild video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ware-zwischen{font-family:var(--serif);text-transform:none;font-size:1.1rem;font-weight:800;margin:1.4rem 0 .5rem;color:var(--text)}
.ware p strong{color:var(--gruen)}
.ware-kopf{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.ware-nr{font-family:var(--display);font-size:1rem;color:var(--limette);letter-spacing:.1em}
.ware p{color:var(--text-leise)}
.ware-fakten{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0}
.merkmal{display:inline-flex;align-items:center;gap:.45rem;background:var(--papier);border:1px solid var(--linie);border-radius:999px;
  padding:.42em .9em;font-size:.8rem;font-weight:600;color:var(--text)}
.ware:nth-child(even) .merkmal{background:#fff}
.merkmal svg{width:13px;height:13px;stroke:var(--gruen);fill:none;stroke-width:2}

.ware-gitter>*,.split>*,.karten>*,.zahlen>*,.videos>*,.kacheln>*{min-width:0}

/* Galerie */
.galerie{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.6rem;margin-top:1.4rem;scrollbar-width:thin}
.galerie img{scroll-snap-align:start;border-radius:var(--radius-s);aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;width:100%;
  transition:transform .35s,filter .35s}
.galerie img:hover{transform:scale(1.03);filter:brightness(1.06)}

/* Lightbox */
.lupe{position:fixed;inset:0;z-index:150;background:rgba(6,10,8,.94);display:none;place-items:center;padding:1.4rem}
.lupe.offen{display:grid}
.lupe img{max-width:min(1200px,94vw);max-height:86vh;border-radius:var(--radius-s);box-shadow:0 30px 80px -30px #000}
.lupe button{position:absolute;background:rgba(255,255,255,.1);border:1px solid var(--linie-invers);color:#fff;width:48px;height:48px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.4rem;line-height:1}
.lupe button:hover{background:var(--limette);color:var(--tinte);border-color:transparent}
.lupe .zu{top:1.2rem;right:1.2rem}
.lupe .vor{right:1.2rem;top:50%;transform:translateY(-50%)}
.lupe .zurueck{left:1.2rem;top:50%;transform:translateY(-50%)}

/* Video-Gitter */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.vkachel{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--tinte-2);border:1px solid var(--linie-invers);cursor:pointer}
.vkachel img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s}
.vkachel:hover img{transform:scale(1.05)}
.vkachel figcaption{padding:.9rem 1rem 1.1rem;font-size:.9rem;font-weight:600;color:var(--text-invers)}
.vkachel .play{position:absolute;top:calc(28% );left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:rgba(170,222,49,.92);display:grid;place-items:center;transition:transform .3s}
.vkachel:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.vkachel .play svg{width:20px;height:20px;fill:var(--tinte);margin-left:3px}
.vhinweis{font-size:.78rem;color:var(--text-invers-leise);margin-top:1rem}

/* Formular */
.formular{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.formular label{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.formular .weit{grid-column:1/-1}
.formular input,.formular textarea,.formular select{font:inherit;color:var(--text);padding:.85rem 1rem;border:1px solid var(--linie);
  border-radius:var(--radius-s);background:#fff;transition:border-color .2s,box-shadow .2s}
.formular textarea{min-height:150px;resize:vertical}
.formular input:focus,.formular textarea:focus,.formular select:focus{outline:0;border-color:var(--limette);box-shadow:0 0 0 3px rgba(170,222,49,.28)}
.formular .zeile-check{grid-column:1/-1;display:flex;flex-direction:row;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--text-leise);text-transform:none;letter-spacing:0;font-weight:400}
.formular .zeile-check input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto}
@media (max-width:640px){.formular{grid-template-columns:1fr}}
.formhinweis{font-size:.82rem;color:var(--text-leise);margin-top:1rem}

/* Kontaktliste */
.kontaktliste{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.kontaktliste li{display:flex;gap:.9rem;align-items:flex-start}
.kontaktliste svg{width:19px;height:19px;stroke:var(--limette);fill:none;stroke-width:1.8;flex:0 0 auto;margin-top:.22rem}
.kontaktliste a{text-decoration:none}
.kontaktliste a:hover{color:var(--limette)}

/* Öffnungszeiten */
.zeiten{width:100%;border-collapse:collapse;font-size:.95rem}
.zeiten td{padding:.62rem .2rem;border-bottom:1px solid var(--linie)}
.zeiten tr:last-child td{border-bottom:0}
.zeiten td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.zeiten tr.heute td{color:var(--gruen);font-weight:800}
.abschnitt-dunkel .zeiten td{border-color:var(--linie-invers)}
.abschnitt-dunkel .zeiten tr.heute td{color:var(--limette)}
.status{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.42em .95em;border-radius:999px;background:rgba(75,111,14,.12);color:var(--gruen)}
.status.zu{background:rgba(184,18,63,.1);color:var(--beere)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(75,111,14,.5)}70%{box-shadow:0 0 0 9px rgba(75,111,14,0)}100%{box-shadow:0 0 0 0 rgba(75,111,14,0)}}

/* Zeitstrahl */
.strahl{position:relative;margin:0;padding:0 0 0 2.2rem;list-style:none}
.strahl::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(var(--limette),rgba(170,222,49,.15))}
.strahl li{position:relative;padding:0 0 2rem}
.strahl li::before{content:"";position:absolute;left:-2.2rem;top:.45rem;width:16px;height:16px;border-radius:50%;background:var(--limette);
  box-shadow:0 0 0 5px rgba(170,222,49,.18)}
.strahl b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--limette);letter-spacing:.04em}
.strahl p{color:var(--text-invers-leise);margin-top:.3rem}

/* CTA-Band */
.band{background:linear-gradient(120deg,var(--gruen-tief) 0%,#73A915 45%,#8FC525 78%,#AADE31 100%);color:#fff;border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.4rem);display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:var(--schatten);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.09)}
.band h2{position:relative;z-index:1;max-width:18ch}
.band p{position:relative;z-index:1;margin-top:.7rem;max-width:44ch;color:rgba(255,255,255,.9)}
.band-knoepfe{display:flex;gap:.8rem;flex-wrap:wrap;position:relative;z-index:1}

/* Fuß – wie auf der alten Seite (Carsten, 15.10.2026: „nicht zentriert … sieht richtig schlecht aus“, Vorbild die
   Original-Fußzeile): Anthrazit mit feinen Querstreifen, drei mittige Spalten mit dünnen weißen Trennlinien,
   Frischezentrum-Logo auf grüner Kachel, grüner Bogen unten, darunter die Zeile mit dem Gestalter. HTML: neu3-fusszeile.html */
.fuss{position:relative;overflow:hidden;text-align:center;color:#fff;padding:clamp(2.6rem,5vw,4rem) 0 0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 2px,rgba(255,255,255,0) 2px 5px),
    radial-gradient(ellipse 85% 130% at 50% 0%,#414141 0%,#2c2c2c 50%,#222222 85%)}
.fuss-innen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100% - 2 * var(--rand),1180px);margin-inline:auto}
.fuss-spalte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:.3rem clamp(1rem,3vw,2.6rem)}
.fuss-spalte+.fuss-spalte{border-left:1px solid rgba(255,255,255,.55)}
.fuss a{color:#fff;text-decoration:none;transition:color .2s}
.fuss a:hover{color:var(--limette)}
.fuss-verweise{font-size:1rem;gap:1.15rem}
.fuss-verweise a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.fuss-verweise a:hover{text-decoration-color:var(--limette)}
.fuss-sozial{display:flex;justify-content:center;gap:.6rem}
.fuss-sozial a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;transition:.25s}
.fuss-sozial a:hover{background:var(--limette);border-color:var(--limette);color:#222;transform:translateY(-2px)}
.fuss-sozial svg{width:18px;height:18px;fill:currentColor}
.fuss-logo{width:min(250px,100%);height:auto}
.fuss-fz-name{font-size:.95rem;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.fuss-fz{display:grid;place-items:center;width:150px;height:92px;border-radius:12px;
  background:linear-gradient(145deg,#C4F73A 0%,#AADE31 55%,#8FC525 100%);
  box-shadow:0 16px 30px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.55);
  transform:perspective(520px) rotateY(-16deg) rotateZ(-2deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fuss-fz:hover{transform:perspective(520px) rotateY(0) scale(1.05)}
.fuss-fz img{width:120px;height:auto}
.fuss-kontakt{font-size:.95rem;line-height:1.6}
.fuss-kontakt p{margin:0;color:#ececec}
.fuss-zeiten b{display:block;margin-bottom:.15rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--limette)}
.fuss .ki-satz{width:min(100% - 2 * var(--rand),1180px);margin:clamp(1.8rem,3vw,2.4rem) auto 0;font-size:.8rem;color:#bdbdbd}
/* grüner Bogen wie im Original: grün steigt an den Rändern auf, in der Mitte nur ein schmaler Streifen */
.fuss-innen,.fuss .ki-satz{position:relative;z-index:1}
.fuss-bogen{position:relative;z-index:0;height:clamp(80px,11vw,190px);margin-top:calc(-1 * clamp(30px,5vw,90px));pointer-events:none;
  background:linear-gradient(90deg,#73A915 0%,#AADE31 25%,#C4F73A 50%,#AADE31 75%,#73A915 100%);
  -webkit-mask:radial-gradient(ellipse 54% 100% at 50% 0%,transparent 99.3%,#000 100%);
  mask:radial-gradient(ellipse 54% 100% at 50% 0%,transparent 99.3%,#000 100%)}
.fuss-unten{background:#222222;padding:.95rem var(--rand) 1.1rem;font-size:.8rem;color:#bdbdbd}
@media (max-width:760px){
  .fuss-innen{grid-template-columns:1fr;gap:1.8rem}
  .fuss-spalte+.fuss-spalte{border-left:0}
  .fuss-mitte{order:-1}
  .fuss-verweise{flex-direction:row;flex-wrap:wrap;gap:.6rem 1.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.3)}
  .fuss-kontakt{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.3);order:0}
  .fuss-verweise{order:1}
  .fuss-unten{padding-inline:4.4rem}
}

/* Karte */
.kartenbox{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sand-2);min-height:320px;display:grid;place-items:center;text-align:center;padding:2rem}
.kartenbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Nach oben */
.hoch{position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tinte);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s;box-shadow:var(--schatten)}
.hoch.da{opacity:1;pointer-events:auto}
.hoch:hover{background:var(--limette);color:var(--tinte)}
.hoch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
@media (max-width:700px){.hoch{bottom:76px}}

/* Anrufleiste mobil */
.anrufleiste{display:none}
@media (max-width:700px){
  .anrufleiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--tinte);border-top:1px solid var(--linie-invers)}
  .anrufleiste a{padding:.95rem;text-align:center;text-decoration:none;color:var(--text-invers);font-weight:700;font-size:.86rem;
    display:flex;align-items:center;justify-content:center;gap:.5rem}
  .anrufleiste a+a{border-left:1px solid var(--linie-invers);background:var(--limette);color:var(--tinte)}
  .anrufleiste svg{width:15px;height:15px;fill:currentColor}
  body{padding-bottom:52px}
}

/* Sprungnavigation Sortiment */
.chips{position:sticky;top:var(--kopf);z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);padding:.7rem 0}
.chips-innen{display:flex;gap:.5rem;overflow-x:auto;width:min(100% - 2.4rem,var(--breite));margin-inline:auto;scrollbar-width:none}
.chips-innen::-webkit-scrollbar{display:none}
.chips a{white-space:nowrap;text-decoration:none;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.5em 1em;border-radius:999px;background:var(--sand);color:var(--text-leise);transition:.2s}
.chips a:hover,.chips a.aktiv{background:var(--tinte);color:#fff}

/* Reveal */
.zeig{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.zeig.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zeig{opacity:1;transform:none;transition:none}}

/* Fließtext-Seiten */
.text-seite h2{margin:2.4rem 0 .8rem}
.text-seite h3{margin:1.8rem 0 .5rem;font-family:var(--serif);font-weight:800;text-transform:none;font-size:1.1rem}
.text-seite ul{padding-left:1.2rem;color:var(--text-leise)}
.text-seite li{margin-bottom:.4rem}
.text-seite a{color:var(--gruen)}

/* Ergaenzt 14.10.2026: Banner 35 Jahre, Teamfotos */
.banner-gitter{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;align-items:start}
.banner-gitter img{width:100%;border-radius:var(--radius);box-shadow:var(--schatten);cursor:zoom-in}
.banner-rechts{display:grid;gap:1rem}
@media (max-width:820px){.banner-gitter{grid-template-columns:1fr}}
.team-bild{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:1rem;box-shadow:0 0 0 4px rgba(170,222,49,.35)}
.siegel{margin-top:2rem;width:200px;height:auto}/* Banner unten (wie auf der alten Seite) und Bilderpaar */
.banner-unten{line-height:0;background:var(--tinte)}
.banner-unten img{width:100%;height:clamp(170px,24vw,400px);object-fit:cover}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.paar img{width:100%;border-radius:var(--radius);box-shadow:var(--schatten);cursor:zoom-in}
@media (max-width:600px){.paar{grid-template-columns:1fr}}
/* ===== Fassung „neu 2“ (14.10.2026): Wende-Kacheln, Sortiment im Look der alten Seite ===== */

/* Wende-Kacheln auf der Startseite (Vorbild: Bauer Lipp) */
.wenden{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.2vw,1.1rem)}
@media (max-width:1100px){.wenden{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.wenden{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.wenden{grid-template-columns:1fr}}
.wende{perspective:1400px;aspect-ratio:4/4.2;cursor:pointer;outline:0}
.wende .kern{position:relative;width:100%;height:100%;transition:transform .85s cubic-bezier(.3,.9,.3,1);transform-style:preserve-3d}
.wende.um .kern{transform:rotateY(180deg)}
.wende:focus-visible .kern{box-shadow:0 0 0 4px var(--limette);border-radius:var(--radius)}
.wende .seite{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.55)}
.wende .vorn{display:flex;flex-direction:column;background:var(--tinte-2)}
.wende .vorn video{flex:1;min-height:0;width:100%;height:100%;object-fit:cover;transition:transform .9s}
.wende:hover .vorn video{transform:scale(1.08)}
.wende .band{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem 1rem .8rem;background:var(--limette);color:var(--tinte)}
.wende .band b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.35rem;letter-spacing:.04em;line-height:1.2;padding-bottom:.05em}
.wende .dreh{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--tinte);color:var(--limette);display:grid;place-items:center;
  font-size:1.1rem;animation:wink 3.2s ease-in-out infinite}
@keyframes wink{0%,80%,100%{transform:rotate(0)}90%{transform:rotate(180deg)}}
.wende .hinten{transform:rotateY(180deg);background:linear-gradient(150deg,var(--gruen-tief),#73A915 65%,#8FC525);color:#fff;
  padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.55rem}
.wende:nth-child(even) .hinten{background:linear-gradient(150deg,#2c2c2c,var(--tinte-3))}
.wende .hinten h3{font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.1}
.wende .hinten .wann{background:var(--limette);color:var(--tinte);border-radius:999px;padding:.2em .8em;font-weight:800;font-size:.72rem;letter-spacing:.04em}
.wende .hinten p{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.92);margin:0}
.wende .hinten .knopf{padding:.6em 1.1em;font-size:.85rem;margin-top:.3rem}
@media (prefers-reduced-motion:reduce){.wende .kern{transition:none}.wende .dreh{animation:none}}

/* Sortiment: jede Warengruppe auf ihrem eigenen, unscharfen Obst-Hintergrund – wie auf der alten Seite */
.waren .ware{background:var(--tinte);color:var(--text-invers);border-bottom:0;isolation:isolate;overflow:hidden}
.waren .ware:nth-child(even){background:var(--tinte)}
.waren .ware::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hg) center/cover no-repeat}
.waren .ware::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(34,34,34,.30),rgba(34,34,34,.55))}
.waren .ware .ware-gitter{background:rgba(34,34,34,.84);border:2px solid var(--limette);border-radius:var(--radius);padding:clamp(1rem,2.4vw,2rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.waren .ware h2{color:var(--limette)}
.waren .ware p{color:#ededed}
.waren .ware .ware-zwischen{color:#fff}
.waren .ware p strong{color:var(--limette)}
.waren .ware .merkmal{background:rgba(255,255,255,.08);border-color:rgba(170,222,49,.45);color:#fff}
.waren .ware-bild{border:2px solid rgba(255,255,255,.12)}
#erdbeeren{--hg:url(../bilder/sortiment/erdbeeren/hintergrund.webp)}
#beeren{--hg:url(../bilder/sortiment/beeren/hintergrund.webp)}
#kirschen{--hg:url(../bilder/sortiment/kirschen-hintergrund.webp)}
#aepfel{--hg:url(../bilder/sortiment/aepfel/hintergrund.webp)}
#trauben{--hg:url(../bilder/sortiment/trauben/hintergrund.webp)}
#tomaten{--hg:url(../bilder/sortiment/tomaten/hintergrund.webp)}
#orangen{--hg:url(../bilder/sortiment/orangen/hintergrund.webp)}
#knoblauch{--hg:url(../bilder/sortiment/knoblauch/hintergrund.webp)}
#zwiebeln{--hg:url(../bilder/sortiment/zwiebeln/hintergrund.webp)}
#kartoffeln{--hg:url(../bilder/sortiment/kartoffeln/hintergrund.webp)}
#spargel{--hg:url(../bilder/sortiment/spargel/hintergrund.webp)}

/* Bilderleiste unter jeder Warengruppe: dunkles Band, grüne Rahmen, Pfeile links/rechts */
.leiste{position:relative;margin-top:1.4rem;background:rgba(34,34,34,.86);border-radius:var(--radius);padding:1rem 3.4rem;
  box-shadow:0 20px 50px -30px #000}
.leiste .galerie{margin:0;padding:.3rem .2rem .5rem;grid-auto-columns:minmax(170px,1fr);scrollbar-width:none}
.leiste .galerie::-webkit-scrollbar{display:none}
.leiste .galerie img{border:3px solid var(--limette);border-radius:14px;aspect-ratio:1/1;box-shadow:0 10px 24px -14px #000}
.leiste .galerie img:hover{transform:translateY(-4px) scale(1.03);filter:none;box-shadow:0 16px 30px -14px #000}
.leiste button{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--limette);color:var(--tinte);font-size:1.5rem;line-height:1;display:grid;place-items:center;box-shadow:0 8px 20px -10px #000;transition:.2s}
.leiste button:hover{background:#fff}
.leiste .links{left:.6rem}.leiste .rechts{right:.6rem}
@media (max-width:600px){.leiste{padding:.8rem .6rem}.leiste button{display:none}}

/* ===== Hell/Dunkel-Schalter (neu 2, 14.10.2026) ===== */
.ansicht-knopf{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--linie-invers);background:rgba(255,255,255,.06);
  color:var(--text-invers);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s,transform .2s}
.ansicht-knopf:hover{background:var(--limette);color:var(--tinte);transform:rotate(-15deg)}
.ansicht-knopf svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ansicht-knopf .mond{display:none}
html[data-ansicht="dunkel"] .ansicht-knopf .sonne{display:none}
html[data-ansicht="dunkel"] .ansicht-knopf .mond{display:block}
@media (max-width:1080px){.ansicht-knopf{margin-left:auto}.burger{margin-left:0}}
@media (max-width:600px){.ansicht-knopf{width:40px;height:40px}}

html[data-ansicht="dunkel"]{
  --papier:#2b2b2b;--sand:#333333;--sand-2:#3d3d3d;--text:#ececec;--text-leise:#c4c4c4;--linie:rgba(255,255,255,.12);
  --gruen:#8FC525;color-scheme:dark}
html[data-ansicht="dunkel"] .chips{background:rgba(43,43,43,.92)}
html[data-ansicht="dunkel"] .chips a{background:var(--sand-2);color:var(--text-leise)}
html[data-ansicht="dunkel"] .chips a:hover,html[data-ansicht="dunkel"] .chips a.aktiv{background:var(--limette);color:var(--tinte)}
html[data-ansicht="dunkel"] .formular input,html[data-ansicht="dunkel"] .formular textarea,html[data-ansicht="dunkel"] .formular select{background:#1f1f1f;color:var(--text)}
html[data-ansicht="dunkel"] .ware:nth-child(even) .merkmal{background:var(--sand-2)}
html[data-ansicht="dunkel"] .saison i:not(.an):not(.top){background:#4a4a4a}
html[data-ansicht="dunkel"] .knopf-dunkel{background:#1c1c1c;border:1px solid var(--linie-invers)}
html[data-ansicht="dunkel"] .karte{box-shadow:0 12px 34px -18px #000}

/* Handy: Kopfzeile darf nichts zusammenquetschen, Schild im Bild bleibt im Bild (14.10.2026) */
.burger{flex:0 0 auto}
.split-marke{max-width:calc(100% - .5rem)}
@media (max-width:600px){.kopf-innen{gap:.6rem}.marke img{height:34px}.split-marke{font-size:.92rem;padding:.7rem .9rem}}
/* Fußzeile: Marken-Schreibweise wie bei Udo Pfaff (Carsten, 14.10.2026) –
   „Voll“ und „.de“ weiß, Vollgestaltet Türkis, Vollgeneriert Rot, Vollbeklebt Orange #ff4b00 */
.vb-marke{white-space:nowrap;font-weight:600}
.vb-marke .vb-w{color:#fff}
.vb-marke .vb-o{color:#ff4b00}
.vb-marke .vb-t{color:#00d5c8}
.vb-marke .vb-r{color:#ff1e3c}
.fuss a.vb-marke:hover{text-decoration:underline;text-decoration-color:currentColor}
/* ===== Videos-Seite „neu 2“ (14.10.2026): Kino-Bühne, Filter, Leisten mit Effekten ===== */
.kino{position:relative;overflow:hidden;background:#1c1c1c;color:var(--text-invers);isolation:isolate;
  padding:calc(var(--kopf) + clamp(1.6rem,4vw,3rem)) 0 clamp(2.4rem,5vw,4rem)}
.kino-glow{position:absolute;inset:-12%;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.55;transform:scale(1.1);transition:background-image .6s;animation:atmen 9s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.75;transform:scale(1.08)}50%{opacity:1;transform:scale(1.16)}}
.kino::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 30% 45%,rgba(28,28,28,0) 0%,rgba(28,28,28,.35) 55%,rgba(28,28,28,.85) 100%),
             linear-gradient(180deg,rgba(28,28,28,.2),#222222 96%)}
.kino-funken{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kino-funken i{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:var(--limette);opacity:.0;
  box-shadow:0 0 12px var(--limette);animation:steigen 9s linear infinite}
.kino-funken i:nth-child(1){left:8%;animation-delay:0s}.kino-funken i:nth-child(2){left:21%;animation-delay:2.2s;width:4px;height:4px}
.kino-funken i:nth-child(3){left:37%;animation-delay:4.1s}.kino-funken i:nth-child(4){left:52%;animation-delay:1.3s;width:3px;height:3px}
.kino-funken i:nth-child(5){left:66%;animation-delay:5.6s}.kino-funken i:nth-child(6){left:78%;animation-delay:3.2s;width:4px;height:4px}
.kino-funken i:nth-child(7){left:88%;animation-delay:6.8s}.kino-funken i:nth-child(8){left:95%;animation-delay:.7s;width:3px;height:3px}
@keyframes steigen{0%{transform:translateY(0);opacity:0}10%{opacity:.8}80%{opacity:.5}100%{transform:translateY(-560px);opacity:0}}

.kino-innen{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media (max-width:900px){.kino .kino-innen{grid-template-columns:1fr}}
.kino-rahmen{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px rgba(170,222,49,.55),0 40px 90px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(170,222,49,.35);
  transform:perspective(1400px) rotateY(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.kino-rahmen:hover{transform:perspective(1400px) rotateY(0) scale(1.01);
  box-shadow:0 0 0 3px var(--limette),0 40px 90px -30px rgba(0,0,0,.9),0 0 110px -10px rgba(170,222,49,.5)}
.kino-rahmen img,.kino-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.kino-bild{transition:opacity .45s,transform 8s ease-out}
.kino-rahmen:hover .kino-bild{transform:scale(1.06)}
.kino-rahmen.wechsel .kino-bild{opacity:0}
.kino-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;
  background:var(--limette);display:grid;place-items:center;z-index:2;box-shadow:0 0 0 0 rgba(170,222,49,.7);animation:puls-play 2.2s infinite}
.kino-play svg{width:36px;height:36px;fill:var(--tinte);margin-left:5px}
.kino-play:hover{transform:translate(-50%,-50%) scale(1.1)}
@keyframes puls-play{0%{box-shadow:0 0 0 0 rgba(170,222,49,.65)}70%{box-shadow:0 0 0 26px rgba(170,222,49,0)}100%{box-shadow:0 0 0 0 rgba(170,222,49,0)}}
.kino-zaehler{position:absolute;left:1rem;bottom:.9rem;z-index:2;background:rgba(28,28,28,.75);border:1px solid rgba(170,222,49,.5);
  border-radius:999px;padding:.3em .9em;font-size:.8rem;letter-spacing:.12em;color:#fff}
.kino-zaehler b{color:var(--limette);font-family:var(--display);font-weight:400;font-size:1rem}
.kino-ecke{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 60%);transform:translateX(-120%);animation:schein 6s ease-in-out infinite}
@keyframes schein{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.kino-rahmen.spielt .kino-play,.kino-rahmen.spielt .kino-zaehler,.kino-rahmen.spielt .kino-ecke{display:none}

.kino-info .krume{margin-bottom:1rem}
.kino-kat{display:inline-block;background:var(--limette);color:var(--tinte);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;border-radius:999px;padding:.38em 1em;margin-bottom:1rem}
.kino-titel{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;padding-bottom:.08em;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.kino-titel.neu{animation:titel-rein .6s cubic-bezier(.2,.7,.2,1)}
@keyframes titel-rein{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.kino-text{color:#d9d9d9;margin-top:1rem;max-width:42ch}
.kino-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.kino-kanal{display:inline-block;margin-top:1.2rem;color:var(--limette);text-decoration:none;font-weight:700;font-size:.9rem}
.kino-kanal:hover{text-decoration:underline}

/* Filter-Chips */
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.filter button{position:relative;border:1px solid var(--linie-invers);background:rgba(255,255,255,.04);color:var(--text-invers);cursor:pointer;
  border-radius:999px;padding:.6em 1.15em;font-weight:700;font-size:.86rem;letter-spacing:.03em;transition:.25s;overflow:hidden}
.filter button small{color:var(--limette);font-weight:800;margin-left:.3em}
.filter button:hover{border-color:var(--limette);transform:translateY(-2px)}
.filter button.aktiv{background:var(--limette);color:var(--tinte);border-color:var(--limette);box-shadow:0 10px 30px -12px rgba(170,222,49,.8)}
.filter button.aktiv small{color:var(--tinte)}

/* Leisten */
.regal{margin-bottom:clamp(2rem,4vw,3.2rem)}
.regal[hidden]{display:none}
.regal-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.regal-kopf h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.regal-kopf p{color:var(--text-invers-leise);margin-top:.3rem;font-size:.92rem}
.regal-pfeile{display:flex;gap:.5rem;flex:0 0 auto}
.regal-pfeile button{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie-invers);background:rgba(255,255,255,.05);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.regal-pfeile button:hover{background:var(--limette);color:var(--tinte);border-color:var(--limette);transform:scale(1.08)}
.regal-spur{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,27%,330px);gap:clamp(.9rem,1.6vw,1.4rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:.4rem;padding:1.4rem .4rem 1.6rem;margin:-1.4rem -.4rem 0;scrollbar-width:none}
.regal-spur::-webkit-scrollbar{display:none}
@media (max-width:600px){.regal-spur{grid-auto-columns:78%}.regal-pfeile{display:none}}
.regale{padding-top:clamp(1.6rem,3vw,2.6rem)}

.vtile{position:relative;display:block;text-align:left;border:0;background:none;color:inherit;padding:0;cursor:pointer;scroll-snap-align:start;
  font:inherit;outline:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vtile-nr{position:absolute;left:.7rem;top:.35rem;z-index:3;font-family:var(--display);font-size:3.6rem;line-height:1;
  color:rgba(28,28,28,.25);-webkit-text-stroke:2px var(--limette);text-shadow:0 4px 18px rgba(0,0,0,.65);transition:.35s;padding-bottom:.08em;pointer-events:none}
.vtile:hover .vtile-nr,.vtile:focus-visible .vtile-nr{color:var(--limette);transform:translateY(-3px) scale(1.06)}
.vtile-bild{position:relative;z-index:1;display:block;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -22px #000;transition:box-shadow .35s}
.vtile-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .35s}
.vtile:hover .vtile-bild,.vtile:focus-visible .vtile-bild{box-shadow:0 0 0 3px var(--limette),0 26px 50px -20px #000,0 0 40px -6px rgba(170,222,49,.55)}
.vtile:hover .vtile-bild img{transform:scale(1.1);filter:saturate(1.2) brightness(1.06)}
.vtile-glanz{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 47%,transparent 62%);
  transform:translateX(-130%);pointer-events:none}
.vtile:hover .vtile-glanz{transition:transform .9s;transform:translateX(130%)}
.vtile-play{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:var(--limette);display:grid;place-items:center;
  transform:translate(-50%,-50%) scale(.4);opacity:0;transition:.35s cubic-bezier(.3,1.6,.4,1)}
.vtile-play svg{width:22px;height:22px;fill:var(--tinte);margin-left:3px}
.vtile:hover .vtile-play,.vtile:focus-visible .vtile-play{transform:translate(-50%,-50%) scale(1);opacity:1}
.vtile-titel{position:relative;z-index:1;display:block;margin-top:.7rem;font-weight:700;font-size:.95rem;line-height:1.35;color:#fff;transition:color .25s}
.vtile:hover .vtile-titel{color:var(--limette)}
.vtile-live{position:absolute;right:.6rem;top:.6rem;display:none;align-items:flex-end;gap:2px;background:var(--limette);color:var(--tinte);
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.35em .7em .35em .55em;border-radius:999px}
.vtile-live i{display:block;width:3px;height:10px;background:var(--tinte);border-radius:2px;animation:eq .9s ease-in-out infinite}
.vtile-live i:nth-child(2){animation-delay:.2s}.vtile-live i:nth-child(3){animation-delay:.4s;margin-right:.35em}
@keyframes eq{0%,100%{height:4px}50%{height:11px}}
.vtile.aktiv .vtile-live{display:inline-flex}
.vtile.aktiv .vtile-bild{box-shadow:0 0 0 3px var(--limette),0 0 40px -6px rgba(170,222,49,.6)}
.vtile.aktiv .vtile-nr{color:var(--limette)}

@media (prefers-reduced-motion:reduce){
  .kino-glow,.kino-funken i,.kino-ecke,.kino-play,.vtile-live i{animation:none}
  .kino-rahmen{transform:none}
}

/* ===== Videos-Seite „neu 3“ – dezent in Grün (15.10.2026) – überschreibt die Regeln von „neu 2“ =====
   Carsten: Hintergrundbilder, drei Farben und großer Player waren „too much“ – ruhig, schön, nur mit dem CI-Grün,
   gern mit grünem Rahmen. Keine Fotos im Hintergrund, keine anderen Farben. */

/* Bühne: dunkler Grund mit sanftem grünem Lichtschein, feine grüne Linien, schimmernde grüne Unterkante */
.kino{background:
    radial-gradient(ellipse 60% 70% at 26% 50%,rgba(115,169,21,.30) 0%,rgba(63,94,11,.14) 45%,rgba(34,34,34,0) 75%),
    linear-gradient(180deg,#333333 0%,#222222 100%);
  padding:calc(var(--kopf) + clamp(1.4rem,3vw,2.4rem)) 0 clamp(2rem,4vw,3rem)}
.kino::after{background:repeating-linear-gradient(135deg,rgba(170,222,49,.035) 0 1px,transparent 1px 26px)}
.kino::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;
  background:linear-gradient(90deg,rgba(170,222,49,0),#73A915 20%,#AADE31 40%,#C4F73A 50%,#AADE31 60%,#73A915 80%,rgba(170,222,49,0));
  background-size:200% 100%;animation:kante 7s linear infinite}
@keyframes kante{from{background-position:0 0}to{background-position:-200% 0}}
.kino-glow{display:none}
.kino-funken i{width:5px;height:5px;background:var(--limette);box-shadow:0 0 10px rgba(170,222,49,.7)}

/* Player kleiner, Bühne mittig */
.kino .kino-innen{width:min(100% - 2 * var(--rand),1400px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem)}
@media (max-width:900px){.kino .kino-innen{grid-template-columns:1fr}}
.kino-buehne{max-width:780px}
.kino-play{width:76px;height:76px}
.kino-play svg{width:30px;height:30px}
.kino-titel{font-size:clamp(1.8rem,3.2vw,2.9rem);
  background:linear-gradient(90deg,#fff 0%,#fff 42%,#C4F73A 50%,#fff 58%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:titel-glanz 6s linear infinite}
@keyframes titel-glanz{from{background-position:100% 0}to{background-position:-150% 0}}
.kino-titel.neu{animation:titel-rein .6s cubic-bezier(.2,.7,.2,1),titel-glanz 6s linear .6s infinite}

/* Bereich der Tafeln: hell (im Dunkelmodus dunkel) mit zartem grünem Punktmuster */
.regale{overflow-x:clip;background-color:var(--sand);color:var(--text);
  background-image:radial-gradient(rgba(115,169,21,.13) 1.3px,transparent 1.5px);background-size:22px 22px}

/* Filter */
.regale .filter button{background:var(--papier);border:1.5px solid rgba(115,169,21,.45);color:var(--text)}
.regale .filter button small{color:var(--gruen)}
.regale .filter button:hover{border-color:var(--limette)}
.regale .filter button.aktiv{background:var(--limette);border-color:var(--limette);color:var(--tinte);box-shadow:0 10px 26px -12px rgba(115,169,21,.8)}
.regale .filter button.aktiv small{color:var(--tinte)}

/* jede Tafel: gleich, mit grünem Rahmen und schimmernder grüner Leiste oben */
.regal{position:relative;overflow:hidden;background:var(--papier);border:2px solid var(--limette);border-radius:26px;
  padding:clamp(1.3rem,2.6vw,2.1rem) clamp(1rem,2.2vw,1.9rem) .6rem;
  box-shadow:0 26px 60px -36px rgba(63,94,11,.55),0 0 0 6px rgba(170,222,49,.12)}
.regal::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;
  background:linear-gradient(90deg,#73A915,#AADE31,#C4F73A,#AADE31,#73A915);background-size:200% 100%;animation:kante 6s linear infinite}
.regal-kopf,.regal-spur{position:relative;z-index:1}
.regal-kopf h2{color:var(--text)}
.regal-kopf h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:var(--limette);margin-top:.5rem}
.regal-kopf p{color:var(--text-leise)}
.regal .vtile-titel{color:var(--text)}
.regal .vtile:hover .vtile-titel{color:var(--gruen)}
.regal .vtile-bild{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 32px -20px rgba(0,0,0,.55)}
.regal .vtile:hover .vtile-bild,.regal .vtile:focus-visible .vtile-bild,.regal .vtile.aktiv .vtile-bild{
  box-shadow:0 0 0 3px var(--limette),0 22px 44px -20px rgba(0,0,0,.5),0 0 34px -6px rgba(170,222,49,.65)}

/* Laufwort: nur als zarte grüne Umrisslinie */
.regal-wort{position:absolute;left:0;top:55%;z-index:0;white-space:nowrap;pointer-events:none;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(5rem,12vw,10rem);line-height:1.1;padding-bottom:.1em;color:transparent;-webkit-text-stroke:1.5px rgba(115,169,21,.16);
  transform:translateY(-50%);animation:laufwort 45s linear infinite}
@keyframes laufwort{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}

/* Tafeln gleiten abwechselnd von links/rechts herein, Kacheln nacheinander (nur translate – sonst Kippen gestört) */
.regal.zeig[data-kat="haus"],.regal.zeig[data-kat="marken"]{transform:translateX(-50px)}
.regal.zeig[data-kat="fz"]{transform:translateX(50px)}
.regal.zeig.sichtbar{transform:none}
.regal .vtile{opacity:0;translate:0 22px}
.regal.sichtbar .vtile{animation:kachel-rein .6s cubic-bezier(.2,.7,.2,1) forwards}
.regal.sichtbar .vtile:nth-child(2){animation-delay:.07s}.regal.sichtbar .vtile:nth-child(3){animation-delay:.14s}
.regal.sichtbar .vtile:nth-child(4){animation-delay:.21s}.regal.sichtbar .vtile:nth-child(5){animation-delay:.28s}
.regal.sichtbar .vtile:nth-child(6){animation-delay:.35s}.regal.sichtbar .vtile:nth-child(n+7){animation-delay:.42s}
@keyframes kachel-rein{to{opacity:1;translate:0 0}}
.regale .vhinweis{color:var(--text-leise)}

@media (max-width:600px){.regal{border-radius:20px}.regal-wort{font-size:4.5rem}}
@media (prefers-reduced-motion:reduce){
  .kino::before,.regal::before,.kino-titel,.regal-wort{animation:none}
  .regal .vtile{opacity:1;translate:none}.regal.zeig{transform:none}
}

/* ===== neu 3 (15.10.2026): ganze Fensterbreite nutzen (Carsten: „nutze die gesamte Breite“) =====
   Inhalt bis 2200 px statt 1240 px, seitlich nur ein schmaler Rand. Reine Lesetexte bleiben lesbar schmal.
   Raster so, dass Reihen immer voll sind (keine 5+1 oder 3+1). */
:root{--breite:2200px;--rand:clamp(1.2rem,3vw,3.5rem)}
.hf,.kopf-innen,.hero-innen,.kopfbild-innen,.chips-innen{width:min(100% - 2 * var(--rand),var(--breite))}
.hf-schmal{width:min(100% - 2 * var(--rand),1000px)}
@media (max-width:600px){.hf,.hf-schmal,.kopf-innen,.hero-innen,.kopfbild-innen,.chips-innen{width:calc(100% - 1.6rem)}}
.ware p,.split p,.kopfzeile p{max-width:78ch}

/* Startseite: 12 Wende-Kacheln – breit 6 nebeneinander (2 volle Reihen), sonst 4 / 3 / 2 / 1 */
@media (min-width:1500px){.wenden{grid-template-columns:repeat(6,1fr)}}

/* Karten nach Anzahl, damit jede Reihe voll ist */
.karten:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.karten:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.karten:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
@media (min-width:1600px){.karten:has(> :nth-child(6):last-child){grid-template-columns:repeat(6,1fr)}}
@media (max-width:1100px){.karten:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.karten:has(> :nth-child(3):last-child),.karten:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}
  .karten:has(> :nth-child(3):last-child){grid-template-columns:1fr}}
@media (max-width:600px){.karten:has(> :nth-child(4):last-child),.karten:has(> :nth-child(6):last-child){grid-template-columns:1fr}}

/* Startseite „Wisser im Video“: genau 3 Kacheln nebeneinander */
.videos{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.videos{grid-template-columns:1fr}}

/* Videos-Seite: Leisten zeigen breit mehr Kacheln */
.regal-spur{grid-auto-columns:clamp(240px,22%,440px)}
@media (max-width:600px){.regal-spur{grid-auto-columns:78%}}

/* Sortiment: Bilderleisten mit größeren Vorschaubildern */
@media (min-width:1500px){.leiste .galerie{grid-auto-columns:minmax(210px,1fr)}}

/* Sortiment: auf breiten Bildschirmen bekommt der Film mehr Platz, der Text bleibt lesbar breit */
@media (min-width:1400px){.ware-gitter{grid-template-columns:1.25fr 1fr}}
/* KI-Hinweis (15.10.2026, Carstens Wahl): Satz in der Fußzeile jeder Seite + Plakette an fotoechten KI-Bildern
   (bisher nur das 35-Jahre-Panorama). Grund: Art. 50 Abs. 4/5 KI-Verordnung – Hinweis beim ersten Sehen. */
.ki-bild{position:relative;margin:0}
.ki-bild img{display:block}
.ki-plakette{position:absolute;right:.7rem;top:.7rem;z-index:2;pointer-events:none;background:rgba(34,34,34,.8);color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.3em .8em;font-size:.72rem;font-weight:700;letter-spacing:.05em}
/* ===== neu 3 (15.10.2026): alle Videos einer Tafel sichtbar – Raster statt Leiste zum Schieben =====
   Carsten: „schöner, wenn die alle auf einer Seite in jedem Reiter sichtbar wären“. Spalten je Tafel so gewählt,
   dass die Reihen ausgewogen sind (Haus 11 = 6+5, Frischezentrum 4 = 4, Marken 9 = 5+4); eine kürzere letzte Reihe
   füllt die Breite (Kacheln etwas breiter), damit keine Lücke bleibt. */
.regal-spur{display:flex;flex-wrap:wrap;--abstand:clamp(.9rem,1.6vw,1.4rem);gap:1.6rem var(--abstand);overflow:visible;
  scroll-snap-type:none;padding:1.2rem 0 1.6rem;margin:0}
.regal-spur .vtile{flex:1 1 calc((100% - (var(--n) - 1) * var(--abstand)) / var(--n));min-width:0}
.regal[data-kat="haus"]{--n:6}.regal[data-kat="fz"]{--n:4}.regal[data-kat="marken"]{--n:5}
@media (max-width:1300px){.regal[data-kat="haus"]{--n:4}.regal[data-kat="marken"]{--n:3}}
@media (max-width:900px){.regal[data-kat="haus"]{--n:3}.regal[data-kat="fz"]{--n:2}.regal[data-kat="marken"]{--n:3}}
@media (max-width:640px){.regal[data-kat="haus"],.regal[data-kat="fz"],.regal[data-kat="marken"]{--n:1}}
.regal-pfeile{display:none}
/* ===== neu 3 (15.10.2026): Startbild passt auf einen Bildschirm =====
   Carsten: Beeren-Schrift „Ralf Wisser GmbH“ rechts unter die 35, Überschrift und Text nach oben,
   das ganze Startbild ohne Runterscrollen sichtbar. Links Text, rechts 35 + Beeren-Schrift. */
.hero{min-height:100svh;align-items:center}
.hero-innen{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"links rechts";
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding:calc(var(--kopf) + clamp(1rem,3vh,2.2rem)) 0 clamp(3.4rem,8vh,5rem)}
.hero-links{grid-area:links}
.hero-rechts{grid-area:rechts;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,2vh,1.2rem)}
.hero .hero-jubi{position:static;inset:auto;width:clamp(120px,11vw,200px);height:auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));animation:schweben 7s ease-in-out infinite}
.hero .hero-wortmarke{width:clamp(220px,26vw,500px);height:auto;max-width:100%;margin:0;object-fit:contain;object-position:center}
.hero h1{font-size:clamp(2.4rem,min(6vw,9vh),5.2rem)}
.hero-kicker{margin-bottom:1.9rem}
.hero-text{margin-top:1.1rem}
.hero-knoepfe{margin-top:1.6rem}
@media (max-width:820px){
  .hero-innen{grid-template-columns:1fr;grid-template-areas:"rechts" "links";gap:1.2rem;padding-bottom:4rem}
  .hero-rechts{flex-direction:row;justify-content:flex-start;gap:1rem}
  .hero .hero-jubi{width:84px;animation:none}
  .hero .hero-wortmarke{width:min(58vw,240px)}
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .hero-innen{padding-top:calc(var(--kopf) + .8rem);padding-bottom:calc(3.2rem + 52px)}
  .hero-text{font-size:1rem;margin-top:.8rem}
  .hero-knoepfe{margin-top:1.1rem}
}
@media (max-width:820px) and (max-height:760px){
  .hero .hero-jubi{width:68px}.hero .hero-wortmarke{width:min(50vw,190px)}
  .hero-innen{gap:.8rem}.hero-text{font-size:.95rem;line-height:1.55}
}
/* Zertifikate sichtbar auf der Seite (Carsten, 15.10.2026: „nicht per E-Mail anfordern, auf der Webseite anzeigen“) */
.zert-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:1000px){.zert-gitter{grid-template-columns:1fr}}
.zert{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:center;
  background:var(--papier);border:2px solid var(--limette);border-radius:var(--radius);padding:clamp(1rem,1.8vw,1.4rem);
  box-shadow:0 18px 44px -28px rgba(63,94,11,.55);transition:transform .3s,box-shadow .3s}
.zert:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(63,94,11,.6)}
.zert img{width:100%;height:auto;border-radius:10px;background:#fff;cursor:zoom-in;box-shadow:0 12px 30px -16px rgba(0,0,0,.5);transition:transform .35s}
.zert img:hover{transform:scale(1.03)}
.zert-siegel{display:inline-block;background:var(--limette);color:var(--tinte);font-weight:800;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.32em .85em;border-radius:999px}
.zert h3{margin:.75rem 0 .5rem;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.15}
.zert p{color:var(--text-leise);font-size:.95rem}
.zert dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.88rem;margin:.9rem 0 1.2rem}
.zert dt{color:var(--text-leise)}
.zert dd{margin:0;font-weight:600;color:var(--text)}
@media (max-width:560px){.zert{grid-template-columns:1fr}}
/* ===== neu 3 (15.10.2026): eigene Seite „35 Jahre“ – Bühne ruhig in Grün, 35 + Beeren-Schrift groß ===== */
.jubi{position:relative;overflow:hidden;isolation:isolate;color:var(--text-invers);
  background:radial-gradient(ellipse 55% 75% at 74% 50%,rgba(170,222,49,.26) 0%,rgba(63,94,11,.12) 45%,rgba(34,34,34,0) 75%),
    linear-gradient(180deg,#333333 0%,#222222 100%);
  padding:calc(var(--kopf) + clamp(1.4rem,3.5vw,2.8rem)) 0 clamp(2.4rem,5vw,4rem)}
.jubi::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,rgba(170,222,49,.035) 0 1px,transparent 1px 26px)}
.jubi::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;
  background:linear-gradient(90deg,rgba(170,222,49,0),#73A915 20%,#AADE31 40%,#C4F73A 50%,#AADE31 60%,#73A915 80%,rgba(170,222,49,0));
  background-size:200% 100%;animation:kante 7s linear infinite}
.jubi .jubi-innen{width:min(100% - 2 * var(--rand),1500px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;min-height:min(60vh,560px)}
.jubi h1{font-size:clamp(2.4rem,5.2vw,4.8rem);padding-bottom:.06em}
.jubi h1 em{font-style:normal;color:var(--limette)}
.jubi .hero-kicker{margin-bottom:1.6rem}
.jubi-lead{font-size:1.15rem;color:#e6e6e6;margin-top:1.3rem;max-width:44ch}
.jubi-marke{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,2vh,1.4rem)}
.jubi-35{width:clamp(170px,19vw,320px);height:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,.6));animation:schweben 7s ease-in-out infinite}
.jubi-wort{width:clamp(240px,30vw,540px);height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
@media (max-width:820px){
  .jubi .jubi-innen{grid-template-columns:1fr;min-height:0}
  .jubi-marke{order:-1;flex-direction:row;justify-content:flex-start;gap:1rem}
  .jubi-35{width:100px;animation:none}.jubi-wort{width:min(56vw,240px)}
}
.zitat-hell{color:var(--text);text-align:left;margin:0;max-width:20ch}
.zitat-hell span{color:var(--gruen)}
.jubi-anspruch{font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.4;max-width:42ch;margin:0 auto;text-align:center;color:var(--text-invers)}
.strahl-titel{font-family:var(--serif);text-transform:none;font-size:1.05rem;margin:.2rem 0 0}
/* fünf Karten: breit 5 in einer Reihe, mittel 3+2 (volle Breite), Handy untereinander */
.karten.karten-fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
.karten-fuenf .karte p{color:var(--text);font-weight:600;font-size:1.02rem;line-height:1.45}
@media (max-width:1300px){.karten.karten-fuenf{display:flex;flex-wrap:wrap}.karten-fuenf>.karte{flex:1 1 calc(33.333% - 1.2rem)}}
@media (max-width:700px){.karten-fuenf>.karte{flex-basis:100%}}
/* Startseite: 35 + Beeren-Schrift führen zur Seite „35 Jahre“ */
a.hero-rechts{text-decoration:none;color:#fff;transition:transform .35s}
a.hero-rechts:hover{transform:scale(1.04)}
.hero-rechts-hinweis{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--limette);
  background:rgba(34,34,34,.6);border:1px solid rgba(170,222,49,.5);border-radius:999px;padding:.35em 1em;margin-top:.2rem}
a.hero-rechts:hover .hero-rechts-hinweis{background:var(--limette);color:var(--tinte)}
@media (max-width:820px){.hero-rechts-hinweis{display:none}}.jubi-teaser{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.2rem,2.4vw,2rem);
  border:2px solid var(--limette);border-radius:var(--radius);text-decoration:none;color:var(--text-invers);
  background:radial-gradient(ellipse at 15% 50%,rgba(170,222,49,.22),rgba(34,34,34,0) 60%),var(--tinte-2);transition:transform .3s,box-shadow .3s}
.jubi-teaser:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(170,222,49,.45)}
.jubi-teaser img{width:clamp(110px,12vw,180px);height:auto;flex:0 0 auto;animation:schweben 7s ease-in-out infinite}
.jubi-teaser span{flex:1;color:var(--text-invers-leise)}
.jubi-teaser b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.2rem);color:#fff;margin-bottom:.3rem}
.jubi-teaser .knopf{font-style:normal;flex:0 0 auto}
@media (max-width:760px){.jubi-teaser{flex-direction:column;align-items:flex-start}}/* Kopfzeile mit 8 Menüpunkten: mittlere Breiten enger, Telefon nur als Symbol, darunter Klapp-Menü */
@media (max-width:1500px){.kopf-tel span{display:none}.kopf-tel{padding:.62rem;gap:0}.nav a{padding:.55rem .55rem}.nav a::after{left:.55rem;right:.55rem}}
@media (max-width:1180px){.nav,.kopf-tel{display:none}.burger{display:block}.ansicht-knopf{margin-left:auto}.burger{margin-left:0}}
/* Startseite „Wisser im Video“: sauberer grüner Rahmen um jede Kachel (Carsten, 15.10.2026: Ränder „unsauber“) */
.videos .vkachel{padding:7px;border:2px solid rgba(170,222,49,.55);border-radius:20px;background:var(--tinte-2);
  box-shadow:0 18px 40px -24px #000;transition:border-color .3s,box-shadow .3s,transform .3s}
.videos .vkachel img{border-radius:13px}
.videos .vkachel .play{top:calc(7px + (100% - 14px - 3.2rem) * .5)}
.videos .vkachel figcaption{padding:.8rem .5rem .4rem}
.videos .vkachel:hover{border-color:var(--limette);transform:translateY(-4px);box-shadow:0 24px 48px -24px #000,0 0 32px -6px rgba(170,222,49,.55)}
/* Startseite: die 12 Wende-Kacheln mit klarem grünen Rahmen statt verschwimmendem grauem Schatten
   (Carsten, 15.10.2026: „an den Rändern unsauber … mach einen Rahmen drum“) */
.wende .seite{border:3px solid var(--limette);box-shadow:0 12px 26px -16px rgba(63,94,11,.55)}
.wende .vorn{background:var(--limette)}
.wende .vorn video{display:block}
.wende:hover .seite{border-color:var(--limette-hell);box-shadow:0 16px 30px -16px rgba(63,94,11,.6),0 0 24px -6px rgba(170,222,49,.7)}
/* ===== neu 3 (15.10.2026): Farben nur aus der CI – CI-Grün, Anthrazit, Weiß (Werte: 00 CI\CI-Farben.txt) =====
   Carsten: im hellen Modus „zu viel Schwarz … was du schwarz hast, in CI-Grün, aber so, dass es einen nicht erschlägt,
   sonst mit Weiß kombinieren“; „nirgendwo was mit Cremefarben“; „nicht das Tiefschwarze – das ist eigentlich Anthrazit“.
   Oben in stil.css sind Tinte (#0D1310 → #222222), Sand (#F6F3EA → #F3F3F3) und alle grünstichigen Dunkeltöne schon
   auf Anthrazit umgestellt; hier nur, was der helle Modus zusätzlich braucht. */

/* Kopfleiste: Anthrazit mit grüner Unterkante (wie der grüne Schwung der Original-Kopfgrafik) */
.kopf.fest{box-shadow:inset 0 -2px 0 var(--limette),0 10px 30px -18px rgba(0,0,0,.7)}

/* Heller Modus: bisher schwarze Abschnitte → helles CI-Grün (#AADE31 zu rund einem Drittel auf Weiß) mit zartem
   Punktmuster, Kacheln darin weiß mit grünem Rahmen, Schrift Anthrazit */
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel{
  --text-invers:#262626;--text-invers-leise:#474747;--linie-invers:rgba(75,111,14,.22);--tinte-2:#fff;
  color:#262626;background-color:#E4F4BD;
  background-image:radial-gradient(rgba(75,111,14,.11) 1.3px,transparent 1.6px);background-size:22px 22px}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .kicker{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .karte{background:#fff;border:2px solid var(--limette);box-shadow:0 16px 34px -24px rgba(63,94,11,.6)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .karte:hover{box-shadow:0 24px 44px -22px rgba(63,94,11,.65)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .karte-nr{color:#73A915}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zahlen{background:none;gap:clamp(.7rem,1.4vw,1.1rem);overflow:visible}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zahl{background:#fff;border:2px solid var(--limette);border-radius:var(--radius);
  box-shadow:0 16px 34px -24px rgba(63,94,11,.6)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zahl b{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zitat span,
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zitat-quelle{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .strahl b{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .ikon{background:rgba(170,222,49,.35)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .ikon svg{stroke:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .zeiten tr.heute td{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .knopf-geist{color:#262626;border-color:rgba(34,34,34,.35)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .knopf-geist:hover{background:var(--limette);border-color:var(--limette);color:#222}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .vkachel{background:#fff;border-color:var(--limette);box-shadow:0 16px 34px -24px rgba(63,94,11,.6)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .vkachel:hover{box-shadow:0 24px 44px -22px rgba(63,94,11,.65),0 0 30px -8px rgba(170,222,49,.8)}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .jubi-teaser{background:radial-gradient(ellipse at 15% 50%,rgba(170,222,49,.35),rgba(255,255,255,0) 60%),#fff}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .jubi-teaser b{color:#262626}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel .jubi-teaser:hover{box-shadow:0 26px 50px -26px rgba(63,94,11,.6)}

/* Heller Modus, Sortiment: Kästen über den unscharfen Obstbildern weiß statt schwarz */
html:not([data-ansicht="dunkel"]) .waren .ware{color:#262626}
html:not([data-ansicht="dunkel"]) .waren .ware::after{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.18))}
html:not([data-ansicht="dunkel"]) .waren .ware .ware-gitter{background:rgba(255,255,255,.93);box-shadow:0 30px 70px -34px rgba(34,34,34,.6)}
html:not([data-ansicht="dunkel"]) .waren .ware h2,
html:not([data-ansicht="dunkel"]) .waren .ware p strong{color:var(--gruen)}
html:not([data-ansicht="dunkel"]) .waren .ware p{color:#3d3d3d}
html:not([data-ansicht="dunkel"]) .waren .ware .ware-zwischen{color:#262626}
html:not([data-ansicht="dunkel"]) .waren .ware .ware-nr{color:#73A915}
html:not([data-ansicht="dunkel"]) .waren .ware .merkmal{background:#F0F9DA;border-color:rgba(115,169,21,.55);color:#262626}
html:not([data-ansicht="dunkel"]) .waren .ware-bild{border-color:rgba(170,222,49,.8)}
html:not([data-ansicht="dunkel"]) .leiste{background:rgba(255,255,255,.9);box-shadow:0 20px 50px -30px rgba(34,34,34,.55)}
/* ===== neu 3 (15.10.2026): Kontaktseite kompakt, alles in Karten wie „Ralf Wisser GmbH“ mit der Adresse =====
   Carsten: „wenn alle Felder so hervorgehoben wären wie Ralf Wisser GmbH mit der Adresse … ‚Haben Sie Fragen?‘ könnte
   auch so sein … die Anfahrt darunter, dass sie abgehoben ist … generell ist das alles viel zu groß, das erschlägt“.
   Links Formular-Karte, rechts Adresse/Öffnungszeiten und Anfahrt als eigene Karten. Block höchstens 1360 px breit.
   Das Rot bei „Zurzeit geschlossen“ bleibt (Carsten: „das Rot ist schon okay … weil es ja zurzeit geschlossen ist“). */
.kontakt-gitter{width:min(100% - 2 * var(--rand),1360px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
@media (max-width:900px){.kontakt-gitter{grid-template-columns:1fr}}
@media (max-width:600px){.kontakt-gitter{width:calc(100% - 1.6rem)}}
.kontakt-bereich{padding-block:clamp(2rem,4vw,3.2rem)}
.kontakt-rechts{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-rows:auto 1fr}
.kontakt-karte{padding:clamp(1.2rem,2vw,1.7rem)}
.kontakt-karte:hover{transform:none}
.kontakt-karte .kicker{margin-bottom:.6rem}
.kontakt-karte h2{font-size:clamp(1.6rem,2.3vw,2.1rem);padding-bottom:.05em}
.kontakt-karte h3{font-size:clamp(1.25rem,1.6vw,1.5rem);margin-bottom:.9rem}
.kontakt-karte .fuehrung{font-size:.93rem;margin-top:.6rem;max-width:none}

/* Formular: kleinere Felder und Schrift */
.kontakt-karte .formular{margin-top:1.1rem;gap:.75rem}
.kontakt-karte .formular label{font-size:.7rem;gap:.3rem}
.kontakt-karte .formular input,.kontakt-karte .formular textarea{padding:.55rem .8rem;font-size:.93rem}
.kontakt-karte .formular textarea{min-height:110px}
.kontakt-karte .formular .zeile-check{font-size:.8rem;line-height:1.5}
.kontakt-karte .formular .knopf{padding:.75rem 1.25rem;font-size:.88rem}
.kontakt-karte .formhinweis{margin-top:.1rem;font-size:.78rem}
.formular input,.formular textarea,.formular select{border-color:rgba(34,34,34,.22)}
/* Felder im dunklen Modus Anthrazit statt fast Schwarz, beim Hineinklicken grüner Rand */
html[data-ansicht="dunkel"] .formular input,html[data-ansicht="dunkel"] .formular textarea,html[data-ansicht="dunkel"] .formular select{
  background:#383838;border-color:rgba(255,255,255,.16)}
html[data-ansicht="dunkel"] .formular input:focus,html[data-ansicht="dunkel"] .formular textarea:focus{border-color:var(--limette)}

/* Adresse und Öffnungszeiten */
.kontakt-karte .kontaktliste{gap:.6rem;font-size:.93rem}
.kontakt-karte .kontaktliste svg{width:17px;height:17px}
.kontakt-status{margin:1.1rem 0 .4rem}
.kontakt-karte .status{font-size:.72rem}
.kontakt-karte .zeiten{font-size:.88rem}
.kontakt-karte .zeiten td{padding:.38rem .2rem}

/* Anfahrt als eigene Karte */
.kontakt-karte.kartenbox{min-height:200px;background:var(--papier);display:grid;place-items:center;text-align:center}
.kontakt-karte.kartenbox h3{margin-bottom:.5rem}
.kartenbox-text{color:var(--text-leise);font-size:.88rem;max-width:44ch;margin:0 auto}
.kartenbox-knoepfe{margin-top:1rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.kartenbox-knoepfe .knopf{padding:.7rem 1.15rem;font-size:.86rem}
/* ===== neu 3 (15.10.2026): Tiefe statt „platsch, flach“ – gilt für alle Seiten, hell und dunkel =====
   Carsten: „Bilder stehen flach rum, kein Effekt … Hintergrundstreifen nicht abgesetzt … ‚Lieber persönlich‘ flach …
   zwischen den Gläsern und der letzten Seite keine Schattierung … oben müsste nach unten einen Schatten werfen …
   du hast so viele Möglichkeiten und nutzt sie nicht“.
   Prinzip wie bei hochwertigen Seiten: Ebenen. Was oben liegt, wirft Schatten nach unten; abgesetzte Streifen liegen
   eine Ebene tiefer (Schatten innen); Bilder bekommen Rahmen, Schatten in mehreren Stufen und reagieren auf die Maus;
   Übergänge zwischen Abschnitten mit grüner Kante wie der Schwung der Original-Kopfgrafik. */

/* 1 Kopfleiste wirft einen Schatten nach unten */
.kopf{box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}
.kopf.fest{box-shadow:inset 0 -2px 0 var(--limette),0 14px 30px -12px rgba(0,0,0,.65),0 4px 10px -4px rgba(0,0,0,.35)}

/* 2 Seitenköpfe (Foto oben, Startbild, Bühnen 35 Jahre/Videos) liegen über dem Inhalt: Schatten nach unten,
   Seitenkopf mit Foto zusätzlich mit schimmernder grüner Unterkante */
.kopfbild,.hero,.jubi,.kino{z-index:2;box-shadow:0 22px 40px -22px rgba(0,0,0,.65)}
.kopfbild::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;
  background:linear-gradient(90deg,rgba(170,222,49,0),#73A915 20%,#AADE31 40%,#C4F73A 50%,#AADE31 60%,#73A915 80%,rgba(170,222,49,0));
  background-size:200% 100%;animation:kante 7s linear infinite}

/* 3 Abgesetzte Streifen (Hellgrau, Hellgrün, im Dunkelmodus Anthrazit) liegen eine Ebene tiefer:
   Schatten innen oben und unten, zartes Punktmuster. Folgen zwei gleiche Streifen aufeinander, kein Schatten dazwischen. */
.abschnitt-sand,.abschnitt-dunkel{--tief-farbe:rgba(0,0,0,.26);
  --tief-o:inset 0 22px 28px -18px var(--tief-farbe);--tief-u:inset 0 -22px 28px -18px var(--tief-farbe);border-block:1px solid rgba(170,222,49,.35);
  box-shadow:var(--tief-o),var(--tief-u)}
.abschnitt-sand{background-image:radial-gradient(rgba(34,34,34,.07) 1.2px,transparent 1.5px);background-size:22px 22px}
html:not([data-ansicht="dunkel"]) .abschnitt-dunkel{--tief-farbe:rgba(63,94,11,.5)}
html[data-ansicht="dunkel"] .abschnitt-sand,html[data-ansicht="dunkel"] .abschnitt-dunkel{--tief-farbe:rgba(0,0,0,.7)}
html[data-ansicht="dunkel"] .abschnitt-sand{background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.5px)}
.abschnitt-sand+.abschnitt-sand,.abschnitt-dunkel+.abschnitt-dunkel{--tief-o:0 0 0 transparent;border-top:0}
.abschnitt-sand:has(+ .abschnitt-sand),.abschnitt-dunkel:has(+ .abschnitt-dunkel){--tief-u:0 0 0 transparent;border-bottom:0}

/* 4 Bildstreifen über der Fußzeile: Schatten oben und unten, Bild bewegt sich ganz langsam (Ken-Burns-Effekt);
   die Fußzeile liegt darüber, wirft ihren Schatten nach oben und hat oben eine grüne Kante */
.banner-unten{position:relative;overflow:hidden}
.banner-unten::before,.banner-unten::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.banner-unten::before{top:0;height:26%;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,0))}
.banner-unten::after{bottom:0;height:32%;background:linear-gradient(0deg,rgba(34,34,34,.7),rgba(34,34,34,0))}
.banner-unten img{transform-origin:50% 60%;animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.fuss{z-index:2;box-shadow:0 -16px 34px -12px rgba(0,0,0,.6)}
.fuss::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,rgba(170,222,49,0),#73A915 20%,#AADE31 40%,#C4F73A 50%,#AADE31 60%,#73A915 80%,rgba(170,222,49,0));
  background-size:200% 100%;animation:kante 7s linear infinite}

/* 5 Bilder mit Rahmen, Schatten in mehreren Stufen und Bewegung
   (rotate/translate/scale statt transform, damit das Einblenden beim Scrollen weiter funktioniert) */
.paar{gap:clamp(1.4rem,3vw,2.8rem);max-width:1360px;margin-inline:auto}
.paar img{padding:5px;background:linear-gradient(135deg,#C4F73A,#AADE31 45%,#73A915);
  box-shadow:0 32px 54px -30px rgba(0,0,0,.7),0 12px 22px -14px rgba(0,0,0,.45);
  transition:rotate .5s cubic-bezier(.2,.7,.2,1),translate .5s cubic-bezier(.2,.7,.2,1),scale .5s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s,opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.paar img:nth-child(odd){rotate:-1.6deg}
.paar img:nth-child(even){rotate:1.6deg}
.paar img:hover{rotate:0deg;translate:0 -8px;scale:1.02;
  box-shadow:0 44px 64px -30px rgba(0,0,0,.75),0 0 40px -8px rgba(170,222,49,.75)}
.split-bild,.banner-gitter>img,.banner-rechts img{box-shadow:0 0 0 4px var(--papier),0 0 0 6px rgba(170,222,49,.85),
  0 34px 60px -30px rgba(0,0,0,.65),0 12px 24px -14px rgba(0,0,0,.4);transition:box-shadow .5s,translate .5s cubic-bezier(.2,.7,.2,1),opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.split-bild:hover,.banner-gitter>img:hover,.banner-rechts img:hover{translate:0 -6px;
  box-shadow:0 0 0 4px var(--papier),0 0 0 6px var(--limette),0 44px 70px -30px rgba(0,0,0,.7),0 0 40px -10px rgba(170,222,49,.6)}
.split-bild img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.split-bild:hover img{transform:scale(1.06)}

/* 6 Grünes Band („Sprechen Sie uns an“, „Lieber persönlich?“): Licht von oben, Glanzstreif, tiefer Schatten */
div.band{box-shadow:0 36px 64px -32px rgba(63,94,11,.8),0 14px 26px -16px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.12);transition:translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
div.band:hover{translate:0 -4px;box-shadow:0 46px 74px -32px rgba(63,94,11,.85),0 18px 30px -16px rgba(0,0,0,.45),
  inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.12)}
div.band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.24) 48%,transparent 61%);transform:translateX(-120%);
  animation:schein 7s ease-in-out infinite}
div.band h2{text-shadow:0 3px 16px rgba(0,0,0,.28)}

/* 7 Impressum und Datenschutz: Text auf einer Karte mit grüner Oberkante, Hintergrund hellgrau mit Punkten */
.abschnitt:has(> .text-seite){background-color:var(--sand);background-image:radial-gradient(rgba(34,34,34,.07) 1.2px,transparent 1.5px);
  background-size:22px 22px}
html[data-ansicht="dunkel"] .abschnitt:has(> .text-seite){background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.5px)}
.text-seite{background:var(--papier);border:1px solid var(--linie);border-top:4px solid var(--limette);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.8rem);box-shadow:0 30px 60px -34px rgba(0,0,0,.5),0 10px 22px -14px rgba(0,0,0,.25)}
.text-seite>h2:first-child{margin-top:0}
.text-seite h2{font-size:clamp(1.35rem,2.1vw,1.85rem)}

@media (prefers-reduced-motion:reduce){
  .banner-unten img,div.band::before,.kopfbild::before,.fuss::before{animation:none}
  .paar img{rotate:none}
}
/* ===== neu 4 (15.10.2026): Abgrenzung wie auf der Kontaktseite auf allen Seiten =====
   Carsten: „die Tiefenwirkung vom oberen Bild … und unten, wo du das Dunkle gemacht hast zu den zwei Cartoons … das kannst
   du auf die anderen Seiten auch umlegen – aber nur diese Schattenelemente und diese Abgrenzung“.
   Vorbild Kontaktseite (dunkler Modus): der Streifen mit den zwei Cartoons ist etwas heller als die Seite, liegt eine
   Ebene tiefer (Schatten innen oben/unten) und hat oben und unten eine feine grüne Kante. */

/* Dunkler Modus: auch die grünen Streifen (im Dunkelmodus bisher dunkler als die Seite, Schatten unsichtbar) bekommen
   den helleren Anthrazit-Ton der Kontaktseite. Zwischen verschiedenen Streifen bleibt immer die Trennung (Carsten:
   „warum hast du da keine Trennung dazwischen gemacht?“ – ein Zusammenlegen grau+grün gab es kurz, ist wieder raus). */
html[data-ansicht="dunkel"] .abschnitt-dunkel{background-color:var(--sand);
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.5px);background-size:22px 22px}

/* Sortiment: die elf Warengruppen liegen wie einzelne Ebenen übereinander – Schatten innen oben und unten,
   feine grüne Kante dazwischen (vorher liefen die unscharfen Hintergründe ohne Grenze ineinander) */
.waren .ware{box-shadow:inset 0 26px 30px -20px rgba(0,0,0,.55),inset 0 -26px 30px -20px rgba(0,0,0,.55);
  border-top:1px solid rgba(170,222,49,.45)}
.waren .ware:first-child{border-top:0}
/* ===== neu 4 (15.10.2026): Bilder mit EINEM grünen Rahmen, Banner-Bereich „35 Jahre“ bündig, Überschriften kleiner =====
   Carsten zum Banner-Bereich auf „35 Jahre“ (dunkler Modus): „Wie sieht denn das aus?“
   Gefunden: der doppelte Rahmen (Fläche in Seitenfarbe + Grün) zeigte im dunklen Modus einen dunklen Spalt, weil die
   Seitenfarbe nicht die Streifenfarbe ist; das linke Bild endete 73 px tiefer als das rechte; die Überschrift war 54 px. */

/* Ein Rahmen in Hauptgrün direkt am Bild (wie bei den Video-Kacheln), Schatten in zwei Stufen */
.split-bild,.banner-gitter>img,.banner-rechts img{
  box-shadow:0 0 0 3px var(--limette),0 34px 60px -30px rgba(0,0,0,.65),0 12px 24px -14px rgba(0,0,0,.4)}
.split-bild:hover,.banner-gitter>img:hover,.banner-rechts img:hover{
  box-shadow:0 0 0 3px var(--limette-hell),0 44px 70px -30px rgba(0,0,0,.7),0 0 40px -10px rgba(170,222,49,.6)}

/* Banner-Bereich: zwei gleich breite Spalten, unten bündig – das Panorama füllt den Platz unter dem Text */
.banner-gitter{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem);align-items:stretch}
.banner-gitter>img{height:100%;object-fit:cover}
.banner-rechts{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.4rem)}
.banner-rechts .ki-bild{flex:1 1 auto;min-height:0;display:flex}
.banner-rechts .ki-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .banner-gitter{grid-template-columns:1fr}
  .banner-gitter>img,.banner-rechts .ki-bild img{height:auto}
}

/* Abschnitts-Überschriften etwas kleiner (vorher bis 54 px; Carsten: „generell viel zu groß, das erschlägt“) */
h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
/* ===== neu 4 (15.10.2026): Zeilenabstand der Anton-Überschriften – Umlaute liefen in die Zeile darüber =====
   Carsten: „Die Texte laufen zusammen. Da ist ein Ü drin … warum achtest du auf sowas nicht? … überprüf das, bei jedem“.
   Gemessen auf allen 10 Seiten bei 1536 und 375 px: jede mehrzeilige Überschrift und jedes Zitat stand mit Zeilenabstand
   0,98 bis 1,10. Anton hat sehr hohe Großbuchstaben, die Punkte von Ä/Ö/Ü stehen darüber – unter rund 1,15 berühren sie
   die Zeile darüber. Regel ab jetzt: Anton mehrzeilig nie unter 1,16. */
h1,h2,h3,h4{line-height:1.16}
.zitat,.kino-titel,.wende .hinten h3{line-height:1.16}
/* ===== neu 4 (15.10.2026): Sortiment – alle Filme gleich groß, wie bei Erdbeeren =====
   Carsten: „die oberen Bilder viel zu groß … kleiner, dass nicht so viel Leerraum ist“ – und dann: „du hast die
   Bildformate anhand vom Text gemacht … nicht mal schmäler, mal breiter, nur wegen dem Text … richte alle Rubriken auf
   die gleiche Größe ein wie oben (Erdbeeren)“.
   Fehler vorher: der Film wurde so hoch wie der Text daneben gezogen – jede Warengruppe hatte ein anderes Format.
   Jetzt: ab 1200 px Filmspalte schmaler, Film bei ALLEN 11 Warengruppen im festen Format 17:10 (wie Erdbeeren:
   668 × 392 bei 1745 px Fensterbreite), Ausschnitt mittig, oben bündig mit dem Text. Handy wie bisher. */
@media (min-width:1200px){
  .waren .ware-gitter{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start}
  .waren .ware-bild{align-self:start;aspect-ratio:17/10}
  .waren .ware-bild video,.waren .ware-bild>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
/* Sprungmarken aus der Leiste: Überschrift nicht unter der klebenden Warengruppen-Leiste verstecken */
.waren .ware{scroll-margin-top:calc(var(--kopf) + 70px)}
/* mittlere Breiten (Tablet): sonst würde der Film schmal – dort Film breit über dem Text, ebenfalls einheitlich */
@media (min-width:861px) and (max-width:1199px){.waren .ware-gitter{grid-template-columns:1fr}.waren .ware-bild video{aspect-ratio:16/9}}

/* ===== neu 4 (15.10.2026): Zeitstrahl mit Herzschlag, Karten mit Effekt und Farbakzent =====
   Carsten zur Seite „35 Jahre“: „bei 1990, 2006, Heute, Morgen ein Effekt von oben nach unten – blink, blink, blink,
   immer größer, und dann bum, bum, bum wie ein Herzschlag … die Sachen pulsieren“; „wenn man über die 1, 2, 3, 4, 5
   fährt, passiert gar nichts“; „Qualität, Zuverlässigkeit, Partnerschaft, Verantwortung – alles komplett in Weiß, kein
   Pep, keine Farbakzente“.
   Fehler dabei gefunden: .karte:hover (transform) wurde vom Einblenden (.zeig.sichtbar{transform:none}) überschrieben –
   deshalb passierte beim Drüberfahren nichts. Jetzt translate/scale statt transform. */

/* --- Zeitstrahl: Linie wächst von oben nach unten, die Punkte gehen nacheinander an und werden dabei groß,
       danach schlagen sie wie ein Herz (doppelter Schlag), als Welle von oben nach unten --- */
.strahl::before{transform-origin:top;transform:scaleY(0);transition:transform 2s cubic-bezier(.4,0,.2,1) .1s}
.strahl.sichtbar::before{transform:scaleY(1)}
.strahl li{opacity:0;translate:-16px 0;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
.strahl.sichtbar li{opacity:1;translate:0 0}
.strahl li::before{width:18px;height:18px;left:calc(-2.2rem - 1px);scale:0}
.strahl.sichtbar li::before{animation:punkt-an .8s cubic-bezier(.3,1.7,.4,1) both,herzschlag 2.8s ease-in-out infinite}
.strahl.sichtbar li:nth-child(1){transition-delay:.15s}
.strahl.sichtbar li:nth-child(2){transition-delay:.65s}
.strahl.sichtbar li:nth-child(3){transition-delay:1.15s}
.strahl.sichtbar li:nth-child(4){transition-delay:1.65s}
.strahl.sichtbar li:nth-child(5){transition-delay:2.15s}
.strahl.sichtbar li:nth-child(1)::before{animation-delay:.2s,2.6s}
.strahl.sichtbar li:nth-child(2)::before{animation-delay:.7s,2.85s}
.strahl.sichtbar li:nth-child(3)::before{animation-delay:1.2s,3.1s}
.strahl.sichtbar li:nth-child(4)::before{animation-delay:1.7s,3.35s}
.strahl.sichtbar li:nth-child(5)::before{animation-delay:2.2s,3.6s}
@keyframes punkt-an{
  0%{scale:0;box-shadow:0 0 0 0 rgba(196,247,58,.9)}
  55%{scale:1.9;box-shadow:0 0 0 10px rgba(196,247,58,.35),0 0 26px 6px rgba(196,247,58,.75)}
  100%{scale:1;box-shadow:0 0 0 5px rgba(170,222,49,.18)}}
@keyframes herzschlag{
  0%,45%,100%{scale:1;box-shadow:0 0 0 5px rgba(170,222,49,.18)}
  8%{scale:1.5;box-shadow:0 0 0 9px rgba(170,222,49,.32),0 0 22px 4px rgba(196,247,58,.75)}
  16%{scale:1.05;box-shadow:0 0 0 5px rgba(170,222,49,.2)}
  25%{scale:1.35;box-shadow:0 0 0 8px rgba(170,222,49,.28),0 0 18px 3px rgba(196,247,58,.6)}}
/* Jahreszahl leuchtet beim Drüberfahren */
.strahl b{transition:text-shadow .3s,letter-spacing .3s}
.strahl li:hover b{text-shadow:0 0 18px rgba(170,222,49,.75);letter-spacing:.08em}

/* --- Karten (alle Seiten, außer den Kontakt-Karten): grüne Oberkante, Strich unter der Überschrift, beim Drüberfahren
       heben, grün leuchten, Nummer wächst --- */
.karte:not(.kontakt-karte){position:relative;overflow:hidden;
  transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s,
    opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.karte:not(.kontakt-karte)::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;
  background:linear-gradient(90deg,#73A915,#AADE31 50%,#C4F73A);transition:height .35s}
.karte:not(.kontakt-karte):hover{translate:0 -6px;border-color:var(--limette);
  box-shadow:0 28px 48px -26px rgba(63,94,11,.7),0 0 0 1px var(--limette),0 0 36px -10px rgba(170,222,49,.7);
  background:linear-gradient(165deg,rgba(170,222,49,.16),rgba(170,222,49,0) 55%),var(--papier)}
.karte:not(.kontakt-karte):hover::before{height:7px}
.karte:not(.kontakt-karte) h3::after{content:"";display:block;width:34px;height:3px;border-radius:3px;margin-top:.55rem;
  background:var(--limette);transition:width .35s}
.karte:not(.kontakt-karte):hover h3::after{width:72px}
.karte-nr{display:inline-block;transform-origin:left bottom;transition:scale .45s cubic-bezier(.3,1.6,.4,1),color .3s,text-shadow .3s}
.karte:hover .karte-nr{scale:1.3;color:var(--limette);text-shadow:0 0 20px rgba(170,222,49,.75)}
html:not([data-ansicht="dunkel"]) .karte:hover .karte-nr{color:#73A915}

@media (prefers-reduced-motion:reduce){
  .strahl::before{transform:none;transition:none}
  .strahl li{opacity:1;translate:none;transition:none}
  .strahl li::before{scale:1;animation:none!important}
  .karte:not(.kontakt-karte):hover{translate:none}
}
/* ===== neu 4 (15.10.2026): Sortiment – Name ohne Nummer, Name mit Effekt =====
   Carsten: „warum hast du davor 01 Erdbeeren, das sieht blöd aus, das soll mit Erdbeeren anfangen … mach einen Effekt
   rein, dass mit dem Wort Erdbeeren was passiert, von mir aus dass es pulsiert“.
   Jetzt: Nummer weg; der Name (alle 11 Warengruppen) atmet leicht (wird etwas größer, grüner Schein) und ein heller
   Glanz läuft durch die Buchstaben. */
.waren .ware-nr{display:none}
.waren .ware h2{display:inline-block;transform-origin:left 60%;padding-bottom:.06em;
  background:linear-gradient(90deg,var(--name-a) 0%,var(--name-a) 38%,var(--name-b) 50%,var(--name-a) 62%,var(--name-a) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:name-glanz 5.5s linear infinite,name-puls 3s ease-in-out infinite}
html[data-ansicht="dunkel"] .waren .ware h2{--name-a:#AADE31;--name-b:#F6FFD6}
html:not([data-ansicht="dunkel"]) .waren .ware h2{--name-a:#4B6F0E;--name-b:#AADE31}
@keyframes name-glanz{from{background-position:100% 0}to{background-position:-160% 0}}
@keyframes name-puls{
  0%,100%{scale:1;filter:drop-shadow(0 0 0 rgba(170,222,49,0))}
  50%{scale:1.05;filter:drop-shadow(0 0 14px rgba(170,222,49,.6))}}
@media (prefers-reduced-motion:reduce){.waren .ware h2{animation:none;background:none;color:var(--name-a)}}
/* ===== neu 4 (15.10.2026): in jeder Überschrift ein Wort in Grün, Anspruch-Passage auf „35 Jahre“, Sortiment grau =====
   Carsten: „wie ‚Haltung‘ im Zitat – aus einer Vision kannst du auch grün machen, aus einer Idee die Idee grün, und so
   ziehst du das durch die ganzen Seiten, dass immer ein Element in Grün drin steht“; „unser Anspruch ist … sowas von
   langweilig, lass dir bei dieser Textpassage was einfallen“; Sortiment: „Grau mit Raster wie 35 Jahre“ (seine Wahl). */

/* Grünes Wort in Überschriften (im HTML als <em>) – Dunkelgrün auf hellem Grund, Mittelgrün im dunklen Modus,
   Leuchtgrün auf Fotos und auf dem grünen Band */
h1 em,h2 em{font-style:normal;color:var(--gruen)}
.hero h1 em,.jubi h1 em,.kopfbild h1 em{color:var(--limette)}
div.band h2 em{color:#C4F73A}

/* Anspruch auf „35 Jahre“: große Aussage, dahinter eine riesige Jahreszahl als grüner Umriss, die beim Erscheinen von
   1990 bis heute läuft – erst langsam, dann immer schneller (Skript neu4-jahre.js); am Ziel leuchtet sie kurz auf.
   Die Leuchtstift-Balken unter „Vertrauen“ und „seit 1990“ sind wieder raus (Carsten: „die Balken können auch weg“). */
.abschnitt:has(> .hf > .anspruch){padding-block:clamp(1rem,1.6vw,2rem) clamp(3rem,4.5vw,4.8rem)}
.anspruch{position:relative;isolation:isolate;text-align:center;padding-block:0}
.anspruch-jahr{position:relative;display:block;z-index:-1;margin-block:clamp(.6rem,1.5vw,1.6rem);translate:0 0;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:clamp(6rem,15vw,13.5rem);line-height:1.1;letter-spacing:.02em;color:transparent;
  -webkit-text-stroke:2px rgba(75,111,14,.3);animation:jahr-atmen 6s ease-in-out infinite}
html[data-ansicht="dunkel"] .anspruch-jahr{-webkit-text-stroke-color:rgba(170,222,49,.32)}
@keyframes jahr-atmen{0%,100%{scale:1;opacity:.7}50%{scale:1.05;opacity:1}}
.anspruch .jubi-anspruch{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;line-height:1.4;max-width:30ch;margin-inline:auto}
html[data-ansicht="dunkel"] /* Carsten, 15.10.2026: „Unser Anspruch etwas höher, ‚35 Jahre …‘ etwas tiefer, die Jahreszahl etwas kleiner – man sieht
   noch, dass sie dahinter ist, kann aber besser lesen, und der Effekt kommt besser rüber“: Zahl jetzt zwischen den Texten. Danach: „oben und unten ein wenig hochrutschen … ohne das Fenster größer zu machen … dass die 2026 in der Mitte gut zu sehen ist“ – weniger Rand oben/unten, dafür steht die Zahl frei zwischen den Texten, Abschnitt gleich hoch. */
.anspruch-jahr{font-variant-numeric:tabular-nums}
.anspruch-jahr.angekommen{animation:jahr-atmen 6s ease-in-out infinite,jahr-ankunft 1.2s ease-out}
@keyframes jahr-ankunft{0%{-webkit-text-stroke-color:rgba(196,247,58,.95)}100%{-webkit-text-stroke-color:inherit}}
.anspruch .zitat{margin-top:0}
@media (prefers-reduced-motion:reduce){.anspruch-jahr{animation:none}}

/* Sortiment: Hintergrund grau mit Punktraster wie die Streifen auf „35 Jahre“ – die unscharfen Obstbilder sind weg */
.waren .ware,.waren .ware:nth-child(even){background-color:var(--sand);
  background-image:radial-gradient(rgba(34,34,34,.07) 1.2px,transparent 1.5px);background-size:22px 22px;
  --tief-farbe:rgba(0,0,0,.26);
  box-shadow:inset 0 22px 28px -18px var(--tief-farbe),inset 0 -22px 28px -18px var(--tief-farbe)}
html[data-ansicht="dunkel"] .waren .ware{--tief-farbe:rgba(0,0,0,.7);
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.5px)}
.waren .ware::before,.waren .ware::after{display:none}
/* ===== neu 4 (15.10.2026): Startbild niedriger, ohne 35 und Beeren-Schrift =====
   Carsten: „das gesamte Bild von der Höhe etwas kleiner, dass es auf einen ganzen Bildschirm passt“; „Qualität könnte
   auch noch grün sein“ (im HTML als <em>); danach: „Mach die 35 und Ralf Wisser und 35 Jahre – mehr erfahren von der
   Startseite weg“ (der Block war vorher kurz klein oben rechts – entfernt, die Regeln dafür auch).
   Vorher bei 1920 × 855: Startbild 855 px (volle Höhe). Jetzt volle Fensterhöhe (Carsten: „alle Kopfbilder auf Fensterhöhe 855“), nur noch der Text links. */
@media (min-width:821px){
  .hero{min-height:0;height:max(560px,100svh)}
  .hero-innen{grid-template-columns:minmax(0,1fr);grid-template-areas:"links";
    padding:calc(var(--kopf) + clamp(1rem,3vh,2rem)) 0 clamp(2.6rem,6vh,4rem)}
  .hero-links{max-width:min(60%,980px)}
  .hero h1{font-size:clamp(2.3rem,min(5.4vw,8vh),4.8rem)}
}
@media (max-width:820px){.hero-innen{grid-template-areas:"links"}}
/* ===== neu 4 (15.10.2026): alle Seitenköpfe so hoch wie das Startbild =====
   Carsten: „und so auch die ganzen anderen Bilder von den oberen Seiten anpassen“ – auf Nachfrage gewählt: „Alle so hoch
   wie Start“. Vorher bei 1920 × 855: Start 718 (neu), „35 Jahre“ 778, Videos 562, Fotoköpfe 412–468 px.
   Jetzt am PC jeder Kopf volle Fensterhöhe (Carsten: „auf Fensterhöhe 855“, mindestens 560 px), Inhalt senkrecht mittig. Handy wie bisher. */
@media (min-width:821px){
  .kopfbild,.jubi,.kino{min-height:max(560px,100svh);display:flex;align-items:center}
  .kopfbild-innen{padding:calc(var(--kopf) + clamp(1.4rem,4vh,2.6rem)) 0 clamp(2.4rem,6vh,3.6rem)}
  .jubi .jubi-innen{min-height:0}
  /* „35 Jahre“: 35 und Beeren-Schrift richten sich nach der Fensterhöhe, damit alles in den Kopf passt */
  .jubi-35{width:auto;height:clamp(90px,17vh,170px)}
  .jubi-wort{width:auto;max-width:100%;height:clamp(140px,29vh,280px);object-fit:contain}
}