/* Gemeinsames Layout — mobile-first, hoher Kontrast (Sonnenlicht-tauglich) */
:root {
  --blau: #0b4f9e;
  --blau-dunkel: #083a75;
  --rot: #b3261e;
  --gruen: #1b6e3c;
  --gelb-hg: #fff3cd;
  --grau: #5f6368;
  --rand: #c9ced6;
  --hg: #f4f6f8;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--hg); color: #16191d; font-size: 16px; }
.hauptnav { background: var(--blau-dunkel); color: #fff; padding: 0.4rem 0.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hauptnav a { color: #fff; text-decoration: none; padding: 0.35rem 0.15rem; }
.hauptnav a:hover { text-decoration: underline; }
.marke { font-weight: 700; margin-right: 0.5rem; }
.nav-rechts { margin-left: auto; display: flex; gap: 0.9rem; }
.inhalt { padding: 1rem; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }
a { color: var(--blau); }

.meldung { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 0.8rem; background: #e2ecf9; border: 1px solid var(--blau); }
.meldung.success { background: #e3f2e8; border-color: var(--gruen); }
.meldung.error { background: #fbe4e2; border-color: var(--rot); }

table.liste { width: 100%; border-collapse: collapse; background: #fff; }
table.liste th, table.liste td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
table.liste th { background: #e8ebef; }
.tabellen-scroll { overflow-x: auto; }

.knopf, button.knopf { display: inline-block; background: var(--blau); color: #fff; border: none; border-radius: 6px; padding: 0.6rem 1rem; font-size: 1rem; cursor: pointer; text-decoration: none; min-height: 44px; }
.knopf:hover { background: var(--blau-dunkel); }
.knopf.zweit { background: #fff; color: var(--blau); border: 1px solid var(--blau); }
.knopf.gefahr { background: var(--rot); }
.knopf.gruen { background: var(--gruen); }

form.formular p { margin: 0 0 0.9rem; }
form.formular label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
form.formular input[type=text], form.formular input[type=password], form.formular input[type=number],
form.formular input[type=date], form.formular input[type=datetime-local], form.formular select, form.formular textarea {
  width: 100%; max-width: 480px; padding: 0.55rem; font-size: 1rem; border: 1px solid var(--rand); border-radius: 6px; background: #fff;
}
.hilfetext { color: var(--grau); font-size: 0.85rem; }
ul.errorlist { color: var(--rot); margin: 0.2rem 0; padding-left: 1.2rem; }

.filterzeile { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; align-items: end; }
.filterzeile input, .filterzeile select { padding: 0.5rem; font-size: 1rem; border: 1px solid var(--rand); border-radius: 6px; }

.abzeichen { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.85rem; font-weight: 600; }
.abzeichen.offen { background: var(--gelb-hg); color: #7a5b00; border: 1px solid #d9b40b; }
.abzeichen.rot { background: #fbe4e2; color: var(--rot); border: 1px solid var(--rot); }
.abzeichen.gruen { background: #e3f2e8; color: var(--gruen); border: 1px solid var(--gruen); }
.abzeichen.grau { background: #eceff1; color: var(--grau); border: 1px solid var(--rand); }

.kachelreihe { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.kachel { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 0.9rem 1.1rem; min-width: 170px; }
.kachel .zahl { font-size: 1.9rem; font-weight: 700; }

.karte { height: 420px; border: 1px solid var(--rand); border-radius: 8px; }
.mini-foto { max-height: 90px; max-width: 120px; border-radius: 4px; border: 1px solid var(--rand); }
.kasten { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.kasten.warnung { background: var(--gelb-hg); border-color: #d9b40b; }

@media (max-width: 640px) {
  .hauptnav { gap: 0.55rem; font-size: 0.95rem; }
  .inhalt { padding: 0.7rem; }
}