/* Mitmachen-Seite von Alltagsduo (öffentlich, Ziel des QR-Codes). Look des Duo-Plakats, mobil zuerst, nur hell. */

/* ------------------------------------------------------------ Schriften (wie auf dem Plakat, lokal, SIL OFL: schriften/OFL-*.txt) */
@font-face { font-family: "Bricolage Condensed"; src: url("schriften/bricolage-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("schriften/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("schriften/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Ziffern 0–9 aus Bricolage: Atkinson setzt die Null mit Schrägstrich („2Ø27“) */
@font-face { font-family: "Ziffern"; src: url("schriften/ziffern-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Ziffern"; src: url("schriften/ziffern-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0030-0039; }

/* ------------------------------------------------------------ Farben (Duo-Plakat) – Kontraste: test/kontrast.mjs */
:root {
  --papier: #ffffff;        /* Seitengrund = weißer Rand des Plakats */
  --petrol: #0f4f55;        /* Kopf, Knöpfe, gewählte Chips (weiß darauf 9,3:1) */
  --petrol-tief: #0b4348;   /* gedrückt */
  --gelb: #ffc94a;          /* Plakette 16,52 €, Akzente auf Petrol (6,0:1) */
  --creme: #f6efe4;         /* Formular-Karte */
  --tinte: #0b3a3f;         /* Text */
  --tinte-2: #476569;       /* Nebentext (6,3:1 auf Weiß, 5,5:1 auf Creme) */
  --rand-feld: #6b8689;     /* Ränder von Eingabefeldern (≥ 3:1) */
  --linie: #e4ddd1;         /* Trennlinien (nur Schmuck) */
  --fehler: #b3261e;
  --fehler-flaeche: #fbeceb;
  --schrift: "Ziffern", "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --anzeige: "Bricolage Condensed", "Arial Narrow", system-ui, sans-serif;
  --rand: 12px;             /* weißer Rahmen um die Flächen */
  --radius: 16px;
  --radius-feld: 12px;
}

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.5 var(--schrift); /* 17 px wie iOS */
  font-synthesis: none;
}
a { color: var(--petrol); text-underline-offset: 0.15em; }
a, button, label, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ul, ol { margin: 0; }
b, strong { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
.nb { white-space: nowrap; }

.rahmen {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--rand) max(var(--rand), env(safe-area-inset-right)) max(var(--rand), env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
}

/* Überschriften der Abschnitte: schmale Plakatschrift */
.vormerken h2, .vorteile h2, .konzept h2, .fragen h2, .teilen h2 {
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.005em;
}

/* ------------------------------------------------------------ Kopf = Bildfeld des Plakats */
.held {
  container-type: inline-size;
  background: var(--petrol);
  color: var(--papier);
  border-radius: var(--radius);
  overflow: hidden;
}
.held-text { padding: 14px 20px 0; }
.marke { font-size: 0.9375rem; }
.oberzeile { margin-top: 8px; color: var(--gelb); font-weight: 700; font-size: 1.125rem; }
.held h1 {
  margin-top: 4px;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: clamp(2.1rem, 10.4cqi, 4.2rem);
  line-height: 0.92;
  letter-spacing: 0.003em;
}
/* eine Zeile auf jedem Handy ab 360 px (gemessen: 16 px Schrift = 296 px Text), damit „Vorname“ im ersten Bildschirm bleibt */
.held-unterzeile { margin-top: 8px; font-size: clamp(0.9375rem, 4.6cqi, 1.0625rem); line-height: 1.35; }
.held-bild { position: relative; margin-top: 6px; }
.duo-bild { width: 100%; }

/* Plakette „16,52 €“: gelbe Scheibe rechts neben dem Duo, leicht gedreht wie auf dem Plakat */
.plakette {
  position: absolute;
  right: 4.5cqi;
  top: 45%; /* etwas über der Mitte: unten bleibt Luft bis zur Kante */
  width: 41cqi;
  aspect-ratio: 1;
  translate: 0 -50%;
  rotate: -4deg;
  border-radius: 50%;
  background: var(--gelb);
  color: var(--tinte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}
.plakette-zahl { font-family: var(--anzeige); font-weight: 800; font-size: 14.6cqi; line-height: 0.85; word-spacing: -0.06em; }
.plakette-je { margin-top: 1.4cqi; font-weight: 700; font-size: max(0.875rem, 4cqi); }
.plakette-spaeter { margin-top: 1.2cqi; font-size: max(0.75rem, 3.1cqi); }
@media (prefers-reduced-motion: no-preference) {
  .plakette { animation: stempel 520ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 180ms both; }
}
@keyframes stempel {
  from { opacity: 0; scale: 1.25; rotate: -14deg; }
}

.kurzzeile { margin-top: 8px; padding: 0 6px; color: var(--tinte-2); font-size: 0.9375rem; }

/* ------------------------------------------------------------ Formular */
.vormerken, .teilen {
  margin-top: 12px;
  background: var(--creme);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  scroll-margin-top: 12px;
}
.unterzeile { margin-top: 8px; color: var(--tinte-2); }
.formular { margin-top: 20px; display: grid; gap: 20px; }
.feld { display: grid; gap: 6px; }
.feld label, legend { font-weight: 700; }
legend { padding: 0; margin-bottom: 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

input[type="text"], input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  font: inherit;
  font-size: 1.0625rem; /* mindestens 16 px, sonst zoomt iOS hinein */
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--rand-feld);
  border-radius: var(--radius-feld);
  appearance: none;
}
input:focus-visible { outline: 3px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
input[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 48px; /* Tippfläche mindestens 48 px */
  padding: 0 16px;
  border: 1.5px solid var(--rand-feld);
  border-radius: 999px;
  background: var(--papier);
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out;
}
.chip input:checked + span { background: var(--petrol); border-color: var(--petrol); color: var(--papier); font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--petrol); outline-offset: 2px; }
.chip:active span { transform: scale(0.97); }
.wahl.hat-fehler .chip span { border-color: var(--fehler); }
.wahl > .feld-fehler { margin-top: 8px; }

/* „Anderer Ort“: Textfeld erscheint erst mit der Auswahl (ohne :has() immer sichtbar) */
.anders-feld { display: none; margin-top: 14px; }
.wahl:has(input[value="anders"]:checked) .anders-feld { display: grid; }
@supports not selector(:has(a)) { .anders-feld { display: grid; } }

/* Pflicht-Häkchen: Das Label überspannt die ganze Zeile (auch unter dem Kästchen) und ist mindestens 48 px hoch */
.haken-feld { display: grid; grid-template-columns: 26px 1fr; gap: 0 12px; align-items: start; }
.haken-feld input {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin: 9px 0 0;
  border: 2px solid var(--rand-feld);
  border-radius: 7px;
  background: var(--papier) center / 18px no-repeat;
  cursor: pointer;
}
.haken-feld input:checked {
  border-color: var(--petrol);
  background-color: var(--petrol);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.haken-feld input:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.haken-feld label { grid-area: 1 / 1 / 2 / 3; min-height: 48px; padding: 10px 0 10px 38px; cursor: pointer; }
.haken-feld .feld-fehler { grid-column: 2; }
.haken-feld.hat-fehler input { border-color: var(--fehler); }

/* 16 oder 17: Frage mit Kurzantwort direkt unter dem Alters-Häkchen, die Regeln klappen auf (vor dem Absenden) */
.jugend { grid-column: 1 / -1; margin-top: 2px; background: var(--papier); border-radius: var(--radius-feld); }
.jugend summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.jugend summary::-webkit-details-marker { display: none; }
.jugend summary::after { content: "+"; grid-area: 1 / 2; font-size: 1.4rem; line-height: 1; color: var(--petrol); }
.jugend[open] summary::after { content: "–"; }
.jugend-kurz { font-size: 0.9375rem; color: var(--tinte-2); }
.jugend[open] .jugend-kurz { display: none; } /* steht ausführlich darunter */
.jugend-text { display: grid; gap: 8px; padding: 0 14px 14px; font-size: 0.9375rem; color: var(--tinte-2); }
.jugend-text ul { padding-left: 18px; display: grid; gap: 6px; }

.feld-fehler { color: var(--fehler); font-weight: 700; font-size: 0.9375rem; }
.fehler-liste {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--fehler-flaeche);
  border-left: 4px solid var(--fehler);
  border-radius: 8px;
  color: var(--tinte);
}
.fehler-liste p { font-weight: 700; }
.fehler-liste ul { margin: 6px 0 0; padding-left: 20px; }
.fehler-liste a { color: var(--fehler); font-weight: 700; }
.fehler-liste:focus { outline: none; } /* wird nur per Skript fokussiert (Ansage, Sprung), ist kein Bedienelement */

.klein { font-size: 0.9375rem; color: var(--tinte-2); }
.mitte { text-align: center; text-wrap: balance; }

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--papier);
  background: var(--petrol);
  border: 0;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 120ms ease-out, transform 120ms ease-out;
}
.knopf:active { background: var(--petrol-tief); transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--petrol-tief); }
  .chip:hover span { border-color: var(--petrol); }
}

/* Honigtopf: für Menschen unsichtbar, für Programme ein normales Feld */
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Vorteile: Doppelpunkt aus Petrol und Gelb wie auf dem Plakat */
.vorteile, .konzept { margin-top: 44px; padding: 0 6px; }
.vorteil-liste { list-style: none; margin-top: 16px; padding: 0; }
.vorteil-liste li { position: relative; padding: 14px 0 15px 34px; border-top: 1px solid var(--linie); }
.vorteil-liste li:last-child { border-bottom: 1px solid var(--linie); }
.vorteil-liste li::before, .vorteil-liste li::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.vorteil-liste li::before { left: 0; background: var(--petrol); }
.vorteil-liste li::after { left: 9px; background: var(--gelb); mix-blend-mode: multiply; }
.vorteil-liste h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.vorteil-liste p { margin-top: 2px; color: var(--tinte-2); }

/* ------------------------------------------------------------ Konzept und Ablauf */
.konzept-text { margin-top: 14px; font-size: 1.125rem; line-height: 1.55; }
.schritte { list-style: none; counter-reset: schritt; margin-top: 24px; padding: 0; display: grid; }
.schritte li {
  counter-increment: schritt;
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  padding-bottom: 22px;
}
.schritte li::before {
  content: counter(schritt);
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gelb);
  color: var(--tinte);
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}
/* Verbindungslinie zwischen den Schritten */
.schritte li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: var(--linie);
}
.schritte h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; padding-top: 8px; }
.schritte p { margin-top: 2px; color: var(--tinte-2); }
.gruender { margin-top: 4px; padding: 16px 18px; border-radius: 12px; background: var(--creme); }

/* ------------------------------------------------------------ Häufige Fragen */
.fragen { margin-top: 44px; padding: 0 6px; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-of-type { margin-top: 14px; border-top: 1px solid var(--linie); }
.fragen summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--petrol); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 0 16px; color: var(--tinte-2); }

/* Am Handy steht das Formular oben: am Ende noch einmal dorthin */
.nochmal { margin-top: 32px; }

/* ------------------------------------------------------------ Danke */
.danke-text { margin-top: 12px; font-size: 1.125rem; }
.danke-absender { margin-top: 12px; font-weight: 700; color: var(--gelb); }
.teilen { display: grid; gap: 12px; }
.teilen-link { font-weight: 700; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.teilen-status:empty { display: none; }
.teilen-status { font-weight: 700; color: var(--petrol); }
.danke-info { padding: 22px 6px 6px; }

/* ------------------------------------------------------------ Textseiten (Datenschutz, Impressum) */
.zurueck { padding: 0 6px; }
.zurueck a { display: inline-block; padding: 13px 0; } /* Tippfläche mindestens 48 px */
.schlicht { padding: 16px 6px 8px; }
.schlicht h1 { font-family: var(--anzeige); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.schlicht h1 + p { margin-top: 8px; color: var(--tinte-2); }
.schlicht h2 { font-size: 1.15rem; font-weight: 700; margin-top: 24px; }
.schlicht p, .schlicht ul { margin-top: 8px; }
.schlicht ul { padding-left: 20px; display: grid; gap: 4px; }

/* ------------------------------------------------------------ Fußzeile */
.fuss { margin-top: 36px; padding: 18px 6px 8px; border-top: 1px solid var(--linie); font-size: 0.9375rem; color: var(--tinte-2); }
.fuss a { margin-right: 18px; display: inline-block; padding: 13px 0; } /* Tippfläche mindestens 48 px */

/* ------------------------------------------------------------ Breite Bildschirme: Formular rechts daneben, bleibt stehen */
@media (min-width: 960px) {
  .rahmen { max-width: 1140px; padding: 24px; }
  .seite-mitmachen {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "held vormerken" "kurz vormerken" "vorteile vormerken" "konzept vormerken" "fragen vormerken" ". vormerken" "fuss fuss";
    grid-template-rows: auto auto auto auto auto 1fr auto; /* Resthöhe in die leere Zeile, sonst Lücken links */
    column-gap: 32px;
    align-items: start;
  }
  .seite-mitmachen .held { grid-area: held; }
  .seite-mitmachen .kurzzeile { grid-area: kurz; }
  .seite-mitmachen .vorteile { grid-area: vorteile; }
  .seite-mitmachen .konzept { grid-area: konzept; }
  .seite-mitmachen .fragen { grid-area: fragen; }
  .seite-mitmachen .fuss { grid-area: fuss; }
  /* --karte-oben setzt mitmachen.js: Ist die Karte höher als der Bildschirm, läuft sie beim Scrollen mit, bis ihr Ende bzw. ihr Anfang zu sehen ist */
  .seite-mitmachen .vormerken { grid-area: vormerken; margin-top: 0; position: sticky; top: var(--karte-oben, 24px); padding: 28px 28px 24px; }
  .seite-mitmachen .nochmal { display: none; }
  .held-text { padding: 28px 32px 0; }
  .vormerken h2, .vorteile h2, .konzept h2, .fragen h2, .teilen h2 { font-size: 2.4rem; }
  .seite-danke, .seite-text { max-width: 46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf, .chip span { transition: none; }
}