/* ─────────────────────────────────────────────────────────────────────────── zustimmung.css · Zustimmung zu Nutzungsbedingungen vor jedem Start Entscheidung E3 (4. August 2026): vor jedem Start ist zuzustimmen, auch anonym. Umsetzung: Häkchen mit Verweis auf die beiden Rechtstexte plus ein kurzer Haftungssatz. Der Startknopf und der vorbefüllte Demo-Durchlauf bleiben gesperrt, bis das Häkchen gesetzt ist. Farben und Formen kommen aus den Tokens, keine eigenen Werte. ─────────────────────────────────────────────────────────────────────────── */

.pp-consent {
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
}

.pp-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pp-consent-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--coral-dark);
  cursor: pointer;
}

.pp-consent-row label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}

.pp-consent-row label button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--coral-dark);
  text-decoration: underline;
  cursor: pointer;
}

.pp-consent-row label button:hover,
.pp-consent-row label button:focus-visible {
  color: var(--ink);
}

.pp-consent-note {
  margin: 8px 0 0 27px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Erst nach einem Startversuch ohne Häkchen: der Kasten wird hervorgehoben. */
.pp-consent.pp-consent-missing {
  border-color: #690808;
  border-left-color: #690808;
  background: var(--white);
}

.pp-consent.pp-consent-missing .pp-consent-note { color: #690808; }

/* Die Hinweiszeile erscheint erst, wenn ein Start ohne Haekchen versucht wurde. */
.pp-consent-warn {
  display: none;
  margin: 8px 0 0 27px;
  font-size: 13px;
  font-weight: 600;
  color: #690808;
}

.pp-consent.pp-consent-missing .pp-consent-warn { display: block; }

/* Auf dunklem Grund (Leagues und Events tragen die dunkle Schale). */
.pp-shell-dark .pp-consent,
.stage-dark .pp-consent {
  background: rgba(255, 253, 249, 0.06);
  border-color: rgba(242, 239, 232, 0.22);
}

.pp-shell-dark .pp-consent-row label,
.stage-dark .pp-consent-row label { color: var(--cream); }

.pp-shell-dark .pp-consent-note,
.stage-dark .pp-consent-note { color: var(--sand); }

.pp-shell-dark .pp-consent-row label button,
.stage-dark .pp-consent-row label button { color: var(--gold-soft); }

@media (max-width: 640px) {
  .pp-consent { padding: 12px 13px; }
  .pp-consent-row label { font-size: 13.5px; }
  .pp-consent-note { margin-left: 0; }
}