/* Wichtel-Organisator (Bauplan docs/wichtel-organisator-bauplan.md § 5).
   Preset "koralle" wie /geschenke/wichtelgeschenke/ (Kontraste dort gemessen:
   deep #C74119 auf Weiß 5,00:1 · ink #AA3919 auf --paper 5,94:1).
   Fließtext 18 px (globale Regel), Handy zuerst, sichtbarer Fokus. */
:root { --paper:#FBF7F0; --paper-2:#F4ECDF; --ink:#1A1625; --ink-soft:#4A4458; --line:#E5DBCA;
  --p-tint:#FDE4DC; --p-deep:#C74119; --p-ink:#AA3919; --p-press:#933518;
  --ok:#0E7A52; --ok-tint:#DDF3E9; --warn-tint:#FFF1D6; --radius:18px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.wrap { width:min(760px, 100% - 2rem); margin-inline:auto; }
a { color:var(--p-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline:3px solid var(--p-deep); outline-offset:3px; border-radius:10px; }
[tabindex="-1"]:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.7rem 1rem;
  border-radius:0 0 12px 0; z-index:100; font-weight:600; text-decoration:none; }
.skip:focus { left:0; }

header { padding:1.1rem 0; border-bottom:1px solid var(--line); }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.logo { font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; text-decoration:none; color:var(--ink); }
.logo b { color:var(--p-ink); }
.kopfLink { font-size:1rem; font-weight:600; color:var(--p-ink); text-decoration:none; }

main { padding:1.6rem 0 3rem; }
h1 { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.9rem, 1.3rem + 3vw, 2.8rem); line-height:1.15; margin:.3rem 0 .8rem; overflow-wrap:anywhere; }
h2 { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); line-height:1.2; margin:2.2rem 0 .7rem; }
h3 { font-size:1.15rem; margin:1.4rem 0 .4rem; }
.kicker { font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--p-ink); font-weight:700; }
.lead { font-size:1.15rem; color:var(--ink-soft); margin:0 0 1.4rem; }
.klein { font-size:1rem; color:var(--ink-soft); }

.karte { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:0 10px 30px -22px rgba(26,22,37,.45); }
.karte + .karte { margin-top:1rem; }
.karte.hervor { border:2px solid var(--p-deep); background:var(--p-tint); }
.karte.gruen { border-color:#9fd8bf; background:var(--ok-tint); }
.karte.warn { border-color:#f0cf8a; background:var(--warn-tint); }

label, .feldTitel { display:block; font-weight:600; margin:1.1rem 0 .35rem; }
.feld { margin-bottom:.2rem; }
input[type=text], input[type=date], textarea, select {
  width:100%; font:inherit; font-size:18px; color:var(--ink); background:#fff; border:2px solid #CFC3AF; border-radius:12px;
  padding:.7rem .85rem; min-height:52px; }
textarea { min-height:90px; resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:var(--p-deep); }
.hilfe { font-size:1rem; color:var(--ink-soft); margin:.3rem 0 0; }

.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chips input { position:absolute; opacity:0; width:1px; height:1px; }
.chips label { margin:0; font-weight:600; border:2px solid #CFC3AF; background:#fff; border-radius:999px; padding:.55rem 1.05rem;
  min-height:48px; display:inline-flex; align-items:center; cursor:pointer; }
.chips input:checked + label { background:var(--p-deep); border-color:var(--p-deep); color:#fff; }
.chips input:focus-visible + label { outline:3px solid var(--p-deep); outline-offset:3px; }

.haken { display:flex; gap:.6rem; align-items:center; font-weight:500; margin:.6rem 0 0; }
.haken input { width:24px; height:24px; accent-color:var(--p-deep); }

.namensListe { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.namensListe li { display:flex; gap:.5rem; align-items:center; }
.namensListe .nr { flex:0 0 2rem; text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.namensListe input { flex:1 1 auto; min-width:0; }

details { border:1px solid var(--line); border-radius:14px; background:var(--paper-2); padding:.2rem 1rem; margin-top:1.2rem; }
summary { cursor:pointer; font-weight:600; padding:.8rem 0; min-height:48px; }
.ausnahme { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.5rem 0; }
.ausnahme select { flex:1 1 9rem; width:auto; }
.ausnahme span { white-space:nowrap; }

.knopf { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:inherit; font-weight:700; font-size:1.05rem;
  background:var(--p-deep); color:#fff; border:2px solid var(--p-deep); border-radius:14px; padding:.8rem 1.3rem; min-height:52px;
  cursor:pointer; text-decoration:none; text-align:center; }
.knopf:hover { background:var(--p-press); border-color:var(--p-press); }
.knopf:disabled { opacity:.6; cursor:wait; }
.knopf.gross { width:100%; font-size:1.2rem; min-height:60px; }
.knopf.zweit { background:#fff; color:var(--p-ink); }
.knopf.zweit:hover { background:var(--p-tint); }
.knopf.wa { background:#0E7A52; border-color:#0E7A52; }
.knopf.wa:hover { background:#0a5c3e; border-color:#0a5c3e; }
.knopf.klein { font-size:1rem; min-height:46px; padding:.55rem .9rem; }
.knopfReihe { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.textKnopf { background:none; border:0; font:inherit; color:var(--p-ink); text-decoration:underline; cursor:pointer; padding:.4rem 0; min-height:44px; }

.fehler { color:#9B1C1C; background:#FDECEC; border:1px solid #F3B9B9; border-radius:12px; padding:.7rem .9rem; margin-top:1rem; font-weight:600; }
.fehler:empty { display:none; }
.status { margin-top:.8rem; }

.teilnehmerListe { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.teilnehmerListe li { background:#fff; border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; }
.tName { font-weight:700; font-size:1.15rem; overflow-wrap:anywhere; }
.tStatus { font-size:1rem; color:var(--ink-soft); }
.tStatus.ja { color:var(--ok); font-weight:600; }

.zugang { word-break:break-all; font-family:ui-monospace,Consolas,monospace; font-size:.95rem; background:#fff; border:1px dashed #CFC3AF;
  border-radius:10px; padding:.6rem .8rem; margin:.6rem 0 0; }

.schritte { counter-reset:s; list-style:none; padding:0; display:grid; gap:.8rem; }
.schritte li { counter-increment:s; position:relative; padding-left:3rem; }
.schritte li::before { content:counter(s); position:absolute; left:0; top:0; width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--p-deep); color:#fff; font-weight:700; display:grid; place-items:center; }
.faq details { background:#fff; }
.faq p { margin:.2rem 0 1rem; }
.linkListe { padding-left:1.2rem; }
.linkListe li { margin:.35rem 0; }

.los { text-align:center; padding:2rem 1.2rem; }
.losName { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(2.2rem, 1.5rem + 4vw, 3.4rem); line-height:1.1; color:var(--p-ink);
  overflow-wrap:anywhere; margin:.3rem 0 .4rem; }
.wunschZitat { font-size:1.15rem; background:#fff; border-left:4px solid var(--p-deep); border-radius:8px; padding:.7rem 1rem; margin:1rem 0 0; text-align:left; }
.zaehler { font-size:1rem; color:var(--ink-soft); text-align:right; margin-top:.25rem; }

footer { border-top:1px solid var(--line); padding:1.4rem 0 2rem; font-size:1rem; color:var(--ink-soft); }
footer .wrap { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
footer a { color:inherit; }

[hidden] { display:none !important; }
@media (prefers-reduced-motion: no-preference) { .knopf { transition:background .15s ease; } }