wird
zur Karte, jede | zur Zeile darin. Adressiert wird über das
data-key, das auftraege.js ohnehin an jede Zelle schreibt
(Zeile 587). Was die Tabelle zeigt, zeigt auch die Karte — immer.
Gezeigt wird die Auswahl aus dem freigegebenen Mockup:
Nummer · Status · Patient · Praxis · Material · Liefertermin
· Dateien · Prio. Der Rest bleibt im Markup stehen und ist nur
ausgeblendet — beim Drehen ins Breite ist sofort alles wieder da.
⚠ DIESELBE SCHWELLE WIE DIE VOLLBILD-ANSICHT (767, nicht 640).
Gemessen beim aufgeklappten Foldable: Bei 673 px stand sonst wieder
die 1515 px breite Tabelle da — man sah fünf von sechzehn Spalten und
musste für den Rest wischen, obwohl der Auftrag daneben schon als
Vollbild lief. Unterhalb von 768 gilt durchgehend: eine Ansicht zur
Zeit, Liste als Karten. */
@media (max-width: 767px), (pointer: coarse) {
/* Der Kasten scrollt jetzt senkrecht statt waagerecht. */
.table-area { overflow-x: hidden; }
/* Kopfzeile hat ohne Spalten keinen Sinn mehr. */
.table-area thead { display: none; }
.table-area table,
.table-area tbody { display: block; width: 100%; }
/* Die Zeile wird zur Karte. */
.table-area tbody tr {
display: block;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: 10px;
margin: 0 0 8px;
padding: 9px 11px;
}
/* Der farbige Praxis-Streifen bleibt — er ist auf dem Telefon sogar
nützlicher als am Rechner, weil die Praxis nur klein dasteht. */
.table-area tbody tr.px-farbe {
border-left: 3px solid var(--px, var(--border));
}
/* Die Trennzeile zwischen Zeiträumen ist ohne Spalten sinnlos
breit — sie bleibt als schmale Überschrift stehen. */
.table-area tbody tr.zr-trennzeile {
background: none; border: 0; padding: 10px 2px 2px; margin: 0;
}
/* Jede Zelle eine Zeile. Die Rahmen der Tabelle entfallen. */
.table-area tbody td {
display: block;
border: 0;
padding: 1px 0;
white-space: normal;
width: auto !important;
max-width: none !important;
}
/* --- Was die Karte NICHT zeigt ---------------------------------
Laufende Nummer (auf dem Telefon zählt niemand mit), Techniker-
Häkchen, Auftragsart, Zähne, Farbe, Eingangsdatum. Sie stehen
weiterhin im Markup und kommen im Breitformat sofort zurück. */
.table-area tbody td.col-fix-nr,
.table-area tbody td.col-fix-techgesehen,
.table-area tbody td[data-key="zaehne"],
.table-area tbody td[data-key="farbe"],
.table-area tbody td[data-key="rechnung"],
.table-area tbody td.col-fix-del,
/* Die Sprung-Spalte (Aufträge → Abrechnung) gibt es nur am Rechner
(Festlegung Chris, 07.10.2026) — die Karte zeigt sie nicht. */
.table-area tbody td[data-key="sprung"] { display: none; }
/* --- Aufbau der Karte (Variante A, Festlegung Chris, 15.10.2026) ---
Vorher war die Karte 214 px hoch (gemessen bei 375 px): jede Zelle
eine eigene Zeile, dazu volle Tippknöpfe für Beleg, Dateien und
Papierkorb. Jetzt zwei Zeilen, bei Platzmangel eine dritte:
Zeile 1: Patient (fett, kürzt mit …) Status
Zeile 2: Nr · Praxis · Material … · Liefertermin · Dateien
order sortiert die Zellen um, ohne dass am Markup etwas geändert
werden muss — die Spaltenreihenfolge am Rechner bleibt frei
verschiebbar (colOrder), die Karte sieht trotzdem immer gleich aus.
⚠ ZEILENUMBRUCH OHNE EXTRA-ELEMENT: Der Patient bekommt als Basis
"100 % minus 118 px" und der Status höchstens 112 px. Zusammen füllen
sie die erste Zeile, die Nebenangaben rutschen in die zweite. Reicht
die Breite dort nicht für alles, bricht Flex von selbst in eine dritte
Zeile um — das Material (flex 1 1 0) gibt vorher nach.
⚠ NICHT AUF DER KARTE: der Papierkorb und das Plus "Beleg anlegen"
(beides steht im Detail) und der Zeitstempel des Status. Vorhandene
Beleg-Marken (RG …) bleiben sichtbar, nur kleiner. */
.table-area tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 6px;
}
.table-area tbody td[data-key="pat"] { order: 1; flex: 1 1 0; min-width: 0;
font-size: 13px; font-weight: 600; padding: 0;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
/* Der Name steht in einem inline-flex-Span — der schneidet ohne
Auslassungspunkte ab. Als Block kürzt er mit "…". */
.table-area tbody td[data-key="pat"] > span { display: block !important;
overflow: hidden; text-overflow: ellipsis; }
.table-area tbody td[data-key="status"] { order: 2; flex: 0 0 auto; padding: 0; }
/* Harter Umbruch nach Zeile 1: ein leeres, volles Flex-Element mit order 2 steht
hinter dem Status (gleiche order = Reihenfolge im Dokument, ::after ist zuletzt)
und schiebt alles Weitere in die nächste Zeile. So rutscht auch ein langer
Status ("Qualitätsprüfung") nicht mehr allein in eine eigene Zeile. */
.table-area tbody tr:not(.zr-trennzeile)::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
.table-area tbody td[data-key="status"] .status-ts { display: none; }
.table-area tbody td[data-key="id"] { order: 3; flex: 0 0 auto; font-size: 11px;
font-weight: 500; padding: 0; white-space: nowrap; }
.table-area tbody td[data-key="praxis"] { order: 4; flex: 0 0 auto; font-size: 11px;
color: var(--text-secondary); padding: 0; }
.table-area tbody td[data-key="praxis"] > span:not(.px-pille),
.table-area tbody td[data-key="praxis"] br,
.table-area tbody td[data-key="praxis"] .px-pille-id { display: none; }
/* Die Praxis ohne Rahmen und Fläche: nur Farbpunkt und Name — spart
rund 25 px und damit oft die dritte Zeile. */
.table-area tbody td[data-key="praxis"] .px-pille { padding: 0; font-size: 11px; line-height: 1.5;
background: none; border-color: transparent; }
/* Die Nebenangaben: ohne Spaltenkopf wäre "21.08." mehrdeutig, darum
steht vor dem Liefertermin ein Kalendersymbol (Schrift der Symbole). */
.table-area tbody td[data-key="art"],
.table-area tbody td[data-key="termine"],
.table-area tbody td.col-fix-dateien,
.table-area tbody td.col-fix-automatik {
flex: 0 0 auto;
font-size: 11px;
color: var(--text-secondary);
padding: 0;
}
.table-area tbody td[data-key="mat"] { display: none; }
/* Statt des Materials steht die Auftragsart in der Zeile (Chris, 15.10.2026). */
.table-area tbody td[data-key="art"] { order: 6; flex: 1 1 56px; min-width: 56px;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.table-area tbody td[data-key="art"] > span { font-size: 11px !important; background: none !important;
border: 0 !important; padding: 0 !important;
color: inherit !important; display: inline !important; }
/* Termine (seit 09.11.2026 eine Spalte): auf der Karte nur das Lieferdatum, mit Kalendersymbol davor. */
.table-area tbody td[data-key="termine"] { order: 7; white-space: nowrap; }
.table-area tbody td[data-key="termine"]::before {
content: "\ea53"; font-family: "tabler-icons"; color: var(--text-muted);
font-size: 12px; margin-right: 3px; vertical-align: -1px;
}
.table-area tbody td[data-key="termine"] .tm-eingang,
.table-area tbody td[data-key="termine"] .tm-wunsch,
.table-area tbody td[data-key="termine"] .tm-k { display: none !important; }
.table-area tbody td[data-key="termine"] .tm-zelle,
.table-area tbody td[data-key="termine"] .tm-liefer { display: inline !important; }
.table-area tbody td.col-fix-dateien { order: 5; }
.table-area tbody td.col-fix-dateien .dt-badge { padding: 3px 7px; min-height: 0; }
.table-area tbody td.col-fix-automatik { order: 8; }
/* Leere Zellen sollen keine leere Beschriftung hinterlassen. */
.table-area tbody td:empty { display: none; }
/* Beleg: das Plus "Beleg anlegen" fällt weg; die Zelle bleibt nur, wenn
schon eine Beleg-Marke da ist. */
.table-area tbody td.col-fix-beleg { order: 9; flex: 0 0 auto; padding: 0; }
.table-area tbody td.col-fix-beleg .beleg-quick-btn-add { display: none; }
.table-area tbody td.col-fix-beleg:not(:has(.beleg-typ-badge)) { display: none; }
.table-area tbody td.col-fix-beleg .beleg-typ-badge { min-height: 24px; min-width: 0; padding: 2px 8px; }
}
/* ============================================================
F · SCHMAL — Finger statt Maus (bis 767 px)
============================================================
Zwei gemessene Punkte, die auf dem Telefon jeden Handgriff stören:
1. ⚠ ALLE 55 sichtbaren Bedienelemente waren unter 40 px hoch.
Apple nennt 44 pt, Google 48 dp als Mindestmaß fürs Tippen;
34 px (die Höhe von .btn) trifft man mit dem Daumen nur mit
Zielen. Angehoben wird die HÖHE, nicht die Schrift — sonst
spränge das ganze Layout.
2. ⚠ 13 Eingabefelder standen unter 16 px Schriftgröße. Safari auf
iOS ZOOMT dann beim Hineintippen automatisch in die Seite und
kommt nicht von allein wieder heraus: Man tippt ein Feld an und
steht plötzlich in einer vergrößerten, seitlich verschobenen
Ansicht. 16 px ist die Schwelle, ab der das unterbleibt — der
einzige Grund für diese Zahl.
⚠ GILT BIS 1023 px, NICHT NUR BIS 767. Ein Tablet wird mit dem
Finger bedient wie ein Telefon, und Safari auf dem iPad zoomt bei
unter 16 px genauso hinein. Gemessen bei 768 px lagen sonst 37 von
52 Bedienelementen unter 36 px und zehn Felder unter 16 px — also
fast der Zustand vom Rechner, auf einem reinen Tippgerät.
Ab 1024 px bleibt alles bei den gewohnten 34 px und 12,5 px. */
@media (max-width: 1023px) {
/* --- 1. Tippflächen ------------------------------------------- */
.btn { min-height: 40px; }
.btn-sm { min-height: 36px; }
.tab-btn { min-height: 44px; }
/* Reine Zeichen-Knöpfe (Papierkorb, Büroklammer, X) sind quadratisch
und rutschen sonst durch die Höhenregel allein nicht auf Maß. */
.dh-close-btn,
.beleg-quick-btn-add,
.beleg-typ-badge,
.beleg-rest-badge { min-height: 36px; min-width: 36px; }
/* Die Monatsnavigation über der Liste hängt nicht an .btn und blieb
deshalb bei 32x34 bzw. 51x24 stehen — gemessen die kleinsten
Treffer der ganzen Ansicht. */
.month-nav-btn { min-height: 40px; min-width: 40px; }
.month-nav-heute { min-height: 36px; }
/* Kästchen zum Anhaken sind der kleinste Treffer überhaupt. */
input[type="checkbox"],
input[type="radio"] { width: 20px; height: 20px; }
/* --- 2. Kein Selbst-Zoom beim Hineintippen -------------------- */
input[type="text"], input[type="search"], input[type="number"],
input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="url"],
select, textarea,
/* ⚠ input OHNE type-Attribut zählt auch — es verhält sich wie
"text", wird von [type="text"] aber NICHT getroffen. Genau so
rutschte das Suchfeld #q durch (gemessen: 14 px), ausgerechnet
das meistgenutzte Feld auf dem Telefon. */
input:not([type]) {
font-size: 16px;
}
/* Die Mengenfelder in den Positionszeilen sind bewusst schmal. Mit
16 px Schrift bräuchten sie mehr Platz — sie bekommen ihn, statt
den Text abzuschneiden. */
.pos-menge { min-width: 56px; }
/* --- 3. Die zwei kleinsten Bedienelemente ---------------------
Die Datei-Pille (.dt-badge) war 37x20 px. In der Auftragskarte ist
Platz, also darf sie schlicht wachsen — mehr Polster, gleiche Form.
⚠ ERST ANDERS VERSUCHT: Eine unsichtbare Fläche per ::after 8 px
über den Rand hinaus, damit sich am Bild nichts verschiebt. Ging
nicht — die Zelle td.col-fix-dateien hat overflow:hidden und
schneidet sie ab (nachgemessen: 6 px über der Pille traf schon die
Zeile dahinter). Dafür noch eine Ausnahme zu stapeln, wäre der
falsche Preis für ein paar Pixel. */
.dt-badge { padding: 9px 11px; font-size: 11.5px; }
/* ▫ Bewusst UNANGETASTET: .row-del-btn (20x20, Papierkorb einer
Positionszeile). Er sitzt zwischen Menge und Betrag; ihn zu
vergrössern zöge jede Zeile auseinander, und eine überstehende
Trefferfläche würde dem Mengenfeld daneben Tipper wegnehmen.
Ein zu leicht getroffener Löschknopf ist schlimmer als ein zu
kleiner. */
}
/* ============================================================
G · SCHMAL — freie Fenster als Vollbild-Blatt (bis 767 px)
============================================================
Betrifft alles, was winmgr verwaltet (Klasse .win-frei): Beleg,
Auftrag bearbeiten, Mail, Kalender, Dateien, Positionen-Auswahl.
⚠ WARUM HIER !important STEHT — und nur hier.
winInit() in winmgr.js schreibt Breite, Höhe, Position UND
min-width/min-height als INLINE-STIL an das Element (Zeilen 118-122
und winApplyGeom). Inline schlägt Stylesheet; eine gewöhnliche Regel
käme nicht dagegen an. Deshalb sind es hier Ausnahmen — bewusst
eingegrenzt auf .win-frei unterhalb von 768 px.
⚠ GEMESSEN, WARUM ES NÖTIG IST: Die Mindestbreiten liegen bei 640 px
(Beleg), 560 (Mail), 520 und 480. winmgr deckelt zwar auf die
Fensterbreite, aber in winApplyGeom gewinnt minW gegen maxW — jedes
wichtige Fenster wäre auf einem 375-px-Telefon breiter als der Schirm.
Dazu merkt sich jedes Fenster Position und Grösse: Ein am Rechner
nach rechts geschobenes Fenster startete auf dem Telefon ausserhalb
des sichtbaren Bereichs.
⚠ AN winmgr.js ÄNDERT SICH NICHTS. Es rechnet und speichert weiter
wie bisher; seine Werte kommen auf dem Telefon nur nicht zum Tragen.
Der gemerkte Platz am Rechner bleibt dadurch unberührt — wer dort
ein Fenster zurechtgeschoben hat, findet es unverändert vor. */
@media (max-width: 767px), (pointer: coarse) {
/* NUR die Geometrie. Das Innenleben bleibt jedem Fenster selbst
überlassen: .beleg-modal-box ist z. B. längst eine Flex-Spalte mit
eigenem Scrollbereich (index.html, Zeile 1958). Würde hier
zusätzlich display:flex erzwungen, verstellte das den Aufbau der
Fenster, die als gewöhnlicher Block aufgebaut sind. */
.win-frei {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* Die Griffe zum Vergrössern haben auf einem Vollbild nichts zu
tun — und unter dem Finger wären sie ohnehin nicht zu treffen. */
.win-rsz { display: none !important; }
/* Ziehen am Kopf ebenfalls sinnlos, wenn das Fenster den ganzen
Schirm füllt. Der Zeiger soll das auch nicht mehr anbieten. */
.win-frei > .dh, .win-frei > .mh,
.win-frei > .bm-mh, .win-frei > .ev-modal-head { cursor: default; }
/* ⚠ NICHTS AM INNENLEBEN DES BELEG-FENSTERS.
Erst geprüft, dann verworfen: Der Plan war, die Leiste mit
"Speichern"/"Vorschau" (.bm-mh2) ans untere Ende zu schieben, damit
sie nicht weggescrollt wird. Nachgemessen im Fenster stellte sich
heraus, dass sie gar nicht wegscrollen KANN — .beleg-modal-box ist
eine Flex-Spalte mit overflow:hidden, und der einzige scrollende
Teil darin ist .bm-pos-area (die Positionsliste). Kopf, .bm-mh2,
.bm-footer mit den Summen: alle drei stehen fest.
Das Umsortieren hätte also nichts gewonnen und die vom Rechner
gewohnte Anordnung ohne Not verändert. */
}
/* ============================================================
H · SCHMAL — die Aufträge bekommen den Schirm (bis 767 px)
============================================================
⚠ NACHGEBESSERT AM 19.08.2026 (Meldung Chris: "da schaut unten nur
noch ein halber Auftrag raus, und ich kann nur diesen kleinen
Bereich scrollen").
Gemessen bei 375x812 vor dieser Änderung:
Topbar 67 · Reiter 44 · #stats 80 · .toolbar 294 ·
.col-order-info 45 = 530 px Beiwerk (65 % des Schirms)
-> für die Liste blieben 239 px, also 1,2 Karten.
Zwei Ursachen, beide hier behoben:
1. ⚠ NUR .table-area SCROLLTE. #view-auftraege ist eine Flex-Spalte
mit overflow:hidden; Zähler und Werkzeugleiste stehen darin fest,
und die Liste bekam den Rest — auf einem Telefon fast nichts.
Jetzt scrollt die ganze Ansicht: Beim Blättern wandern Zähler und
Leiste nach oben weg, danach gehört der Schirm den Aufträgen.
Das ist auch das, was man auf einem Telefon erwartet.
2. ⚠ DIE WERKZEUGLEISTE WURDE DURCH MEIN EIGENES flex-wrap HOCH.
Der Umbruch (Abschnitt A) beseitigte den waagerechten Überstand,
türmte die Felder aber untereinander: 149 + 120 px. Jetzt teilen
sie sich die Zeilen, statt jede für sich eine zu belegen.
Die Reiter bleiben oben stehen (sie sind der Weg aus der Ansicht
heraus), alles Übrige darf wegscrollen. */
@media (max-width: 767px), (pointer: coarse) {
/* ---- 1. Eine Ansicht, ein Scroll --------------------------- */
#view-auftraege { overflow-y: auto; }
/* ⚠ NUR DIE KINDER DER SPALTE. #view-auftraege ist ein Flex mit
column — dort steuert flex die HÖHE, und "0 0 auto" heisst: so
hoch wie der Inhalt, nichts mehr strecken.
.table-area gehört NICHT dazu: Sie ist Kind von .auftrag-content,
und das ist ein Flex mit ROW — dort steuerte dieselbe Angabe die
BREITE. Am 20.08.2026 genau so kaputtgegangen: Die Liste nahm ihre
Inhaltsbreite, und das Detail daneben schrumpfte auf 2 px, mit
allen Feldern weit ausserhalb des Schirms. */
#view-auftraege > #stats,
#view-auftraege > .toolbar,
#view-auftraege > .auftrag-content { flex: 0 0 auto; }
/* Der Scroll gehört jetzt der ganzen Ansicht, also darf hier nichts
mehr für sich scrollen oder abschneiden. Die Breitenverteilung
zwischen Liste und Detail bleibt unangetastet. */
.auftrag-content,
.table-area { overflow: visible; }
/* Ohne feste Höhe wäre die Liste im Ruhezustand nur so hoch wie ihr
Inhalt — das ist gewollt, sie wächst mit den Karten. */
.table-area { border: 0; background: none; }
/* ---- 2. Der Hinweis zur Spaltenreihenfolge entfällt ---------
"Spalten per Drag & Drop verschieben · Status-Badge anklicken"
kostet 45 px und beschreibt etwas, das es auf dem Telefon nicht
gibt: In der Kartenansicht existieren keine Spalten, und mit dem
Finger wird nichts gezogen. */
.col-order-info { display: none; }
/* ---- 3. Zähler als eine flache Zeile ------------------------
Fünf Kästen à 68 px übereinander sind 80 px hoch. Als eine Zeile,
die seitlich scrollt, bleiben alle Zahlen sichtbar und es kostet
die Hälfte. */
#stats {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
scrollbar-width: none;
}
#stats::-webkit-scrollbar { display: none; }
#stats .stat {
flex: 0 0 auto;
padding: 6px 10px;
min-width: 0;
}
#stats .stat .sv { font-size: 15px; }
#stats .stat .sl { font-size: 10px; white-space: nowrap; }
/* ---- 4. Werkzeugleiste kompakt ------------------------------ */
/* Suchfeld über die volle Breite, die beiden Auswahlfelder daneben-
einander, die Haken darunter in einer Zeile. */
.toolbar-row1-fields { gap: 6px; }
.toolbar-row1-fields > .sw { flex: 1 0 100%; }
.toolbar-row1-fields > select { flex: 1 1 calc(50% - 3px); min-width: 0; }
/* Die beiden Haken ("Nur Eilaufträge", "Duplikate ausblenden") sind
zusammen 301 px breit und passten mit dem Abstand knapp nicht in
eine Zeile — jeder belegte eine eigene. Etwas weniger Abstand, und
sie teilen sich eine. */
.toolbar-row1-fields > .eil-label { flex: 0 1 auto; font-size: 11.5px; }
.toolbar-row1-fields > .eil-label + .eil-label { margin-left: -2px; }
/* Weniger Polster um die ganze Leiste — bei 8/16 px und 7 px Abstand
kostet allein der Rahmen 30 px, die auf dem Telefon fehlen. */
.toolbar { padding: 6px 12px; gap: 5px; }
.toolbar-row1 { padding-bottom: 5px; }
/* ---- Zeitraum-Karussell: der Weiter-Pfeil fiel aus dem Bild -----
⚠ GEMELDET VON CHRIS (26.08.2026): "beim Datumskarussell in Aufträge
fehlt der Button rechts, damit man die Monate blättern kann. Das ist
nur bei der kleinen Anzeige so, am Tablet ist der Pfeil da."
Nachgemessen bei 375 px in der Auftragsansicht:
.toolbar-row2 325 px
auftrag-neu-btn 126 px x 25..151
month-nav 193 px x 157..350 — brauchte 273 px
zr-prev 40 px x 158..198 sichtbar
month-label 140 px x 198..338 sichtbar
zr-next 40 px x 338..378 ABGESCHNITTEN
zr-heute 51 px x 380..431 ganz draussen
Die Leiste teilte sich die Zeile mit "Neuer Auftrag" und bekam davon
nur 193 px. `.month-nav` traegt `overflow: hidden` (index.html 1217) —
die fehlenden 80 px wurden also still abgeschnitten, statt umzubrechen.
Am Tablet (768 px) greift diese Regel nicht, deshalb war der Pfeil dort
da.
Zwei Aenderungen, beide noetig:
1. Das Karussell bekommt eine eigene Zeile. Mit 325 px passen die
323 px Inhalt.
2. ⚠ WICHTIGER als 1: die richtige SCHRUMPF-REIHENFOLGE. Vorher gab
das Label nichts ab und die Knoepfe wurden hinausgedraengt —
dabei ist ein Knopf, den es nicht gibt, schlimmer als ein
gekuerzter Monatsname. Jetzt bleiben die Knoepfe fest und der
Text kuerzt mit Auslassungspunkten. Geprueft mit dem laengsten
Zeitraumtext ("KW 35 · 24.–30. November 2026"): beide Knoepfe
bleiben im Bild.
Ohne 2 haette der naechste laengere Text denselben Fehler erzeugt —
bei 323 von 325 px lag die Reserve bei zwei Bildpunkten. */
.toolbar-row2 { flex-wrap: wrap; gap: 6px; }
.toolbar-row2 > .month-nav { flex: 1 1 100%; min-width: 0; }
/* Praxis-Karussell (.praxis-nav-wrap): eine eigene volle Zeile. Innen
gilt dieselbe Schrumpf-Reihenfolge wie oben: Knoepfe fest, Name
kuerzt. (Die Sprung-Knöpfe daneben gibt es seit 07.10.2026 nicht
mehr in der Leiste — sie stehen in den Zeilen.) */
.toolbar-row2 > .praxis-nav-wrap,
.abr-ue-toolbar2 > .praxis-nav-wrap { flex: 1 1 100%; min-width: 0; }
.praxis-nav-wrap > .month-nav { flex: 1 1 auto; min-width: 0; }
/* „Monatsaufstellung erstellen“ (Monatsaufstellung): am Handy eine volle
Zeile, der Text darf umbrechen. Der Knopf trug nur nowrap und seine
Inhaltsbreite (203 px) — bei größerer Schrift oder schmalem Gerät
ragte er aus dem Bildschirm (gemeldet von Chris, 29.09.2026).
⚠ height:auto MIT !important: abrechnung.js setzt height:34px als
Inline-Stil; der schnitte sonst zweizeiligen Text ab. Das Ein- und
Ausblenden (Inline-display) bleibt davon unberührt. */
/* Die Monatsleiste in Abrechnung und Monatsaufstellung: eine volle Zeile
wie im Aufträge-Reiter (.toolbar-row2 > .month-nav oben). Ohne die
Regel blieb sie bei ihrer Inhaltsbreite (Monat mind. 140 px + vier
Knöpfe) und schob Kalender- und Weiter-Knopf aus dem Bild, sobald der
Schirm schmaler oder die Schrift größer war. Innen gilt wie überall:
Knöpfe fest, Monatstext kürzt. */
.abr-ue-toolbar2 > .month-nav { flex: 1 1 100%; min-width: 0; }
/* Der zweite „Monatsaufstellung erstellen“-Knopf, im Kasten „Noch nicht
abgerechnet“ neben dem Erstelldatum (srVorschauRender): am Handy in
eigener Zeile über die volle Breite, Text darf umbrechen. */
.sr-erst-zeile {
flex-wrap: wrap;
width: 100%;
}
/* ⚠ MONATSAUFSTELLUNG AM HANDY: GLEICH BREIT WIE DIE TABELLEN DER ANDEREN
REITER (Chris, 29.09.2026). Die Hinweiskästen und der Kasten „Noch
nicht abgerechnet“ tragen inline einen Außenabstand von 16 px links und
rechts, der Kasten dazu Rand und 12 px Innenabstand — die Tabelle darin
war 293 px breit (41–334) gegen 351 px (12–363) in Abrechnung und
Aufträgen. Die Inline-Stile sind fest, deshalb hier mit !important.
Am Rechner bleibt alles wie es ist. */
.sr-inset { margin-left: 0 !important; margin-right: 0 !important; }
.sr-vorschau-box { padding: 0 !important; border: 0 !important; background: none !important; }
/* Die Sprung-Spalte gibt es nur am Rechner (07.10.2026) — am Handy
bliebe die Tabelle der Vorschau sonst breiter als der Bildschirm. */
.sr-vorschau-box .sprung-kopf,
.sr-vorschau-box .sprung-zelle { display: none; }
/* ⚠ VORSCHAU "NOCH NICHT ABGERECHNET" AM HANDY: KEIN SEITLICHES SCROLLEN
(Fund 07.10.2026, gemessen bei 375 px: Tabelle 410–490 px in einem
349-px-Kasten). Ursache: Die allgemeine Regel td { white-space:
nowrap; max-width: 180px } hält jede Zelle einzeilig — die Zelle
"Patient" mit ihren zwei Plaketten ("aus Juli übernommen", "nicht
fertig") wurde bei 180 px abgeschnitten, die Tabelle blieb trotzdem
zu breit.
Jetzt: Zellen dürfen umbrechen (die Rechnungsnummer an ihrem
Leerzeichen, "RG_P-001 / 202607026"), nur der Betrag nicht, und der
seitliche Innenabstand wird kleiner.
⚠ Die laufende Nummer wird NICHT per display:none ausgeblendet,
sondern auf Breite 0 gedrückt: Die Fußzeile ("Summe") hat ein festes
colspan über die Spalten davor — fehlte die Spalte ganz, legte die
Fußzeile eine fünfte an (gemessen: +64 px Überlauf). */
.sr-vorschau-box td,
.sr-vorschau-box th { white-space: normal; max-width: none;
padding-left: 6px; padding-right: 6px; }
.sr-vorschau-box td[data-key="betrag"] { white-space: nowrap; }
.sr-vorschau-box th[data-key="nr"],
.sr-vorschau-box td[data-key="nr"] { width: 0; min-width: 0; max-width: 0;
padding: 0; border: 0; overflow: hidden;
font-size: 0; }
.sr-erst-knopf {
flex: 1 1 100%;
max-width: 100%;
white-space: normal;
height: auto !important;
min-height: 40px;
line-height: 1.25;
}
.abr-ue-toolbar2 > #sr-erstellen-btn {
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
white-space: normal;
height: auto !important;
min-height: 40px;
line-height: 1.25;
padding-top: 8px;
padding-bottom: 8px;
}
/* Auftrag-Modal, Terminzeile (.fg-termine): Am Telefon zwei gleich
breite Datumsfelder, die Fertigung darunter über die volle Breite —
150 + 150 + Umschalter passen nicht nebeneinander. */
.fg-termine { display: grid; grid-template-columns: 1fr 1fr; }
.fg-termine > #fr-fertigung,
.fg-termine > #fr-scanart,
.fg-termine > #fr-flags,
.fg-termine > .fg-hinweis { grid-column: 1 / -1; }
/* ⚠ Ein Datumsfeld ist von Haus aus 158 px breit und lässt sich vom
Raster nicht kleiner machen: Gemessen bei 375 px ragte das
Lieferdatum um 51 px über den Kasten hinaus (schon vor der Box).
Mit min-width: 0 dürfen beide auf ihre Spalte schrumpfen. */
.fg-termine > .fr { min-width: 0; }
.fg-termine input[type="date"] { min-width: 0; width: 100%; }
/* Gilt fuer ALLE fuenf Karussells (Auftraege, Kalender-Zeitraum,
-Praxis, -Techniker, Praxiswahl): Knoepfe fest, Text weicht. */
.month-nav > .month-nav-btn,
.month-nav > .month-nav-heute { flex: 0 0 auto; }
.month-nav > .month-nav-label { min-width: 0; overflow: hidden; }
.month-nav > .month-nav-label > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- 5. Karte etwas gedrungener ------------------------------
Bei 196 px passten kaum zwei auf den Schirm. Weniger Polster und
engere Zeilen bringen sie auf rund 150, ohne dass ein Feld
wegfällt. */
.table-area tbody tr {
padding: 6px 10px;
gap: 2px 6px;
margin-bottom: 5px;
}
}
/* Sehr schmale Telefone (bis 359 px): Zwei Datumsfelder nebeneinander
sind dort nur ~105 px breit und schneiden das Jahr ab ("28.09.20") —
untereinander haben sie die volle Breite. */
@media (max-width: 359px) {
.fg-termine { grid-template-columns: 1fr; }
}
/* ============================================================
I · SCHMAL — Detailansicht passt in den Schirm (bis 767 px)
============================================================
⚠ GEMELDET VON CHRIS (20.08.2026): "In der Detailansicht hängen
Menüteile und Infos ausserhalb vom Screen."
Nachgemessen im geöffneten Auftrag bei 375 px: Das Detail selbst
sass richtig (375x812, Vollbild), aber sein Inhalt war 543 px breit
— 168 px ragten hinaus. Alle fünf betroffenen Elemente gehörten zu
einem einzigen Gitter.
⚠ `.nz-row2` ist ein Grid mit `1fr 1fr` (index.html 3321): die
beiden Chat-Starter (Praxis-Chat, Techniker-Chat) nebeneinander.
Bei 332 px Platz wollte jede Spalte rund 250 px — zusammen 529.
Untereinander gestellt passen beide und bleiben gleich gross.
Alle übrigen Gitter im Detail wurden mitgeprüft (.dh-row1,
.dh-row2, .df-row2, .df-row3) — die passen und bleiben unberührt.
Geschrieben wie das bestehende Vorbild in der Datei (.ev-grid bei
max-width 900). */
@media (max-width: 767px), (pointer: coarse) {
.nz-row2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* ============================================================
I2 · SCHMAL — Karte Eingang / Lieferdatum / Rücktransport (bis 767 px)
============================================================
⚠ GEMELDET VON CHRIS (10.09.2026): "Wenn im Auftrag ein Rücktransport
eingetragen ist, läuft dieser Kasten samt Text aus dem Bildschirm."
`.el-card` (index.html) ist eine starre Flex-Zeile: je Eintrag Symbol
+ Beschriftung, dazwischen Trennstriche mit 12 px Rand. Zwei Einträge
passen; der dritte (Rücktransport, siehe eingangLieferHtml in
detail.js) braucht zusammen rund 415 px, bei 375 px Schirm sind es
rund 347. Die Hälften haben flex:1, dürfen aber nicht unter ihre
Textbreite schrumpfen (min-width:auto) — also ragt die Karte hinaus.
Hier wird die Karte ein Zwei-Spalten-Gitter, die Trennstriche
entfallen. Eingang und Lieferdatum bleiben nebeneinander; der dritte
Eintrag steht RECHTS in der zweiten Zeile, bündig unter dem
Lieferdatum (Festlegung Chris: Lieferung und Rückweg untereinander).
Das fünfte Kind ist diese dritte Hälfte — die Reihenfolge im DOM ist
Hälfte, Strich, Hälfte, Strich, Hälfte.
Dieselbe Regel trifft die Carrier/Tracking-Karte darunter
(logistikDetailZeileHtml): zwei Einträge, also nur die Trennstriche
weg; lange Tracking-Nummern brechen um statt zu überlaufen.
Desktop und Tablet bleiben unberührt. */
@media (max-width: 767px), (pointer: coarse) {
.el-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.el-sep { display: none; }
.el-half, .el-half > div { min-width: 0; }
.el-half .dv { overflow-wrap: anywhere; }
.el-card > .el-half:nth-child(5) { grid-column: 2; }
}
/* ============================================================
J · SCHMAL — PDF-Vorschau bleibt bedienbar (bis 767 px)
============================================================
⚠ GEMELDET VON CHRIS (20.08.2026): "Bei Druck auf Vorschau kommt die
Vorschau, aber keine Möglichkeit zurückzugehen."
Nachgemessen bei 375 px: Den Schliessen-Knopf GIBT es
(closePdfVorschau in der Leiste) — er stand nur bei x 391..426, also
16 px ausserhalb des Schirms. Die Leiste ist eine Zeile aus Titel,
Drucken, E-Mail und ✕; zusammen brauchten sie mehr Platz als da war.
Jetzt darf sie umbrechen: Titel oben, die Knöpfe darunter, alles im
Bild. Zusätzlich schliesst die Zurückgeste des Telefons die Vorschau
(siehe responsive.js). */
@media (max-width: 767px), (pointer: coarse) {
.pdf-toolbar {
flex-wrap: wrap;
row-gap: 6px;
}
/* Titel über die volle Breite, damit die Knopfgruppe darunter die
ganze Zeile hat und nicht wieder hinausgedrängt wird. */
.pdf-toolbar > .pdf-toolbar-title { flex: 1 0 100%; }
/* Die Knopfgruppe darf ihrerseits umbrechen — bei Rechnungen kommen
dort noch die Options-Knöpfe dazu (pdfSyncToolbarButtons). */
.pdf-toolbar > div { flex-wrap: wrap; row-gap: 6px; }
}
/* ============================================================
K · SCHMAL — Kopfleiste, Detailkopf, Vorschau (bis 767 px)
============================================================
⚠ VIER MELDUNGEN VON CHRIS (20.08.2026), alle nachgemessen. */
@media screen and (max-width: 767px), screen and (pointer: coarse) {
/* ---- 1. "Kein Ausloggen möglich" ---------------------------
Gemessen: Die Kopfleiste brauchte 463 px für 375. "Abmelden" stand
bei x 371..463 — vollständig ausserhalb, und die Leiste kann weder
umbrechen (nowrap) noch scrollen (overflow visible).
Statt sie scrollbar zu machen, passt sie jetzt hinein: Das Datum
entfällt (das zeigt das Telefon selbst), und die Knöpfe zeigen nur
ihr Zeichen.
⚠ NACHGEBESSERT AM 20.08.2026, zweite Meldung von Chris: "Logout
nicht möglich, weil der Button kein Ausloggen anbietet."
Gemessen bei 375 px: drei Knöpfe à 39 px nebeneinander (Rettungs-
ring, Personenkreis, Pfeil) — ohne Beschriftung ist nicht zu
erkennen, welcher abmeldet. Der Personenkreis liest sich wie
"Konto", und im Konto-Menü stehen nur Passwort und Zwei-Faktor,
KEIN Abmelden.
Deshalb behält #logout-btn als einziger seine Beschriftung.
Nachgemessen mit Text: 92 px bei x 271..363 (375er Schirm) bzw.
240..332 (344er Foldable) — beide Male ohne Überlauf
(scrollWidth = clientWidth). */
.topbar #date-str { display: none; }
/* Den Platz dafür gibt der Benutzername her. Gemessen blieben ihm
neben dem beschrifteten Abmelden-Knopf 31 px (375) bzw. 0 px
(344) — abgeschnitten auf ein bis zwei Zeichen ist er ohnehin
nicht mehr zu lesen. Wer angemeldet ist, ist auf dem eigenen
Telefon auch die unwichtigste der Angaben. */
.topbar #current-user-lbl { display: none; }
/* font-size:0 blendet die Beschriftung aus, ohne sie aus dem Markup
zu nehmen — Vorlesehilfen finden sie weiterhin. Das Zeichen
bekommt seine Grösse zurück.
⚠ :not(#logout-btn) — siehe Kasten oben. */
.topbar #support-btn,
.topbar #konto-btn-labor,
.topbar > .btn:not(#logout-btn) {
font-size: 0;
padding: 0 10px;
gap: 0;
}
.topbar #support-btn i,
.topbar #konto-btn-labor i,
.topbar > .btn:not(#logout-btn) i { font-size: 17px; }
/* Der Abmelden-Knopf bleibt lesbar — etwas schmaler gesetzt als am
Rechner, damit er neben den beiden Zeichen-Knöpfen Platz findet. */
.topbar > #logout-btn { font-size: 11px; padding: 0 10px; gap: 5px; }
.topbar > #logout-btn i { font-size: 15px; }
/* ---- 2. Knöpfe und Angaben im Detailkopf --------------------
.dh-row1 und .dh-row2 sind Gitter mit festen Spalten
(190px 90px 36px bzw. 190px 134px). Sobald ein Auftrag mehr
Knöpfe zeigt (E-Mail, Ablegen, MDR) oder ein längerer Hinweis
dazukommt (z. B. Rücktransport), reicht das nicht mehr und der
Inhalt schiebt sich nach rechts hinaus. Auf schmalen Schirmen
dürfen beide Zeilen umbrechen statt zu drängen. */
.dh-row1, .dh-row2 {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.dh-row1 > #dtitle { flex: 1 1 100%; }
.dh-row2-right { display: flex; flex-wrap: wrap; gap: 6px; }
/* ⚠ HIER STAND ".df-row2, .df-row3 { grid-template-columns:
minmax(0,1fr) }" — beide Gitter einspaltig. ZURÜCKGENOMMEN am
20.08.2026 auf Meldung von Chris: "Zahnfarbe ist nach links
gerutscht, unnötige Zeile damit eingebaut."
Die Annahme dahinter ("unter 100 px je Feld, dann bricht es mitten
im Wort") ist nachgemessen falsch. Bei 375 px im Auftrag:
dreispaltig 96 / 96 / 135 px, rechte Kante 361 von 375, in keinem
Feld ein Überlauf (scrollWidth = clientWidth). Mit einem
absichtlich langen Material ("Zirkonoxid mehrschichtig
transluzent") wächst die Zeile auf 77 px Höhe und bleibt drin.
Einspaltig kostete dieselbe Angabe 162 px statt 64 — zwei
Bildschirmzeilen mehr, für nichts.
⚠ Und sie wirkte weiter, als gedacht: .df-row3 steht auch im
Aufbau der PDF-Vorschau (detail.js, zahnschemaDetailHtml('-pdf')).
Media Queries messen den Schirm, nicht das Element — die 595 px
breite Vorschauseite wurde am Telefon also mit umgestellt und sah
dort anders aus als auf dem Papier. Mit dem Zurücknehmen ist auch
das erledigt. */
/* ---- 3. + 4. PDF-Vorschau ----------------------------------
⚠ Gemessen beim Auftragszettel: Die Seite ist ein festes
595x842-Kästchen (A4 bei 72 dpi). Bei 375 px Schirm stand sie bei
links = -117, also LINKS ABGESCHNITTEN — und zwar unerreichbar:
Der Kasten darum ist zwar scrollbar, zentriert sein Kind aber
(justify-content:center). Was links aus der Mitte herausragt,
liegt bei negativem Versatz und ist durch Scrollen NICHT zu holen.
Das ist genau der Fall "links abgeschnitten und lässt sich nicht
scrollen".
Zwei Massnahmen: linksbündig statt mittig (dann greift das
Scrollen wieder überall), und die Seite wird auf die Breite
eingepasst (responsive.js) — "zu gross" ist damit erledigt.
⚠ NUR FÜR DEN SCHIRM: "screen and" oben im Media Query sorgt
dafür, dass der Ausdruck unberührt bleibt. Ein vom Telefon
gedrucktes PDF soll nicht verkleinert herauskommen. */
/* ⚠ !important, weil justify-content:center als INLINE-Stil im
Markup steht (index.html: style="…justify-content:center") — eine
gewöhnliche Regel käme nicht dagegen an. Ohne das bleibt die Seite
mittig, ragt links ins Negative und ist durch Scrollen nicht zu
holen: genau der gemeldete Fall.
Zwei Seiten (Rechnung + Konformitätserklärung) stehen auf dem
Telefon untereinander statt nebeneinander — nebeneinander wären es
bei 375 px zwei halbe Blätter. */
#pdf-body-wrap {
justify-content: flex-start !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 8px;
overflow: auto;
}
}
/* ============================================================
L · SCHMAL — Belegkarten mit fester Summe (bis 767 px)
============================================================
Gilt für ZWEI Listen mit demselben Aufbau: die Rechnungsübersicht
(.abr-ue-kasten) und die Sammelrechnung (.sr-list-kasten, ergänzt am
20.08.2026 auf Wunsch von Chris: "selbes Kacheldesign wie bei
Abrechnung auch für Sammelrechnung").
⚠ EINE KARTENFORM, NICHT ZWEI. Alles Strukturelle steht unten für
beide Kästen zusammen; getrennt sind nur die data-key-Zuordnungen,
weil die Listen verschiedene Spalten haben. Wer die Kartenform
ändert, ändert sie damit für beide — genau so soll es sein.
============================================================
⚠ GEWÜNSCHT VON CHRIS (20.08.2026): "Abrechnungs-Tab ähnlich
aufbauen wie [den Aufträge-Tab] — Vorsicht, die untere Zeile zeigt
den Totalbetrag nicht, ist aber der wichtigste."
⚠ GEMESSEN, WARUM: Die Rechnungsübersicht hat 14 Spalten und ist
1544 px breit; ihr Kasten misst auf einem 375er Telefon 349 px. Man
sieht also nicht einmal ein Viertel und muss für jede weitere Spalte
wischen. Die Fusszeile mit "Summe: 3.089,98 €" steht in der neunten
Spalte (VK-Betrag) — auf dem Telefon bei rund x 900 und damit ausser
Sicht. Genau der Punkt aus Chris' Warnung.
⚠ DASSELBE VERFAHREN WIE BEI DER AUFTRAGSLISTE (Abschnitt E), aus
demselben Grund: Es wird KEINE zweite Kartenliste aus den Daten
gebaut, sondern die BESTEHENDEN Zellen werden umgeformt. Adressiert
wird über data-key, das abrechnung.js seit heute an jede Zelle
schreibt. Was die Tabelle zeigt, zeigt auch die Karte.
Gezeigt wird die Aufteilung aus dem freigegebenen Mockup:
Beleg-Nr. · Zahlungsstatus · Patient · Praxis · Datum · Fällig ·
Arbeitsart · Typ · VK-Betrag. Ausgeblendet bleiben laufende Nummer,
EK-Betrag, Mahnstufe, Produktstatus und die Aktionsspalte — sie
stehen weiter im Markup und sind im Breitformat sofort zurück.
⚠ Der Löschen-/Storno-Knopf ist bewusst NICHT auf der Karte. Unter
dem Finger, direkt neben dem Öffnen der Zeile, wäre er die falsche
Nachbarschaft; am Rechner bleibt er unverändert erreichbar. */
@media (max-width: 767px), (pointer: coarse) {
/* ⚠ KEIN EIGENER SCROLLBEREICH IM SCROLLBEREICH.
Erste Fassung gab dem Kasten eine max-height und overflow-y:auto,
damit die Summenleiste an ihm kleben kann. Nachgemessen war das
falsch: Gescrollt wird in dieser Ansicht bereits von .abr-sr-inner
(scrollHeight 1033 zu clientHeight 715) — das Dokument selbst
scrollt gar nicht. Der Kasten wurde damit zu einem zweiten
Scrollbereich im ersten, und die Summenleiste klebte am unteren
Rand des inneren Kastens, der bei 375x812 selbst 300 px ausserhalb
des Bildes lag.
Mit overflow:visible fällt der Kasten als Bezug weg, und die
Leiste klebt dort, wo der Nutzer wirklich scrollt. */
.abr-ue-kasten,
.sr-list-kasten { overflow: visible; }
.abr-ue-kasten thead,
.sr-list-kasten thead { display: none; }
.abr-ue-kasten table,
.abr-ue-kasten tbody,
.abr-ue-kasten tfoot,
.sr-list-kasten table,
.sr-list-kasten tbody,
.sr-list-kasten tfoot { display: block; width: 100%; }
/* Die Zeile wird zur Karte — Masse wie in der Auftragsliste, damit
sich beide Listen gleich anfühlen. */
.abr-ue-kasten tbody tr,
.sr-list-kasten tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 8px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: 10px;
margin: 0 0 8px;
padding: 9px 11px;
}
/* Der farbige Praxis-Streifen bleibt, wie in der Auftragsliste. */
.abr-ue-kasten tbody tr.px-farbe,
.sr-list-kasten tbody tr.px-farbe {
border-left: 3px solid var(--px, var(--border));
border-radius: 0;
}
.abr-ue-kasten tbody td,
.sr-list-kasten tbody td {
display: block;
border: 0;
padding: 1px 0;
white-space: normal;
width: auto !important;
max-width: none !important;
text-align: left !important;
}
/* --- Was die Karte nicht zeigt ------------------------------- */
.abr-ue-kasten tbody td[data-key="nr"],
.abr-ue-kasten tbody td[data-key="ek"],
.abr-ue-kasten tbody td[data-key="mahnstufe"],
.abr-ue-kasten tbody td[data-key="produktstatus"],
.abr-ue-kasten tbody td[data-key="sprung"],
.abr-ue-kasten tbody td[data-key="aktion"] { display: none; }
/* --- Kopfzeile: Belegnummer links, Zahlungsstatus rechts ------ */
.abr-ue-kasten tbody td[data-key="belegnr"] { order: 1; flex: 1 1 auto; }
.abr-ue-kasten tbody td[data-key="zahlstatus"] { order: 2; flex: 0 0 auto; }
/* --- Patient gross, Praxis darunter --------------------------- */
.abr-ue-kasten tbody td[data-key="patient"] {
order: 3; flex: 1 0 100%;
font-size: 14px; font-weight: 600; padding-top: 3px;
}
.abr-ue-kasten tbody td[data-key="praxis"] {
order: 4; flex: 1 0 100%;
font-size: 12px; color: var(--text-secondary);
}
/* --- Nebenangaben in einer Zeile, mit Beschriftung ------------
Ohne Spaltenkopf wäre sonst nicht erkennbar, wofür "01.09.2026"
steht — dieselbe Überlegung wie in der Auftragsliste. */
.abr-ue-kasten tbody td[data-key="datum"],
.abr-ue-kasten tbody td[data-key="faellig"],
.abr-ue-kasten tbody td[data-key="art"] {
order: 5;
flex: 0 0 auto;
font-size: 12px;
color: var(--text-secondary);
}
.abr-ue-kasten tbody td[data-key="datum"]::before { content: "Datum: "; color: var(--text-muted); }
.abr-ue-kasten tbody td[data-key="faellig"]::before { content: "Fällig: "; color: var(--text-muted); }
.abr-ue-kasten tbody td[data-key="art"]::before { content: "Art: "; color: var(--text-muted); }
/* --- Fuss der Karte: Typ links, Betrag rechts und gross -------
Der Betrag ist die Angabe, wegen der man die Liste öffnet. */
.abr-ue-kasten tbody td[data-key="typ"] {
order: 6; flex: 1 1 auto;
padding-top: 6px; margin-top: 6px;
border-top: 0.5px solid var(--border);
}
.abr-ue-kasten tbody td[data-key="vk"] {
order: 7; flex: 0 0 auto;
padding-top: 6px; margin-top: 6px;
border-top: 0.5px solid var(--border);
font-size: 15px; font-weight: 600;
text-align: right !important;
}
/* --- Die Summenleiste ----------------------------------------
⚠ DER PUNKT AUS CHRIS' WARNUNG. Sie klebt am unteren Rand des
Kastens und scrollt nicht mit den Belegen weg. */
.abr-ue-kasten tfoot,
.sr-list-kasten tfoot {
position: sticky;
bottom: 0;
z-index: 2;
}
.abr-ue-kasten tfoot tr,
.sr-list-kasten tfoot tr {
display: flex;
align-items: center;
background: var(--surface-2);
border-top: 0.5px solid var(--border-strong);
padding: 0;
}
.abr-ue-kasten tfoot td,
.sr-list-kasten tfoot td {
display: block;
border: 0;
width: auto !important;
}
/* order: Anzahl links, Summe rechts — unabhängig von der Stellung im
Markup (in der Abrechnung folgt sie der verschiebbaren Spalte VK). */
.abr-ue-kasten tfoot td[data-key="foot-anzahl"],
.sr-list-kasten tfoot td[data-key="foot-anzahl"] { flex: 1 1 auto; order: 1; }
.abr-ue-kasten tfoot td[data-key="foot-summe"],
.sr-list-kasten tfoot td[data-key="foot-summe"] {
flex: 0 0 auto;
order: 2;
font-size: 15px !important;
font-weight: 600 !important;
}
/* Die leeren Auffüllzellen der Fusszeile haben ohne Spalten keinen
Zweck mehr und würden die Leiste nur breiter machen. */
.abr-ue-kasten tfoot td:not([data-key]),
.sr-list-kasten tfoot td:not([data-key]) { display: none; }
/* ---- Sammelrechnung: dieselbe Karte, andere Spalten -----------
Die Sammelrechnung kennt keinen Patienten — grosser Träger der
Karte ist deshalb die PRAXIS, darunter klein ihre Kennung. Statt
der Belegart steht im Fuss der Druckstatus (gedruckt, gesperrt,
storniert); er bleibt anklickbar wie am Rechner. */
.sr-list-kasten tbody td[data-key="belegnr"] { order: 1; flex: 1 1 auto; }
.sr-list-kasten tbody td[data-key="bezahlung"] { order: 2; flex: 0 0 auto; }
.sr-list-kasten tbody td[data-key="praxis"] {
order: 3; flex: 1 0 100%;
font-size: 14px; font-weight: 600; padding-top: 3px;
}
.sr-list-kasten tbody td[data-key="monat"],
.sr-list-kasten tbody td[data-key="erstellt"],
.sr-list-kasten tbody td[data-key="anzahl"] {
order: 5;
flex: 0 0 auto;
font-size: 12px;
color: var(--text-secondary);
}
.sr-list-kasten tbody td[data-key="monat"]::before { content: "Monat: "; color: var(--text-muted); }
.sr-list-kasten tbody td[data-key="erstellt"]::before { content: "Erstellt: "; color: var(--text-muted); }
.sr-list-kasten tbody td[data-key="anzahl"]::before { content: "Rechnungen: "; color: var(--text-muted); }
.sr-list-kasten tbody td[data-key="druckstatus"] {
order: 6; flex: 1 1 auto;
padding-top: 6px; margin-top: 6px;
border-top: 0.5px solid var(--border);
text-align: left !important;
}
.sr-list-kasten tbody td[data-key="betrag"] {
order: 7; flex: 0 0 auto;
padding-top: 6px; margin-top: 6px;
border-top: 0.5px solid var(--border);
font-size: 15px; font-weight: 600;
text-align: right !important;
}
.sr-list-kasten tbody td[data-key="nr"],
.sr-list-kasten tbody td[data-key="mahnstufe"],
.sr-list-kasten tbody td[data-key="sprung"],
.sr-list-kasten tbody td[data-key="aktion"] { display: none; }
/* ⚠ Der Leerzustand ist EINE Zelle mit colspan — in der Kartenform
traegt colspan nicht mehr. Die Zeile bleibt deshalb ein schlichter
Block ohne Kartenrahmen, sonst stuende "Keine Sammelrechnungen
gefunden" in einer leeren Kachel. */
.sr-list-kasten tbody tr[data-leer] {
display: block;
background: none;
border: 0;
padding: 0;
}
.sr-list-kasten tbody td[data-key="leer"] { text-align: center !important; }
}
/* ============================================================
K · SCHMAL — Ziehgriff unter Notizfeldern (bis 767 px)
============================================================
Festlegung Chris, 15.10.2026: "Info an den Zahnarzt" und "Notiz direkt
in Orderform" waren am Handy viel zu hoch (146 statt 50 px, Ursache siehe
posNotizBeobachten in positionen.js) und sollen durch Aufziehen größer
werden. Die Ecke unten rechts, mit der ein Browser am Rechner ein Feld
aufzieht, gibt es auf dem Telefon nicht — darum ein schmaler Griff
darunter (posNotizGriffAnlegen), der mit dem Finger gezogen wird.
Am Rechner bleibt er unsichtbar. */
.ta-griff { display: none; }
@media (max-width: 767px), (pointer: coarse) {
.pos-notiz-griff { resize: none; }
.ta-griff {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
margin-top: -2px;
cursor: ns-resize;
touch-action: none; /* der Finger zieht das Feld, nicht die Seite */
user-select: none;
}
.ta-griff::before {
content: "";
width: 44px;
height: 4px;
border-radius: 2px;
background: var(--border-strong);
}
}
/* ============================================================
L · SCHMAL — Kalender: Mini-Monat mit Tagesliste (bis 767 px)
============================================================
Festlegung Chris, 15.10.2026 (Variante B). Gemessen bei 375 px war die
Kalenderfläche von Timeline und Gitter nur 41 px breit — die Seiten-
leiste "Heute fällig" hat feste 280 px. Dazu 200 px Werkzeugleiste und
vier 96 px hohe Kennzahlen-Kacheln, bevor überhaupt etwas vom Kalender
kam. Am Handy gilt deshalb:
· Timeline, Gitter und Legende sind aus (!important, weil
kmToggleAnsichtDom() ihnen per Inline-Stil display setzt),
· stattdessen #km-mobil (kalender-mobil.js): Mini-Monat + Tagesliste,
· Werkzeugleiste auf zwei Zeilen, Praxis/Techniker/Eil hinter "Filter",
· Kennzahlen als schmale Chips in einer Zeile,
· "Heute fällig" unter dem Monat, aufklappbar.
Am Rechner bleibt alles wie es war. */
@media (max-width: 767px), (pointer: coarse) {
#view-kalender .km-inner { padding: 8px 10px; gap: 8px; }
/* Timeline, Gitter, Legende und die beiden Umschalter entfallen. */
#view-kalender .km-board,
#view-kalender #km-legend,
#view-kalender #km-grid,
#view-kalender .km-btn[data-km-ansicht] { display: none !important; }
#view-kalender #km-mobil { display: block; }
/* Werkzeugleiste: Monat über die volle Breite, darunter Suche + Filter. */
#view-kalender .km-toolbar { gap: 6px; }
#view-kalender #km-zeitraum-nav { order: 1; flex: 1 1 100%; }
#view-kalender #km-zeitraum-nav .month-nav-label { flex: 1 1 auto; }
#view-kalender .km-toolbar > .sw { order: 2; flex: 1 1 140px; min-width: 0; }
#view-kalender .km-toolbar .km-filter-btn { order: 3; display: inline-flex; align-items: center; gap: 5px; height: 34px; }
#view-kalender #km-such-info { order: 4; }
#view-kalender .km-sep { display: none; }
/* Praxis, Techniker, Eilaufträge erst nach Tipp auf "Filter". */
#view-kalender #km-praxis-nav,
#view-kalender #km-tech-nav,
#view-kalender .km-toolbar .eil-label { display: none; order: 5; }
#view-kalender .km-toolbar.km-filter-offen #km-praxis-nav,
#view-kalender .km-toolbar.km-filter-offen #km-tech-nav { display: flex; flex: 1 1 100%; }
#view-kalender .km-toolbar.km-filter-offen .eil-label { display: flex; flex: 1 1 100%; }
#view-kalender.km-embedded #km-praxis-nav,
#view-kalender.km-embedded #km-tech-nav { display: none; }
/* Kennzahlen: vier schmale Chips in einer Zeile. */
#view-kalender .km-stats { gap: 6px; }
#view-kalender .km-stat { padding: 4px 8px; display: flex; align-items: baseline; gap: 5px; }
#view-kalender .km-stat .kv { font-size: 15px; }
#view-kalender .km-stat .kl { font-size: 10px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inhalt untereinander: Monat, Tagesliste, darunter "Heute fällig". */
#view-kalender .km-content { flex-direction: column; flex: 0 0 auto; }
#view-kalender .km-main { flex: 0 0 auto; padding: 8px; gap: 8px; }
#view-kalender .km-sidebar { width: auto; }
#view-kalender .km-sidebar-head { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#view-kalender .km-sidebar-head::after { content: "\ea5f"; font-family: "tabler-icons"; font-size: 14px; color: var(--text-muted); }
#view-kalender .km-sidebar.km-offen .km-sidebar-head::after { content: "\ea62"; }
#view-kalender .km-sidebar:not(.km-offen) .km-sidebar-list { display: none; }
#view-kalender .km-sidebar-list { max-height: 50vh; }
/* --- Mini-Monat ------------------------------------------------ */
.km-m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
background: var(--surface-2); border: 0.5px solid var(--border);
border-radius: 10px; padding: 6px; }
.km-m-w { font-size: 10px; text-align: center; color: var(--text-muted); padding-bottom: 2px; }
.km-m-c { height: 40px; border-radius: 6px; display: flex; flex-direction: column;
align-items: center; justify-content: flex-start; padding-top: 4px;
font-size: 13px; color: var(--text-primary); cursor: pointer; }
.km-m-c i { display: flex; gap: 2px; margin-top: 3px; height: 7px; font-style: normal; align-items: center; }
.km-m-c i u { width: 6px; height: 6px; border-radius: 50%; display: block; text-decoration: none; }
.km-m-c i u.km-m-priv { background: transparent; border: 1.5px solid var(--text-muted); box-sizing: border-box; }
.km-m-c i b { font-size: 9px; line-height: 1; color: var(--text-muted); font-weight: 500; }
.km-m-aus { color: var(--text-muted); opacity: .6; }
.km-m-heute { outline: 1.5px solid var(--border-accent); outline-offset: -1.5px; }
.km-m-ueb { box-shadow: inset 0 0 0 1.5px var(--text-danger); }
.km-m-sel { background: var(--bg-accent); font-weight: 500; }
/* --- Tagesliste ------------------------------------------------ */
.km-m-kopf { display: flex; justify-content: space-between; align-items: center;
font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 4px 2px 0; }
.km-m-neu { border: 0.5px solid var(--border-strong); background: var(--surface-2);
color: var(--text-primary); border-radius: var(--radius); padding: 6px 10px;
font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.km-m-leer { padding: 12px 4px; font-size: 12px; color: var(--text-muted); text-align: center; }
.km-m-row { display: flex; align-items: center; gap: 8px; cursor: pointer;
background: var(--surface-2); border: 0.5px solid var(--border);
border-left: 3px solid var(--pc, var(--border-strong));
border-radius: 8px; padding: 6px 9px; }
.km-m-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.km-m-t { flex: 1; min-width: 0; }
.km-m-p { font-size: 13px; font-weight: 500; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-m-s { font-size: 11px; color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-m-row .status-badge { flex: none; }
.km-m-row-priv { border-left-color: var(--border-strong); }
.km-m-row-priv > i { color: var(--text-muted); font-size: 14px; }
}
/* ============================================================
M · SCHMAL — Kopfzeile der Praxis- und Techniker-Ansicht (bis 767 px)
============================================================
⚠ GEFUNDEN 15.10.2026 (beim Prüfen des Kalenders): Für diese Kopfzeile
gab es keine einzige Handy-Regel. Sie ist eine Flex-Zeile aus Titel,
Mittelgruppe (Neuer Auftrag, Suche 200 px, Zeitraum-Karussell) und
Hilfe/Konto — bei 375 px blieb dem Titel (min-width:0) 0 px: Der Name der
Praxis stand Buchstabe für Buchstabe untereinander, die Zeile war 606 px
hoch und Hilfe/Konto ragten rechts hinaus. Die Umschaltleiste darunter
(6 Knöpfe, 671 px) schnitt "Einzelrechnungen" ab.
Jetzt: Zeile 1 = Titel (kürzt mit …) und Hilfe/Konto; Zeile 2 = die
Mittelgruppe über die volle Breite. Die Umschaltleiste scrollt seitlich
statt abzuschneiden. Gilt für Praxis UND Technik (gleiche Klassen). */
@media (max-width: 767px), (pointer: coarse) {
.tv-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.tv-topbar-title { order: 1; flex: 1 1 0; max-width: none; min-width: 0; font-size: 14px; }
.tv-topbar-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-topbar-right { order: 2; flex: 0 0 auto; gap: 6px; }
/* Die Mittelgruppe trägt ihre Anordnung im style-Attribut — nur !important schlägt das. */
.tv-topbar > div:nth-child(2) { order: 3; flex: 1 1 100% !important; justify-content: flex-start !important; gap: 6px !important; }
.tv-topbar > div:nth-child(2) .sw { width: auto !important; flex: 1 1 140px; min-width: 0; }
/* Umschaltleiste: seitlich wischen statt abschneiden. */
.tv-subbar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 6px 12px;
scrollbar-width: none; }
.tv-subbar::-webkit-scrollbar { display: none; }
.tv-subbar .pv-viewseg { flex: 0 0 auto; }
}
/* ============================================================
N · SCHMAL — Auftragsliste in Praxis und Technik als Karten (bis 767 px)
============================================================
Festlegung Chris, 15.10.2026 (Variante A, wie die Karte im Labor).
Die Listen waren Tabellen mit 7 (Praxis) bzw. 9 (Technik) Spalten,
668 px breit in einem 315-px-Kasten — man wischte seitlich.
⚠ KEINE ZWEITE DARSTELLUNG, wie im Labor (Abschnitt E): Die vorhandenen
Tabellenzellen werden umgeformt. Adressiert wird über Klassen, die
praxis-view.js / techniker-view.js an die Zellen schreiben (pk-*, tk-*)
und die Tabellenklasse .pv-auftrag-tabelle — NICHT über Spaltenpositionen
und nicht über .pv-native-table allein, denn die tragen auch Rechnungs-
und Optionslisten.
PRAXIS Zeile 1: Patient · Status
Zeile 2: Nr · Dateien · Auftragsart · Termin · Beleg-Marke
(Der Patient-Zelle liegt ein Div für Name und eins für die Art
bei; display:contents macht beide zu eigenen Flex-Teilen.)
TECHNIK Zeile 1: Auftragsnummer (mit Eil) · Order-Form-Knopf
Zeile 2: Auftragsart · Material
Zeile 3: Zähne · Farbe · Termin
Der Papierkorb der Praxis entfällt auf der Karte (steht im Detail:
delSel). Der Zeilenumbruch kommt aus leeren Flex-Elementen (::after /
::before) mit passender order — so brauchen die Zellen keinen Umbau. */
@media (max-width: 767px), (pointer: coarse) {
/* Kasten ohne eigenen Rahmen: Die Karten bringen ihren mit. */
.pv-list-col.pv-kasten:has(.pv-auftrag-tabelle) { background: none; border: 0; padding: 0; }
.pv-auftrag-tabelle thead { display: none; }
.pv-auftrag-tabelle,
.pv-auftrag-tabelle tbody { display: block; width: 100%; }
.pv-auftrag-tabelle tbody tr.pv-row-click {
display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
background: var(--surface-2); border: 0.5px solid var(--border);
border-radius: 10px; margin: 0 0 5px; padding: 6px 10px;
}
.pv-auftrag-tabelle tbody tr.pv-row-click.sel { background: var(--bg-accent); }
.pv-auftrag-tabelle tbody tr.pv-row-click > td {
display: block; border: 0; padding: 0; width: auto; max-width: none; white-space: normal;
background: transparent !important; box-shadow: none !important;
}
.pv-auftrag-tabelle tbody tr.pv-row-click > td:empty { display: none; }
/* Harter Umbruch hinter order 2 (alle Karten); bei der Technik zusätzlich
einer hinter order 4. */
.pv-auftrag-tabelle tbody tr.pv-row-click::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
.pv-auftrag-tabelle tbody tr.pv-row-click:has(> td.tk-art)::before { content: ""; order: 4; flex: 0 0 100%; height: 0; }
/* Der Termin bekommt ein Kalendersymbol statt einer Spaltenüberschrift. */
.pv-auftrag-tabelle .pk-liefer::before,
.pv-auftrag-tabelle td.tk-liefer::before {
content: "\ea53"; font-family: "tabler-icons"; color: var(--text-muted);
font-size: 12px; margin-right: 3px; vertical-align: -1px;
}
.pv-auftrag-tabelle .pk-liefer,
.pv-auftrag-tabelle td.tk-liefer { white-space: nowrap !important; font-size: 11px; }
/* --- PRAXIS ---------------------------------------------------- */
.pv-auftrag-tabelle tr:has(> td.pk-pat) > td.pk-pat { display: contents; }
.pk-pat > div:first-child { order: 1; flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-pat > .tv-sub { order: 6; flex: 1 1 56px; min-width: 56px; font-size: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-auftrag-tabelle tr:has(> td.pk-pat) > td.pk-status { order: 2; flex: 0 0 auto; }
.pv-auftrag-tabelle tr:has(> td.pk-pat) > td.tv-cell-id { order: 3; flex: 0 0 auto; font-size: 11px;
font-weight: 500; white-space: nowrap; }
.pv-auftrag-tabelle tr:has(> td.pk-pat) > td.col-fix-dateien { order: 5; flex: 0 0 auto; }
/* Termine (03.11.2026): Am Desktop EINE Spalte mit drei Zeilen. Hier löst sich die Zelle auf, ihre drei Spans
(Liefer, Eingang, Wunsch) sind wie früher einzelne kleine Felder der Karte; die Zeilenbeschriftung der Spalte
entfällt zugunsten der Kurzbeschriftung davor. */
.pv-auftrag-tabelle tbody tr.pv-row-click > td.pk-termine { display: contents; }
.pk-termine .pt-k { display: none; }
.pk-termine > span { display: inline; gap: 0; line-height: normal; }
.pv-auftrag-tabelle tr:has(> td.pk-pat) .pk-liefer { order: 7; flex: 0 0 auto; }
/* Eingang (neu, 03.11.2026): klein hinter dem Termin, mit Beschriftung, weil das
Kalendersymbol schon dem Liefertermin gehört. Die Spaltenköpfe (Sortierung)
gibt es auf der Karte nicht — sortiert wird hier nach Eingang, neueste oben. */
.pv-auftrag-tabelle tr:has(> td.pk-pat) .pk-eingang { order: 8; flex: 0 0 auto; font-size: 11px; white-space: nowrap !important; }
.pv-auftrag-tabelle .pk-eingang::before { content: "Eing. "; color: var(--text-muted); }
/* Wunschdatum (03.11.2026): klein hinter dem Eingang, nur wenn gesetzt; mit Warndreieck, wenn das
Lieferdatum danach liegt. */
.pv-auftrag-tabelle tr:has(> td.pk-pat) .pk-wunsch { order: 8; flex: 0 0 auto; font-size: 11px; white-space: nowrap !important; }
.pv-auftrag-tabelle .pk-wunsch::before { content: "Wunsch "; color: var(--text-muted); }
.pv-auftrag-tabelle tr:has(> td.pk-pat) > td.pv-beleg-cell { order: 9; flex: 0 0 auto; }
/* Ohne Beleg steht dort nur ein Strich — dann gar nichts. */
.pv-auftrag-tabelle tr > td.pv-beleg-cell:not(:has(.beleg-typ-badge)) { display: none; }
.pv-auftrag-tabelle tr > td.pv-beleg-cell .beleg-typ-badge { min-height: 24px; min-width: 0; padding: 2px 8px; }
.pv-auftrag-tabelle tr > td.pv-del-cell { display: none; }
.pv-auftrag-tabelle td.col-fix-dateien .dt-badge { padding: 3px 7px; min-height: 0; }
/* "Info vom Labor": die Zeile darunter gehört zur Karte und teilt ihren Rand. */
.pv-auftrag-tabelle tbody tr.pv-hat-info { border-left: 3px solid #0AB6D1; border-bottom: 0;
border-radius: 10px 10px 0 0; margin-bottom: 0; }
.pv-auftrag-tabelle tbody tr.pv-fi-zeile {
display: block; background: color-mix(in srgb, #0AB6D1 9%, var(--surface-2));
border: 0.5px solid var(--border); border-left: 3px solid #0AB6D1; border-top: 0;
border-radius: 0 0 10px 10px; margin: 0 0 5px; padding: 6px 10px;
}
.pv-auftrag-tabelle tbody tr.pv-fi-zeile > td { display: block; width: 100% !important; max-width: none !important; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
.pv-auftrag-tabelle tr.pv-fi-zeile .pv-fi-kopf { flex-wrap: wrap; }
.pv-auftrag-tabelle tr.pv-fi-zeile .pv-fi-kopf > span { flex: 1 1 140px; }
/* --- TECHNIK --------------------------------------------------- */
.pv-auftrag-tabelle tbody tr.pv-row-click.px-farbe { border-left: 3px solid var(--px, var(--border)); }
.pv-auftrag-tabelle tr:has(> td.tk-art) > td.tk-nr,
.pv-auftrag-tabelle tr:has(> td.tk-art) > td.tk-eingang { display: none; }
.pv-auftrag-tabelle tr:has(> td.tk-art) > td.tv-cell-id { order: 1; flex: 1 1 0; min-width: 0; font-size: 12px;
font-weight: 600; white-space: nowrap; }
.pv-auftrag-tabelle tr:has(> td.tk-art) > td.tv-of-cell { order: 2; flex: 0 0 auto; text-align: right !important; }
.pv-auftrag-tabelle tr > td.tk-art { order: 3; flex: 0 1 auto; max-width: 70%; font-size: 12px; font-weight: 500; }
.pv-auftrag-tabelle tr > td.tk-art .art-badge { background: none !important; border: 0 !important; padding: 0 !important;
color: var(--text-primary) !important; font-size: 12px; display: inline !important; }
.pv-auftrag-tabelle tr > td.tk-mat { order: 3; flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-auftrag-tabelle tr > td.tk-zaehne { order: 5; flex: 1 1 0; min-width: 0; font-size: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-auftrag-tabelle tr > td.tk-farbe { order: 5; flex: 0 0 auto; font-size: 11px; color: var(--text-secondary); }
.pv-auftrag-tabelle tr > td.tk-liefer { order: 5; flex: 0 0 auto; }
/* Trennzeile "Aus anderen Zeiträumen": schmale Überschrift statt Karte. */
.pv-auftrag-tabelle tbody tr.zr-trennzeile { display: block; background: none; border: 0; padding: 8px 2px 2px; margin: 0; }
.pv-auftrag-tabelle tbody tr.zr-trennzeile > td { display: block; width: 100% !important; max-width: none !important; padding: 0 !important;
border: 0 !important; background: none !important; box-shadow: none; }
/* Weniger Rand um die Kartenliste: 20 px links und rechts waren die Seitenpolster der Desktop-Ansicht. */
.tv-body:has(.pv-auftrag-tabelle) { padding: 8px 10px; }
}
/* ============================================================
O · SCHMAL — Filterfläche im Aufträge-Tab zusammenklappbar (bis 767 px)
============================================================
Festlegung Chris, 15.10.2026. Die Werkzeugleiste war auf dem Handy rund
400 px hoch (Suche, drei Auswahlfelder, drei Haken), bevor der erste
Auftrag kam. Jetzt: Suche + Knopf "Filter" in einer Zeile; die drei
Auswahlfelder und die Haken erst nach Tipp auf "Filter". Eine Zahl am
Knopf nennt die gesetzten Filter (aufFilterZaehlen, auftraege.js) — so
sieht man auch zugeklappt, dass die Liste gefiltert ist (z. B. nach
einem Sprung von der Dashboard-Kachel "Überfällig"). Zeile 2 (Neuer
Auftrag, Zeitraum, Praxis) bleibt immer sichtbar.
⚠ AUCH AUF DEM TABLET, HOCH UND QUER (Festlegung Chris, 03.11.2026).
Bis dahin galt nur max-width:767px — ein Tablet (768–1023 hochkant,
ab 1024 quer) zeigte die Filterzeile immer offen und hatte keinen
Knopf. Jetzt zusätzlich (pointer: coarse): jedes Gerät, dessen
Haupteingabe der Finger ist, egal in welcher Drehung. Am Rechner mit
Maus matcht nichts davon — dort ändert sich nichts. */
.auf-filter-btn { display: none; }
@media (max-width: 767px), (pointer: coarse) {
#view-auftraege .toolbar-row1-fields > .sw { flex: 1 1 140px; width: auto !important; min-width: 0; }
#view-auftraege .toolbar-row1-fields > .auf-filter-btn {
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
}
.auf-filter-n { background: var(--fill-accent); color: #fff; border-radius: 999px;
font-size: 11px; line-height: 1; padding: 3px 6px; font-weight: 500; }
.auf-filter-n:empty { display: none; }
#view-auftraege .toolbar:not(.auf-filter-offen) .toolbar-row1-fields > :not(.sw):not(.auf-filter-btn) { display: none; }
/* Ohne eingeblendete Felder braucht die Zeile keinen Trennstrich darunter. */
#view-auftraege .toolbar:not(.auf-filter-offen) .toolbar-row1 { padding-bottom: 0; border-bottom: 0; }
}
/* ============================================================
P · SCHMAL — Filterzeile in Abrechnung und Monatsaufstellung
zusammenklappbar (bis 767 px)
============================================================
Festlegung Chris, 15.10.2026 — dasselbe wie im Aufträge-Tab (Abschnitt O).
Zugeklappt: Suche + Knopf "Filter" in einer Zeile. Aufgeklappt: Status,
Belegarten-Marken, die drei "Alle RG"-Knöpfe (Abrechnung) bzw. der
Zahlungsstatus (Monatsaufstellung). Die Zahl am Knopf nennt die gesetzten
Filter (abrUeFilterZaehlen / srFilterZaehlen, abrechnung.js). Zeile 2
(Neuer Beleg, Monat, Praxis) bleibt sichtbar. Wie in O gilt es auch für
Touch-Geräte jeder Breite (pointer: coarse), 03.11.2026. */
@media (max-width: 767px), (pointer: coarse) {
.abr-ue-toolbar1 > .sw { flex: 1 1 140px; width: auto !important; min-width: 0; }
.abr-ue-toolbar1 > .auf-filter-btn { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.abr-ue-toolbar1:not(.auf-filter-offen) > :not(.sw):not(.auf-filter-btn) { display: none; }
}
/* ============================================================
Q · SCHMAL — Inbox: Abholordner als Karten (bis 767 px)
============================================================
Gemeldet 03.11.2026: Die Verlaufstabelle des Abholordners hat sieben
Spalten und war gemessen 624 px breit in einem 293 px breiten Kasten
(zwei Testzeilen, 375 px Schirm). "Auftrag", "Was passiert ist" und die
Knöpfe lagen außerhalb und waren nicht erreichbar — der Weg in den
Auftrag fehlte genau dort, wo man ihn braucht.
Gleiches Vorgehen wie Abschnitt E: KEINE zweite Darstellung, sondern die
bestehenden Zellen umformen. Jede |