/* --------------------------------------------------------------
   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 {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  margin-top: .4rem;
  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;
}

/* ==========================================================
   Hilfe bei langem Druck
   ========================================================== */

.hilfe-ebene {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 400;
  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));
}
.hilfe-ebene[hidden] { display: none; }
body.hilfe-offen { overflow: hidden; }

/* Breite und Höhe richten sich nach der Textmenge */
.hilfe-fenster {
  width: max-content;
  min-width: 15rem;
  max-width: min(34rem, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .9rem 1rem 1rem;
}

.hilfe-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.hilfe-titel {
  font: 700 .95rem var(--sans);
  color: var(--tinte);
  overflow-wrap: anywhere;
}
.hilfe-zu {
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gedimmt);
  cursor: pointer;
  padding: 0 .2rem;
  flex: 0 0 auto;
}

.hilfe-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hilfe-text.ist-leer { color: var(--gedimmt); font-style: italic; }

.hilfe-eingabe {
  width: 100%;
  min-width: 18rem;
  font: .95rem/1.5 var(--sans);
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  resize: vertical;
}

/* Ohne Beschriftung und Schlüssel darf die Kopf-/Fußzeile schrumpfen */
.hilfe-titel[hidden], .hilfe-schluessel[hidden] { display: none; }
.hilfe-kopf:has(.hilfe-titel[hidden]) { justify-content: flex-end; margin-bottom: .2rem; }
.hilfe-fuss:has(.hilfe-schluessel[hidden]):not(:has(.hilfe-tasten)) {
  display: none;
}

.hilfe-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .8rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
}
.hilfe-schluessel {
  font: .68rem var(--mono);
  color: var(--gedimmt);
  overflow-wrap: anywhere;
}
.hilfe-tasten { display: flex; gap: .4rem; flex: 0 0 auto; }

/* Übersichtsseite */
.hilfe-karte { margin-bottom: .7rem; }
.hilfe-karte textarea { width: 100%; font: .92rem/1.5 var(--sans); }
.hk-kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.hk-name { font-weight: 700; }
.hk-schluessel { font: .72rem var(--mono); color: var(--gedimmt); }
.hk-fuss { margin-top: .4rem; }

/* ==========================================================
   Langer Druck auf dem Handy
   Ohne diese Regeln markiert iOS die Beschriftung eines Knopfes
   und blendet „Kopieren“ ein, sobald man ihn für die Hilfe hält.
   Eingabefelder bleiben ausgenommen – dort wird Markieren gebraucht.
   ========================================================== */

button,
.kachel,
a.knopf,
.knopf,
.nr-taste,
.karo-knopf,
.k-kamera,
summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
.hilfe-text,
.hilfe-eingabe {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

/* ==========================================================
   Zählerwechsel
   ========================================================== */

/* „Zählerdaten“ bleibt schmal, Plus und Reiter stehen rechts daneben.
   Dafür wandert der Rahmen von der Summary auf die Beschriftung. */
.k-details > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  padding: 0;
  border: 0;
}
.k-details > summary::before { display: none; }

.k-details-titel {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  padding: .45rem .6rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  color: var(--akzent);
}
.k-details-titel::before {
  content: "▸";
  display: inline-block;
  transition: transform .15s;
}
.k-details[open] > summary .k-details-titel::before { transform: rotate(90deg); }

/* Räumliches Plus rechts vom Aufklapper */
.wechsel-plus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  text-decoration: none;
  font: 700 1.2rem/1 var(--sans);
  color: #fff;
  background: linear-gradient(180deg, #159c92 0%, var(--akzent) 55%, #0b524d 100%);
  border: 1px solid #0b524d;
  box-shadow:
    0 2px 3px rgba(26, 33, 41, .25),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .18);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  transition: transform .06s, box-shadow .06s;
}
.wechsel-plus:hover { filter: brightness(1.06); }
.wechsel-plus:active {
  transform: translateY(2px);
  box-shadow:
    0 0 1px rgba(26, 33, 41, .3),
    inset 0 2px 4px rgba(0, 0, 0, .3);
}
/* Ist ein Wechsel eingetragen, wird aus dem Plus ein Haken */
.wechsel-plus.ist-gesetzt {
  background: linear-gradient(180deg, #6fbf73 0%, #3f8f46 55%, #2c6a32 100%);
  border-color: #2c6a32;
  font-size: 1rem;
}

.wechsel-hinweis {
  margin: .2rem 0 .6rem;
  padding: .45rem .6rem;
  background: #f0f7f6;
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  font-size: .84rem;
  line-height: 1.5;
}

/* Übersicht auf der Wechselseite */
.wechsel-liste { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .4rem 0 .8rem; }
.wechsel-liste dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedimmt); font-weight: 700; }
.wechsel-liste dd { margin: 0; font-weight: 600; }

/* Statt des Vorjahreswertes bei gewechseltem Zähler */
.k-vorjahr.ist-gewechselt { color: var(--gefahr); font-weight: 700; }
.k-vorjahr.ist-gewechselt strong { color: var(--gefahr); }

/* Fotos auf der Wechselseite nebeneinander */
.wechsel-fotos { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.wechsel-fotos figure { margin: 0; text-align: center; }
.wechsel-fotos figcaption { font-size: .75rem; color: var(--gedimmt); margin-top: .2rem; }

/* ==========================================================
   Zählerübersicht und Ablesehistorie
   ========================================================== */

/* Reiter neben dem Plus – gleiche Form wie „Zählerdaten“ */
.wechsel-reiter {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: .45rem .6rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  font: 700 .78rem/1 var(--sans);
  color: var(--akzent);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
}
.wechsel-reiter:hover { background: var(--akzent-hell); }

/* Reiterleiste auf der Zählerseite */
.zaehler-reiter {
  display: flex;
  gap: .3rem;
  align-items: center;
  border-bottom: 1px solid var(--linie);
  margin-bottom: .9rem;
}
.zaehler-reiter a {
  padding: .55rem .9rem;
  text-decoration: none;
  color: var(--gedimmt);
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.zaehler-reiter a.ist-aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.zaehler-reiter .zr-zurueck {
  margin-left: auto;
  margin-bottom: .35rem;
  padding: .4rem .7rem;
  border-bottom: 1px solid var(--linie);
  font-size: .82rem;
  color: var(--tinte);
}
.leiste .zr-zurueck { margin-left: auto; font-size: .82rem; }

.zaehler-karte { margin-bottom: .8rem; border-left: 4px solid var(--linie); }
.zaehler-karte.ist-neu     { border-left-color: #3f8f46; }
.zaehler-karte.ist-aktuell { border-left-color: var(--akzent); }
.zaehler-karte.ist-alt     { border-left-color: var(--gedimmt); }

.zk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
.zk-nr    { font: 700 1.05rem var(--mono); }
.zk-marke { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gedimmt); font-weight: 700; }

.historie-tabelle { width: 100%; font-size: .88rem; }
.historie-tabelle .zk-stand { font: 700 .95rem var(--mono); white-space: nowrap; }
.historie-tabelle .zk-wer {
  display: block;
  font-size: .76rem;
  color: var(--gedimmt);
  line-height: 1.4;
}
.zk-fest { font-size: .72rem; color: var(--gedimmt); }

/* Gewechselter Zähler in der Tabelle */
.tab-gewechselt {
  color: var(--gefahr);
  font-weight: 700;
  white-space: nowrap;
}

/* Zweite Überschrift auf der Tabellenseite */
.leiste-zweit { margin-top: 2rem; }
.leiste-zweit h2 { margin: 0; font-size: 1.15rem; }

/* Rückmeldung des Sofortspeicherns */
.speicher-marke {
  position: fixed;
  right: .8rem;
  bottom: calc(.8rem + env(safe-area-inset-bottom));
  z-index: 200;
  padding: .4rem .8rem;
  border-radius: 999px;
  font: 700 .78rem/1 var(--sans);
  box-shadow: 0 2px 8px rgba(26, 33, 41, .18);
  pointer-events: none;
}
.speicher-marke[hidden] { display: none; }
.speicher-marke.ist-laeuft { background: #eef2f4; color: var(--gedimmt); }
.speicher-marke.ist-ok     { background: var(--akzent); color: #fff; }
.speicher-marke.ist-fehler { background: var(--gefahr); color: #fff; }

/* ---------- Plombenfarbe per Klick auf die Plombe ---------- */

/* Aus der Marke wird ein Knopf – Aussehen bleibt wie gehabt */
button.k-plombe-marke {
  border: 0;
  background: none;
  padding: .15rem .2rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.k-plombe-marke:disabled { cursor: default; opacity: .7; }
button.k-plombe-marke.ist-leer .plombe-wort { color: var(--gedimmt); }
button.k-plombe-marke.ist-leer .plombe-bild { opacity: .35; }

.plombe-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));
}
.plombe-ebene[hidden] { display: none; }

.plombe-fenster {
  width: 100%;
  max-width: 18rem;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .9rem;
}
.plombe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.plombe-wahlliste { display: flex; flex-direction: column; gap: .35rem; }
.plombe-eintrag {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  font: 600 .95rem var(--sans);
  color: var(--tinte);
  cursor: pointer;
  text-align: left;
}
.plombe-eintrag:hover { background: #f3f6f7; }
.plombe-eintrag.ist-gewaehlt { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

/* Fehlende Plombe: kein Bild, dafür ein blinkender Hinweis */
button.k-plombe-marke.ist-fehlt .plombe-wort {
  color: var(--gefahr);
  font-weight: 700;
  animation: plombe-blinken 1.2s ease-in-out infinite;
}
.plombe-eintrag.ist-fehlt { color: var(--gefahr); font-weight: 700; }

@keyframes plombe-blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Wer Bewegung im Bild nicht mag, bekommt einen ruhigen Hinweis */
@media (prefers-reduced-motion: reduce) {
  button.k-plombe-marke.ist-fehlt .plombe-wort { animation: none; text-decoration: underline; }
}

/* Plombenknopf in den Zählerdaten – ersetzt das Auswahlfeld */
.plombe-knopf {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: .5rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  font: 600 .95rem var(--sans);
  color: var(--tinte);
  cursor: pointer;
}
.plombe-knopf:hover:not(:disabled) { border-color: var(--akzent); }
.plombe-knopf:disabled { background: #f3f6f7; cursor: default; }
.plombe-knopf.ist-fehlt .plombe-wort { color: var(--gefahr); font-weight: 700; }

/* Übersicht der Sicherungen */
.sicherung-karte { margin-bottom: .7rem; }
.sk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.sk-name { font: 700 .95rem var(--mono); overflow-wrap: anywhere; }
.sk-meta { font-size: .78rem; color: var(--gedimmt); }
.sk-tasten { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.sk-klartext { margin-top: .6rem; }
.sk-klartext > summary { cursor: pointer; font-size: .82rem; color: var(--akzent); font-weight: 600; }
.sk-klartext .formular { margin-top: .5rem; }

/* Erweiterte Filter in der Übersicht */
.ueb-feinfilter { margin-top: .5rem; }
.ueb-feinfilter > summary {
  cursor: pointer;
  font: 700 .78rem/1 var(--sans);
  color: var(--akzent);
  padding: .4rem .6rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  display: inline-block;
  list-style: none;
}
.ueb-feinfilter > summary::-webkit-details-marker { display: none; }

.ff-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
  margin-top: .6rem;
  padding: .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.ff-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--gedimmt); font-weight: 700; }
.ff-form select { font-size: .9rem; padding: .35rem .4rem; }
.ff-tasten { display: flex; gap: .4rem; align-items: center; }

.ueb-treffer {
  margin-left: .5rem;
  font-size: .78rem;
  color: var(--akzent);
  font-weight: 700;
}

/* Zeile mit Aufklapper und Zurücksetzen */
.ueb-filterzeile { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.ueb-filterzeile .ueb-feinfilter { margin-top: 0; }
.ueb-zuruecksetzen { flex: 0 0 auto; }
.ff-suche { flex: 1 1 14rem; min-width: 12rem; }
.ff-suche input { width: 100%; font-size: .9rem; padding: .35rem .5rem; }

.ff-bereich { flex: 0 0 auto; }
.ff-bereich input { width: 4.5rem; font-size: .9rem; padding: .35rem .4rem; }

/* Kurzfassung der gesetzten Filter neben dem Aufklapper */
.ff-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ff-chip {
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--akzent-hell);
  border: 1px solid var(--akzent);
  color: var(--akzent);
  font: 700 .72rem/1.3 var(--sans);
  white-space: nowrap;
}
/* Beim Aufklappen verschwindet die Kurzfassung – dann stehen die Felder da */
.ueb-feinfilter[open] + .ff-chips { display: none; }

/* Erfassungsstand auf der Startseite */
.stand-karte { margin-bottom: 1rem; }
.stand-karte.ist-fertig { border-left: 4px solid #3f8f46; }

.stand-satz { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.6; }
.stand-satz strong { font: 700 1.15rem var(--mono); }

.stand-balken {
  height: 10px;
  border-radius: 999px;
  background: #e7edf0;
  overflow: hidden;
}
.stand-balken span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--akzent);
  transition: width .5s ease;
}
.stand-karte.ist-fertig .stand-balken span { background: #3f8f46; }

.stand-zahlen {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--gedimmt);
}
.stand-zahlen strong { font: 700 .95rem var(--mono); color: var(--tinte); }
.stand-zahlen .sz-anteil { margin-left: auto; font-weight: 700; color: var(--akzent); }

/* Hinweisleiste bei gesetztem Filter */
.filter-leiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
  padding: .5rem .7rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gedimmt);
  border-radius: var(--radius);
  background: #f7f9fa;
  font-size: .85rem;
}
.filter-leiste.ist-aktiv {
  border-left-color: var(--akzent);
  background: var(--akzent-hell);
}
.fl-text  { flex: 1 1 14rem; }
.fl-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.fl-tasten { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }

/* Kachel: wer ist gerade angemeldet */
.anwesend-karte { margin-bottom: 1rem; }
.aw-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.aw-kopf h2 { margin: 0; font-size: 1rem; }
.aw-zahl {
  font: 700 .78rem/1 var(--mono);
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--akzent-hell);
  color: var(--akzent);
}

.aw-liste { list-style: none; margin: 0; padding: 0; }
.aw-liste li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linie);
}
.aw-liste li:last-child { border-bottom: 0; }
.aw-liste li.ist-selbst { color: var(--akzent); }
.aw-name  { font-weight: 700; }
.aw-ort   { font-size: .85rem; color: var(--gedimmt); }
.aw-ort strong { font: 700 .9rem var(--mono); color: var(--tinte); }
.aw-dauer { margin-left: auto; font-size: .76rem; color: var(--gedimmt); white-space: nowrap; }

/* ---------- Arbeitsstunden: Tätigkeit und Vorlagen ---------- */

.taetigkeit-reihe { display: flex; gap: .6rem; align-items: stretch; }
.taetigkeit-reihe .feld-taetigkeit { flex: 1 1 50%; min-width: 0; }
.taetigkeit-reihe .feld-taetigkeit textarea { width: 100%; }

.kachel-vorlagen {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  cursor: pointer;
  border: 1px dashed var(--akzent);
  background: var(--akzent-hell);
  color: var(--akzent);
  border-radius: var(--radius);
  padding: .6rem;
}
.kachel-vorlagen:hover { background: #fff; }
.kv-zeichen { font-size: 1.5rem; line-height: 1; }
.kv-text    { font: 700 .78rem/1 var(--sans); }

.vorlagen-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));
}
.vorlagen-ebene[hidden] { display: none; }

.vorlagen-fenster {
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .9rem;
}
.vorlagen-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }

.vorlagen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.vorlagen-kachel {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
  padding: .6rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.vorlagen-kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.vk-titel   { font: 700 .88rem var(--sans); color: var(--tinte); }
.vk-text    { font-size: .76rem; color: var(--gedimmt); line-height: 1.4; }
.vk-stunden { font: 700 .78rem var(--mono); color: var(--akzent); }

/* Verwaltung der Vorlagen */
.vorlage-karte { margin-bottom: .6rem; }
.vorlage-karte.ist-still { opacity: .6; }
.vv-reihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.vv-titel { flex: 1 1 12rem; }
.vv-klein { flex: 0 0 6rem; }
.vv-klein input { width: 100%; }
.vv-text  { display: block; margin-top: .5rem; }
.vv-text input { width: 100%; }
.vv-fuss { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.vv-vorschau { font-size: .8rem; color: var(--gedimmt); font-style: italic; }

@media (max-width: 480px) {
  .taetigkeit-reihe { flex-direction: column; }
  .taetigkeit-reihe .feld-taetigkeit,
  .kachel-vorlagen { flex: 1 1 auto; }
}

/* Stundeneintrag ändern */
.aendern-hinweis {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  padding: .45rem .6rem;
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
}
.aendern-hinweis[hidden] { display: none; }
.stunde-aendern { margin-top: .4rem; }

/* Gesperrte Felder bei den Arbeitsstunden */
.feld-taetigkeit textarea[readonly] {
  background: #f7f9fa;
  cursor: pointer;
  color: var(--tinte);
}
.eingabe-gross.ist-gesperrt {
  background: #f7f9fa;
  cursor: pointer;
  color: var(--gedimmt);
}

/* Der Hinweis „erst Grund wählen“ ist Text, keine Zahl – deshalb
   deutlich kleiner als die 2 rem des Zahlenfeldes. */
.eingabe-gross.ist-gesperrt::placeholder {
  font: 600 .82rem/1 var(--sans);
  letter-spacing: 0;
  color: var(--gedimmt);
  opacity: 1;
}
.eingabe-gross.ist-gesperrt::-webkit-input-placeholder {
  font: 600 .82rem/1 var(--sans);
  letter-spacing: 0;
}

/* Eigener Grund im Vorlagenfenster */
.vorlagen-eigen {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
}
.vorlagen-eigen label { flex: 1; display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; font-weight: 700; color: var(--gedimmt); }
.vorlagen-eigen input { width: 100%; font-size: .95rem; padding: .45rem .5rem; }

/* ---------- Stand der Seite ----------
   Datum der letzten Änderung, dahinter die laufende Nummer. */
.seiten-stand {
  display: block;
  font: 400 9px/1.2 var(--mono);
  letter-spacing: .02em;
  color: var(--gedimmt);
  opacity: .75;
  pointer-events: none;
  user-select: none;
}

/* Titelblock im Kopf: Stand steht als eigene Zeile darüber */
.app-marke .app-mitte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media print { .seiten-stand { display: none; } }

/* Notiz in der Pächterkarte */
.pk-notiz { display: flex; flex-direction: column; gap: .3rem; }
.notiz-form { margin: 0; }
.notiz-form textarea {
  width: 100%;
  font: .95rem/1.5 var(--sans);
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  resize: vertical;
}
.notiz-form .knopfzeile { margin-top: .4rem; }
.notiz-text   { white-space: pre-wrap; }
.notiz-quelle { font-size: .74rem; color: var(--gedimmt); }
.notiz-ok {
  align-self: flex-start;
  font: 700 .72rem/1 var(--sans);
  color: #fff;
  background: var(--akzent);
  padding: .2rem .5rem;
  border-radius: 999px;
}

/* Hinweis auf eine hinterlegte Notiz */
.pk-notizmarke {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  font: 700 .72rem/1.3 var(--sans);
  text-decoration: none;
}
.pk-notizmarke:hover { background: var(--akzent-hell); }

.pk-notiz.hat-notiz { border-left: 3px solid var(--akzent); padding-left: .7rem; }
.k-notizmarke { color: var(--akzent); font-weight: 700; }

/* Notizhinweis auf der Gartenkachel */
.uk-notiz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Speichern und Notiz nebeneinander ---------- */

.speicherzeile { display: flex; gap: 1px; }
.speicherzeile .kachel-speichern { flex: 1; }
.speicherzeile.mit-notiz .kachel-speichern { flex: 2; }   /* zwei Drittel */
.speicherzeile .kachel-notiz    { flex: 1; }              /* ein Drittel  */

.kachel-notiz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  cursor: pointer;
  border: 0;
  background: #eef2f4;
  color: var(--tinte);
}
.kachel-notiz:active { background: #dfe5e9; }
.kn-zeichen { font-size: 1.3rem; line-height: 1; }
.kn-text    { font: 700 .82rem/1 var(--sans); }

/* Liegt eine Notiz vor, blinkt die Schrift rot */
.kachel-notiz.hat-notiz .kn-text {
  color: var(--gefahr);
  animation: notiz-blinken 1.2s ease-in-out infinite;
}
.kachel-notiz.hat-notiz .kn-zeichen { color: var(--gefahr); }

@keyframes notiz-blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .kachel-notiz.hat-notiz .kn-text { animation: none; text-decoration: underline; }
}

/* Notizfenster in der Erfassung */
.notiz-ebene {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 320;
  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));
}
.notiz-ebene[hidden] { display: none; }

.notiz-fenster {
  width: 100%;
  max-width: 26rem;
  background: var(--flaeche);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .9rem;
}
.notiz-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.notiz-fenster textarea {
  width: 100%;
  font: .95rem/1.5 var(--sans);
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  resize: vertical;
}

/* Schnellfilter der Übersicht */
.ueb-schnellfilter { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }

/* Bilder in der Notiz */
.notiz-bildtasten { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 .4rem; }
.notiz-bildtasten .knopf { cursor: pointer; }

.notiz-bilder { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.notiz-bilder:empty { display: none; }

.nb-bild { position: relative; display: inline-block; line-height: 0; }
.nb-bild img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.nb-weg {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--gefahr);
  font: 700 .9rem/1 var(--sans);
  cursor: pointer;
  padding: 0;
}

/* Kamera und Galerie nebeneinander in den Zählerdaten */
.k-fototasten { display: flex; gap: .4rem; align-items: stretch; }
.k-fototasten .k-kamera { flex: 1; text-align: center; }
.k-fototasten.mit-galerie .k-kamera { flex: 1 1 50%; }
.k-galerie { border-style: dashed; }

/* Der Bildbetrachter muss über dem Notizfenster liegen */
.bildschau { z-index: 400; }

/* Bild entfernen in der Pächternotiz */
.nb-wegform { position: absolute; top: -6px; right: -6px; margin: 0; }
.nb-wegform .nb-weg { position: static; }

/* Link zur Selbstablesung in der Pächterkarte */
.pk-link .hinweistext { margin: .1rem 0 .4rem; }
.link-zeile { display: flex; gap: .4rem; align-items: stretch; }
.link-feld {
  flex: 1;
  min-width: 0;
  font: .78rem/1.4 var(--mono);
  padding: .4rem .5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #f7f9fa;
}
.pk-link .knopfzeile { margin-top: .4rem; }

/* Rückmeldung beim Sofortspeichern der Selbstablesung */
.sofort-status {
  display: inline-block;
  margin: .2rem 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
}
.sofort-status[hidden] { display: none; }
.sofort-status.ist-laeuft { color: var(--gedimmt); }
.sofort-status.ist-ok     { color: #2f855a; }
.sofort-status.ist-fehler { color: var(--gefahr); }

.zaehler-feld.ist-gesichert { border-color: #2f855a; background: #f2f9f4; }

.sofort-hinweis { margin: .6rem 0; }

/* Kennzeichen: Wert stammt aus der Selbstablesung */
.k-selbst {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #eaf3fb;
  border: 1px solid #2b6cb0;
  color: #2b6cb0;
  font: 700 .7rem/1.3 var(--sans);
}
.uk-selbst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: .25rem;
  border-radius: 50%;
  background: #2b6cb0;
  color: #fff;
  font: 700 .78rem/1 var(--mono);
}

/* Zustandsspalte in der Gärtentabelle */
.tab-zustand { min-width: 9rem; }
.tab-zchip {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: .1rem .4rem;
  border-radius: 999px;
  font: 600 .7rem/1.4 var(--sans);
  white-space: nowrap;
}
.tab-zchip.ist-ok     { background: #edf7f0; border: 1px solid #3f8f46; color: #2f6b35; }
.tab-zchip.ist-mangel { background: var(--fehler-hell); border: 1px solid var(--gefahr); color: var(--gefahr); }
.tab-leer { color: var(--gedimmt); }