/* Rembrandt Burger × Spiritbox — Gewinnspiel
   Farben stammen aus dem Divi-Customizer der Hauptseite:
   #213f23 (Flaeche), #003517 (Kopf/Fuss), #dd9933 (Akzent), #e4e8e0 / #9aa694.

   MOBILE FIRST. Der Hauptweg ist der QR-Code auf dem Tisch, also das Handy.
   Die Basisregeln unten gelten fuer schmale Displays; groessere Layouts kommen
   ausschliesslich ueber `min-width`-Abfragen dazu. Beim Aendern bitte beibehalten. */

:root {
  --green:        #213f23;  /* Seitenhintergrund, exakt wie in Denis' Entwurf */
  --green-deep:   #162b18;  /* Kopf- und Fussleiste */
  --green-soft:   #2b5230;  /* Karten, Eingabefelder */
  --green-line:   #3d6b42;  /* Rahmen auf gruenem Grund */
  --gold:         #dd9933;  /* Akzentfarbe der Hauptseite */
  --gold-dark:    #b87b22;
  --paper:        #ffffff;
  --bone:         #e4e8e0;
  --sage:         #9aa694;
  --ink:          #1a1a1a;
  --error:        #ff9c8f;
  --error-deep:   #7a2118;
  --radius: 4px;
  --maxw: 860px;
  --pad: 20px;              /* seitlicher Rand, waechst auf groesseren Displays */
  --tap: 48px;              /* Mindestgroesse fuer Tippziele */
  --font-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  background: var(--green);
  /* Verhindert seitliches Wackeln, falls doch mal etwas ueberhaengt. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); }
a:hover { color: var(--paper); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Sichtbarer Fokus — Tastatur- und Screenreader-Bedienung muss erkennbar bleiben. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Sprungziel nicht unter dem Displayrand kleben lassen. */
[id] { scroll-margin-top: 20px; }

/* ---------- Kopfleiste ---------- */

.site-header {
  background: var(--green-deep);
  padding: 14px 0;
  text-align: center;
}

.site-header .logo {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}

.site-header .logo img { max-height: 34px; width: auto; margin: 0 auto; }

/* Innenabstand hebt das Tippziel des Logos ueber die 44-px-Marke. */
.site-header .logo { padding: 6px 10px; }

/* ---------- Hero ---------- */

.hero { padding: 28px 0 4px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(29px, 8.4vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

.hero .lead {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  max-width: 46ch;
}

.hero-cta { margin: 22px 0 0; }
.hero-cta .btn { width: 100%; }

/* ---------- Collab-Lockup: Logo × Wortmarke ---------- */

.collab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 30px 0 24px;
}

.collab-mark {
  /* Auf schmalen Displays eine eigene Zeile, damit „× Spiritbox" zusammenbleibt
     und das × nicht am Ende der Logozeile haengt. */
  flex: 1 0 100%;
}

/* Breitenbegrenzung sitzt am Bild, nicht am Flex-Element — sonst
   fuellt die Zeile sich nicht und das × rutscht daneben. */
.collab-mark img { width: 100%; max-width: 230px; height: auto; margin: 0 auto; }

.collab-x {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 34px);
  line-height: 1;
  color: var(--paper);
}

/* Offizielle Wortmarke der Band, aus dem Kampagnen-Entwurf freigestellt. */
.collab-wordmark { flex: 0 1 auto; line-height: 0; }

.collab-wordmark img {
  width: clamp(150px, 42vw, 200px);
  height: auto;
}

/* ---------- Polaroids ---------- */

/* Auf dem Handy nebeneinander: zwei gestapelte Polaroids fressen sonst
   einen halben Bildschirm, bevor ueberhaupt der Preis sichtbar wird. */
.polaroids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 34px;
}

.polaroid {
  background: var(--paper);
  padding: 7px 7px 9px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  border-radius: 2px;
  margin: 0;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bone);
}

.polaroid figcaption {
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  padding-top: 5px;
}

/* Platzhalter, solange ein Bild noch fehlt. */
.polaroid.leer img { display: none; }

.polaroid.leer .platzhalter {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background: var(--bone);
  color: #5c6b57;
  font-size: 11px;
  line-height: 1.4;
}

/* Bildnachweis im Polaroid — Bedingung der Freigabe durch das Label. */
.polaroid .credit {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.3;
  color: #6b6b6b;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* ---------- Tourdaten ---------- */

.tour-intro { margin: 0 0 16px; font-size: 15.5px; max-width: 52ch; }

.tour { list-style: none; margin: 0; padding: 0; }

.tour li {
  display: flex;
  flex-direction: column;   /* auf dem Handy Datum ueber Ort */
  gap: 1px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.tour li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.13); }

.tour-datum {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-size: 15px;
}

.tour-ort {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.25;
}

.tour li.tour-gewinn { background: rgba(221, 153, 51, 0.09); }

/* Sitzt im Ort-Span, damit es auf dem Handy hinter dem Hallennamen umbricht
   statt eine eigene Zeile zu erzwingen. */
.tour-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.06em;
  vertical-align: 2px;
  white-space: nowrap;
}

/* ---------- Abschnitte ---------- */

section { padding: 4px 0 34px; }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(21px, 5.6vw, 34px);
  line-height: 1.14;
  margin: 0 0 18px;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(29px, 8vw, 42px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

/* ---------- So geht's ---------- */

.ablauf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.ablauf-bild { max-width: 130px; }
.ablauf-bild img { width: 100%; }

.ablauf-bild .platzhalter {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  border: 2px dashed var(--green-line);
  border-radius: var(--radius);
  color: var(--sage);
  font-size: 12px;
  line-height: 1.45;
}

.steps {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: schritt;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.steps li::before {
  content: counter(schritt) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
}

.steps li:last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */

.form-card { margin: 0; }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  min-height: var(--tap);
  font-family: var(--font-body);
  font-size: 16px; /* nicht kleiner: iOS zoomt sonst beim Fokus in das Feld */
  color: var(--paper);
  background: var(--green-soft);
  border: 2px solid var(--paper);
  border-radius: var(--radius);
  padding: 13px 15px;
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder { color: rgba(255, 255, 255, 0.62); }
.field input[aria-invalid="true"] { border-color: var(--error); }

.hint {
  font-size: 13px;
  color: var(--sage);
  margin: 6px 0 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

/* Grosszuegiges Tippziel: die ganze Zeile ist anklickbar, nicht nur das Kaestchen. */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 18px;
  padding: 10px 12px 10px 10px;
  background: rgba(0, 0, 0, 0.14);
  border-radius: var(--radius);
  cursor: pointer;
}

.consent.optional {
  background: rgba(0, 0, 0, 0.08);
  font-size: 14px;
}

.consent-zusatz { display: block; margin-top: 3px; color: var(--sage); font-size: 13px; }

.consent input {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--gold);
}

.btn {
  display: inline-block;
  width: 100%;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 17px;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  border-radius: var(--radius);
  padding: 15px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation; /* kein 300-ms-Verzoegerung/Doppeltipp-Zoom */
}

.btn:hover { background: var(--paper); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: default; }

.form-note {
  font-size: 13px;
  color: var(--sage);
  margin: 14px 0 0;
}

/* Honeypot: fuer Menschen unsichtbar, aber nicht display:none —
   manche Bots ueberspringen ausgeblendete Felder. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.msg {
  padding: 13px 15px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 15px;
}

.msg.error {
  background: var(--error-deep);
  border: 1px solid var(--error);
  color: #ffe6e2;
}

/* ---------- Statusseiten ---------- */

.status { padding: 44px 0; text-align: center; }

.status .icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
}

.status .icon.good { color: var(--gold); }
.status .icon.bad  { color: var(--error); }

.status h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(25px, 6.6vw, 40px);
  line-height: 1.1;
  margin: 0 0 14px;
}

.status p { max-width: 52ch; margin: 0 auto 16px; }
.status .btn { margin-top: 8px; }

/* ---------- Kleingedrucktes ---------- */

.fineprint { font-size: 15px; }
.fineprint h2 { font-size: 19px; }
.fineprint ul { padding-left: 20px; margin: 0 0 14px; }
.fineprint li { margin-bottom: 7px; }
.fineprint h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  margin: 24px 0 8px;
}

/* ---------- Fussleiste ---------- */

.site-footer {
  background: var(--green-deep);
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  margin-top: 16px;
}

.site-footer a {
  color: var(--paper);
  text-decoration: none;
  display: block;          /* auf dem Handy untereinander = groessere Tippziele */
  padding: 13px 8px;       /* ergibt zusammen mit der Zeilenhoehe >= 44 px */
}

.site-footer a:hover { color: var(--gold); }
.site-footer .copy { color: var(--sage); margin: 12px 0 0; font-size: 13px; }

/* =========================================================================
   Ab hier: Erweiterungen fuer groessere Displays. Mobile-first — unterhalb
   dieser Breiten gilt alles oben Stehende unveraendert.
   ========================================================================= */

/* ---------- Ab 560 px: mehr Luft, Fussleiste in eine Zeile ---------- */

@media (min-width: 560px) {
  :root { --pad: 24px; }

  body { font-size: 17px; line-height: 1.65; }

  .site-header { padding: 18px 0; }
  .site-header .logo img { max-height: 42px; }

  .hero { padding: 46px 0 8px; }
  .hero .lead { font-size: 18px; }

  .hero-cta { margin: 26px 0 0; }
  .hero-cta .btn { width: auto; min-width: 260px; }

  .collab { justify-content: flex-start; text-align: left; gap: 26px; margin: 38px 0 28px; }
  .collab-mark { flex: 0 1 auto; }
  .collab-mark img { max-width: 300px; margin: 0; }
  .collab-wordmark img { width: clamp(200px, 26vw, 290px); }

  .polaroids { gap: 26px; margin-bottom: 46px; }
  .polaroid { padding: 12px 12px 14px; }
  .polaroid figcaption { font-size: 21px; padding-top: 8px; }
  .polaroid.leer .platzhalter { font-size: 13px; padding: 16px; }

  section { padding: 8px 0 42px; }

  .steps li { padding-left: 34px; margin-bottom: 14px; }

  .site-footer a { display: inline-block; margin: 0 10px; padding: 4px 0; }

  .polaroid .credit { font-size: 11px; margin-top: 3px; }

  .tour li { flex-direction: row; align-items: baseline; gap: 16px; padding: 13px 0; }
  .tour-datum { flex: 0 0 108px; font-size: 16px; }
  .tour-ort { font-size: 18px; }
}

/* ---------- Ab 720 px: zweispaltiges Raster wie in Denis' Entwurf ---------- */

@media (min-width: 720px) {
  :root { --pad: 24px; }

  .ablauf {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 34px;
  }

  .ablauf-bild {
    max-width: none;
    align-self: end;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  /* Im zweispaltigen Raster steht der Button neben den Feldern und
     braucht die volle Spaltenbreite nicht zu sprengen. */
  .status .btn { width: auto; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}