/* ============================================================
   ÜBERGABE by ManniMindset, das App-Eigene

   Die gemeinsame Basis (/app/basis.css) bringt Farben, Kopfzeile, Umschalter,
   Kippschalter, Knoepfe, Werbebanner und Fusszeile mit. Hier steht nur, was
   diese App von ihren Schwestern unterscheidet, und das ist im Kern eines:
   sie ist die erste mit einem richtigen FORMULAR.

   Die Regel der Familie lautet nicht "nichts scrollt", sondern "die SEITE
   scrollt nie, nur ein Bereich in sich". Bei den Schwestern ist das .liste,
   hier ist es .buehne. Damit bleiben Kopfzeile, Schrittanzeige und vor allem
   der Weiter-Knopf immer an ihrem Platz, auch wenn die Tastatur offen ist.
   ============================================================ */

/* Zeilen: Kopf, Schrittanzeige, Buehne (waechst), Navigation. Die Fusszeile ist
   am 31.07.2026 in allen Apps entfallen, deshalb eine auto-Zeile weniger. */
.app {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

/* Die App blendet je nach Anlass ganze Felder aus, und dafuer reicht das
   Merkmal hidden allein NICHT: sobald eine eigene Regel display setzt (und
   .feld setzt grid), gewinnt sie gegen die Vorgabe des Browsers fuer [hidden].
   Genau daran krankte .schirm schon vorher, dort stand die Ausnahme einzeln.
   Hier steht sie einmal fuer alle. */
[hidden] { display: none !important; }

/* ---------- Schirm 0: der Anlass ----------

   Fuenf Zeilen untereinander statt eines Umschalters mit fuenf Segmenten: auf
   einem 360er Bildschirm blieben je 68 px, darin steht kein Wort mehr lesbar.
   Untereinander ist ausserdem Platz fuer den Halbsatz, der die Wahl erklaert,
   und genau der erspart die Rueckfrage. */

.anlass-wahl { display: grid; gap: 8px; }

.anlass {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.anlass:active { transform: scale(.985); }
/* Die gewaehlte Zeile traegt dieselbe Kante wie das offene Protokoll in der
   Liste: ein wiedererkennbares Zeichen fuer "das hier ist es gerade". */
.anlass.hier { border-color: var(--blau); box-shadow: inset 3px 0 0 var(--blau); }

.anlass-zeichen { flex: none; width: 32px; font-size: 26px; line-height: 1; text-align: center; }
.anlass-text { display: grid; gap: 2px; min-width: 0; }
.anlass-name { font-size: 17px; font-weight: 800; }
.anlass-unter { font-size: 14px; line-height: 1.3; color: var(--leise); }

/* ---------- Schrittanzeige ----------

   Sieben Punkte statt sieben Woertern: die Woerter passten auf einem 360er
   Bildschirm nicht nebeneinander, und abgeschnitten sagen sie nichts mehr.
   Der Punkt sagt "wo bin ich", die Zeile darunter sagt "worin bin ich". */

/* Eigener, tieferer Blauton NUR fuer die kleinen Punkte. Grund gemessen:
   Weiss auf --blau (#0091c8) kommt auf 3,57:1, und das reicht erst ab 18,66 px
   fetter Schrift. Die Ziffer im Punkt ist 15 px, also muss der Grund dunkler
   werden: #00719b bringt 5,04:1. Paarweise gesetzt, sonst faellt der
   Dunkelmodus hinten runter.

   Absichtlich in BEIDEN Modi derselbe Wert: ein helleres Blau fuer die Nacht
   waere zwar naeher an der Basis, kaeme aber gegen Weiss nur auf 4,12:1. Gegen
   den dunklen Grund bleiben immer noch 3,7:1, und das reicht fuer eine Flaeche
   ohne Text. */
:root { --blau-tief: #00719b; }

.schritte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 1px;
}

.sp {
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--gedimmt);
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  cursor: default;
  transition: transform .08s ease, background-color .15s ease;
}
/* Besucht heisst anspringbar. Ein Sprung nach vorn in ein leeres Formular
   hilft niemandem, deshalb bleiben die kuenftigen Punkte stumm. */
.sp.war { border-color: var(--blau); color: var(--blau); cursor: pointer; }
.sp.war:active { transform: scale(.9); }
.sp.hier {
  background: var(--blau-tief);
  border-color: var(--blau-tief);
  color: #fff;
  width: 30px;
  height: 30px;
  font-size: 15px;
}
/* Schritt fertig ausgefuellt. Kein Haken aus der Schriftart, sondern ein
   gefuellter Ring: Zeichen wie Haken fehlen auf manchen Android-Schriften. */
.sp.voll { background: var(--blau-tief); border-color: var(--blau-tief); color: #fff; }
.sp.voll.hier { box-shadow: 0 0 0 3px rgba(0, 145, 200, .3); }
/* Mit Weiter uebergangen und weiter leer: gedimmt und dezent durchgestrichen.
   Die Marke verschwindet, sobald im Schritt etwas eingetragen wird. */
.sp.aus { opacity: .45; text-decoration: line-through; }

/* ---------- Das Blatt ----------

   overscroll-behavior contain: sonst zieht ein Wisch am oberen Rand die ganze
   Seite mit, und bei der Unterschrift wird daraus ein Gummiband statt eines
   Strichs. */
.buehne {
  overflow-y: auto;
  min-height: 0;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Waehrend des Unterschreibens wird das Blatt festgestellt. Ohne das scrollt
   ein Strich nach unten die Flaeche unter dem Finger weg. */
.buehne.fest { overflow: hidden; }

.schirm { display: grid; gap: 10px; align-content: start; }
.schirm[hidden] { display: none; }

.s-titel {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.s-zwischen {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--leise);
}
.s-hilfe {
  margin: -4px 0 2px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--leise);
}
/* Kleingedrucktes, aber nicht zu klein: unter 14 px traegt --leise nicht mehr. */
.s-fein {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
}

/* ---------- Formularfelder ----------

   font-size 16px ist Pflicht und keine Geschmacksfrage: iOS Safari zoomt beim
   Antippen in jedes Feld hinein, das kleiner gesetzt ist. Damit waere die Regel
   "die Seite scrollt nie" praktisch aufgehoben, denn ein hineingezoomter
   Bildschirm laesst sich verschieben. */

.feld { display: grid; gap: 4px; }
.f-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
}
.f-name em {
  font-style: normal;
  font-weight: 600;
  color: var(--gedimmt);
  font-size: 13px;
  margin-left: 4px;
}

.feld input,
.feld textarea,
.feld select,
.zz input,
.sig-name {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}
.feld textarea {
  min-height: 120px;
  line-height: 1.4;
  resize: vertical;
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus,
.zz input:focus,
.sig-name:focus {
  outline: none;
  border-color: var(--blau);
}
/* Das Auswahlfeld behaelt bewusst sein eigenes Pfeilchen vom Betriebssystem:
   ohne appearance none sieht man sofort, dass sich hier etwas aufklappt. */
.feld select { padding-right: 8px; }
/* Der eigene Platzhalter darf nicht wie eine Eingabe aussehen. */
::placeholder { color: var(--gedimmt); font-weight: 500; opacity: 1; }

/* Das Datumsfeld bringt auf iOS eigene Innenabstaende mit und wird sonst
   niedriger als alle anderen Felder. */
input[type="date"] { -webkit-appearance: none; appearance: none; }

/* ---------- Zaehler und Schluessel ----------

   Eine Zeile je Zaehler: links der Name, rechts der Kippschalter "gibt es
   nicht". Ist er an, verschwinden die zwei Eingabefelder, statt ausgegraut
   Platz zu kosten. */

/* Der Zaehlerblock steckt in einer eigenen Huelle, weil er bei einem Geraet
   ganz verschwindet. Der Abstand muss dabei derselbe bleiben wie bei den
   Geschwistern im Schirm, deshalb hier noch einmal dasselbe Raster. Dasselbe
   gilt seit dem 31.07.2026 fuer die Schluesselliste: sie gibt es nur noch bei
   der Wohnung und sie verschwindet als Ganzes. */
#zaehlerBlock { display: grid; gap: 10px; align-content: start; }
#schluesselBlock { display: grid; gap: 10px; align-content: start; }

.zk {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
.zk-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.zk-name { font-size: 18px; font-weight: 800; }
.zk-name span { font-size: 14px; font-weight: 600; color: var(--leise); margin-left: 6px; }

/* Kleinere Kippe als in der Basis: hier sitzt sie in einer Kartenzeile und
   nicht als eigenstaendiger Schalter ueber die volle Breite. */
.zk-aus {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
  cursor: pointer;
  white-space: nowrap;
}
.zk-aus .kippe { width: 46px; height: 26px; }
.zk-aus .kippe-knopf { width: 20px; height: 20px; }
.zk-aus[aria-checked="true"] .kippe { background: var(--blau); }
.zk-aus[aria-checked="true"] .kippe-knopf { transform: translateX(20px); }

.zz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zz label { display: grid; gap: 3px; }
.zz .f-name { font-size: 13px; }
.zk.aus .zz { display: none; }

/* Schluesselzeile: Art breit, Anzahl schmal, Papierkorb ganz rechts. */
.sz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 46px;
  gap: 8px;
  align-items: end;
}
.sz .f-name { font-size: 13px; }
.sz label { display: grid; gap: 3px; min-width: 0; }
.sz input { min-height: 50px; }

.weg-knopf {
  min-height: 50px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--warn);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.weg-knopf:active { transform: scale(.94); }

.knopf.mehr {
  min-height: 48px;
  font-size: 17px;
  color: var(--blau);
  border-color: var(--blau);
  border-style: dashed;
}
.knopf.mehr span[aria-hidden] { font-size: 22px; font-weight: 800; }

/* ---------- Bilder ---------- */

.bild-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bild-knoepfe .knopf { font-size: 16px; min-height: 56px; }
.bild-knoepfe .knopf span:not(.knopf-icon) { white-space: normal; line-height: 1.15; }
.bild-knoepfe .knopf-icon { font-size: 22px; }

.bild-zahl {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--leise);
  text-align: center;
}

/* Drei Spalten sind auf dem Handy der beste Kompromiss: man erkennt den Raum
   wieder, und 40 Bilder bleiben ueberschaubar. */
.bildraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 560px) { .bildraster { grid-template-columns: repeat(5, 1fr); } }

.bk { position: relative; }
.bk img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--linie);
}
/* Der Papierkorb sitzt IM Bild, oben rechts, mit dunkler Auflage: auf einem
   hellen Kuechenfoto waere ein graues Zeichen unsichtbar. */
.bk-weg {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bk-nr {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* Mangelkarte: Bild links, Text rechts. Bei sehr schmalen Geraeten untereinander. */
.mk {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
@media (max-width: 360px) { .mk { grid-template-columns: 1fr; } }

.mk img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--linie);
  cursor: pointer;
}
.mk-rechts { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-nr { font-size: 15px; font-weight: 800; color: var(--blau); }
.mk textarea {
  width: 100%;
  min-height: 84px;
  padding: 8px 10px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: vertical;
}
.mk textarea:focus { outline: none; border-color: var(--blau); }
.mk .weg-knopf { min-height: 34px; width: 40px; font-size: 17px; }

/* Grossansicht */
#lupe { padding: 12px; }
#lupe img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  display: block;
}

/* ---------- Unterschrift ----------

   touch-action none ist die wichtigste Zeile der ganzen Datei. Die Basis setzt
   fuer Bedienelemente "manipulation", und das reicht hier NICHT: iOS schiebt
   dann beim Zeichnen die Flaeche mit dem Finger, und es kommt kein Strich
   zustande. */

.sig-block {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
.sig-kopf { display: flex; align-items: center; justify-content: space-between; }
.sig-rolle { font-size: 18px; font-weight: 800; }
.sig-weg {
  border: 0;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.sigpad {
  display: block;
  width: 100%;
  height: 150px;
  border: 2px dashed var(--linie);
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Die Flaeche ist immer weiss, auch im Dunkelmodus: eine Unterschrift ist
   schwarz auf weiss, und genau so wandert sie ins PDF. */
.sigpad.hat { border-style: solid; border-color: var(--blau); }

.sig-gross {
  min-height: 42px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Das freiwillige Foto zur Unterschrift, nur beim Anlass Vereinbarung.
   Kleine Vorschau mit dem bekannten Loesch-Knopf aus dem Bildraster. */
.sig-foto { display: grid; gap: 6px; justify-items: start; }
.sig-foto .knopf { min-height: 44px; font-size: 15px; }
.sig-foto .knopf em { font-style: normal; font-weight: 600; color: var(--gedimmt); }
.sig-foto-schau { position: relative; width: 96px; }
.sig-foto-schau img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--linie);
  cursor: pointer;
}

/* Unterschrift ueber den ganzen Bildschirm. Quer gehalten passt hier ein
   ganzer Namenszug hinein statt dreier Buchstaben. */
.sig-huelle {
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  background: rgba(0, 0, 0, .88);
}
/* Der drehbare Inhalt der Huelle. Im echten Querformat fuellt er die Huelle
   einfach aus, alles bleibt wie es war. */
.sh-dreh {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
}
/* HOCHFORMAT: iOS kennt kein orientation.lock, deshalb dreht die App den
   Inhalt selbst um 90 Grad und tauscht die Masse: die Schreibflaeche wird so
   breit wie der Bildschirm hoch ist. Das Canvas zeichnet dabei weiter in
   seinen Layout-Massen, nur die Zeigerkoordinaten rechnet app.js um
   (sigStift). vh/vw als Rueckfall fuer Browser ohne dvh. */
@media (orientation: portrait) {
  .sig-huelle { padding: 0; }
  .sig-huelle .sh-dreh {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vh - 20px);
    width: calc(100dvh - 20px);
    height: calc(100vw - 20px);
    height: calc(100dvw - 20px);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.sh-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.sh-fertig, .sh-weg {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.sh-fertig { background: var(--blau); border-color: var(--blau); }
.sigpad.gross { flex: 1; height: auto; width: 100%; border-radius: 14px; }

/* ---------- Fertig-Schirm ---------- */

/* Die Abschlussliste zeigt seit dem 31.07.2026 alle aktiven Schritte und ist
   antippbar: jede Zeile springt in ihren Schritt. Deshalb sind die Zeilen
   Knoepfe und brauchen die Knopf-Grundausstattung. */
.pruef { display: grid; gap: 6px; }
.pz {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--karte);
  border: 2px solid var(--linie);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.pz:active { transform: scale(.985); }
.pz-zeichen { flex: none; font-size: 18px; width: 22px; text-align: center; }
.pz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-stand { flex: none; font-size: 13px; font-weight: 700; color: var(--leise); }
.pz.gut { border-color: var(--gruen); color: var(--gruen); }
.pz.gut .pz-zeichen, .pz.gut .pz-stand { color: var(--gruen); }
.pz.fehlt { border-color: var(--warn); color: var(--warn); }
.pz.fehlt .pz-zeichen, .pz.fehlt .pz-stand { color: var(--warn); }
/* Uebersprungen: bewusst leiser als offen, grau statt rot. */
.pz.aus { color: var(--gedimmt); opacity: .8; }
.pz.aus .pz-zeichen, .pz.aus .pz-stand { color: var(--gedimmt); }

.ergebnis { display: grid; gap: 8px; }
.ergebnis.hidden { display: none; }
.erg-zeile {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(23, 134, 74, .12);
  color: var(--gruen);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
/* Der Sicherungs-Knopf ist ein a und braucht die Knopfgestalt zu Fuss. */
a.knopf { text-decoration: none; }
.knopf.hidden { display: none; }

.rechtsblock {
  margin-top: 4px;
  padding: 12px;
  border-radius: 12px;
  background: var(--karte);
  border: 1px solid var(--linie);
}
.rechtsblock p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--leise); }
.rechtsblock p:last-child { margin-bottom: 0; }
.rechtsblock b { color: var(--text); }

.knopf.loeschen {
  min-height: 46px;
  font-size: 16px;
  color: var(--warn);
  border-color: var(--linie);
}

/* ---------- Navigation ----------

   Feste Zeile unter dem Blatt. Rechts steht, WOHIN es geht ("Weiter: Zähler"),
   nicht bloss "Weiter": das nimmt dem Formular die Ungewissheit, wie lang es
   noch dauert. */

.navi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }

.n-zurueck, .n-weiter {
  min-height: 54px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  /* 19 px und nicht 18: Weiss auf PIG-Blau kommt nur auf 3,57:1, und das ist
     erst ab 18,66 px fetter Schrift zulaessig. Steht so auch in der Basis. */
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  transition: transform .08s ease, filter .08s ease;
  touch-action: manipulation;
}
.n-zurueck:active, .n-weiter:active { transform: scale(.97); filter: brightness(1.15); }
.n-weiter { background: var(--blau); border-color: var(--blau); color: #fff; }
.n-weiter span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-zurueck:disabled { opacity: .4; }
.n-zurueck span:last-child { font-size: 17px; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 700px) {
  .s-titel { font-size: 20px; }
  .n-zurueck, .n-weiter { min-height: 50px; }
  /* Nur der Zurueck-Knopf darf kleiner werden: er traegt dunkle Schrift auf
     heller Flaeche. Beim blauen Weiter-Knopf bleibt es bei 19 px, sonst wird
     Weiss auf Blau unlesbar. */
  .n-zurueck { font-size: 17px; }
  .sigpad { height: 120px; }
  .schritte { gap: 5px; }
  .sp { width: 24px; height: 24px; font-size: 12px; }
  .sp.hier { width: 28px; height: 28px; font-size: 14px; }
}

/* ============================================================
   DEINE PROTOKOLLE (31.07.2026)

   Ein Fenster ueber der App, kein eigener Schirm. Die Liste kann lang werden,
   deshalb scrollt sie in sich und nicht die Seite: die Kopfzeile mit dem
   Schliessen-Knopf und der Knopf "Neues Protokoll" muessen immer erreichbar
   bleiben, sonst ist man in einer Liste gefangen, aus der man nicht mehr
   herauskommt.
   ============================================================ */

.kasten-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 82 statt 100 Prozent: darueber bleibt ein Streifen der App sichtbar, und
     man sieht, dass man in einem Fenster steht und nicht auf einer neuen
     Seite. */
  max-height: 82dvh;
  text-align: left;
}

.pl-kopf { display: flex; align-items: center; gap: 10px; }
.pl-kopf h2 { flex: 1; min-width: 0; margin: 0; }

.pl-zu {
  flex: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.pl-zu:active { transform: scale(.94); }

/* DAS EINZIGE, WAS HIER SCROLLT. min-height 0, sonst waechst der Kasten ueber
   seine max-height hinaus, statt innen zu scrollen. */
.pl-liste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-zeile {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
/* Das gerade offene Protokoll traegt eine Kante in der Markenfarbe. Ohne sie
   sucht man in einer Liste aus fuenf Wohnungen, in welcher man gerade steckt. */
.pl-zeile.offen { border-color: var(--blau); box-shadow: inset 3px 0 0 var(--blau); }

.pl-oeffnen {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.pl-oeffnen:active { background: rgba(0, 145, 200, .08); }

.pl-titel {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  /* Eine Adresse ist laenger als jedes Handy breit ist. Abschneiden statt
     umbrechen: sonst ist eine Zeile zweizeilig und die naechste nicht, und die
     Liste wirkt unruhig. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-unter { font-size: 13px; color: var(--leise); }

.pl-weg {
  flex: none;
  width: 46px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--linie);
  background: none;
  color: var(--leise);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pl-weg:active { background: rgba(192, 57, 43, .12); color: var(--rot, #c0392b); }

.pl-leer { margin: 0; padding: 18px 4px; color: var(--leise); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .pl-zu:active { transform: none; }
}