:root {
  --grund: #F6F4EE; --text: #1C2420; --leise: #5C6660; --marke: #1F4E46; --akzent: #E0A526; --karte: #FFFFFF;
  --rand: #DAD6CC; --gefahr: #A33A2B; --ok: #2E6B3A; --auf-marke: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #151A18; --text: #E8ECE9; --leise: #A2ACA6; --marke: #6FB5A6; --akzent: #E8B43C; --karte: #1F2623; --rand: #34403B; --gefahr: #E07A6A; --ok: #7BC48A; --auf-marke: #0F1F1B; color-scheme: dark; }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; background: var(--marke); color: var(--auf-marke); }
header a { color: var(--auf-marke); text-decoration: none; }
.marke { font-weight: 700; font-size: 1.2rem; }
nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .95rem; }
nav .link { color: var(--auf-marke); }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
footer { text-align: center; padding: 2rem 1rem; color: var(--leise); font-size: .85rem; }
footer a { color: var(--leise); }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
a { color: var(--marke); }
.leise, small { color: var(--leise); }
.claim { font-size: 1.1rem; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 1rem; margin: 0 0 1rem; }
.karte.gefahr { border-color: var(--gefahr); }
label { display: block; margin: 0 0 .8rem; font-weight: 600; }
label small { display: block; font-weight: 400; }
label.haken { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
input, select { display: block; width: 100%; margin-top: .25rem; padding: .6rem .7rem; font: inherit; border: 1px solid var(--rand); border-radius: 10px; background: var(--grund); color: var(--text); }
input[type=checkbox] { width: auto; margin-top: .3rem; }
button, .knopf { display: inline-block; padding: .65rem 1.1rem; font: inherit; font-weight: 600; border: 0; border-radius: 10px; background: var(--marke); color: var(--auf-marke); cursor: pointer; text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }
button.gross, .knopf.gross { font-size: 1.15rem; padding: .9rem 1.4rem; }
button.klein, .knopf.klein { font-size: .85rem; padding: .35rem .7rem; }
button.gefahr { background: var(--gefahr); color: var(--auf-marke); }
.zeile button { white-space: nowrap; }
button.link { background: none; padding: 0; color: var(--marke); font-weight: inherit; text-decoration: underline; }
.inline { display: inline; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.zeile { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.zeile input { margin: 0; }
.meldung { padding: .7rem 1rem; border-radius: 10px; border: 1px solid var(--ok); }
.meldung.fehler { border-color: var(--gefahr); color: var(--gefahr); }
.meldung.warnung { border-color: var(--akzent); }
.band { background: var(--akzent); color: #1C2420; padding: .5rem 1rem; text-align: center; }
.band a { color: #1C2420; font-weight: 700; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kachel { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; text-decoration: none; color: var(--text); min-height: 120px; }
.kachel strong { color: var(--marke); font-size: 1.1rem; }
.sucher { position: relative; margin-bottom: .5rem; }
.sucher video, #vorschau { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; background: #000; }
.sucher button { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); }
.antwort { background: var(--karte); border-left: 4px solid var(--akzent); border-radius: 10px; padding: .6rem 1rem; margin: 1rem 0; }
.frage { padding: .6rem 1rem; margin: 1rem 0 0; }
.vorschlaege { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.vorschlaege button { background: var(--karte); color: var(--marke); border: 1px solid var(--marke); text-align: left; }
.wert { font-size: 2.2rem; font-weight: 700; margin: 0; }
.wert .einheit { font-size: 1rem; color: var(--leise); }
.spanne { margin: 0; color: var(--leise); font-size: .9rem; }
.kurve { width: 100%; height: 90px; background: var(--grund); border-radius: 8px; margin: .5rem 0; }
.experimente { padding-left: 1.2rem; }
.experimente li { margin-bottom: .6rem; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.foto { margin: 0; padding: .5rem; }
.foto img { width: 100%; height: auto; border-radius: 10px; display: block; }
.liste, .verlauf { list-style: none; padding: 0; }
.verlauf li { padding: .5rem 0; border-bottom: 1px solid var(--rand); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
.gross-zahl { font-size: 1.6rem; font-weight: 700; }
.link-feld { font-family: ui-monospace, monospace; font-size: .85rem; }
code { font-size: .9em; }