/* Willkommensseite (Jeff, Carsten 09.10.2026): das Bild füllt den Schirm, ein
   unsichtbarer Knopf liegt genau über „Los geht's“. Die Bildbox hat das
   Seitenverhältnis des Bildes (1206 × 2622) – so sitzt der Knopf auf jedem
   Handy an derselben Stelle. Nur Klassen (CSP style-src 'self'). */
.willkommen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #000;
  animation: willkommen-auf var(--duration-normal, 300ms) var(--ease-out-expo, ease-out);
}
.willkommen.willkommen-weg {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal, 300ms) var(--ease-out-expo, ease-out);
}
.willkommen-bild {
  position: relative;
  width: min(100vw, calc(100dvh * 1206 / 2622));
  aspect-ratio: 1206 / 2622;
}
.willkommen-bild img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* Pille „Los geht's“ im Bild: x 9–91 %, y 80,8–87,3 %. */
.willkommen-los {
  position: absolute;
  left: 8.5%;
  width: 83%;
  top: 80.4%;
  height: 7.3%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
}
.willkommen-los:active { background: rgba(0, 0, 0, 0.18); transform: scale(0.98); }
.willkommen-los:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes willkommen-auf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .willkommen, .willkommen.willkommen-weg { animation: none; transition: none; }
  .willkommen-los:active { transform: none; }
}