/* Team Retreat – Video-Landingpage. Keine externen Fonts/Ressourcen (DSGVO). */

:root {
  --accent: #ffffff;
  --accent-text: #111111;
  /* Button-Overlay: Gold mit weißer Schrift */
  --cta-gold: linear-gradient(180deg, #f3d27a 0%, #d4a43a 45%, #b07f1f 100%);
  --cta-text: #ffffff;
  --cta-bottom: 4vh;          /* Abstand vom unteren Rand – kleiner = tiefer */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
}

svg { fill: currentColor; }

/* ------------------------------------------------------------------
   Login
   ------------------------------------------------------------------ */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) calc(20px + var(--safe-right))
           calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));
  background: #0b0b0c;
}
.login { width: 100%; max-width: 380px; }
.login h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.login-sub { margin: 0 0 1.5rem; color: #aaa; }
.login form { display: flex; flex-direction: column; gap: .5rem; }
.login label { font-size: .9rem; color: #ccc; margin-top: .5rem; }
.login input {
  font: inherit;
  font-size: 16px;            /* verhindert Auto-Zoom auf iOS */
  padding: 14px 16px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #161618;
  color: #fff;
}
.login input:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: transparent; }
.login button {
  margin-top: 1rem;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
}
.login-error {
  background: #3a1416;
  border: 1px solid #7a2a2f;
  color: #ffd7d9;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 0 0 1rem;
}
.login-error code { color: #fff; }

/* ------------------------------------------------------------------
   Videoseite
   ------------------------------------------------------------------ */
.video-page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
}

.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;       /* Taps landen auf der Tipp-Fläche */
}
.fit-cover { object-fit: cover; }
.fit-contain { object-fit: contain; }

.tap { position: absolute; inset: 0; z-index: 1; }

/* Großer Play-Button */
.play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .25s, transform .25s;
}
.play svg { width: 48px; height: 48px; margin-left: 6px; }
.is-playing .play,
.is-ended .play { opacity: 0; transform: scale(.85); pointer-events: none; }

/* Overlay unteres Drittel */
.overlay-bottom {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: calc(var(--cta-bottom) + 16px + var(--safe-bottom));
  padding: 0 calc(24px + var(--safe-right)) 0 calc(24px + var(--safe-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.cta {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: 220px;
  max-width: 100%;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--cta-gold);
  color: var(--cta-text);
  border: 1px solid rgba(255, 236, 170, .85);
  text-shadow: 0 1px 2px rgba(80, 50, 0, .55);
  letter-spacing: .02em;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(240, 200, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cta:active { transform: scale(.97); }

.replay {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .4s ease;
  cursor: pointer;
}
.replay svg { width: 18px; height: 18px; }
.is-ended .replay { opacity: 1; pointer-events: auto; }

/* Fortschrittsleiste */
.progress {
  position: absolute;
  z-index: 2;
  left: calc(16px + var(--safe-left));
  right: calc(16px + var(--safe-right));
  bottom: calc(10px + var(--safe-bottom));
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
  pointer-events: none;
}
.bar {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .9);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Logout-Icon */
.logout {
  position: fixed;
  z-index: 10;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  margin: 0;
}
.logout button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.logout svg { width: 20px; height: 20px; }

/* Fehlermeldung */
.error {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(0, 0, 0, .85);
}
.error[hidden] { display: none; }
.error a { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------
   Hinweis "Bitte Handy drehen" (Hochformat-Video im Querformat)
   ------------------------------------------------------------------ */
.rotate { display: none; }
@media (orientation: landscape) and (pointer: coarse) {
  .is-portrait-video:not(.is-desktop) .rotate {
    display: flex;
    position: fixed;
    z-index: 20;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #000;
    font-size: 1.2rem;
  }
  .rotate svg { width: 56px; height: 56px; transform: rotate(90deg); animation: turn 2s ease-in-out infinite; }
}
@keyframes turn { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }

/* ------------------------------------------------------------------
   Desktop-Hinweis: Breite > 768px UND kein Touch (zusätzlich per JS gesetzt)
   ------------------------------------------------------------------ */
.desktop { display: none; }

.is-desktop .stage,
.is-desktop .rotate { display: none !important; }
.is-desktop .desktop { display: flex; }

@media (min-width: 769px) and (pointer: fine) {
  .stage, .rotate { display: none !important; }
  .desktop { display: flex; }
}

.desktop {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0b0b0c;
  text-align: center;
}
.desktop-box { max-width: 460px; }
.desktop h1 { font-size: 1.6rem; line-height: 1.3; margin: 0 0 .75rem; }
.desktop p { color: #aaa; margin: 0 0 1.5rem; }
.qr {
  display: inline-block;
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  line-height: 0;
}
.qr svg { width: 220px; height: 220px; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}