:root {
  --bg: #f6f5f2; --fl: #ffffff; --tx: #1f2328; --le: #5f6670; --rand: #dcd9d2;
  --akz: #2f5d62; --akz-tx: #ffffff; --warn: #8a5a00; --warn-bg: #fff4dc;
  --not: #a1121a; --not-bg: #fde8e8; --aus-bg: #e3eeef;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181b; --fl: #1e2226; --tx: #e6e6e3; --le: #9aa1a8; --rand: #333a40;
    --akz: #6fa8ae; --akz-tx: #0f1214; --warn: #f0c060; --warn-bg: #3a2f17;
    --not: #ff8a8a; --not-bg: #3d1a1c; --aus-bg: #213235;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.45 system-ui, sans-serif; }
header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--fl); border-bottom: 1px solid var(--rand); }
header h1 { font-size: 1.15rem; margin: 0; color: var(--akz); }
nav { display: flex; gap: .3rem; }
nav button { background: none; color: var(--le); border: none; padding: .35rem .6rem; border-radius: .4rem; }
nav button.aktiv { background: var(--aus-bg); color: var(--tx); }
main { max-width: 46rem; margin: 0 auto; padding: 1rem; }
button { font: inherit; cursor: pointer; padding: .45rem .9rem; border-radius: .45rem; border: 1px solid var(--akz);
  background: var(--akz); color: var(--akz-tx); }
button.leise, #ton button + button { background: none; color: var(--akz); }
button:disabled { opacity: .6; }
input, textarea { font: inherit; color: var(--tx); background: var(--fl); border: 1px solid var(--rand);
  border-radius: .4rem; padding: .4rem .55rem; width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; }
input[type=time], input[type=date] { width: auto; }
label { display: block; margin: .5rem 0; }
label.zeile, .zeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
label.zeile:has(> input[type=checkbox]), label.zeile:has(> input[type=radio]) { flex-wrap: nowrap; align-items: baseline; }
label.zeile input:not([type=checkbox]):not([type=radio]) { flex: 1; min-width: 8rem; }
fieldset { border: 1px solid var(--rand); border-radius: .6rem; margin: 0 0 1rem; background: var(--fl); }
legend { font-weight: 600; padding: 0 .3rem; }
.knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.fehler { color: var(--not); min-height: 1em; }
.hinweis, .klein, .zeit { color: var(--le); }
.klein { font-size: .85rem; margin: .2rem 0; }

#liste { display: flex; flex-direction: column; gap: .8rem; padding-bottom: 1rem; }
article { background: var(--fl); border: 1px solid var(--rand); border-radius: .7rem; padding: .7rem .9rem; max-width: 92%; }
article.neu { border-left: 4px solid var(--akz); }
article.notfall { border: 2px solid var(--not); background: var(--not-bg); }
article.ausgang { align-self: flex-end; background: var(--aus-bg); }
article header { position: static; padding: 0; border: 0; background: none; gap: .6rem; }
article .zeit { font-size: .82rem; }
.betreff { font-weight: 600; }
article footer { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: .4rem; }
article footer .klein { margin-right: auto; }
.punkt { border-top: 1px solid var(--rand); padding: .5rem 0 .2rem; }
.punkt-kopf { display: flex; gap: .4rem; align-items: center; }
.thema { font-size: .8rem; font-weight: 600; color: var(--akz); text-transform: uppercase; letter-spacing: .02em; }
.marke { font-size: .75rem; border: 1px solid var(--akz); color: var(--akz); border-radius: 1rem; padding: 0 .45rem; }
.kurz { margin: .25rem 0; }
.unsicher-grund { background: var(--warn-bg); color: var(--warn); border-radius: .35rem; padding: .15rem .45rem; font-size: .88rem; margin: .3rem 0; }
blockquote { margin: .3rem 0; padding-left: .7rem; border-left: 3px solid var(--rand); color: var(--le); }
details summary { cursor: pointer; color: var(--le); font-size: .85rem; }
.notfall-titel { color: var(--not); font-weight: 700; margin: .3rem 0; }
.notfall-text, pre { white-space: pre-wrap; font: inherit; margin: .3rem 0; }
.ausgang .text { white-space: pre-wrap; margin: .3rem 0 0; }
.aussortiert { text-align: center; color: var(--le); font-size: .85rem; margin: 0; }
.anhaenge a { color: var(--akz); }
#antwort-form { position: sticky; bottom: 0; background: var(--bg); padding: .5rem 0 .8rem; border-top: 1px solid var(--rand); }
#antwort-bezug { font-size: .85rem; color: var(--le); display: flex; align-items: center; gap: .4rem; }
#antwort-bezug button { padding: 0 .5rem; background: none; color: var(--le); border-color: var(--rand); }
#ton { background: var(--warn-bg); border-radius: .5rem; padding: .5rem .8rem; margin-top: .5rem; }
.ton-titel { font-weight: 600; color: var(--warn); margin: 0; }
#ton-vorschlag { white-space: pre-wrap; background: var(--fl); border-radius: .4rem; padding: .4rem .6rem; }
#ton-vorschlag:empty { display: none; }
dialog { max-width: 40rem; width: 92vw; border: 1px solid var(--rand); border-radius: .7rem; background: var(--fl); color: var(--tx); }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; font-size: .9rem; }
dialog dt { color: var(--le); }
dialog dd { margin: 0; overflow-wrap: anywhere; }