css

/* ==== Base & Zoom-Verhalten ============================================= */

html, body {
  height: 100%;
  /* dämpft „Text-only“-Zoom auf Mobile/Firefox */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #000; /* Fallback, falls Bild nicht lädt */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  overflow: hidden;
}

/* VISUELLE EBENE: enthält Background + Card + Hotspot → wird gezoomt/gefadet */
/* Basis: Desktop als Default */

#scene{
  position: fixed;
  inset: 0;
  background-image: url("../images/hintergrund_desktop.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* deine Übergänge – dürfen hier bleiben */
  transition: transform 0.9s ease, opacity 0.9s ease;
  will-change: transform, opacity;
}

/* Mobile-Portrait → Mobile-BG */
@media (orientation: portrait){
  #scene{ background-image: url("../images/hintergrund_mobile.png"); }
}

/* sehr hohes Verhältnis → sicher Mobile-BG */
@media (max-aspect-ratio: 3/4){
  #scene{ background-image: url("../images/hintergrund_mobile.png"); }
}

/* sehr breites Verhältnis → sicher Desktop-BG */
@media (min-aspect-ratio: 16/10){
  #scene{ background-image: url("../images/hintergrund_desktop.png"); }
}

/* Alternative backgrounds (triggered by JS) */
#scene.alt-bg {
  background-image: url("../images/hintergrund_desktop_alt.png");
}

@media (orientation: portrait) {
  #scene.alt-bg {
    background-image: url("../images/hintergrund_mobile_alt.png");
  }
}


/* Effekt-Klasse: gesamte Szene zoomt/fadet */
#scene.zoom-out {
  transform: scale(0.92);
  opacity: 0;
}



/* ==== S-Hotspot (geheim) ================================================ */
/* Koordinaten kannst du bei Bedarf feinjustieren */
:root {
  --s-top: 16.5%;
  --s-left: 72%;
  --s-w: 96px;
  --s-h: 105px;
}

/* Portrait: leichte Korrektur der S-Spot-Variablen (Beispielwerte) */
@media (orientation: portrait){
  :root{
    --s-top: 17.5%;
    --s-left: 25.5%;
    --s-w: 18px;
    --s-h: 10px;
  }
}

/* Small-Landscape: Phones quer unter 900px Breite */
@media (orientation: landscape) and (max-width: 900px){
  :root{
    /* Beispiel: etwas weiter nach rechts/unten, kleiner als Desktop */
    --s-top: 15.5%;
    --s-left: 68%;
    --s-w: 64px;
    --s-h: 70px;
  }
}




#s-hotspot {
  position: absolute;
  top: var(--s-top);
  left: var(--s-left);
  width: var(--s-w);
  height: var(--s-h);

  cursor: default;           /* kein Pointer → geheim */
  z-index: 100;
  background: transparent;
  outline: none;

}

/* Starker Sparkle beim Klick (kurzer Glow) */
#s-hotspot.sparkle-strong {
  box-shadow:
    0 0 30px 10px rgba(255,255,255,0.85),
    0 0 60px 20px rgba(255,180,255,0.65),
    inset 0 0 12px rgba(255,255,255,0.5);
  transition: box-shadow 0.4s ease;
}

/* === Urknall: vom Hotspot starten, stufenweise auf Vollweiß === */
#flash{
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; opacity: 0;
}

#flash::before,
#flash::after{ content:""; position:fixed; inset:0; }

/* wachsende Welle, startet am Hotspot (setzt JS über --bang-x/--bang-y) */
#flash::before{
  left: var(--bang-x, 50%); top: var(--bang-y, 50%);
  width: 22vmin; height: 22vmin; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.90) 40%,
    rgba(255,255,255,0.00) 72%);
  opacity: 1;
}

/* vollflächige Weißblende (ohne Loch) */
#flash::after{
  background: #fff;
  opacity: 0;
}

/* Trigger + Timings */
#flash.bang{ opacity: 1; }
#flash.bang::before{ animation: flashWave 2400ms cubic-bezier(.2,.7,.2,1) forwards; }
#flash.bang::after { animation: flashBackdrop 3200ms ease forwards; }

/* Welle – mehrere Stufen, schön langsam */
@keyframes flashWave{
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
  35%  { transform: translate(-50%,-50%) scale(8);   opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(20);  opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(28);  opacity: 0; }
}

/* Hintergrund stufenweise heller bis vollweiß */
@keyframes flashBackdrop{
  0%   { opacity: 0; }
  30%  { opacity: .35; }
  65%  { opacity: .75; }
  100% { opacity: 1; }
}


/* ==================== Flip Grid ==================== */
#flipGrid{
  position: fixed;
  display: grid;
  gap: var(--gap);
  transform: translateZ(0) scale(var(--zz));
  z-index: 120;
  user-select: none;
}
#flipGrid.mode-desktop{
  top: var(--top); left: var(--left);
  transform-origin: top left;
  grid-template-columns: repeat(2, var(--tile));
  grid-template-rows: repeat(2, var(--tile));
}
#flipGrid.mode-mobile{
  bottom: var(--bottom); left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(var(--zz));
  grid-template-columns: repeat(4, var(--tile));
  grid-auto-rows: var(--tile);
}

/* ==================== Flip cell ==================== */
.flip{
  position: relative;
  width: var(--tile);
  height: var(--tile);
  perspective: 1100px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.card{
  position:absolute; inset:0; border-radius:12px; overflow:hidden; background:rgba(30, 34, 38, 0.65); backdrop-filter: blur(6px);
  box-shadow:
  
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 18px 28px rgba(255,255,255,.06),
    inset 0 -24px 36px rgba(0,0,0,.45);
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  box-shadow: 0 0.5px 0 rgba(0,0,0,.45);
  transform: translateY(-.5px); pointer-events:none;
  pointer-events:none;
}

/* winziges Padding für eine organischere Naht */
.upper.static .numBox{ padding-bottom: .5px; }
.lower.static .numBox{ padding-top: .5px; }


.half{ position:absolute; left:0; right:0; height:50%; overflow:hidden; }
.upper{ top:0; } .lower{ bottom:0; }

/* Ziffer über volle Höhe rendern, Sichtbarkeit via Crop */
.numBox{
  position:absolute; left:0; right:0; height: var(--tile);
  display:flex; align-items:center; justify-content:center;
  line-height:1; pointer-events:none;
}
.upper .numBox{ top:0; padding-bottom:1px; }
.lower .numBox{ bottom:0; padding-top:1px; }

.num{
  font: 800 var(--fs)/1 "Inter", system-ui, Arial;
  color:#fff; letter-spacing:.02em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.15), 0 10px 24px rgba(0,0,0,.5);
  transform: scaleX(.5) scaleY(.55);
}
.lab{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
  font: 600 12px/1.2 "Inter", system-ui, Arial;
  letter-spacing:.12em; opacity:.78; color:#dfe4ea; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.6); z-index:4;
}

/* Flip overlays (sichtbar nur während Animation) */
.upper.flip, .lower.flip{
  visibility:hidden; z-index:3; backface-visibility:hidden;
  transform-style: preserve-3d; will-change:transform, visibility;
}
.upper.flip{ transform-origin: center bottom; transform: rotateX(0deg); }
.lower.flip{ transform-origin: center top;    transform: rotateX(90deg); }

.flip.play .upper.flip, .flip.play .lower.flip{ visibility:visible; }
.flip.play .upper.flip{ animation: foldTop .375s ease-in forwards; }
.flip.play .lower.flip{ animation: unfoldBottom .375s ease-out .375s forwards; }

@keyframes foldTop{ 0%{transform:rotateX(0)} 100%{transform:rotateX(-90deg)} }
@keyframes unfoldBottom{ 0%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }

/* Reduced motion: nur statisch updaten */
@media (prefers-reduced-motion: reduce){
  .flip.play .upper.flip, .flip.play .lower.flip{ animation: none; }
}


/* ==================== Phase 2: refinements ==================== */
/* Default animation timing for flip halves */
:root{ --tTop: .375s; --tBot: .375s; }

/* seconds cell runs a touch slower (0.75s total) */
.flip.is-seconds{ --tTop: .375s; --tBot: .375s; }


/* Use a smoother easing */
.flip.play .upper.flip { 
  animation: foldTop var(--tTop) cubic-bezier(.25,.1,.25,1) forwards; 
}
.flip.play .lower.flip { 
  animation: unfoldBottom var(--tBot) cubic-bezier(.25,.1,.25,1) forwards; 
}


/* Mild seam refinement on both halves (subtle gradient) */
.half::after{
  content:"";
  position:absolute; left:0; right:0;
  height:10px; pointer-events:none; opacity:.35;
}
.upper::after{ bottom:-1px; background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0)); }
.lower::after{ top:-1px;    background: linear-gradient(to top,    rgba(255,255,255,.10), rgba(255,255,255,0)); }