/* Tipp-Seite für Gäste: Kino-Look, CANUSA × Travel Alberta */

@font-face {
  font-family: "Bebas Neue";
  src: url("assets/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --nacht: #07080b;
  --creme: #f7eedc;
  --gold: #f2c46b;
  --gold-hell: #ffe3a3;
  --canusa-rot: #b70a06;
  --canusa-rot-dunkel: #8f0805;
  --text-leise: rgba(247, 238, 220, .72);
  --glas: rgba(14, 11, 12, .5);
  --glas-rand: rgba(255, 235, 200, .16);
  --anzeige: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--nacht); }

body.gast {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--creme);
  background: transparent; /* Nachtfarbe liegt auf html, sonst verdeckt body das Kinobild */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Hintergrund: fest stehendes Kinobild (div statt background-attachment, weil iOS das nicht kann) */
.kino {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(7, 8, 11, .55) 0, rgba(7, 8, 11, 0) 9%, rgba(7, 8, 11, 0) 38%, rgba(7, 8, 11, .35) 52%, rgba(7, 8, 11, .2) 75%, rgba(7, 8, 11, .7) 100%),
    url("assets/kino.jpg") center top / cover no-repeat;
  background:
    linear-gradient(to bottom, rgba(7, 8, 11, .55) 0, rgba(7, 8, 11, 0) 9%, rgba(7, 8, 11, 0) 38%, rgba(7, 8, 11, .35) 52%, rgba(7, 8, 11, .2) 75%, rgba(7, 8, 11, .7) 100%),
    image-set(url("assets/kino.webp") type("image/webp"), url("assets/kino.jpg") type("image/jpeg")) center top / cover no-repeat;
}
/* Leichte Vignette wie im Kinosaal */
.kino::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 35%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* Breite Bildschirme: Bild nicht aufblasen, sondern als Hochformat zentriert zeigen */
@media (min-aspect-ratio: 3/4) {
  .kino {
    background-size: auto 100%, auto 100%;
    background-position: center top, center top;
  }
  .kino::after {
    background: linear-gradient(90deg, var(--nacht) calc(50% - 50vh * .56), transparent calc(50% - 50vh * .56 + 120px), transparent calc(50% + 50vh * .56 - 120px), var(--nacht) calc(50% + 50vh * .56));
  }
}

.buehne {
  max-width: 440px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* Logo-Leiste: beide Partner gleichberechtigt und gut sichtbar */
.partner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
.partner img { display: block; height: auto; min-width: 0; }
.logo-canusa { width: clamp(140px, 46vw, 196px); margin: -4px 0; }
.logo-alberta { width: clamp(80px, 25vw, 106px); }
.trenner { width: 1px; align-self: stretch; margin: 6px 0; background: #d9d4cb; }

/* Freiraum, damit die Leinwand mit den Rockies sichtbar bleibt */
.leinwand-luft { height: calc(41vh - 86px); min-height: 150px; }
@supports (height: 1svh) {
  .leinwand-luft { height: calc(41svh - 86px); }
}

/* Titel im Projektorstrahl */
.titel { text-align: center; margin: 0 0 16px; }
.vorspann {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 10px rgba(0, 0, 0, .9);
}
.titel h1 {
  margin: 0;
  font-family: var(--anzeige);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: clamp(22px, 6.4vw, 30px);
  color: var(--gold-hell);
  text-shadow: 0 0 4px rgba(0, 0, 0, .85), 0 2px 14px rgba(0, 0, 0, .85);
}
.titel h1 span {
  display: block;
  margin-top: 4px;
  font-size: clamp(38px, 11.6vw, 50px);
  color: var(--creme);
  text-shadow:
    0 0 18px rgba(255, 214, 140, .45),
    0 0 42px rgba(255, 190, 90, .25),
    0 0 5px rgba(0, 0, 0, .8),
    0 3px 16px rgba(0, 0, 0, .9);
}
.frage {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--creme);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

/* Glas-Karte über den Kinosesseln */
.glas {
  position: relative;
  background: var(--glas);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--glas-rand);
  border-radius: 22px;
  padding: 22px 20px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.glas label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin: 16px 0 7px;
  color: var(--creme);
}
.glas label:first-of-type { margin-top: 0; }
.glas label .leise { font-weight: 400; color: var(--text-leise); }

.glas input {
  width: 100%;
  font: inherit;
  font-size: 19px;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .94);
  color: #1c1414;
  transition: border-color .15s, box-shadow .15s;
}
.glas input::placeholder { color: #8f857c; }
.glas input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(242, 196, 107, .28);
}
.glas .tipp-input {
  font-family: var(--anzeige);
  font-size: 40px;
  line-height: 1;
  padding: 10px 14px 6px;
  text-align: center;
  letter-spacing: .06em;
}
.glas .tipp-input::placeholder { font-size: 30px; letter-spacing: .04em; }

.glas button {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px 11px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  font-family: var(--anzeige);
  font-size: 28px;
  letter-spacing: .08em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #d0140f 0%, var(--canusa-rot) 55%, var(--canusa-rot-dunkel) 100%);
  box-shadow: 0 8px 22px rgba(183, 10, 6, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.glas button:hover { filter: brightness(1.08); }
.glas button:active { transform: translateY(1px) scale(.99); box-shadow: 0 4px 12px rgba(183, 10, 6, .4); }
.glas button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.hinweis { margin: 12px 0 0; font-size: 13.5px; color: var(--text-leise); text-align: center; }

.fehler {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(183, 10, 6, .28);
  border: 1px solid rgba(255, 120, 110, .45);
  color: #ffe2dd;
  font-weight: 600;
  font-size: 15px;
}

/* Bestätigung als Kinoticket */
.erfolg { text-align: center; padding-top: 26px; }
.erfolg::before, .erfolg::after {
  content: "";
  position: absolute;
  top: 50px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nacht);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}
.erfolg::before { left: -11px; }
.erfolg::after { right: -11px; }
.ticket-kopf {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed rgba(255, 235, 200, .3);
  font-family: var(--anzeige);
  font-size: 20px;
  letter-spacing: .3em;
  color: var(--gold);
}
.erfolg h2 { margin: 0 0 4px; font-size: 21px; font-weight: 700; word-break: break-word; }
.erfolg .gross {
  font-family: var(--anzeige);
  font-size: 72px;
  line-height: 1;
  margin: 10px 0 2px;
  color: var(--gold-hell);
  text-shadow: 0 0 24px rgba(255, 200, 110, .35);
}

.fuss {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(247, 238, 220, .6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

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