/* --------------------------------------------------------------
   Zählerstände – Oberfläche
   Gestaltungsidee: das mechanische Zählwerk. Vorkommastellen stehen
   auf hellen Rollen, die Nachkommastellen auf der roten Rolle.
   -------------------------------------------------------------- */

:root {
  --grund:    #e8ecef;
  --flaeche:  #ffffff;
  --tinte:    #1a2129;
  --gedimmt:  #64737f;
  --linie:    #cdd6dc;
  --akzent:   #0f6f68;
  --akzent-hell: #e2f0ee;
  --rolle:    #b02a1f;   /* rote Dezimalrolle */
  --gefahr:   #9c2b20;
  --ok:       #1f6f3f;
  --ok-hell:  #e4f2e9;
  --fehler-hell: #fbe9e7;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 6px;
  --schatten: 0 1px 2px rgba(26, 33, 41, .06), 0 6px 18px rgba(26, 33, 41, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 16px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1.05rem; letter-spacing: .01em; margin: 0 0 .75rem; }

a { color: var(--akzent); }

/* ---------- Kopf ---------- */

.kopf {
  background: var(--tinte);
  color: #f2f5f7;
  border-bottom: 3px solid var(--rolle);
}
.kopf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
}
.marke-drum {
  font: 600 .8rem/1 var(--mono);
  letter-spacing: .18em;
  background: #f2f5f7;
  color: var(--tinte);
  padding: .35rem .45rem;
  border-radius: 3px;
  border-right: 4px solid var(--rolle);
}
.marke-text { font-weight: 600; letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; flex-wrap: wrap; }
.nav a { color: #cfd8dd; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: #fff; }
.nav a.ist-aktiv { color: #fff; border-bottom-color: var(--rolle); }
.nutzer {
  color: #90a1ac;
  font: .78rem/1 var(--mono);
  border-left: 1px solid #3a454f;
  padding-left: 1rem;
}

/* ---------- Layout ---------- */

.inhalt { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

.leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.leiste-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.unterzeile { font: .8rem/1 var(--mono); color: var(--gedimmt); margin-left: .5rem; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.karte-schmal { max-width: 26rem; margin: 3rem auto; }
.karte-gefahr { border-color: #e7c3bd; }
.leer { text-align: center; color: var(--gedimmt); }
.leer .knopf { margin-top: .75rem; }

.fussnote { font-size: .9rem; }

.fuss {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  color: var(--gedimmt);
  font-size: .8rem;
}

/* ---------- Formulare ---------- */

.formular { display: grid; gap: 1rem; }
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.raster-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: #33404b; }
label small { font-weight: 400; color: var(--gedimmt); font-size: .75rem; }

input[type="text"], input[type="password"], input[type="search"], input[type="file"] {
  font: 1rem var(--sans);
  color: var(--tinte);
  background: #fbfcfd;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: .55rem .65rem;
  width: 100%;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
.hat-fehler input { border-color: var(--gefahr); background: var(--fehler-hell); }

.eingabe-zahl {
  font: 1.15rem/1.2 var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

fieldset.staende {
  border: 0;
  border-top: 1px solid var(--linie);
  padding: 1rem 0 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
fieldset.staende legend {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gedimmt);
  padding: 0 .5rem 0 0;
}
.hinweistext { color: var(--gedimmt); font-size: .8rem; margin: 0; }
.knopfzeile { display: flex; gap: .5rem; }

.suche { display: flex; gap: .4rem; }
.suche input { min-width: 12rem; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: 600 .85rem/1 var(--sans);
  padding: .6rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: #fff;
  color: var(--tinte);
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: #f3f6f7; }
.knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf-haupt:hover { background: #0c5c56; }
.knopf-klein { padding: .35rem .55rem; font-size: .78rem; }
.knopf-gefahr { background: #fff; border-color: #dfb4ae; color: var(--gefahr); }
.knopf-gefahr:hover { background: var(--fehler-hell); }

/* ---------- Meldungen ---------- */

.meldung {
  border-left: 3px solid var(--gedimmt);
  background: #f1f4f6;
  padding: .7rem .9rem;
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
  margin: 0 0 1.25rem;
}
.meldung-ok { border-left-color: var(--ok); background: var(--ok-hell); }
.meldung-fehler { border-left-color: var(--gefahr); background: var(--fehler-hell); }

/* ---------- Tabelle ---------- */

.tabelle-huelle { overflow-x: auto; margin: -.35rem; padding: .35rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th {
  text-align: left;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gedimmt);
  font-weight: 700;
  padding: 0 .75rem .55rem;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle td {
  padding: .7rem .75rem;
  border-bottom: 1px solid #eef1f3;
  vertical-align: middle;
}
.tabelle tbody tr:hover { background: #f7f9fa; }
.spalte-zahl { text-align: right; white-space: nowrap; }
.spalte-zeit { color: var(--gedimmt); font: .78rem var(--mono); white-space: nowrap; }
.spalte-aktion { white-space: nowrap; text-align: right; }
.spalte-aktion .verlauf { font-size: .78rem; margin-left: .6rem; }
.kein-foto { color: #a9b6bf; }

/* Das Zählwerk: Nachkommastellen auf der roten Rolle */
.stand {
  font: 600 1.05rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linie);
  border-radius: 3px;
  overflow: hidden;
  background: #fbfcfd;
  padding-left: .4rem;
}
.stand-dez {
  background: var(--rolle);
  color: #fff;
  padding: .25rem .35rem;
  margin-left: .4rem;
  font-weight: 500;
}

/* ---------- Fotos ---------- */

.spalte-foto { width: 62px; white-space: nowrap; }
.miniatur {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--linie);
  display: block;
}
.foto-zahl { font: .7rem var(--mono); color: var(--gedimmt); }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.galerie-bild { margin: 0; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; }
.galerie-bild img { width: 100%; height: 150px; object-fit: cover; display: block; background: #f1f4f6; }
.galerie-bild figcaption { padding: .6rem; display: grid; gap: .35rem; }
.dateiname { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.meta { font: .7rem/1.4 var(--mono); color: var(--gedimmt); }

.loesch-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Protokoll ---------- */

.marke-aktion {
  display: inline-block;
  font: 600 .7rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .45rem;
  border-radius: 3px;
  background: #eef1f3;
  color: #46535e;
  white-space: nowrap;
}
.aktion-neu { background: var(--ok-hell); color: var(--ok); }
.aktion-änderung, .aktion-aenderung { background: var(--akzent-hell); color: var(--akzent); }
.aktion-löschung, .aktion-foto-gelöscht { background: var(--fehler-hell); color: var(--gefahr); }
.wert-alt { color: var(--gedimmt); text-decoration: line-through; overflow-wrap: anywhere; }
.wert-neu { font-weight: 600; overflow-wrap: anywhere; }

.blaettern { display: flex; align-items: center; gap: 1rem; justify-content: center; color: var(--gedimmt); font-size: .85rem; }

.quelltext {
  background: var(--tinte);
  color: #e6ecf0;
  padding: .9rem;
  border-radius: 4px;
  font: .8rem/1.5 var(--mono);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Klein ---------- */

@media (max-width: 640px) {
  .raster, .raster-zwei { grid-template-columns: 1fr; }
  .leiste { align-items: flex-start; flex-direction: column; }
  .suche input { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

code {
  font: .85em var(--mono);
  background: #eef1f3;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: .05em .3em;
}

label.zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  font-size: .82rem;
  color: var(--gedimmt);
}
label.zeile input { width: auto; }

/* ---------- Erfassung ---------- */

.fortschritt {
  height: 6px;
  background: #d8dee3;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.fortschritt-balken { height: 100%; background: var(--akzent); }

.parzelle { padding: 1rem 1.25rem; }
.parzelle-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .6rem;
  margin-bottom: .9rem;
}
.parzelle-nr {
  font: 700 1.25rem/1 var(--mono);
  background: var(--tinte);
  color: #fff;
  padding: .35rem .5rem;
  border-radius: 3px;
  border-right: 4px solid var(--rolle);
  margin-right: .6rem;
}
.parzelle-name { font-weight: 600; }
.parzelle-meta { font: .75rem var(--mono); color: var(--gedimmt); }
.notiz { margin: 0 0 .9rem; }
.parzelle-fuss { margin-top: .9rem; }
.foto-feld span { font-size: .8rem; color: var(--gedimmt); font-weight: 400; }

.vergleich { font-size: .75rem; }
.verbrauch { color: var(--akzent); font-weight: 600; }
.verbrauch-warnung { color: var(--gefahr); }

.knopfzeile-fest { align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.vorjahr-zelle { color: var(--gedimmt); font: .82rem var(--mono); }

.zeilen-form { display: flex; gap: .35rem; align-items: center; }
.zeilen-form input[type="text"] { min-width: 9rem; }
select {
  font: 1rem var(--sans);
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: #fbfcfd;
  color: var(--tinte);
}

/* ==========================================================
   Ableser-Oberfläche (Smartphone zuerst)
   ========================================================== */

.ableser { max-width: 30rem; margin: 0 auto; padding-bottom: 6rem; }
.mitte { text-align: center; }

.sprungsuche { display: flex; gap: .5rem; margin-bottom: 1rem; }
.sprungsuche input { font-size: 1.05rem; padding: .75rem .8rem; }

.garten { padding: 0; overflow: hidden; }

.garten-kopf {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  background: var(--tinte);
  color: #fff;
}
.garten-nr {
  font: 700 1.9rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--tinte);
  padding: .45rem .55rem;
  border-radius: 4px;
  border-right: 5px solid var(--rolle);
  min-width: 3.4rem;
  text-align: center;
}
.garten-info { flex: 1; min-width: 0; }
.garten-name { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.garten-zaehler { font: .72rem var(--mono); color: #9fb0bb; }
.garten-lage { font: .75rem var(--mono); color: #9fb0bb; align-self: flex-start; }

.stand-block { padding: 1rem; border-bottom: 1px solid var(--linie); }
.stand-block label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.stand-titel { font-size: .95rem; font-weight: 600; }
.stand-einheit {
  font: .72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gedimmt);
  font-weight: 400;
}

.eingabe-gross {
  width: 100%;
  font: 700 2rem/1.2 var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: right;
  padding: .7rem .7rem !important;
  border: 2px solid var(--linie);
  border-radius: 6px;
  background: #fbfcfd;
}
.eingabe-gross:focus { border-color: var(--akzent); background: #fff; }
.eingabe-gross[readonly] { background: #eef1f3; color: var(--gedimmt); }

.stand-fuss {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
  font: .78rem var(--mono);
  color: var(--gedimmt);
}
.stand-fuss .verbrauch { font-weight: 700; }

.foto-block { padding: 1rem; border-bottom: 1px solid var(--linie); }
.foto-reihe { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: .75rem; }
.foto-reihe img {
  width: 78px; height: 78px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linie);
  display: block;
}
.knopf-foto { width: 100%; justify-content: center; padding: .85rem; cursor: pointer; }

.letzte-aenderung {
  padding: .8rem 1rem;
  background: #f5f7f8;
  font-size: .8rem;
  color: var(--gedimmt);
  border-bottom: 1px solid var(--linie);
}
.letzte-aenderung strong { color: var(--tinte); font-weight: 600; }

.knopf-speichern {
  width: 100%;
  border-radius: 0;
  padding: 1.05rem;
  font-size: 1.05rem;
}

/* Feste Blätterleiste am unteren Rand */
.blaetterleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px rgba(26, 33, 41, .08);
}
.nav-taste {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--tinte);
  text-decoration: none;
  font: 600 .95rem/1 var(--mono);
  padding: 1.05rem .3rem;
  min-height: 3.4rem;
}
.nav-taste:active { background: #e6ebee; }
.nav-pfeil { font-size: 1.9rem; font-weight: 400; }
.nav-taste.ist-aus { color: #b9c4cb; pointer-events: none; background: #f6f8f9; }
.nav-mitte {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinte);
  color: #fff;
  font: 700 1.15rem/1 var(--mono);
}

@media (min-width: 640px) {
  .blaetterleiste {
    position: static;
    max-width: 30rem;
    margin: 1rem auto;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }
  .ableser { padding-bottom: 1rem; }
}

/* ==========================================================
   App-Gestalt: Kopfleiste, Menü, Daumenleiste
   ========================================================== */

body {
  overscroll-behavior-y: none;               /* kein Gummiband-Effekt in der App */
  -webkit-tap-highlight-color: transparent;
}

/* Die alte Kopfzeile wird nicht mehr benutzt */
.kopf { display: none; }

.app-kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--tinte);
  color: #f2f5f7;
  border-bottom: 3px solid var(--rolle);
  padding: .55rem 1rem;
  padding-top: calc(.55rem + env(safe-area-inset-top));
}
.app-marke { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; min-width: 0; }
.app-drum {
  font: 700 .78rem/1 var(--mono);
  letter-spacing: .1em;
  background: #f2f5f7;
  color: var(--tinte);
  padding: .4rem .45rem;
  border-radius: 3px;
  border-right: 4px solid var(--rolle);
  flex: none;
}
.app-titel {
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menue-knopf {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.menue-knopf .balken { display: block; width: 22px; height: 2px; background: #f2f5f7; border-radius: 2px; }
.menue-knopf.ist-offen .balken { background: var(--rolle); }
.nur-lesbar {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.menue {
  position: sticky;
  top: calc(3.4rem + env(safe-area-inset-top));
  z-index: 29;
  background: #fff;
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: .35rem 0;
}
.menue a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.15rem;
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border-left: 4px solid transparent;
}
.menue a:active { background: #eef1f3; }
.menue a.ist-aktiv { border-left-color: var(--rolle); background: #f5f7f8; }
.menue-zeichen { width: 1.2rem; text-align: center; color: var(--gedimmt); }
.menue-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.15rem;
  border-top: 1px solid var(--linie);
  margin-top: .35rem;
  font: .8rem var(--mono);
  color: var(--gedimmt);
}
.menue-abmelden { font-weight: 600; text-decoration: none; }

/* ---------- Daumenleiste ---------- */

body.mit-daumenleiste .inhalt { padding-bottom: 9.5rem; }

.daumen {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  background: #fff;
  border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 24px rgba(26, 33, 41, .10);
  padding-bottom: env(safe-area-inset-bottom);
}

.daumen-reihe {
  display: flex;
  gap: 1px;
  background: var(--linie);
}
.daumen-taste {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  background: #fff;
  color: var(--tinte);
  text-decoration: none;
  font: 600 1rem/1 var(--mono);
  user-select: none;
}
.daumen-taste:active { background: #dfe5e9; }
.daumen-taste.ist-aus { color: #c2ccd2; background: #f6f8f9; pointer-events: none; }
.daumen-pfeil { font-size: 2rem; font-weight: 400; flex: 1.1; }
.daumen-taste .klein { font-size: .85rem; }
.daumen-nr {
  flex: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinte);
  color: #fff;
  font: 700 1.2rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.daumen-speichern {
  display: block;
  width: 100%;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font: 700 1.15rem/1 var(--sans);
  padding: 1.15rem;
  cursor: pointer;
}
.daumen-speichern:active { background: #0b5049; }
.daumen-gesperrt {
  padding: 1.05rem;
  text-align: center;
  background: #f6f8f9;
  color: var(--gedimmt);
  font-size: .9rem;
}

/* Auf großen Bildschirmen bleibt die Leiste zentriert */
@media (min-width: 640px) {
  .daumen { max-width: 30rem; left: 50%; transform: translateX(-50%); border-radius: 10px 10px 0 0; }
}

/* Karten wirken in der App wie Flächen, nicht wie Papier */
.ableser .karte { border-radius: 10px; }
.inhalt { padding-top: 1.25rem; }


/* ==========================================================
   Kachelbrett – die Ableser-Oberfläche füllt den Bildschirm
   ========================================================== */

body.mit-daumenleiste { overflow: hidden; }
body.mit-daumenleiste .inhalt {
  padding: .5rem;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  max-width: 34rem;
  height: calc(100dvh - 3.4rem - env(safe-area-inset-top));
  display: flex;
}

.kachelbrett {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, auto);
  grid-template-rows: auto 1fr 1fr auto auto;
}

.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Kopfkachel: volle Breite */
.kachel-kopf {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  background: var(--tinte);
  color: #fff;
  border-color: var(--tinte);
}
.k-nr {
  font: 700 1.9rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--tinte);
  border-right: 5px solid var(--rolle);
  border-radius: 5px;
  padding: .4rem .5rem;
  flex: none;
}
.k-kopf-text { flex: 1; min-width: 0; }
.k-name {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-zaehlernr { font: .68rem var(--mono); color: #9fb0bb; }
.k-lage {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font: .68rem var(--mono);
  color: #9fb0bb;
  flex: none;
}
.k-fortschritt { color: #6f8290; }

/* Suchkachel */
.kachel-suche {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: .5rem;
  padding: .4rem .45rem;
}
.kachel-suche input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 700 1.05rem var(--mono);
  padding: .5rem;
}
.kachel-suche input:focus { outline: none; }
.kachel-suche button {
  border: 0;
  border-radius: 7px;
  background: #eef1f3;
  color: var(--tinte);
  font: 600 .85rem var(--sans);
  padding: .55rem .9rem;
  cursor: pointer;
}

/* Meldungen als Kachel */
.kachel-melden {
  grid-column: 1 / -1;
  font-size: .85rem;
  padding: .6rem .8rem;
  border-left: 4px solid var(--gedimmt);
}
.kachel-melden.ist-ok { border-left-color: var(--ok); background: var(--ok-hell); }
.kachel-melden.ist-fehler { border-left-color: var(--gefahr); background: var(--fehler-hell); }

/* Das Formular selbst ist nur ein Untergitter */
.kachel-gruppe {
  grid-column: 1 / -1;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr auto;
  min-height: 0;
}

/* Zählerstände: je halbe Breite, volle Höhe */
.kachel-stand {
  grid-column: 1 / -1;
  cursor: text;
  justify-content: space-between;
  gap: .3rem;
}
.k-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gedimmt);
}
.k-einheit { font: .68rem var(--mono); letter-spacing: .05em; }

.k-eingabe {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: right;
  font: 700 clamp(2rem, 11vw, 2.9rem)/1 var(--mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  padding: 0 !important;
}
.k-eingabe:focus { outline: none; }
.k-eingabe[readonly] { color: var(--gedimmt); }
.kachel-stand:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }

.k-fuss {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  font: .72rem var(--mono);
  color: var(--gedimmt);
}
.k-fuss .verbrauch { font-weight: 700; color: var(--akzent); }
.k-fuss .verbrauch-warnung { color: var(--gefahr); }

/* Foto und Info: nebeneinander */
.kachel-foto, .kachel-info { grid-row: 3; padding: .55rem .7rem; gap: .35rem; }
.kachel-foto { cursor: pointer; }
.kachel-foto.ist-gesperrt { cursor: default; opacity: .55; }
.k-kamera { font-size: .85rem; font-weight: 600; color: var(--akzent); }
.k-fotos { display: flex; align-items: center; gap: .3rem; }
.k-fotos img {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--linie);
}
.k-mehr { font: .7rem var(--mono); color: var(--gedimmt); }
.k-info-zeit { font: 700 1rem var(--mono); color: var(--tinte); }
.k-info-wer {
  font-size: .72rem;
  color: var(--gedimmt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation: vier Kacheln mit den echten Gartennummern */
.kachel-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.kachel-sprung {
  align-items: center;
  justify-content: center;
  gap: .1rem;
  text-decoration: none;
  color: var(--tinte);
  padding: .6rem .2rem;
  user-select: none;
}
.kachel-sprung:active { background: #e6ebee; transform: translateY(1px); }
.k-sprung-nr {
  font: 700 1.35rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.k-sprung-zusatz {
  font: .62rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gedimmt);
}
.kachel-sprung.ist-aus { background: #f2f5f6; color: #c2ccd2; box-shadow: none; }

/* Speichern: die Daumenkachel, volle Breite */
.kachel-speichern {
  grid-column: 1 / -1;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font: 700 1.15rem/1 var(--sans);
  padding: 1.15rem;
  align-items: center;
  cursor: pointer;
  min-height: 3.6rem;
}
.kachel-speichern:active { background: #0b5049; }
.kachel-speichern.ist-gesperrt {
  background: #eef1f3;
  color: var(--gedimmt);
  font-size: .9rem;
  cursor: default;
}

/* Sehr kleine Geräte: Zählerkacheln dürfen schrumpfen */
@media (max-height: 700px) {
  .k-eingabe { font-size: clamp(1.7rem, 9vw, 2.3rem) !important; }
  .kachel { padding: .5rem .65rem; }
  .kachel-speichern { padding: .95rem; min-height: 3.2rem; }
}


/* ==========================================================
   Menü als Overlay – liegt immer obenauf, auch im Kachelbrett
   ========================================================== */

.menue {
  position: fixed;
  top: calc(3.4rem + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 50;                       /* über Kacheln, Daumenleiste und allem sonst */
  max-height: calc(100dvh - 4rem - env(safe-area-inset-top));
  overflow-y: auto;
  background: #fff;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 12px 30px rgba(26, 33, 41, .22);
  padding: .35rem 0 .35rem;
}

/* Abdunkeln dahinter, damit klar ist: hier ist das Menü offen */
.menue::after { content: none; }

body.menue-offen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(20, 26, 32, .45);
}

.menue-abmelden {
  background: var(--gefahr);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 700;
}


/* Abmelden ist immer sichtbar – nicht im Menü versteckt */
.kopf-tasten { display: flex; align-items: center; gap: .4rem; flex: none; }

.abmelde-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .75rem;
  border-radius: 6px;
  border: 1px solid #46535e;
  background: transparent;
  color: #cfd8dd;
  font: 600 .78rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.abmelde-knopf:active { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }


/* ==========================================================
   KORREKTUR: Kachelbrett robust aufbauen
   (überschreibt das starre Gitter von weiter oben)
   ========================================================== */

body.mit-daumenleiste { overflow: visible; }

body.mit-daumenleiste .inhalt {
  display: block;
  height: auto;
  min-height: calc(100dvh - 3.6rem - env(safe-area-inset-top));
  padding: .6rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  max-width: 34rem;
  margin: 0 auto;
}

.kachelbrett {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: calc(100dvh - 5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  grid-template-columns: none;
  grid-template-rows: none;
}

/* Kopf, Suche und Meldungen: nur so hoch wie nötig */
.kachel-kopf, .kachel-suche, .kachel-melden { flex: 0 0 auto; }

/* Das Formular nimmt den freien Platz und verteilt ihn auf die Stände */
.kachel-gruppe {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 0;
}

/* Die beiden Zählerkacheln teilen sich den Rest – niemals kleiner als 6rem */
.kachel-stand {
  flex: 1 1 0;
  min-height: 6rem;
  grid-column: auto;
}

/* Foto und Zuletzt: nebeneinander, feste Höhe */
.kachel-foto, .kachel-info {
  grid-row: auto;
  flex: 0 0 auto;
  min-height: 4rem;
}
.kachel-gruppe .kachel-foto { order: 3; }
.kachel-gruppe .kachel-info { order: 4; }

.kachel-gruppe::after { content: none; }

/* Foto + Info in eine Reihe zwingen */
@supports (display: grid) {
  .kachel-gruppe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(4rem, auto);
  }
  .kachel-stand { grid-column: 1 / -1; }
  .kachel-foto  { grid-column: 1; grid-row: 3; }
  .kachel-info  { grid-column: 2; grid-row: 3; }
}

/* Navigation und Speichern hängen unten dran */
.kachel-nav      { flex: 0 0 auto; grid-column: auto; }
.kachel-speichern { flex: 0 0 auto; grid-column: auto; }

/* Zahlen dürfen schrumpfen, statt die Kachel zu sprengen */
.k-eingabe { font-size: clamp(1.8rem, 10vw, 2.8rem) !important; }


/* ==========================================================
   Nummern-Kacheln als deutliche Tasten
   ========================================================== */

.kachel-nav { gap: .45rem; }

.kachel-sprung {
  background: var(--tinte);
  border: 0;
  border-bottom: 4px solid #000;          /* Tastenkante */
  color: #fff;
  box-shadow: 0 3px 0 rgba(26, 33, 41, .25), var(--schatten);
  padding: .7rem .2rem .6rem;
  min-height: 4.1rem;
  transition: transform .06s ease;
}
.kachel-sprung:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(26, 33, 41, .25);
  background: #0f6f68;
}

.k-sprung-nr {
  font: 700 1.75rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -.01em;
}

.k-sprung-zusatz {
  margin-top: .2rem;
  font: 700 .58rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #90a3af;
}

/* Die beiden direkten Nachbarn sind die Haupttasten: rote Kante wie die Zählwerksrolle */
.kachel-sprung:nth-child(2),
.kachel-sprung:nth-child(3) {
  border-bottom-color: var(--rolle);
}
.kachel-sprung:nth-child(2) .k-sprung-nr,
.kachel-sprung:nth-child(3) .k-sprung-nr {
  font-size: 2rem;
}

/* Die Sprungtasten (±10) etwas ruhiger */
.kachel-sprung:nth-child(1),
.kachel-sprung:nth-child(4) {
  background: #35434f;
  border-bottom-color: #1a2129;
}

.kachel-sprung.ist-aus {
  background: #e7ebee;
  border-bottom-color: #cdd6dc;
  box-shadow: none;
  color: #b3bfc7;
}
.kachel-sprung.ist-aus .k-sprung-nr { color: #b3bfc7; }
.kachel-sprung.ist-aus .k-sprung-zusatz { color: #c4ced5; }


.feld-bereich { min-width: 8rem; font: .9rem var(--mono); }


/* ---------- Gärten ohne Zähler ---------- */

.kachel-stand.ist-ohne {
  background: repeating-linear-gradient(
    -45deg, #f1f4f6, #f1f4f6 8px, #eaeef1 8px, #eaeef1 16px
  );
  border-color: #d8dee3;
  box-shadow: none;
}
.kachel-stand.ist-ohne .k-eingabe { color: #b3bfc7; }
.kachel-stand.ist-ohne .k-titel { color: #a7b3bb; }
.kachel-stand.ist-ohne .k-vorjahr { opacity: .5; }

.k-fuss { align-items: center; }
.k-vergleich { display: flex; gap: .5rem; align-items: center; width: 100%; }
/* „bis …“ ganz links, dann Vorjahr, ganz rechts die Plombenfarbe */
.k-vergleich .k-baujahr { order: 0; }
.k-vergleich .verbrauch { order: 1; }
.k-vergleich .k-vorjahr { order: 2; margin-left: auto; }
.k-vergleich .k-plombe-marke { order: 3; }

/* Zählerdaten-Button und Plombenfarbe in einer Zeile */
.k-details-reihe {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .6rem;
}
.k-details-reihe .k-details { margin-top: 0; flex: 1; min-width: 0; }
.k-details-reihe .k-plombe-marke { flex: none; margin-left: auto; }

/* Plombenfarbe: farbiger Kreis links, Text daneben (wie im Aufklappbereich) */
.k-plombe-marke {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 600 .8rem var(--sans);
  color: var(--tinte);
  white-space: nowrap;
  padding: .35rem 0;
}

/* Realistische Plombenkappe.
   Grundschicht: die Graustufen-Grafik ist IMMER sichtbar. Darüber legt ein
   per Maske geformtes farbiges Overlay die Plombenfarbe (multiply). Fehlt die
   Maske, bleibt wenigstens die graue Kappe sichtbar. */
.plombe-bild {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: none;
  background: url("plombe_grau.png?v=2") center / contain no-repeat;
}
.plombe-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--plombe-farbe, transparent);
  mix-blend-mode: multiply;
  -webkit-mask: url("plombe_maske.png?v=2") center / contain no-repeat;
          mask: url("plombe_maske.png?v=2") center / contain no-repeat;
}

.ohne-haken {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: .72rem var(--sans);
  font-weight: 600;
  color: var(--gedimmt);
  cursor: pointer;
  user-select: none;
  padding: .25rem .35rem .25rem 0;
}
.ohne-haken input {
  width: 20px;
  height: 20px;
  accent-color: var(--rolle);
  margin: 0;
}
.ist-ohne .ohne-haken { color: var(--rolle); }


/* ==========================================================
   Häkchen „kein Zähler“ und Bildbetrachter
   ========================================================== */

.k-titel { gap: .5rem; flex-wrap: wrap; }

.k-haken {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  margin-right: .6rem;
}
.k-haken input {
  width: 20px; height: 20px;
  accent-color: var(--rolle);
  margin: 0;
}
.k-haken label {
  font: 600 .7rem/1 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--gedimmt);
  cursor: pointer;
}

/* Ausgegraute Kachel: kein Zähler vorhanden */
.kachel-stand.ist-ohne {
  background: repeating-linear-gradient(
    -45deg, #f1f4f6, #f1f4f6 8px, #e9edf0 8px, #e9edf0 16px
  );
  border-style: dashed;
}
.kachel-stand.ist-ohne .k-eingabe { color: #aab6be; }
.kachel-stand.ist-ohne .k-fuss { opacity: .5; }
.kachel-stand.ist-ohne .k-haken label { color: var(--rolle); }

.k-eingabe:disabled {
  background: transparent;
  -webkit-text-fill-color: #aab6be;
  opacity: 1;
}

/* Foto-Kachel */
.foto-oeffnen {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.foto-oeffnen img {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--linie);
}
.k-kamera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .35rem;
  padding: .45rem .6rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  color: var(--akzent);
  font: 700 .78rem/1 var(--sans);
  cursor: pointer;
}

/* Bildbetrachter */
body.schau-offen { overflow: hidden; }

.bildschau {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 16, 20, .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.bildschau[hidden] { display: none; }

.bildschau img#bildschau-bild {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}
.bildschau-zu {
  position: absolute;
  top: calc(.6rem + env(safe-area-inset-top));
  right: .8rem;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.bildschau-leiste { display: flex; gap: .5rem; overflow-x: auto; max-width: 100%; }
.bildschau-leiste .foto-oeffnen img {
  width: 54px; height: 54px;
  border-color: rgba(255, 255, 255, .35);
}

/* Download-Knopf im Bildbetrachter – links neben dem Schließen-Knopf */
.bildschau-download {
  position: absolute;
  top: calc(.6rem + env(safe-area-inset-top));
  right: calc(.8rem + 44px + .6rem);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}
.bildschau-download:active { background: rgba(255, 255, 255, .3); }


.k-leer { font-size: .78rem; color: var(--gedimmt); }
a.k-mehr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 36px;
  border-radius: 5px;
  background: #eef1f3;
  border: 1px solid var(--linie);
  color: var(--tinte);
  font: 700 .75rem var(--mono);
  text-decoration: none;
}


/* ==========================================================
   Luft-Kachel: verhindert, dass Safaris Adressleiste den
   Speichern-Knopf und die Nummerntasten überdeckt
   ========================================================== */

.kachel-luft {
  flex: 0 0 auto;
  grid-column: 1 / -1;
  /* Höhe = Speichern-Knopf (ca. 3.6rem) + Nummernreihe (4.1rem) + Abstände */
  min-height: 8.2rem;
  height: calc(8.2rem + env(safe-area-inset-bottom));
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
}

/* Auf dem Desktop stört die Adressleiste nicht – dort reicht wenig Luft */
@media (min-width: 640px) and (hover: hover) {
  .kachel-luft { min-height: 1rem; height: 1rem; }
}


/* ==========================================================
   KORREKTUR 2: keine Zwangshöhe mehr – die Seite darf scrollen,
   die Kacheln behalten ihre echte Größe, die Luft-Kachel bleibt sichtbar
   ========================================================== */

body.mit-daumenleiste .inhalt {
  min-height: 0;
  height: auto;
}

.kachelbrett {
  min-height: 0;                 /* vorher: 100dvh – das hat alles zusammengestaucht */
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* Zählerkacheln: feste Höhe statt „teilt euch den Rest“ */
.kachel-gruppe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;   /* vorher: minmax(6rem, 1fr) */
  gap: .55rem;
}
.kachel-stand {
  flex: 0 0 auto;
  min-height: 7.5rem;
  grid-column: 1 / -1;
}
.kachel-foto { grid-column: 1; grid-row: 3; min-height: 5rem; }
.kachel-info { grid-column: 2; grid-row: 3; min-height: 5rem; }

/* Die Luft-Kachel ist jetzt echter Inhalt und wird nicht mehr weggedrückt */
.kachel-luft {
  flex: 0 0 auto;
  min-height: 8.2rem;
  height: calc(8.2rem + env(safe-area-inset-bottom));
}


/* ==========================================================
   Kopfzeile als Kopf-Kachel: Nr · Name · Position · Abmelden
   ========================================================== */

.app-kopf.ist-garten { gap: .6rem; padding-left: .6rem; padding-right: .6rem; }

.kopf-nr {
  flex: none;
  font: 700 1.5rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--tinte);
  border-right: 5px solid var(--rolle);
  border-radius: 5px;
  padding: .38rem .48rem;
  min-width: 2.8rem;
  text-align: center;
}

.kopf-mitte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.kopf-name {
  font-weight: 600;
  font-size: .98rem;
  color: #f2f5f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopf-meta {
  font: .7rem var(--mono);
  color: #90a3af;
  white-space: nowrap;
}

/* Zählernummern rutschen als schmale Zeile unter die Kopfzeile */
.zaehlernummern {
  font: .72rem var(--mono);
  color: var(--gedimmt);
  padding: 0 .2rem .1rem;
}
.zaehlernummern strong { color: var(--tinte); font-weight: 600; }

/* Abmelden darf auf schmalen Geräten schrumpfen */
@media (max-width: 420px) {
  .abmelde-knopf { padding: 0 .55rem; font-size: .72rem; }
  .kopf-nr { font-size: 1.3rem; min-width: 2.4rem; }
}


/* Sperrmeldung, zweisprachig */
.sperre { text-align: center; }
.sperre p { margin: 0 0 .35rem; }
.sperre-de { font-weight: 700; font-size: 1rem; }
.sperre-en { font-style: italic; color: #7a3a31; }
.sperre-zeit { font: .8rem var(--mono); color: var(--gedimmt); margin-top: .5rem !important; }


/* ==========================================================
   Prüfer: Zustands-Kacheln der Wasseruhr
   ========================================================== */

.kachel-zustand {
  grid-column: 1 / -1;
  min-height: 0;
  gap: .55rem;
  justify-content: flex-start;
}

.zustand-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}

.zustand-feld {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fbfcfd;
  font: 600 .85rem/1.15 var(--sans);
  color: var(--tinte);
  cursor: pointer;
  user-select: none;
}
.zustand-feld input {
  width: 22px; height: 22px;
  accent-color: var(--akzent);
  margin: 0;
  flex: none;
}
.zustand-feld:active { background: #eef1f3; }

.zustand-feld.ist-an {
  background: var(--akzent-hell);
  border-color: var(--akzent);
  color: #0b4f4a;
}
/* „In Ordnung“ grün, Mängel rot markieren */
.zustand-feld.ist-an:not(:first-child) {
  background: var(--fehler-hell);
  border-color: var(--gefahr);
  color: #7a2b21;
}
.zustand-feld.ist-an:not(:first-child) input { accent-color: var(--gefahr); }

@media (max-width: 380px) {
  .zustand-liste { grid-template-columns: 1fr; }
}


.spalte-zustand { max-width: 16rem; }
.spalte-zustand .marke-aktion { margin: 0 .2rem .2rem 0; }

/* ==========================================================
   Startweiche, Rechte-Häkchen, Arbeitsstunden
   ========================================================== */

.start-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .8rem;
}
.start-kachel {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-decoration: none;
  color: var(--tinte);
  padding: 1.1rem;
}
.start-kachel:active { background: #eef1f3; }
.start-name { font-weight: 700; font-size: 1.1rem; }
.start-text { font-size: .85rem; color: var(--gedimmt); }

/* Rechte-Häkchen im Anlege-Formular */
.rechte-block { border: 0; border-top: 1px solid var(--linie); padding: 1rem 0 0; margin: 0; display: grid; gap: .5rem; }
.rechte-block legend { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gedimmt); }
.recht-admin span strong { color: var(--rolle); }

/* Rechte-Häkchen in der Tabelle */
.rechte-form { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.recht-mini { display: inline-flex; align-items: center; gap: .2rem; font: .7rem var(--mono); color: var(--gedimmt); cursor: pointer; }
.recht-mini input { width: 18px; height: 18px; accent-color: var(--akzent); margin: 0; }
.recht-admin-mini span { color: var(--rolle); font-weight: 700; }

/* Arbeitsstunden */
.stunden-konto { display: flex; gap: .5rem; text-align: center; padding: .9rem; }
.konto-feld { flex: 1; display: flex; flex-direction: column; gap: .2rem; padding: .4rem; border-radius: 8px; background: #f5f7f8; }
.konto-zahl { font: 700 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.konto-text { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gedimmt); }
.konto-feld.ist-offen { background: var(--fehler-hell); }
.konto-feld.ist-offen .konto-zahl { color: var(--gefahr); }
.konto-feld.ist-erfuellt { background: var(--ok-hell); }
.konto-feld.ist-erfuellt .konto-zahl { color: var(--ok); }

.stunden-form { display: grid; gap: .7rem; }
.stunden-oben { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.feld-stunden span, .feld-datum span, .feld-taetigkeit span { font-size: .82rem; font-weight: 600; color: #33404b; display: block; margin-bottom: .3rem; }
.feld-taetigkeit textarea {
  width: 100%; font: 1rem var(--sans); padding: .55rem .65rem;
  border: 1px solid var(--linie); border-radius: 6px; background: #fbfcfd; resize: vertical;
}
.feld-datum input[type=date] { width: 100%; font: 1rem var(--sans); padding: .55rem; border: 1px solid var(--linie); border-radius: 6px; background: #fbfcfd; }
.knopf-breit { width: 100%; justify-content: center; padding: 1rem; }

.stunden-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.stunden-liste li { border: 1px solid var(--linie); border-radius: 8px; padding: .7rem .8rem; }
.stunden-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.stunden-zahl { font: 700 1.1rem var(--mono); color: var(--akzent); }
.stunden-datum { font: .8rem var(--mono); color: var(--gedimmt); }
.stunden-text { margin: .3rem 0; }
.stunden-meta { font-size: .75rem; color: var(--gedimmt); }

/* Stornierte Stundeneinträge */
.stunden-liste li.ist-storniert { opacity: .7; background: #fbf3f2; border-color: #e7c9c4; }
.ist-storniert .stunden-zahl,
.ist-storniert .stunden-text { text-decoration: line-through; color: var(--gedimmt); }

.storno-hinweis {
  margin-top: .5rem; padding: .5rem .6rem;
  background: #fff; border: 1px solid #e7c9c4; border-radius: 6px;
  font-size: .78rem; color: #7a2b21;
}

/* Löschbereich (nur Admin) */
.storno-box { margin-top: .5rem; }
.storno-box > summary {
  display: inline-block; cursor: pointer;
  font: 600 .78rem var(--sans); color: var(--gefahr);
  padding: .25rem .5rem; border: 1px solid var(--gefahr); border-radius: 5px;
}
.storno-box[open] > summary { margin-bottom: .5rem; }
.storno-form { display: grid; gap: .5rem; padding: .6rem; background: #fbf3f2; border-radius: 6px; }
.storno-frage { margin: 0; font-weight: 600; font-size: .82rem; }
.grund-knoepfe { display: grid; gap: .3rem; }
.grund-knoepfe label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.storno-form textarea {
  width: 100%; font: 1rem var(--sans); padding: .5rem;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff; resize: vertical;
}

/* Protokollname-Feld in der Benutzertabelle */
.anzeige-form { display: flex; gap: .3rem; margin-top: .35rem; }
.anzeige-form input {
  flex: 1; min-width: 6rem; font: .82rem var(--sans);
  padding: .3rem .45rem; border: 1px solid var(--linie); border-radius: 5px; background: #fbfcfd;
}

/* ==========================================================
   Quittierpflichtiger Hinweis (Arbeitsstunden)
   ========================================================== */

body.quittung-offen { overflow: hidden; }

.quittung-huelle {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 16, 20, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  padding-top: calc(1.2rem + env(safe-area-inset-top));
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}

.quittung-box {
  width: 100%;
  max-width: 24rem;
  background: #fff;
  border-radius: 12px;
  border-top: 6px solid var(--gefahr);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 1.3rem 1.2rem 1.2rem;
  text-align: center;
}

.quittung-titel {
  margin: 0 0 .6rem;
  font: 700 1.15rem var(--sans);
  color: var(--gefahr);
}
.quittung-text { margin-bottom: 1.1rem; }
.quittung-text p {
  margin: .35rem 0;
  font-size: .95rem;
  color: var(--tinte);
}

/* Fällt JavaScript aus, bleibt der Kasten sichtbar an Ort und Stelle */
.no-js .quittung-huelle {
  position: static;
  background: none;
  padding: 0;
  display: block;
}

/* Von Pflichtstunden befreit */
.konto-feld.ist-befreit { background: var(--ok-hell); }
.konto-feld.ist-befreit .konto-zahl { color: var(--ok); font-size: 1.7rem; }
.zeile-voll { grid-column: 1 / -1; }

/* ==========================================================
   Zählerdaten: Nummer, Plombe, Eichdatum, Bemerkung
   ========================================================== */

.k-details {
  margin-top: .6rem;
}

.k-details > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  font: 700 .78rem/1 var(--sans);
  color: var(--akzent);
  padding: .45rem .6rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
}
.k-details > summary::-webkit-details-marker { display: none; }
.k-details > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform .15s;
  color: var(--akzent);
}
.k-details[open] > summary::before { transform: rotate(90deg); }

.k-marker { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: #eef1f3;
  border-radius: 999px;
  padding: .15rem .5rem;
  font: .7rem var(--mono);
  color: var(--tinte);
}
.k-chip.chip-warnung { background: var(--fehler-hell); color: #7a2b21; font-weight: 700; }

.k-detailfeld { margin-top: .55rem; }
.k-detailfeld > label {
  display: block;
  font: 600 .75rem var(--sans);
  color: #33404b;
  margin-bottom: .25rem;
}
.k-detailfeld input[type=text],
.k-detailfeld input[type=date],
.k-detailfeld textarea,
.k-detailfeld select {
  width: 100%;
  font: 1rem var(--sans);
  padding: .6rem .65rem;          /* großzügig für den Daumen */
  min-height: 2.9rem;
  border: 1px solid var(--linie);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--tinte);
  -webkit-appearance: none;
  appearance: none;
}
.k-detailfeld textarea { resize: vertical; line-height: 1.35; }
.k-detailfeld input:focus,
.k-detailfeld textarea:focus,
.k-detailfeld select:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-hell);
}

/* Plombe */
.plombe-zeile { display: flex; align-items: center; gap: .55rem; }
.plombe-zeile .plombe-wahl { flex: 1; }

.plombe-punkt {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .3);
  flex: none;
}
.plombe-punkt.gross { width: 26px; height: 26px; border-width: 2px; }

/* Eichfrist-Hinweis */
.eich-info {
  margin: .35rem 0 0;
  font: .76rem var(--mono);
  color: var(--gedimmt);
}
.eich-info.ist-abgelaufen {
  color: var(--gefahr);
  font-weight: 700;
}

/* Ausgegraute Kachel: Zusatzfelder mit abdunkeln */
.kachel-stand.ist-ohne .k-details { opacity: .55; }

/* „In Ordnung“ über die volle Breite, die sechs Mängel darunter zweispaltig */
.zustand-feld.ist-inordnung { grid-column: 1 / -1; }

/* ==========================================================
   Suchzeile: Suche halb, daneben der Knopf „Zustand“
   ========================================================== */

.suchzeile {
  display: flex;
  gap: .55rem;
  align-items: stretch;
}

.suchzeile .kachel-suche {
  flex: 1 1 50%;
  min-width: 0;
  margin: 0;
}

.kachel-zustandknopf {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  border: 1px solid var(--linie);
  background: #fbfcfd;
  color: var(--tinte);
  font: 700 .95rem var(--sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kachel-zustandknopf:active { background: #eef1f3; }

.kachel-zustandknopf .zk-pfeil {
  font-size: .8rem;
  color: var(--akzent);
  transition: transform .15s;
}
.kachel-zustandknopf.ist-offen {
  background: var(--akzent-hell);
  border-color: var(--akzent);
  color: #0b4f4a;
}
.kachel-zustandknopf.ist-offen .zk-pfeil { transform: rotate(180deg); }

/* Zustandskachel bleibt eingeklappt, bis der Knopf sie öffnet */
.kachel-zustand.ist-zu { display: none; }

/* In der halbierten Suche bleibt weniger Platz – Knopf und Feld anpassen */
.suchzeile .kachel-suche input { font-size: 1rem; padding: .5rem .35rem; }
.suchzeile .kachel-suche button { padding: .55rem .6rem; font-size: .8rem; white-space: nowrap; }

@media (max-width: 340px) {
  .kachel-zustandknopf { font-size: .85rem; }
}

/* Der Text füllt die gesamte Knopfhöhe aus */
.kachel-zustandknopf {
  align-self: stretch;          /* so hoch wie die Suchkachel daneben */
  padding: 0;                   /* kein Innenrand, der die Fläche beschneidet */
}
.kachel-zustandknopf .zk-text {
  flex: 1;                      /* nimmt die volle Höhe und Breite ein */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.05rem;
  line-height: 1;
  padding-left: .6rem;
}
.kachel-zustandknopf .zk-pfeil {
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: .7rem;
}

/* ---- Zustand-Knopf: eine Zeile, großes Wort, kein Pfeil ---- */
.kachel-zustandknopf {
  flex-direction: row;          /* .kachel ordnet sonst untereinander an */
  align-self: stretch;
  padding: 0;
}
.kachel-zustandknopf .zk-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font: 700 1.35rem/1 var(--sans);
  letter-spacing: .01em;
}
.kachel-zustandknopf .zk-pfeil { display: none; }

@media (max-width: 360px) {
  .kachel-zustandknopf .zk-text { font-size: 1.15rem; }
}

/* Dreieck vor „Zustand“ – dasselbe wie vor „Zählerdaten“ */
.kachel-zustandknopf .zk-text::before {
  content: "▸";
  display: inline-block;
  margin-right: .45rem;
  font-size: .9em;
  color: var(--akzent);
  transition: transform .15s;
}
.kachel-zustandknopf.ist-offen .zk-text::before { transform: rotate(90deg); }

/* ==========================================================
   Warnung „ungeeicht“ rechts neben dem Zählerstand
   ========================================================== */

.stand-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.stand-zeile .k-eingabe { flex: 1; min-width: 0; }

.marke-ungeeicht {
  flex: none;
  align-self: center;
  padding: .3rem .55rem;
  border: 2px solid var(--gefahr);
  border-radius: 6px;
  background: var(--fehler-hell);
  color: var(--gefahr);
  font: 700 .8rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  animation: ungeeicht-blinken 1.1s steps(1, end) infinite;
}
.marke-ungeeicht.ist-versteckt { display: none; }

@keyframes ungeeicht-blinken {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .15; }
}

/* Wer Bewegung im Bild nicht mag, bekommt die Warnung ruhig, aber deutlich */
@media (prefers-reduced-motion: reduce) {
  .marke-ungeeicht {
    animation: none;
    background: var(--gefahr);
    color: #fff;
  }
}

@media (max-width: 360px) {
  .marke-ungeeicht { font-size: .72rem; padding: .25rem .4rem; }
}

/* Hinweis „Alle Stunden wurden geleistet.“ */
.stunden-fertig {
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  padding: .85rem;
}

/* ==========================================================
   Einbauort: rot neben der Kachelüberschrift
   ========================================================== */

.k-ort {
  color: var(--gefahr);
  font-weight: 700;
  font-size: .8rem;
  text-transform: none;      /* Ortsnamen nicht in Großbuchstaben */
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.k-ort.ist-versteckt { display: none; }

/* Die Einheit bleibt ganz rechts, der Ort steht direkt neben der Überschrift */
.k-titel .k-einheit { margin-left: auto; }

/* ==========================================================
   „kein Zähler“ sitzt jetzt in der Zeile „Zählerdaten“
   ========================================================== */

/* Erst sichtbar, wenn der Bereich aufgeklappt ist */
.k-details:not([open]) .ohne-haken { display: none; }

.k-details > summary .ohne-haken {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .6rem;
  padding: .3rem .5rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: #fbfcfd;
  font: 600 .74rem var(--sans);
  color: var(--gedimmt);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.k-details > summary .ohne-haken input {
  width: 20px;
  height: 20px;
  accent-color: var(--rolle);
  margin: 0;
}
.ist-ohne .k-details > summary .ohne-haken {
  border-color: var(--rolle);
  color: var(--rolle);
  background: #fff;
}

/* Der Kachelfuß enthält jetzt nur noch Vorjahr und Verbrauch */
.k-fuss { justify-content: flex-end; }

/* Punkt am Zustand-Knopf: für diesen Garten ist etwas angekreuzt */
.kachel-zustandknopf.hat-eintrag { position: relative; }
.kachel-zustandknopf.hat-eintrag::after {
  content: "";
  position: absolute;
  top: .45rem;
  right: .45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gefahr);
}

/* Zählernummer und Eichjahr nebeneinander, je zur Hälfte */
.k-detailreihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  align-items: start;
}
.k-detailreihe .k-detailfeld { margin-top: .55rem; }

/* Das Eichjahr braucht nur vier Ziffern – zentriert und in Ziffernschrift */
.k-detailreihe input[type=number] {
  font: 700 1.05rem var(--mono);
  text-align: center;
  letter-spacing: .06em;
  -moz-appearance: textfield;
}
.k-detailreihe input[type=number]::-webkit-outer-spin-button,
.k-detailreihe input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hinweis unter dem Eichjahr bleibt schmal lesbar */
.k-detailreihe .eich-info { font-size: .72rem; line-height: 1.25; }

/* Ist nur eines der beiden Felder aktiv, nimmt es die volle Breite ein */
.k-detailreihe.ist-einzeln { grid-template-columns: 1fr; }

/* ==========================================================
   Eichjahr: Eingabefeld wie die Zählernummer, rechts „– 2032“
   ========================================================== */

.eich-zeile {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Das Feld bekommt dieselbe Größe wie die Zählernummer daneben */
.eich-zeile .eich-feld {
  flex: 1;
  min-width: 0;
  width: auto;
  font: 700 1rem var(--mono);
  text-align: center;
  letter-spacing: .06em;
  padding: .6rem .4rem;
  min-height: 2.9rem;
}

.eich-bis {
  flex: none;
  font: 700 1rem var(--mono);
  color: var(--gedimmt);
  white-space: nowrap;
  letter-spacing: .04em;
}
.eich-bis.ist-abgelaufen { color: var(--gefahr); }

/* Die frühere Hinweiszeile wird nicht mehr gebraucht */
.k-detailreihe .eich-info { display: none; }

/* ==========================================================
   Deutliche Speicher-Bestätigung
   ========================================================== */

.gespeichert-balken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 .6rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  font: 700 1.15rem var(--sans);
  text-align: center;
  animation: gb-auftauchen .25s ease-out;
  transition: opacity .5s, transform .5s, max-height .5s, margin .5s, padding .5s;
  max-height: 6rem;
}

/* Erfolg: kräftiges Grün, springt kurz ins Auge */
.gespeichert-balken.ist-ok {
  background: var(--ok, #2f855a);
  color: #fff;
  box-shadow: 0 6px 20px rgba(47, 133, 90, .35);
  animation: gb-auftauchen .25s ease-out, gb-puls 1.1s ease-in-out 1;
}
.gb-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  font-size: 1.2rem;
  flex: none;
}

/* „Nichts geändert“: ruhig, neutral */
.gespeichert-balken.ist-neutral {
  background: #eef1f3;
  color: var(--gedimmt);
  font-weight: 600;
  font-size: 1rem;
}

/* Sanftes Ausblenden nach ein paar Sekunden */
.gespeichert-balken.ist-weg {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin: 0;
  padding: 0 1.1rem;
  overflow: hidden;
}

@keyframes gb-auftauchen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gb-puls {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .gespeichert-balken { animation: none; }
  .gespeichert-balken.ist-weg { transition: opacity .3s; }
}

/* ==========================================================
   Bildschirmfüllende Speicher-Bestätigung mit Countdown
   ========================================================== */

.speicher-vollbild {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok, #2f855a);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.speicher-vollbild.ist-sichtbar {
  opacity: 1;
  pointer-events: auto;
  animation: sv-auf .3s ease-out;
}
.speicher-vollbild.ist-weg {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity .4s, transform .4s;
}

.sv-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-align: center;
}

.sv-haken {
  font-size: 4.5rem;
  line-height: 1;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sv-haken-pop .4s ease-out;
}

/* Die große Zahl füllt den Bildschirm */
.sv-zahl {
  font: 900 min(60vw, 60vh) var(--sans);
  line-height: 1;
  letter-spacing: -.02em;
}
.sv-zahl.sv-wechsel { animation: sv-zahl-pop .3s ease-out; }

.sv-text {
  font: 700 1.6rem var(--sans);
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .9;
}

@keyframes sv-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sv-haken-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes sv-zahl-pop {
  0%   { transform: scale(.6); opacity: .3; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .speicher-vollbild.ist-sichtbar,
  .sv-haken, .sv-zahl.sv-wechsel { animation: none; }
}

/* ==========================================================
   Übersichtsseite: Kachelraster mit Erfassungsstand
   ========================================================== */

.ueb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.ueb-summe { font-size: 1rem; color: var(--tinte); }
.ueb-summe strong { font-size: 1.2rem; color: var(--ok, #2f855a); }
.ueb-offen {
  margin-left: .5rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--fehler-hell);
  color: var(--gefahr);
  font: 700 .8rem var(--sans);
}

.ueb-filter { display: flex; gap: .3rem; }
.ueb-filter a {
  padding: .35rem .7rem;
  border-radius: 6px;
  border: 1px solid var(--linie);
  background: #fbfcfd;
  color: var(--gedimmt);
  font: 600 .82rem var(--sans);
  text-decoration: none;
}
.ueb-filter a.ist-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* Vier Kacheln pro Zeile */
.ueb-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}

.ueb-kachel {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .7rem;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: #fff;
  text-decoration: none;
  color: var(--tinte);
  min-height: 7.8rem;
}
.ueb-kachel:active { transform: scale(.98); }

.ueb-kachel.ist-fertig { border-color: var(--ok, #2f855a); background: var(--ok-hell, #f0fbf5); }
.ueb-kachel.ist-offen  { border-left: 5px solid var(--gefahr); }

.uk-kopf { display: flex; align-items: center; justify-content: space-between; }
.uk-nr {
  font: 700 1.4rem var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.uk-fertig {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--ok, #2f855a);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
}
.uk-name {
  font-size: .82rem;
  color: var(--gedimmt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uk-zaehler { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; }
.uk-marke {
  font: 700 .72rem var(--sans);
  padding: .22rem .4rem;
  border-radius: 5px;
  text-align: center;
}
.uk-marke.ist-da   { background: var(--ok-hell, #e6f5ec); color: var(--ok, #2f855a); }
.uk-marke.ist-leer { background: var(--fehler-hell); color: var(--gefahr); }
.uk-marke.ist-ohne { background: #eef1f3; color: var(--gedimmt); font-style: italic; }

/* Schmalere Geräte: weniger Spalten */
@media (max-width: 700px) { .ueb-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .ueb-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 340px) { .ueb-raster { grid-template-columns: 1fr; } }

/* ==========================================================
   Kein-Zutritt-Kachel in der Suchzeile
   ========================================================== */

.kachel-zutritt {
  flex: 1 1 33%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--linie);
  background: #fbfcfd;
  color: var(--gedimmt);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kachel-zutritt .kz-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font: 700 1.05rem var(--sans);
  padding: 0 .3rem;
  text-align: center;
}
.kachel-zutritt:active { background: #eef1f3; }

/* aktiv = für diesen Garten gilt „Kein Zutritt“ */
.kachel-zutritt.ist-aktiv {
  background: var(--gefahr);
  border-color: var(--gefahr);
  color: #fff;
}

/* Übersicht: Kein-Zutritt-Kachel und Hervorhebung des letzten Gartens */
.ueb-kachel.ist-zutritt {
  border-color: var(--gefahr);
  background: var(--fehler-hell);
}
.uk-zutritt-marke {
  margin-top: auto;
  padding: .3rem .4rem;
  border-radius: 5px;
  background: var(--gefahr);
  color: #fff;
  font: 700 .8rem var(--sans);
  text-align: center;
}

.uk-zuletzt {
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font: 700 .68rem var(--sans);
}
.ueb-kachel.ist-letzter {
  outline: 3px solid var(--akzent);
  outline-offset: 1px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* Kopfzeile als Link */
.kopf-garten {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Kurzes Aufleuchten des zuletzt bearbeiteten Gartens beim Zurückkehren */
.ueb-kachel.ist-aufmerksam { animation: uk-aufmerksam 1.6s ease-out; }
@keyframes uk-aufmerksam {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
  25%      { box-shadow: 0 0 0 6px var(--akzent-hell), 0 4px 14px rgba(0, 0, 0, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .ueb-kachel.ist-aufmerksam { animation: none; }
}

/* Passwort-Bestätigung vor gefährlichen Aktionen (Jahreswechsel, Protokoll) */
.pw-bestaetigung {
  display: block;
  margin: .6rem 0;
  font: 600 .85rem var(--sans);
  color: #33404b;
}
.pw-bestaetigung input {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-top: .3rem;
  padding: .6rem .65rem;
  min-height: 2.9rem;
  border: 1px solid var(--linie);
  border-radius: 7px;
  font: 1rem var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
.pw-bestaetigung input:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-hell);
}

/* Admin: Summe der Verbräuche über der Kachelübersicht */
.ueb-verbrauch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: .8rem;
}
.uv-feld {
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--akzent-hell);
  border: 1px solid var(--akzent);
}
.uv-wert {
  display: block;
  font: 700 1.3rem var(--mono);
  font-variant-numeric: tabular-nums;
  color: #0b4f4a;
}
.uv-text {
  display: block;
  margin-top: .15rem;
  font: 600 .78rem var(--sans);
  color: var(--gedimmt);
}
@media (max-width: 500px) { .ueb-verbrauch { grid-template-columns: 1fr; } }

/* Rückmeldung beim sofortigen Foto-Upload */
.foto-status {
  display: block;
  margin-top: .4rem;
  padding: .4rem .55rem;
  border-radius: 6px;
  font: 600 .82rem var(--sans);
  text-align: center;
}
.foto-status.ist-laden  { background: #eef1f3; color: var(--gedimmt); }
.foto-status.ist-ok     { background: var(--ok-hell, #e6f5ec); color: var(--ok, #2f855a); }
.foto-status.ist-fehler { background: var(--fehler-hell); color: var(--gefahr); }

/* ==========================================================
   Erweiterte Übersichtskacheln: Stände, Baujahr, Foto
   ========================================================== */

.ueb-kachel { position: relative; overflow: hidden; }

/* Zählerstand-Zeile: Etikett · Wert · Baujahr */
.uk-stand {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-size: .8rem;
  margin-top: .15rem;
}
.uk-etikett { color: var(--gedimmt); font-weight: 600; min-width: 3.2rem; }
.uk-wert {
  font: 700 .95rem var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.uk-offen { color: var(--gefahr); font-weight: 700; }
.uk-leer  { color: var(--gedimmt); font-style: italic; }

/* Baujahr klein daneben; rot, wenn ungeeicht */
.uk-jahr {
  margin-left: auto;
  font: 700 .72rem var(--mono);
  color: var(--gedimmt);
  padding: .05rem .35rem;
  border-radius: 4px;
  background: #eef1f3;
}
.uk-jahr.ist-alt { background: var(--fehler-hell); color: var(--gefahr); }

/* Marken „Kein Zutritt“ und „ungeeicht“ */
.uk-zutritt-marke {
  margin: .2rem 0;
  padding: .25rem .4rem;
  border-radius: 5px;
  background: var(--gefahr);
  color: #fff;
  font: 700 .78rem var(--sans);
  text-align: center;
}
.uk-ungeeicht-marke {
  margin: .2rem 0;
  padding: .22rem .4rem;
  border-radius: 5px;
  background: var(--gefahr);
  color: #fff;
  font: 700 .72rem var(--sans);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  animation: ungeeicht-blinken 1.1s steps(1, end) infinite;
}

/* Ungeeichte Kachel bekommt einen kräftigen roten Rahmen */
.ueb-kachel.ist-ungeeicht {
  border-color: var(--gefahr);
  box-shadow: inset 0 0 0 2px var(--gefahr);
}

/* Foto-Vorschau unten in der Kachel */
.uk-foto {
  position: relative;
  margin-top: .4rem;
  border-radius: 7px;
  overflow: hidden;
  height: 4.5rem;
}
.uk-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.uk-foto-zahl {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font: 700 .7rem var(--sans);
  padding: .1rem .4rem;
  border-radius: 999px;
}

/* Warnfilter-Knöpfe (ungeeicht / kein Zutritt) rot hinterlegt */
.ueb-filter a.ist-warnung {
  border-color: var(--gefahr);
  color: var(--gefahr);
}
.ueb-filter a.ist-warnung.ist-aktiv {
  background: var(--gefahr);
  border-color: var(--gefahr);
  color: #fff;
}
.ueb-filter { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .uk-ungeeicht-marke { animation: none; }
}

/* Versionszeile (letztes Änderungsdatum) im Kopf der Übersicht */
.ueb-version {
  font: 600 .78rem var(--mono);
  color: var(--gedimmt);
  background: #eef1f3;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Programmversion neben dem Datenstand */
.ueb-version.ist-programm { background: var(--akzent-hell); color: #0b4f4a; }

/* Sicherungs-Kachel und Dialog */
.start-kachel.ist-sicherung {
  border: 1px solid var(--akzent);
  background: var(--akzent-hell);
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.start-kachel.ist-sicherung .start-name { color: #0b4f4a; }

.sich-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.3rem;
  max-width: 28rem;
  width: calc(100% - 2rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.sich-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.sich-dialog h2 { margin: 0 0 .5rem; }
.sich-knoepfe {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* „kein Zähler“ als eigene Zeile im aufgeklappten Detailbereich */
.ohne-haken-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 7px;
  background: #fbfcfd;
  font: 600 .9rem var(--sans);
  color: #33404b;
  cursor: pointer;
}
.ohne-haken-zeile input {
  width: 22px;
  height: 22px;
  accent-color: var(--rolle);
  margin: 0;
  flex: none;
}
.ist-ohne .ohne-haken-zeile {
  border-color: var(--rolle);
  color: var(--rolle);
  background: #fff;
}

/* Fotos in der vom Handy vorgesehenen Ausrichtung anzeigen.
   Neue Uploads sind bereits physisch gedreht; für Altbestände sorgt
   dies dafür, dass der Browser die EXIF-Drehung berücksichtigt. */
.k-foto img,
.uk-foto img,
#bildschau-bild,
.foto-galerie img {
  image-orientation: from-image;
}

/* Kleiner grüner Speicherbutton neben Einbaujahr (Strom) und Plombe (Wasser) */
.knopf-speichern-klein {
  flex: none;
  width: 2.9rem;
  min-height: 2.9rem;
  border: 0;
  border-radius: 7px;
  background: var(--ok, #2f855a);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.knopf-speichern-klein:active { background: #276749; }

/* Plombenauswahl schmaler, damit rechts Platz für den Speicherbutton bleibt */
.plombe-mit-speichern { display: flex; align-items: center; gap: .5rem; }
.plombe-mit-speichern .plombe-schmal { flex: 1; min-width: 0; }

/* ==========================================================
   Tabellenansicht aller Gärten (Admin)
   ========================================================== */

.tab-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tab-gaerten {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  white-space: nowrap;
}
.tab-gaerten th,
.tab-gaerten td {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}
.tab-gaerten thead th {
  position: sticky;
  top: 0;
  background: #fff;
  font-weight: 700;
  color: #33404b;
  border-bottom: 2px solid var(--linie);
}
.tab-gaerten .tab-strom  { background: #fdf6ec; }
.tab-gaerten .tab-wasser { background: #eef6fb; }

.tab-nr   { font: 700 .95rem var(--mono); }
.tab-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.tab-zahl { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tab-neu  { font-weight: 700; color: var(--tinte); }
.tab-ohne { text-align: center; color: var(--gedimmt); font-style: italic; }

.tab-gaerten tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }
.tab-gaerten tbody tr:hover { background: var(--akzent-hell); }

/* Zählernummer in der Tabelle */
.tab-znr { font-family: var(--mono); font-size: .8rem; }

/* Werkzeugleiste über der Tabelle */
.tab-werkzeuge { margin-bottom: .8rem; }

/* Zwei-Faktor: große Code-Eingabe und QR-Bereich */
.totp-eingabe {
  font: 700 1.6rem var(--mono);
  letter-spacing: .4em;
  text-align: center;
}
.zf-qr {
  text-align: center;
  margin: 1rem 0;
}
.zf-qr img {
  width: 220px;
  height: 220px;
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  padding: .4rem;
}
.zf-secret {
  text-align: center;
  font-size: .85rem;
  color: var(--gedimmt);
}
.zf-secret code {
  font: 700 1rem var(--mono);
  letter-spacing: .1em;
  color: var(--tinte);
}
.zf-status { font-size: 1.05rem; }

/* Zwei-Faktor-Spalte in der Benutzerverwaltung */
.spalte-2fa { white-space: nowrap; }
.zfa-status { margin-bottom: .35rem; font-size: .82rem; }
.zfa-an { color: var(--ok, #2f855a); font-weight: 700; }
.zfa-aus { color: var(--gedimmt); }
.zfa-pflicht {
  display: inline-block;
  margin-left: .3rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--rolle);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.zfa-pflicht-form { margin-top: .3rem; }

/* ==========================================================
   Zählerkacheln schmaler + gemeinsamer senkrechter Speicherbutton
   ========================================================== */
.zaehler-reihe {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  width: 100%;
}
/* Falls die Kachelgruppe ein Grid ist: über beide Spalten spannen */
.kachel-gruppe .zaehler-reihe { grid-column: 1 / -1; }

.zaehler-spalte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
/* Die Zählerkacheln füllen die Spalte voll aus (bis zum Button) */
.zaehler-spalte .kachel-stand {
  width: 100%;
  grid-column: auto;   /* etwaige Grid-Vorgaben aufheben */
  margin: 0;
}

/* Senkrechter Speicherbutton ganz rechts, volle Höhe der Zählerreihe */
.speichern-senkrecht {
  flex: 0 0 3.6rem;
  width: 3.6rem;
  align-self: stretch;
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  background: var(--ok, #2f855a);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  -webkit-appearance: none;
  appearance: none;
  writing-mode: initial;
}
.speichern-senkrecht:active { background: #276749; }
.speichern-senkrecht .ss-haken { font-size: 1.8rem; line-height: 1; }
.speichern-senkrecht .ss-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
}

/* Der kleine grüne Button von früher wird nicht mehr gebraucht */
.knopf-speichern-klein { display: none; }

/* Info-Kachel „Zuletzt“ – nimmt jetzt auch die Speichermeldung auf */
.k-info-zeile {
  font-size: .82rem;
  color: var(--tinte);
  line-height: 1.35;
}
.k-info-zeile strong { color: var(--gedimmt); font-weight: 700; }

.k-info-meldung {
  display: block;
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--linie);
  font-weight: 700;
  font-size: .85rem;
}
.km-haken { color: var(--ok, #2f855a); margin-right: .2rem; }

/* Farbliche Hervorhebung der Info-Kachel, wenn eine Meldung anliegt */
.kachel-info.hat-meldung.ist-ok {
  border-color: var(--ok, #2f855a);
  background: var(--ok-hell, #e6f5ec);
}
.kachel-info.hat-meldung.ist-ok .k-info-meldung { color: var(--ok, #2f855a); }
.kachel-info.hat-meldung.ist-neutral {
  border-color: var(--linie);
  background: #f4f6f8;
}
.kachel-info.hat-meldung.ist-neutral .k-info-meldung { color: var(--gedimmt); }

/* „bis Baujahr“ neben dem Vorjahr beim Wasserzähler */
.k-baujahr {
  font: 700 .78rem var(--mono);
  color: var(--gedimmt);
  padding: .05rem .4rem;
  border-radius: 4px;
  background: #eef1f3;
}
.k-baujahr.ist-abgelaufen {
  background: var(--fehler-hell);
  color: var(--gefahr);
}

/* Wasser-Abgleich */
.abgleich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.abgleich-zahlen { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .85rem; }
.abgleich-zahlen span { padding: .2rem .55rem; border-radius: 999px; background: #eef1f3; font-weight: 700; }
.az-ok { background: var(--ok-hell, #e6f5ec) !important; color: var(--ok, #2f855a); }
.az-ab { background: var(--fehler-hell) !important; color: var(--gefahr); }

.abgleich-tab tr.zeile-abweichung { background: var(--fehler-hell); }
.abgleich-tab tr.zeile-fehlt { background: #fdf6ec; }
.zelle-warnung { color: var(--gefahr); font-weight: 700; }

.status-marke { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font: 700 .72rem var(--sans); }
.status-marke.ist-gut { background: var(--ok-hell, #e6f5ec); color: var(--ok, #2f855a); }
.status-marke.ist-schlecht { background: var(--fehler-hell); color: var(--gefahr); }
.status-marke.ist-neutral { background: #eef1f3; color: var(--gedimmt); }

.datei-wahl { display: block; margin-bottom: .8rem; font-weight: 600; }

/* Gründe für die Abweichung unter der Status-Marke */
.status-gruende {
  margin-top: .25rem;
  font-size: .72rem;
  color: var(--gefahr);
  line-height: 1.3;
}

/* Zählernummer des Wasserzählers exakt mittig in der Titelzeile */
.kachel-zaehler2 .k-titel { position: relative; }
.k-titel-nr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 700 .72rem var(--mono);
  letter-spacing: .03em;
  color: var(--tinte);
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}
.k-titel-nr:empty { display: none; }

/* Pächter-Suche und -Karte */
.paechter-suche { display: flex; gap: .5rem; margin-bottom: 1rem; }
.paechter-feld { flex: 1; font-size: 1.1rem; padding: .6rem .7rem; }

.paechter-karte { padding: 0; overflow: hidden; }
.pk-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--rolle); color: #fff; padding: .8rem 1rem;
}
.pk-nr { font: 700 1.4rem var(--mono); }
.pk-flaeche { font-size: .9rem; opacity: .9; }

.pk-block {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--linie);
}
.pk-block:last-child { border-bottom: 0; }
.pk-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gedimmt); font-weight: 700; }
.pk-wert { font-size: 1rem; color: var(--tinte); }
.pk-name { font-weight: 700; font-size: 1.1rem; }
.pk-tel { font: 700 1.05rem var(--mono); color: var(--akzent); text-decoration: none; }

/* ==========================================================
   Ziffernblock für die Gartennummer-Suche
   ========================================================== */

/* Suchkachel auf der Pächterseite: dieselbe Gestalt wie in der Erfassung */
.suchzeile + .meldung,
.suchzeile + .karte { margin-top: .9rem; }
.suchzeile .kachel-suche input::placeholder { color: var(--gedimmt); font-weight: 400; }

/* Großer Knopf neben dem Suchfeld, der den Ziffernblock öffnet */
.nr-tastatur-knopf {
  gap: .5rem;
  font-size: 1rem;
  line-height: 1;
  padding: .75rem 1.1rem;
  min-height: 3rem;
  white-space: nowrap;
}
.nr-tastatur-zeichen { font-size: 1.6rem; line-height: 1; }
.nr-tastatur-text    { font-weight: 700; }

/* Auf schmalen Geräten trägt der Knopf die halbe Zeile */
@media (max-width: 480px) {
  .paechter-suche { gap: .4rem; }
  .nr-tastatur-knopf { padding: .75rem .9rem; min-height: 3.2rem; }
  .nr-tastatur-text { font-size: .9rem; }
}

/* Bildschirmfüllende Ebene.
   Wichtig für iPhones: nicht 100vh nehmen – das rechnet die ein- und
   ausfahrende Adressleiste von Safari mit, dadurch rutscht der untere
   Rand unter die Leiste. 100svh (kleine Ansicht) passt immer; die
   genaue Höhe setzt zusätzlich das Skript über visualViewport. */
.nr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 300;
  background: rgba(26, 33, 41, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  touch-action: none;
}
.nr-overlay[hidden] { display: none; }

/* Seite dahinter festhalten, sonst zieht iOS beim Wischen die
   Adressleiste auf und der Block ändert ständig seine Größe. */
body.nr-block-offen {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.nr-overlay-innen {
  width: 100%;
  max-width: 22rem;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.nr-overlay-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nr-overlay-titel {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gedimmt);
  font-weight: 700;
}
.nr-schliessen {
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gedimmt);
  cursor: pointer;
  padding: 0 .3rem;
}

/* Anzeige der bisher getippten Ziffern */
.nr-anzeige {
  font: 700 2.2rem/1 var(--mono);
  color: var(--tinte);
  text-align: center;
  padding: .6rem 0;
  border-bottom: 2px solid var(--linie);
  min-height: 3rem;
}

.nr-tastenfeld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.nr-taste {
  font: 700 1.5rem/1 var(--mono);
  padding: .95rem 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--tinte);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nr-taste:hover  { background: #f3f6f7; }
.nr-taste:active { background: var(--akzent-hell); border-color: var(--akzent); transform: translateY(1px); }
.nr-taste-neben  { font-size: 1.2rem; color: var(--gedimmt); background: #f3f6f7; }
.nr-taste-suchen {
  grid-column: 1 / -1;
  font: 700 1rem/1 var(--sans);
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  padding: .95rem 0;
}
.nr-taste-suchen:hover, .nr-taste-suchen:active { background: #0c5c56; }

/* Vorschlagsknöpfe bei ähnlichen Nummern */
.nr-vorschlaege { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; }

/* Sprung von der Pächterkarte in die Erfassung */
.pk-fuss { padding: .8rem 1rem; }
.pk-fuss .knopf-breit { width: 100%; }

/* Info-Kachel der Erfassung als Link zu den Pächterdaten */
.kachel-info-link { text-decoration: none; color: inherit; cursor: pointer; }
.kachel-info-link:hover { border-color: var(--akzent); }
.k-info-paechter {
  font-size: .72rem;
  font-weight: 700;
  color: var(--akzent);
  letter-spacing: .03em;
}

/* Auf kleinen Geräten den Block wirklich bildschirmfüllend zeigen */
@media (max-width: 560px) {
  .nr-overlay { padding: .5rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .nr-overlay-innen {
    max-width: none;
    justify-content: center;
    padding: .8rem;
  }
  .nr-anzeige { font-size: 2.4rem; padding: .4rem 0; min-height: 2.6rem; }
  .nr-taste { padding: 1.05rem 0; font-size: 1.7rem; }
}

/* Sehr flache Ansicht (Querformat oder kleine Geräte): Tasten kompakter,
   damit die Suchen-Taste nie unter den unteren Rand rutscht. */
@media (max-height: 620px) {
  .nr-anzeige { font-size: 1.8rem; padding: .3rem 0; min-height: 2.2rem; }
  .nr-taste { padding: .7rem 0; font-size: 1.3rem; }
  .nr-taste-suchen { padding: .75rem 0; }
  .nr-tastenfeld { gap: .4rem; }
  .nr-overlay-innen { gap: .5rem; }
}

/* ==========================================================
   Unterer Seitenrand auf iPhones
   Wegen viewport-fit=cover reicht der Inhalt bis unter den
   Home-Indicator und Safaris Adressleiste. Ein zusätzlicher
   Abstand in Höhe der Sicherheitszone sorgt dafür, dass die
   letzte Zeile (z. B. die untersten Kacheln der Übersicht)
   immer freigescrollt werden kann. Gilt für alle Seiten,
   auf Geräten ohne Sicherheitszone ist env() = 0.
   ========================================================== */

.inhalt { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
body.mit-daumenleiste .inhalt { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom)); }
.fuss { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }

/* ==========================================================
   Selbstablesung durch die Pächter
   ========================================================== */

/* Zahlenfeld mit Tastaturknopf daneben */
.zaehler-eingabe { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; margin-bottom: .4rem; }
.zaehler-feld {
  flex: 1 1 9rem;
  min-width: 0;
  font: 700 1.5rem/1 var(--mono);
  padding: .7rem .8rem;
  text-align: right;
}
.zaehler-eingabe .nr-tastatur-knopf { padding: .7rem 1rem; min-height: auto; }

/* Kameraknopf wie in der Erfassung, hier in einer Reihe mit dem Zahlenfeld */
.zaehler-kamera { margin-top: 0; padding: .45rem .8rem; white-space: nowrap; }
.zaehler-eingabe + .foto-status { display: inline-block; margin-bottom: .4rem; }
.einheit-hinweis { font-weight: 400; font-size: .85rem; color: var(--gedimmt); }
.code-feld { font: 700 1.2rem/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.knopf-breit { width: 100%; }

.ablese-quittung { margin: .6rem 0; padding-left: 1.1rem; line-height: 1.8; }

/* Zusätzliche Tasten im Ziffernblock */
.nr-taste-leeren { grid-column: 1 / -1; font: 600 .95rem/1 var(--sans); padding: .7rem 0; }

/* Übersicht der Meldungen für den Vorstand */
.ablese-karte { margin-bottom: .8rem; border-left: 4px solid var(--linie); }
.ablese-karte.ist-offen       { border-left-color: var(--akzent); }
.ablese-karte.ist-uebernommen { border-left-color: var(--ok, #2f855a); }
.ablese-karte.ist-verworfen   { border-left-color: var(--gedimmt); opacity: .7; }

.ak-kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ak-nr   { font: 700 1.3rem var(--mono); }
.ak-name { color: var(--gedimmt); }
.ak-status {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
}
.ak-status.ist-offen       { color: var(--akzent); border-color: var(--akzent); }
.ak-status.ist-uebernommen { color: var(--ok, #2f855a); border-color: var(--ok, #2f855a); }

.ak-werte { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ak-wert  { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.ak-zahl  { font: 700 1.15rem var(--mono); }
.ak-notiz {
  margin: .7rem 0 0;
  padding: .5rem .7rem;
  background: #f7f9fa;
  border-radius: var(--radius);
  font-size: .92rem;
}
.ak-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
}
.ak-zeit   { font-size: .78rem; color: var(--gedimmt); }
.ak-tasten { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ak-form   { display: inline; margin: 0; }

.code-liste .code-zelle { font: 700 1.1rem var(--mono); letter-spacing: .12em; }
.code-form { max-width: 22rem; }

@media print {
  .code-liste { break-inside: avoid; }
  .app-kopf, .ueb-filter, .code-form, .knopfzeile { display: none !important; }
}

/* ==========================================================
   Anmeldung der Pächter mit den letzten sechs IBAN-Ziffern
   ========================================================== */

/* Knopf anstelle des Passwortfeldes: eine verkleinerte Vorschau des
   späteren Eingabefensters – sechs Kästchen wie die echten Felder. */
.karo-knopf {
  display: block;
  width: 100%;
  padding: .75rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fbfcfd;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karo-knopf:hover  { border-color: var(--akzent); background: #fff; }
.karo-knopf:active { background: var(--akzent-hell); }

.karo-reihe { display: flex; justify-content: center; gap: .35rem; }

/* Ein Kästchen entspricht einem Feld im Eingabefenster, nur kleiner */
.karo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
}
.karo i {
  font: 700 1.15rem var(--mono);
  font-style: normal;
  color: #c9d2d8;                 /* blasse Beispielziffer */
  line-height: 1;
}
.karo.ist-voll   { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.karo.ist-voll i { color: var(--akzent); font-size: 1.4rem; }

@media (max-width: 380px) {
  .karo-reihe { gap: .25rem; }
  .karo { width: 1.9rem; height: 2.4rem; }
}

/* Eingabefenster */
.ziffern-ebene {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 300;
  background: rgba(26, 33, 41, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.ziffern-ebene[hidden] { display: none; }

.ziffern-fenster {
  width: 100%;
  max-width: 23rem;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: 1.1rem;
  text-align: center;
}
.ziffern-titel { font-weight: 700; margin: 0 0 .3rem; }

.ziffern-felder { display: flex; gap: .4rem; justify-content: center; margin: 1rem 0 .6rem; }
.ziffern-felder input {
  width: 2.6rem;
  height: 3.2rem;
  padding: 0;
  text-align: center;
  font: 700 1.5rem var(--mono);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
}
.ziffern-felder input:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px var(--akzent-hell);
}

.ziffern-meldung { min-height: 1.4rem; margin: .2rem 0 .6rem; font-size: .9rem; }

/* Ziffernblock im Anmeldefenster */
.ziffern-tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  margin: 0 auto .8rem;
  max-width: 15rem;
}
.ziffern-tasten .nr-taste { padding: .8rem 0; font-size: 1.35rem; }
.ziffern-meldung.ist-fehler { color: var(--gefahr); font-weight: 600; }

@media (max-width: 380px) {
  .ziffern-felder { gap: .3rem; }
  .ziffern-felder input { width: 2.2rem; height: 2.9rem; font-size: 1.3rem; }
}

/* ==========================================================
   Zugangsziffern der Pächter verwalten
   ========================================================== */

.zugang-tabelle { width: 100%; }
.zugang-tabelle .zg-nr { font: 700 1rem var(--mono); white-space: nowrap; }
.zg-feld {
  width: 7rem;
  font: 700 1.05rem var(--mono);
  letter-spacing: .12em;
  text-align: center;
  padding: .4rem .3rem;
}
.zugang-tabelle tr.ist-leer .zg-feld { border-color: var(--gefahr); background: var(--fehler-hell); }

.beispiel {
  background: #f7f9fa;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  font: .85rem/1.5 var(--mono);
  overflow-x: auto;
  margin: .5rem 0 1rem;
}
.bericht-liste { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.7; }

/* Speichern-Knopf bleibt beim Blättern durch lange Listen erreichbar */
.knopfzeile-klebend {
  position: sticky;
  bottom: 0;
  padding: .7rem 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--flaeche) 35%);
}

/* ---------- Fotovorschau der Selbstablesung ---------- */

.foto-vorschau { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 0; }
.foto-vorschau:empty { display: none; }
.fv-bild {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  background: #f3f6f7;
}
.fv-bild img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: cover;
}
.fv-text { font-size: .82rem; color: var(--gedimmt); }

/* Vorschaubilder in der Vorstandsübersicht */
.ak-foto {
  display: block;
  line-height: 0;
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  margin-top: .2rem;
}
.ak-foto:hover { border-color: var(--akzent); }
.ak-foto img {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: cover;
}