/* Entre Nós – Lite-Seite. Farben wie im Projekt: Hellblau, Gelb, Orange-Schatten, Kontur. */
:root {
  --blue: #82CDEF;
  --yellow: #FFE841;
  --orange: #FE942A;
  --ink: #080103;
}
html, body { margin: 0; background: var(--blue); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
.logo {
  display: block;
  width: min(100%, 860px);
  height: auto;
  margin: clamp(28px, 7vw, 64px) auto 0;
}
.datum {
  display: block;
  width: min(60%, 420px);
  height: auto;
  margin: clamp(18px, 4vw, 32px) auto 0;
}
/* Luma als Kasten in der Seite (index.html) */
.luma {
  width: min(100%, 600px);
  margin: clamp(22px, 5vw, 44px) auto 56px;
}
.luma iframe {
  display: block;
  width: 100%;
  /* Lumas Karte hat keine Auto-Höhe: Cover oben, Ticketzeilen erst ab ~500 px, gesamt ~950–1.400 px.
     So hoch, dass im Kasten nichts scrollt; nach dem Tausch der Event-ID prüfen. */
  height: 1100px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}
/* Knopf, der Lumas Kasse als Overlay öffnet (knopf.html) */
.tickets {
  display: inline-block;
  margin: clamp(26px, 6vw, 52px) auto 64px;
  padding: 16px 38px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 7px 7px 0 var(--orange);
  text-decoration: none;
  line-height: 0;
  transition: transform .08s, box-shadow .08s;
}
.tickets:hover { transform: translate(-1px, -1px); box-shadow: 8px 8px 0 var(--orange); }
.tickets:active { transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--orange); }
.tickets img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) {
  .tickets { padding: 14px 30px; }
  .tickets img { height: 38px; }
}