/* ============================================================
   AufTeilen by ManniMindset: was diese App eigen macht.

   Eingebunden NACH /app/basis.css. Alles, was hier nicht steht, kommt von
   dort: Kopfzeile, Umschalter, Karten, Knoepfe, Blatt, Toast, Werbestreifen.

   FARBREGEL DER FAMILIE: eigene Farben bekommen eigene Namen, die in der
   Basis nicht vorkommen, und JEDE davon steht paarweise da, hell und dunkel.
   Ein @media erhoeht die Spezifitaet nicht: wer nur den Hellwert setzt, hat
   den Dunkelmodus kaputtgemacht und merkt es erst abends.
   ============================================================ */

:root {
  --at-plus:      #17864a;   /* Guthaben, du bekommst */
  --at-minus:     #c02626;   /* Schuld, du zahlst */
  --at-pille:     #0091c8;   /* die leuchtende Pille */
  --at-auf-pille: #ffffff;
  --at-blitz:     rgba(0, 145, 200, .22);   /* das Aufblitzen eines neuen Postens */
  --at-code:      #eef7fb;   /* der Kasten mit dem Zugangscode */
  --at-erlassen:  #b4780a;   /* erlassen statt bezahlt, kein Geld geflossen */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Im Dunkeln braucht Gruen mehr Helligkeit und Rot weniger Saettigung,
       sonst flimmert es. Dieselben Werte nutzt die Basis fuer --gruen/--warn. */
    --at-plus:      #3ddc84;
    --at-minus:     #ff6b6b;
    --at-pille:     #38b6e4;
    --at-auf-pille: #08131a;
    --at-blitz:     rgba(56, 182, 228, .26);
    --at-code:      #12222b;
    --at-erlassen:  #e8b923;
  }
}

/* Das Zeilenraster dieser App. Die Ebenen liegen uebereinander, immer ist
   genau eine sichtbar, deshalb reicht eine flexible Zeile. */
.app {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ebene {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* Die SEITE scrollt nie, nur diese Innenflaeche. Familienregel, und der
   Grund, warum die Kopfzeile beim Blaettern nie weglaeuft. */
.scrollraum {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 8px;
}

.ebene.hidden { display: none; }

/* Die Ebene mit dem Bereich hat drei Zeilen: Umschalter, Liste, Knopf. */
#ebeneBereich { grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }

/* ---------- Einstieg ---------- */

.einstieg-satz {
  margin: 6px 4px 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--leise);
}

.oder {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gedimmt);
  font-size: 14px;
}
.oder::before, .oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

/* ---------- Felder ----------

   Nichts unter 26 px in der Hauptflaeche, so steht es in der Formensprache
   der Familie. Bei Eingabefeldern kommt ein zweiter Grund dazu: iOS zoomt in
   jedes Feld hinein, dessen Schrift kleiner als 16 px ist, und kommt danach
   nicht von selbst wieder heraus. */

.feldblock { display: flex; flex-direction: column; gap: 5px; }

.feldname { font-size: 16px; font-weight: 700; }

.feldhilfe {
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
}

.feld {
  width: 100%;
  padding: 14px 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
}
.feld:focus {
  outline: none;
  border-color: var(--blau);
}
.gross-feld { font-size: 19px; padding: 16px 14px; }
.feld-mehrzeilig { resize: vertical; min-height: 96px; line-height: 1.5; }

/* Der Honigtopf. Nicht display:none: manche Automaten pruefen darauf und
   lassen solche Felder dann in Ruhe. So steht er im Bild, nur eben weit
   ausserhalb. */
.weit-weg {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.knopf.gross { min-height: 62px; font-size: 19px; }

.knopf.zurueck {
  background: transparent;
  border-color: var(--linie);
  color: var(--leise);
}

.hinweis {
  margin: 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--leise);
}

.abschnitt {
  margin: 4px 4px 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Der Bereichsname in der Kopfzeile ist ein Knopf und soll trotzdem aussehen
   wie die Beschriftung, die er in den anderen Apps ist. Deshalb hier alles
   abraeumen, was ein Knopf sonst mitbringt, und nur einen dezenten Hinweis
   stehen lassen, dass man darauf tippen kann. */
.kopf-menue {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.kopf-menue.tippbar::after {
  content: " ▾";
  color: var(--blau);
  font-weight: 800;
}

/* ---------- Meine Bereiche ---------- */

.meine { display: flex; flex-direction: column; gap: 8px; }

/* Ohne diese Zeile bleibt der Kasten sichtbar, obwohl er das Attribut hidden
   traegt: eine eigene display-Angabe schlaegt die eingebaute Regel des
   Browsers. Beim ersten Start stand deshalb die Ueberschrift "Deine Bereiche
   auf diesem Gerät" ueber einer leeren Flaeche. Gilt genauso fuer die Pille,
   siehe weiter unten. */
.meine[hidden] { display: none; }
.meine-liste { display: flex; flex-direction: column; gap: 6px; }

.meine-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-name { font-size: 17px; font-weight: 700; }
.me-unter { font-size: 13px; color: var(--leise); }
.me-pfeil { flex: none; font-size: 20px; font-weight: 700; color: var(--gedimmt); }

/* ---------- Der Zugangscode ---------- */

.jubel { margin: 8px 4px 0; font-size: 26px; font-weight: 800; }
.jubel-unter { margin: 0 4px; font-size: 17px; color: var(--leise); }

.codekasten {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  border: 2px solid var(--blau);
  border-radius: 16px;
  background: var(--at-code);
  text-align: center;
}
.codename {
  font-size: 13px;
  font-weight: 800;
  color: var(--blau);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.code {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .4px;
  word-break: break-word;
  line-height: 1.3;
}
.codehilfe { font-size: 14px; color: var(--leise); }

.netz-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Die zwei Wege auf dem Startbildschirm ---------- */

.weg-kasten {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--karte);
}
.weg-titel { margin: 0; font-size: 18px; font-weight: 800; }
.weg-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--leise); }

/* ---------- Die drei Code-Felder ----------

   Drei gleich breite Felder mit einem Bindestrich dazwischen. Die Striche
   sind reine Zeichen und werden nie getippt: die App setzt sie beim
   Zusammenbauen.

   min-width: 0 ist Pflicht, sonst wird jedes Feld so breit wie sein
   Platzhalter und die Reihe sprengt auf schmalen Handys die Breite. */
.code-felder {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.code-teil {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.code-strich {
  flex: none;
  font-size: 20px;
  font-weight: 800;
  color: var(--gedimmt);
}

/* Auf sehr schmalen Geräten (320 px) wird es sonst zu eng zum Lesen. */
@media (max-width: 360px) {
  .code-teil { font-size: 16px; padding-left: 2px; padding-right: 2px; }
  .code-felder { gap: 2px; }
}

/* ---------- Der Umschalter mit vier Feldern ----------

   Die Basis rechnet den gleitenden Markierer auf drei Segmente aus. Mit dem
   vierten (Leute) muss seine Breite mit, sonst steht er immer ein Stück
   daneben. */
.umschalter.vier .markierer { width: 25%; }

/* Beschriftung MITTIG (Manni, 02.08.2026: "Zentriere die Texte in den
   Auswahl-Buttons, besonders oben von Ausgabe bis Leute"). Die Basis richtet
   sie links aus, und bei vier verschieden langen Woertern sieht das aus, als
   waere die Leiste verrutscht. */
.umschalter.vier .segment {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
@media (max-width: 380px) {
  .umschalter.vier .segment { font-size: 14px; padding-left: 2px; padding-right: 2px; }
}
/* Auf sehr schmalen Geraeten (iPhone SE, 320 px) passt "Ausgleich" sonst
   nicht mehr in ein Viertel der Breite und bricht um. */
@media (max-width: 340px) {
  .umschalter.vier .segment { font-size: 13px; letter-spacing: -.2px; }
}

/* ---------- Die eine Zahl über der Liste ---------- */

.kopfzahl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--karte);
  border: 1px solid var(--linie);
}
.kopfzahl[hidden] { display: none; }
.kopfzahl-was { font-size: 14px; font-weight: 700; color: var(--leise); }
.kopfzahl-wert { font-size: 21px; font-weight: 800; }

/* ---------- Die grosse Fassung im Ausgleich ----------

   Manni, 02.08.2026: "Der noch offen Bereich unter Ausgleich könnte schöner
   dargestellt sein." Das ist die Zahl, auf die der ganze Abend hinauslaeuft,
   also bekommt sie eine eigene Karte statt einer schmalen Zeile: gross,
   mittig, mit der Zahl der noetigen Ueberweisungen darunter. */
.kopfzahl.gross {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 14px 14px;
  border-width: 2px;
}
.kopfzahl.gross .kopfzahl-was {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.kopfzahl.gross .kopfzahl-wert {
  font-size: 34px;
  line-height: 1.1;
}
/* Der Zusatz haengt am Wert und braucht deshalb kein eigenes Element im
   HTML: was drinsteht, entscheidet allein das Javascript. */
.kopfzahl.gross .kopfzahl-wert::after {
  content: attr(data-unter);
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
  letter-spacing: 0;
}

.kopfzahl.gross.offen { border-color: var(--at-minus); }
.kopfzahl.gross.offen .kopfzahl-was,
.kopfzahl.gross.offen .kopfzahl-wert { color: var(--at-minus); }

.kopfzahl.gross.quitt { border-color: var(--at-plus); }
.kopfzahl.gross.quitt .kopfzahl-was,
.kopfzahl.gross.quitt .kopfzahl-wert { color: var(--at-plus); }
.kopfzahl-wert.haken { font-size: 42px; line-height: 1; }

/* ---------- Die Liste im Bereich ---------- */

.liste { display: flex; flex-direction: column; gap: 6px; }

.pk {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Das Aufblitzen eines Postens, den gerade jemand anderes eingetragen hat.
   Der Blick soll dorthin wandern, ohne dass etwas springt: nur die Farbe
   bewegt sich, das Feld bleibt, wo es ist. */
@keyframes at-blitz {
  from { background: var(--at-blitz); }
  to   { background: var(--karte); }
}
.pk.neu { animation: at-blitz 1.6s ease-out 1; }

/* ---------- Wischen zum Löschen ----------

   Der rote Grund gehört der HÜLLE, nicht der Karte. Das ist der ganze Trick:
   verschoben wird nur die Karte, die Hülle bleibt stehen und gibt dabei ihren
   Grund frei. Läge das Rot an der Karte selbst, würde es beim Verschieben
   mitwandern und wäre nie zu sehen.

   touch-action: pan-y sagt dem Browser vorab, dass er senkrechtes Scrollen
   selbst übernehmen darf, waagerechtes aber uns gehört. Ohne diese Zeile
   ruckelt die Geste auf dem iPhone spürbar, weil der Browser erst abwartet,
   was das Javascript tut. */
.pk-huelle {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--at-minus);
}

.pk-huelle::after {
  content: "Löschen";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 20px;
  color: var(--auf-warn);
  font-size: 15px;
  font-weight: 800;
  pointer-events: none;
}

/* Die Karte liegt darüber und deckt den Grund vollständig ab, solange nicht
   gewischt wird. */
.pk-huelle .pk {
  position: relative;
  z-index: 1;
  background: var(--karte);
  touch-action: pan-y;
  width: 100%;
}

/* Weit genug gewischt: der Grund wird kräftiger, das ist die Rückmeldung
   "jetzt loslassen und es passiert etwas". */
.pk-huelle:has(.wisch-bereit) { filter: brightness(1.08); }
.pk.wisch-bereit { box-shadow: -4px 0 12px rgba(0, 0, 0, .18); }

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

/* Das Zeichen zur Ausgabe. Feste Breite, damit die Titel darunter alle auf
   derselben Linie beginnen, auch wenn ein Emoji breiter zeichnet als das
   andere. */
.pk-zeichen {
  flex: none;
  width: 34px;
  font-size: 25px;
  line-height: 1;
  text-align: center;
}
.pk-pfeil { flex: none; font-size: 20px; font-weight: 700; color: var(--gedimmt); }

.pk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-titel {
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-unter {
  font-size: 13px;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-betrag { flex: none; font-size: 18px; font-weight: 800; }
.pk-betrag.minus { color: var(--at-plus); }   /* Einnahme, also erfreulich */

.leer {
  padding: 28px 16px;
  text-align: center;
  color: var(--leise);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Stand ---------- */

.saldo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
.saldo.ich { border-color: var(--blau); border-width: 2px; }

.sa-punkt {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.sa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-name { font-size: 17px; font-weight: 700; }
.sa-was { font-size: 13px; color: var(--leise); }
.sa-wert { flex: none; font-size: 19px; font-weight: 800; }
.sa-wert.plus  { color: var(--at-plus); }
.sa-wert.minus { color: var(--at-minus); }

/* Die Zahl zaehlt von alt auf neu, statt zu springen. Der Wechsel selbst
   braucht keine Animation: er entsteht dadurch, dass die Zahl in Schritten
   neu geschrieben wird. Nur die Betonung ist hier hinterlegt. */
.sa-wert.laeuft { transform: scale(1.06); transition: transform .18s ease-out; }

/* ---------- Ausgleich ---------- */

.aus-zeile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}
.az-satz { font-size: 17px; line-height: 1.4; }
.az-satz b { font-weight: 800; }
.az-betrag { font-weight: 800; }
.az-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Schon bezahlt ----------

   Die Zeile bleibt stehen, damit man sie zurueckholen kann, tritt aber
   sichtbar in den Hintergrund: blasser Grund, gruener Haken, kein
   Haupt-Knopf. Sie soll erkennbar erledigt aussehen, ohne zu verschwinden. */
.aus-zeile.erledigt {
  border-style: dashed;
  border-color: var(--at-plus);
  background: transparent;
}
.aus-zeile.erledigt .az-satz { color: var(--leise); }
.aus-zeile.erledigt .az-satz b { color: var(--text); }

/* Erlassen sieht anders aus als bezahlt: warmes Gelb statt Grün, Herz statt
   Haken. Beim einen ist Geld geflossen, beim anderen hat jemand darauf
   verzichtet, und diese beiden Dinge dürfen nicht gleich aussehen. */
.aus-zeile.erlassen { border-color: var(--at-erlassen); }
.aus-zeile.erlassen .az-haken { background: var(--at-erlassen); }

.az-haken {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--at-plus);
  color: var(--karte);
  font-size: 14px;
  font-weight: 800;
  vertical-align: -4px;
}
.az-wann {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--gedimmt);
}

/* Gilt fuer Knoepfe UND fuer den PayPal-Link. Der ist bewusst ein echtes
   a-Element (oeffnet trotz Popup-Blocker, springt auf dem Handy in die
   PayPal-App, laesst sich lange druecken und kopieren) und muss deshalb hier
   mitgenommen werden: ein Link bringt weder die Innenausrichtung eines
   Knopfes mit noch verzichtet er von selbst auf die Unterstreichung. */
.zbtn {
  flex: 1 1 auto;
  min-width: 44%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  /* Damit die Beschriftung im Link genauso mittig sitzt wie im Knopf. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.zbtn.haupt { background: var(--blau); border-color: var(--blau); color: #fff; }

.fertig-band {
  padding: 20px 16px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid var(--at-plus);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

/* Die Probe ist fehlgeschlagen. Das darf nie passieren, und wenn es doch
   passiert, sagt die App es offen, statt eine falsche Zahl zu behaupten. */
.probe-fehler {
  padding: 14px;
  border-radius: 14px;
  background: var(--warn);
  color: var(--auf-warn);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- Die leuchtende Pille ----------

   Sie schwebt oben in der Mitte und meldet, was gerade auf einem ANDEREN
   Handy passiert ist. Zwei Sekunden Puls, dann steht sie still, nach acht
   Sekunden geht sie von selbst. */

.pille {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92vw, 460px);
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--at-pille);
  color: var(--at-auf-pille);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  border: none;
  transform: translate(-50%, -18px);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.2), opacity .26s ease-out;
}
.pille[hidden] { display: none; }
.pille.da { transform: translate(-50%, 0); opacity: 1; }

.pille-punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.pille-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes at-puls {
  0%   { box-shadow: 0 0 0 0 rgba(0, 145, 200, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(0, 145, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 145, 200, 0); }
}
.pille.pulst { animation: at-puls 1s ease-out 2; }

/* ---------- Personen-Auswahl in den Blaettern ---------- */

.wer-gitter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Die Chips tragen die Farbe ihrer Person. Sie kommt als --chip von aussen,
   weil sie in der Datenbank steht und je AufTeilen anders ausfaellt.
   Abgewaehlt zeigt nur der Rand die Farbe, angewaehlt fuellt sie den Chip.
   So sieht man die Zuordnung auch dann, wenn gerade niemand ausgewaehlt ist. */
.chip {
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--chip, var(--linie));
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  border-color: var(--chip, var(--blau));
  background: var(--chip, var(--blau));
  /* Weiss auf allen sechzehn Farben geprueft: die dunkelste ist Petrol mit
     einem Kontrast von 4,9 zu 1, die hellste Gold mit 4,6 zu 1. Beide liegen
     ueber der Schwelle von 4,5 fuer normalen Text. */
  color: #fff;
}

/* Die Zeile, die beim Eintragen mitrechnet. */
.je-zeile {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--at-code);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.je-zeile.leer-hinweis {
  background: none;
  padding: 2px 0;
  font-weight: 400;
  color: var(--leise);
}

/* Das Zeichen im Titelfeld. */
.feld-mit-zeichen { position: relative; display: block; }
.feld-mit-zeichen .feld { padding-right: 52px; }
.feld-zeichen {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

/* Feld und Knopf nebeneinander, etwa fuer den Namen im Menue. */
.feld-reihe { display: flex; gap: 8px; align-items: stretch; }
.feld-reihe .feld { flex: 1; min-width: 0; }
.knopf.schmal { flex: none; width: auto; padding: 0 18px; min-height: 0; font-size: 16px; }

.blatt-zeile { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

/* ---------- Kein seitliches Wegrutschen im Blatt ----------

   Manni, 02.08.2026: "Bei Ausgabe eintragen und ändern kann ich nach rechts
   und links scrollen. Das sollte auch nicht möglich sein."

   Ursache ist die Grundregel von flex und grid: ein Kind darf von sich aus
   nie schmaler werden als sein Inhalt (min-width: auto). Ein langer Name in
   einem Chip oder ein breites Datumsfeld schiebt die ganze Spalte auf, und
   das Blatt bekommt eine Rolle nach rechts, die niemand braucht.

   min-width: 0 hebt genau das auf, overflow-x: hidden ist der Riegel
   dahinter, falls doch einmal etwas ausbricht. */
.blatt-rumpf { overflow-x: hidden; }
.blatt-zeile { min-width: 0; }
.blatt-zeile .feld,
.blatt-zeile input,
.blatt-zeile textarea { max-width: 100%; }

/* Das Datumsfeld ist der haeufigste Uebeltaeter: iOS gibt ihm eine feste
   Eigenbreite, die breiter sein kann als der Bildschirm. */
input[type="date"].feld {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
}

/* Die Chip-Reihen brechen um, statt zu schieben. */
.wer-gitter { min-width: 0; max-width: 100%; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qr-flaeche {
  display: grid;
  place-items: center;
  padding: 14px;
  background: #fff;          /* immer weiss, auch im Dunkelmodus: sonst liest
                                keine Kamera den Code */
  border-radius: 14px;
}
.qr-flaeche canvas { max-width: 100%; height: auto; image-rendering: pixelated; }

.verlauf-zeile {
  display: flex;
  flex-direction: column;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 15px;
}
.vz-zeit { font-size: 12px; color: var(--gedimmt); }

/* ---------- Ruecksicht auf reduzierte Bewegung ----------

   Familienregel: wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt hier gar keine. Die Pille erscheint dann ohne Puls und ohne
   Einfahren, der neue Posten ohne Aufblitzen, und der Saldo springt auf
   seinen Wert, statt hochzuzaehlen. Die Angaben bleiben dieselben, nur die
   Bewegung faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .pille {
    transition: none;
    transform: translate(-50%, 0);
  }
  .pille.pulst { animation: none; }
  .pk.neu { animation: none; }
  .sa-wert.laeuft { transition: none; transform: none; }
}