/* =========================================================
   PIXELART GEBURTSTAGS-EINLADUNG
   Stil: isometrisch-fröhlich, kräftige Farben, retro-game
   ========================================================= */

:root {
  --sky-top: #5ec5ff;
  --sky-bot: #b6ecff;
  --ink: #2b1d3a;
  --paper: #fff7e6;
  --paper-shadow: #e8d5a8;
  --yes: #3ddc84;
  --yes-dark: #1ea85c;
  --no: #ff7a7a;
  --accent: #ffd23f;
  --accent2: #ff6ec7;
  --cal: #6c8cff;
  --pixel: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { image-rendering: pixelated; }

body {
  font-family: "VT323", monospace;
  font-size: 20px;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
  position: relative;
}

/* ---------- HIMMEL & WOLKEN (dezenter Seiten-Hintergrund) ---------- */
.scene-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.sun {
  position: absolute; top: 6%; right: 8%;
  width: 90px; height: 90px; background: var(--accent);
  box-shadow:
    0 0 0 8px rgba(255,210,63,.4),
    0 0 0 18px rgba(255,210,63,.2);
  /* pixeliger Kreis durch clip-path-Stufen */
  clip-path: polygon(
    25% 0, 75% 0, 75% 12%, 88% 12%, 88% 25%, 100% 25%, 100% 75%,
    88% 75%, 88% 88%, 75% 88%, 75% 100%, 25% 100%, 25% 88%, 12% 88%,
    12% 75%, 0 75%, 0 25%, 12% 25%, 12% 12%, 25% 12%);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.08); } }

.cloud {
  position: absolute;
  background: #fff;
  box-shadow:
    24px 0 0 #fff, 48px 0 0 #fff,
    24px -16px 0 #fff, 12px -16px 0 #fff;
  width: 24px; height: 16px;
  opacity: .9;
}
.c1 { top: 18%; left: -10%; animation: drift 38s linear infinite; }
.c2 { top: 35%; left: -10%; transform: scale(1.6); animation: drift 55s linear infinite 4s; }
.c3 { top: 10%; left: -10%; transform: scale(.8); animation: drift 28s linear infinite 10s; }
@keyframes drift { to { left: 120%; } }

/* ---------- SCREENS ---------- */
.screen {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
}
.hidden { display: none !important; }

/* ---------- KARTE ---------- */
.card {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--paper);
  border: var(--pixel) solid var(--ink);
  box-shadow:
    8px 8px 0 var(--ink),
    inset 0 0 0 var(--pixel) var(--paper-shadow);
  padding: 36px 28px 30px;
}
.card.center { text-align: center; }

/* pixeliger Eck-Akzent */
.card::before, .card::after {
  content:""; position:absolute; width:12px; height:12px;
  background: var(--accent2);
}
.card::before { top:-8px; left:-8px; }
.card::after  { bottom:-8px; right:-8px; }

/* ---------- TITEL ---------- */
.title {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 4.5vw, 30px);
  line-height: 1.4;
  text-align: center;
  color: var(--accent2);
  text-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 10px;
}
.glow { animation: glow 2.5s ease-in-out infinite; }
@keyframes glow {
  50% { text-shadow: 3px 3px 0 var(--ink), 0 0 14px var(--accent2); }
}
.subtitle { text-align:center; font-size: 24px; margin-bottom: 22px; }

/* ---------- BALLONS ---------- */
.pixel-banner { display:flex; justify-content:center; gap:18px; margin-bottom:8px; }
.balloon {
  width: 20px; height: 26px; display:inline-block; position:relative;
  border: 3px solid var(--ink);
  animation: bob 2.4s ease-in-out infinite;
}
.balloon::after {
  content:""; position:absolute; bottom:-10px; left:50%;
  width:2px; height:10px; background: var(--ink); transform:translateX(-50%);
}
.b1 { background: var(--no); }
.b2 { background: var(--yes); animation-delay:.3s; }
.b3 { background: var(--cal); animation-delay:.6s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- INFO-BOXEN ---------- */
.info-grid { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.info-box {
  flex:1; min-width:160px;
  background:#fff; border:3px solid var(--ink);
  padding:10px 12px; box-shadow:4px 4px 0 var(--ink);
}
.info-label {
  display:block; font-family:"Press Start 2P"; font-size:9px;
  color:var(--accent2); margin-bottom:6px;
}
.info-value { font-size:22px; }

.desc { font-size:21px; line-height:1.4; margin-bottom:16px; }

/* ---------- PROGRAMM ---------- */
.programm { list-style:none; margin-bottom:24px; }
.programm li {
  padding:6px 0 6px 26px; position:relative; font-size:21px;
  border-bottom:2px dotted var(--paper-shadow);
}
.programm li::before {
  content:"►"; position:absolute; left:4px; color:var(--yes-dark);
}

/* ---------- FORMULAR ---------- */
.form { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; gap:14px; }
.row .field { flex:1; }
.field { display:flex; flex-direction:column; gap:5px; }
.field span {
  font-family:"Press Start 2P"; font-size:9px; color:var(--ink);
}
input, textarea {
  font-family:"VT323", monospace; font-size:20px;
  padding:9px 11px; background:#fff;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow: inset 2px 2px 0 var(--paper-shadow);
}
input:focus, textarea:focus { outline:3px solid var(--accent); }
textarea { resize:vertical; }

/* ---------- BUTTONS ---------- */
.btn-zone { display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.btn {
  font-family:"Press Start 2P", monospace; font-size:12px;
  padding:14px 18px; cursor:pointer; text-decoration:none;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition: transform .05s, box-shadow .05s;
  display:inline-block; text-align:center; user-select:none;
}
.btn:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-yes { background:var(--yes); flex:1; min-width:180px; font-size:14px; }
.btn-yes:hover { background:var(--yes-dark); color:#fff; }
.btn-no {
  background:var(--no); font-size:11px; padding:11px 14px;
  position:relative; transition: left .18s ease, top .18s ease, transform .05s;
}
.btn-cal { background:var(--cal); color:#fff; flex:1; min-width:160px; font-size:11px; }
.btn-cal:hover { filter:brightness(1.12); }
.btn-ghost {
  background:transparent; box-shadow:none; border:none;
  font-size:11px; margin-top:18px; text-decoration:underline;
}
.form-msg { font-size:20px; min-height:24px; text-align:center; }
.form-msg.err { color:#c0392b; }
.form-msg.ok  { color:var(--yes-dark); }

/* ---------- ZUSAGE-SEITE ---------- */
.big { font-size:30px; margin:10px 0; }
.cal-head { font-family:"Press Start 2P"; font-size:11px; margin:24px 0 14px; }
.confetti-zone { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti {
  position:absolute; width:10px; height:10px; top:-12px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(540deg); opacity:.2; }
}

/* ---------- DOOMSDAY ---------- */
.doom {
  background:#0a0a0f;
  background-image:
    radial-gradient(circle at 50% 0%, #1a0a2a 0%, #0a0a0f 70%);
}
.static-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image: repeating-linear-gradient(
    0deg, #fff 0 1px, transparent 1px 3px);
  animation: flick .1s steps(2) infinite;
}
@keyframes flick { 50% { opacity:.03; } }
.doom-card {
  background:#15101f; border-color:#ff3b6b;
  box-shadow:8px 8px 0 #ff3b6b, inset 0 0 0 4px #2a1535;
  color:#ffd6e6; text-align:center; z-index:1;
}
.doom-card::before, .doom-card::after { background:#ff3b6b; }
.doom-title {
  font-family:"Press Start 2P"; font-size:16px; color:#ff3b6b;
  text-shadow:2px 2px 0 #000; margin-bottom:18px;
  animation: shake 3s ease-in-out infinite;
}
@keyframes shake {
  92%,100%{transform:translateX(0);} 94%{transform:translateX(-3px);}
  96%{transform:translateX(3px);} 98%{transform:translateX(-2px);}
}
.doom-text { font-size:22px; line-height:1.4; margin-bottom:22px; }
.doom-text em { color:#ff3b6b; }

/* RSVP-Hinweis unter den Stichpunkten */
.rsvp-hint {
  font-size:19px; text-align:center; margin:4px 0 20px;
  padding:10px 12px; background:#fff3c4; border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}

/* Mini-Spiel: Festhalte-Balken */
.puzzle { margin:0 auto 12px; }
.holdbar {
  position:relative; width:100%; height:34px; margin:6px 0 14px;
  background:#241733; border:3px solid #ff3b6b; box-shadow:3px 3px 0 #000;
  overflow:hidden;
}
.holdbar-fill {
  position:absolute; inset:0; width:0%;
  background:repeating-linear-gradient(45deg,#ff3b6b 0 10px,#ff5c84 10px 20px);
  transition:width .03s linear;
}
.holdbar-pct {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Press Start 2P"; font-size:12px; color:#fff; text-shadow:1px 1px 0 #000;
}
.weepers {
  display:flex; justify-content:center; gap:8px; font-size:22px; margin-bottom:10px;
}
.weepers span { animation: weep 1.6s ease-in-out infinite; }
.weepers span:nth-child(2){ animation-delay:.2s; }
.weepers span:nth-child(3){ animation-delay:.4s; }
.weepers span:nth-child(4){ animation-delay:.6s; }
.weepers span:nth-child(5){ animation-delay:.8s; }
@keyframes weep { 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-4px) rotate(4deg);} }
#confirmNo { width:100%; user-select:none; -webkit-user-select:none; touch-action:none; }
.puzzle-hint {
  font-family:"Press Start 2P"; font-size:10px; color:var(--accent);
  margin-bottom:14px; line-height:1.6;
}
.lock { display:flex; justify-content:center; gap:12px; margin-bottom:14px; }
.dial {
  font-family:"Press Start 2P"; font-size:22px;
  width:54px; height:64px; cursor:pointer;
  background:#241733; color:#ffd6e6; border:3px solid #ff3b6b;
  box-shadow:3px 3px 0 #000;
}
.dial:active { transform:translate(3px,3px); box-shadow:0 0 0 #000; }
.puzzle-status { font-size:19px; margin-bottom:16px; min-height:22px; }
.btn-doom {
  background:#ff3b6b; color:#fff; border-color:#000;
  box-shadow:4px 4px 0 #000; font-size:11px;
}
.btn-doom:disabled { opacity:.35; cursor:not-allowed; }
.btn-rescue {
  background:var(--yes); color:var(--ink); font-size:12px;
  margin-top:20px; display:block; width:100%;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:520px){
  .row { flex-direction:column; }
  .btn-zone { flex-direction:column; }
  .btn-yes, .btn-no, .btn-cal { width:100%; }
}

/* =========================================================
   ANIMIERTE GARTENSZENE v2 – Banner oben in der Karte
   ========================================================= */
.scene {
  position: relative;
  height: 200px;
  margin: -36px -28px 20px;   /* zieht das Banner an die Kartenränder (Card-Padding ausgleichen) */
  background: linear-gradient(180deg, #5ec5ff 0%, #b6ecff 100%);
  border-bottom: var(--pixel) solid var(--ink);
  overflow: hidden;
}
@media (max-width:520px){
  .scene { height: 168px; margin: -36px -28px 18px; }
}

/* ---- Nacht-Banner unten ---- */
.scene.night {
  margin: 22px -28px -30px;   /* an den unteren Kartenrand */
  border-bottom: none;
  border-top: var(--pixel) solid var(--ink);
  background: linear-gradient(180deg, #0b1437 0%, #1d2b5c 55%, #2a3a6b 100%);
}
@media (max-width:520px){
  .scene.night { margin: 20px -28px -30px; }
}

/* Mond + Sterne */
.moon {
  position:absolute; top:18px; right:24px; width:34px; height:34px;
  background:#f6f1c9; border-radius:50%;
  box-shadow:0 0 14px 4px #f6f1c980, inset -10px -2px 0 -2px #d9d090;
}
.star {
  position:absolute; width:3px; height:3px; background:#fff; border-radius:50%;
  animation: twinkle 3s ease-in-out infinite;
}
.st1{ top:20px; left:18%; } .st2{ top:40px; left:34%; animation-delay:.4s; }
.st3{ top:16px; left:52%; animation-delay:.8s; } .st4{ top:50px; left:64%; animation-delay:1.2s; }
.st5{ top:28px; left:8%;  animation-delay:1.6s; } .st6{ top:60px; left:44%; animation-delay:2s; }
.st7{ top:14px; left:76%; animation-delay:.6s; } .st8{ top:46px; left:88%; animation-delay:1.4s; }
@keyframes twinkle { 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.3);} }

/* dunkle Wiese */
.ground-night {
  background: repeating-linear-gradient(90deg, #2e5a30 0 18px, #2a5430 18px 36px);
  border-top-color:#234824;
}
.ground-night .hedge {
  background: radial-gradient(circle at 24px 24px, #1c4a1e 22px, transparent 23px) 0 0/48px 48px repeat-x, #214f24;
}
.ground-night .tree .crown { background:#1f6e2c; box-shadow:-30px 16px 0 -10px #1f6e2c, 30px 16px 0 -10px #1f6e2c, 0 0 0 6px #1a5e26 inset; }
.ground-night .tree .trunk { background:#5a3618; }

/* TV-Station nachts links */
.tv-station-night { left: 22%; bottom: 36px; transform: translateX(-50%); }
.tv-station-night .screen-tv { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); }

/* Lagerfeuer */
.campfire-station { right: 22%; bottom: 36px; }
.campfire { position:absolute; bottom:0; left:0; width:40px; height:24px; }
.campfire .log {
  position:absolute; bottom:0; width:34px; height:7px; background:#6b3f1d; border-radius:3px;
}
.campfire .log.lg1 { transform: rotate(12deg); left:2px; }
.campfire .log.lg2 { transform: rotate(-12deg); left:4px; background:#7a4a23; }
.campfire .flame {
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:12px; height:20px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:#ff7b00; filter:drop-shadow(0 0 8px #ff6a00aa);
  animation: fire .5s ease-in-out infinite alternate;
}
.campfire .flame.fl1 { background:#ff3d00; height:24px; }
.campfire .flame.fl2 { background:#ff9d00; height:18px; animation-delay:.15s; }
.campfire .flame.fl3 { background:#ffd000; width:7px; height:12px; animation-delay:.3s; }
@keyframes fire {
  0% { transform:translateX(-50%) scaleY(1) scaleX(1); }
  100% { transform:translateX(-50%) scaleY(1.18) scaleX(.88); }
}
.campfire .spark {
  position:absolute; bottom:18px; left:50%; width:3px; height:3px;
  background:#ffd36b; border-radius:50%; opacity:0;
  animation: sparkfly 1.6s ease-out infinite;
}
.campfire .spark.sp1 { --sx:-14px; animation-delay:0s; }
.campfire .spark.sp2 { --sx:6px;  animation-delay:.5s; }
.campfire .spark.sp3 { --sx:16px; animation-delay:1s; }
@keyframes sparkfly {
  0% { opacity:0; transform:translate(0,0) scale(1);} 15% { opacity:1;}
  100% { opacity:0; transform:translate(var(--sx),-40px) scale(.4);}
}
/* warmer Lichtschein des Feuers */
.campfire::after {
  content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:90px; height:40px; background:radial-gradient(ellipse, #ff8a0033 0%, transparent 70%);
  animation: firelight 1s ease-in-out infinite alternate;
}
@keyframes firelight { 0%{opacity:.5;} 100%{opacity:.9;} }

/* ---------- Wimpelkette ---------- */
.bunting {
  position: absolute; top: 6px; left: -2%; width: 104%; z-index: 5;
  display: flex; justify-content: space-between; padding: 0 8px;
  transform: rotate(-1.5deg);
}
.bunting span {
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 18px solid var(--accent);
  animation: flag 3s ease-in-out infinite;
}
.bunting span:nth-child(3n)   { border-top-color: var(--accent2); }
.bunting span:nth-child(3n+1) { border-top-color: var(--cal); }
.bunting span:nth-child(2n)   { animation-delay: .5s; }
.bunting span:nth-child(4n)   { animation-delay: .9s; }
@keyframes flag { 50% { transform: translateY(2px) scaleY(.9); } }

/* ---------- schwebende Ballons ---------- */
.floatballoon {
  position: absolute; bottom: -60px; width: 26px; height: 32px;
  border-radius: 50%; opacity: .9; animation: rise linear infinite;
}
.floatballoon::after { content:""; position:absolute; left:50%; bottom:-10px; width:2px; height:12px; background:#0006; }
.fb1 { left: 14%; background: var(--accent);  animation-duration: 18s; }
.fb2 { left: 58%; background: var(--accent2); animation-duration: 24s; animation-delay: 5s; }
.fb3 { left: 88%; background: var(--cal);     animation-duration: 21s; animation-delay: 9s; }
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: .9; }
  90% { opacity: .9; }
  100% { transform: translateY(-260px) translateX(-8px); opacity: 0; }
}

/* ---------- Schmetterlinge ---------- */
.butterfly {
  position: absolute; width: 11px; height: 9px; background: var(--accent2);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: -7px 0 0 var(--accent); animation: flutter 15s ease-in-out infinite;
}
.bf1 { top: 36%; left: 12%; }
.bf2 { top: 50%; left: 74%; background: var(--cal); box-shadow: -7px 0 0 #fff; animation-duration: 19s; animation-delay: 3s; }
@keyframes flutter {
  0% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(40px,-28px) rotate(10deg); }
  50% { transform: translate(86px,8px) rotate(-8deg); }
  75% { transform: translate(40px,38px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(0); }
}

/* ---------- Boden / Wiese ---------- */
.ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 150px;
  background: repeating-linear-gradient(90deg, #5bbf48 0 18px, #54b441 18px 36px);
  border-top: 6px solid #3f9233;
}
.ground::before {
  content:""; position:absolute; top:-10px; left:0; right:0; height:12px;
  background: radial-gradient(circle at 6px 12px, #3f9233 4px, transparent 5px) 0 0/16px 12px repeat-x;
}
.hedge {
  position:absolute; left:0; right:0; top:4px; height:42px;
  background: radial-gradient(circle at 24px 24px, #2f7d2a 22px, transparent 23px) 0 0/48px 48px repeat-x, #357f2e;
  opacity:.9;
}
.tree { position:absolute; bottom:54px; }
.tree .trunk { position:absolute; bottom:0; left:50%; width:13px; height:54px; background:#7a4a23; transform:translateX(-50%); }
.tree .crown { position:absolute; bottom:42px; left:50%; width:84px; height:84px; background:#2f9e3f; border-radius:50%; transform:translateX(-50%);
  box-shadow:-30px 16px 0 -10px #2f9e3f, 30px 16px 0 -10px #2f9e3f, 0 0 0 6px #2b8c39 inset; }
.t1 { left:5%; }
.t2 { right:4%; transform:scale(.82); }
.t3 { left:46%; transform:scale(.6); bottom:70px; }

/* =========================================================
   FIGUREN – Bausteine (Kopf, Torso, Arme, Beine)
   Basis 24px hoch, per .kid auf 66% skaliert
   ========================================================= */
.fig {
  position: absolute; bottom: 40px;
  width: 22px; height: 40px;
  --shirt:#2980b9; --pants:#2c3e50; --hair:#2a1a0a; --skin:#ffcfa0;
}
.fig .head {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:12px; height:12px; background:var(--skin);
  border:2px solid #00000018; border-radius:3px; z-index:3;
}
.fig .head::before { /* Haare */
  content:""; position:absolute; top:-2px; left:-2px; right:-2px; height:6px;
  background:var(--hair); border-radius:3px 3px 0 0;
}
.fig .torso {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:16px; height:18px; background:var(--shirt);
  border-radius:4px 4px 2px 2px; z-index:2;
}
.fig .arm {
  position:absolute; top:14px; width:4px; height:14px;
  background:var(--shirt); border-radius:2px; z-index:1;
}
.fig .arm.l { left:1px; transform-origin:top center; }
.fig .arm.r { right:1px; transform-origin:top center; }
.fig .leg {
  position:absolute; bottom:0; width:5px; height:12px;
  background:var(--pants); border-radius:2px; z-index:1;
}
.fig .leg.l { left:5px; transform-origin:top center; }
.fig .leg.r { right:5px; transform-origin:top center; }

/* Bierflasche in der Hand */
.fig .bottle {
  position:absolute; bottom:-5px; left:-1px;
  width:5px; height:11px; background:#6b3e1e; border-radius:1px 1px 2px 2px;
}
.fig .bottle::before { content:""; position:absolute; top:-3px; left:1px; width:3px; height:4px; background:#6b3e1e; }
.fig .bottle::after  { content:""; position:absolute; top:2px; left:0; width:5px; height:3px; background:#e9d8a6; } /* Etikett */

/* Grill-Wender */
.fig .flipper { position:absolute; bottom:-6px; left:-1px; width:3px; height:12px; background:#888; }
.fig .flipper::after { content:""; position:absolute; bottom:-3px; left:-3px; width:9px; height:4px; background:#888; border-radius:1px; }

.kid { transform: scale(.62); transform-origin: bottom center; }

/* ---------- Arm-/Bein-Posen ---------- */
.arm.raise   { transform: rotate(-120deg); }      /* Prost nach oben */
.arm.tomouth { transform: rotate(-150deg); }      /* trinken */
.arm.up      { top:12px !important; transform: rotate(165deg); }
.arm.up2     { top:12px !important; }
.arm.l.up2   { transform: rotate(28deg); }
.arm.r.up2   { transform: rotate(-28deg); }
.arm.flip    { transform: rotate(35deg); }

/* ---------- Animationen der Figuren ---------- */
/* gehen: hin & her + Beinwippen */
.walk { animation: stroll linear infinite; }
.walk .leg.l { animation: step .5s ease-in-out infinite; }
.walk .leg.r { animation: step .5s ease-in-out infinite reverse; }
.walk .arm.l { animation: swing .5s ease-in-out infinite reverse; }
.walk .arm.r { animation: swing .5s ease-in-out infinite; }
@keyframes step  { 50% { transform: rotate(22deg); } }
@keyframes swing { 50% { transform: rotate(18deg); } }
.wlk1 { animation-duration: 21s; }
.wlk2 { animation-duration: 16s; animation-delay: -5s; }
.wlk3 { animation-duration: 26s; animation-delay: -12s; }
@keyframes stroll {
  0%   { transform: translateX(4vw) scaleX(1); }
  49%  { transform: translateX(82vw) scaleX(1); }
  50%  { transform: translateX(82vw) scaleX(-1); }
  99%  { transform: translateX(4vw) scaleX(-1); }
  100% { transform: translateX(4vw) scaleX(1); }
}

/* Prost-Wippen */
.cheers { animation: bobfig 1.8s ease-in-out infinite; }
.drink  .arm.r { animation: sip 2.4s ease-in-out infinite; }
@keyframes sip { 0%,100% { transform: rotate(-150deg);} 40%,60% { transform: rotate(-168deg);} }
@keyframes bobfig { 50% { transform: translateY(-3px); } }

/* Tanzen */
.dance { animation: dancefig .6s ease-in-out infinite; }
.dance .arm.l.up { transform: rotate(40deg); }
.dance .arm.r.up { transform: rotate(-40deg); }
@keyframes dancefig { 0%,100% { transform: rotate(-4deg) translateY(0);} 50% { transform: rotate(4deg) translateY(-3px);} }

/* Jubeln (Fans) */
.fan { animation: jump 1.2s ease-in-out infinite; }
.fan.delay1 { animation-delay:.3s; } .fan.delay2 { animation-delay:.6s; }
.fan.delay1 .arm, .fan.delay2 .arm { animation: wave .8s ease-in-out infinite; }
@keyframes jump { 0%,100% { transform: translateY(0);} 45% { transform: translateY(-10px);} }
@keyframes wave { 50% { transform: rotate(0deg) translateY(-3px);} }
.fan.kid { animation: jump 1.2s ease-in-out infinite; }
.fan.kid.delay2 { transform: scale(.62); transform-origin:bottom center; }

/* Planschen (Wasser-Kinder) */
.splash { animation: splashfig .55s ease-in-out infinite; }
.splash.delay1 { animation-delay:.25s; }
@keyframes splashfig {
  0%,100% { transform: scale(.62) translateY(0) rotate(-5deg); }
  50%     { transform: scale(.62) translateY(-7px) rotate(5deg); }
}
.splash.delay1 { /* gespiegelt bleibt erhalten via inline scaleX, daher eigener Keyframe */
  animation-name: splashfigflip;
}
@keyframes splashfigflip {
  0%,100% { transform: scaleX(-1) scale(.62) translateY(0) rotate(-5deg); }
  50%     { transform: scaleX(-1) scale(.62) translateY(-7px) rotate(5deg); }
}

/* Grillen (Arm wendet) */
.grilling .arm.r.flip { animation: flipmeat 1.4s ease-in-out infinite; }
@keyframes flipmeat { 0%,100% { transform: rotate(35deg);} 50% { transform: rotate(10deg);} }

/* =========================================================
   STATIONEN
   ========================================================= */
.station { position: absolute; bottom: 0; }

/* Grill-Station links */
.grill-station { left: 4%; bottom: 36px; }
.grill {
  position:absolute; bottom:0; left:0; width:42px; height:20px;
  background:#333; border-radius:4px; box-shadow:0 8px 0 -2px #000;
}
.grill::before { content:""; position:absolute; top:18px; left:8px; width:4px; height:16px; background:#222;}
.grill::after  { content:""; position:absolute; top:18px; right:8px; width:4px; height:16px; background:#222;}
.grill .ember { position:absolute; top:-3px; left:4px; right:4px; height:5px; background:linear-gradient(90deg,#ff6b00,#ffb700,#ff3b00); border-radius:2px; animation: glowember 1.5s ease-in-out infinite; }
@keyframes glowember { 50% { filter: brightness(1.4);} }
.grill .sausage { position:absolute; top:-5px; height:4px; width:14px; background:#8a3b1e; border-radius:3px; }
.grill .sausage.sa1 { left:6px; }
.grill .sausage.sa2 { right:6px; top:-4px; }
.smoke { position:absolute; bottom:16px; width:6px; height:6px; background:#ffffff7a; border-radius:50%; animation: smoke 3s ease-out infinite; }
.s1 { left:10px; } .s2 { left:20px; animation-delay:1s; } .s3 { left:30px; animation-delay:2s; }
@keyframes smoke { 0% { opacity:.7; transform:translateY(0) scale(.6);} 100% { opacity:0; transform:translateY(-46px) scale(1.7);} }

/* Getränke-Station */
.drinks-station { left: 22%; bottom: 36px; width: 90px; }
.table { position:absolute; bottom:0; left:34px; width:34px; height:8px; background:#9b6b3e; border-radius:2px; box-shadow:0 0 0 2px #00000022; }
.table::before { content:""; position:absolute; bottom:-16px; left:4px; width:4px; height:16px; background:#7a4a23; }
.table::after  { content:""; position:absolute; bottom:-16px; right:4px; width:4px; height:16px; background:#7a4a23; }
.bottle-on-table { position:absolute; bottom:8px; left:6px; width:5px; height:12px; background:#2e7d32; border-radius:1px; }
.bottle-on-table.b2 { left:14px; background:#6b3e1e; height:10px; }
.cup { position:absolute; bottom:8px; right:6px; width:6px; height:7px; background:#e74c3c; border-radius:0 0 2px 2px; }

/* TV-Station */
.tv-station { left: 44%; bottom: 36px; transform: translateX(-50%); }
.screen-tv { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); }
.tv-frame {
  position:relative; width:120px; height:74px; background:#111;
  border:5px solid #000; border-radius:6px; overflow:hidden;
  box-shadow:0 0 12px #6cf6;
}
.tv-pitch { position:absolute; inset:5px; background:repeating-linear-gradient(90deg,#2f8f3a 0 12px,#2a8434 12px 24px); }
.tv-line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#ffffff66; }
.tv-line::before { content:""; position:absolute; top:50%; left:-9px; width:20px; height:20px; border:2px solid #ffffff66; border-radius:50%; transform:translateY(-50%); }
.tv-player { position:absolute; width:5px; height:9px; border-radius:1px; }
.tp1 { background:#e74c3c; top:14px; left:20px; animation: tvrun1 3s ease-in-out infinite; }
.tp2 { background:#e74c3c; top:40px; left:34px; animation: tvrun2 3.4s ease-in-out infinite; }
.tp3 { background:#e74c3c; top:26px; left:14px; animation: tvrun1 2.6s ease-in-out infinite reverse; }
.tp4.away { background:#ecf0f1; top:18px; right:24px; animation: tvrun2 3s ease-in-out infinite reverse; }
.tp5.away { background:#ecf0f1; top:44px; right:36px; animation: tvrun1 3.2s ease-in-out infinite; }
@keyframes tvrun1 { 50% { transform: translate(10px,-4px);} }
@keyframes tvrun2 { 50% { transform: translate(-12px,5px);} }
.tv-ball { position:absolute; top:50%; left:12%; width:7px; height:7px; background:#fff; border-radius:50%; box-shadow:0 0 0 1px #000; animation: ballmove 2.2s ease-in-out infinite alternate; }
@keyframes ballmove { from { left:12%; top:60%; } to { left:78%; top:28%; } }
.tv-goal {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Press Start 2P"; font-size:14px; color:#fff200; text-shadow:2px 2px 0 #000;
  background:#0008; opacity:0; animation: goalflash 7s ease-in-out infinite;
}
@keyframes goalflash { 0%,80%,100% { opacity:0;} 85%,95% { opacity:1;} }
.tv-stand { width:10px; height:22px; background:#000; margin:0 auto; }

/* Wasser-Station */
.water-station { right: 5%; bottom: 36px; width: 80px; }
.pool {
  position:absolute; bottom:0; left:0; width:80px; height:18px;
  background:radial-gradient(circle at 50% 40%, #7fd8ff, #29a8e0);
  border:3px solid #1d7fb0; border-radius:50%;
  animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer { 50% { filter: brightness(1.12);} }
.sprinkler { position:absolute; bottom:14px; left:36px; width:6px; height:26px; background:#666; border-radius:2px; }
.sprinkler::before { content:""; position:absolute; bottom:0; left:-6px; width:18px; height:5px; background:#444; border-radius:3px; }
.jet {
  position:absolute; bottom:24px; left:2px; width:4px; height:4px;
  background:#9fe6ff; border-radius:50%; opacity:0;
  animation: jet 1.4s ease-out infinite;
}
.j1 { --dx:-40px; --dy:-24px; animation-delay:0s; }
.j2 { --dx:-26px; --dy:-38px; animation-delay:.2s; }
.j3 { --dx:-10px; --dy:-46px; animation-delay:.4s; }
.j4 { --dx:6px;   --dy:-48px; animation-delay:.6s; }
.j5 { --dx:22px;  --dy:-42px; animation-delay:.8s; }
.j6 { --dx:38px;  --dy:-30px; animation-delay:1s; }
.j7 { --dx:48px;  --dy:-16px; animation-delay:1.2s; }
@keyframes jet {
  0% { opacity:0; transform:translate(0,0) scale(.5);} 
  15% { opacity:1;}
  100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(1);} 
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } }

/* kleine Schirme */
@media (max-width:520px){
  .ground { height: 130px; }
  .drinks-station { left: 14%; }
  .tv-station { left: 50%; }
  .grill-station { left: 1%; }
  .water-station { right: 3%; }
  .t3 { display:none; }
}