:root {
    --text: #1d1d1b; --grau: #5f5f5f; --linie: #d6d6d6; --flaeche: #f4f4f2; --karte: #fff;
    --dunkel: #323232; --akzent: #1a5fc8; --gefahr: #b42318; --ok: #e8f4e8;
}
@media (prefers-color-scheme: dark) {
    :root { --text: #e8e8e6; --grau: #b0b0b0; --linie: #3a3a3a; --flaeche: #161616; --karte: #202020; --dunkel: #3a3a3a; --akzent: #8ab4ff; --gefahr: #ff8a80; --ok: #1f3320; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--flaeche); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; overflow-wrap: anywhere; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 8px; top: 8px; background: var(--karte); padding: 6px 10px; z-index: 9; }
.leiste { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--dunkel); color: #fff; }
.leiste form { margin: 0; }
.leiste .marke { color: #fff; font-weight: 700; text-decoration: none; }
.leiste .link { color: #fff; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 16px; margin: 0 0 16px; }
.karte.schmal { max-width: 360px; margin: 15vh auto 0; display: grid; gap: 8px; }
details.karte summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details[open] summary { margin-bottom: 12px; }
.formular { display: grid; gap: 6px; }
.formular button { margin-top: 6px; }
label { font-size: .9rem; color: var(--grau); font-weight: 600; }
small { color: var(--grau); }
input, textarea, select { font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; width: 100%; min-height: 44px; }
textarea { resize: vertical; line-height: 1.4; }
.zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.zeile .feld { flex: 1 1 150px; display: grid; gap: 4px; }
.haken { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--text); }
.haken input { width: auto; min-height: 0; }
button, .knopf { font: inherit; font-weight: 600; border: 0; border-radius: 6px; padding: 10px 16px; min-height: 44px; background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button.zweit, .knopf.zweit { background: transparent; color: var(--akzent); border: 1px solid var(--akzent); }
button.gefahr { background: var(--gefahr); }
button.link { background: none; color: var(--akzent); padding: 0 4px; font-weight: 400; min-height: 44px; text-decoration: underline; }
button.link.gefahr { color: var(--gefahr); background: none; }
button.pfeil { text-decoration: none; font-size: 1.2rem; min-width: 44px; justify-content: center; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.unterzeile { color: var(--grau); margin: .25rem 0 1rem; }
.tagesbalken, .gesamt { display: flex; justify-content: space-between; gap: 10px; background: var(--dunkel); color: #fff; font-weight: 700; padding: 8px 12px; border-radius: 6px; font-size: 1rem; margin: 0; }
.gesamt { font-size: 1.15rem; margin: 0 0 16px; }
.tag { margin: 0 0 28px; }
.eintrag { padding: 10px 4px; border-bottom: 1px solid var(--linie); }
.eintrag-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.eintrag-kopf h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.eintrag .std { white-space: nowrap; font-weight: 600; }
.eintrag ul { margin: 6px 0 0; padding-left: 22px; color: var(--grau); font-size: .92rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .9rem; }
.aktionen form { margin: 0; }
.aktionen > a { min-height: 44px; display: inline-flex; align-items: center; }
.bearbeiten { margin-top: 10px; border-color: var(--akzent); }
.karte.neu { margin-top: 12px; }
.live { margin: 4px 0; color: var(--grau); font-size: .9rem; }
.listen { list-style: none; padding: 0; margin: 0 0 16px; }
.listen h2 { margin: 0 0 4px; }
.listen p { margin: 0; color: var(--grau); }
.listen .zahlen { color: var(--text); margin-top: 4px; }
.hinweis { background: var(--ok); border-radius: 6px; padding: 8px 12px; }
.fehler { color: var(--gefahr); font-weight: 600; }
.leer { color: var(--grau); }
.tagesbalken .seite { color: #ddd; font-weight: 400; }