/* 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 { width: calc(var(--bw, 400) * .3px); height: 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) / var(--ref, 1026)); height: auto; }
/* Startseite: Logo und Datum oben, der Schmetterling füllt den Raum dazwischen, die Knöpfe sitzen unten am
   Bildschirmrand. svh = Höhe bei eingeblendeter Browserleiste, damit die Knöpfe auf dem Handy immer sichtbar sind. */
.start { min-height: 100svh; }
.start picture { display: contents; }
.schmetterling {
  flex: 1 1 0;
  min-height: 140px;
  width: min(100%, 560px);
  object-fit: contain;
  margin: clamp(12px, 3vh, 32px) auto;
}
.start .knoepfe { margin: 0 auto clamp(18px, 4vh, 40px); }
/* Laptop und andere breite Fenster mit wenig Höhe: Logo, Datum, Abstände, Umschalter und Knöpfe richten sich zusätzlich
   nach der Höhe, damit alles ohne Scrollen auf den Bildschirm passt und der Schmetterling Platz behält (bei 1275 × 870
   waren die Knöpfe abgeschnitten, 02.11.2026). Erst ab 481 px Breite: Handys hochkant bleiben genau wie vorher.
   2.394 und 5.66 = Seitenverhältnis von Logo und Datum. In @supports, weil Werte mit var() ohne svh sonst ganz wegfielen. */
@supports (height: 1svh) {
  @media (min-width: 481px) {
    .start .logo { width: min(100%, 860px, 34svh * 2.394); margin-top: min(clamp(28px, 7vw, 64px), 5.2svh); }
    .start .datum { width: min(60%, 420px, 7svh * 5.66); margin-top: min(clamp(18px, 4vw, 32px), 3.3svh); }
    .start .schmetterling { min-height: min(140px, 15svh); }
    .start .sprache img { width: calc(var(--bw) * min(.16px, .029svh)); }
    .start .knoepfe { --w: min(308px, (100vw - 32px - var(--gap)) / 2 - 2 * var(--px) - 6px, 34svh); }
  }
}
/* Umschalter EM PORTUGUÊS / IN ENGLISH unter dem Schmetterling: kleine weiße Pille */
.sprache {
  display: inline-block;
  margin: 0 auto clamp(14px, 3vh, 24px);
  padding: 8px 18px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  line-height: 0;
  text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.sprache:hover { box-shadow: 4px 4px 0 var(--orange); transform: translate(-1px, -1px); }
.sprache:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sprache img { width: calc(var(--bw) * .16px); height: auto; display: block; }

/* 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(calc(var(--bw) * .45px), 78vw); height: auto; }
.zeile { margin-top: clamp(16px, 3vw, 22px); }
.zeile img { width: min(calc(var(--bw) * .3px), 86vw); 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;
  align-items: center;   /* Bild nie strecken: alle Chips einer Reihe sind gleich hoch, CHÁ ist mit Akzent höher */
  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 { width: calc(var(--bw) * .2px); height: 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/seiten.py). Texte sind Bilder aus Lukes Buchstaben:
   Breite = Bildbreite (--bw) × --sp (= --s in px), so haben alle Texte dieselbe Versalhöhe. Auf dem Handy so klein, dass
   Frage, Antworten und CONTINUE auf einen Bildschirm passen. */
.quiz { --s: .2; --sp: calc(var(--s) * 1px); }
.quiz .logo { margin-top: clamp(14px, 4vw, 36px); }
.logo-quiz { width: min(58%, 280px); }
.txt { margin: 0; line-height: 0; }
.txt img, .antwort img {
  display: block;
  margin: 0 auto;
  width: calc(var(--bw) * var(--sp));
  max-width: 100%;
  height: auto;
}
.kopf { margin-top: clamp(8px, 2vw, 16px); }
.kopf img { width: calc(var(--bw) * var(--sp) * 1.1); }
.intro { margin-top: clamp(14px, 3vw, 24px); }
.punkte { display: flex; gap: 10px; justify-content: center; margin-top: clamp(14px, 3vw, 24px); }
.punkte span { width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; }
.punkte .jetzt { background: var(--yellow); }
.punkte .an { background: var(--ink); }
.fragen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vw, 22px);
  width: min(100%, 560px);
  margin: clamp(14px, 3vw, 24px) auto 40px;
  margin-bottom: clamp(12px, 2svh, 40px);   /* Rand unter CONTINUE nur so groß wie nötig (Schatten 7 px): ohne Scrollen */
}
.schritt, .ende { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3vw, 20px); width: 100%; outline: none; }
.schritt[hidden], .ende[hidden], .weiter[hidden] { display: none; }
/* WITHOUT PHONES: so breit, dass seine Schrift so groß ist wie die Quiz-Texte */
.bild { display: block; width: min(52%, 270px); height: auto; }
.antworten { display: grid; gap: 12px; width: min(100%, 460px); }
.antworten.kurz { grid-template-columns: 1fr 1fr; }
.antwort {
  padding: 12px 14px;
  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(--sp) * .9); }
@media (hover: hover) { .antwort:hover { background: #fff6c2; } }
/* ausgewählte Antwort: gelb wie die Knöpfe */
.antwort[aria-pressed="true"] {
  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; }
/* Knöpfe im Quiz (CONTINUE, BACK, TICKETS) etwas kleiner; CONTINUE erst nach einer Auswahl aktiv */
button.knopf { font: inherit; color: inherit; cursor: pointer; }
.quiz .knopf { padding: 12px 28px; }
.quiz .knopf img { width: calc(var(--bw) * var(--sp) * 1.4); height: auto; }
/* CONTINUE ohne Auswahl: die Antworten wackeln kurz und bekommen einen orangen Rand */
.antworten.fehlt { animation: wackeln .2s 2; }
.antworten.fehlt .antwort { border-color: var(--orange); }
.ab-zwei .intro, .vorbei .intro, .vorbei .punkte { display: none; }
@media (max-width: 600px) { .quiz { --s: .16; } }
@media (max-width: 420px) { .quiz { --s: .13; } }
@media (max-width: 360px) { .quiz { --s: .115; } }
/* Quiz auf Laptops (ab 601 px Breite, wenig Höhe): Schrift und Abstand über dem Logo gehen stufenlos mit der Fensterhöhe
   mit, damit CONTINUE bei jeder Frage ohne Scrollen sichtbar bleibt (gemessen 02.11.2026: Unterkante des tiefsten Knopfs
   ≈ 345 px + 2640 × --sp, Portugiesisch). Ab 900 px Höhe bleibt alles wie vorher; Handys sind nicht betroffen. */
@supports (height: 1svh) {
  @media (min-width: 601px) {
    .quiz { --sp: clamp(.11px, (100svh - 360px) / 2640, .2px); }
    .quiz .logo { margin-top: min(clamp(14px, 4vw, 36px), 4svh); }
    .quiz .bild { width: min(52%, 270px, var(--sp) * 1350); }   /* WITHOUT PHONES wird mit der Schrift kleiner (270 px bei .2) */
  }
}

@media (max-width: 480px) {
  .knoepfe { --gap: 12px; --px: 12px; }
  .knopf { padding: 14px 26px; }
  .knopf img { width: calc(var(--bw, 400) * .24px); }
  .chip { padding: 10px 14px; }
  .chip img { width: calc(var(--bw) * .17px); }
  /* Volunteers-Seite: kleiner, damit der Senden-Knopf auch auf kleinen Handys ohne Scrollen sichtbar ist */
  .logo-klein { width: min(78%, 420px); }
  .titel { margin-top: 16px; }
  .zeile { margin-top: 10px; }
  .helfen { gap: 16px; margin: 16px auto 24px; }
  .knopf.senden { padding: 12px 22px; }
  .senden img { width: calc(var(--bw) * .19px); }
}
/* Volunteers auf Laptops (ab 481 px Breite, wenig Höhe): Logo, Schrift und Abstände gehen mit der Fensterhöhe mit, damit
   SEND VIA WHATSAPP ohne Scrollen sichtbar bleibt (gemessen 02.11.2026 bis 600 px Höhe). Handys sind nicht betroffen. */
@supports (height: 1svh) {
  @media (min-width: 481px) {
    .logo.logo-klein { width: min(100%, 520px, 22svh * 2.394); margin-top: min(clamp(28px, 7vw, 64px), 4svh); }
    .titel { margin-top: min(clamp(26px, 6vw, 44px), 3svh); }
    .titel img { width: min(calc(var(--bw) * min(.45px, .05svh)), 78vw); }
    .zeile { margin-top: min(clamp(16px, 3vw, 22px), 2svh); }
    .zeile img { width: min(calc(var(--bw) * min(.3px, .034svh)), 86vw); }
    .helfen { gap: min(26px, 2.6svh); margin: min(clamp(22px, 5vw, 34px), 3svh) auto min(64px, 4svh); }
    .chip img { width: calc(var(--bw) * min(.2px, .023svh)); }
    .knopf.senden { padding: min(16px, 1.6svh) 38px; }
    .knopf.senden img { width: calc(var(--bw) * min(.3px, .034svh)); }
  }
  /* Rand unter SEND nur so groß wie nötig (Schatten 7 px), auf allen Bildschirmen: ohne Scrollen */
  .helfen { margin-bottom: clamp(12px, 2.5svh, 40px); }
}

/* Kasse (seit 04.11.2026): steckt in der Quiz-Seite und erscheint nach bestandenem Quiz (public/kasse.js); eine eigene
   Adresse gibt es nicht. Überschriften und Knöpfe in Lukes Buchstaben, gleich groß wie im Quiz (--sp); Ticketnamen, Preise
   und Hinweise kommen live von Luma und stehen in --schrift. Gleiche Bausteine wie sonst: weiße Karten mit Kontur,
   gewählt = gelb mit orangem Schatten, fehlt = Wackeln mit orangem Rand. */
.im-kasse #quiz-kopf, .im-kasse .intro, .im-kasse .punkte, .im-kasse .fragen { display: none; }
/* Lukes Buchstaben als Webschrift (werkzeug/schrift.py schreibt die Prüfsumme hier hinein): Buchstaben, Akzente, seit
   04.11.2026 auch Ziffern und € , . : - ! + von Lukes Ziffernblatt (das Minus U+2212 der Zähler ist Lukes Strich). Was
   fehlt (Q, X, Z, Ç …), kommt aus der nächsten Schrift. Ein Schnitt für alle Stärken, damit der Browser Lukes Striche nicht
   künstlich fett macht. */
@font-face {
  font-family: "Luke";
  src: url("assets/luke.woff?v=036d78e0") format("woff");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020-0021, U+002B-003A, U+003F, U+0041-005A, U+0061-007A, U+00A0, U+00C0-00DD, U+00E0-00FD, U+20AC, U+2212;
}
.kasse-teil {
  --schrift: "Luke", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --zahlen: ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 480px);
  margin: clamp(14px, 3vw, 24px) auto clamp(12px, 2svh, 40px);
  color: var(--ink);
  font-family: var(--schrift);
}
.kasse-teil[hidden], .kasse-schritt[hidden], .kasse-teil .knopf[hidden] { display: none; }
.kasse-schritt { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vw, 16px); width: 100%; outline: none; }
.kasse-teil .knopf:disabled { opacity: .55; cursor: progress; transform: none; }
.laden-text { margin: 32px 0; font: 700 18px/1.3 var(--schrift); }
.tickets-liste { display: grid; gap: 10px; width: 100%; }
.ticket {
  display: flex;
  flex-wrap: wrap;   /* Beschreibung (kasse.js) in eigener Zeile unter Name, Preis und Zähler */
  align-items: center;
  gap: 6px 10px;
  padding: 10px 10px 10px 14px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  transition: background .1s, box-shadow .1s, transform .08s;
}
.ticket.an { background: var(--yellow); box-shadow: 5px 5px 0 var(--orange); transform: translate(-2px, -2px); }
.ticket.aus { opacity: .55; }
.ticket-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ticket-name { font: 700 23px/1.1 var(--schrift); }
.ticket-preis { font: 700 18px/1.2 var(--schrift); }
.ticket-info { flex: 1 0 100%; font: 700 15px/1.3 var(--schrift); }
.ticket-frei { font: 700 14px/1.2 var(--schrift); color: #a63c06; }
.ticket-luma { padding: 6px 8px; font: 800 18px/1 var(--zahlen); color: var(--ink); text-decoration: none; }
.zaehler { flex: none; display: flex; align-items: center; gap: 6px; }
/* Plus und Minus in Lukes Hand (Ziffernblatt, Mario 04.11.2026). Seine Zeichen sitzen tief in der Zeile (Mitte 0,155 em unter
   der Zeilenmitte, gemessen in luke.otf): Zeilenhöhe 0 und unten 0,31 em Polster stellen sie in die Kreismitte. */
.zaehler button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0 0 .31em;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 800 42px/0 var(--schrift);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zaehler button:disabled { opacity: .3; cursor: default; }
.zaehler button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.zaehler output { min-width: 1.4em; padding-bottom: .29em; text-align: center; font: 700 21px/1 var(--schrift); }   /* Lukes Ziffern sitzen 0,144 em tief: auf Knopfmitte heben */
.summe { margin: 0; font: 800 20px/1.2 var(--schrift); }
.summe:empty::before { content: "\00a0"; }   /* Zeile bleibt da, auch ohne Auswahl: CONTINUE springt nicht */
.kasse-teil .feld { width: 100%; }
.kleingedrucktes { margin: 0; max-width: 400px; text-align: center; font: 700 13.5px/1.4 var(--schrift); color: #123a4c; }
/* BACK: kleine weiße Pille wie der Sprach-Umschalter */
.pille {
  display: inline-block;
  padding: 7px 16px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  line-height: 0;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.pille img { display: block; width: calc(var(--bw) * var(--sp) * .9); height: auto; }
.pille:hover { box-shadow: 4px 4px 0 var(--orange); transform: translate(-1px, -1px); }
.pille:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Stripes Bezahlformular (eingebettet, so hoch wie es will; dort darf die Seite scrollen) */
.kasse-stripe { box-sizing: border-box; width: 100%; min-height: 360px; padding: 6px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; }
.stand { margin: 0; max-width: 420px; text-align: center; font: 700 18px/1.45 var(--schrift); }
.meldung {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  text-align: center;
  background: #fff;
  border: 3px solid var(--orange);
  border-radius: 14px;
  font: 700 16px/1.4 var(--schrift);
}
.meldung[hidden] { display: none; }
.stand a, .meldung a { color: var(--ink); font-weight: 800; }
.tickets-liste.fehlt { animation: wackeln .2s 2; }
.tickets-liste.fehlt .ticket { border-color: var(--orange); }
@media (max-width: 420px) {
  .ticket-name { font-size: 20px; }
  .ticket-info, .ticket-frei { font-size: 13.5px; }
}

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