/* ============================================================
   QUITTUNG by ManniMindset, das App-Eigene

   Die gemeinsame Basis (/app/basis.css) bringt Farben, Kopfzeile, Umschalter,
   Knoepfe, Werbeflaeche, Begruessung und das Blatt mit. Hier steht nur, was
   diese App von ihren Schwestern unterscheidet, und das ist im Kern eines:

   SIE IST DER KLASSISCHE QUITTUNGSVORDRUCK.

   Nicht "sieht ein bisschen nach Papier aus", sondern der Vordruck selbst,
   Zeile fuer Zeile in der bekannten Anordnung (Manni, 31.07.2026, mit Vorlage):

       ┌──────────────────────────────── Quittung ┐
       │            │ Netto EUR                   │
       │  (Muster)  ├─────────────────────────────┤
       │            │ + 19 % MwSt. EUR            │
       ├────────────┼─────────────────────────────┤
       │ Nr.        │ Gesamt EUR                  │
       ├────────────┴─────────────────────────────┤
       │ EUR in Worten                            │
       ├──────────────────────────────────────────┤
       │ von                                      │
       ├──────────────────────────────────────────┤
       │ für                                      │
       ├──────────────────────────────────────────┤
       │                        dankend erhalten. │
       ├────────────────────┬─────────────────────┤
       │ Ort                │ Datum               │
       ├────────────────────┼─────────────────────┤
       │ Buchungsvermerke   │ Stempel/Unterschrift│
       └────────────────────┴─────────────────────┘

   Warum das mehr ist als Zierat: jeder in Deutschland hat dieses Formular
   schon einmal in der Hand gehabt. Wer es wiedererkennt, braucht keine
   Anleitung, und wer die Quittung bekommt, erkennt sie als Quittung. Der
   Aufbau ist deshalb DERSELBE wie im PDF, damit man beim Ausfuellen schon
   sieht, was hinterher herauskommt.

   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 und vor allem der PDF-Knopf
   immer an ihrem Platz, auch wenn die Tastatur offen ist.
   ============================================================ */

/* ---------- Papier und Formularfarben ----------

   Papier ist Papier, auch im Dunkelmodus. Dieselbe Entscheidung wie bei der
   Unterschriftsflaeche der Schwester ÜBERGABE, und aus demselben Grund: eine
   Quittung ist dunkle Schrift auf hellem Grund, und genau so wandert sie ins
   PDF. Ein dunkler Vordruck waere eine Vorschau, die luegt.

   Im Dunkeln wird der Bogen aber gedaempft, sonst blendet eine handtellergrosse
   weisse Flaeche nachts im Hausflur.

   PAARWEISE gesetzt, so wie es die Basis verlangt. Wer nur den Hellwert
   aendert, hat den Dunkelmodus kaputtgemacht und merkt es erst abends. */
:root {
  --papier:   #ffffff;
  --tinte:    #12151b;
  --q-blau:   #00719b;   /* Beschriftungen und das Wort "Quittung" */
  --q-linie:  #74b4cf;   /* die Rasterlinien des Formulars */
  --q-fuell:  #daedf6;   /* die hinterlegten Zellen */
  --q-leise:  #4b7d92;
}
/* --blau-tief ist am 02.08.2026 ersatzlos entfallen. Es war ein tieferer
   PIG-Blauton, den die Bedienknoepfe brauchten, weil Weiss auf dem hellen
   PIG-Blau nur 3,57:1 erreichte. Die Bedienung sitzt jetzt auf Amber und
   traegt dunkle Schrift (--auf-akzent), damit erledigt sich der Sonderton. */

@media (prefers-color-scheme: dark) {
  :root {
    --papier:   #eceadf;
    --tinte:    #12151b;
    --q-blau:   #005a7c;
    --q-linie:  #5c9cb8;
    --q-fuell:  #cfe2ec;
    /* Von #3d6b7e auf #35606f nachgezogen (02.08.2026): der Hinweistext in der
       Betragszelle kam auf --q-fuell nur auf 4,37:1 und lag damit knapp unter
       den geforderten 4,5:1. Jetzt sind es 5,1:1. */
    --q-leise:  #35606f;
  }
}

/* ---------- Der grüne Vordruck ----------

   Es gibt in Deutschland zwei Quittungsbloecke, die praktisch jeder kennt: den
   blauen mit dem Rautenmuster im Kopf und dem Wort rechts oben, und den
   gruenen im Zweckform-Zuschnitt mit dem Wort links oben und ohne Muster
   (Manni, 31.07.2026, mit beiden Vorlagen).

   Die Umschaltung laeuft ueber data-design am Vordruck und setzt NUR die vier
   Formularfarben neu. Alles Uebrige, Raster wie Zellen, greift auf dieselben
   Variablen zu und geht automatisch mit: eine dritte Farbe waere damit vier
   Zeilen Arbeit.

   Das Gruen ist das --gruen der Familie (#17864a), nicht ein neuer Ton: es
   sitzt nah genug am gedruckten Block und die App bleibt bei ihren Farben. */
.vordruck[data-design="gruen"] {
  --q-blau:  #17864a;
  --q-linie: #74ae88;
  --q-fuell: #e2efe6;
  --q-leise: #457658;
}
@media (prefers-color-scheme: dark) {
  .vordruck[data-design="gruen"] {
    --q-blau:  #116137;
    --q-linie: #5c9a72;
    --q-fuell: #d7e7dc;
    --q-leise: #3a6349;
  }
}
/* Der gruene Block traegt das Wort links und hat kein Sicherheitsmuster. */
.vordruck[data-design="gruen"] .q-kopf { justify-content: flex-start; }
.vordruck[data-design="gruen"] .q-kopf,
.vordruck[data-design="gruen"] .q-muster { background-image: none; }

/* ---------- Die Schrift des Ausgefüllten ----------

   Gemeint ist die Schrift der EINGETRAGENEN WERTE, nicht die des Vordrucks.
   Der Vordruck ist gedruckt und bleibt, wie er ist; hineingeschrieben wird mit
   dem, was gerade zur Hand ist.

   Die Schreibschrift kommt aus dem GERAET und wird nicht mitgeliefert: die
   schoenen Handschriften auf Windows und macOS (Segoe Script, Bradley Hand,
   Snell Roundhand) darf man nicht auf einer Webseite ausliefern. Fehlen sie
   alle, greift das allgemeine cursive des Browsers. */
.vordruck { --wert-schrift: inherit; --wert-fett: 600; --wert-gross: 1; }

.vordruck[data-schrift="schreib"] {
  --wert-schrift: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive;
  --wert-fett: 600;
  /* Schreibschriften laufen kleiner als ihre Kegelgroesse, sonst wirken sie
     verloren neben der gedruckten Beschriftung. */
  --wert-gross: 1.14;
}
.vordruck[data-schrift="maschine"] {
  --wert-schrift: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
  --wert-fett: 700;
  --wert-gross: .94;
}
.vordruck[data-schrift="kraeftig"] {
  --wert-schrift: inherit;
  --wert-fett: 800;
  --wert-gross: 1;
}

/* Zeilen: Kopf, Buehne (waechst), Navigation. Kein Schrittwerk, keine
   Fusszeile. */
.app {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* ---------- Die Buehne ----------

   overscroll-behavior contain: sonst zieht ein Wisch am oberen Rand die ganze
   Seite mit, und beim Unterschreiben wird daraus ein Gummiband statt eines
   Strichs. */
.buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* max-content, NICHT auto: Kinder, die selbst Scroll-Container sind (der
     Vordruck mit overflow hidden, die Anlass-Reihe mit overflow-x), melden in
     einer auto-Zeile die Innenhoehe 0 und fallen auf ihre Raender zusammen.
     Genau so war am 31.07.2026 der ganze Vordruck 2 px hoch und "schimmerte
     nur hervor" (Manni, live entdeckt). */
  grid-auto-rows: max-content;
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Waehrend des Unterschreibens wird die Buehne festgestellt. Ohne das scrollt
   ein Strich nach unten die Flaeche unter dem Finger weg. */
.buehne.fest { overflow: hidden; }

/* ---------- Die Anlaesse ----------

   Eine waagerecht scrollende Reihe statt eines Umschalters: fuenf Woerter wie
   "Privatverkauf" nebeneinander ergeben auf 360 px vier Buchstaben je Feld.
   Gewischt wird ohnehin, und die erste Karte steht vorausgewaehlt da. */
.anlaesse {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.anlaesse::-webkit-scrollbar { display: none; }

.anlass {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease, background-color .15s ease;
}
.anlass:active { transform: scale(.96); }
.anlass[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.anlass-zeichen { font-size: 18px; }

.anlass-hilfe {
  margin: -6px 4px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
}

/* ============================================================
   DER VORDRUCK
   ============================================================ */

.vordruck {
  position: relative;
  display: grid;
  /* Platz fuer den senkrechten Markenstreifen am linken Rand, wie ihn die
     gedruckten Bloecke tragen. */
  padding-left: 21px;
  background: var(--papier);
  color: var(--tinte);
  border: 1.5px solid var(--q-linie);
  border-radius: 3px;
  overflow: hidden;
  /* Der Bogen liegt AUF der Flaeche, er ist nicht Teil von ihr. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 22px rgba(0, 0, 0, .12);
}
/* Jede Zeile des Formulars bekommt ihre Rasterlinie, die erste nicht. */
.vordruck > * { border-top: 1px solid var(--q-linie); min-width: 0; }
.vordruck > .q-kopf { border-top: 0; }

/* Der senkrechte Streifen. Von unten nach oben zu lesen, so steht er auf dem
   Vordruck auch. */
.q-marke {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-right: 1px solid var(--q-linie);
  background: var(--papier);
  color: var(--q-leise);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  pointer-events: none;
}

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

   Das Wort steht rechts oben und ist gross. Dahinter das feine Rautenmuster
   des Sicherheitsdrucks: zwei gekreuzte Schraffuren, sehr blass. Es ist der
   Zug, der aus einem Kasten mit Linien einen Vordruck macht. */
.q-muster, .q-kopf {
  background-image:
    repeating-linear-gradient(45deg,  var(--q-fuell) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--q-fuell) 0 1px, transparent 1px 7px);
}

.q-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 10px 4px;
}
.q-titel {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
  color: var(--q-blau);
}

/* ---------- Betrag und Nummer ----------

   Zwei Spalten: links das Musterfeld und darunter die Nummer, rechts der
   Betragskasten mit einer bis drei Zeilen. Wie viele es sind, entscheidet die
   Umsatzsteuer, deshalb baut app.js diesen Teil. */
.q-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.q-muster { grid-column: 1; grid-row: 1; }
.q-nr     { grid-column: 1; grid-row: 2; border-top: 1px solid var(--q-linie); }
.q-betrag {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-content: stretch;
  border-left: 1px solid var(--q-linie);
}
.q-betrag > * + * { border-top: 1px solid var(--q-linie); }

/* Eine Betragszeile: Beschriftung links, Zahl rechts, alles in einer Zeile.
   Genau so steht es auf dem Vordruck. */
.q-bz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding: 4px 9px;
  background: var(--q-fuell);
}
.q-bz .q-label { flex: none; }
.q-bz output, .q-bz input {
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tinte);
  font-family: var(--wert-schrift);
  /* 16 px 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. Deshalb ist der
     kleinste Wert hier calc(17px * .94) = 16 px und keinen Punkt weniger. */
  font-size: calc(18px * var(--wert-gross));
  font-weight: var(--wert-fett);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.q-bz.summe { min-height: 52px; }
.q-bz.summe input, .q-bz.summe output { font-size: calc(22px * var(--wert-gross)); }
.q-bz input:focus { outline: none; }
.q-bz.eingabe { box-shadow: inset 0 0 0 2px var(--q-blau); }

/* ---------- Die Zellen des Formulars ---------- */

.q-zelle {
  display: grid;
  gap: 1px;
  align-content: start;
  padding: 5px 9px 7px;
  min-width: 0;
}
.q-zelle.fuell { background: var(--q-fuell); }

.q-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.2;
  color: var(--q-blau);
}
.q-label em {
  font-style: normal;
  font-weight: 600;
  opacity: .75;
  margin-left: 4px;
}

/* Erklaerzeile unter einem Label (Stempelfeld): beantwortet, WER dort
   gemeint ist. Eigenes Element statt em im Label, weil app.js das Label
   per textContent designabhaengig neu setzt und ein em dabei stuerbe. */
.q-wer {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--q-leise);
  margin: -1px 0 2px;
}

.q-zelle input,
.q-zelle textarea,
.q-stempel-feld {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 1px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tinte);
  font-family: var(--wert-schrift);
  font-size: calc(18px * var(--wert-gross));
  font-weight: var(--wert-fett);
  -webkit-appearance: none;
  appearance: none;
}
.q-zelle textarea { min-height: 52px; line-height: 1.3; resize: none; }
.q-zelle input:focus,
.q-zelle textarea:focus,
.q-stempel-feld:focus { outline: none; background: rgba(255, 182, 30, .18); }

/* Der eigene Platzhalter darf nicht wie eine Eingabe aussehen. Auf Papier
   braucht er einen eigenen Ton, --gedimmt der Basis waere hier fast weiss. */
.vordruck ::placeholder { color: var(--q-leise); opacity: .55; font-weight: 500; }

/* SECHZEHN PIXEL SIND DER BODEN, und zwar in jeder der drei Schriften. Die
   Schreibmaschine laeuft mit dem Faktor 0,94, und aus 16 px wurden damit 15,04:
   gemessen, und genau darunter zoomt iOS Safari beim Antippen in das Feld
   hinein. Damit waere die Regel "die Seite scrollt nie" praktisch aufgehoben,
   denn ein hineingezoomter Bildschirm laesst sich verschieben.
   max() statt einer festen Zahl, damit die Schreibschrift ihre 18 px behaelt. */
.q-nr input,
.q-unterzeile input,
.q-stempel-feld { font-size: max(16px, calc(17px * var(--wert-gross))); }

/* Die Nummer steht nebeneinander, sie ist kurz. */
.q-nr { display: flex; align-items: center; gap: 8px; }

/* Nachgeordnete Zeile, kleiner gesetzt: die Anschrift des Zahlers gehoert zu
   "von" und soll die Zeile darueber nicht ueberstrahlen. */
.q-unterzeile input { min-height: 30px; }
.q-unterzeile { padding-top: 3px; padding-bottom: 5px; }

/* Die Zusatzfelder des Anlasses. Sie sind Zeilen des Formulars wie alle
   anderen, deshalb bekommen sie untereinander dieselbe Rasterlinie. Leer
   duerfen sie KEINE Linie ziehen: eine Zeile ohne Inhalt sieht aus wie ein
   Feld, das man vergessen hat. */
#extraFelder:empty { display: none; }
#extraFelder > * + * { border-top: 1px solid var(--q-linie); }

/* Der Kippschalter der Basis bringt Karte, Rahmen und Rundung mit. Im
   Formular waere das ein Fremdkoerper, hier bleibt nur der Schalter selbst. */
.q-kippe {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 46px;
  padding: 4px 9px;
}
.q-kippe .kz-titel { font-size: 15px; color: var(--tinte); white-space: normal; }
.q-kippe .kippe { background: var(--q-linie); }
.q-kippe[aria-checked="true"] .kippe { background: var(--q-blau); }

/* Der Betrag in Worten. Ausgabe, kein Feld: er wird gelesen, nicht
   geschrieben. */
.q-worte {
  display: block;
  min-height: 26px;
  font-family: var(--wert-schrift);
  font-size: calc(18px * var(--wert-gross));
  font-weight: var(--wert-fett);
  line-height: 1.3;
  color: var(--tinte);
  overflow-wrap: anywhere;
}
.q-worte.leer {
  font-family: inherit;
  color: var(--q-leise);
  font-size: 15px;
  font-weight: 500;
}

/* Das Empfangsbekenntnis. Rechtsbuendig wie auf dem Vordruck. */
.q-dank {
  text-align: right;
  padding: 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinte);
}

.q-zeile-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.q-zeile-zwei > * + * { border-left: 1px solid var(--q-linie); }

/* ---------- Der Fuss ---------- */

.q-fuss { display: grid; grid-template-columns: minmax(0, 1fr); }
.q-fuss > * + * { border-top: 1px solid var(--q-linie); }
@media (min-width: 560px) {
  .q-fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .q-fuss > * + * { border-top: 0; border-left: 1px solid var(--q-linie); }
}

.q-stempel {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 5px 9px 8px;
  min-width: 0;
}
.q-stempel-feld { min-height: 32px; }
.q-stempel-feld.hidden { display: none; }

.sigpad {
  display: block;
  width: 100%;
  height: 118px;
  margin-top: 2px;
  border: 1px dashed var(--q-linie);
  border-radius: 0;
  /* Immer weiss, auch im Dunkelmodus: eine Unterschrift ist schwarz auf weiss,
     und genau so wandert sie ins PDF.
     touch-action none ist die wichtigste Zeile der ganzen Datei: die Basis
     setzt fuer Bedienelemente "manipulation", und das reicht NICHT. iOS
     schiebt sonst beim Zeichnen die Flaeche mit dem Finger, und es kommt gar
     kein Strich zustande. */
  background: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sigpad.hat { border-style: solid; border-color: var(--q-blau); }

.sig-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sig-gross, .sig-weg {
  min-height: 38px;
  border: 1px solid var(--q-linie);
  border-radius: 6px;
  background: transparent;
  color: var(--q-blau);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 12px;
}
.sig-weg { color: var(--q-leise); }

/* Unterschrift ueber den ganzen Bildschirm. Quer gehalten passt ein ganzer
   Namenszug hinein statt dreier Buchstaben. */
.sig-huelle {
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  background: rgba(0, 0, 0, .88);
}
.sh-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.sh-fertig, .sh-weg {
  flex: none;
  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: 0; border-radius: 12px; margin: 0; }

/* ============================================================
   WAS NICHT AUF DEM PAPIER STEHT
   ============================================================ */

.einstellung { display: grid; gap: 6px; }
.e-name {
  padding-left: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
}
.umschalter.hidden { display: none; }
.umschalter .segment { min-height: 46px; font-size: 17px; }
.umschalter.klein-um .segment { min-height: 42px; font-size: 15px; }

.ust-hinweis {
  margin: 0;
  padding: 0 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--leise);
}
.ust-hinweis:empty { display: none; }
.ust-hinweis.achtung { color: var(--warn); font-weight: 700; }

/* ---------- Pruefung, Recht, Aufraeumen ---------- */

.pruef { display: grid; gap: 5px; }
.pz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--karte);
  border: 2px solid var(--linie);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}
.pz-zeichen { flex: none; font-size: 17px; width: 20px; text-align: center; }
.pz.fehlt { border-color: var(--warn); color: var(--warn); }

.rechtsblock {
  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); }

/* ---------- Fotos (31.07.2026) ---------- */
.foto-reihe { display: flex; gap: 8px; margin: 4px 0 6px; }
.foto-reihe:empty { display: none; }
.foto-kachel { position: relative; width: 31%; max-width: 120px; }
.foto-kachel img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--linie);
}
.foto-weg {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  /* Stand hier als var(--rot), und den Namen gibt es weder in dieser Datei
     noch in der Basis: der Knopf war also durchsichtig statt rot. Beim
     Umstellen aufgefallen (02.08.2026). */
  background: var(--warn);
  color: var(--auf-warn);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.foto-knopf { width: 100%; }
.rechtsblock p:last-child { margin-bottom: 0; }
.rechtsblock b { color: var(--text); }
.rechtsblock a { color: var(--akzent-text); }

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

/* ---------- Das Ergebnis im Blatt ---------- */

.erg-zeile {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(63, 201, 138, .14);
  color: var(--gruen);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.erg-fein { margin: 0; font-size: 14px; line-height: 1.45; color: var(--leise); }
a.knopf { text-decoration: none; }
.knopf.hidden { display: none; }
.erg-knoepfe { display: grid; gap: 8px; }

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

   Eine Handlung, ein Knopf. Links daneben nur der Weg in die Liste, und der
   traegt bewusst kein Wort: er ist der Nebenausgang, nicht das Ziel. */

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

.n-liste, .n-pdf {
  min-height: 56px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  /* 20 px bleiben, auch wenn die alte Begruendung entfallen ist: sie lautete,
     Weiss auf PIG-Blau komme nur auf 3,57:1 und sei erst ab 18,66 px zulaessig.
     Auf Amber steht jetzt dunkle Schrift mit ueber 11:1. Gross bleibt der Knopf
     trotzdem, er ist die eine Handlung dieses Bildschirms. */
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  transition: transform .08s ease, filter .08s ease;
  touch-action: manipulation;
}
.n-liste { width: 60px; padding: 0; font-size: 24px; }
.n-pdf { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.n-liste:active { transform: scale(.97); filter: brightness(1.15); }
/* Gedrueckt wird die Amber-Flaeche satter statt heller: Aufhellen laesst sie
   ins Weissliche kippen und die dunkle Schrift darauf flimmern. */
.n-pdf:active { transform: scale(.97); background: var(--akzent-satt); border-color: var(--akzent-satt); }
.n-pdf:disabled { opacity: .55; }

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

@media (max-height: 700px) {
  .q-titel { font-size: 23px; }
  .q-bz { min-height: 42px; }
  .q-bz.summe { min-height: 46px; }
  .sigpad { height: 96px; }
  .n-liste, .n-pdf { min-height: 50px; font-size: 18px; }
  .anlass { min-height: 40px; font-size: 15px; }
}

@media (max-width: 340px) {
  .q-label { font-size: 10.5px; }
  .q-zelle { padding-left: 7px; padding-right: 7px; }
  .q-bz { padding-left: 7px; padding-right: 7px; }
  .q-bz output, .q-bz input { font-size: 16px; }
  .q-bz.summe input, .q-bz.summe output { font-size: 19px; }
}

/* ============================================================
   DEINE QUITTUNGEN

   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 "Neue Quittung" 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;
}
/* Die gerade offene Quittung traegt eine Kante in der Markenfarbe. Ohne sie
   sucht man in einer Liste aus zehn Belegen, in welchem 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: 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.pl-oeffnen:active { background: rgba(255, 182, 30, .12); }

.pl-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.pl-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-betrag { flex: none; font-variant-numeric: tabular-nums; color: var(--blau); }
.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(--warn); }

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

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