/* Brücke Scan — für das Handy gemacht: große Knöpfe, eine Spalte. */
:root {
  --marke: #0e7490;
  --marke-dunkel: #155e75;
  --marke-hell: #ecfeff;
  --text: #0f172a;
  --leise: #475569;
  --rand: #cbd5e1;
  --flaeche: #ffffff;
  --grund: #f1f5f9;
  --rot: #b91c1c;
  --rot-hell: #fef2f2;
  --gruen: #15803d;
  --gruen-hell: #f0fdf4;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marke: #22d3ee;
    --marke-dunkel: #67e8f9;
    --marke-hell: #164e63;
    --text: #f1f5f9;
    --leise: #94a3b8;
    --rand: #334155;
    --flaeche: #1e293b;
    --grund: #0f172a;
    --rot: #f87171;
    --rot-hell: #450a0a;
    --gruen: #4ade80;
    --gruen-hell: #052e16;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 17px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
  padding-bottom: env(safe-area-inset-bottom);
}
main { max-width: 34rem; margin: 0 auto; padding: 0 1rem 6rem; }

header.kopf {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -1rem 1rem; padding: calc(env(safe-area-inset-top) + .75rem) 1rem .5rem;
  background: var(--marke); color: #fff;
}
@media (prefers-color-scheme: dark) { header.kopf { background: #164e63; } }
header.kopf h1 { margin: 0; font-size: 1.25rem; }
header.kopf .wer { font-size: .85rem; opacity: .85; }

nav.reiter { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-top: .6rem; }
nav.reiter button {
  border: 0; border-radius: .6rem .6rem 0 0; padding: .6rem; font: inherit; font-weight: 600;
  background: rgba(255,255,255,.15); color: #fff;
}
nav.reiter button[aria-selected='true'] { background: var(--grund); color: var(--text); }
nav.reiter .zahl {
  display: inline-block; min-width: 1.4rem; margin-left: .3rem; padding: 0 .35rem; border-radius: 1rem;
  background: var(--rot); color: #fff; font-size: .8rem;
}

h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
p { margin: .4rem 0; }
.leise { color: var(--leise); font-size: .9rem; }
.laedt { padding: 3rem 0; text-align: center; color: var(--leise); }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 3rem; padding: .7rem 1.1rem; border-radius: .75rem; border: 0;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.haupt { background: var(--marke); color: #fff; }
@media (prefers-color-scheme: dark) { .haupt { color: #082f49; } }
.zweit { background: var(--flaeche); color: var(--marke-dunkel); box-shadow: inset 0 0 0 2px var(--marke); }
.still { background: transparent; color: var(--leise); }
.gefahr { background: var(--rot); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
.breit { width: 100%; }
.reihe { display: flex; gap: .5rem; flex-wrap: wrap; }
.reihe > * { flex: 1 1 10rem; }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 1rem;
  padding: 1rem; margin: .75rem 0;
}

ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste li { margin: .5rem 0; }
ul.liste button.eintrag {
  width: 100%; text-align: left; display: block; min-height: 0;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); font-weight: 400;
}
ul.liste button.eintrag.offen { border-left: .4rem solid var(--rot); }
.eintrag .titel { font-weight: 600; display: block; }
.eintrag .zeile { font-size: .85rem; color: var(--leise); display: block; }

.marke {
  display: inline-block; margin-top: .3rem; padding: .1rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600;
}
.marke.offen { background: var(--rot-hell); color: var(--rot); }
.marke.vernichtet { background: var(--grund); color: var(--leise); }
.marke.aufbewahrt { background: var(--gruen-hell); color: var(--gruen); }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type='text'], input[type='date'], select {
  width: 100%; min-height: 3rem; padding: .6rem .75rem; border-radius: .6rem;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font: inherit;
}
.haken {
  display: flex; gap: .75rem; align-items: flex-start; font-weight: 600;
  padding: .9rem; border-radius: .75rem; background: var(--marke-hell); margin: 1rem 0;
}
.haken input { width: 1.6rem; height: 1.6rem; flex: none; margin-top: .1rem; }
.haken.klein { font-weight: 400; background: transparent; padding: .25rem 0; margin: .25rem 0; }

.seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .6rem; margin: .75rem 0; }
.seite { position: relative; background: var(--flaeche); border: 1px solid var(--rand); border-radius: .6rem; padding: .3rem; }
.seite img { display: block; width: 100%; height: 9rem; object-fit: contain; }
.seite .nr { position: absolute; top: .3rem; left: .3rem; background: var(--marke); color: #fff; border-radius: 1rem; padding: 0 .45rem; font-size: .8rem; }
.seite .reihe button { min-height: 2.4rem; padding: .3rem; font-size: .85rem; }

.meldung { padding: .8rem 1rem; border-radius: .75rem; margin: .75rem 0; }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); }
.meldung.erfolg { background: var(--gruen-hell); color: var(--gruen); }
.meldung.hinweis { background: var(--marke-hell); }

.wahl { display: grid; gap: .6rem; }
.unten { position: fixed; left: 0; right: 0; bottom: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--grund); border-top: 1px solid var(--rand); }
.unten > div { max-width: 34rem; margin: 0 auto; }
input[type='file'] { display: none; }
.ohne-abstand { margin-top: 0; }

/* Ecken anpassen (seit 04.11.2026) */
.ecken-flaeche { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.ecken-flaeche canvas { touch-action: none; border-radius: .5rem; max-width: 100%; }
.seite .marke { display: block; margin: .25rem 0; text-align: center; }
fieldset.modus { border: 1px solid var(--rand); border-radius: .75rem; margin: .75rem 0; padding: .25rem .75rem .5rem; }
fieldset.modus legend { font-weight: 600; padding: 0 .3rem; }
input[type='password'] {
  width: 100%; min-height: 3rem; padding: .6rem .75rem; border-radius: .6rem;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font: inherit;
}

/* Große Vorschau (seit 04.11.2026 abends) */
.seite button.bild { display: block; width: 100%; min-height: 0; padding: 0; background: transparent; border: 0; }
.marke.mittel { background: #fef3c7; color: #92400e; }
.vorschau-kopf { align-items: center; margin-top: .75rem; }
.vorschau-kopf h2 { flex: 1; text-align: center; }
.vorschau-kopf button { flex: 0 0 3rem; font-size: 1.5rem; }
.vorschau-flaeche { overflow: auto; margin: .5rem 0 6rem; border: 1px solid var(--rand); border-radius: .6rem; background: #fff; max-height: 70vh; }
.vorschau-flaeche img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.vorschau-flaeche.gross img { width: 250%; max-width: none; cursor: zoom-out; }
.klein { font-size: .85rem; }
.unten .reihe > * { flex-basis: 4rem; }
.unten button { white-space: nowrap; }