:root{
  --rot:#CE1719;--rot-dunkel:#A01214;
  --bg:#F2F2F7;--card:#FFFFFF;--sep:#E5E5EA;
  --label:#000000;--sec:#6C6C70;--ter:#AEAEB2;--placeholder:#C7C7CC;
  --disabled-bg:#D1D1D6;--disabled-fg:#8E8E93;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--label);line-height:1.35;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--rot);text-decoration:none}
input,textarea,select,button{font-family:inherit;font-size:17px;color:var(--label)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}

.sheet{max-width:600px;margin:0 auto;padding:16px 16px 120px;min-height:100vh;position:relative}
.close{position:absolute;top:16px;left:16px;width:44px;height:44px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;color:#000}
.brand{display:block;text-align:center;padding-top:14px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sec)}
.titel{margin:56px 0 0;text-align:center;font-size:34px;font-weight:700;letter-spacing:-.01em}
.untertitel{margin:10px auto 0;max-width:420px;text-align:center;font-size:17px;color:var(--label)}

.abschnitt{margin-top:28px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.card{background:var(--card);border-radius:20px;margin-top:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;position:relative}
.row + .row::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--sep)}
.row .lbl{font-size:17px;font-weight:600;white-space:nowrap}
.row input{flex:1;min-width:0;border:none;background:transparent;height:56px;padding:0;outline:none;text-align:left}
.row .prefix{display:flex;align-items:center;gap:4px;font-size:17px;color:var(--label)}
.row .prefix svg{color:var(--sec)}
.row .clear{width:24px;height:24px;border-radius:50%;background:var(--placeholder);border:none;color:#fff;display:none;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:0 0 24px}
.row .clear.show{display:flex}

.opt{display:flex;align-items:center;gap:12px;padding:14px 18px;min-height:60px;cursor:pointer;position:relative}
.opt + .opt::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--sep)}
.opt .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.opt .t{font-size:17px;font-weight:600}
.opt .s{font-size:15px;color:var(--sec);margin-top:2px}
.opt .val{font-size:17px;color:var(--label);white-space:nowrap}
.opt input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.radio{width:28px;height:28px;border-radius:50%;border:2px solid var(--placeholder);flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:#fff;background:#fff}
.radio svg{display:none}
.opt input:checked ~ .radio{background:var(--rot);border-color:var(--rot)}
.opt input:checked ~ .radio svg{display:block}
.opt.aus{cursor:not-allowed}
.opt.aus .t{color:var(--disabled-fg)}
.opt.aus .radio{border-color:var(--sep);background:var(--bg)}

.picker{display:none;padding:0 18px 14px}
.picker.show{display:flex;gap:10px;flex-wrap:wrap}
.picker .sel{flex:1 1 140px;position:relative}
.picker select{width:100%;appearance:none;-webkit-appearance:none;border:none;background:var(--bg);border-radius:12px;height:46px;padding:0 36px 0 14px;font-size:17px;outline:none}
.picker .sel svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--sec)}

.hilfe{display:inline-block;margin:12px 0 0 6px;font-size:17px;color:var(--rot)}
.text{margin:22px 6px 0;font-size:17px}
.textarea{margin-top:14px;background:var(--card);border-radius:20px;padding:16px 18px 10px;position:relative}
.textarea textarea{width:100%;border:none;background:transparent;resize:none;min-height:140px;outline:none;padding:0;font-size:22px;line-height:1.3}
.textarea .count{text-align:right;font-size:17px;color:var(--sec)}
.fuss{margin:14px 6px 0;font-size:15px;color:var(--sec)}
.fehler{color:var(--rot);font-weight:600}

.cta{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,rgba(242,242,247,0))}
.cta .inner{max-width:600px;margin:0 auto}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:28px;border:none;background:var(--rot);color:#fff;font-size:19px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--rot-dunkel)}
.btn:disabled{background:var(--disabled-bg);color:var(--disabled-fg);cursor:not-allowed}
.btn.sekundaer{background:#fff;color:var(--rot);box-shadow:inset 0 0 0 1px var(--sep)}
.btn.sekundaer:hover{background:#fafafa}

/* Bestätigung */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:48px;gap:10px}
.kreis{position:relative;width:88px;height:88px;border-radius:50%;background:var(--rot);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.kreis::before,.kreis::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rot);animation:puls 1.8s ease-out infinite}
.kreis::after{animation-delay:.9s}
@keyframes puls{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.kreis::before,.kreis::after{display:none}}
.hero h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.01em}
.hero p{margin:0;font-size:17px;color:var(--label);max-width:420px}
.kv{display:flex;justify-content:space-between;gap:12px;min-height:52px;padding:14px 18px;position:relative;font-size:17px}
.kv + .kv::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--sep)}
.kv .k{color:var(--sec)}
.kv .v{font-weight:600;text-align:right}
.check{display:flex;gap:14px;padding:14px 18px;position:relative;align-items:flex-start}
.check + .check::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--sep)}
.check .ico{flex:0 0 36px;height:36px;border-radius:10px;background:var(--rot);color:#fff;display:flex;align-items:center;justify-content:center}
.check > span:not(.ico){display:flex;flex-direction:column;flex:1;min-width:0}
.check .t{font-size:17px;font-weight:600}
.check .s{font-size:15px;color:var(--sec);margin-top:2px}
.stack{display:flex;flex-direction:column;gap:10px}

/* Startseite: Personenauswahl */
.person{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:72px;color:var(--label);text-decoration:none;position:relative}
.person + .person::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--sep)}
.person:hover{background:#FAFAFA;color:var(--label)}
.person .avatar{flex:0 0 44px;height:44px;border-radius:50%;background:var(--rot);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
.person .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.person .t{font-size:17px;font-weight:600}
.person .s{font-size:15px;color:var(--sec);margin-top:2px}
.person .chev{color:var(--placeholder);flex:0 0 18px}
