/* More-Gewinnspiel-LP - Bennis Stil: warm, seriös, unaufgeregt.
   Farben: Creme #fff7ef, Brand-Grün #81bd00, Dark Chocolate #3B2415, Gold #D4A843 */

:root {
  --creme: #fff7ef;
  --gruen: #81bd00;
  --gruen-dunkel: #6da300;
  --schoko: #3B2415;
  --gold: #D4A843;
  --weiss: #ffffff;
  --grau: #6b5d52;
  --linie: #f0e4d7;
  --radius: 14px;
  --schatten: 0 2px 12px rgba(59, 36, 21, 0.07);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--schoko);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* ===== Kopf ===== */
.kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kopf-marke {
  font-weight: 800;
  font-size: 18px;
  color: var(--schoko);
}
.kopf-untertitel {
  font-size: 14px;
  color: var(--grau);
}

/* ===== Layout ===== */
.seite {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 22px 20px;
  margin: 0 0 18px;
}

h1 { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 21px; line-height: 1.3; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--gruen-dunkel); }

.dezent { color: var(--grau); font-size: 15px; }
.klein { font-size: 13.5px; line-height: 1.55; }

.karten-label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  background: #f3fae3;
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 10px;
}
.karten-label-gold {
  color: #8a6914;
  background: #fdf3dd;
}

/* ===== Hero ===== */
.hero {
  margin: 0 0 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.hero picture {
  display: block;
  aspect-ratio: 2 / 1;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
.hero picture img {
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .hero picture {
    aspect-ratio: 4 / 5;
  }
}
.hero-fallback {
  background: linear-gradient(135deg, #fffdf9 0%, var(--creme) 55%, #fdf3dd 100%);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-align: center;
  padding: 44px 24px;
}
.hero-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.hero-titel {
  font-size: 38px;
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 6px;
}
.hero-wert {
  font-size: 21px;
  color: var(--grau);
  margin: 0 0 16px;
}
.hero-termin {
  display: inline-block;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 16px;
  margin: 0;
}

/* ===== Countdown-Band ===== */
.countdown-band {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-align: center;
  padding: 18px 16px 16px;
  margin: 0 0 18px;
}
.countdown-titel {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.countdown-boxen {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.cd-box {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 10px;
  min-width: 64px;
  padding: 10px 8px 8px;
}
.cd-zahl {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--schoko);
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grau);
  margin-top: 2px;
}
.countdown-untertitel {
  color: var(--grau);
  font-size: 14px;
  margin: 12px 0 0;
}
@media (max-width: 380px) {
  .cd-box { min-width: 56px; padding: 8px 6px 6px; }
  .cd-zahl { font-size: 25px; }
}

/* ===== Listen ===== */
.schritte {
  margin: 0 0 14px;
  padding-left: 0;
  list-style-position: inside;
}
.schritte li { margin-bottom: 6px; }

.punkte {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.punkte li { margin-bottom: 8px; }
.punkte.klein li { margin-bottom: 10px; }

/* ===== Aktion ===== */
.rabatt-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.rabatt-box {
  background: #f9fcf2;
  border: 1px solid #e3f0c8;
  border-radius: 10px;
  padding: 12px 14px;
}
.rabatt-box p { margin: 0; font-size: 15px; }

/* ===== Extra-Chance ===== */
.karte-extra { border: 1px solid #f0dfb6; }

/* ===== Knöpfe ===== */
.knopf {
  display: inline-block;
  background: var(--weiss);
  color: var(--schoko);
  border: 2px solid var(--schoko);
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.knopf:hover { transform: translateY(-1px); box-shadow: var(--schatten); }
.knopf-gruen {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--weiss);
}
.knopf-gruen:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.knopf-breit { width: 100%; padding: 14px 26px; font-size: 18px; }
.cta-zeile { margin: 16px 0 10px; }

/* ===== Formular ===== */
.karte-formular { border: 2px solid var(--gruen); }
.element { margin-bottom: 14px; }
.element label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.element input[type="text"] {
  width: 100%;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: #fffdf9;
  color: var(--schoko);
  font-size: 17px;
  font-family: inherit;
  padding: 12px 14px;
}
.element input[type="text"]:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(129, 189, 0, 0.18);
}
.element .validation {
  display: none;
  color: #b3261e;
  font-size: 14px;
  margin-bottom: 4px;
}
.element.invalid .validation { display: block; }
.element.invalid input[type="text"] { border-color: #b3261e; }
.element-submit { margin-top: 18px; }

/* ===== Danke-Seiten ===== */
.karte-danke { text-align: left; }
.check-kreis {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--weiss);
  font-size: 32px;
  font-weight: 800;
  line-height: 56px;
  text-align: center;
  margin: 0 0 14px;
}
.doi-vorschau {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: 10px;
  margin: 0 0 14px;
}
.share-box {
  background: #f9fcf2;
  border: 1px solid #e3f0c8;
  border-radius: 10px;
  padding: 16px;
  margin-top: 18px;
}
.share-link {
  background: var(--weiss);
  border: 1px dashed var(--gruen);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.share-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}
.zurueck { text-align: center; margin: 6px 0 0; }

/* ===== Beendet ===== */
.karte-beendet { border: 1px solid var(--gold); }

/* ===== Screenreader-only (H1 bei Bild-Hero) ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Rechtliches + Fuß ===== */
.karte-recht summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 0;
}
.karte-recht details[open] summary { margin-bottom: 10px; }

.fuss {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 36px;
  text-align: center;
  color: var(--grau);
  font-size: 14px;
}
.fuss a {
  color: var(--grau);
  display: inline-block;
  padding: 8px 4px;
}

/* ===== Responsive ===== */
@media (min-width: 641px) {
  .seite { padding: 28px 20px 48px; }
  .karte { padding: 28px 30px; }
  .hero-titel { font-size: 52px; }
  .rabatt-liste { grid-template-columns: 1fr 1fr; }
  .rabatt-box:first-child { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  body { font-size: 16px; }
  .hero-titel { font-size: 31px; }
  .knopf { padding: 10px 20px; }
}