:root{ color-scheme:dark; /* Hintergrund tiefer als die Karten, nicht knapp darunter: bei #1c1e26 gegen #252833 lag zwischen Karte und Grund so wenig Helligkeit, dass die Liste als eine graue Fläche las und die Ränder nur zu erahnen waren. Verändert wurde der Grund, nicht die Karte – so bleiben alle Flächen, die auf --card sitzen, untereinander stimmig. */ --bg:#14161f; --card:#252833; --card-2:#2f3340; --ink:#f1f2f6; --muted:#9498a8; /* Fläche der Verlaufsbalken: kräftiger als --card-2, das auf der Karte fast unsichtbar war, aber ruhiger als die Akzentfarbe, die dem gewählten Monat vorbehalten bleibt. */ --balken:#414761; --line:#3a3e4d; --accent:#5b7cfa; --on-accent:#ffffff; --red:#f09595; --red-soft:#3d2422; --green:#6fcf97; --green-soft:#1d3327; /* Warnstufe zwischen gruen und rot – bisher nur beim Budgetbalken. */ --amber:#e0b05c; --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28); --scrim:rgba(0,0,0,.6); /* Maßstab der ganzen Ansicht. Das Skript im Kopf setzt ihn aus der Bildschirmbreite; 1 ist nur der Wert, bis es gelaufen ist. */ --skala:1; /* Die Werte aus env() sind echte Bildschirm-Pixel und würden im skalierten Zeichenraum um den Maßstab mitwachsen – der Rand zur Kerbe bliebe sonst nicht der, den das Gerät angibt. Deshalb hier einmal zurückgerechnet und ab dann nur noch diese Größen verwenden. */ --sa-o:calc(env(safe-area-inset-top) / var(--skala)); --sa-r:calc(env(safe-area-inset-right) / var(--skala)); --sa-u:calc(env(safe-area-inset-bottom) / var(--skala)); --sa-l:calc(env(safe-area-inset-left) / var(--skala)); } :root[data-theme="light"]{ color-scheme:light; --bg:#f5f6fa; --card:#ffffff; --card-2:#eef0f7; --ink:#1b1d27; --muted:#6b6f80; --line:#e3e5ee; --accent:#4a63e0; --on-accent:#ffffff; --balken:#c9cfe4; --red:#c0392b; --red-soft:#fbe6e3; --green:#1f9d55; --green-soft:#e3f5ea; --amber:#b9761a; --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.07); --scrim:rgba(30,28,40,.34); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Von Hand zoomen ist abgeschaltet, die App stellt sich selbst richtig ein: pan-x pan-y erlaubt weiter das Wischen, unterbindet aber Aufziehen und Doppeltippen. Das viewport-Meta allein genügt dafür nicht überall. */ html,body{margin:0;padding:0;touch-action:pan-x pan-y} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg);color:var(--ink); padding:var(--sa-o) var(--sa-r) calc(var(--sa-u) + 96px) var(--sa-l); -webkit-text-size-adjust:100%; } .wrap{max-width:600px;margin:0 auto;padding:14px} header{display:flex;align-items:center;gap:8px;padding:6px 2px 4px} header h1{display:flex;align-items:center;gap:9px;font-size:21px;margin:0;font-weight:800;letter-spacing:-.3px} header h1 svg{width:23px;height:23px;flex:none;color:var(--accent)} header h1 svg.marke{width:31px;height:22px} .personBtn{ margin-left:auto;height:38px;flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink); border-radius:11px;display:grid;place-items:center;cursor:pointer; padding:0 14px;font-family:inherit;font-size:13px;font-weight:700; } .themeBtn{ width:38px;height:38px;flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink); border-radius:11px;display:grid;place-items:center;cursor:pointer; } .themeBtn svg{width:17px;height:17px} :root[data-theme="light"] .themeBtn svg{transform:scaleX(-1)} .status{font-size:11px;color:var(--muted);padding:0 4px 10px} /* Ungesichert oder offline: dieselbe Zeile, aber nicht mehr zu übersehen. Kein Rot – nichts ist kaputt, es ist nur noch nicht durch. */ .status.warnt{color:var(--accent);font-weight:700} /* Segment-Steuerung statt vier einzelner Pillen: ein zusammenhängendes Feld, in dem ein Schieber zur gewählten Fläche wandert. Vier gleich große Umrandungen sahen aus wie vier Knöpfe, die man drücken kann – hier geht es aber um EINE Wahl aus vieren, und genau das zeigt ein Segment. Der Schieber liegt hinter den Beschriftungen (z-index) und bewegt sich um seine eigene Breite je Position; weil alle vier Felder gleich breit sind (flex:1), genügt dafür translateX in Vielfachen von 100 %. */ .tabs{position:relative;display:flex;margin:8px 0 14px; background:var(--card-2);border-radius:13px;padding:3px} .tab-schieber{position:absolute;top:3px;bottom:3px;left:3px;z-index:0; width:calc((100% - 6px) / 4);border-radius:10px;background:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .22s cubic-bezier(.4,0,.2,1)} /* Wer Bewegung abgestellt hat, bekommt den Schieber ohne Wanderung. */ @media (prefers-reduced-motion: reduce){ .tab-schieber{transition:none} } .tab{ /* Schrift/Innenabstand knapper als früher. Als "Persönlich" noch das längste Label war, blieben auf einem schmalen Handy (360px) bei 13.5px/4px nur rund 5px Luft neben dem Text. Seit daraus "Ausgaben" wurde, ist "Übersicht" das längste – enger gesetzt bleibt es trotzdem, damit ein künftiges längeres Label nicht sofort umbricht. */ position:relative;z-index:1; /* 9px Innenabstand ergaben 39px Hoehe - unter den 44px, die Apple als Mindestmass nennt. Der Schieber darunter richtet sich ueber top/bottom aus und waechst von allein mit. */ flex:1;text-align:center;padding:13px 3px;border-radius:10px;font-size:12.5px;font-weight:700; background:transparent;border:none;color:var(--muted);cursor:pointer;font-family:inherit; transition:color .18s ease; } .tab.active{color:var(--on-accent)} section{display:none} /* ---------- Hinweis auf Einträge anderer ---------- Im Seitenfluss unter den Reitern, nicht schwebend über dem Kopf: Er verdeckt damit nichts und darf deshalb auch stehen bleiben, bis ihn jemand zur Kenntnis nimmt. */ #neuLeiste[hidden]{display:none} /* Die ganze Leiste ist die Schaltfläche – kein Pfeil, kein Kreuz daneben. Ein Tipp irgendwo darauf räumt sie weg, und die Trefferfläche ist damit so groß wie der Hinweis selbst. */ /* Bis 2026-08 stand hier eine einzige Leiste „3 neue Einträge“, und ein Tipp darauf hakte alle drei zugleich ab: WAS dazugekommen war, bekam man dabei nie zu Gesicht. Jetzt trägt der Kopf nur noch die Summe, und darunter steht jeder Eintrag in einer eigenen Zeile – mit Titel, Datum, Gruppe, Betrag und eigenem Haken. Die Sammelaktion bleibt als Knopf im Kopf, für die Tage, an denen man nur wegräumen will. */ .neu-block{ margin:0 0 12px; background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:12px;box-shadow:var(--shadow);overflow:hidden; animation:neuLeisteRein .22s cubic-bezier(.2,.7,.2,1); } @keyframes neuLeisteRein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .neu-block{animation:none} } .neu-kopf{display:flex;align-items:flex-start;gap:10px;padding:11px 13px} /* Der Punkt sitzt auf Höhe der ersten Zeile, nicht mittig zum ganzen Kopf – sonst rutscht er mit einer zweiten Zeile weiter nach unten. */ .neu-punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px} .neu-text{flex:1;min-width:0} .neu-haupt{display:block;font-size:13px;font-weight:700} /* Die Zahlen sind der Grund, warum man hinsieht – etwas kräftiger als die Titelzeile darüber, aber noch unter der Überschrift. */ .neu-zahlen{display:block;font-size:12px;color:var(--ink);margin-top:4px; font-variant-numeric:tabular-nums} /* Dieselbe Akzentoptik wie „Ausgleichen“ und „Neue Gruppe“ – die Sprache der App für „das ist hier die Handlung“, ohne gefüllte Fläche. */ .neu-alle{ flex:none;font-family:inherit;font-size:10.5px;font-weight:700;padding:6px 10px;border-radius:9px; background:transparent;border:1px solid var(--accent);color:var(--accent);cursor:pointer; } /* Linke Einrückung 31px: 13px Innenrand + 8px Punkt + 10px Lücke. Damit beginnen die Titel der Zeilen genau unter der Überschrift im Kopf. */ .neu-zeile{display:flex;align-items:center;gap:8px;padding:0 13px 0 31px;border-top:1px solid var(--line)} /* Titel und Zahlen sind zusammen die Fläche, die zum Eintrag führt – sie füllt die Zeile, damit man nicht auf den Text zielen muss. */ .neu-tipp{ flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 0; font-family:inherit;color:inherit;text-align:left;background:none;border:none;cursor:pointer; } .neu-tipp:hover .neu-titel{color:var(--accent)} .neu-spalte{flex:1;min-width:0} .neu-titel{display:block;font-size:13px;font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .neu-meta{display:block;font-size:11px;color:var(--muted);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .neu-geld{flex:none;text-align:right;font-variant-numeric:tabular-nums} .neu-betrag{display:block;font-size:13px;font-weight:800} .neu-anteil{display:block;font-size:10.5px;color:var(--muted);margin-top:1px} /* Der Haken ist die zweite Handlung je Zeile: nur zur Kenntnis nehmen, ohne hinzuspringen. Rund und in Grau, damit er neben dem Betrag nicht lauter wirkt als der Eintrag selbst. */ .neu-haken{ flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-family:inherit; } .neu-haken:hover{border-color:var(--accent);color:var(--accent)} /* Wie „Weitere N anzeigen“ unter den Ausgabenlisten: der Rest ist erreichbar, steht aber nicht als Zeilenwand über der Auswertung. */ .neu-mehr{ display:block;width:100%;padding:9px 13px;border:none;border-top:1px solid var(--line); background:transparent;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700; cursor:pointer;text-align:center; } .neu-mehr:hover{color:var(--ink)} section.active{display:block} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px} /* ---------- Übersicht ---------- */ .monatnav{display:flex;align-items:center;gap:10px;padding:2px 4px 14px} /* 34px waren unter dem Mindestmass fuer einen Daumen (44px bei Apple, 48dp bei Android) - und das betrifft hier die beiden Pfeile, mit denen man durch die Monate blaettert, also einen der haeufigsten Griffe ueberhaupt. */ .monatnav button{ width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink); font-size:16px;cursor:pointer; } /* Der ⋯-Knopf traegt .karte-menue und damit einen negativen Rand, der ihn in einer Kartenkopfzeile nach oben rechts zieht. In der Monatsleiste steht er frei und soll genau dort bleiben, wo die Reihe ihn hinsetzt. */ .monatnav .karte-menue{margin:0} /* Der Monatsname ist selbst der Weg zurück in den laufenden Monat. Wer weit geblättert hat, klickt sich sonst Monat für Monat zurück. */ /* width/height ausdrücklich zurücknehmen: .monatnav button darüber setzt 34x34 für die beiden Pfeile, und das gälte sonst auch hier. */ .monatnav .lbl{ flex:1;width:auto;height:44px;text-align:center;font-weight:700;font-size:15px;text-transform:capitalize; font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:6px 4px; } .monatnav .lbl:hover{color:var(--accent)} /* Monat/Jahr als Segmentpaar links in der Monatsleiste – dort, wo der Zeitraum ohnehin steht. Eine eigene Zeile darüber wäre eine ganze Zeilenhöhe für zwei Wörter gewesen. */ .zeitraum-umschalter{flex:none;display:flex;gap:2px;background:var(--card-2);border-radius:11px;padding:2px} .zeitraum-umschalter button{ width:auto;height:40px;padding:0 10px;border:none;border-radius:9px;background:transparent; font-family:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer; } .zeitraum-umschalter button.an{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)} /* Zwölf Spalten statt sechs: die Polsterung in den Spalten muss schmaler werden, sonst bleibt für die Säule selbst kaum etwas übrig. */ .trend-reihe.jahr .trend-monat{padding:0 1px} .trend-reihe.jahr .trend-lbl{font-size:9.5px} /* Die wichtigste Karte der App soll sich vom Rest auch ansehen lassen: ein Hauch Akzentfarbe oben links, der nach unten in die normale Kartenfarbe ausläuft. Kennt ein Browser color-mix() nicht, fällt die ganze Regel weg und es bleibt beim schlichten Kartenhintergrund aus .card darüber. */ .summe-card{ text-align:center;padding:24px 18px; background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, var(--card)) 0%, var(--card) 58%); } .gesperrt-card{text-align:center;padding:32px 20px} .gesperrt-card .icon{width:32px;height:32px;color:var(--muted);margin-bottom:12px} .gesperrt-card .txt{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:16px} .gesperrt-card button{ font-family:inherit;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:11px; background:var(--accent);color:var(--on-accent);border:none;cursor:pointer; } .summe-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .summe-zahl{font-size:36px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums} .summe-delta{font-size:12.5px;margin-top:6px;color:var(--muted)} .summe-delta.hoch{color:var(--red)} .summe-delta.runter{color:var(--green)} /* 12px statt der früheren 14px: passt damit zum selben Rhythmus, den auch der Abstand zwischen den Karten weiter unten benutzt (.card{margin-bottom:12px}), statt einem Wert, der zu keinem anderen Abstand im Block passte. */ /* Spalten- und Zeilenabstand bewusst getrennt: 18px nebeneinander (Desktop/ breites Handy), aber nur 6px übereinander, wenn "persönlich" und "aus geteilten Ausgaben" auf schmalen Handys umbrechen – sonst stand der Zeilenabstand (vorher gemeinsam 18px) mit der Prozent-Zeile darüber näher zusammen als die beiden Zeilen der Aufteilung selbst untereinander. */ .summe-split{display:flex;justify-content:center;column-gap:18px;row-gap:6px;margin-top:12px;font-size:12.5px;color:var(--muted);flex-wrap:wrap} .summe-split b{color:var(--ink);font-weight:700} /* ---------- Verlauf über sechs Monate ---------- Sechs Balken unter der Summe: wohin der Monat gehört, sieht man erst im Vergleich mit den Nachbarmonaten. Jeder Balken ist zugleich der Sprung in seinen Monat, und die beiden Pfeile daneben schieben den Ausschnitt – zusammen ist das die einzige Monatsnavigation der Übersicht. */ .trend{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} /* Eigene Reihe für die Balken, damit die beiden Pfeile die Breite der sechs gleich breiten Spalten nicht verziehen. */ /* Kein Abstand zwischen den Spalten, der Abstand sitzt als Polsterung IN ihnen: nur so stoßen die Säulen aneinander und ihre Unterkanten ergeben eine durchgehende Grundlinie. Mit gap wäre die Linie sechsmal unterbrochen – und ohne Grundlinie schwebten die Balken im Nichts. */ .trend-reihe{flex:1;min-width:0;display:flex;align-items:flex-end;gap:0;position:relative} /* Die Vergleichslinie: Hoehe des mittleren Monats, quer ueber alle Spalten. Sie liegt VOR den Balken. Hinter ihnen war sie faktisch unsichtbar – die Saeulen fuellen ihre Spalte ganz aus, uebrig blieben ein paar Striche in den Fugen. Eine Bezugslinie, die man suchen muss, ist keine; sie schneidet die Balken also, so wie es eine Ziellinie tun soll. Gestrichelt und zurueckgenommen, damit sie trotzdem nicht wie ein Messwert aussieht. */ .trend-mittel{ position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:3; /* top statt bottom – siehe Kommentar bei mittelLinie in app.js. */ border-top:1px dashed var(--ink);opacity:.45; } /* Zahlen unter der Reihe – was die Balkenlaengen nicht hergeben. */ .trend-fuss{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px; margin-top:9px;font-size:11px;color:var(--muted);line-height:1.4; } .trend-fuss-wert b{color:var(--ink);font-weight:700} /* Genau so hoch wie eine Balkensäule samt Grundlinie (.trend-saeule, 56+1): so sitzt der Pfeil auf Höhe der Balken und die Monatskürzel darunter bleiben frei. */ .trend-pfeil{ flex:none;width:26px;height:57px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink); padding:0;cursor:pointer; } .trend-pfeil:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} /* Am Rand der vorhandenen Daten gibt es nichts mehr zu holen – der Pfeil bleibt sichtbar, damit die Reihe nicht springt, ist aber wirkungslos. */ .trend-pfeil:disabled{opacity:.3;cursor:default} .trend-monat{ flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px; background:none;border:none;padding:0 3px;cursor:pointer;font-family:inherit; } /* Feste Gesamthöhe (siehe TREND_HOEHE im Skript), der Balken wächst darin von unten: sonst säßen die Monatskürzel je nach Höhe des Balkens auf verschiedenen Linien. Die Unterkante trägt die Grundlinie. */ .trend-saeule{width:100%;height:56px;display:flex;align-items:flex-end; border-bottom:1px solid var(--line);box-sizing:content-box} /* Oben rund, unten eckig: der Balken steht auf der Grundlinie, statt sie mit abgerundeten Ecken anzuschneiden. */ .trend-balken{width:100%;border-radius:4px 4px 0 0;background:var(--balken);transition:background .18s} .trend-monat.aktiv .trend-balken{background:var(--accent)} .trend-monat:hover .trend-balken{background:var(--accent);opacity:.75} .trend-lbl{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap} .trend-monat.aktiv .trend-lbl{color:var(--ink)} /* Zwei Ebenen statt einer umbrechenden Reihe. Hier stand vorher EINE Flex-Reihe mit flex-wrap:wrap, damit die Zusatzzeile (.kat-geteilt) auf einer eigenen Zeile landen konnte. Der Umbruch galt damit aber auch für alles andere: sobald Name, Balken und Betragsspalte nicht mehr nebeneinander passten - auf einem 360px breiten Telefon mit --skala 1.15 ist das JEDE Zeile -, rutschte die Betragsspalte unter den Kategorienamen und die Liste war nicht mehr lesbar. Die drei Spalten stehen deshalb in einer eigenen Reihe, die gar nicht umbrechen kann; die Zusatzzeile ist ihre Schwester darunter. */ .kat-zeile{display:flex;flex-direction:column;padding:9px 0} .kat-hauptzeile{display:flex;align-items:center;gap:10px;min-width:0} .kat-zeile:not(:last-child){border-bottom:1px solid var(--line)} /* Der Name bekommt jetzt den Platz, der übrig ist, statt fester 96px: bei "Rund ums Auto" oder "Krankenversicherung" wurde vorher abgeschnitten, während daneben der halbe Balken leer stand. Der Balken behält eine feste, bescheidene Breite – vergleichen lässt er sich auch schmal, und Namen lesen zu können ist wichtiger. */ .kat-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Zusatzzeile unter der ganzen Kategoriezeile, eingerueckt bis hinter den Farbpunkt (9px Punkt + 7px Abstand). Sie steht nur dort, wo geteilte Ausgaben in die Kategorie einfliessen, und nennt, wieviel davon aus ihnen stammt. Ohne sie ist einer Kategoriesumme nicht anzusehen, dass geteilte Rechnungen darin nur mit dem eigenen Anteil zaehlen - eine Summe kann rein zufaellig wie der volle Betrag einer einzelnen Rechnung darin aussehen. Sie nimmt die volle Zeilenbreite (flex-basis 100%) statt in der Namensspalte zu stehen: dort blieben neben Balken (88px) und Betragsspalte (86px) auf einem 360px breiten Telefon nur 101px, und der Text braucht rund 190px - er waere also genau dort abgeschnitten worden, wo er gebraucht wird. */ /* Oben knapp, unten grosszuegiger: bei gleichem Abstand nach oben und unten sass die Zeile genauso dicht an der Trennlinie wie an ihrer eigenen Kategorie und las sich wie eine Ueberschrift der naechsten. */ .kat-geteilt{margin-top:0;margin-bottom:5px;padding-left:16px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Feste 88px, darf aber im Notfall nachgeben: auf sehr schmalen Geräten lieber ein kürzerer Balken als ein abgeschnittener Betrag. Weil alle Zeilen dieselbe Breite zur Verfügung haben, geben sie auch gleich viel nach - die Balken bleiben untereinander vergleichbar. */ .kat-bar-bg{flex:0 3 88px;min-width:40px;height:8px;border-radius:99px;background:var(--card-2);overflow:hidden} .kat-bar{height:100%;border-radius:99px;background:var(--accent)} /* Feste Mindestbreite, sonst richtet sich die Spalte nach dem längsten Betrag der jeweiligen Zeile und die Balken links davon begännen in jeder Zeile woanders – vergleichen ließen sie sich dann nicht mehr. */ .kat-werte{flex:none;min-width:86px;text-align:right;white-space:nowrap} .kat-betrag{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums} /* Der Balken ist auf die GRÖSSTE Kategorie normiert – gut zum Vergleichen, aber die oberste sieht damit immer nach "alles" aus. Der Prozentwert darunter bezieht sich deshalb auf die Monatssumme und sagt, was die Kategorie tatsächlich ausmacht. */ /* 10,5px war unter der Grenze, ab der sich eine Zahl noch nebenbei ablesen lässt – zumal grau auf dunklem Grund. Etwas größer und heller, aber weiter deutlich hinter dem Betrag: der bleibt die Hauptzahl der Zeile. */ .kat-anteil{display:block;font-size:11.5px;color:var(--ink);opacity:.62;font-variant-numeric:tabular-nums;margin-top:2px} /* Zweite Zeile je Kategorie im Verwalten-Blatt: Oberkategorie und Budget. Bewusst unter der Namenszeile statt daneben – auf 390 px waere daneben nichts mehr lesbar. */ .kv-zusatz{ display:flex;flex-direction:column;gap:8px; padding:0 2px 12px;margin-top:-4px;border-bottom:1px solid var(--line); } .kv-ober{display:flex;flex-wrap:wrap;align-items:center;gap:5px} .kv-budget{display:flex;align-items:center;gap:6px} .kv-lbl{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; color:var(--muted);margin-right:2px; } .ober-chip{ font-family:inherit;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px; background:var(--card-2);border:1px solid var(--line);color:var(--muted);cursor:pointer; } .ober-chip.an{background:var(--accent);border-color:transparent;color:var(--on-accent)} .ober-chip.neu{border-style:dashed} .ober-chip.weg{color:var(--red)} .kv-budget-feld{ width:78px;font-family:inherit;font-size:12.5px;padding:6px 8px;border-radius:9px; background:var(--card-2);border:1px solid var(--line);color:var(--ink); } .kv-einheit{font-size:12px;color:var(--muted);margin-left:-2px} /* ---------- Oberkategorien, Budget, Prognose ---------- */ /* Kopfzeile eines Oberkategorie-Blocks. Die ganze Zeile klappt auf und zu – ein eigener kleiner Pfeilknopf daneben waere ein zweites Ziel fuer dieselbe Handlung. */ .ober-kopf{ width:100%;display:flex;align-items:center;gap:8px; font-family:inherit;font-size:13px;font-weight:700;color:var(--ink); background:none;border:none;padding:12px 2px 8px;cursor:pointer;text-align:left; } .ober-kopf + .ober-kopf{border-top:1px solid var(--line)} .ober-pfeil{flex:none;display:flex;width:14px;height:14px;color:var(--muted);transition:transform .18s} .ober-pfeil svg{width:14px;height:14px} .ober-kopf.offen .ober-pfeil{transform:rotate(90deg)} .ober-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ober-anzahl{ flex:none;font-size:10.5px;font-weight:700;color:var(--muted); background:var(--card-2);border-radius:999px;padding:2px 7px; } .ober-summe{flex:none;font-size:12px;font-weight:700;color:var(--ink)} .ober-inhalt{padding-left:8px;border-left:2px solid var(--line);margin-left:5px} @media (prefers-reduced-motion: reduce){ .ober-pfeil{transition:none} } /* Budgetbalken. Anders als der Vergleichsbalken daneben ist er linear und bei 100 % gedeckelt – er misst, statt zu vergleichen. Deshalb auch die Ampelfarben: hier gibt es ein Ziel, das man erreichen oder reissen kann. */ .kat-budget{display:flex;align-items:center;gap:8px;margin-top:6px} .kat-budget-bg{flex:1;min-width:0;height:4px;border-radius:999px;background:var(--card-2);overflow:hidden} .kat-budget-bar{height:100%;border-radius:999px;background:var(--green);transition:width .2s} .kat-budget.knapp .kat-budget-bar{background:var(--amber)} .kat-budget.drueber .kat-budget-bar{background:var(--red)} .kat-budget-txt{flex:none;font-size:10.5px;color:var(--muted)} .kat-budget.drueber .kat-budget-txt{color:var(--red)} /* Was in diesem Monat noch kommt. Eigene Zeile unter der Aufteilung, mit Trennlinie: Die Zahlen darueber sind gemessen, diese hier ist eine Vorschau – der Unterschied soll sichtbar sein. */ .summe-prognose{ display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px; margin-top:10px;padding-top:10px;border-top:1px solid var(--line); font-size:11.5px;color:var(--muted); } .summe-prognose b{color:var(--ink);font-weight:700} .prognose-ziel b{color:var(--accent)} .hinweis{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px} /* Eine Fixkostenregel, die der Server nicht buchen konnte. Spannt sich ueber beide Spalten der Zeile, damit der Satz nicht in der schmalen Titelspalte umbricht. */ .fx-fehler{grid-column:1 / -1;font-size:11.5px;color:var(--red);margin-top:4px;line-height:1.4} .fx-zeile.hat-fehler{background:var(--red-soft)} .leer{color:var(--muted);text-align:center;padding:30px 10px;font-size:13px} .monatnav.nur-menue{justify-content:flex-end} /* Der erste Eindruck eines leeren Haushalts. Steht dort, wo sonst die Summenkarte steht, und verschwindet mit dem ersten Eintrag von selbst. */ .erst-karte h3{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:-.2px} .erst-karte p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.5} .erst-liste{margin:0 0 14px;padding-left:20px;font-size:13px;line-height:1.55;color:var(--muted)} .erst-liste li{margin-bottom:7px} .erst-liste li:last-child{margin-bottom:0} .erst-liste b{color:var(--ink);font-weight:700} .erst-knoepfe{display:flex;gap:8px;flex-wrap:wrap} /* ---------- Ausgaben ---------- */ /* Schnellerfassung ueber der Ausgabenliste. Waagerecht scrollbar statt umbrechend: Die Zeile soll eine Zeile bleiben, auch wenn sechs Vorlagen mit langen Titeln darin stehen – sonst schoebe sie die Liste je nach Titellaenge unterschiedlich weit nach unten. */ .vorlagen-leiste{ display:flex;align-items:center;gap:6px;margin-bottom:10px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .vorlagen-leiste::-webkit-scrollbar{display:none} .vorlagen-leiste[hidden]{display:none} .vorlagen-label{ flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase; letter-spacing:.4px;color:var(--muted);padding-right:2px; } .vorlage-chip{ flex:none;display:inline-flex;align-items:center;gap:6px; font-family:inherit;font-size:12.5px;font-weight:600; padding:8px 12px;border-radius:999px; background:var(--card);border:1px solid var(--line);color:var(--ink);cursor:pointer; white-space:nowrap; } .vorlage-chip:active{background:var(--card-2)} .vorlage-chip .vorlage-gruppe{font-size:10.5px;font-weight:600;color:var(--muted)} /* Im Blatt: derselbe Farbpunkt wie in der Liste, damit ein Vorschlag mit Kategorie auf den ersten Blick von einer reinen Titelergaenzung zu unterscheiden ist. */ .vorschlag-vorlage{display:inline-flex;align-items:center;gap:5px} /* Was eine Suche oder ein Filter zusammengetragen hat, in einer Zeile. */ .treffer-zeile{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; margin:-4px 2px 10px;font-size:11.5px;color:var(--muted); } .treffer-zeile[hidden]{display:none} .treffer-summe b{color:var(--ink);font-weight:700} /* Sammelzeile fuer die Gruppen, in denen nichts offen ist. */ .glatt-kopf{ width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted); background:var(--card);border:1px solid var(--line);border-radius:14px; padding:12px 14px;margin-bottom:12px;cursor:pointer;text-align:left; } .glatt-kopf svg{width:15px;height:15px;flex:none;color:var(--green)} .glatt-kopf .glatt-namen{ flex:1 1 100%;font-size:11px;font-weight:500;color:var(--muted);opacity:.75; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .glatt-kopf.offen{background:none;border-style:dashed} .suchzeile{margin-bottom:10px} /* Feste Zeilenhöhe, damit Suchfeld und die beiden Filter darunter auf dieselbe Höhe kommen: 20 + 2x9 Innenabstand + 2x1 Rahmen = 40px. Ohne sie entscheidet die Schriftart über die Zeilenbox und Eingabefeld und Auswahlfeld fallen unterschiedlich hoch aus. */ .suchzeile input{ width:100%;font-family:inherit;font-size:13.5px;line-height:20px;padding:9px 12px;border-radius:10px; border:1px solid var(--line);background:var(--card);color:var(--ink); } .filterzeile{display:flex;gap:8px;margin-bottom:14px} .filterzeile .feld-auswahl{flex:1;min-width:0} .filterzeile select{ width:100%;font-family:inherit;font-size:13.5px;line-height:20px;padding:9px 12px;border-radius:10px; border:1px solid var(--line);background:var(--card);color:var(--ink); } /* Zwei Ebenen über der Liste: der Monat ist die grobe Orientierung, der Tag die feine. Der Monatskopf bleibt beim Blättern oben kleben – in einer Liste, die jetzt zusätzlich Tagesköpfe enthält, ist sonst nach zwei Wischern nicht mehr zu sehen, in welchem Monat man überhaupt liest. Er braucht dafür einen eigenen Hintergrund, sonst scheinen die Zeilen durch, und muss über den Karten liegen. Innerhalb einer Kopfzeile sind Beschriftung und Zahl gleich groß, und die ganze Zeile wird von Ebene zu Ebene kleiner: Monat 17 px · Summe 17 px (beides in Textfarbe) Tag 15 px · Summe 15 px (Summe und Datum gedämpft) Zeile 14 px Titel · Betrag 14,5 px Der Monatskopf stand zuerst als 12,5-px-Versalzeile über 16-px-Tagen – die stärkste Ebene der Liste als schwächste gezeichnet. Danach trug er zwar die größte Zahl, aber in einem 15-px-Kopf: Name und Summe passten nicht zueinander, und neben einem gleich großen Tageskopf sah die viel größere Monatssumme willkürlich aus. Eine Kopfzeile ist eine Zeile – ihre beiden Hälften gehören auf denselben Grad. Die Abstände staffeln denselben Rang: 34 px vor einem neuen Monat, 24 px vor einem neuen Tag, 12 px zwischen Monats- und Tageskopf. */ .monthhead{position:sticky;top:var(--sa-o);z-index:2;background:var(--bg); display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:26px 4px 8px;margin-bottom:2px;border-bottom:1px solid var(--line); font-size:17px;color:var(--ink);font-weight:700;letter-spacing:-.015em} .monthhead span:last-child{font-weight:800;font-variant-numeric:tabular-nums} /* Kopf über einer Gruppe von Zeilen – bei den Ausgaben ein Tag, bei den Fixkosten ein Rhythmus. Dieselbe Rolle, deshalb dieselbe Form: links die Beschriftung in Textfarbe, daneben eine gedämpfte Nebenangabe, rechts die Summe der Gruppe. Der obere Abstand trennt die Blöcke – er ist es, der die Gruppierung sichtbar macht, nicht die Schrift. */ .listenkopf{display:flex;align-items:baseline;gap:8px;padding:16px 4px 7px} /* Direkt unter einem Monatskopf weniger Abstand als zwischen zwei Tagen – aber nicht zu wenig: bei 4 px lasen sich die beiden Köpfe wie eine zweizeilige Überschrift statt wie zwei Ebenen. */ .monthhead + .listenkopf{padding-top:12px} .listenkopf-name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .listenkopf-neben{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums} .listenkopf-summe{margin-left:auto;font-size:15px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} /* Etwas knapper als früher (13/16): zusammen damit, dass eine rein persönliche Ausgabe ihre untere Zeile gar nicht mehr braucht (siehe ausgabeZeileHtml), passt im Reiter "Ausgaben" rund ein Drittel mehr Einträge auf den Bildschirm. */ .ausgabe{padding:11px 15px;cursor:pointer} .ausgabe.ausgleich{border-style:dashed} /* Die Ausgabe, wegen der man aus dem Reiter „Ausgaben“ hierher gesprungen ist – sie steht oben, muss aber auch als genau die eine erkennbar sein, sonst sucht man in einer langen Gruppenliste doch wieder danach. */ .ausgabe.hervor{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .ausgabe-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .ausgabe-titel{font-weight:700;font-size:14px} .ausgabe.ausgleich .ausgabe-titel{color:var(--accent)} .ausgabe-meta{font-size:11.5px;color:var(--muted);margin-top:3px} .ausgabe-betrag{font-weight:800;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none} .ausgabe-unten{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px} /* ---------- Wischen: Löschen und Ausgleichen ---------- Die Aktionen sitzen fest rechts unter der Karte und kommen erst zum Vorschein, wenn die Karte per Wisch nach links darüber wegzieht - .ausgabe übernimmt Radius/Optik unverändert, nur der äußere Rand (margin-bottom) wandert auf den Wrapper, sonst gäbe es ihn doppelt. "Ausgleichen" stand früher als eigene Knopfzeile IN jeder Karte. In einer Gruppe mit 129 Ausgaben waren das 129 Knöpfe untereinander, jede Karte gut 40px höher, und die Liste las sich wie ein Formular statt wie ein Kontoauszug. Gebraucht wird der Knopf selten - also gehört er dorthin, wo die selteneren Handlungen einer Zeile schon liegen: hinter den Wisch. */ .ausgabe-swipe{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:8px} .ausgabe-swipe .card.ausgabe{margin-bottom:0;position:relative;touch-action:pan-y} /* Die Wisch-Aktionen liegen als Reihe rechts unter der Karte. Ihre Reihenfolge im HTML bestimmt die Anordnung: erst Löschen, dann Ausgleichen – gewischt kommt damit „Ausgleichen“ ganz rechts zum Vorschein und „Löschen“ links daneben. Eine Flex-Reihe statt fester right-Abstände je Knopf: so sitzt der einzelne Löschknopf einer persönlichen Ausgabe von allein am rechten Rand, ohne eine zweite Regel für den Ein-Knopf-Fall. */ .wisch-aktionen{position:absolute;top:0;right:0;bottom:0;display:flex} .wisch-aktion{ width:88px;border:none;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; } .ausgabe-loeschen, .gruppe-loeschen{ background:var(--red-soft);color:var(--red) } /* Ausgleichen ist keine Zerstörung – es bekommt darum die Akzentsprache der App und nicht das Rot des Löschens daneben. */ .ausgabe-ausgleichen{ background:var(--card-2);color:var(--accent) } /* Nebeneinander statt als überlappender Stapel – die verdeckenden Ränder von vorher braucht es dafür nicht mehr. */ .chips{display:flex;flex:none;gap:4px} .chip{ width:22px;height:22px;border-radius:50%;background:var(--card-2); display:grid;place-items:center;font-size:9.5px;font-weight:800;color:var(--muted); } .chip.ich{background:var(--accent);color:var(--on-accent)} .anteil-info{font-size:11px;color:var(--muted);text-align:right} .anteil-info b{color:var(--ink)} .tag-gruppe{ font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--card-2);color:var(--muted); } /* Geteilte Ausgabe im Reiter "Ausgaben": der große Betrag ist dein Anteil, diese Zeile nennt die ganze Rechnung und die Gruppe dazu. Ohne sie sähe ein 20-Euro-Anteil an einer 60-Euro-Rechnung wie eine 20-Euro-Rechnung aus. Der Pfeil zeigt an, dass ein Tipp in die Gruppe führt. */ .ausgabe-geteilt-info{ display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--muted); } .ausgabe-geteilt-info .tag-gruppe{flex:none} .ausgabe-geteilt-info .pfeil{margin-left:auto;flex:none;opacity:.7} /* Geteiltes wird nur in seiner Gruppe geändert – hier gibt es keinen Löschknopf unter der Karte, also darf sie auch nicht wegwischen. */ .ausgabe-swipe.nur-lesen .card.ausgabe{touch-action:auto} /* ---------- Gruppen ---------- */ /* Wischen zum Löschen, genau wie bei den Ausgaben (siehe dort) – auch für bereits archivierte Gruppen, da beide über gruppeKarteHtml() denselben Wrapper bekommen. */ .gruppe-swipe{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:12px} .gruppe-swipe .card.gruppe-card{margin-bottom:0;position:relative;touch-action:pan-y} .gruppe-card{padding:14px 16px} /* Name und Mitglieder (in Klammern) fließen als ein Textblock in einer Zeile, brechen bei Bedarf aber ganz normal um. Direkt darunter die Aktionen, dann etwas Abstand zu den Personen-Zeilen. */ .gruppe-kopf{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px} .gruppe-titelblock{flex:1;min-width:0} .gruppe-name{font-weight:800;font-size:17px} /* inline-block + Polster mit passendem Minusrand: vergrößert nur die Tippfläche (fürs Fingerdaumen-Ziel), ohne den Textfluss mit "(Mitglieder)" danach zu verschieben. */ .gruppe-name.klickbar{cursor:pointer;display:inline-block;padding:8px 4px;margin:-8px -4px} .gruppe-name.klickbar:hover{color:var(--accent)} .gruppe-mitglieder{font-size:12px;color:var(--muted)} /* Wie viel in dieser Gruppe überhaupt zusammengekommen ist. Die Salden darunter sagen nur, wer wem was schuldet – nicht, ob es um zwei Kaffees oder um einen Urlaub geht. */ .gruppe-zahlen{font-size:11.5px;color:var(--muted);margin-bottom:10px;font-variant-numeric:tabular-nums} /* Überschrift der Gruppen-Detailansicht (nur die Ausgaben einer Gruppe) */ .gruppen-detail-titel{font-weight:800;font-size:18px;margin:4px 2px 14px} /* Verwalten/CSV/Archivieren stehen jetzt UNTER den Salden statt zwischen Gruppenname und Salden: der Inhalt der Karte ist, wer wem was schuldet – die Verwaltung ist Beiwerk und unterbrach den Blick darauf mittendrin. */ .mini-btn{ flex:none;font-family:inherit;font-size:11px;font-weight:700;padding:6px 10px;border-radius:9px; background:var(--card-2);border:1px solid var(--line);color:var(--ink);cursor:pointer; } .mini-btn.gefahr{background:var(--red-soft);color:var(--red);border-color:transparent} /* Der "PIN vergessen?"-Knopf im PIN-Blatt. Linksbuendig unter dem Hinweis, mit etwas Luft nach unten, damit er nicht am Eingabefeld klebt. */ .pin-vergessen-zeile{display:flex;margin:10px 0 2px} /* Der Notschluessel nach dem Setzen einer PIN: einmal gross und zum Abschreiben, nicht als Fliesstext. Bindestriche und gleiche Zeichenbreite, damit sich 8 und B unterscheiden lassen. */ .notschluessel{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:19px;font-weight:700;letter-spacing:1.5px;text-align:center; background:var(--card-2);border:1px solid var(--line);border-radius:12px; padding:14px 8px;margin:12px 0;color:var(--ink);user-select:all; } /* Der ⋯-Knopf einer Karte. Bewusst unauffällig: Er ist der Zugang zu allem, was man selten braucht – Verwalten, CSV, Archivieren standen vorher als drei gleich laute Pillen unter jeder Gruppe und ließen die Karte wie eine Werkzeugleiste aussehen, obwohl die eigentliche Handlung („Ausgleichen") weiter oben steht. */ .karte-menue{ flex:none;width:44px;height:44px;margin:-10px -12px 0 0;border-radius:9px; background:transparent;border:none;cursor:pointer;font-family:inherit; color:var(--muted);font-size:19px;line-height:1;letter-spacing:.06em; } .karte-menue:hover{background:var(--card-2);color:var(--ink)} /* Der geöffnete ⋯-Knopf bleibt sichtbar angefasst, solange sein Menü offen ist – bei mehreren Karten untereinander verrät sonst nichts mehr, zu welcher Gruppe das schwebende Menü gehört. */ .karte-menue[aria-expanded="true"]{background:var(--card-2);color:var(--ink)} /* ---------- Kartenmenü als Aufklappmenü am ⋯-Knopf ---------- Vorher fuhr das Menü als Blatt vom unteren Bildschirmrand herein: der Weg vom angetippten Knopf zur Auswahl ging quer über den ganzen Bildschirm, und bei mehreren Karten sagte das Blatt nur über seine Überschrift, welche Gruppe gemeint war. Jetzt hängt es unter seinem Knopf. position:fixed und nicht absolut in der Karte, weil .gruppe-swipe für das Wischen zum Löschen overflow:hidden trägt – ein Menü darin wäre an der Kartenkante abgeschnitten. Die Koordinaten setzt positioniereKartenMenue() am geöffneten Knopf, an dem es auch beim Scrollen kleben bleibt. */ .karte-menue-panel{ display:none;position:fixed;z-index:16;min-width:210px;max-width:calc((100vw - 16px) / var(--skala)); background:var(--card);border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);padding:6px; } .karte-menue-panel.offen{display:block} /* Wächst aus der Ecke heraus, an der der Knopf steht – die Bewegung zeigt, woher das Menü kommt. Die Ecke setzt positioniereKartenMenue() je nach Aufklapprichtung. Bewusst eine zweite Klasse und nicht .offen: zwischen „sichtbar" und „blendet ein" liegt das Ausmessen, und ein laufendes transform:scale verfälschte jede Messung – das Menü sprang dadurch neben seinen Knopf. */ .karte-menue-panel.rein{animation:menueRein .14s cubic-bezier(.2,0,.2,1)} @keyframes menueRein{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .karte-menue-panel.rein{animation:none} } /* Im Aufklappmenü stehen die Zeilen enger als im Blatt: dort füllten sie die ganze Bildschirmbreite, hier ist der Kasten nur so breit wie sein Inhalt. 44px hoch bleiben sie trotzdem – das ist das Maß für einen Daumen. */ .karte-menue-panel .menue-liste button{font-size:13.5px;padding:11px 10px} /* Einträge des Aktionsblatts: volle Breite, weil auf einem Telefon jede Zeile mit dem Daumen sicher zu treffen sein muss. */ .menue-liste{display:flex;flex-direction:column;gap:2px} .menue-liste button{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink); background:transparent;border:none;cursor:pointer;padding:13px 10px;border-radius:11px; } .menue-liste button:hover{background:var(--card-2)} .menue-liste .menue-zeichen{ flex:none;width:22px;display:grid;place-items:center;color:var(--muted); } /* Je Person: Avatar+Name oben, direkt darunter der Saldotext (in Namensgröße, rot/grün eingefärbt). QR/Ausgleichen stehen als eigene Zeile darunter – nicht unter dem Namen eingerückt, sondern linksbündig an derselben Kante wie Verwalten/CSV/Archivieren und der Gruppenname. Ränder knapp gehalten, damit die Karte trotz der zusätzlichen Zeile je Person nicht unnötig hoch wird. */ /* Trennlinie zwischen zwei Personen statt "unter jeder außer der letzten": unter den Salden folgt seit dem Umbau die Aktionszeile, damit wäre keine Saldo-Zeile mehr die letzte und die unterste bekäme eine Linie zu viel. */ .saldo-zeile{padding:7px 0} .saldo-zeile + .saldo-zeile{border-top:1px solid var(--line)} .saldo-kopf{display:flex;align-items:flex-start;gap:10px} .avatar{width:32px;height:32px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none} .saldo-info{flex:1;min-width:0} .saldo-name{font-weight:700;font-size:13.5px} .saldo-sub{font-weight:700;font-size:13.5px;color:var(--muted);margin-top:1px} .saldo-sub.plus{color:var(--green)} .saldo-sub.minus{color:var(--red)} .saldo-aktionen{display:flex;gap:6px;margin-top:6px} .saldo-aktionen .mini-btn, .ausgleich-btn{ flex:none;display:inline-flex;align-items:center;justify-content:center; font-family:inherit;font-size:10.5px;font-weight:700;padding:6px 12px;min-height:44px;border-radius:11px; background:var(--card-2);border:1px solid var(--line);color:var(--ink);cursor:pointer; } /* „Ausgleichen" ist die eine Handlung, um die es in einer Gruppe geht – seit die selteneren Sachen im ⋯-Menü stecken, darf sie das auch zeigen. Nur die Schrift und der Rand tragen die Akzentfarbe, keine gefüllte Fläche: bei mehreren Personen stünden sonst drei, vier blaue Blöcke untereinander und die Karte schriee wieder. Der QR-Knopf daneben gehört zur selben Handlung – erst scannen, dann ausgleichen – und trägt deshalb dieselbe Optik statt der grauen Fläche der ⋯-Knöpfe: zwei Knöpfe in einer Zeile, die verschieden aussehen, lesen sich als zwei verschieden wichtige Dinge. */ .saldo-aktionen .mini-btn, .ausgleich-btn{color:var(--accent);border-color:var(--accent);background:transparent} /* ---------- Werkzeugleiste über der Gruppenliste ---------- „Neue Gruppe" und der Archivschalter standen als zwei gestrichelte Kästen in voller Breite UNTER den Karten: in der Form einer Karte, aber ohne Inhalt – und ab drei Gruppen erst nach einer Bildschirmlänge Scrollen erreichbar. Beides sind seltene Handlungen und keine Karten, also gehören sie als kleine Knöpfe über die Liste, wo man Werkzeuge sucht. Rechts- bündig, damit die linke Kante der Karten ungestört durchläuft. */ .listen-kopf{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:2px 2px 12px} .kopf-btn{ flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit; font-size:11px;font-weight:700;padding:6px 12px;min-height:44px;border-radius:11px; background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer; } /* Kleiner als die 17px der Menüzeichen: hier steht das Symbol neben einer 11px-Schrift und darf sie nicht überragen. */ .kopf-btn svg{width:14px;height:14px} .kopf-btn:hover{color:var(--ink);border-color:var(--ink)} /* Offenes Archiv: der Schalter zeigt, dass gerade mehr zu sehen ist. */ .kopf-btn.an{color:var(--ink);border-color:var(--ink)} /* Dieselbe Akzentoptik wie „Ausgleichen" und QR – die Sprache der App für „das ist hier die Handlung", ohne gefüllte Fläche. */ .kopf-btn.akzent{color:var(--accent);border-color:var(--accent)} .kopf-btn.akzent:hover{color:var(--accent);border-color:var(--accent)} /* ---------- Kopfzeile einer geöffneten Gruppe ---------- Der Rückweg war ein gestrichelter Kasten über die volle Breite, darunter stand der Gruppenname noch einmal in eigener Zeile – zwei Zeilen Höhe für eine Handlung, die man auf jedem Telefon oben links erwartet. Jetzt Pfeil und Name nebeneinander, wie in der Kopfzeile einer Detailseite. */ .detail-kopf{display:flex;align-items:center;gap:4px;margin:0 2px 14px} .zurueck-btn{ flex:none;width:34px;height:34px;margin-left:-8px;border-radius:9px; display:grid;place-items:center; background:transparent;border:none;color:var(--muted);cursor:pointer;font-family:inherit; } .zurueck-btn:hover{background:var(--card-2);color:var(--ink)} .zurueck-btn svg{width:20px;height:20px} /* In der Kopfzeile trägt .detail-kopf den Abstand, nicht der Titel. */ .detail-kopf .gruppen-detail-titel{flex:1;min-width:0;margin:0} .neue-gruppe-btn{ width:100%;background:none;border:1px dashed var(--line);border-radius:14px;padding:14px; font-family:inherit;font-size:13.5px;color:var(--muted);cursor:pointer; } .neue-gruppe-btn:hover{border-color:var(--accent);color:var(--accent)} /* ---------- Fixkosten ---------- Vorher eine eigene Karte je Posten – bei einer Handvoll Fixkosten vor allem viel wiederholter Rahmen und Schatten für wenig Inhalt. Jetzt kompakte Zeilen in einer gemeinsamen Karte, wie bei den Salden einer Gruppe oder der Kategorien-Verwaltung. */ .fixkosten-liste .fx-zeile{padding:12px 2px;cursor:pointer; display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;row-gap:3px} .fixkosten-liste .fx-zeile:not(:last-child){border-bottom:1px solid var(--line)} .fx-zeile.pausiert{opacity:.55} /* min-width:0 lässt den Text schrumpfen, statt die Spalte aufzublähen – ohne das gewinnt der längste Rhythmus-Text den Platzstreit und der Betrag rechts wird abgedrängt. */ .fx-titel, .fx-meta-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-faellig-spalte{justify-self:end} /* Was in den nächsten Tagen abgebucht wird, soll ins Auge fallen – das ist die einzige Information dieser Liste, auf die man reagieren kann. */ .fx-faellig{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px; background:var(--card-2);color:var(--muted);font-variant-numeric:tabular-nums} .fx-faellig.bald{background:var(--accent);color:var(--on-accent)} /* Platzhalter ohne Farbe: hält dem Titel den Punktplatz frei, damit alle Titel einer Liste auf derselben Kante beginnen. */ .katdot-leer{background:transparent} /* ---------- Erkanntes Wiederkehrendes ---------- Bewusst zurückhaltend: ein Vorschlag ist ein Angebot, keine Meldung. Deshalb dieselbe Karte wie die Fixkostenliste darüber, nur der Knopf trägt die Akzentfarbe – er ist das Einzige, worauf man hier tippt. */ .vorschlag-liste .vorschlag-zeile{display:flex;align-items:center;gap:12px;padding:11px 2px} .vorschlag-liste .vorschlag-zeile:not(:last-child){border-bottom:1px solid var(--line)} .vorschlag-text{flex:1 1 auto;min-width:0} .vorschlag-titel{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vorschlag-notiz{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vorschlag-btn{ flex:none;font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px; border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer; } .vorschlag-btn:hover{background:var(--accent);color:var(--on-accent)} /* Das Weglegen ist die leisere der beiden Handlungen und sieht auch so aus: kein Rahmen, gedämpfte Farbe. Die Trefferfläche ist trotzdem 34 px groß, damit sie auf dem Telefon zu treffen ist. */ .vorschlag-weg{ flex:none;width:34px;height:34px;border:none;background:transparent;color:var(--muted); border-radius:9px;cursor:pointer;display:grid;place-items:center; } .vorschlag-weg svg{width:15px;height:15px} .vorschlag-weg:hover{background:var(--card-2);color:var(--ink)} .vorschlag-zurueck{ display:block;width:100%;margin-top:10px;padding:9px;border-radius:11px; border:1px dashed var(--line);background:transparent;color:var(--muted); font-family:inherit;font-size:12.5px;cursor:pointer; } .vorschlag-zurueck:hover{border-color:var(--accent);color:var(--accent)} /* ---------- Gruppe verwalten: Mitglieder + IBAN ---------- */ .mitglied-zeile{padding:10px 0;border-bottom:1px solid var(--line)} .mitglied-zeile:last-child{border-bottom:none} .mitglied-zeile.inaktiv{opacity:.6} .mitglied-kopf{display:flex;align-items:center;gap:10px} .mitglied-name{flex:1;font-size:13.5px;font-weight:600} .iban-zeile{display:flex;align-items:center;gap:8px;margin:8px 0 0 46px} .iban-input{ flex:1;font-family:inherit;font-size:13px;padding:8px 10px;border-radius:9px; border:1px solid var(--line);background:var(--card-2);color:var(--ink);min-width:0; } .iban-input.ungueltig{border-color:var(--red)} .iban-mark{flex:none;width:16px;text-align:center;font-size:13px;color:var(--green)} .iban-input.ungueltig + .iban-mark{color:var(--red)} .mitglied-hinzufuegen-zeile{display:flex;gap:8px;margin-top:10px} .mitglied-hinzufuegen-zeile input{ flex:1;font-family:inherit;font-size:14.5px;padding:10px 12px;border-radius:10px; border:1px solid var(--line);background:var(--card-2);color:var(--ink);min-width:0; } /* ---------- GiroCode ---------- */ .qr-box{background:#fff;border-radius:12px;padding:14px;margin-bottom:14px} .qr-fehlt{font-size:13px;color:var(--muted);line-height:1.5;padding:6px 2px} .qr-zeile{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px} .qr-zeile .k{color:var(--muted)} .qr-zeile .w{font-weight:700;text-align:right} /* ---------- Kategorien verwalten ---------- */ /* Die Trennlinie traegt seit dem 15.09.2026 die Zusatzzeile darunter (.kv-zusatz), sonst liefe mitten durch jeden Eintrag ein Strich. */ .kat-verwalten-zeile{display:flex;align-items:center;gap:9px;padding:9px 2px} .kv-zusatz:last-child{border-bottom:none} /* Zeichenknoepfe statt Textknoepfe – siehe Kommentar in app.js. Quadratisch und gross genug fuer einen Daumen (36 px), die Farbe erben sie. */ .kv-zeichen{ flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0; border-radius:10px;background:var(--card-2);border:1px solid var(--line); color:var(--ink);cursor:pointer; } .kv-zeichen svg{width:16px;height:16px} .kv-zeichen.gefahr{background:var(--red-soft);border-color:transparent;color:var(--red)} .kv-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kv-anzahl{flex:none;font-size:12px;color:var(--muted);background:var(--card-2);border-radius:999px;padding:2px 8px} /* ---------- FAB + Formular-Sheets ---------- */ /* Rechts unten statt mittig. Mittig lag der Knopf über der Mitte jeder Liste und verdeckte dort dauerhaft einen Eintrag – in der Übersicht eine Kategoriezeile, bei den Fixkosten einen Posten, in den Gruppen eine Karte. Rechts unten liegt er dort, wo der Daumen beim Halten ohnehin ist, und über dem Rand statt über dem Inhalt. Der untere Abstand nimmt die Gerätekerbe mit, damit er auf einem iPhone nicht am Home-Balken klebt. */ /* Links unten statt rechts: rechts lag der Knopf genau ueber der Betragsspalte der Ausgabenliste und verdeckte im Ruhezustand die Zahl, wegen der man hinsieht. Links steht unter ihm nur der Titelanfang, und der ist auch angeschnitten noch zu erkennen. */ .fab{ position:fixed;left:calc(var(--sa-l) + 20px);bottom:calc(var(--sa-u) + 24px); width:56px;height:56px;border-radius:50%; background:var(--accent);color:var(--on-accent);border:none; box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;z-index:5; transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s ease; } /* Beim Blättern nach unten aus dem Weg, beim Hochwischen sofort zurück. pointer-events:none, damit der weggeschobene Knopf keine Tipper mehr abfängt, die dem Inhalt darunter gelten. */ .fab.weg{transform:translateY(calc(var(--sa-u) + 96px)) scale(.92);opacity:0;pointer-events:none} /* Der Bon-Knopf sitzt ueber dem grossen und ist kleiner: Er ist der zweite Weg, nicht der erste. Gleiche Spalte, damit beide unter demselben Daumen liegen. */ .fab-klein{ width:44px;height:44px;bottom:calc(var(--sa-u) + 24px + 56px + 12px); left:calc(var(--sa-l) + 20px + 6px); background:var(--card);color:var(--ink);border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.28); } .fab-klein svg{width:20px;height:20px} /* Bei geoeffnetem Blatt liegen beide Knoepfe zwar hinter dem Scrim (z-index 5 gegen 9) und sind nicht mehr bedienbar – am Schreibtisch, wo das Blatt die Breite nicht ausfuellt, schimmerte der akzentfarbene Kreis aber weiterhin daneben durch und sah aus wie ein Angebot. */ body.blatt-offen .fab{opacity:0;pointer-events:none;transform:translateY(12px) scale(.94)} @media (prefers-reduced-motion: reduce){ .fab{transition:none} } /* Echtes SVG-Kreuz statt Textzeichen "+": ein Font-Glyph sitzt je nach Schriftart/Betriebssystem unterschiedlich in seiner Zeilenbox, nie exakt mittig ohne gerätespezifisches Nachmessen. Ein Pfad, der um (12,12) im 24×24-Koordinatenraum symmetrisch ist, ist dagegen geometrisch exakt mittig – unabhängig von Schriftart, Browser oder Betriebssystem. */ .fab svg{width:26px;height:26px} .scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:9} .scrim.offen{display:block;animation:schleierRein .18s ease} @keyframes schleierRein{from{opacity:0}to{opacity:1}} .sheet{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:10;max-height:var(--blatt-max,88vh);overflow-y:auto; background:var(--card);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + var(--sa-u)); max-width:600px;margin:0 auto;box-shadow:0 -8px 30px rgba(0,0,0,.3); transition:margin-bottom .15s ease, max-height .15s ease; } /* Rechner statt Systemtastatur unter dem Betragsfeld, aus Sharecount übernommen. Solange er offen ist, macht das Blatt unten Platz, sonst würde er die Speichern-Zeile verdecken. */ body.calcpad-open .sheet.offen{ margin-bottom:var(--calcpad-h, 300px); max-height:calc(var(--blatt-max, 88vh) - var(--calcpad-h, 300px)); } .calcPad{ position:fixed;left:0;right:0;bottom:0;z-index:60;display:none; background:var(--card);border-top:1px solid var(--line);border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.35); padding:10px max(10px,var(--sa-l)) calc(10px + var(--sa-u)) max(10px,var(--sa-r)); } .calcPad.open{display:block} .cpHead{display:flex;align-items:baseline;gap:10px;padding:2px 8px 9px;min-height:26px} .cpExpr{flex:0 1 auto;min-width:0;font-size:19px;font-weight:700;letter-spacing:-.2px;overflow:hidden;white-space:nowrap;text-align:left;color:var(--ink)} .cpExpr.empty{color:var(--muted);font-weight:600} .cpRes{flex:none;margin-right:auto;font-size:14px;font-weight:700;color:var(--accent)} .cpRes.bad{color:var(--red)} .cpKeys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .ck{ height:46px;border:1px solid var(--line);background:var(--card-2);color:var(--ink); border-radius:12px;font-size:21px;font-weight:600;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit; } .ck:active{opacity:.6} .ck.fn{background:var(--card);color:var(--muted);font-size:18px} .ck.op{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .ck.done{background:var(--accent);color:var(--on-accent);border-color:var(--accent);grid-row:span 2;height:auto;font-size:15px;font-weight:700} .ck.wide{grid-column:span 2} /* Die Blätter erschienen bisher übergangslos, während Kurzmeldungen und Schalter sich bewegen – das war der auffälligste Bruch in der App. */ .sheet.offen{display:block;animation:blattRein .24s cubic-bezier(.2,.7,.2,1)} @keyframes blattRein{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}} .frage-scrim.offen .frage-box{animation:blattRein .2s cubic-bezier(.2,.7,.2,1)} /* Wer Bewegung abgestellt hat, bekommt keine. */ @media (prefers-reduced-motion:reduce){ .sheet.offen,.scrim.offen,.frage-scrim.offen .frage-box,.meldung{animation:none} } .sheet h2{margin:0 0 14px;font-size:16px} .feld{margin-bottom:12px} .feld label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px} .feld input, .feld select{ width:100%;height:41px;font-family:inherit;font-size:14.5px;padding:10px 12px;border-radius:10px; border:1px solid var(--line);background:var(--card-2);color:var(--ink); } .feld input:focus, .feld select:focus{outline:none;border-color:var(--accent)} /* Kleiner Nachsatz unter einem Feld – bisher nur für den Hinweis, dass die Kategorie aus früheren Ausgaben desselben Titels vorgeschlagen wurde. */ .feld-notiz{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4} .feld-notiz:empty{display:none} /* Mitlaufendes Ergebnis an einem Betragsfeld, auf dem Rechner. Auf dem Handy steht dieselbe Zeile im Ziffernblock (.cpRes) – dort ist Platz dafür, hier nicht, deshalb hängt sie an der Beschriftung des Feldes statt darunter: kein zusätzlicher Umbruch, keine verschobenen Nachbarfelder, und sie steht genau dort, wohin man ohnehin sieht. Ohne Rechnung im Feld ist sie leer und damit unsichtbar – ein fester Betrag sieht also aus wie bisher. Zweimal aufgeführt, weil `.feld label` weiter oben spezifischer ist als eine einzelne Klasse: display:block setzte sich sonst durch und das Echo klebte direkt an der Beschriftung statt am rechten Rand. */ .mit-echo,.feld label.mit-echo{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .rechen-echo{ flex:none;font-size:11px;font-weight:700;color:var(--accent); text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap; } .rechen-echo.bad{color:var(--red)} .rechen-echo:empty{display:none} /* Datumsfelder: kein natives type=date mehr, siehe Kalenderblatt weiter unten. Der native Editor sah je nach Browser anders aus (Höhe, Format, Popup-Größe) und ließ sich nicht zuverlässig auf das Maß der Felder daneben bringen – jetzt sind es stinknormale readonly-Textfelder wie Betrag, exakt dieselbe Regel oben trifft also 1:1 zu. */ .feld-datum{position:relative} /* Select bekommt sonst das native Aussehen des Betriebssystems und weicht damit von den Textfeldern drumherum ab – eigener Pfeil statt dessen, Optik dann identisch zu den Feldern daneben. Gilt genauso für die beiden Filter im Reiter Ausgaben, die sonst im Systemlook kleiner wirkten als das Suchfeld darüber. */ .feld select, .filterzeile select{ appearance:none;-webkit-appearance:none;padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239498a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:16px; } /* ---------- Eigene Auswahllisten ---------- Wo der Browser die Options-Liste eines / bleibt bestehen und zeigt weiterhin ganz normal seinen Wert an (jeder bisherige .value-Zugriff funktioniert unverändert); nur das Öffnen übernimmt ein eigenes Panel, das immer fest unter dem Feld sitzt. */ .feld-auswahl{position:relative} .feld-auswahl select{pointer-events:none} .feld-auswahl:focus-within select{outline:none;border-color:var(--accent)} .auswahl-fang{ position:absolute;inset:0;background:none;border:none;padding:0;margin:0;cursor:pointer; } .auswahl-panel{ display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:15; background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); max-height:216px;overflow-y:auto;padding:6px; } .auswahl-panel.offen{display:block} /* Klappt bei wenig Platz nach unten (z.B. Systemtastatur offen) stattdessen nach oben auf – siehe positioniereAuswahlPanel(). */ .auswahl-panel.oben{top:auto;bottom:calc(100% + 4px)} .auswahl-eintrag{ display:block;width:100%;text-align:left;font-family:inherit;font-size:13.5px;line-height:1.4; padding:9px 10px;border-radius:8px;border:none;background:none;color:var(--ink);cursor:pointer; } .auswahl-eintrag:hover{background:var(--card-2)} .auswahl-eintrag.gewaehlt{font-weight:700;color:var(--accent)} .auswahl-eintrag[disabled]{color:var(--muted);cursor:default} .auswahl-leer{padding:9px 10px;font-size:12.5px;color:var(--muted)} /* ---------- Kategorie-Auswahl als Block statt Dropdown ---------- Ein schwebendes Panel geriet der Systemtastatur zu leicht in die Quere. Jetzt ganz normaler Seitenfluss unter dem Feld, über die volle Breite, scrollt einfach mit dem Blatt statt eigenständig positioniert zu sein. */ .kategorie-block{ display:none;flex-wrap:wrap;gap:8px;margin-top:10px; max-height:212px;overflow-y:auto;padding:2px; } .kategorie-block.offen{display:flex} .kategorie-block .vorschlag.gewaehlt{border-color:var(--accent);color:var(--accent)} /* Der Betrag ist das Feld, wegen dem man das Blatt überhaupt öffnet. Er hebt sich über den Fettdruck und die Tabellenbreite der Ziffern ab, nicht mehr über die Schriftgröße: mit 19px sprang die Zahl gegenüber Titel und Datum daneben aus dem Blatt heraus. Das €-Zeichen steht fest im Feld statt in der Beschriftung: dort erklärt es die Eingabe genau dann, wenn man sie macht. Die rechte Polsterung hält die Ziffern vom Zeichen frei. */ .feld-betrag{position:relative} .feld-betrag input{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;padding-right:30px} .feld-betrag::after{ content:"€";position:absolute;right:12px;bottom:0;height:41px;display:flex;align-items:center; font-size:14.5px;font-weight:700;color:var(--muted);pointer-events:none; } .feld input[readonly]{caret-color:transparent} .feld input[readonly].padActive{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} /* ---------- Eigenes Kalenderblatt fürs Datumsfeld ---------- Ein Element, wird beim Öffnen in das gerade aktive .feld-datum umgehängt – wie das Suchergebnis-Panel, nur wiederverwendet für beide Datumsfelder (Ausgabe, Fixkosten), weil ein Kalendergitter mehr Aufbau braucht als eine einfache Liste. */ .kalenderPad{ display:none;position:absolute;top:calc(100% + 4px);right:0;width:260px;max-width:calc(100vw - 60px);z-index:15; background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); padding:10px; } .kalenderPad.offen{display:block} .kpHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 8px;font-size:13px;font-weight:700} .kpNav{ width:28px;height:28px;border:none;border-radius:8px;background:var(--card-2);color:var(--ink); font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; } .kpWochentage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:10.5px;color:var(--muted);text-align:center;padding-bottom:4px} .kpTage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .kpTage span{height:30px} .kpTag{ height:30px;border:none;border-radius:8px;background:none;color:var(--ink);font-family:inherit; font-size:12.5px;cursor:pointer;padding:0; } .kpTag:hover{background:var(--card-2)} .kpTag.heute{color:var(--accent);font-weight:700} .kpTag.gewaehlt{background:var(--accent);color:var(--on-accent)} .kpFuss{padding-top:6px;text-align:center} .kpHeute{ font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px; background:none;border:none;color:var(--accent);cursor:pointer; } .zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:10px} .beteiligte-liste{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .person-toggle{ font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px; border:1px solid var(--line);background:var(--card-2);color:var(--muted);cursor:pointer; } .person-toggle.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* Drei Aufteilungsarten passen nebeneinander. Kommt mit einem erkannten Beleg die vierte dazu, wird daraus ein 2x2-Feld statt vier zu schmaler Spalten, in denen die Beschriftungen umbrechen. */ .split-umschalter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px} .split-umschalter.vier{grid-template-columns:repeat(2,1fr)} .split-umschalter button{ font-family:inherit;font-size:12px;font-weight:700;padding:8px 4px;border-radius:9px; border:1px solid var(--line);background:var(--card-2);color:var(--muted);cursor:pointer; } .split-umschalter button.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .manuell-zeile{display:flex;align-items:center;gap:8px;margin-bottom:8px} .manuell-zeile span{flex:1;font-size:13px} .manuell-zeile input{width:90px;flex:none} .manuell-zeile .einheit{flex:none;font-size:12px;color:var(--muted);width:14px} /* „Gemeinsam“ steht bewusst abgesetzt unter den Personenzeilen: der Betrag dort gehört keiner Person, sondern wird auf alle verteilt. */ .manuell-zeile.gemeinsam{border-top:1px solid var(--line);margin-top:10px;padding-top:10px} .manuell-zeile.gemeinsam>span:first-child{font-weight:700} .manuell-notiz{font-size:12px;color:var(--muted);margin:-2px 0 8px} /* ── Belege (Kassenbons, Rechnungen) und ihre Positionen ── */ .beleg-leiste{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .beleg-knopf{ font-family:inherit;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:9px; border:1px dashed var(--line);background:var(--card-2);color:var(--muted);cursor:pointer; display:inline-flex;align-items:center;gap:7px; } .beleg-knopf:disabled{opacity:.5;cursor:default} .beleg-knopf svg{flex:none} .beleg-karte{ position:relative;width:54px;height:54px;border-radius:9px;overflow:hidden;flex:none; border:1px solid var(--line);background:var(--card-2);cursor:pointer;padding:0; } .beleg-karte img{width:100%;height:100%;object-fit:cover;display:block} /* PDFs haben keine Vorschau – statt eines leeren Kastens das Kürzel. */ .beleg-karte .beleg-pdf{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.04em; } .beleg-karte.laedt{display:flex;align-items:center;justify-content:center} .beleg-weg{ position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%; border:none;background:var(--scrim);color:#fff;font-size:12px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0; } /* Ein ruhiger Puls, solange die Erkennung läuft – ohne ihn wirkt die App in den fünf bis fünfzehn Sekunden, die ein Bon braucht, eingefroren. */ @keyframes belegPuls{0%,100%{opacity:.35}50%{opacity:.8}} .beleg-karte.laedt{animation:belegPuls 1.1s ease-in-out infinite} .beleg-notiz{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45} .beleg-notiz:empty{display:none} .pos-liste{margin-top:4px} .pos-zeile{ display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line); } .pos-zeile:last-child{border-bottom:none} .pos-zeile .pos-text{flex:1 1 auto;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pos-zeile .pos-betrag{ flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums; min-width:62px;text-align:right; } .pos-betrag.minus{color:var(--green)} /* Rabatte und Leergut mindern die Summe */ /* Bewusst ein natives