:root { --rot: #c8102e; --rot-dunkel: #9c0c24; --tinte: #1c1b1f; --grau: #5f5c66; --linie: #dedbe3;
  --grund: #faf8f6; --flaeche: #ffffff; --gruen: #1f7a4d; --hell: #fdecef; }
@media (prefers-color-scheme: dark) { :root { --tinte: #eeeaf2; --grau: #a9a4b3; --linie: #3a3742;
  --grund: #17161a; --flaeche: #211f26; --hell: #3a1a22; --rot: #ff5c77; --rot-dunkel: #ff8298; --gruen: #5fd39a; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.55 system-ui, sans-serif; color: var(--tinte); background: var(--grund); }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 16px; border-bottom: 3px solid var(--rot); background: var(--flaeche); }
.marke { font-size: 1.35rem; font-weight: 300; text-decoration: none; color: var(--tinte); letter-spacing: .02em; }
.marke b { color: var(--rot); font-weight: 800; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
nav form { margin: 0; }
a { color: var(--rot); }
main { max-width: 820px; margin: 0 auto; padding: 16px; }
footer { text-align: center; padding: 28px 16px; color: var(--grau); font-size: .9rem; }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 18px 0 10px; text-wrap: balance; }
h2 { font-size: 1.25rem; margin: 28px 0 8px; }
h3 { margin: 0 0 6px; font-size: 1.08rem; }
.klein { font-size: .88rem; color: var(--grau); }
.meldung { background: var(--hell); border-left: 4px solid var(--rot); padding: 10px 14px; border-radius: 6px; }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 18px; margin: 12px 0; }
.kasten li { margin: 6px 0; }
.held { padding: 24px 0; }
.held p { max-width: 60ch; }
.knopf { display: inline-block; background: var(--rot); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; margin: 6px 6px 6px 0; }
.knopf:hover { background: var(--rot-dunkel); }
@media (prefers-color-scheme: dark) { .knopf { color: #17161a; } }
.knopf.zweit { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); }
.knopf.klein { padding: 5px 12px; font-size: .9rem; margin: 2px; }
.knopf.gefahr { background: var(--tinte); color: var(--grund); }
.schlicht { background: none; border: 0; font: inherit; color: var(--grau); cursor: pointer; padding: 0; text-decoration: underline; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; color: inherit; text-decoration: none; display: block; }
.karte p { margin: 4px 0 0; color: var(--grau); font-size: .93rem; }
.karte.breit { margin: 14px 0; }
.karte.breit p, .karte.breit li { color: var(--tinte); font-size: 1rem; }
.karte.runde { position: relative; transition: transform .12s; }
.karte.runde:hover { transform: translateY(-2px); border-color: var(--rot); }
.karte.runde .nr { position: absolute; right: 14px; top: 10px; font-size: 1.6rem; font-weight: 800; color: var(--linie); }
.karte.runde.fertig { border-color: var(--gruen); }
.karte.runde.fertig p, .karte.runde.fertig .nr { color: var(--gruen); }
.stand { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin: 8px 0 16px; }
.stand div { display: flex; justify-content: space-between; align-items: baseline; }
.stand .titel { font-weight: 800; font-size: 1.2rem; }
.stand .punkte { color: var(--rot); font-weight: 700; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 12px; accent-color: var(--rot); margin: 8px 0 2px; }
.formular { display: grid; gap: 14px; max-width: 440px; margin: 16px 0; }
.formular.breit { max-width: none; }
.formular label { display: grid; gap: 4px; font-weight: 600; }
input:not([type=radio]):not([type=checkbox]), textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--flaeche); color: var(--tinte); width: 100%; }
.haken { grid-template-columns: auto 1fr !important; gap: 10px !important; font-weight: 400 !important; align-items: start; }
.haken input { margin-top: 5px; width: 18px; height: 18px; }
.frage { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 12px; padding: 12px 14px 14px; margin: 14px 0; min-width: 0; }
.frage legend { font-weight: 700; padding: 0 6px; }
.stufen, .extras { display: flex; flex-wrap: wrap; gap: 8px; }
.extras { margin-top: 10px; }
.stufen label, .extras label, .paar label { position: relative; cursor: pointer; }
.stufen input, .extras input, .paar input { position: absolute; opacity: 0; inset: 0; }
.stufen span, .extras span, .paar span { display: block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linie); font-size: .95rem; }
.extras span { border-style: dashed; color: var(--grau); }
.stufen input:checked + span, .paar input:checked + span { background: var(--rot); border-color: var(--rot); color: #fff; }
.extras input:checked + span { border-style: solid; border-color: var(--gruen); color: var(--gruen); font-weight: 600; }
input:focus-visible + span, a:focus-visible, button:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.paar { display: grid; gap: 8px; }
.paar span { border-radius: 12px; padding: 12px 14px; }
.chip { display: inline-block; background: var(--hell); border-radius: 999px; padding: 3px 11px; margin: 2px 4px 2px 0; font-size: .9rem; }
.unternav a { margin-right: 16px; }
table { width: 100%; border-collapse: collapse; margin: 8px 0; background: var(--flaeche); display: block; overflow-x: auto; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .85rem; color: var(--grau); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }
tr.luecke td { color: var(--rot); }
details { margin: 18px 0; } summary { cursor: pointer; color: var(--grau); }