/* =====================================================================
   Buchify | Gestaltung
   ---------------------------------------------------------------------
   Vorbild ist iOS: gruppierte Karten auf ruhigem Grund, Haarlinien
   statt Rahmen, ein einziger Akzent in Blau. Alles, was nicht Inhalt
   ist, tritt zurueck.

   WARUM KEINE ZWEITE AKZENTFARBE: Auf einer Buchhaltungsseite stehen
   Zahlen, die etwas bedeuten - rot ist ueberfaellig, gruen ist bezahlt.
   Diese drei Farben sind vergeben. Eine vierte fuer «Gestaltung» wuerde
   mit ihnen um Aufmerksamkeit streiten.

   Das Signature-Element bleibt das Kontenblatt: Zahlen in
   Tabellenziffern, rechtsbuendig, Haarlinien dazwischen. Die
   Buchhaltung ist die Gestaltung.

   JEDER SELEKTOR DER VORIGEN FASSUNG IST ERHALTEN. Die 26 uebrigen
   Panelseiten wurden nicht angefasst; sie ziehen allein ueber diese
   Datei mit.
   ===================================================================== */

:root {
  /* Flaechen - die Namen bleiben, damit nichts umgeschrieben werden muss */
  --stein-100: #F2F2F7;   /* Grund, iOS systemGroupedBackground */
  --stein-200: #E9E9EB;   /* Hinterlegung, Fuellung */
  --stein-300: #E5E5EA;   /* Haarlinien */
  --stein-400: #C7C7CC;   /* Trenner, stumme Zeichen */
  --weiss:     #FFFFFF;

  /* ── LESBAR NACH WCAG AA (2.10.2026) ─────────────────────────────
     Ein Tester hat nachgemessen: Grau #8A8A8E auf Weiss 3.4:1, auf dem
     Grund 3.1:1; Gruen #34C759 («Bezahlt», Betraege) 2.0-2.2:1; Blau
     #007AFF auf grauen Knoepfen 3.3:1, auf Weiss 4.0:1; Rot #FF3B30
     3.1-3.6:1. AA verlangt 4.5:1 fuer Text dieser Groesse. Die Farben
     sind darum die dunkleren Fassungen derselben iOS-Toene («Kontrast
     erhoehen» in iOS) - jede misst mindestens 4.5:1 auf Weiss, auf dem
     Grund (--stein-100) und auf ihrer «-blass»-Flaeche, das Blau auch
     mit weisser Schrift darauf. Gemessen mit Playwright, Werte im Bericht
     vom 2.10.2026. Die dunkle Fassung unten bleibt, wie sie war. */
  /* Schrift */
  --tinte:     #000000;   /* Ueberschriften, Zahlen */
  --tinte-70:  #3C3C43;   /* Fliesstext */
  --tinte-45:  #636366;   /* Beschriftungen (vorher #8A8A8E) */

  /* Akzente. «moos» heisst weiterhin so und ist jetzt Blau -
     der Name steht an ueber hundert Stellen, die Farbe an einer. */
  --moos:      #0062CC;   /* Aktionen, Auswahl (vorher #007AFF) */
  --moos-hell: #006ADB;   /* (vorher #0A84FF) */
  --moos-blass:#E5F0FF;
  --lehm:      #5856D6;   /* Hervorhebung */
  --lehm-blass:#EDEDFB;
  --ocker:     #FF9500;   /* Achtung */
  --ziegel:    #D70015;   /* Minus, Fehler (vorher #FF3B30) */
  --ziegel-blass:#FFECEB;
  --gruen:     #1F7A35;   /* Bezahlt, Gewinn (vorher #34C759) */
  --gruen-blass:#E6F8EB;

  /* Mass */
  --rund:      14px;      /* Karten, wie gruppierte Listen in iOS */
  --rund-s:    10px;      /* Knoepfe, Felder */
  --linie:     1px solid var(--stein-300);
  --schatten:  0 1px 1px rgba(0,0,0,.03), 0 6px 20px -8px rgba(0,0,0,.06);

  --seitenleiste: 244px;

  /* Eine Familie fuer alles. iOS setzt Zahlen nicht in Schreibmaschine,
     sondern in dieselbe Schrift mit Tabellenziffern - das haelt die
     Spalten ausgerichtet, ohne technisch auszusehen. */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: var(--schrift);
}

@media (prefers-color-scheme: dark) {
  :root {
    --stein-100: #000000;
    --stein-200: #2C2C2E;
    --stein-300: #38383A;
    --stein-400: #48484A;
    --weiss:     #1C1C1E;

    --tinte:     #FFFFFF;
    --tinte-70:  #D6D6DB;
    --tinte-45:  #98989E;

    --moos:      #0A84FF;
    --moos-hell: #409CFF;
    --moos-blass:#0B2440;
    --lehm:      #7D7AFF;
    --lehm-blass:#211F3D;
    --ocker:     #FF9F0A;
    --ziegel:    #FF453A;
    --ziegel-blass:#3A1512;
    --gruen:     #30D158;
    --gruen-blass:#0E2B17;

    --schatten:  0 1px 1px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--stein-100);
  color: var(--tinte-70);
  font-family: var(--schrift);
  font-size: 15.5px;
  line-height: 1.47;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--moos); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--moos);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}

/* --- Grundgeruest ------------------------------------------------- */

.huelle { display: flex; min-height: 100vh; }

.seitenleiste {
  width: var(--seitenleiste);
  flex: 0 0 var(--seitenleiste);
  background: var(--weiss);
  border-right: var(--linie);
  padding: 18px 12px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
}

.marke {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 12px 18px;
}
.marke b {
  font-size: 21px; font-weight: 700; color: var(--tinte);
  letter-spacing: -.028em;
}
.marke span { font-size: 12px; color: var(--tinte-45); letter-spacing: 0; }
/* Der Knopf fuer Konto, Sprache und Abmelden - nur am Telefon (siehe unten
   und _rahmen.php, 2.10.2026). */
.nutzer-knopf { display: none; }

.navgruppe {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-45); padding: 18px 12px 6px; font-weight: 600;
}

.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--rund-s);
  color: var(--tinte); font-size: 15px; font-weight: 450;
  letter-spacing: -.012em;
  transition: background .12s ease;
}
.nav a:hover { background: var(--stein-200); text-decoration: none; }
.nav a[aria-current="page"] {
  background: var(--moos); color: #fff; font-weight: 560;
}
.nav a[aria-current="page"] .zeichen { opacity: 1; }
.nav .zeichen {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: grid; place-items: center;
  font-size: 13px; opacity: .5;
}

.inhalt { flex: 1; min-width: 0; padding: 30px 32px 72px; max-width: 1220px; }

.kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.kopf h1 {
  margin: 0; font-size: 30px; font-weight: 700; color: var(--tinte);
  letter-spacing: -.032em; line-height: 1.1;
}
.kopf p { margin: 5px 0 0; font-size: 14.5px; color: var(--tinte-45); }

/* --- Karten -------------------------------------------------------- */

.karte {
  background: var(--weiss);
  border: var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow: hidden;               /* damit Listen an der Rundung enden */
}
/* Gestapelte Karten bekommen Luft dazwischen. NICHT aber Karten, die
   direkt im Raster liegen: dort setzt das Raster den Abstand selbst,
   und ein zusaetzlicher Aussenabstand schiebt jede Karte ausser der
   ersten nach unten - die Zeile wird so hoch wie Karte plus Abstand,
   und die erste Karte steht sichtbar hoeher als ihre Nachbarn.
   Bis 25.8.2026 war das genau der Fehler. */
.karte + .karte { margin-top: 16px; }
.raster > .karte + .karte { margin-top: 0; }
.karte > h2 {
  margin: 0; padding: 15px 18px 13px;
  font-size: 16px; font-weight: 620; color: var(--tinte);
  letter-spacing: -.018em;
  border-bottom: var(--linie);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.karte > h2 a { font-weight: 450; }
.karte > .rumpf { padding: 18px; }

/* ── DIE LOHNSEITEN ZEIGTEN, WAS FEHLTE (24.9.2026) ────────────────
   Gabriel, mit zwei Bildern von panel/lohn.php: «hier design fehler».
   Text an der Kartenkante, Kennzahlen, die aneinanderkleben, der
   Jahresreiter halb ueber dem Kartenrand, Felder auf verschiedener
   Hoehe. Die Seiten waren ohne «rumpf» gebaut - und die Bausteine,
   die es dafuer braucht, gab es teils nicht. Hier stehen sie, fuer
   jede Seite:

   ABSTAND ZWISCHEN RASTER UND KARTE. «.karte + .karte» hatte Luft,
   ein Raster vor oder nach einer Karte nicht; mehrere Seiten setzen
   darum margin-top von Hand (der Inline-Wert gewinnt weiter). */
.karte + .raster, .raster + .karte, .raster + .raster { margin-top: 16px; }
/* Tabelle und Rumpf in derselben Karte: eine Linie dazwischen, wie
   unter der Kopfzeile - sonst beginnt ein Formular mitten in der Liste. */
.karte > .rumpf + table, .karte > table + .rumpf, .karte > .rumpf + .rumpf { border-top: var(--linie); }
/* Dasselbe fuer eine Tabelle, die auf dem Telefon waagrecht scrollt (.pltafel). */
.karte > .rumpf + .pltafel, .karte > .pltafel + .rumpf { border-top: var(--linie); }
.karte > .rumpf > p:first-child { margin-top: 0; }
/* Ein Reiter in der Kopfzeile einer Karte (Jahr waehlen): kleiner und
   ohne den Abstand nach unten, den er als eigene Zeile braucht. */
.karte > h2 .reiter { margin: -5px 0; }
.reiter.klein a { padding: 4px 11px; font-size: 13.5px; }
/* Eine Kennzahl IN einer Karte: Flaeche statt zweiter Rahmen. */
.kennzahl.flach { background: var(--stein-100); border-radius: var(--rund-s); }
/* Ein Haken in einem Feld. «.feld input» macht jedes Eingabefeld
   100 % breit - auch das Kaestchen, das dann als Balken ueber seinem
   Text stand. */
.feld label.haken {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14.5px; color: var(--tinte); cursor: pointer;
}
.feld label.haken input { width: auto; margin: 0; padding: 0; flex: 0 0 auto; }
/* Felder mit dem Knopf dahinter: der Knopf steht auf der Hoehe der
   Eingabe, nicht der Beschriftung. */
.zeile.unten { align-items: flex-end; }
.zeile.unten > .knopfplatz { flex: 0 0 auto; margin-bottom: 16px; }
/* Das letzte Feld eines Rumpfs traegt seinen Abstand nach unten mit -
   dann stuende unter dem Knopf doppelt so viel Luft wie ueber dem Text. */
.karte > .rumpf > form:last-child > .zeile.unten:last-child,
.karte > .rumpf > form.zeile.unten:last-child { margin-bottom: -16px; }
/* Schmale Felder (PLZ, Jahr, Betrag neben seiner Bezeichnung) - nur
   nebeneinander. Untereinander (Telefon) waere eine feste Breite als
   flex-basis eine feste HOEHE: Gemessen stand das Feld «Jahr» dann in
   einem 110 px hohen Kasten. */
@media (min-width: 901px) {
  .zeile > .feld.schmal { flex: 0 0 110px; }
  .zeile > .feld.mittel { flex: 0 0 190px; }
}
@media (max-width: 900px) {
  .zeile.unten { align-items: stretch; }
  .zeile.unten > .knopfplatz .knopf { width: 100%; }
}
/* Die Summenzeile einer Liste liest sich wie eine Zeile, nicht wie ein
   zweiter Tabellenkopf. */
table.blatt tfoot th { color: var(--tinte); font-size: 13.5px; font-weight: 620;
  border-top: var(--linie); border-bottom: 0; padding-top: 12px; padding-bottom: 12px; }

/* ── SUCHE UND FILTERZEILE EINER LISTE (23.9.2026) ─────────────────
   Diese Regeln standen als <style>-Block in panel/kunden.php. Als die
   Artikelliste dieselbe Suche bekam, waere daraus ein zweiter Block
   geworden - und der erste Handgriff an einer Farbe haette einen von
   beiden erwischt. Jetzt stehen sie hier, und jede Liste sieht gleich
   aus, weil sie dieselbe Regel liest.
   Das Verhalten steht in panel/liste.js, gemessen von
   werkzeuge/liste-selbsttest.cjs. */
.plwerkzeug { display: flex; gap: 8px; align-items: center;
  padding: 12px 16px; border-bottom: var(--linie); }
.plwerkzeug input[type=search] { flex: 1; max-width: 320px; padding: 7px 10px;
  border: 1px solid var(--stein-400); border-radius: 8px; background: transparent;
  color: var(--tinte); font-size: 14.5px; }
.plwerkzeug .plzahl { margin-left: auto; font-size: 13px; color: var(--tinte-45); }
tr.plfilter td { padding: 4px 8px 8px; border-bottom: 1px solid var(--stein-300); }
tr.plfilter input, tr.plfilter select { width: 100%; box-sizing: border-box;
  padding: 4px 6px; border: 1px solid var(--stein-300); border-radius: 6px;
  background: transparent; color: var(--tinte); font-size: 13px; }
tr.plfilter input::placeholder { color: var(--stein-400); }
/* ── SCHMAL, ABER BREIT GENUG (23.9.2026) ──────────────────────────
   Erst standen hier 72px. In der Kundenliste passte «alle» damit
   knapp; in der Artikelliste mit ihren langen Nummern zog die erste
   Spalte die Breite an sich, und aus der Auswahl wurde ein «a ∨».
   Eine Auswahl, deren Beschriftung abgeschnitten ist, sagt nicht, was
   sie tut. Die Mindestbreite steht darum an der Auswahl selbst - dort
   wirkt sie, egal wie der Rest der Tabelle sich verteilt. */
td.pltyp, tr.plfilter td.plschmal { width: 86px; }
tr.plfilter select { min-width: 76px; }
td.pltyp { color: var(--tinte-45); font-size: 15px; }
/* Nur fuer Vorlesegeraete: das Zeichen daneben sagt nichts. */
.plnurleser { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); }
.plleise { color: var(--tinte-45); }
/* Acht Spalten passen nicht auf jeden Schirm. Statt Spalten wegzulassen
   darf die Tafel seitlich rollen - eine Spalte, die es nicht gibt, kann
   man auch nicht filtern. */
.pltafel { overflow-x: auto; }
.pltafel td.kontonr, .pltafel td.plnowrap { white-space: nowrap; }
/* Sortierbare Koepfe - die Klasse setzt liste.js, sonst zeigte ein Kopf
   ohne JavaScript einen Pfeil, der nichts tut. */
.plsortierbar th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.plsortierbar th[data-sort]::after { content: '\2195'; margin-left: 5px; opacity: .35; font-size: 11px; }
.plsortierbar th[data-sort]:hover, .plsortierbar th[data-sort]:focus-visible { color: var(--moos); outline: none; }
.plsortierbar th[aria-sort] { color: var(--moos); }
.plsortierbar th[aria-sort="ascending"]::after { content: '\2191'; opacity: 1; }
.plsortierbar th[aria-sort="descending"]::after { content: '\2193'; opacity: 1; }

/* ── DIE ZUGEKLAPPTE KARTE (22.9.2026) ─────────────────────────────
   Gabriel, zur Kundenliste: «Kunden anlegen Design Fehler.» Er hatte
   recht: Der Zusammenklapper war von Hand mit ein paar Inline-Stilen
   zusammengesetzt - ohne Polster, ohne Trennlinie, mit dem Dreieck
   ausserhalb der Karte. Eine Karte, die anders aussieht als die Karte
   daneben, sieht nicht nach Absicht aus, sondern nach Versehen.

   Die Kopfzeile eines Zusammenklappers ist jetzt dieselbe wie ein
   <h2> darueber: dieselben Polster, dieselbe Schrift, dieselbe Linie.
   Der Unterschied ist EIN Zeichen vorne und der Zeiger - mehr darf er
   nicht sein, sonst sind es zwei Bauarten statt einer.

   ZUGEKLAPPT OHNE LINIE: Sonst stuende unter der zugeklappten Karte
   eine Trennlinie, die nichts trennt. */
.karte > details > summary {
  margin: 0; padding: 15px 18px 13px;
  font-size: 16px; font-weight: 620; color: var(--tinte);
  letter-spacing: -.018em;
  border-bottom: var(--linie);
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none; user-select: none;
}
.karte > details:not([open]) > summary { border-bottom: 0; }
.karte > details > summary::-webkit-details-marker { display: none; }
.karte > details > summary::before {
  content: "+"; display: inline-block; width: 17px; height: 17px;
  line-height: 15px; text-align: center; border-radius: 5px;
  background: var(--stein-200); color: var(--tinte-45);
  font-size: 13px; font-weight: 700;
}
.karte > details[open] > summary::before { content: "\2212"; }
.karte > details > summary:hover { background: var(--stein-200); }
.karte > details > summary:hover::before { color: var(--tinte); }
.karte > details > summary:focus-visible { outline: 2px solid var(--tinte-45); outline-offset: -2px; }
/* Der Rumpf liegt IM <details> und damit nicht mehr direkt in der
   Karte - «.karte > .rumpf» greift dort nicht. Beim ersten Bauen stand
   das Formular darum ohne Polster an der Kartenkante. */
.karte > details > .rumpf {
  padding: 18px;
  /* ── UND ER BLEIBT SCHMAL ──────────────────────────────────────
     Die Karte hat jetzt die ganze Seitenbreite, das Formular darf sie
     nicht haben: Ein Eingabefeld ueber 1100px ist kein Formular mehr,
     sondern ein Balken. Die Liste daneben braucht die Breite, ein
     Formular braucht eine Spalte. */
  max-width: 700px;
}

/* Erst Flexbox als Rueckfallebene fuer aeltere Engines, dann Grid.
   Browser ohne Grid-Unterstuetzung zeigen so trotzdem Spalten statt
   eines Stapels. */
.raster { display: flex; flex-wrap: wrap; gap: 14px; }
.raster > * { flex: 1 1 0; min-width: 210px; }
.raster.v2 > * { flex: 1 1 46%; }

@supports (display: grid) {
  .raster { display: grid; gap: 14px; }
  .raster > * { min-width: 0; }
  .raster.v4 { grid-template-columns: repeat(4, 1fr); }
  .raster.v3 { grid-template-columns: repeat(3, 1fr); }
  .raster.v2 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Kennzahl ------------------------------------------------------ */

.kennzahl { padding: 16px 18px 17px; }
.kennzahl .bez {
  font-size: 13px; letter-spacing: -.01em;
  color: var(--tinte-45); font-weight: 500;
  text-transform: none;                    /* iOS schreit nicht */
}
/* Die Groesse haengt an der Fensterbreite, nicht an einer festen Zahl:
   «CHF 412'680.00» ist doppelt so breit wie «CHF 0.00» und brach bei
   vier Spalten auf einem 1280er Schirm um. Ein umgebrochener Betrag
   liest sich wie zwei Betraege. */
.kennzahl .wert {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 1.85vw, 29px); font-weight: 650; color: var(--tinte);
  letter-spacing: -.035em; margin-top: 5px; line-height: 1.15;
}
.kennzahl .fuss { font-size: 13px; color: var(--tinte-45); margin-top: 5px; }
.kennzahl.warnung .wert { color: var(--ziegel); }
.kennzahl.gut .wert { color: var(--gruen); }

/* --- Kontenblatt: das Signature-Element ---------------------------- */

table.blatt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.blatt th {
  text-align: left; font-weight: 600; font-size: 12px;
  text-transform: none; letter-spacing: -.005em; color: var(--tinte-45);
  padding: 11px 16px 9px; border-bottom: var(--linie);
}
table.blatt td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--stein-300);
  color: var(--tinte-70);
}
table.blatt tbody tr:last-child td { border-bottom: none; }
table.blatt tbody tr:hover { background: var(--stein-200); }
table.blatt .zahl, table.blatt th.zahl {
  text-align: right;
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--tinte); font-weight: 500;
}
/* Ein Spaltenkopf ueber Zahlen ist ein Spaltenkopf: grau wie seine
   Nachbarn. Bis heute stand «Betrag» schwarz neben grauem «Text» und
   «Quelle» - die Regel fuer die Zahlen galt auch fuer ihren Kopf. Nur
   die Farbe: Schrift und Gewicht bleiben, sonst rutschen die Spalten. */
table.blatt thead th.zahl { color: var(--tinte-45); }
/* Ein Hinweis unter dem Text einer Zeile («storniert durch Nr. 4») ist
   leiser als die Zeile selbst. «.hinweis» galt bisher nur in Feldern. */
table.blatt td .hinweis { font-size: 12.5px; color: var(--tinte-45); margin-top: 2px; }
/* Eine zurueckgenommene Zahlung bleibt stehen, grau wie eine
   stornierte Buchung im Journal; das Formular zum Zuruecknehmen klappt
   unter ihrer Zeile auf (24.9.2026). */
table.blatt tr.aus > td { opacity: .5; }
table.blatt td.zzknopf { width: 1%; white-space: nowrap; text-align: right; }
table.blatt td.knoepfe { white-space: nowrap; }
/* Ein Eingabefeld in einer Tabellenzelle (Schuldnernummer je Kanton): Feld ohne Abstand nach unten. */
table.blatt td > .feld { margin: 0; }
table.blatt tr.zzform > td { background: var(--stein-100); padding-top: 14px; padding-bottom: 14px; }
table.blatt tr.zzform .zeile { margin-bottom: 0; }
table.blatt tr.zzform .zeile.unten > .knopfplatz { margin-bottom: 0; }
table.blatt tr.zzform .feld { margin-bottom: 0; }
table.blatt tr.zzform > td > .hinweis { margin-top: 8px; font-size: 12.5px; color: var(--tinte-45); }
table.blatt .kontonr {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  color: var(--tinte-45); font-size: 13.5px;
  /* «R2026-0002» bricht sonst am Bindestrich, sobald der Text daneben
     lang ist (ein Storno mit Grund) - gemessen im Journal, 24.9.2026. */
  white-space: nowrap;
}
table.blatt tr.summe td {
  border-top: 1.5px solid var(--tinte); border-bottom: none;
  font-weight: 650; color: var(--tinte); padding-top: 13px;
}
table.blatt tr.zwischensumme td {
  border-top: var(--linie); font-weight: 560; color: var(--tinte);
}
.minus { color: var(--ziegel); }
.plus  { color: var(--gruen); }

/* --- Marken -------------------------------------------------------- */

.marker {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  background: var(--stein-200); color: var(--tinte-70);
}
.marker.offen      { background: var(--stein-200); color: var(--tinte-70); }
.marker.bezahlt    { background: var(--gruen-blass); color: var(--gruen); }
.marker.teilbezahlt{ background: var(--lehm-blass); color: var(--lehm); }
.marker.ueberfaellig,
.marker.storniert  { background: var(--ziegel-blass); color: var(--ziegel); }
.marker.entwurf    { background: var(--stein-200); color: var(--tinte-45); }

/* --- Schaltflaechen ------------------------------------------------ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--rund-s);
  background: var(--moos); color: #fff;
  border: 1px solid var(--moos);
  font-size: 15px; font-weight: 560; font-family: inherit;
  letter-spacing: -.014em;
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease, background .12s ease;
}
.knopf:hover { background: var(--moos-hell); border-color: var(--moos-hell); text-decoration: none; }
.knopf:active { filter: brightness(.92); }
.knopf.stumm {
  background: var(--stein-200); color: var(--moos); border-color: transparent;
}
.knopf.stumm:hover { background: var(--stein-300); color: var(--moos); }
.knopf.gefahr { background: var(--ziegel); border-color: var(--ziegel); }
.knopf:disabled { opacity: .4; cursor: not-allowed; }
/* Fuer Schaltflaechen IN einer Tabellenzeile: eine normale waere hoeher
   als die Zeile und wuerde die ganze Liste auseinanderziehen. */
.knopf.klein { padding: 4px 11px; font-size: 13px; }
/* Mehrere Schaltflaechen nebeneinander. Stand bisher in drei Seiten im
   Markup, ohne dass es die Klasse gab - eine Klasse, die nichts tut,
   ist eine Behauptung ueber das Aussehen. */
.sp-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

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

.feld { margin-bottom: 16px; }
.feld label {
  display: block; font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: -.01em;
  color: var(--tinte-45); margin-bottom: 6px;
}
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 11px 13px;
  border: var(--linie); border-radius: var(--rund-s);
  background: var(--weiss); color: var(--tinte);
  font-family: inherit; font-size: 16px;   /* 16px: iOS zoomt sonst beim Tippen */
  letter-spacing: -.014em;
}
.feld input[type="number"], .feld input.zahl {
  font-family: var(--schrift-zahl); text-align: right;
  font-variant-numeric: tabular-nums;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--moos);
  box-shadow: 0 0 0 3.5px var(--moos-blass);
}
.feld .hinweis { font-size: 13px; color: var(--tinte-45); margin-top: 5px; }

.zeile { display: flex; gap: 14px; }
.zeile > * { flex: 1; }

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

.meldung {
  padding: 13px 16px; border-radius: var(--rund-s);
  font-size: 14.5px; margin-bottom: 18px;
  border-left: 3px solid;
}
.meldung.gut     { background: var(--gruen-blass);  border-color: var(--gruen);  color: var(--gruen); }
.meldung.fehler  { background: var(--ziegel-blass); border-color: var(--ziegel); color: var(--ziegel); }
.meldung.achtung { background: #FFF4E5;             border-color: var(--ocker);  color: #A65B00; }
@media (prefers-color-scheme: dark) {
  .meldung.achtung { background: #3A2606; color: var(--ocker); }
}

/* --- Betreibersicht auf einen fremden Mandanten ---------------------
   Absichtlich kraeftiger als eine Meldung und ueber dem Titel: Zwei
   Mandanten sehen im Panel gleich aus, und wer das nicht sieht, sucht
   spaeter eine Rechnung im falschen Haus. Kein Schliessknopf - der
   Hinweis gilt, solange die Sicht gilt. */
.betreiberbalken {
  padding: 12px 16px; border-radius: var(--rund-s);
  margin-bottom: 18px; font-size: 14.5px; line-height: 1.5;
  background: var(--lehm-blass); color: #2F2E8F;
  border-left: 3px solid var(--lehm);
}
.betreiberbalken b { font-weight: 700; }
/* Die Demo-Firma: derselbe Balken, in Blau - Hinweis, keine Warnung. */
.demobalken {
  padding: 12px 16px; border-radius: var(--rund-s);
  margin-bottom: 18px; font-size: 14.5px; line-height: 1.5;
  background: var(--moos-blass); color: #0B3E8C;
  border-left: 3px solid var(--moos);
}
.demobalken b { font-weight: 700; }
.demobalken a { color: var(--moos); font-weight: 600; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .betreiberbalken { background: #1E1D3C; color: #C3C2FF; }
  .demobalken { background: #0F2A4A; color: #BFDBFE; }
}

/* --- Leerzustand --------------------------------------------------- */

.leer { padding: 52px 20px; text-align: center; }
.leer p { margin: 0 0 16px; color: var(--tinte-45); font-size: 15px; }

/* --- Reiter -------------------------------------------------------- */
/* Als Segmented Control statt Unterstrich - das ist die iOS-Entsprechung. */

.reiter {
  display: inline-flex; gap: 2px; margin-bottom: 22px;
  background: var(--stein-200); padding: 2px; border-radius: 11px;
  border-bottom: none;
  /* 24.9.2026, gemessen bei 390 px: fünf Reiter (Journal, Bilanz, …)
     waren breiter als der Schirm - die ganze Seite liess sich seitwärts
     schieben, auf Deutsch schon, auf Französisch mehr. Die Leiste rollt
     jetzt in sich, wie die Navigation oben. */
  max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  padding: 7px 15px; font-size: 14.5px; color: var(--tinte-70);
  border-radius: 9px; border-bottom: none; margin-bottom: 0;
  font-weight: 500; white-space: nowrap; flex: none;
}
.reiter a:hover { color: var(--tinte); text-decoration: none; }
.reiter a[aria-current="page"] {
  background: var(--weiss); color: var(--tinte);
  border-bottom-color: transparent; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.09);
}

/* --- Balken (Aging, Verteilung) ------------------------------------ */

.balken { height: 8px; background: var(--stein-200); border-radius: 999px; overflow: hidden; }
.balken > i { display: block; height: 100%; background: var(--moos); border-radius: 999px; }
.balken.warn > i { background: var(--ocker); }
.balken.krit > i { background: var(--ziegel); }

/* --- Anmeldung ----------------------------------------------------- */

.anmeldung {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.anmeldung .karte { width: 100%; max-width: 390px; }
.anmeldung .rumpf { padding: 34px 30px; }
.anmeldung h1 { margin: 0 0 5px; font-size: 27px; color: var(--tinte); font-weight: 700; letter-spacing: -.03em; }
.anmeldung .unter { font-size: 14.5px; color: var(--tinte-45); margin-bottom: 24px; }

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

@media (max-width: 900px) {
  .huelle { flex-direction: column; }
  .seitenleiste {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    border-right: none; border-bottom: var(--linie); padding: 10px 12px;
    display: block;
  }
  /* Waagrecht scrollende Leiste statt Umbruch: eine Zeile, die man
     schiebt, ist auf dem Telefon ruhiger als drei, die umbrechen. */
  .nav {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    padding: 7px 14px; font-size: 14.5px; white-space: nowrap;
    background: var(--stein-200); border-radius: 999px;
  }
  .nav a .zeichen { display: none; }
  .navgruppe { display: none; }
  .marke { padding: 2px 4px 10px; align-items: center; }
  .nutzer {
    margin-top: 10px; padding: 10px 4px 0;
    display: flex; align-items: center; gap: 12px;
  }
  /* ── DER KOPF AM TELEFON (2.10.2026) ─────────────────────────────────
     Name, Rolle, Mandant, «Abmelden» und die Sprachen liegen hinter dem
     runden Knopf rechts neben «Buchify»; zu sind es null Zeilen statt
     rund 130 px auf jeder Seite. Zugeklappt wird nur, wo Skript laeuft
     (html.mit-skript, gesetzt im Kopf von pxaKopf) - ohne Skript liesse
     sich der Knopf nicht bedienen, und «Abmelden» waere unerreichbar. */
  .nutzer-knopf {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    margin-left: auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: var(--linie); border-radius: 50%; background: var(--weiss); color: var(--tinte-70);
  }
  .seitenleiste.nutzer-auf .nutzer-knopf { background: var(--moos-blass); color: var(--moos); border-color: transparent; }
  html.mit-skript .seitenleiste:not(.nutzer-auf) .nutzer { display: none; }
  html:not(.mit-skript) .nutzer-knopf { display: none; }
  .nutzer .wechsler { margin-bottom: 0; flex: 1; }
  .nutzerzeile { flex-direction: row; align-items: baseline; gap: 8px; margin-bottom: 0; }
  .inhalt { padding: 20px 16px 48px; }
  .kopf h1 { font-size: 26px; }
  .raster.v4, .raster.v3, .raster.v2 { grid-template-columns: 1fr 1fr; }
  .zeile { flex-direction: column; gap: 0; }
}
@media (max-width: 560px) {
  .raster.v4, .raster.v3, .raster.v2 { grid-template-columns: 1fr; }
  .kopf { flex-direction: column; align-items: stretch; gap: 14px; }
  .kopf .knopf { width: 100%; }
  table.blatt { font-size: 14px; }
  table.blatt td, table.blatt th { padding-left: 14px; padding-right: 14px; }
  /* Spalten, die auf dem Telefon Platz kosten und woanders stehen (Lohnlauf:
     Abzuege, Netto, Arbeitgeber - im PDF und in den Kennzahlen oben). Sonst
     wird die Tabelle breiter als der Schirm, und das Eingabeformular in ihr
     auch (24.9.2026). */
  table.blatt .breit { display: none; }
  table.blatt td.knoepfe { white-space: normal; }
  table.blatt td.knoepfe .knopf { display: block; margin: 3px 0; text-align: center; }
  /* Ein Auswahlfeld ist so breit wie seine laengste Wahl - in einer
     Tabellenzeile (Eingaben im Lohnlauf) machte «13.1.1 Reise, Verpflegung,
     Übernachtung» die ganze Tabelle breiter als den Schirm. Gemessen:
     402 px Tabelle in 358 px Karte. */
  table.blatt tr.kontoaendern .feld select,
  table.blatt tr.kontoaendern .feld input { max-width: calc(100vw - 52px); }
}

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

@media print {
  .seitenleiste, .knopf, .reiter { display: none; }
  .inhalt { padding: 0; max-width: none; }
  .karte { border: none; box-shadow: none; }
  body { background: #fff; color: #000; }
}

/* --- Benutzerbereich in der Seitenleiste ---------------------------- */

.nutzer {
  margin-top: auto; padding: 14px 12px 2px;
  border-top: var(--linie);
}
.nutzer .wechsler { margin-bottom: 10px; }
.nutzer select {
  width: 100%; padding: 9px 11px; font-size: 14.5px; font-family: inherit;
  border: var(--linie); border-radius: var(--rund-s);
  background: var(--stein-100); color: var(--tinte);
  -webkit-appearance: none; appearance: none;
}
.nutzerzeile {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; color: var(--tinte); margin-bottom: 9px;
}
.nutzerzeile .rolle {
  font-size: 12.5px; color: var(--tinte-45);
  text-transform: none; letter-spacing: -.005em; font-weight: 400;
}
.nutzer .abmelden { font-size: 14px; color: var(--moos); }
.nutzer .abmelden:hover { color: var(--ziegel); }

/* ── DIE SPRACHE (24.9.2026) ───────────────────────────────────────
   Vier kleine Knoepfe unter «Abmelden» und auf der Anmeldeseite
   (pxaSprachwahl in _rahmen.php). Die gewaehlte ist gefuellt. */
.sprachwahl { display: flex; gap: 4px; margin: 10px 0 0; }
.sprachwahl button {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  min-width: 34px; min-height: 30px; padding: 4px 7px; cursor: pointer;
  border: var(--linie); border-radius: 8px; background: transparent; color: var(--tinte-45);
}
.sprachwahl button:hover { color: var(--moos); border-color: var(--moos); }
.sprachwahl button[aria-current="true"] { background: var(--moos-blass); color: var(--moos); border-color: transparent; }
@media (max-width: 900px) {
  .nutzer { flex-wrap: wrap; }
  .nutzer .sprachwahl { margin: 0; }
}
.anmeldung .sprachwahl { justify-content: center; margin-top: 18px; }

/* Schlüssel im Klartext: nur einmal sichtbar */
.schluessel {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px;
  background: var(--stein-200); padding: 13px 15px;
  border-radius: var(--rund-s); word-break: break-all;
  border: 1px dashed var(--stein-400); color: var(--tinte);
}

/* --- MWST-Formular im Layout der ESTV ------------------------------- */

.formular .rumpf { padding: 20px 22px; }

.fabschnitt {
  font-size: 14px; font-weight: 650; color: var(--tinte);
  margin: 24px 0 10px; padding-bottom: 6px;
  border-bottom: 1.5px solid var(--tinte);
  letter-spacing: -.012em;
}
.fabschnitt:first-child { margin-top: 0; }

table.fblatt { width: 100%; border-collapse: collapse; font-size: 14px; }
table.fblatt + table.fblatt { margin-top: 2px; }
table.fblatt td, table.fblatt th { padding: 7px 8px; vertical-align: top; }

.fblatt .ftext  { color: var(--tinte-70); line-height: 1.42; }
.fblatt .fziffer {
  width: 46px; text-align: right; color: var(--lehm);
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  font-size: 13px; white-space: nowrap;
}
.fblatt .fwert {
  width: 122px; text-align: right;
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  color: var(--tinte); background: var(--stein-100);
  border: var(--linie); border-radius: 0;
  padding: 7px 11px; white-space: nowrap;
}
.fblatt .fsatz {
  width: 60px; text-align: center; font-size: 13px;
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  color: var(--tinte-45); white-space: nowrap;
}

.fblatt tr.fsumme .fwert { background: var(--stein-200); font-weight: 600; }
.fblatt tr.fstark .fwert {
  background: var(--moos-blass); color: var(--moos);
  border-color: var(--moos); font-weight: 650;
}
/* ── DIE ZAHLENFELDER DER ESTV (24.9.2026) ─────────────────────────
   Gabriel: «bei mwst design fehler bei den zahlen … mach da keine
   radien innen.» Die Felder stehen Zeile an Zeile wie im Formular der
   ESTV - mit Rundung sah jede Spalte aus wie ein Stapel Pillen mit
   Kerben dazwischen. Jetzt eckig, eine Spalte.
   UND SIE STEHEN IN EINER FLUCHT: Der Abzugsblock (220-289) war um
   seinen Einzug nach rechts verschoben - gemessen 4 px ueber die
   Spalte darueber und darunter hinaus, weil die Tabelle 100 % breit
   blieb und der Einzug dazukam. */
.fblatt.fabzug { border-left: 2px solid var(--stein-300); margin-left: 4px; width: calc(100% - 4px); }

.fsaetze .fkopf {
  font-size: 12px; text-transform: none; letter-spacing: -.005em;
  color: var(--tinte-45); font-weight: 600; text-align: center;
  border-bottom: var(--linie); padding-bottom: 7px;
}
.fsaetze tbody td { border-bottom: 1px solid var(--stein-300); }
.fsaetze tbody tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  .fblatt .ftext { font-size: 13px; }
  .fblatt .fwert { width: 96px; padding: 6px 8px; font-size: 13px; }
  .fsaetze .fsatz { display: none; }
}

/* --- Buchungserfassung ---------------------------------------------- */

.bfeld {
  width: 100%; padding: 8px 11px; font-size: 15px; font-family: inherit;
  border: var(--linie); border-radius: var(--rund-s); background: var(--weiss);
  color: var(--tinte);
}
.bfeld:focus { outline: none; border-color: var(--moos); box-shadow: 0 0 0 3.5px var(--moos-blass); }
.bzahl {
  text-align: right; font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
}
.zeileweg {
  border: none; background: none; cursor: pointer; font-size: 19px;
  color: var(--tinte-45); line-height: 1; padding: 4px 7px;   /* 2.10.2026: --stein-400 hatte 1.7:1 */
}
.zeileweg:hover { color: var(--ziegel); }
#buchungszeilen tfoot td { padding-top: 11px; }

/* =====================================================================
   NEU fuer das Dashboard
   ===================================================================== */

/* --- Brennpunkt: was heute zaehlt ----------------------------------- */
/* Steht ueber allem anderen und beantwortet eine einzige Frage:
   muss ich jetzt etwas tun? Ist nichts ueberfaellig, wird die Karte
   ruhig statt rot - ein Dashboard, das immer alarmiert, alarmiert nie. */

.brennpunkt {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 16px;
}
.brennpunkt .bp-zahl {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; letter-spacing: -.04em;
  color: var(--tinte); line-height: 1;
}
.brennpunkt.faellig .bp-zahl { color: var(--ziegel); }
.brennpunkt .bp-text { flex: 1 1 260px; min-width: 0; }
.brennpunkt .bp-titel {
  font-size: 17px; font-weight: 620; color: var(--tinte);
  letter-spacing: -.02em; margin-bottom: 2px;
}
.brennpunkt .bp-unter { font-size: 14.5px; color: var(--tinte-45); }
.brennpunkt .bp-tat { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
  /* Auf dem Telefon stehen die Knoepfe untereinander. Zwei
     verschieden breite Knoepfe uebereinander sehen aus wie ein Fehler,
     darum nehmen beide die volle Breite. */
  .brennpunkt { padding: 20px; gap: 16px; }
  .brennpunkt .bp-zahl { font-size: 34px; }
  .brennpunkt .bp-tat { width: 100%; }
  .brennpunkt .bp-tat .btn, .brennpunkt .bp-tat .knopf { flex: 1 1 100%; }
}

/* --- Gruppierte Liste, wie in den iOS-Einstellungen ----------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-bottom: 1px solid var(--stein-300); }
.liste li:last-child { border-bottom: none; }
.liste a, .liste .zeileinhalt {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; color: var(--tinte); text-decoration: none;
}
.liste a:hover { background: var(--stein-200); text-decoration: none; }
.liste .haupt { flex: 1; min-width: 0; }
.liste .haupt b { font-weight: 550; display: block; letter-spacing: -.015em; }
.liste .haupt small { color: var(--tinte-45); font-size: 13.5px; }
.liste .rechts {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 550; color: var(--tinte);
}
.liste .rechts small { display: block; font-weight: 400; color: var(--tinte-45); font-size: 13px; }
/* Das Winkelzeichen rechts - in iOS steht es an jeder Zeile, die weiterfuehrt. */
.liste a::after {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 2px solid var(--stein-400); border-top: 2px solid var(--stein-400);
  transform: rotate(45deg); opacity: .8;
}

/* --- Aging-Zeile ---------------------------------------------------- */

.stufe { margin-bottom: 15px; }
.stufe:last-child { margin-bottom: 0; }
.stufe .kopfzeile {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 6px; gap: 12px;
}
.stufe .kopfzeile span:last-child {
  font-variant-numeric: tabular-nums; color: var(--tinte); font-weight: 550;
}

/* --- Kunde aendern, aufgeklappt in der Liste (21.9.2026) ------------
   Die Zeile darunter statt einer eigenen Seite: Wer eine Adresse
   korrigiert, will die Liste daneben behalten. Zugeklappt nimmt sie
   keinen Platz. */
/* Dieselbe Klappzeile wie bei den Kunden, jetzt auch im Kontenplan.
   Eine zweite Fassung derselben Regeln waere zwei Stellen, an denen
   man eines Tages eine davon anfasst. (22.9.2026) */
.blatt tr.kundeaendern > td,
.blatt tr.kontoaendern > td { padding: 0 10px 10px; border-bottom: 1px solid var(--stein-300); }
.blatt tr.kundeaendern summary,
.blatt tr.kontoaendern summary { cursor: pointer; font-weight: 600; font-size: 13.5px;
  padding: 8px 0; list-style: none; color: var(--moos); }
.blatt tr.kundeaendern summary::-webkit-details-marker,
.blatt tr.kontoaendern summary::-webkit-details-marker { display: none; }
.blatt tr.kundeaendern summary::before,
.blatt tr.kontoaendern summary::before { content: "▸ "; }
.blatt tr.kundeaendern details[open] summary::before,
.blatt tr.kontoaendern details[open] summary::before { content: "▾ "; }
.blatt tr.kundeaendern:not(:has(details[open])) > td,
.blatt tr.kontoaendern:not(:has(details[open])) > td { padding-bottom: 0; border-bottom: none; }

/* --- Kamera-Knopf am Handy (24.9.2026) -----------------------------
   «in der App für Mobile Login, soll die möglichkeit sein Quittungen zu
   Fotografieren» - ein Daumen weit weg, auf jeder Seite. Am Schirm gibt
   es ihn nicht: dort steht «Quittung fotografieren» im Menue. */
.kamera-knopf { display: none; }
@media (max-width: 900px) {
  .kamera-knopf {
    display: grid; place-items: center; position: fixed; z-index: 30;
    right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--moos); color: #fff; box-shadow: 0 10px 26px rgba(10,132,255,.45);
  }
  .kamera-knopf svg { width: 28px; height: 28px; }
  .kamera-knopf:active { transform: scale(.96); }
  .inhalt { padding-bottom: 96px; }
}
@media print { .kamera-knopf { display: none; } }
.nur-handy { display: none; }
@media (max-width: 900px) {
  .nur-handy { display: flex; }
  .quittung-karte { align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px; text-decoration: none; color: var(--tinte); }
  .quittung-karte .qk-zeichen { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--moos); color: #fff; }
  .quittung-karte svg { width: 26px; height: 26px; }
  .quittung-karte b { display: block; font-size: 16.5px; }
  .quittung-karte small { display: block; color: var(--tinte-45); font-size: 13.5px; margin-top: 2px; }
}

/* --- Offerte freigeben: die Seite des Kunden (29.9.2026) -----------
   panel/freigabe.php - ohne Menü, ohne Anmeldung, eine Spalte. */
.freigabe { max-width: 760px; margin: 0 auto; padding: 36px 20px 60px; }
.freigabe .karte + .karte { margin-top: 18px; }
.freigabe-kopf { margin-bottom: 20px; }
.freigabe-kopf h1 { margin: 2px 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--tinte); }
.freigabe-kopf .unter { color: var(--tinte-45); font-size: 14.5px; }
.freigabe-firma { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--moos); }
table.freigabe-pos tfoot td { border-top: var(--linie); font-size: 14px; }
table.freigabe-pos tr.freigabe-total td { font-weight: 700; color: var(--tinte); font-size: 15.5px; }
.freigabe-ok { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 14.5px; color: var(--tinte-70); }
.freigabe-ok input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.freigabe-nein { margin-top: 18px; border-top: var(--linie); padding-top: 12px; }
.freigabe-nein summary { cursor: pointer; color: var(--tinte-45); font-size: 14px; }
.freigabe-nein form { margin-top: 12px; }
.freigabe-fuss { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--tinte-45); }
.freigabe textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .freigabe { padding-top: 22px; } .freigabe-kopf h1 { font-size: 24px; } }

/* --- Spalten ein- und ausblenden, Zeilenmenü (29.9.2026) -----------
   Gabriel, mit dem Bild der bexio-Kontakte: «eine spalten ansicht um zu
   erweitern oder verkleinern». Welche Spalten es gibt, sagt die Tabelle
   (th[data-spalte]); ausgeblendet wird per nth-child aus liste.js, die
   Wahl bleibt in diesem Browser. Gilt für jede Liste mit plSpalten. */
.plspaltenwahl { position: relative; }
.plspaltenwahl > summary { list-style: none; cursor: pointer; }
.plspaltenwahl > summary::-webkit-details-marker { display: none; }
.plspaltenwahl .plspalten-liste { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 60vh; overflow-y: auto; padding: 8px 0;
  background: var(--weiss); border: 1px solid var(--stein-300); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.plspalten-liste label { display: flex; gap: 10px; align-items: center; padding: 7px 14px;
  font-size: 14px; color: var(--tinte); cursor: pointer; }
.plspalten-liste label:hover { background: var(--stein-100); }
.plspalten-liste label.fest { color: var(--tinte-45); cursor: default; }
.plspalten-liste .plspalten-zurueck { display: block; margin: 6px 14px 2px; font-size: 13px; }
/* Das Zeilenmenü (⋮): ein <details>, das ohne JavaScript aufgeht. */
td.plmenue-zelle { width: 36px; text-align: right; }
.plmenue { position: relative; display: inline-block; }
.plmenue > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--tinte-45); }
.plmenue > summary::-webkit-details-marker { display: none; }
.plmenue > summary:hover, .plmenue[open] > summary { background: var(--stein-200); color: var(--tinte); }
.plmenue .plmenue-liste { position: absolute; z-index: 25; right: 0; top: calc(100% + 4px); min-width: 210px;
  padding: 6px 0; background: var(--weiss); border: 1px solid var(--stein-300); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); text-align: left; }
.plmenue-liste a, .plmenue-liste button { display: block; width: 100%; box-sizing: border-box; padding: 8px 14px;
  background: none; border: 0; text-align: left; font: inherit; font-size: 14px; color: var(--tinte); cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.plmenue-liste a:hover, .plmenue-liste button:hover { background: var(--stein-100); text-decoration: none; }
.plmenue-liste form { margin: 0; }
.plmenue-liste .gefahr { color: var(--ziegel); }
.plmenue-liste hr { border: 0; border-top: 1px solid var(--stein-300); margin: 6px 0; }
.plfuss { padding: 12px 16px; font-size: 13px; color: var(--tinte-45); border-top: var(--linie); }
/* Die Tafel rollt seitlich; ein offenes Menü darf trotzdem nicht abgeschnitten werden.
   Mit liste.js (.pljs) liegt es fest über allem (PL.menueSetzen) - dann bleibt
   die Tafel, wie sie ist, und springt nicht nach links (29.9.2026). */
.pltafel:not(.pljs):has(.plmenue[open]) { overflow: visible; }
.marker.lieferant { background: var(--lehm-blass); color: var(--lehm); }
.marker.kunde { background: var(--moos-blass); color: var(--moos); }
.marker.archiv { background: var(--stein-200); color: var(--tinte-45); }
@media (prefers-color-scheme: dark) {
  .plspaltenwahl .plspalten-liste, .plmenue .plmenue-liste { background: var(--stein-200); }
}

/* --- Lieferantenbeleg ansehen (29.9.2026) -------------------------- */
.beleg-bild { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; border-radius: 10px;
  border: 1px solid var(--stein-300); background: var(--weiss); }
dl.angaben { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
dl.angaben dt { color: var(--tinte-45); }
dl.angaben dd { margin: 0; color: var(--tinte); }
table.blatt .marker { white-space: nowrap; }
/* Viele Spalten: etwas enger (Kontakte). Der Name bricht nicht in jede Silbe. */
table.blatt.kompakt th, table.blatt.kompakt td { padding-left: 9px; padding-right: 9px; }
table.blatt.kompakt th:first-child, table.blatt.kompakt td:first-child { padding-left: 16px; }
table.blatt.kompakt td:nth-child(3) { min-width: 150px; }
table.blatt.kompakt td.pltyp { width: 40px; }
.plortplz { display: none; }
table[data-spalten-aus~="plz"] .plortplz { display: inline; }
/* Am Handy bricht die Werkzeugzeile um - sonst stünde «Spalten» neben dem Bildschirm. */
.plwerkzeug { flex-wrap: wrap; }
@media (max-width: 560px) {
  .plwerkzeug input[type=search] { max-width: none; flex-basis: 100%; }
  .plspaltenwahl .plspalten-liste { left: auto; right: 0; }
}

/* ── Die Karte «Abo»: eine Zeile je Bestellung (29.9.2026) ────────────
   Website und Shop derselben Firma hängen an einer Buchhaltung; jede
   Zeile sagt, was die Bestellung ist. Eine nur verbundene Bestellung
   steht leiser da. */
.abo-zeile { padding: 14px 0; border-top: var(--linie); }
.abo-zeile:first-child { border-top: 0; padding-top: 0; }
.abo-titel { font-weight: 600; margin-bottom: 8px; color: var(--tinte); }
.abo-zeile.leise { opacity: .72; }

/* ── Die breite Tafel (29.9.2026) ──────────────────────────────────────
   Gabriel: «mach es immer in der vollansicht oder halt das man es
   schieben kann oben und unten ansicht.» Beides: Listen nehmen die ganze
   Breite (.plvoll), und was dann noch zu breit ist, rollt seitlich - mit
   einer Leiste oben, die mitläuft und oben stehen bleibt (.ploben, von
   liste.js gebaut), und dem Menü ⋮ immer rechts im Blick. */
.inhalt:has(.plvoll) { max-width: none; }
.ploben { overflow-x: auto; overflow-y: hidden; position: sticky; top: 0; z-index: 4; min-height: 13px;
  background: var(--weiss); border-bottom: var(--linie); scrollbar-width: auto; }
.ploben > div { height: 1px; }
/* Oben stehen bleiben kann die Leiste nur, wenn die Karte kein Rollbereich
   ist: overflow: clip schneidet an der Rundung ab wie hidden, rollt aber nicht. */
@supports (overflow: clip) { .karte:has(> .pltafel.pljs), .karte:has(.ploben) { overflow: clip; } }
.ploben::-webkit-scrollbar { height: 12px; }
.ploben::-webkit-scrollbar-thumb { background: var(--stein-300); border-radius: 6px; }
.pltafel.plbreit td.plmenue-zelle,
.pltafel.plbreit thead tr > :last-child { position: sticky; right: 0; z-index: 2; background: var(--weiss);
  box-shadow: -12px 0 12px -12px rgba(0,0,0,.28); }
table.blatt tbody tr:hover > td.plmenue-zelle { background: var(--stein-200); }
.pltafel.plbreit td.plmenue-zelle:has(.plmenue[open]) { z-index: 30; }
/* Ein aufgeklapptes Formular bleibt im sichtbaren Teil, auch wenn die Tafel gerollt ist. */
.pltafel.plbreit tr.planhang > td > details { position: sticky; left: 10px;
  width: calc(var(--plsicht, 100%) - 20px); box-sizing: border-box; }
/* Der Name öffnet den Kontakt (wie bei bexio). */
a.plname { color: inherit; font-weight: 500; }
a.plname:hover { color: var(--moos); }

/* ── Anmeldung: der Weg zum Passwort (1.10.2026) ───────────────────────
   panel/passwort.php und der Link darunter auf anmelden.php. Tippflaechen
   mindestens 44 px hoch - die App wird mit dem Daumen bedient. */
.anm-vergessen { margin: 16px 0 0; text-align: center; font-size: 14.5px; }
.anm-vergessen a { display: inline-block; padding: 12px 8px; min-height: 44px; }
.anm-text { font-size: 14.5px; margin: 0 0 18px; color: var(--tinte-70); }
.anm-text.anm-klein { font-size: 13.5px; color: var(--tinte-45); margin: 16px 0 0; }
.knopf.anm-breit { width: 100%; justify-content: center; min-height: 46px; }

/* ── Angemeldete Geräte (panel/sicherheit.php, 1.10.2026) ─────────────── */
.geraete { list-style: none; margin: 0 0 16px; padding: 0; }
.geraete li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: var(--linie); }
.geraete li:first-child { border-top: 0; padding-top: 0; }
.geraete .geraet-name { font-weight: 600; color: var(--tinte); }
.geraete .geraet-wann { font-size: 13px; color: var(--tinte-45); }
.geraete form { margin: 0; flex: none; }
.geraete .knopf, .geraete-alle .knopf, .app-sperre .knopf { min-height: 44px; }
.app-sperre-stand { font-weight: 600; color: var(--tinte); }

/* ── In der App: randlos, mit sicheren Rändern (1.10.2026) ─────────────
   Die App zeigt die Seiten bis unter Statusleiste und Home-Balken. Mit
   «viewport-fit=cover» (pxaViewport, nur in der App) kennt CSS deren
   Masse; im Browser sind alle env()-Werte 0 und es aendert sich nichts.
   max(): nie weniger als der bisherige Abstand. Nur am Schirm - im Druck
   gilt weiter der Rand aus @media print. */
@media screen { @supports (padding: max(0px)) {
  .seitenleiste { padding-top: max(18px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); }
  .anmeldung { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
                        max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .inhalt { padding-right: max(32px, env(safe-area-inset-right)); }
  @media (max-width: 900px) {
    .seitenleiste { padding-top: max(10px, env(safe-area-inset-top));
                    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .inhalt { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
              padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .kamera-knopf { right: max(18px, calc(env(safe-area-inset-right) + 10px)); }
  }
} }

/* ── QR-Rechnung scannen (panel/qr-scan.js, 2.10.2026) ────────────────
   Die Knoepfe stehen zuoberst im Formular einer Lieferantenrechnung und
   bei jedem Beleg der Inbox; was gelesen wurde, ist kurz hinterlegt,
   bis man es aendert. Das Kamerafenster deckt die Seite. */
.qrscan { margin: 0 0 16px; padding: 12px 14px; border: var(--linie); border-radius: var(--rund-s); background: var(--stein-100); }
.qrscan-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.qrscan-knoepfe .hinweis { flex: 1 1 220px; margin: 0; font-size: 12.5px; color: var(--tinte-45); }
.qrscan-stand { margin-top: 10px; font-size: 13.5px; color: var(--tinte-70); }
.qrscan-stand.gut    { color: var(--gruen); }
.qrscan-stand.fehler { color: var(--ziegel); }
.qrscan[aria-busy="true"] .qrscan-stand::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  border: 2px solid var(--stein-400); border-top-color: var(--moos); border-radius: 50%; animation: qrdreh .8s linear infinite; vertical-align: -1px; }
@keyframes qrdreh { to { transform: rotate(360deg); } }
.qrscan-hinweise { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--tinte-70); }
.qrscan-hinweise li + li { margin-top: 3px; }
.qrgefuellt { background-color: var(--moos-blass) !important; }
.qrfenster { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 16px 16px max(24px, env(safe-area-inset-bottom)); gap: 14px; }
.qrfenster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qrfenster-rahmen { position: absolute; left: 50%; top: 45%; width: min(70vw, 52vh); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.qrfenster-text { position: relative; margin: 0; color: #fff; font-size: 15px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.qrfenster .knopf { position: relative; min-width: 160px; min-height: 44px; }

/* ── TABELLEN IN KARTEN ROLLEN AM TELEFON (2.10.2026) ──────────────────
   Ein Tester, bei 390 px und in der App: In beleg-neu.php waren MWST-Satz
   und Ertragskonto jeder Position nicht zu erreichen, in der Buchhaltung
   die Betragsspalte und der Kontenplan, dazu Mahnungen, Protokoll,
   Benutzer, Beleg. «.karte { overflow: hidden }» schnitt jede Tabelle an
   der Kartenkante ab, und rollen konnte nur eine Tabelle in .pltafel.
   Jetzt rollt am Telefon die Karte selbst seitlich, sobald eine Tabelle
   darin breiter ist - ohne zusaetzliches Markup auf den Seiten. Die
   Rundung bleibt: Auch ein Rollbereich schneidet an ihr ab. Senkrecht
   bleibt es «hidden» wie vorher. Karten mit eigener Rollleiste (.pltafel
   mit liste.js, .ploben) behalten «clip» - die Regel oben ist genauer.
   Am Schirm (> 900 px) aendert sich nichts. */
@media (max-width: 900px) {
  .karte:has(table) { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* ── TIPPFLAECHEN AM TELEFON (2.10.2026) ───────────────────────────────
   Gemessen bei 390 px: Menue 35 px hoch, DE/FR/IT/EN 34 × 30, «Abmelden»
   62 × 21, das Zeilenmenue ⋮ 30 × 30, die Filterfelder 25 px, Kaestchen
   13 px. Apple verlangt 44 pt, WCAG 2.5.5 ebenso. Nur am Telefon - am
   Schirm mit der Maus waere es nur Luft. Die Filter und die Suche
   bekommen dazu 16 px Schrift: darunter zoomt iOS beim Antippen die
   ganze Seite (wie bei .feld input). */
@media (max-width: 900px) {
  .nav a { min-height: 44px; }
  .reiter a { display: inline-flex; align-items: center; min-height: 44px; }
  .knopf { min-height: 44px; }
  .knopf.klein { min-height: 40px; }
  .nutzer .abmelden { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px; }
  .sprachwahl button { min-width: 44px; min-height: 44px; }
  td.plmenue-zelle { width: 52px; }
  .plmenue > summary { width: 44px; height: 44px; }
  .plmenue-liste a, .plmenue-liste button { padding: 12px 16px; }
  .plwerkzeug input[type=search] { min-height: 44px; font-size: 16px; }
  tr.plfilter input, tr.plfilter select { min-height: 40px; font-size: 16px; }
  .plspalten-liste label { min-height: 44px; }
  .plspalten-liste .plspalten-zurueck { padding: 12px 0; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; }
  /* Ein Kaestchen in einem Label ohne eigene Bauart: das ganze Label ist die
     Tippflaeche. Labels mit eigener Klasse (.haken, .zf-haken, .freigabe-ok)
     und die Spaltenwahl (Liste untereinander) behalten ihre Anordnung. */
  label:not([class]):has(> input[type="checkbox"]), label:not([class]):has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
  .feld label:not([class]):has(> input[type="checkbox"]), .feld label:not([class]):has(> input[type="radio"]) { display: flex; }
  .plspalten-liste label:has(> input[type="checkbox"]) { display: flex; }
  label.zf-haken, label.freigabe-ok { min-height: 44px; }
  .zeileweg { min-width: 44px; min-height: 44px; }
  .blatt tr.kundeaendern summary, .blatt tr.kontoaendern summary { min-height: 44px; display: flex; align-items: center; }
  /* Der Link rechts in einer Kartenkopfzeile («Alle», «Journal»): hoeher
     tippbar, ohne die Kopfzeile hoeher zu machen. */
  .karte > h2 a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px -8px; padding: 0 8px; }
  /* Jedes Eingabefeld, auch eines ohne .feld darum (Bestaetigung des
     Jahresabschlusses, Rolle eines Benutzers). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]), select { min-height: 40px; }
  /* Felder IN einer Tabellenzeile (Positionen einer Rechnung, die Rolle
     eines Benutzers, Buchungszeilen): 40 px hoch und 16 px Schrift - die
     Seiten setzen 13-14 px inline, und darunter zoomt iOS beim Antippen.
     Und die Tabelle bekommt eine Mindestbreite: Sie rollt jetzt in ihrer
     Karte, also darf sie den Feldern Platz lassen - gemessen war das
     Preisfeld einer Position 27 px breit. */
  table.blatt td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  table.blatt td select, table.blatt td .bfeld { min-height: 40px; font-size: 16px !important; }
  table.blatt:has(> tbody > tr > td > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), > tbody > tr > td > select) { min-width: 720px; }
  table.blatt:has(> tbody > tr > td > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), > tbody > tr > td > select) td { padding-left: 6px; padding-right: 6px; }
}

/* ── DIE FEHLERSEITE (2.10.2026, pxaFehlerSeite in _rahmen.php) ────────
   «Dafür fehlt Ihnen die Berechtigung.» stand als nackter Text da - am
   Telefon winzig, in der App ohne Weg zurueck. Jetzt im Kasten der
   Anmeldung, mit einem Knopf zur Uebersicht. */
.fehlerseite h1 { margin-bottom: 14px; }
.fehlerseite .meldung { margin-bottom: 20px; }
.fehlerseite-weg { margin: 0; }

/* --- Eigenes Postfach: Absenderzeile und Ampel (2.10.2026) ------------
   Die Absenderzeile zeigt, was der Empfaenger sieht. Die Ampel sagt je
   DNS-Eintrag, ob er da ist - mit einem Punkt, der auch ohne Farbe
   gelesen werden kann, weil der Satz daneben es ausspricht. */
.absender-zeile {
  background: var(--stein-100); border: var(--linie); border-radius: var(--rund-s);
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.ampel { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; line-height: 1.45; }
.ampel li { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; }
.ampel li::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--stein-300); transform: translateY(-1px);
}
.ampel li.gut::before     { background: var(--gruen); }
.ampel li.warnung::before { background: var(--ocker); }
.ampel li.fehler::before  { background: var(--ziegel); }

/* Der Weg zurück in die App-Ansicht (panel/_app.php) - nur in der App
   (panel/_rahmen.php). Gross genug für den Daumen. */
.app-ansicht { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; margin: 4px 8px 8px;
  border-radius: var(--rund-s); background: var(--moos-blass); color: var(--moos); font-weight: 600; text-decoration: none; }