:root {
  --blau: #1f368c; --gruen: #2e7d32; --rot: #b91c1c; --gelb: #b45309;
  --text: #1a1a1a; --grau: #6b7280; --rahmen: #d5dae3; --flaeche: #f5f7fb; --karte: #ffffff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --blau: #8ea2ef; --gruen: #6fbf73; --rot: #f08080; --gelb: #f0b35a; --text: #eceff4; --grau: #9aa3b2; --rahmen: #3a4150; --flaeche: #14171d; --karte: #1d2129; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--flaeche); color: var(--text); font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
h1 { font-size: 1.5rem; margin: 0; color: var(--blau); }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.klein { font-size: .85rem; } .grau { color: var(--grau); }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

button, .foto-knopf { font: inherit; border: 0; border-radius: .8rem; cursor: pointer; }
button { background: var(--blau); color: #fff; padding: .8rem 1.1rem; font-weight: 700; }
button.schlicht { background: transparent; color: var(--blau); border: 1px solid var(--rahmen); }
button:disabled { opacity: .5; }

.haus { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.haus button { background: var(--karte); color: var(--text); border: 2px solid var(--rahmen); padding: .7rem .5rem; font-weight: 600; }
.haus button.aktiv { border-color: var(--blau); background: var(--blau); color: #fff; }

.foto-knopf { display: flex; align-items: center; justify-content: center; min-height: 9rem; background: var(--blau); color: #fff;
  font-size: 1.35rem; font-weight: 800; text-align: center; box-shadow: 0 6px 18px rgba(31, 54, 140, .25); }
.seiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seiten figure { position: relative; margin: 0; background: var(--karte); border: 1px solid var(--rahmen); border-radius: .7rem; overflow: hidden; }
.seiten img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.seiten figure:first-child { grid-column: 1 / -1; }
.seiten figure:first-child img { aspect-ratio: auto; max-height: 50vh; object-fit: contain; }
.seiten figcaption { font-size: .8rem; padding: .25rem .5rem; color: var(--grau); }
.seite-weg { position: absolute; top: .35rem; right: .35rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .85rem; }
.mehr-knopf { display: block; margin: .7rem 0 .3rem; padding: .75rem; text-align: center; border: 2px dashed var(--blau); color: var(--blau); border-radius: .8rem; font-weight: 700; cursor: pointer; }
.knoepfe { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; margin-top: .6rem; }

#koppelform { display: flex; gap: .5rem; }
#code { flex: 1; min-width: 0; font: 700 1.4rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: .7rem .8rem; border: 2px solid var(--rahmen); border-radius: .8rem; background: var(--karte); color: var(--text); }
#code:focus { outline: none; border-color: var(--blau); }

.meldung { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: .7rem; background: var(--karte); border: 1px solid var(--rahmen); }
.meldung.ok { border-color: var(--gruen); color: var(--gruen); font-weight: 700; }
.meldung.fehler, .fehler { color: var(--rot); }
.meldung.fehler { border-color: var(--rot); }
.meldung.info { border-color: var(--gelb); }
.hinweis { padding: .7rem .9rem; border-radius: .7rem; background: var(--karte); border: 1px solid var(--gelb); font-size: .92rem; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .5rem 0; border-bottom: 1px solid var(--rahmen); font-size: .95rem; }
.liste li.stand-erledigt { color: var(--gruen); }
.liste li.stand-kein_beleg, .liste li.stand-verworfen { color: var(--rot); }
.liste li.stand-pruefung { color: var(--gelb); }
.liste li.stand-angekommen, .liste li.stand-liest { color: var(--grau); }