/* keks_1v2 – Astro2Match Glückskeks */
:root{
  --nacht:#120d2e; --nacht2:#2a1856; --violett:#4b2a86;
  --gold:#f1c76a; --gold2:#d9a441; --creme:#fffaf0; --tinte:#3b2410;
  --text:#efe8ff; --leise:#b9aee0;
  --rund:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Nunito,system-ui,sans-serif; color:var(--text);
  background:radial-gradient(120% 80% at 50% 0%,var(--violett) 0%,var(--nacht2) 45%,var(--nacht) 100%) fixed;
  background-color:var(--nacht);
  -webkit-tap-highlight-color:transparent;
}
.himmel{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 28% 72%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 34%,#ffe9b0 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 12%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 82% 46%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 82%,#ffe9b0 50%,transparent 51%),
    radial-gradient(1px 1px at 7% 58%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 90%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 64%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 36% 8%,#fff 50%,transparent 51%);
  animation:funkeln 6s ease-in-out infinite alternate; opacity:.8}
@keyframes funkeln{to{opacity:.45}}

.buehne{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 24px;min-height:100dvh;display:flex;flex-direction:column}
.kopf{text-align:center;margin-bottom:6px}
.marke{display:inline-block;font-weight:700;letter-spacing:.08em;font-size:.8rem;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(90deg,var(--gold),#ffe7a8,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:2.3rem;margin:.1em 0 0;color:var(--gold);line-height:1.05}
.datum{margin:.25em 0 0;color:var(--leise);font-size:.95rem}

.karte{background:rgba(255,255,255,.06);border:1px solid rgba(241,199,106,.25);border-radius:var(--rund);padding:18px 16px;margin-top:14px;text-align:center;backdrop-filter:blur(4px)}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.6rem;margin:0;color:var(--gold)}
.leise{color:var(--leise);margin:.4em 0 1em;font-size:.95rem}
.klein{font-size:.8rem;color:var(--leise);margin:.8em 0 0}
.hinweis{color:#ffd98a}
.vorschau{min-height:1.4em;margin:.8em 0;font-weight:700;color:var(--gold)}

/* Walzen */
.walzen{position:relative;display:flex;gap:8px;height:180px;justify-content:center}
.walze{flex:1;max-width:90px;height:180px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
  outline:none;overscroll-behavior:contain}
.walze.breit{max-width:140px;flex:1.6}
.walze::-webkit-scrollbar{display:none}
.walze div{height:36px;line-height:36px;scroll-snap-align:center;font-size:1.15rem;color:var(--leise);transition:color .15s,transform .15s;user-select:none}
.walze div.aktiv{color:#fff;font-weight:700;transform:scale(1.08)}
.walze .luecke{scroll-snap-align:none}
.walzen-band{position:absolute;left:0;right:0;top:72px;height:36px;border-top:1px solid rgba(241,199,106,.5);border-bottom:1px solid rgba(241,199,106,.5);pointer-events:none;background:rgba(241,199,106,.06);border-radius:8px}

.knopf{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1.05rem;padding:13px 26px;border-radius:999px;
  color:#2b1a05;background:linear-gradient(180deg,#ffe29a,var(--gold) 45%,var(--gold2));box-shadow:0 6px 18px rgba(217,164,65,.35);text-decoration:none;display:inline-block}
.knopf:active{transform:translateY(1px)}
.knopf.hell{background:transparent;color:var(--gold);border:1.5px solid var(--gold);box-shadow:none;padding:10px 22px;font-size:.95rem}
.link{background:none;border:0;color:var(--leise);text-decoration:underline;font:inherit;font-size:.85rem;cursor:pointer}

/* Keks */
.keks-feld{display:flex;flex-direction:column;align-items:center;margin-top:18px}
.keks{position:relative;background:none;border:0;padding:0;cursor:pointer;width:min(78vw,280px);aspect-ratio:240/170;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(241,199,106,.25));animation:schweben 3.2s ease-in-out infinite}
.keks-svg{width:100%;height:100%;overflow:visible}
@keyframes schweben{50%{transform:translateY(-8px)}}
.glanz{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,154,.25),transparent 60%);z-index:-1;animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.4;transform:scale(.92)}}
.tipp{margin:14px 0 0;color:var(--gold);font-weight:700;letter-spacing:.02em;animation:puls 2.4s ease-in-out infinite}
.haelfte{transform-box:fill-box;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.haelfte.links{transform-origin:100% 60%}
.haelfte.rechts{transform-origin:0% 60%}
.keks.wackelt{animation:wackeln .5s ease-in-out}
@keyframes wackeln{20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.keks.offen{animation:none;cursor:default}
.keks.offen .links{transform:translate(-38px,18px) rotate(-28deg)}
.keks.offen .rechts{transform:translate(38px,18px) rotate(28deg)}
.mitte{transition:opacity .3s}
.keks.offen .mitte{opacity:0}
.keks.offen .zettel-spitze{opacity:0;transition:opacity .2s}
.keks.offen .glanz{display:none}
.keks-feld.klein .keks{width:min(46vw,170px);transition:width .6s}
.keks-feld.klein .tipp{display:none}
.krumel{position:absolute;width:6px;height:6px;border-radius:2px;background:#e2a447;pointer-events:none;animation:krumel .9s ease-out forwards}
@keyframes krumel{to{transform:translate(var(--x),var(--y)) rotate(200deg);opacity:0}}

/* Zettel */
.zettel{position:relative;margin:-6px auto 0;width:100%;background:linear-gradient(180deg,#fffdf6,var(--creme));color:var(--tinte);
  border-radius:6px;padding:16px 18px 14px;text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.4);
  transform-origin:50% 0;animation:aufrollen .8s cubic-bezier(.2,.9,.25,1.1) both}
.zettel::before,.zettel::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(0,0,0,.05) 6px 7px)}
.zettel::before{left:0}.zettel::after{right:0}
@keyframes aufrollen{from{transform:scaleX(.08) scaleY(.4);opacity:0}60%{opacity:1}to{transform:none}}
.zettel-kopf{margin:0 0 8px;font-size:.78rem;letter-spacing:.04em;color:#8a5a1c;text-transform:uppercase;font-weight:700}
.spruch{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;line-height:1.25;margin:0;font-weight:700;color:#3a1f08}
.trenner{color:var(--gold2);margin:10px 0 4px}
.weisheit-titel{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#9c7a4e}
.weisheit{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.12rem;margin:.2em 0 .6em;color:#5a3a16}
.zahlen{margin:0;font-size:.85rem;color:#8a5a1c}
.zahlen b{letter-spacing:.12em;color:#b0302a}

.nach{text-align:center;margin-top:14px;animation:einblenden .6s .5s both}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}}
.schon{color:#ffd98a;font-size:.9rem;margin:0 0 6px}
.countdown{margin:0 0 12px;color:var(--leise)}
.countdown b{color:#fff;font-variant-numeric:tabular-nums}
.knopfreihe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wie{margin:14px 0 0;text-align:left;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 14px;font-size:.9rem;color:var(--leise)}
.wie summary{cursor:pointer;color:var(--text);font-weight:600}
.wie p{margin:.6em 0 .2em;line-height:1.45}

.werbung{margin-top:18px;text-align:center;border:1px solid rgba(241,199,106,.3);border-radius:var(--rund);padding:14px 16px;background:linear-gradient(135deg,rgba(75,42,134,.55),rgba(18,13,46,.55))}
.werbung p{margin:0 0 10px;font-size:.92rem;line-height:1.45}
.fuss-links{text-align:center;margin:12px 0 0}
.fuss{margin-top:auto;padding-top:20px;text-align:center;font-size:.75rem;color:var(--leise)}
.fuss a{color:var(--leise)}
.ver{display:block;opacity:.5;margin-top:4px}

.meldung{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#2b1d55;border:1px solid var(--gold2);color:#fff;padding:10px 16px;border-radius:12px;z-index:9;max-width:90vw;font-size:.9rem;text-align:center}

@media (max-height:700px){ h1{font-size:1.9rem} .keks{width:min(64vw,230px)} .spruch{font-size:1.3rem} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ===== keks_1v2: Titelbild, Hintergrund, Sprache, Musik ===== */
.himmel::after{content:"";position:absolute;inset:0;background:url(../bilder/titel_handy.jpg) center/cover no-repeat;opacity:.16;filter:blur(2px)}
@media (orientation:landscape){.himmel::after{background-image:url(../bilder/titel_pc.jpg)}}

.titel{position:fixed;inset:0;z-index:5;background:var(--nacht);overflow:hidden}
.titel-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:titelzoom 18s ease-in-out infinite alternate}
@keyframes titelzoom{to{transform:scale(1.06)}}
.titel-text{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;
  padding:max(70px,env(safe-area-inset-top)) 20px max(34px,env(safe-area-inset-bottom))}
.titel-text h1{font-size:2.7rem;text-shadow:0 2px 18px rgba(0,0,0,.8);margin:0}
.titel-text .marke{font-size:.85rem}
.titel-text p{margin:.3em 0 0;color:#fff;font-size:1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.9);max-width:22em}
.titel-text > span, .titel-text > h1, .titel-text > p{order:0}
.titel-text .knopf{font-size:1.15rem;padding:15px 34px}
/* Handy: Titel oben, Knopf unten */
.titel-text{justify-content:flex-start}
.titel-text .knopf{margin-top:auto}
@media (orientation:landscape){
  .titel-text{left:0;right:auto;width:46%;justify-content:center;align-items:flex-start;text-align:left;padding:40px 40px 40px 6vw}
  .titel-text h1{font-size:clamp(2.6rem,5vw,4.4rem)}
  .titel-text p{font-size:1.2rem}
  .titel-text .knopf{margin-top:26px}
}
.titel.weg{animation:titelweg .6s ease forwards}
@keyframes titelweg{to{opacity:0;visibility:hidden}}

.leiste{position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:8;display:flex;gap:8px;align-items:center}
.sprachwahl{display:flex;border:1px solid rgba(241,199,106,.55);border-radius:999px;overflow:hidden;background:rgba(18,13,46,.6);backdrop-filter:blur(4px)}
.sprachwahl button{appearance:none;border:0;background:none;color:var(--leise);font:700 .8rem Nunito,sans-serif;padding:7px 11px;cursor:pointer}
.sprachwahl button.aktiv{background:var(--gold);color:#2b1a05}
.musikknopf{appearance:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(241,199,106,.55);background:rgba(18,13,46,.6);color:var(--gold);font-size:1.1rem;cursor:pointer;backdrop-filter:blur(4px);position:relative}
.musikknopf.aus{color:var(--leise);opacity:.75}
.musikknopf.aus::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:currentColor;transform:rotate(-40deg)}
.buehne{padding-top:max(52px,env(safe-area-inset-top))}