/* Little Mondo – gemeinsames Design aller Welten.
   Jede Welt setzt nur ihre Farben und Schriften (body[data-welt=…]); Aufbau und Bausteine sind überall gleich. */

:root{
  --bg:#f7f4ee;--text:#14274e;--leise:#5d6478;--akzent:#f2b632;--akzent2:#2f80c6;--akzent-text:#14274e;
  --karte:#fff;--karte-text:var(--text);--linie:#14274e1a;--kopf:rgba(247,244,238,.92);
  --kopfschrift:"Baloo 2","Nunito",system-ui,sans-serif;--schrift:"Nunito",system-ui,-apple-system,sans-serif;
  --kopfgewicht:800;--radius:22px;--schatten:0 10px 30px #14274e1f;--versal:none;--sperrung:0;
}
body[data-welt=lamoo]{
  --bg:#fff8ec;--text:#1e2a5a;--akzent:#edb63e;--akzent2:#17337e;--karte:#fff;--kopf:rgba(255,248,236,.94);--radius:26px}
body[data-welt=innerland]{
  --bg:#f5f1fb;--text:#3b2d5c;--leise:#6e6388;--akzent:#8e6cc8;--akzent2:#58b8b3;--akzent-text:#fff;--kopf:rgba(245,241,251,.92);
  --kopfschrift:"Quicksand",system-ui,sans-serif;--schrift:"Quicksand",system-ui,sans-serif;--kopfgewicht:700;--radius:32px;--schatten:0 12px 34px #8e6cc826}
body[data-welt=kurswechsel]{
  --bg:#fffaf3;--text:#2a2433;--leise:#6a6070;--akzent:#a3284f;--akzent2:#f3c4cf;--akzent-text:#fff;--karte:#fff;--kopf:rgba(255,250,243,.93);
  --kopfschrift:"Fraunces",Georgia,serif;--schrift:"Inter",system-ui,sans-serif;--kopfgewicht:600;--radius:14px;--schatten:0 8px 26px #2a243314}
body[data-welt=stories]{
  --bg:#fffdf4;--text:#13233f;--leise:#55607a;--akzent:#ffc400;--akzent2:#13233f;--kopf:rgba(255,253,244,.93);
  --kopfschrift:"Oswald","Arial Narrow",sans-serif;--schrift:"Inter",system-ui,sans-serif;--kopfgewicht:700;--radius:6px;--versal:uppercase;--sperrung:.01em}
body[data-welt=benzilam]{
  --bg:#0e0d11;--text:#ece6da;--leise:#a39d92;--akzent:#c9a45c;--akzent2:#2b2733;--akzent-text:#0e0d11;--karte:#17151b;--karte-text:#ece6da;
  --linie:#c9a45c33;--kopf:rgba(14,13,17,.9);--kopfschrift:"Cormorant Garamond",Georgia,serif;--schrift:"Inter",system-ui,sans-serif;
  --kopfgewicht:600;--radius:3px;--schatten:0 14px 40px #000a;--sperrung:.02em}
body[data-welt=rupyxo]{
  --bg:#0b0713;--text:#f6f1ff;--leise:#b6a9cf;--akzent:#ff5a1f;--akzent2:#a855f7;--akzent-text:#fff;--karte:#160f24;--karte-text:#f6f1ff;
  --linie:#a855f733;--kopf:rgba(11,7,19,.88);--kopfschrift:"Anton",Impact,sans-serif;--schrift:"Inter",system-ui,sans-serif;
  --kopfgewicht:400;--radius:10px;--schatten:0 14px 44px #a855f733;--versal:uppercase;--sperrung:.02em}
body[data-welt=live]{
  --bg:#111113;--text:#fff;--leise:#b9b9c2;--akzent:#ffd400;--akzent2:#ff3b30;--akzent-text:#111;--karte:#1c1c20;--karte-text:#fff;
  --linie:#ffffff22;--kopf:rgba(17,17,19,.9);--kopfschrift:"Anton",Impact,sans-serif;--schrift:"Inter",system-ui,sans-serif;
  --kopfgewicht:400;--radius:8px;--versal:uppercase;--sperrung:.02em}
body[data-welt=sammelkarten]{
  --bg:#120d1f;--text:#f5f0ff;--leise:#c2b6dc;--akzent:#ffcf5a;--akzent2:#6b3fa0;--akzent-text:#120d1f;--karte:#1d1530;--karte-text:#f5f0ff;
  --linie:#ffcf5a33;--kopf:rgba(18,13,31,.9);--kopfschrift:"Anton",Impact,sans-serif;--kopfgewicht:400;--radius:14px;--versal:uppercase;--sperrung:.02em;--schatten:0 14px 40px #6b3fa055}
body[data-welt=sammelkarten] .held h1{background:linear-gradient(90deg,#ffe48a,#ff9fd0,#8fd3ff,#b6f5a8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 24px #0008)}
body[data-welt=sammelkarten] .fuss{background:#000}
body[data-welt=dutyfree]{--akzent:#7b4bd6;--akzent-text:#fff}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--schrift);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht);line-height:1.08;margin:0 0 .4em;text-transform:var(--versal);letter-spacing:var(--sperrung)}
a{color:inherit}
img{max-width:100%;display:block}
.innen{max-width:1200px;margin:auto;padding:0 20px}
.zentriert{text-align:center}

/* Kopfleiste – überall gleich, damit man nie verloren geht */
.leiste{position:sticky;top:0;z-index:20;background:var(--kopf);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.leiste .innen{display:flex;align-items:center;gap:16px;min-height:64px}
.leiste .marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:20px;letter-spacing:0;text-transform:none}
.leiste .marke img{height:38px;width:auto}
.leiste .ort{font-size:13px;font-weight:700;color:var(--leise);border-left:1px solid var(--linie);padding-left:16px;white-space:nowrap}
.leiste .ort b{color:var(--text)}
.leiste nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.leiste nav a{text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:999px}
.leiste nav a:hover{background:var(--linie)}
.heimflug{display:inline-flex;align-items:center;gap:8px;background:var(--text);color:var(--bg)!important;text-decoration:none;font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px;white-space:nowrap}
.heimflug:hover{filter:brightness(1.15)}
@media(max-width:760px){.leiste .ort,.leiste nav a.weg{display:none}.leiste .marke span{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--akzent);color:var(--akzent-text);font-weight:800;text-decoration:none;padding:14px 26px;border-radius:999px;border:0;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 6px 18px #0003;transition:transform .15s,filter .15s}
.knopf:hover{transform:translateY(-2px);filter:brightness(1.05)}
.knopf.leer{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.knopf.bald{background:var(--linie);color:var(--leise);box-shadow:none;cursor:default;font-size:14px;padding:9px 14px}
.knopf.bald:hover{transform:none}
body[data-welt=benzilam] .knopf,body[data-welt=stories] .knopf{border-radius:var(--radius)}

/* Kopfbild einer Welt */
.held{position:relative;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden;color:#fff;isolation:isolate}
.held>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.held::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000000a6 0%,#0000004d 45%,#0000 70%),linear-gradient(180deg,#0000 35%,#000b)}
.held .innen{width:100%;padding-bottom:clamp(40px,8vh,90px);padding-top:120px}
.held .schild{display:inline-block;font:800 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:var(--akzent);color:var(--akzent-text);padding:7px 12px;border-radius:999px;margin-bottom:14px}
.held h1{font-size:clamp(44px,8vw,104px);margin-bottom:.15em;text-shadow:0 4px 30px #0007}
.held p.claim{font-size:clamp(18px,2.3vw,26px);max-width:720px;margin:0 0 26px;text-shadow:0 2px 14px #000a}
.held .knoepfe{display:flex;gap:12px;flex-wrap:wrap}

/* Abschnitte */
.abschnitt{padding:clamp(56px,9vw,104px) 0}
.abschnitt h2{font-size:clamp(30px,4.4vw,52px)}
.abschnitt .unter{color:var(--leise);font-size:clamp(17px,1.6vw,19px);max-width:680px;margin:0 0 36px}
.abschnitt.zentriert .unter{margin-left:auto;margin-right:auto}
.band{background:var(--akzent2);color:#fff}
.band .unter{color:#ffffffc4}
body[data-welt=kurswechsel] .band{background:linear-gradient(120deg,#fde9a9,#f6c9d4 55%,#cfe6f7);color:var(--text)}
body[data-welt=kurswechsel] .band .unter{color:var(--leise)}
body[data-welt=stories] .band{background:var(--akzent);color:var(--text)}
body[data-welt=stories] .band .unter{color:#13233fcc}

.raster{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.karte{background:var(--karte);color:var(--karte-text);border-radius:var(--radius);padding:26px;box-shadow:var(--schatten);border:1px solid var(--linie)}
.band .karte{background:#ffffff1c;color:inherit;box-shadow:none;border-color:#ffffff38}
body[data-welt=kurswechsel] .band .karte,body[data-welt=stories] .band .karte{background:#ffffffa8;border-color:#0000}
.karte .ico{font-size:34px;line-height:1;margin-bottom:12px}
.karte h3{font-size:24px}
.karte p{margin:0;color:inherit;opacity:.85}

.zeile{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.zeile img{width:100%;border-radius:var(--radius);box-shadow:var(--schatten)}
@media(max-width:820px){.zeile{grid-template-columns:1fr}}

/* Bücher */
.buecher{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:24px}
.buch{background:var(--karte);color:var(--karte-text);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column;border:1px solid var(--linie);transition:transform .2s}
.buch:hover{transform:translateY(-4px)}
.buch img{width:100%;aspect-ratio:2/3;object-fit:cover}
.buch.a4 img{aspect-ratio:7/10}
.buch .t{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.buch h3{font-size:20px;margin:0}
.buch .klein{font:800 12px/1.3 "Inter",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent)}
body[data-welt=lamoo] .buch .klein{color:#c8432b}
body[data-welt=stories] .buch .klein{color:#a07800}
.buch p{font-size:14.5px;margin:0;flex:1;opacity:.78}
.filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter button{font:inherit;font-weight:800;border:2px solid var(--akzent2);background:transparent;color:var(--text);border-radius:999px;padding:8px 18px;cursor:pointer}
.filter button.akt{background:var(--akzent2);color:#fff}

/* Anschlussflüge */
.anschluss{display:flex;flex-wrap:wrap;gap:12px}
.anschluss a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:999px;background:var(--karte);color:var(--karte-text);border:1px solid var(--linie);box-shadow:var(--schatten);font-family:"Inter",system-ui,sans-serif;font-size:15px}
.anschluss a small{font-weight:700;opacity:.55}
.anschluss a:hover{transform:translateY(-2px)}

.hinweis{border:1px dashed var(--akzent);border-radius:var(--radius);padding:16px 20px;color:var(--leise);font-size:15px}

/* Fuß */
.fuss{background:#0f1a36;color:#cfd6ee;padding:44px 0;font-size:15px}
body[data-welt=benzilam] .fuss,body[data-welt=rupyxo] .fuss,body[data-welt=live] .fuss{background:#000;border-top:1px solid var(--linie)}
.fuss .innen{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.fuss a{color:#fff}

/* ---------- Welt-eigene Kopfbilder ohne Foto ---------- */
.held.gemalt::after{display:none}
.held.innerland-himmel{background:radial-gradient(circle at 20% 20%,#ffd9e8 0,#0000 40%),radial-gradient(circle at 80% 30%,#d6ecff 0,#0000 45%),linear-gradient(180deg,#cdb9f0,#f7d6e4 60%,#ffe9d2);color:#3b2d5c}
.held.innerland-himmel h1,.held.innerland-himmel p.claim{text-shadow:none}
.blase{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffffff2,#ffffff40 45%,#ffffff12 70%);box-shadow:inset 0 0 0 1.5px #ffffff9c;animation:aufsteigen linear infinite}
@keyframes aufsteigen{from{transform:translateY(20vh) scale(.9);opacity:0}15%{opacity:1}to{transform:translateY(-90vh) scale(1.05);opacity:0}}
.qualle{position:absolute;right:8%;bottom:16%;width:clamp(150px,22vw,280px);animation:schweben 6s ease-in-out infinite}
@keyframes schweben{50%{transform:translateY(-22px) rotate(-3deg)}}

.held.sammel-himmel{background:linear-gradient(150deg,#ffe48a,#f2a93b 60%,#e0782d);color:#1e2a5a}
.held.sammel-himmel::after{display:none}
.held.sammel-himmel h1,.held.sammel-himmel p.claim{text-shadow:none}

/* Sammelkarten */
.sammel{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;perspective:900px}
.skarte{width:190px;height:270px;border-radius:16px;background:linear-gradient(160deg,#ffe48a,#f2a93b);padding:10px;box-shadow:0 14px 30px #0004;transform:rotateY(-8deg);color:#1e2a5a}
.skarte:nth-child(2){transform:translateY(-14px)}.skarte:nth-child(3){transform:rotateY(8deg)}
.skarte .bild{height:150px;border-radius:10px;background-size:cover;background-position:center}
.skarte h4{margin:8px 4px 4px;font-size:18px}
.skarte .werte{display:flex;justify-content:space-between;font-size:12px;font-weight:800;padding:0 4px}

/* Ben Zilam: edle Linien */
body[data-welt=benzilam] .held h1{font-weight:500;letter-spacing:.06em}
body[data-welt=benzilam] .abschnitt h2{font-weight:500}
.goldlinie{width:80px;height:1px;background:var(--akzent);margin:0 0 22px}
.zentriert .goldlinie{margin:0 auto 22px}

/* Rupyxo: Neon */
body[data-welt=rupyxo] .held h1{background:linear-gradient(90deg,#ff5a1f,#ffb15c 40%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 28px #ff5a1f55)}
.equalizer{display:flex;gap:6px;align-items:flex-end;height:46px;margin:0 0 22px}
.equalizer i{width:8px;border-radius:4px;background:linear-gradient(#ff5a1f,#a855f7);animation:eq 1s ease-in-out infinite}
@keyframes eq{0%,100%{height:20%}50%{height:100%}}

/* Live: Absperrband */
.absperrband{height:22px;background:repeating-linear-gradient(-45deg,#ffd400 0 22px,#111 22px 44px)}
.onair{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 "Inter",sans-serif;letter-spacing:.12em;border:2px solid var(--akzent2);color:#fff;padding:8px 12px;border-radius:6px}
.onair::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--akzent2);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Der Flug zwischen den Welten ---------- */
html.im-flug,html.im-flug body{overflow:hidden}
.flug{position:fixed;inset:0;z-index:1000;overflow:hidden;font-family:"Inter","Nunito",system-ui,sans-serif;transition:opacity .25s}
.flug.ausblenden{opacity:0}
.flug .himmel{position:absolute;inset:0}
.flug .himmel.nach{opacity:0}
.flug .sterne{position:absolute;inset:0;opacity:0}
.flug .sterne.aus{display:none}
.flug .sterne i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:funkeln 1.6s ease-in-out infinite}
@keyframes funkeln{50%{opacity:.25}}
.flug .gestirn{position:absolute;right:12vw;top:12vh;width:min(16vw,130px);aspect-ratio:1;border-radius:50%;opacity:0}
.flug .gestirn.sonne{background:radial-gradient(circle,#fff7c2 0 55%,#ffe27a 56% 100%);box-shadow:0 0 60px 20px #ffe27a88}
.flug .gestirn.mond{background:radial-gradient(circle at 35% 35%,#fffdf0,#e8e2c8);box-shadow:0 0 50px 8px #fff5c844}
.flug .wolken{position:absolute;inset:0;width:300vw}
.flug .wolken .w{position:absolute}
.flug .boden{position:absolute;left:0;right:0;bottom:0;height:34vh}
.flug .boden .szenerie{position:absolute;left:0;bottom:6vh;width:100%;height:28vh}
.flug .boden .bahn{position:absolute;left:0;right:0;bottom:0;height:6vh;background:#3a3f4a;
  background-image:linear-gradient(90deg,#fff 0 46px,transparent 46px 92px);background-size:92px 4px;background-repeat:repeat-x;background-position:0 50%}
.flug .boden.ziel{transform:translateX(130vw) translateY(30vh)}
.flug.ankunft .boden.ziel{transform:none}
.flug .flieger{position:absolute;left:0;bottom:0;width:clamp(110px,15vw,200px);transform:translate(4vw,-6.4vh);transform-origin:60% 60%;filter:drop-shadow(0 10px 14px #0004)}
.flug .flieger svg{display:block;width:100%;height:auto;animation:wackeln 1.1s ease-in-out infinite}
@keyframes wackeln{50%{transform:translateY(-3px) rotate(.8deg)}}
.flug .propeller{transform-box:fill-box;transform-origin:center;animation:propeller .1s linear infinite}
@keyframes propeller{50%{transform:scaleY(.15)}}
.flug .spur i{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;opacity:.85;animation:puste 1.1s ease-out forwards;pointer-events:none}
@keyframes puste{to{transform:scale(2.6) translateX(-30px);opacity:0}}
.flug .ticket{position:absolute;left:50%;top:clamp(16px,4vh,36px);translate:-50% 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:#fffdf7;color:#14274e;border-radius:14px;padding:12px 18px;box-shadow:0 12px 30px #0003;border-left:8px solid #f2b632;max-width:calc(100vw - 32px);font-size:15px}
.flug .ticket .nr{font:800 13px/1 "JetBrains Mono",ui-monospace,monospace;background:#14274e;color:#ffd84d;padding:6px 8px;border-radius:6px}
.flug .ticket .route{font-weight:800}
.flug .ticket .route b{color:#2f80c6;margin:0 4px}
.flug .ticket .status{color:#5d6478;font-weight:700}
.flug .ueberspringen{position:absolute;right:16px;bottom:calc(6vh + 16px);font:800 14px/1 "Inter",sans-serif;background:#ffffffe6;color:#14274e;border:0;border-radius:999px;padding:11px 16px;cursor:pointer;box-shadow:0 6px 16px #0003}
.flug .ueberspringen:hover{background:#fff}

/* Bewegung beim Scrollen: Elemente schweben herein */
html.mit-js .einblenden{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.mit-js .einblenden.da{opacity:1;transform:none}

.leiste .marke.eigen{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht);text-transform:var(--versal);letter-spacing:.06em;font-size:22px}
.held.innerland-foto{color:#fff}

/* Live: drei Kanäle */
.kanaele-raster{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kanal{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.kanal-bild{position:relative;aspect-ratio:3/2;background:repeating-linear-gradient(-45deg,#ffd400 0 22px,#111 22px 44px);display:grid;place-items:center;font-size:64px}
.kanal-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kanal-status{position:absolute;left:12px;top:12px;background:#ff3b30;color:#fff;font:800 12px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:6px}
.kanal.spaeter .kanal-status{background:#555}
.kanal-text{padding:18px 20px 22px}
.kanal-text small{font:800 12px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent)}
.kanal-text h3{font-size:30px;margin:8px 0 6px}
.kanal-text p{margin:0;color:var(--leise)}

/* RUPYXO auf der Ben-Zilam-Seite: Neon in der Nacht */
.rupyxo-bei-ben{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,10vw,120px) 0;color:#f6f1ff;border-top:1px solid #a855f755}
.rupyxo-bei-ben>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.45}
.rupyxo-bei-ben::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0e0d11ee,#0e0d11b0 60%,#0e0d1180)}
.rupyxo-bei-ben .unter{color:#d9cfee}
.rx-schild{display:inline-block;font:800 12px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff5a1f;margin-bottom:14px}
.rx-titel{font-family:"Anton",Impact,sans-serif!important;font-weight:400!important;font-size:clamp(48px,8vw,96px)!important;letter-spacing:.02em;
  background:linear-gradient(90deg,#ff5a1f,#ffb15c 40%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 28px #ff5a1f55)}
.rupyxo-bei-ben .knopf.bald{background:#ffffff1f;color:#f6f1ff}

/* ---------- Duty Freude: Regale ---------- */
.shop-hinweise{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.regal{padding:40px 0 56px}
.regal:nth-of-type(2n){background:#fbf7ef}
.regal-schild{display:inline-block;background:#1b1d22;color:#fff;border-radius:12px;padding:14px 20px;margin-bottom:24px;box-shadow:0 8px 18px #0002}
.regal-schild h2{font-size:clamp(24px,3vw,34px);margin:0;color:#ffd84d}
.regal-schild p{margin:4px 0 0;color:#c9ceda;font-size:15px}
.regal-reihe{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;scrollbar-width:thin}
.regal-brett{height:16px;margin-top:-6px;border-radius:4px;background:linear-gradient(180deg,#c99a62,#a8784a);box-shadow:0 10px 16px #5a3b1e40}
.produkt{flex:0 0 clamp(200px,22vw,240px);scroll-snap-align:start;background:var(--karte);border-radius:16px;overflow:hidden;box-shadow:var(--schatten);border:1px solid var(--linie);display:flex;flex-direction:column;transition:transform .2s}
.produkt:hover{transform:translateY(-6px)}
.produkt.quer{flex-basis:clamp(280px,40vw,460px)}
.produkt-bild img{width:100%;aspect-ratio:7/10;object-fit:cover}
.produkt.quer .produkt-bild img{aspect-ratio:3/2}
.ohne-bild{aspect-ratio:7/10;display:grid;place-items:center;font-size:56px;background:linear-gradient(150deg,#ffe48a,#f2a93b)}
.produkt-text{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.produkt-text h3{font-size:19px;margin:0}
.produkt-text p{font-size:14px;margin:0;opacity:.78;flex:1}
.produkt-text .klein{font:800 11.5px/1.3 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#c8432b}
.kaufknoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kauf{font:800 12.5px/1 "Inter",sans-serif;padding:9px 11px;border-radius:999px;text-decoration:none;color:#fff;background:#14274e}
.kauf.bald{background:#eee9df;color:#7a7368}
.kauf-amazon:not(.bald){background:#232f3e}.kauf-whatnot:not(.bald){background:#5b2bd6}.kauf-ebay:not(.bald){background:#0064d2}.kauf-tiktok:not(.bald){background:#111}
.fussnote{color:var(--leise);font-size:13px;margin:10px auto 0}

.hinweis.ab18{margin:0 0 28px;border-style:solid;border-color:var(--akzent)}

.rezept-eckdaten{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.rezept-eckdaten span{font:800 13px/1 "Inter",sans-serif;background:#fff3cd;color:#5a4300;border:1px solid #f1d27a;border-radius:999px;padding:7px 11px}