/* Abholseite, mobil zuerst (390 x 844). Farben/Schrift sind Platzhalter bis zum Generali-Branding. */
:root { --red: #c21b17; --ink: #1a1a1a; --muted: #666; --line: #dedede; --bg: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
header { background: var(--red); color: #fff; font-weight: 800; letter-spacing: .08em; font-size: 14px;
  padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); display: flex; justify-content: center; position: relative; }
#lang { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.6); border-radius: 4px; font: inherit; font-size: 12px; padding: 3px 7px; }
main { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 20px 16px 32px; }
section { display: flex; flex-direction: column; gap: 14px; }
section[hidden] { display: none; }
h1 { font-size: 24px; line-height: 1.2; margin: 4px 0 0; }
.lead { color: var(--muted); margin: 0; }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
input:not([type=checkbox]) { font: inherit; font-size: 16px; color: var(--ink); padding: 12px; border: 1px solid #c9c9c9; border-radius: 8px; width: 100%; }
input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 14px; }
label.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--red); }
label.check a { color: var(--red); }
.optional { margin: 6px 0 0; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.err { color: var(--red); margin: 0; font-size: 14px; }
.button, button.primary { display: block; text-align: center; text-decoration: none; font: inherit; font-weight: 700;
  padding: 14px; border-radius: 999px; border: 1px solid var(--ink); background: #fff; color: var(--ink); width: 100%; }
.primary { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
button[disabled] { opacity: .6; }
video { width: 100%; aspect-ratio: 9 / 16; background: #111; border-radius: 12px; }
.settings { border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.settings summary { color: var(--muted); cursor: pointer; padding: 4px 0; }
.settings label { margin: 10px 0; }
.link { background: none; border: 0; font: inherit; padding: 6px 0; text-decoration: underline; cursor: pointer; }
.danger { color: var(--red); }
.ring { width: 56px; height: 56px; border-radius: 50%; border: 6px solid #eee; border-top-color: var(--red);
  animation: spin 1s linear infinite; margin: 24px auto 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
#waiting, #gone, #bad { text-align: center; padding-top: 24px; }
footer { text-align: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); font-size: 13px; }
footer a { color: var(--muted); }