/* 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;
}

/* Gelber Knopf (TICKETS, VOLUNTEERS, SEND VIA WHATSAPP). Wörter in gleicher Versalhöhe:
   --bh am Bild = Bildhöhe beim Setzen (Versalhöhe 120). */
.knopf {
  display: inline-block;
  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;
}
.knopf:hover { transform: translate(-1px, -1px); box-shadow: 8px 8px 0 var(--orange); }
.knopf:active { transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--orange); }
.knopf:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.knopf img { height: calc(var(--bh, 137) * .3px); width: auto; display: block; }
/* Startseite: zwei gleich breite Knöpfe nebeneinander, TICKETS links, VOLUNTEERS rechts.
   --w = Breite für das längste Wort (VOLUNTEERS, gesetzt 1026 px breit), höchstens 308 px wie zuvor;
   jedes Wort wird --w × eigene Bildbreite (--bw) / 1026 breit, so bleiben die Buchstaben gleich groß. */
.knoepfe {
  --gap: 14px;
  --px: 26px;
  --w: min(308px, (100vw - 32px - var(--gap)) / 2 - 2 * var(--px) - 6px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: max-content;
  max-width: 100%;
  margin: clamp(26px, 6vw, 52px) auto 64px;
}
.knoepfe .knopf { display: flex; justify-content: center; align-items: center; padding-left: var(--px); padding-right: var(--px); }
.knoepfe .knopf img { width: calc(var(--w) * var(--bw) / 1026); height: auto; }

/* Volunteers-Seite */
.heim { display: block; line-height: 0; }
.logo-klein { width: min(100%, 520px); }
.titel, .zeile { margin: 0; line-height: 0; }
.titel { margin-top: clamp(26px, 6vw, 44px); }
.titel img { width: min(78vw, 460px); height: auto; }
.zeile { margin-top: clamp(16px, 3vw, 22px); }
.zeile img { width: min(86vw, 520px); height: auto; }
.helfen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(100%, 560px);
  margin: clamp(22px, 5vw, 34px) auto 64px;
}
.bereiche {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.chip {
  position: relative;
  display: inline-flex;
  padding: 12px 18px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
  line-height: 0;
  transition: background .1s, box-shadow .1s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.chip img { height: calc(var(--bh, 137) * .2px); width: auto; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip.an, .chip:has(input:checked) {
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--orange);
  transform: translate(-2px, -2px);
}
.chip:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.feld {
  width: min(100%, 340px);
  box-sizing: border-box;
  padding: 14px 18px;
  font: 600 18px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  outline: none;
  transition: box-shadow .1s;
}
.feld:focus { box-shadow: 5px 5px 0 var(--orange); }
.feld::placeholder { color: #707070; }
/* Hinweis, wenn Bereich oder Name fehlt (ohne Text: Wackeln + oranger Rand) */
@keyframes wackeln { 0%, 100% { translate: 0 } 25% { translate: -6px } 75% { translate: 6px } }
.bereiche.fehlt, .feld.fehlt { animation: wackeln .2s 2; }
.bereiche.fehlt .chip, .feld.fehlt { border-color: var(--orange); }
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Quiz vor den Tickets (tickets.html, erzeugt von werkzeug/quiz.py). Texte sind Bilder aus Lukes Buchstaben:
   Breite = Bildbreite (--bw) × --s, so haben alle Texte dieselbe Versalhöhe. */
.quiz { --s: .25; }
.logo-quiz { width: min(80%, 400px); }
.txt { margin: 0; line-height: 0; }
.txt img, .antwort img {
  display: block;
  margin: 0 auto;
  width: calc(var(--bw) * var(--s) * 1px);
  max-width: 100%;
  height: auto;
}
.kopf { margin-top: clamp(14px, 3vw, 22px); }
.kopf img { width: calc(var(--bw) * var(--s) * 1.25px); }
.intro { margin-top: clamp(24px, 5vw, 36px); }
.punkte { display: flex; gap: 12px; justify-content: center; margin-top: clamp(24px, 5vw, 34px); }
.punkte span { width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; }
.punkte .jetzt { background: var(--yellow); }
.punkte .an { background: var(--ink); }
.fragen { width: min(100%, 560px); margin: clamp(22px, 5vw, 32px) auto 64px; }
.schritt, .ende { display: flex; flex-direction: column; align-items: center; gap: 22px; outline: none; }
.schritt[hidden], .ende[hidden] { display: none; }
/* WITHOUT PHONES: so breit, dass seine Schrift so groß ist wie die Quiz-Texte */
.bild { display: block; width: min(64%, 330px); height: auto; }
.antworten { display: grid; gap: 14px; width: min(100%, 460px); }
.antworten.kurz { grid-template-columns: 1fr 1fr; }
.antwort {
  padding: 14px 16px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
  line-height: 0;
  transition: background .1s, box-shadow .1s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.antwort img { width: calc(var(--bw) * var(--s) * .9px); }
.antwort:hover, .antwort.gewaehlt {
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--orange);
  transform: translate(-2px, -2px);
}
.antwort:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.antwort:disabled { cursor: default; }
.vorbei .intro, .vorbei .punkte { display: none; }
@media (max-width: 600px) { .quiz { --s: .2; } }
@media (max-width: 420px) { .quiz { --s: .165; } }
@media (max-width: 360px) { .quiz { --s: .145; } }

@media (max-width: 480px) {
  .knoepfe { --gap: 12px; --px: 12px; }
  .knopf { padding: 14px 26px; }
  .knopf img { height: calc(var(--bh, 137) * .24px); }
  .chip { padding: 10px 14px; }
  .chip img { height: calc(var(--bh, 137) * .17px); }
}

/* Ältere Fassungen in varianten/ (Luma-Kasse im Kasten, Overlay-Knopf) */
.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. */
  height: 1100px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}
.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;
}
.tickets img { height: 46px; width: auto; display: block; }