/* Gewinnspielseite – mobil zuerst, keine externen Schriften. */
:root {
  --gruen: #1f7a4d;
  --gruen-dunkel: #155a38;
  --gelb: #f4b400;
  --rot: #b3261e;
  --text: #1e1e1e;
  --grau: #5f6368;
  --hintergrund: #f6f8f6;
  --karte: #ffffff;
  --rand: #dfe5e0;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--hintergrund);
  line-height: 1.5;
}
.kopf { background: var(--gruen); color: #fff; }
/* Vereinslogo (JPG, farbig) auf weißer Fläche, damit es unverfälscht wirkt */
.logo-flaeche { background: #fff; padding: .75rem 1rem; text-align: center; }
.logo-flaeche .logo { max-width: min(100%, 22rem); height: auto; display: inline-block; }
.kopf-text { padding: 1rem 1rem 1.25rem; max-width: 42rem; margin: 0 auto; }
.kopf .verein { margin: 0; font-size: .9rem; opacity: .9; }
.kopf h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.kopf .untertitel { margin: .25rem 0 0; font-size: .95rem; }
main { max-width: 42rem; margin: 0 auto; padding: 1rem; }
.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 12px;
  padding: 1.25rem; margin-bottom: 1rem;
}
.karte h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--gruen-dunkel); }
.liste { padding-left: 1.25rem; margin: 0; }
.liste li { margin-bottom: .5rem; }
.klein { font-size: .85rem; color: var(--grau); }
.aktion { text-align: center; margin: 1rem 0; }
.button {
  display: inline-block; padding: .9rem 1.5rem; border-radius: 999px;
  border: 2px solid var(--gruen); background: #fff; color: var(--gruen-dunkel);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-width: 14rem;
}
.button.primaer { background: var(--gruen); color: #fff; }
.button:hover, .button:focus-visible { filter: brightness(1.08); outline: 3px solid var(--gelb); outline-offset: 2px; }
.button:disabled { opacity: .6; cursor: wait; }
.gewinn { border-color: var(--gelb); text-align: center; }
.konfetti { font-size: 3rem; line-height: 1; }
.gewinn-nr { font-weight: 700; margin: .25rem 0; }
.code-label { margin: 1rem 0 .25rem; font-size: .9rem; color: var(--grau); }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.9rem; letter-spacing: .12em; font-weight: 700;
  margin: 0 0 1rem; user-select: all; word-break: break-all;
  background: #fff8e1; border: 2px dashed var(--gelb); border-radius: 10px; padding: .75rem;
}
.warnung-box {
  background: #fff3cd; border-left: 4px solid var(--gelb); border-radius: 6px;
  padding: .75rem 1rem; text-align: left; margin-bottom: 1rem;
}
.warnung-box p { margin: 0; }
.hinweis { background: #e8f5ee; border-radius: 8px; padding: .5rem .75rem; }
.meldung { margin: .5rem 0 0; font-weight: 600; }
.meldung.erfolg { color: var(--gruen-dunkel); }
.meldung.warnung { color: var(--rot); }
.niete { text-align: center; }
.spruch { font-size: 1.15rem; font-style: italic; }
.fehler { border-color: var(--rot); }
.fehler h2 { color: var(--rot); }
.partner { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.partner-karte {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .75rem; border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text); text-decoration: none; text-align: center; font-size: .9rem;
}
.partner-karte img { max-width: 100%; height: 64px; object-fit: contain; }
.partner-karte:hover, .partner-karte:focus-visible { border-color: var(--gruen); }
.fuss { text-align: center; padding: 1.5rem 1rem 2.5rem; }
.fuss nav { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.fuss a { color: var(--gruen-dunkel); }
.rechtstext { max-width: 42rem; margin: 0 auto; padding: 1rem; }
.rechtstext .todo {
  background: #fff3cd; border-left: 4px solid var(--gelb); padding: .75rem 1rem; border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .konfetti { animation: huepfen .8s ease-in-out 2; }
  @keyframes huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
}