/* ============================================================
   Version 1.2 – Tag/Nacht, 3D-Block, Ticker, Detailansicht, Rangvergleich (eigene Gestaltung)
   ============================================================ */
.sky { background: #5aaeff; }
.sky .layer { position: absolute; inset: 0 0 22px 0; }
.sky .day { background: linear-gradient(#4aa3ff, #a8dcff 85%); animation: dayOp 180s linear infinite; }
.sky .dusk { background: linear-gradient(#3b2a6b, #ff8a4c 70%, #ffc06b); opacity: 0; animation: duskOp 180s linear infinite; }
.sky .night { background: linear-gradient(#050816, #1b2450 85%); opacity: 0; animation: nightOp 180s linear infinite; }
.sky .stars { opacity: 0; animation: nightOp 180s linear infinite; }
.sky .stars::before { content: ""; position: absolute; width: 3px; height: 3px; left: 0; top: 0; background: transparent;
  box-shadow: 40px 30px #fff, 120px 80px #fff, 210px 40px #cfe8ff, 300px 110px #fff, 380px 25px #fff, 470px 70px #fff8c0, 560px 35px #fff,
  640px 95px #cfe8ff, 720px 50px #fff, 810px 20px #fff, 890px 120px #fff, 980px 60px #fff8c0, 1060px 30px #fff, 1150px 90px #fff,
  1240px 45px #cfe8ff, 1330px 105px #fff, 1420px 35px #fff, 1510px 75px #fff, 1600px 20px #fff8c0, 1690px 100px #fff, 1780px 55px #fff,
  80px 150px #fff, 260px 170px #cfe8ff, 450px 160px #fff, 690px 175px #fff, 930px 150px #fff, 1180px 165px #fff8c0, 1450px 155px #fff, 1720px 170px #fff;
  animation: twinkle 3s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .5; } }
@keyframes dayOp { 0% { opacity: .2; } 6% { opacity: 1; } 44% { opacity: 1; } 52% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: .2; } }
@keyframes duskOp { 0% { opacity: .8; } 7% { opacity: 0; } 43% { opacity: 0; } 50% { opacity: 1; } 57% { opacity: 0; } 93% { opacity: 0; } 100% { opacity: .8; } }
@keyframes nightOp { 0%, 48% { opacity: 0; } 58% { opacity: 1; } 91% { opacity: 1; } 100% { opacity: 0; } }
/* Sonne und Mond kreisen gegenüberliegend um einen Punkt am Horizont */
.sky .orbit { position: absolute; left: 50%; top: 318px; width: 0; height: 0; animation: orbit 180s linear infinite; }
.sky .sun, .sky .moon { position: absolute; width: 46px; height: 46px; left: -23px; }
.sky .sun { top: -300px; background: #ffe14d; box-shadow: inset -7px -7px 0 #f4b400, inset 7px 7px 0 #fff3a0, 0 0 40px 10px rgba(255, 225, 77, .5); }
.sky .moon { top: 254px; background: #e6e8f2; box-shadow: inset -7px -7px 0 #b8bccc, inset 10px 8px 0 -3px #cfd2de, 0 0 30px 6px rgba(220, 230, 255, .35); }
@keyframes orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
/* Berge (Parallaxe) */
.sky .hills { position: absolute; left: 0; right: 0; bottom: 38px; height: 70px; background-repeat: repeat-x; image-rendering: pixelated; }
.sky .h1 { opacity: .55; animation: drift 300s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='70' shape-rendering='crispEdges'%3E%3Cpath fill='%235d7f9c' d='M0 70V50h20V40h20V30h20V20h20V30h20V40h20V30h20V20h20V10h20V20h20V30h20V40h20V50h20V40h20V30h20V40h20V70z'/%3E%3C/svg%3E"); }
.sky .h2 { opacity: .85; bottom: 34px; height: 50px; animation: drift 160s linear infinite reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='50' shape-rendering='crispEdges'%3E%3Cpath fill='%233f6f3a' d='M0 50V30h16V20h16V10h16V20h16V30h16V20h16V10h16V0h16V10h16V20h16V30h16V40h16V30h16V20h16V50z'/%3E%3C/svg%3E"); }
@keyframes drift { from { background-position-x: 0; } to { background-position-x: -960px; } }

/* 3D-Grasblock (eigene Texturen) */
.cube-wrap { perspective: 700px; height: 170px; display: grid; place-items: center; animation: bob 3.5s ease-in-out infinite; }
.cube { width: 110px; height: 110px; position: relative; transform-style: preserve-3d; animation: cubeSpin 14s linear infinite; }
.cube .f { position: absolute; inset: 0; image-rendering: pixelated; background-size: 100% 100%; outline: 2px solid rgba(0, 0, 0, .35); }
.cube .top { transform: rotateX(90deg) translateZ(55px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%235aa83a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%234c9a2a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%2370c04c'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%234c9a2a'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%2370c04c'/%3E%3C/svg%3E"); }
.cube .side { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%238a5a2b'/%3E%3Crect width='8' height='2' fill='%235aa83a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%235aa83a'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%235aa83a'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%236b4220'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23a87038'/%3E%3C/svg%3E"); }
.cube .front { transform: translateZ(55px); }
.cube .back { transform: rotateY(180deg) translateZ(55px); filter: brightness(.7); }
.cube .left { transform: rotateY(-90deg) translateZ(55px); filter: brightness(.8); }
.cube .right { transform: rotateY(90deg) translateZ(55px); filter: brightness(.9); }
.cube .bottom { transform: rotateX(-90deg) translateZ(55px); background: #6b4220; }
@keyframes cubeSpin { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }

/* Titel fällt Buchstabe für Buchstabe herein */
.drop { display: inline-block; animation: drop .5s steps(5) both; }
@keyframes drop { from { transform: translateY(-70px); opacity: 0; } }

/* Glühwürmchen */
.hero { position: relative; }
.fireflies { position: absolute; inset: -20px 0 0 0; pointer-events: none; overflow: hidden; }
.firefly { position: absolute; width: 4px; height: 4px; background: #eaff7a; box-shadow: 0 0 8px 2px rgba(234, 255, 122, .7);
  animation: firefly 7s ease-in-out infinite alternate; }
@keyframes firefly { 50% { opacity: .2; } to { transform: translate(var(--fx), var(--fy)); opacity: .9; } }

/* Live-Ticker */
.ticker { overflow: hidden; border: 3px solid #000; background: #0d0c0b; white-space: nowrap; box-shadow: inset 0 0 0 2px #3a3633; padding: 8px 0; margin-top: 26px; }
.ticker .track { display: inline-block; padding-left: 100%; animation: ticker 45s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .win { margin-right: 48px; text-shadow: 2px 2px 0 #000; }
.ticker .win b { color: #fff; }
.ticker .LEGENDARY { color: #ffd84a; }
.ticker .EPIC { color: #e879f9; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* Produkt: Neigen zur Maus, Detailansicht */
.product { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; }
.product:hover { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.product .art, .product h3 { cursor: zoom-in; }
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: grid; place-items: center; z-index: 80; animation: pageIn .2s ease-out; padding: 16px; }
.modal { width: min(760px, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 240px 1fr; color: var(--gui-text); --accent: #8b5cf6;
  background: var(--gui); border: 3px solid #000; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 10px 10px 0 rgba(0, 0, 0, .5); animation: modalIn .3s steps(5); }
@keyframes modalIn { from { transform: scale(.6); opacity: 0; } }
.modal .big { margin: 14px; display: grid; place-items: center; min-height: 240px; perspective: 400px;
  background: radial-gradient(circle at 50% 65%, var(--accent) 0, transparent 65%), var(--slot); border: 3px solid; border-color: #373737 #fff #fff #373737; }
.modal .big svg { width: 150px; height: 150px; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .45)); animation: spin 5s linear infinite; }
.modal .content { padding: 18px 18px 18px 4px; }
.modal h2 { color: #222; text-shadow: 2px 2px 0 rgba(255, 255, 255, .6); }
.modal .muted { color: #555; }
.modal ul { color: #444; }
.modal .close { float: right; }
@media (max-width: 700px) { .modal { grid-template-columns: 1fr; } .modal .content { padding: 4px 18px 18px; } }

/* Rangvergleich */
.ranktable { margin-bottom: 22px; overflow-x: auto; }
.ranktable table td, .ranktable table th { text-align: center; }
.ranktable td:first-child, .ranktable th:first-child { text-align: left; }
.ranktable .yes { color: var(--ok); font-weight: 700; }
.ranktable .no { color: #6b6b6b; }
.ranktable tbody tr { animation: pageIn .4s ease-out both; }
.ranktable tbody tr:hover { background: #3b3835; }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .sky *, .cube, .cube-wrap, .drop, .firefly, .ticker .track { animation: none !important; }
}

/* ============================================================
   Version 1.3 – Ladebildschirm, Waffenkammer, Seltenheits-Glühen (eigene Gestaltung)
   ============================================================ */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; transition: opacity .6s ease, visibility .6s;
  background: #1b1410 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23362619'/%3E%3Crect x='4' y='6' width='4' height='4' fill='%23402e1f'/%3E%3Crect x='20' y='2' width='4' height='4' fill='%232c1f14'/%3E%3Crect x='12' y='18' width='4' height='4' fill='%23402e1f'/%3E%3Crect x='26' y='24' width='4' height='4' fill='%232c1f14'/%3E%3C/svg%3E"); background-size: 64px; image-rendering: pixelated; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-box { text-align: center; color: #fff; text-shadow: 3px 3px 0 #000; }
.loader-title { font: 900 2.2rem var(--font); letter-spacing: 2px; margin: 18px 0 14px; }
.loader-title b { color: #ffd166; }
.loader-bar { width: 280px; height: 18px; border: 3px solid #000; background: #3b3b3b; box-shadow: inset 2px 2px 0 #222; margin: 0 auto; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#7ee36b, #3c9b2a); animation: loadbar 1.4s steps(14) forwards; }
@keyframes loadbar { to { width: 100%; } }
.loader-tip { margin-top: 10px; color: #cfcfcf; font-size: .9rem; animation: twinkle 1.2s steps(2) infinite; }
.loader-block { width: 64px; height: 64px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; animation: loaderSpin 1.2s steps(8) infinite; }
.loader-block i { border: 2px solid #000; }
.loader-block i:nth-child(1) { background: #5aa83a; } .loader-block i:nth-child(2) { background: #70c04c; }
.loader-block i:nth-child(3) { background: #8a5a2b; } .loader-block i:nth-child(4) { background: #6b4220; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* Waffenkammer */
.armory-hero { text-align: center; padding: 10px 0 6px; }
.armory-hero .lead { max-width: 760px; margin: 10px auto 20px; }
.armory-stats { max-width: 720px; margin: 0 auto 24px; }
.armory-filter { position: sticky; top: 64px; z-index: 5; background: rgba(20, 18, 16, .92); border: 3px solid #000; padding: 12px 12px 4px; margin-bottom: 22px;
  box-shadow: inset 0 0 0 2px #3a3633; backdrop-filter: blur(4px); }
.armory-filter .tabs { margin-bottom: 10px; }
.armory-filter input[type=search] { min-width: 260px; margin-bottom: 8px; }
.rarity-tabs .tab { box-shadow: inset 0 -4px 0 var(--rc, #555); }
.relic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.relic { --rc: #fff; position: relative; display: flex; flex-direction: column; background: #1c1a18; border: 3px solid #000; color: #eee; cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 0 0 var(--rc); outline: none;
  animation: relicIn .5s ease-out both; animation-delay: var(--d, 0ms); transition: transform .15s ease-out, box-shadow .2s; overflow: hidden; }
.relic::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--rc) 35%, transparent), transparent 55%); }
.relic:hover, .relic:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow: inset 0 0 0 2px var(--rc), 0 0 22px 2px color-mix(in srgb, var(--rc) 60%, transparent); }
.relic:hover::before, .relic:focus-visible::before { opacity: 1; }
@keyframes relicIn { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.relic-art { position: relative; height: 140px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 45%, transparent) 0, transparent 60%), #2a2724; border-bottom: 3px solid #000; }
.relic-art svg { filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 70%, transparent)); }
.relic-art .float { animation: bob 3s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.rays { position: absolute; width: 260px; height: 260px; left: 50%; top: 50%; margin: -130px 0 0 -130px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 40%, transparent) 0 10deg, transparent 10deg 30deg); border-radius: 50%;
  mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: raySpin 14s linear infinite; }
.r-EPIC .rays { opacity: .35; }
.r-LEGENDARY .rays { opacity: .7; }
.r-MYTHIC .rays { opacity: .9; animation-duration: 7s; }
@keyframes raySpin { to { transform: rotate(360deg); } }
.r-LEGENDARY, .r-MYTHIC { animation: relicIn .5s ease-out both, relicPulse 2.6s ease-in-out infinite; animation-delay: var(--d, 0ms), 0s; }
@keyframes relicPulse { 50% { box-shadow: inset 0 0 0 2px var(--rc), 0 0 26px 4px color-mix(in srgb, var(--rc) 55%, transparent); } }
.r-MYTHIC h3 { background: linear-gradient(90deg, #ff4d6d, #ffd166, #06d6a0, #55c8ff, #d16bff, #ff4d6d); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 4s linear infinite; text-shadow: none; }
@keyframes rainbow { to { background-position: 300% 0; } }
.relic-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.relic h3 { margin: 0; color: var(--rc); text-shadow: 2px 2px 0 #000; font-size: 1.08rem; }
.relic-meta { display: flex; gap: 10px; font-size: .82rem; }
.relic-meta .rar { color: var(--rc); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.relic-meta .lvl { color: #9a9a9a; }
.ability { color: #ffd166; font-size: .86rem; margin: 0; }
.passive { color: #7ee3ff; font-size: .86rem; margin: 0; }
.stats { list-style: none; padding: 0; margin: 4px 0 0; font-size: .84rem; border-top: 2px dashed #3a3633; padding-top: 6px; }
.stats li { display: flex; justify-content: space-between; }
.stats b { color: #7ee36b; }
.stats b.neg { color: #ff8a8a; }
.relic-modal .big { position: relative; overflow: hidden; }
.relic-modal .big svg { position: relative; }
.relic-modal h2 { color: #222; }
.relic-modal .relic-meta .rar { color: color-mix(in srgb, var(--rc) 70%, #000); }
.relic-modal .lore { font-style: italic; color: #555; }
.relic-modal .ability { color: #8a5a00; } .relic-modal .passive { color: #0b6c8a; }
.relic-modal .stats { color: #333; border-color: #999; } .relic-modal .stats b { color: #1d7a12; } .relic-modal .stats b.neg { color: #b42318; }
.relic-modal .sources { color: #444; font-size: .9rem; }

/* Startseite: Teaser */
.armory-teaser { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: #1c1a18; border: 3px solid #000;
  box-shadow: inset 0 0 0 2px #ffb000, 0 0 30px rgba(255, 176, 0, .25); padding: 22px; }
.teaser-icons { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; }
.teaser-icons .float { animation: bob 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 8px rgba(255, 209, 102, .6)); }
@media (max-width: 700px) { .armory-teaser { grid-template-columns: 1fr; } .armory-filter { position: static; } }

@media (prefers-reduced-motion: reduce) {
  .loader-bar i { animation: none; width: 100%; }
  .loader-block, .loader-tip, .rays, .relic, .relic-art .float, .teaser-icons .float, .r-MYTHIC h3 { animation: none !important; }
}
.armory-stats { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 700px) { .armory-stats { grid-template-columns: 1fr !important; } }
.relic-modal .content h3 { clear: both; margin: 16px 0 6px; color: #222; text-shadow: none; }
.relic-modal .stats { display: block; overflow: visible; }
.relic-modal .stats li { line-height: 1.5; }

/* Ränge mit Laufzeitwahl (Version 1.4) */
.rank-card .price small { font-size: .7em; opacity: .8; }
.durations-mini { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.durations-mini .chip { color: #fff; }
.durations-mini .chip.off { opacity: .35; text-decoration: line-through; }
.duration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.duration { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 10px; cursor: pointer;
  background: var(--slot); color: #fff; border: 3px solid; border-color: #373737 #fff #fff #373737; font: 700 1rem var(--font);
  text-shadow: 2px 2px 0 #000; transition: transform .12s, box-shadow .12s; }
.duration:hover:not(:disabled) { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); }
.duration .d-days { font-size: 1.9rem; line-height: 1; }
.duration .d-unit { font-size: .75rem; opacity: .85; }
.duration .d-price { color: #ffe066; margin-top: 4px; }
.duration .d-per { font-size: .68rem; opacity: .8; }
.duration.best { border-color: #ffd166; box-shadow: 0 0 0 2px #ffd166 inset; }
.duration .badge-best { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #ffd166;
  color: #3a2a00; text-shadow: none; font-size: .62rem; padding: 1px 6px; border: 2px solid #000; }
.duration.off, .duration:disabled { opacity: .4; cursor: not-allowed; }
.duration .d-save { margin-top: 3px; font-size: .65rem; background: #16a34a; color: #fff; text-shadow: none; padding: 0 5px; border: 2px solid #000; }
.duration-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

/* Version 1.5 – Eier, Glut-Ebene */
.icon-egg .float svg { animation: eggWobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes eggWobble { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-9deg); } 72% { transform: rotate(8deg); } 78% { transform: rotate(-5deg); } 84% { transform: rotate(3deg); } }
.modal .big.hatching svg { animation: eggShake .25s steps(2) 6, eggPop .4s 1.6s ease-out forwards; }
.modal .big.hatching svg .lid { animation: lidFly .6s 1.6s ease-out forwards; }
@keyframes eggShake { 0% { transform: rotate(-8deg); } 100% { transform: rotate(8deg); } }
@keyframes eggPop { to { transform: scale(1.12); } }
@keyframes lidFly { to { transform: translate(5px, -9px) rotate(40deg); opacity: 0; } }
.hatch-text { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; text-shadow: 2px 2px 0 #000;
  animation: pageIn .5s ease-out both, twinkle 1.4s steps(2) .5s infinite; }
.modal .big { position: relative; }
.hero .embers { position: absolute; inset: -40px -20px 0 -20px; width: calc(100% + 40px); height: calc(100% + 40px); pointer-events: none; z-index: 0;
  image-rendering: pixelated; }
.hero > div { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .icon-egg .float svg, .modal .big.hatching svg, .hatch-text { animation: none !important; } }

/* ============================================================
   Version 1.7 – Kinointro (eigene Gestaltung, reines CSS)
   ============================================================ */
.cine { position: relative; height: min(92vh, 860px); margin: -28px calc(50% - 50vw) 30px; overflow: hidden; display: grid; place-items: center;
  background: #050816; isolation: isolate; }
.cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .55; }
.cine-layers { position: absolute; inset: 0; z-index: 1; }
.cine-layers > * { position: absolute; will-change: transform; }
.cine-sky { inset: 0; background: radial-gradient(ellipse at 50% 85%, #ff8a4c 0%, #b4436c 22%, #3b1d5e 45%, #0b1030 72%, #050816 100%);
  animation: cineSky 14s ease-in-out infinite alternate; }
@keyframes cineSky { to { filter: hue-rotate(-25deg) brightness(1.1); } }
.cine-rays { inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 95%, rgba(255, 210, 140, .16) 0 4deg, transparent 4deg 14deg);
  mask-image: radial-gradient(circle at 50% 95%, #000 10%, transparent 60%); animation: cineRays 40s linear infinite; }
@keyframes cineRays { to { transform: rotate(14deg); } }
.cine-stars { inset: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 10%, #cfe8ff, transparent),
  radial-gradient(2px 2px at 55% 25%, #fff, transparent), radial-gradient(2px 2px at 75% 12%, #fff8c0, transparent), radial-gradient(2px 2px at 90% 30%, #fff, transparent),
  radial-gradient(1px 1px at 20% 35%, #fff, transparent), radial-gradient(1px 1px at 65% 38%, #fff, transparent), radial-gradient(1px 1px at 45% 5%, #fff, transparent);
  animation: twinkle 3s steps(2) infinite; }
.cine-moon { width: 110px; height: 110px; right: 14%; top: 12%; background: #ffe9b0; box-shadow: inset -14px -14px 0 #f0c66b, 0 0 80px 30px rgba(255, 200, 120, .45);
  image-rendering: pixelated; }
.cine-mount { left: -5%; right: -5%; bottom: 0; background-repeat: repeat-x; background-position: bottom; }
.cine-mount.far { height: 46%; opacity: .7; background-size: 480px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200' shape-rendering='crispEdges'%3E%3Cpath fill='%23261845' d='M0 200V120h40V90h40V60h40V40h40V70h40V100h40V60h40V30h40V50h40V80h40V110h40V90h40V200z'/%3E%3C/svg%3E"); }
.cine-mount.near { height: 34%; background-size: 360px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='150' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c26' d='M0 150V90h30V70h30V50h30V80h30V100h30V70h30V40h30V60h30V90h30V110h30V80h30V150z'/%3E%3C/svg%3E"); }
.cine-castle { left: 50%; bottom: 8%; width: 380px; height: 260px; margin-left: -190px; background: #0a0614;
  clip-path: polygon(0 100%, 0 40%, 6% 40%, 6% 30%, 12% 30%, 12% 40%, 18% 40%, 18% 22%, 14% 22%, 21% 6%, 28% 22%, 24% 22%, 24% 45%, 38% 45%, 38% 25%,
    44% 25%, 44% 18%, 50% 0, 56% 18%, 56% 25%, 62% 25%, 62% 45%, 76% 45%, 76% 22%, 72% 22%, 79% 6%, 86% 22%, 82% 22%, 82% 40%, 88% 40%, 88% 30%, 94% 30%, 94% 40%, 100% 40%, 100% 100%); }
.cine-castle .win { position: absolute; width: 8px; height: 12px; background: #ffcf5a; box-shadow: 0 0 10px 3px rgba(255, 190, 70, .8); opacity: 0;
  animation: winOn .4s steps(2) var(--d) forwards, winFlicker 4s ease-in-out calc(var(--d) + 1s) infinite; }
.cine-castle .win:nth-child(1) { left: 20%; top: 32%; } .cine-castle .win:nth-child(2) { left: 78%; top: 32%; } .cine-castle .win:nth-child(3) { left: 49%; top: 30%; }
.cine-castle .win:nth-child(4) { left: 42%; top: 50%; } .cine-castle .win:nth-child(5) { left: 56%; top: 50%; } .cine-castle .win:nth-child(6) { left: 30%; top: 60%; }
.cine-castle .win:nth-child(7) { left: 68%; top: 60%; } .cine-castle .win:nth-child(8) { left: 10%; top: 55%; } .cine-castle .win:nth-child(9) { left: 88%; top: 55%; }
.cine-castle .win:nth-child(10) { left: 49%; top: 66%; width: 14px; height: 30px; } .cine-castle .win:nth-child(11) { left: 20%; top: 52%; }
.cine-castle .win:nth-child(12) { left: 78%; top: 52%; } .cine-castle .win:nth-child(13) { left: 36%; top: 74%; } .cine-castle .win:nth-child(14) { left: 62%; top: 74%; }
@keyframes winOn { to { opacity: 1; } }
@keyframes winFlicker { 50% { opacity: .7; } }
.cine-fog { left: -50%; width: 200%; height: 30%; bottom: 0; background: radial-gradient(ellipse at center, rgba(180, 160, 255, .22), transparent 60%); }
.cine-fog.f1 { animation: fog 26s linear infinite; } .cine-fog.f2 { bottom: 10%; opacity: .6; animation: fog 40s linear infinite reverse; }
@keyframes fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.cine-embers { inset: 0; }
.cine-bars i { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 3; animation: bars 1.6s ease-out .2s both; }
.cine-bars i:first-child { top: 0; } .cine-bars i:last-child { bottom: 0; }
@keyframes bars { from { height: 50vh; } }
.cine-text { position: relative; z-index: 4; text-align: center; color: #fff; text-shadow: 0 4px 0 #000, 0 0 30px rgba(0, 0, 0, .8); }
.cine-line { margin: 0 0 6px; font-size: clamp(1rem, 2.4vw, 1.6rem); letter-spacing: .25em; text-transform: uppercase; opacity: 0;
  animation: lineIn 1s ease-out var(--d) both, lineOut .6s ease-in calc(var(--d) + 2.2s) forwards; }
@keyframes lineIn { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } to { opacity: 1; } }
@keyframes lineOut { to { opacity: .35; } }
.cine-title { font-size: clamp(2.6rem, 9vw, 7rem); margin: 18px 0 10px; letter-spacing: .06em; opacity: 0; animation: titleIn 1.2s cubic-bezier(.2, .9, .3, 1.3) var(--d) both;
  background: linear-gradient(90deg, #fff 0%, #ffe9a8 40%, #fff 50%, #ffd166 60%, #fff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 6px 0 #000); }
.cine-title span { color: transparent; }
.cine-title { animation: titleIn 1.2s cubic-bezier(.2, .9, .3, 1.3) var(--d) both, shine 4s linear calc(var(--d) + 1.2s) infinite; }
@keyframes titleIn { from { opacity: 0; transform: scale(2.4); filter: blur(10px); } to { opacity: 1; transform: none; } }
@keyframes shine { to { background-position: -300% 0; } }
.cine-cta { display: flex; gap: 14px; justify-content: center; opacity: 0; animation: lineIn .8s ease-out var(--d) both; }
.btn.big { padding: 14px 26px; font-size: 1.1rem; }
.cine-scroll { position: absolute; bottom: 11vh; left: 50%; z-index: 4; color: #fff; transform: translateX(-50%); animation: bob 1.6s ease-in-out infinite; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .cine *, .cine-castle .win { animation: none !important; opacity: 1 !important; }
}

/* Kinointro kompakter (Rückmeldung: zu groß) */
.cine { height: min(60vh, 520px); margin-bottom: 24px; }
.cine-bars i { height: 3.5vh; animation: bars 1.6s ease-out .2s both, barsAway 1.2s ease-in 6s forwards; }
@keyframes barsAway { to { height: 0; } }
.cine-line { font-size: clamp(.8rem, 1.6vw, 1.15rem); margin-bottom: 4px; }
.cine-title { font-size: clamp(2rem, 6vw, 4.4rem); margin: 10px 0 14px; }
.cine-moon { width: 70px; height: 70px; top: 16%; right: 12%; box-shadow: inset -9px -9px 0 #f0c66b, 0 0 60px 20px rgba(255, 200, 120, .45); }
.cine-castle { width: 300px; height: 200px; margin-left: -150px; bottom: 4%; }
.cine-scroll { bottom: 2.5vh; font-size: .8rem; }
.btn.big { padding: 10px 20px; font-size: 1rem; }
@media (max-width: 700px) { .cine { height: 70vh; } .cine-scroll { display: none; } }
/* noch kompakter */
.cine { height: min(46vh, 400px); }
.cine-title { font-size: clamp(1.8rem, 5vw, 3.6rem); margin: 6px 0 10px; }
.cine-line { font-size: clamp(.75rem, 1.3vw, 1rem); }
.cine-bars i { height: 2.5vh; }
.cine-castle { width: 240px; height: 160px; margin-left: -120px; }

/* ============================================================
   Version 1.8 – Weihnachtsdesign (nur während des Winter-Events)
   ============================================================ */
.snowfall { position: fixed; inset: 0; pointer-events: none; z-index: 90; image-rendering: pixelated; }
.winter-banner { position: relative; z-index: 5; text-align: center; padding: 8px 12px; font-size: .9rem; color: #fff; text-shadow: 2px 2px 0 #000;
  background: repeating-linear-gradient(135deg, #b91c1c 0 18px, #991b1b 18px 36px); border-bottom: 3px solid #000; box-shadow: inset 0 -3px 0 #16a34a; }
.winter-banner a { color: #fde68a; font-weight: 700; }
.winter-banner .muted { color: #fecaca; }
body.winter .topbar { box-shadow: inset 0 -4px 0 #16a34a, inset 0 -8px 0 #b91c1c; }
body.winter .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: radial-gradient(circle, #facc15 2px, transparent 3px) 0 0 / 22px 6px, radial-gradient(circle, #ef4444 2px, transparent 3px) 11px 0 / 22px 6px;
  animation: lights 1.2s steps(2) infinite; }
@keyframes lights { 50% { filter: hue-rotate(120deg) brightness(1.3); } }
body.winter .cine-sky { background: radial-gradient(ellipse at 50% 85%, #93c5fd 0%, #3b82f6 22%, #1e3a8a 50%, #0b1030 78%, #050816 100%); }
body.winter .cine-title { background: linear-gradient(90deg, #fff 0%, #fecaca 40%, #fff 50%, #bbf7d0 60%, #fff 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; }
body.winter .product { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, .35); }
.tag.stock { background: #b45309; color: #fff; }
.tag.stock.out { background: #4b5563; }
.tag.season { background: #b91c1c; color: #fff; left: auto; right: 6px; }

/* Rechtstexte */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.legal-tabs a { padding: 4px 10px; border: 2px solid #000; background: rgba(255,255,255,.06); font-size: .85rem; }
.legal-tabs a.active { background: #f59e0b; color: #000; }
.legal .form { display: grid; gap: 6px; max-width: 520px; }
.legal .form input, .legal .form textarea { width: 100%; }
@media print { .topbar, .footer, .winter-banner, .snowfall, nav { display: none !important; } }

/* ============================================================
   Version 1.9 – mehr Weihnachten (nur während des Winter-Events)
   ============================================================ */
.px-glow { filter: drop-shadow(0 0 .4px #fff59d); }
.cine-snowground { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 3;
  background: linear-gradient(#f8fafc, #dbeafe); box-shadow: 0 -6px 0 #e2e8f0, 0 -12px 0 rgba(255,255,255,.5);
  clip-path: polygon(0 30%, 6% 18%, 12% 26%, 20% 12%, 28% 24%, 36% 14%, 44% 22%, 52% 10%, 60% 24%, 68% 16%, 76% 26%, 84% 12%, 92% 22%, 100% 16%, 100% 100%, 0 100%); }
.cine-xtree { position: absolute; z-index: 4; bottom: 8%; left: 7%; filter: drop-shadow(0 0 18px rgba(250, 204, 21, .45)); }
.cine-xtree.small { left: auto; right: 9%; bottom: 10%; opacity: .9; }
.cine-xtree svg rect.px-glow { animation: twinkle 1.4s steps(2) infinite; }
.cine-xtree svg rect.px-glow:nth-child(3n) { animation-delay: .7s; }
@keyframes twinkle { 50% { opacity: .35; } }
.cine-sleigh { position: absolute; z-index: 5; top: 16%; left: -260px; animation: sleigh 22s linear infinite; filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.cine-sleigh::after { content: ""; position: absolute; right: 100%; top: 70%; width: 220px; height: 4px; margin-right: -12px;
  background: radial-gradient(circle, #fde68a 1.5px, transparent 2.5px) 0 0 / 12px 4px; opacity: .8; animation: sparkle 0.6s steps(2) infinite; }
.cine-sleigh svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes sleigh { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 520px)); } }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes sparkle { 50% { opacity: .3; } }
body.winter .cine-mount, body.winter .cine-castle { filter: drop-shadow(0 -3px 0 #f1f5f9); }
body.winter .cine-moon { box-shadow: 0 0 60px 20px rgba(191, 219, 254, .45); }
body.winter .cine-embers { filter: grayscale(1) brightness(2); }
/* Startseite */
.winter-section { position: relative; padding: 18px; border: 4px solid #000;
  background: linear-gradient(180deg, rgba(185, 28, 28, .28), rgba(21, 128, 61, .22)); box-shadow: inset 0 6px 0 #f8fafc; }
.winter-section h2 { color: #fff; text-shadow: 3px 3px 0 #b91c1c; }
.advent-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 16px 0; }
@media (max-width: 700px) { .advent-grid { grid-template-columns: repeat(4, 1fr); } }
.advent-grid .door { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #000;
  background: repeating-linear-gradient(45deg, #b91c1c 0 10px, #991b1b 10px 20px); box-shadow: inset 0 0 0 3px #facc15; }
.advent-grid .door:nth-child(even) { background: repeating-linear-gradient(45deg, #15803d 0 10px, #166534 10px 20px); }
.advent-grid .door .num { font-size: 1.4rem; font-weight: 800; color: #fff; text-shadow: 2px 2px 0 #000; }
.advent-grid .door.locked { filter: saturate(.55) brightness(.75); }
.advent-grid .door.past { opacity: .55; }
.advent-grid .door.today { animation: doorglow 1.2s ease-in-out infinite; z-index: 1; }
.advent-grid .door .hint { position: absolute; bottom: 4px; font-size: .7rem; background: #000; color: #fde68a; padding: 0 4px; }
.advent-grid .door.special { background: radial-gradient(circle, #fde68a, #f59e0b 60%, #b45309); }
.advent-grid .door .star { position: absolute; top: 2px; right: 6px; color: #fff; text-shadow: 0 0 6px #fff; }
@keyframes doorglow { 50% { transform: scale(1.06); box-shadow: inset 0 0 0 3px #facc15, 0 0 22px #fde68a; } }
/* Schnee auf Bedienelementen und liegender Schnee am Seitenrand */
body.winter .panel, body.winter .product { position: relative; }
body.winter .panel::before, body.winter .product::before { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; height: 8px; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 10px 8px, #fff 6px, transparent 7px) 0 0 / 22px 8px, linear-gradient(#fff, #fff) 0 6px / 100% 2px no-repeat; }
body.winter .btn { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .85), 4px 4px 0 #000; }
body.winter h1 .grad, body.winter .grad { background: linear-gradient(90deg, #fff, #fca5a5, #fff, #86efac, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: candy 6s linear infinite; }
@keyframes candy { to { background-position: 200% 0; } }
body.winter .footer::before { background: #f8fafc; box-shadow: inset 0 -4px 0 #cbd5e1; }
body.winter .footer::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; pointer-events: none;
  background: radial-gradient(circle at 16px 18px, #fff 14px, transparent 15px) 0 0 / 34px 18px repeat-x; opacity: .9; }

.legal .form textarea { background: #000; color: #fff; border: 3px solid #555; padding: 8px; font: inherit; }

/* ============================================================
   Monatstopf (Handelshaus)
   ============================================================ */
.pot-section { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 22px;
  border: 4px solid #000; background: linear-gradient(135deg, rgba(250, 204, 21, .18), rgba(180, 83, 9, .22)); box-shadow: inset 0 4px 0 rgba(255,255,255,.15); }
@media (max-width: 700px) { .pot-section { grid-template-columns: 1fr; } }
.pot-section h2 { color: #fde68a; text-shadow: 3px 3px 0 #92400e; }
.pot-big { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; color: #facc15; text-shadow: 3px 3px 0 #000, 0 0 24px rgba(250, 204, 21, .5); line-height: 1.1; }
.pot-big small { font-size: 1rem; color: #fde68a; }
.pot-chest { position: relative; height: 180px; image-rendering: pixelated;
  background: linear-gradient(#b45309 0 0) 30px 90px / 160px 80px no-repeat, linear-gradient(#78350f 0 0) 26px 70px / 168px 26px no-repeat,
    linear-gradient(#facc15 0 0) 100px 80px / 20px 30px no-repeat, radial-gradient(ellipse at 50% 72%, rgba(250, 204, 21, .55), transparent 60%); }
.pot-chest i { position: absolute; left: var(--x); top: 60px; width: 10px; height: 10px; background: #facc15; box-shadow: inset -3px -3px 0 #b45309, 0 0 6px #fde68a;
  animation: coinup 3s ease-in infinite; animation-delay: var(--d); opacity: 0; }
@keyframes coinup { 0% { transform: translateY(40px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-60px) rotate(180deg); opacity: 0; } }
.pot-winners { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.pot-winners li { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: rgba(0, 0, 0, .25); border: 2px solid #000; }
.pot-last h3 { margin: 12px 0 2px; font-size: 1rem; color: #fde68a; }

/* Startseite mit Kino-Intro: nur ein Hintergrund (dunkle Nacht → Erde), kein alter Himmel dahinter */
body.has-cine { background: linear-gradient(#050816 0, #120d1c 70vh, #1f1a17 100vh) fixed; }
body.has-cine .sky { display: none; }

/* ---------- Zahlarten ---------- */
.pm-title { margin: 14px 0 8px; font-size: 1rem; }
.paymethods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.paymethod { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .1); color: inherit; font: inherit; transition: transform .12s, border-color .12s, background .12s; }
.paymethod:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pm) 60%, transparent); }
.paymethod.on { border-color: var(--pm); background: color-mix(in srgb, var(--pm) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm) 25%, transparent); }
.pm-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 1.15rem;
  background: var(--pm); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pm-text { display: flex; flex-direction: column; line-height: 1.2; }
.pm-text small { opacity: .7; font-size: .78rem; }
.badge-test { font-size: .7rem; vertical-align: middle; padding: 2px 8px; border-radius: 999px; background: #f59e0b; color: #111; letter-spacing: .05em; }

/* ---------- Server-Logo (Startseite) ---------- */
.hero-logo { display: block; width: min(260px, 60vw); height: auto; margin: 0 0 10px; filter: drop-shadow(0 10px 28px rgba(168, 85, 247, .45));
  animation: logo-float 5s ease-in-out infinite; }
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }