/* ========================================================================== Ausgangsrechnungen — Oberfläche nach dem Entwurf "Ausgangsrechnung Redesign" Quelle: Claude-Design-Projekt 098bbd20-9d43-4752-9555-4b964e1bb414 (Datei "Ausgangsrechnung Redesign.dc.html", übernommen am 2026-09-08). Gestaltungsplan der Vorfassung: ProjectaPro/docs/design/2026-09-08-ausgangsrechnungen-design.md ⚠ ALLES hier ist auf #pageAusgangsrechnungen und #pageVertrieb (Verkaufsliste, seit 18.09.2026 dieselbe Gestaltung auf eigener Seite) bzw. die eigenen Überlagerungen der Seite begrenzt. Grund: die Seite benutzte .chip / .badge / .badge-success / .btn-success, und keine dieser Klassen ist in app.css definiert. Sie hier global zu definieren würde die Navigationszähler (.nav-item .badge in index.html) und VoiceDesk (.btn-success) mitverändern. Neue Zustände deshalb IMMER als .ar-* in dieser Datei, nicht in app.css. Aufbau des Entwurfs, damit eine spätere Änderung nicht dagegen arbeitet: - Solide weiße Karten (KEIN App-Glas) mit 18 Pixel Radius auf dem Seitengrund. Der Entwurf setzt --bg auf #F4F6F9, der App-Grund ist #f1f5f9: praktisch derselbe Ton, deshalb bleibt der Seitenhintergrund der der App. - Eigene Farbstufen --ar-t … --ar-t4 statt der App-Tokens, weil der Entwurf VIER Textstufen kennt (die App drei) und andere Werte für Rot/Grün/Amber. - Etiketten sind 11 Pixel, fett, 0.08em gesperrt, Großbuchstaben. - Eingabefelder 40 Pixel hoch, Radius 11. Knöpfe 36 Pixel, Radius 11. - Zustand einer Rechnung = eine Klasse (.s-draft/.s-open/.s-late/.s-part/ .s-paid/.s-void), kein Farbwert im Skript. Grundsatz der Farbgebung: LAUT heißt zu tun, LEISE heißt fertig. Bezahlte Rechnungen treten zurück, überfällige nicht. ========================================================================== */ :is(#pageAusgangsrechnungen, #pageVertrieb) { /* ── Flächen und Linien (Entwurf, Abschnitt :root) ── */ --ar-card: #ffffff; --ar-s2: #f4f6f9; /* surface-2: Leisten, Zähler, gedrückte Felder */ --ar-s3: #fbfcfd; /* surface-3: Kopfzeilen, aufgeklappte Bereiche */ --ar-input: #ffffff; --ar-bd: #e8ebf0; --ar-bd-lt: #f1f3f7; --ar-bd-str: #c9d0da; /* ── Textstufen ── */ --ar-t: #10141b; --ar-t2: #3c4654; --ar-t3: #7c8492; --ar-t4: #a6aeba; /* ── Marke ── */ --ar-brand: #07a1e2; --ar-brand-dark: #0683bc; --ar-brand-bg: #e7f6fd; --ar-brand-ink: #0f4f6b; --ar-brand-ring: #dceff9; /* ── Signalfarben ── */ --ar-amber: #e0931c; --ar-amber-bg: #fbf1dd; --ar-amber-ink: #8a5b08; --ar-red: #e2483d; --ar-red-bg: rgba(226,72,61,0.12); --ar-red-ink: #e2483d; --ar-green: #1ca05a; --ar-green-bg: #e4f6ec; /* ── Betragstafel in der Seitenspalte ── */ --ar-panel: #e9f6fd; --ar-panel-line: rgba(7,161,226,0.18); --ar-panel-muted: #0f4f6b; --ar-panel-text: #10141b; --ar-ring: 0 1px 2px rgba(16,20,27,0.03); --ar-ring-2: 0 1px 2px rgba(16,20,27,0.1); /* ── Zustandsfarben, aus den Grundtönen abgeleitet ── */ --ar-draft: var(--ar-t4); --ar-open: var(--ar-brand); --ar-late: var(--ar-red); --ar-part: var(--ar-amber); --ar-paid: var(--ar-green); --ar-void: var(--ar-bd-str); --ar-draft-bg: var(--ar-s2); --ar-open-bg: var(--ar-brand-bg); --ar-late-bg: var(--ar-red-bg); --ar-part-bg: var(--ar-amber-bg); --ar-paid-bg: var(--ar-green-bg); --ar-void-bg: var(--ar-s2); --ar-line: 1px solid var(--ar-bd-lt); --ar-rail: 4px; --ar-gap: 14px; /* Höhe der eigenen Kopfzeile. Daran hängt, wo die klebende Seitenspalte anfängt — beides an EINER Stelle, damit es nicht auseinanderläuft. */ --ar-head-h: 61px; color: var(--ar-t); font-size: 14px; line-height: 1.45; /* Breite: 1800 Pixel, zentriert (Vorgabe Mike, 09.09.2026, in zwei Schritten). Der Entwurf hatte 1440 begrenzt, das ließ auf den Schirmen hier rechts eine leere Fläche stehen; ganz ohne Begrenzung wurde es zu breit. 1800 ist bewusst gewählt und nicht geraten: app.css führt ab genau dieser Schwelle seinen Block für große Schirme (`@media (min-width:1800px)`, „4K / 32""), das ist also die Breite, ab der die Anwendung selbst von einem großen Schirm ausgeht. Unterhalb passt sich die Seite an: die Raster brechen bei 1120 bzw. 720 Pixeln um, und Formulare in den Einstellungen behalten ihre Lesebreite über `.body.schmal`. */ max-width: 1800px; margin: 0 auto; } html.dark :is(#pageAusgangsrechnungen, #pageVertrieb) { --ar-card: #111827; --ar-s2: rgba(255,255,255,0.06); --ar-s3: rgba(255,255,255,0.03); --ar-input: #0b0f19; --ar-bd: rgba(255,255,255,0.13); --ar-bd-lt: rgba(255,255,255,0.07); --ar-bd-str: rgba(255,255,255,0.26); --ar-t: #f8fafc; --ar-t2: #cbd5e1; --ar-t3: #94a3b8; --ar-t4: #7c8492; --ar-brand: #2cb5f0; --ar-brand-dark: #7bd3f7; --ar-brand-bg: rgba(7,161,226,0.16); --ar-brand-ink: #bae4f9; --ar-brand-ring: rgba(44,181,240,0.35); --ar-amber: #fb923c; --ar-amber-bg: rgba(249,115,22,0.16); --ar-amber-ink: #fcc38a; --ar-red: #f87171; --ar-red-bg: rgba(248,113,113,0.14); --ar-red-ink: #f87171; --ar-green: #4ade80; --ar-green-bg: rgba(34,197,94,0.16); --ar-panel: rgba(7,161,226,0.11); --ar-panel-line: rgba(44,181,240,0.22); --ar-panel-muted: #bae4f9; --ar-panel-text: #f8fafc; --ar-ring: 0 1px 2px rgba(0,0,0,0.3); --ar-ring-2: 0 1px 2px rgba(0,0,0,0.45); } /* ── Gemeinsame Bauteile ─────────────────────────────────────────────────── */ /* Etikett über einem Abschnitt. Im Entwurf durchgehend so, nicht als Überschrift. Die Kartenkopfzeile trägt es direkt, damit ein

ohne eigenes (Mahnwesen, Serien, Nur-Lese-Einstellungen) genauso aussieht. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-lbl, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > h4, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > h4 > .t, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-filterlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-spacer { flex: 1 1 auto; } /* ── Kopfzeile der Seite (Liste, Bearbeiten, Einstellungen) ────────────── Klebt oben, damit die Hauptaktion in einer langen Maske erreichbar bleibt. Der Entwurf legt sie mit weichgezeichnetem Grund über den Inhalt. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 -4px 20px; padding: 12px 4px; background: color-mix(in srgb, var(--bg-body) 86%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--ar-bd); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head .h { display: flex; align-items: baseline; gap: 10px; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head .h > .t { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ar-t); white-space: nowrap; } /* Nummer und Gesellschaft neben dem Titel: leiser, darf umbrechen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head .h > .sub { font-size: 13px; font-weight: 500; color: var(--ar-t3); min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; } /* Zeitstempel des letzten Speichervorgangs, links vor den Knöpfen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-head .saved { font-size: 11.5px; color: var(--ar-t3); text-align: right; white-space: nowrap; } /* Eine einzelne Kennzahl in der Kopfzeile (Mahnwesen: was überfällig ist). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-summe { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-summe .k { font-size: 11.5px; font-weight: 600; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-summe .v { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-summe .v.late { color: var(--ar-red-ink); } /* ── Zustandsplakette ──────────────────────────────────────────────────── Im Entwurf zwei Größen: die große im Kopf (Entwurf/Festgeschrieben) und die kleine in der Liste. Beide tragen Farbe über die .s-*-Klasse. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 8px; white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--ar-draft-bg); color: var(--ar-t3); border: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.flat::before { display: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-draft { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-draft::before { background: var(--ar-amber); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-open { background: var(--ar-brand-bg); color: var(--ar-brand-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-late { background: var(--ar-red-bg); color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-part { background: var(--ar-part-bg); color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-paid { background: var(--ar-green-bg); color: var(--ar-green); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-void { background: var(--ar-s2); color: var(--ar-t4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-credit { background: var(--ar-s2); color: var(--ar-t4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-laufend { background: var(--ar-s2); color: var(--ar-t3); } /* Laut, weil zu tun: eine festgeschriebene Rechnung, die noch bei uns liegt, und eine, deren Mail nicht ankam. Grundsatz der Seite: laut heisst zu tun, leise heisst fertig. ⚠ s-sending nutzt bewusst die eigenen Modul-Tokens (--ar-s2/--ar-t3) statt der im Entwurf genannten --surface-2/--text-muted: --text-muted IST eine echte Variable (aus app.css geerbt, in dieser Datei an mehreren Stellen benutzt, auch im Versandblock weiter unten), aber die Konvention dieser Datei ist die eigene vierstufige Farbskala --ar-t ... --ar-t4 (siehe Kopfkommentar "eigene Farbstufen"), nicht die dreistufige App-Skala. s-unsent/s-nosend folgen aus demselben Grund den Modul-Tokens von s-draft/s-late statt eigener Festwerte, sonst blieben sie im Dunkelmodus auf den hellen Werten stehen (Schlussdurchsicht 2026-09-11, Kl3/Kl4). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-unsent { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-nosend { background: var(--ar-red-bg); color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tag.s-sending { background: var(--ar-s2); color: var(--ar-t3); } /* Kleine Plakette in der Kontozeile. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; background: var(--ar-s2); color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-draft { background: var(--ar-s2); color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-open { background: var(--ar-brand-bg); color: var(--ar-brand-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-late { background: var(--ar-red-bg); color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-part { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-paid { background: var(--ar-green-bg); color: var(--ar-green); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-void { background: var(--ar-s2); color: var(--ar-t4); text-decoration: line-through; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-credit { background: var(--ar-s2); color: var(--ar-t4); } /* Laufend: Dauerrechnung aus dem Altprogramm, wird monatlich bezahlt (leise, nichts zu tun). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pill.s-laufend { background: var(--ar-s2); color: var(--ar-t3); } /* ── Leiste über der Liste ───────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } /* Segmentierte Zustandsauswahl: EIN Bauteil, nicht vier einzelne Kästen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--ar-s2); flex-wrap: wrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ar-t2); white-space: nowrap; transition: background 0.18s, color 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button:hover { color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button.on { background: var(--ar-card); color: var(--ar-t); box-shadow: var(--ar-ring-2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button .n { font-size: 11px; font-weight: 700; color: var(--ar-t3); font-variant-numeric: tabular-nums; } /* Überfällig zieht Aufmerksamkeit, solange es welche gibt — auch unausgewählt. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button.alarm { color: var(--ar-late); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-seg button.alarm .n { color: var(--ar-late); } /* archiv.css stylt .ar-search global als eigenen Rahmen (Feld im Feld); hier traegt nur das input den Rahmen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search { position: relative; flex: 1 1 200px; min-width: 200px; display: block; height: auto; padding: 0; border: 0; background: none; box-shadow: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; font-size: 13.5px; font-family: inherit; border: 1px solid var(--ar-bd); border-radius: 11px; background: var(--ar-input); color: var(--ar-t); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search input::placeholder { color: var(--ar-t4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search svg { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; color: var(--ar-t3); pointer-events: none; } /* Gelegentliche Vorgänge: sichtbar, aber ohne Rahmen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-quiet { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--ar-t2); font-size: 12.5px; font-weight: 600; transition: background 0.18s, color 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-quiet:hover { background: var(--ar-s2); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn .cnt { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-brand-bg); color: var(--ar-brand-ink); font-size: 11.5px; font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-quiet .cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-red-bg); color: var(--ar-red-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Kennzahlen über der Liste ──────────────────────────────────────────── Links das offene Geld (die einzige Zahl, die die Zähler nicht schon zeigen), rechts die Gesellschaftsauswahl. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; } @media (max-width: 720px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi { grid-template-columns: 1fr; } } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi > div { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); padding: 16px 18px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .geld { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .geld > span { display: flex; flex-direction: column; gap: 2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .k { font-size: 11.5px; font-weight: 600; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .v.late { color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .why { font-size: 11.5px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .trenner { width: 1px; align-self: stretch; background: var(--ar-bd); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-kpi .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-chip { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ar-bd); background: var(--ar-s2); color: var(--ar-t2); font-size: 12.5px; font-weight: 600; transition: all 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-chip:hover { border-color: var(--ar-bd-str); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-chip.on { background: var(--ar-card); color: var(--ar-t); box-shadow: var(--ar-ring-2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-chip .n { font-size: 11px; font-weight: 700; color: var(--ar-t3); font-variant-numeric: tabular-nums; } /* ── Das Kontoblatt ─────────────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-sheet { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); overflow: hidden; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-ledger-head { display: grid; grid-template-columns: var(--ar-rail) minmax(0,1fr) 150px 84px; align-items: center; gap: var(--ar-gap); padding: 11px 18px 11px 0; background: var(--ar-s3); border-bottom: 1px solid var(--ar-bd); font-size: 11.5px; font-weight: 600; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-ledger-head .r-money { text-align: right; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row { display: grid; grid-template-columns: var(--ar-rail) minmax(0,1fr) 150px 84px; align-items: center; gap: var(--ar-gap); padding: 0 18px 0 0; border-bottom: 1px solid var(--ar-bd-lt); transition: background 0.15s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row:last-child { border-bottom: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row:hover { background: var(--ar-s3); } /* Die ganze Kennzeile öffnet die Rechnung. Wer eine Zeile anklickt, meint sie. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row > .id { cursor: pointer; padding: 12px 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row > .id:focus-visible { outline: 2px solid var(--ar-brand); outline-offset: -2px; border-radius: 6px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row > .rail { align-self: stretch; width: var(--ar-rail); min-height: 62px; background: transparent; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row > .money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row > .act { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.35; transition: opacity 0.15s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row:hover > .act, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row:focus-within > .act { opacity: 1; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .kenn { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .nr { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .nr.none { color: var(--ar-t4); font-weight: 500; letter-spacing: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .name { font-size: 13.5px; color: var(--ar-t2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .name.none { color: var(--ar-t4); font-style: italic; } /* Zeile zwei: Plakette und Umstände, getrennt durch einen Mittelpunkt. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .meta .num { font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .money b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .money.zero b { color: var(--ar-t4); font-weight: 600; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .money .sub { font-size: 11px; color: var(--ar-t3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Gutschrift/Storno: Minusbeträge sind keine Störung, nur eine andere Richtung. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row .money b.neg { color: var(--ar-part); } /* Farbige Kante am Zeilenanfang. Ein Entwurf ist noch nicht hinausgegangen und trägt deshalb den leisesten Ton: eine kräftige Kante heißt "Geld ist draußen". */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-draft > .rail { background: var(--ar-draft); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-open > .rail { background: var(--ar-open); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-late > .rail { background: var(--ar-late); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-part > .rail { background: var(--ar-part); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-paid > .rail { background: var(--ar-paid); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-void > .rail { background: var(--ar-void); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-credit > .rail { background: var(--ar-void); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-laufend > .rail { background: var(--ar-void); } /* Bezahlt und storniert treten zurück, überfällig nicht. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-paid .nr, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-paid .money b { color: var(--ar-t2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-void .nr, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-void .money b { color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-row.s-void .nr { text-decoration: line-through; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-hint { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-hint .why { color: var(--ar-t3); } /* Fußzeile des Kontoblatts: Zählung links, Aufbewahrungsfrist rechts. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-sheet > .foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; font-size: 12px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-sheet > .foot .gap { flex: 1 1 auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-iconbtn { appearance: none; cursor: pointer; padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ar-bd); border-radius: 9px; background: var(--ar-card); color: var(--ar-t2); transition: all 0.15s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-iconbtn:hover { background: var(--ar-s2); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-iconbtn.danger:hover { color: var(--ar-red-ink); border-color: var(--ar-red); background: var(--ar-red-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-iconbtn svg { width: 15px; height: 15px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-empty { padding: 64px 16px; text-align: center; color: var(--ar-t3); font-size: 13px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-empty strong { display: block; color: var(--ar-t); font-size: 15px; font-weight: 700; margin-bottom: 6px; } /* ── Karten (Bearbeiten, Einstellungen, Mahnwesen, Serien) ───────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); overflow: hidden; margin-bottom: 20px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > h4 { margin: 0; padding: 15px 20px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > h4 > .zahl { font-size: 11.5px; font-weight: 600; color: var(--ar-t4); letter-spacing: 0; text-transform: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > h4 .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; letter-spacing: 0; text-transform: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > .body { padding: 12px 20px 20px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band.plain { background: transparent; border-color: var(--ar-bd-lt); box-shadow: none; } /* Ein Anschriften- oder Textformular braucht kein 1500 Pixel breites Feld: Zeilen, die über die ganze Seite laufen, sind schwerer zu lesen und schwerer zu treffen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band > .body.schmal { max-width: 740px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band.schmal { max-width: 840px; } /* Zwei gleichrangige Karten nebeneinander (Zahlung / Wiederkehrend). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 1120px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-cols { grid-template-columns: 1fr; } } /* ── Bearbeiten: Hauptspalte und klebende Seitenspalte ───────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-main { /* Seitenspalte 500 statt 400 Pixel (Vorgabe Mike, 09.09.2026): dort stehen die Betragstafel, die Prüfliste und die Vorschau der echten PDF. Bei 400 war das Blatt so klein, dass man zum Prüfen ohnehin die Vollbild-Vorschau brauchte. */ display: grid; grid-template-columns: minmax(0,1fr) 500px; gap: 20px; align-items: start; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-main > .links { display: flex; flex-direction: column; gap: 0; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-side { position: sticky; top: calc(var(--ar-head-h) + 20px); display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 1120px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-main { grid-template-columns: 1fr; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-side { position: static; } } /* Betragstafel: die eine Zahl, um die es geht. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel { background: var(--ar-panel); border: 1px solid var(--ar-panel-line); border-radius: 18px; padding: 20px; color: var(--ar-panel-text); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-panel-muted); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .gross { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.05; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .zeile { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ar-panel-line); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .zeile > span { display: flex; flex-direction: column; gap: 2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .zeile .kk { font-size: 11px; font-weight: 600; color: var(--ar-panel-muted); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-panel .zeile .vv { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Prüfliste vor dem Festschreiben. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); padding: 16px 18px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks > .kopf { display: flex; align-items: center; gap: 8px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks > .kopf .n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ar-t3); font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ar-t2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks li > .mark { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks li.ok > .mark { background: var(--ar-green-bg); color: var(--ar-green); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks li.offen > .mark { background: var(--ar-amber-bg); color: var(--ar-amber); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-checks li svg { width: 12px; height: 12px; } /* ── Felder ─────────────────────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f > label { font-size: 11.5px; font-weight: 600; color: var(--ar-t3); line-height: 1.3; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f > label .req { color: var(--ar-red); font-weight: 700; } /* Erläuterung direkt am Etikett, leiser als das Etikett selbst. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f > label .dazu { font-weight: 450; color: var(--ar-t4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f input, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f select, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--ar-bd); border-radius: 11px; background: var(--ar-input); color: var(--ar-t); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 62px; line-height: 1.5; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f input::placeholder, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea::placeholder { color: var(--ar-t4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f input:focus, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f select:focus, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 2px var(--ar-brand-ring); } /* Festgeschrieben: die Werte bleiben lesbar, aber sehen nicht mehr wie ein Eingabefeld aus (Entwurf: [data-locked] setzt Fläche und Rahmen zurück). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f input:disabled, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f select:disabled, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea:disabled { background: var(--ar-s2); border-color: var(--ar-bd-lt); color: var(--ar-t2); cursor: default; pointer-events: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f select:disabled, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-pos select:disabled { appearance: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f input:disabled::placeholder, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f textarea:disabled::placeholder { color: transparent; } /* Auf einem festgeschriebenen Beleg ist ein Pflichtfeld-Sternchen ohne Aussage. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-band.fest .req { display: none; } /* Kennungen, die man Zeichen für Zeichen vergleicht — und nur die. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f.mono input { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f .hint { font-size: 11px; color: var(--ar-t3); } /* Einheitenzeichen im Feld (Euro, Prozent). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f .mit-einheit { position: relative; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f .mit-einheit input { padding-right: 30px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-f .mit-einheit > .einheit { position: absolute; right: 12px; top: 10px; font-size: 13px; font-weight: 600; color: var(--ar-t4); pointer-events: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid { display: grid; gap: 12px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c2 { grid-template-columns: 1fr 1fr; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c4 { grid-template-columns: 110px 130px minmax(0,1fr) 110px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.anrede { grid-template-columns: 200px minmax(0,1fr); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.plz { grid-template-columns: 140px minmax(0,1fr); } @media (max-width: 760px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c2, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c3, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.c4, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.anrede, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fgrid.plz { grid-template-columns: 1fr; } } /* Vorschläge für den Leistungszeitraum. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-minis { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mini { appearance: none; cursor: pointer; font: inherit; height: 28px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ar-bd); background: var(--ar-s2); color: var(--ar-t2); font-size: 12px; font-weight: 600; transition: all 0.15s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mini:hover { background: var(--ar-brand-bg); border-color: var(--ar-brand); color: var(--ar-brand-dark); } /* Ankreuzfeld als eigene Fläche, nicht als nackter Haken im Text. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px; border: 1px solid var(--ar-bd); border-radius: 13px; background: var(--ar-s3); font-size: 13.5px; color: var(--ar-t); line-height: 1.45; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-check input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ar-brand); flex: 0 0 auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-check > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-check .sub { font-size: 12px; color: var(--ar-t3); line-height: 1.5; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-check.blank { padding: 0; border: 0; background: transparent; gap: 9px; align-items: center; } /* Auswahlfeld in einer Kartenkopfzeile (Positionsvorlage einsetzen). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-select { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ar-bd); background: var(--ar-card); color: var(--ar-t2); outline: none; max-width: 220px; cursor: pointer; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-select:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 2px var(--ar-brand-ring); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-nopos { padding: 34px 10px; text-align: center; color: var(--ar-t3); font-size: 13px; } /* Die Adresssuche nimmt die ganze Breite ihrer Karte. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search-wide { display: block; margin-bottom: 16px; flex: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search-wide input { height: 44px; padding-left: 40px; font-size: 14px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-search-wide svg { left: 13px; top: 13px; width: 17px; height: 17px; } /* ── Hinweiskästen ──────────────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--ar-brand-ink); padding: 12px 14px; border-radius: 12px; border: 0; background: var(--ar-brand-bg); max-width: 82ch; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note > svg { flex: 0 0 auto; margin-top: 1px; width: 16px; height: 16px; color: var(--ar-brand-dark); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note p { margin: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note b { font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.warn { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.warn > svg { color: var(--ar-amber); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.stop { background: var(--ar-red-bg); color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.stop > svg { color: var(--ar-red); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.gut { background: var(--ar-green-bg); color: var(--ar-t2); border: 1px solid rgba(34,197,94,0.28); border-radius: 16px; padding: 14px 16px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.gut > svg { color: var(--ar-green); width: 18px; height: 18px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.gut .t { font-size: 13.5px; font-weight: 700; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.gut .d { font-size: 12.5px; color: var(--ar-t2); margin-top: 3px; line-height: 1.5; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.quiet { background: transparent; padding: 0; color: var(--ar-t3); max-width: 82ch; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-note.quiet > svg { color: var(--ar-t4); } /* ── Positionen als aufklappbare Karten ────────────────────────────────── Der Entwurf ersetzt die alte Tabelle: geschlossen zeigt eine Zeile Titel, Rechenweg, Steuersatz und Netto; aufgeklappt stehen die Felder darunter. Welche Position offen ist, hält _arPosOffen in js/rechnung.js. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poslist { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 8px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard { border: 1px solid var(--ar-bd); border-radius: 14px; background: var(--ar-card); overflow: hidden; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .kopf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; appearance: none; border: 0; background: transparent; font: inherit; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .kopf:hover { background: var(--ar-s3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .kopf:focus-visible { outline: 2px solid var(--ar-brand); outline-offset: -2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .nr { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: var(--ar-s2); color: var(--ar-t3); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .was { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .was .t { font-size: 13.5px; font-weight: 600; color: var(--ar-t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .was .d { font-size: 11.5px; color: var(--ar-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .ust { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--ar-t3); padding: 3px 8px; border-radius: 7px; background: var(--ar-s2); white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .netto { flex: 0 0 auto; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .pfeil { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ar-t4); transition: transform 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard.offen .pfeil { transform: rotate(180deg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .inhalt { border-top: 1px solid var(--ar-bd-lt); background: var(--ar-s3); padding: 16px 14px; } /* Der Rechenweg der Courtage: sichtbar, damit der Betrag nachvollziehbar ist. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .rechnung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ar-brand-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .rechnung .weg { font-size: 12.5px; font-weight: 500; color: var(--ar-brand-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard .rechnung .erg { margin-left: auto; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--ar-brand-dark); font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .inhalt > .fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ar-bd-lt); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-poscard > .inhalt > .fuss .gap { flex: 1 1 auto; } /* Textknopf ohne Fläche (Duplizieren, Position entfernen, Entwurf löschen). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-textbtn { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ar-t2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-textbtn:hover { color: var(--ar-t); text-decoration: underline; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-textbtn.danger { color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-textbtn.brand { color: var(--ar-brand); } /* ── Summen unter den Positionen ─────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals { display: flex; justify-content: flex-end; padding: 8px 20px 20px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals > div { min-width: 260px; display: flex; flex-direction: column; gap: 8px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals .z { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--ar-t2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals .z > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals .z.brutto { align-items: baseline; padding-top: 10px; border-top: 1px solid var(--ar-bd); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals .z.brutto > span:first-child { font-size: 13px; font-weight: 700; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-totals .z.brutto > span:last-child { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--ar-t); } /* ── Vorschau in der Seitenspalte ──────────────────────────────────────── Zeigt die ECHTE PDF, gezeichnet mit pdf.js in eine Leinwand (siehe arVorschauZeichnen in js/rechnung.js). Der frühere, nachgebaute Briefabdruck ist entfallen: er wich vom Beleg ab, sobald jemand das PDF-Layout ändert. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); overflow: hidden; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview > .kopf { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; width: 100%; appearance: none; border: 0; background: transparent; font: inherit; text-align: left; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview > .kopf .schalter { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ar-brand); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview > .blatt { padding: 0 18px 18px; } /* Das Blatt Papier. Bleibt weiß, auch im Dunkelmodus: es ist ein Ausdruck. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .papier { background: #ffffff; border: 1px solid #e8ebf0; border-radius: 10px; box-shadow: 0 4px 16px rgba(16,20,27,0.07); overflow: hidden; min-height: 120px; display: flex; align-items: center; justify-content: center; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .papier canvas { display: block; width: 100%; height: auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .papier .leer { padding: 26px 18px; text-align: center; font-size: 12px; line-height: 1.5; color: #7c8492; } /* Zeile unter dem Blatt: Seitenzahl links, Auffrischen rechts. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .unterschrift { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 11.5px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .unterschrift > span:first-child { flex: 1 1 auto; } /* Hinweis rechts unter dem Blatt, damit die Seitenzahl links nicht springt. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .unterschrift .stand { color: var(--ar-brand); font-weight: 600; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .unterschrift .stand.fehler { color: var(--ar-red-ink); } /* Das Blatt hält seine Höhe, solange eine Seite darin steht: sonst springt die Karte beim Auffrischen um ein paar Pixel, und genau das liest sich wie ein Neuaufbau. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .papier canvas { transition: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .wege { display: flex; gap: 8px; margin-top: 12px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-preview .wege .ar-btn { flex: 1; height: 34px; padding: 0 10px; font-size: 12.5px; } /* ── Knöpfe ─────────────────────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 11px; white-space: nowrap; border: 1px solid var(--ar-bd); background: var(--ar-card); color: var(--ar-t2); font-size: 13px; font-weight: 600; transition: all 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn svg { width: 15px; height: 15px; flex: 0 0 auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn:hover { background: var(--ar-s2); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn:disabled { opacity: 0.45; cursor: not-allowed; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.primary { border: 0; padding: 0 18px; background: var(--ar-brand); color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(7,161,226,0.35); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.primary:hover { background: var(--ar-brand-dark); color: #fff; } /* Unumkehrbar: Festschreiben vergibt die Nummer und macht den Beleg unveränderbar. Im Entwurf trägt es dieselbe Farbe wie die Hauptaktion, die Warnung steht im Dialog. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.commit { border: 0; padding: 0 18px; background: var(--ar-brand); color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(7,161,226,0.35); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.commit:hover { background: var(--ar-brand-dark); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.warn { color: var(--ar-amber-ink); border-color: rgba(224,147,28,0.4); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.warn:hover { background: var(--ar-amber-bg); border-color: var(--ar-amber); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.danger { color: var(--ar-red-ink); border-color: rgba(226,72,61,0.35); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.danger:hover { background: var(--ar-red-bg); border-color: var(--ar-red); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.sm.akzent { border-color: var(--ar-brand); background: var(--ar-brand-bg); color: var(--ar-brand-dark); font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.sm.akzent:hover { background: var(--ar-brand-bg); border-color: var(--ar-brand-dark); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.xs { height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.ghost { background: transparent; border-color: transparent; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.ghost:hover { background: var(--ar-s2); color: var(--ar-t); } /* Zurück zur Liste: Pfeil links, deshalb links etwas weniger Luft. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-btn.back { padding: 0 13px 0 10px; } /* ── Fußleiste des Bearbeiten-Modus ───────────────────────────────────── Die Hauptaktionen stehen im Entwurf oben in der Kopfzeile. Diese Leiste trägt nur noch, was dort nicht hingehört (Duplizieren, Mahnen, Storno). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 16px 0 4px; border-top: 1px solid var(--ar-bd); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-foot .gap { flex: 1 1 auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-foot .sep { width: 1px; height: 26px; background: var(--ar-bd); margin: 0 6px; } /* ── Adressvorschläge ───────────────────────────────────────────────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100; max-height: 300px; overflow-y: auto; background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 14px; box-shadow: 0 16px 40px rgba(11,15,25,0.18); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--ar-bd-lt); display: flex; align-items: flex-start; gap: 10px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit:last-child { border-bottom: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit:hover { background: var(--ar-s3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .who { flex: 1 1 auto; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .n1 { font-size: 13.5px; font-weight: 600; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .n1 .num { color: var(--ar-t3); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 6px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .nz { font-size: 12px; color: var(--text); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .n2 { font-size: 11.5px; color: var(--ar-t3); margin-top: 2px; display: flex; gap: 14px; flex-wrap: wrap; } /* Rollen aus HausPerfekt: PfKt + Objekt mit Strasse, eine Marke je Rolle. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .nr-rollen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle, #arModalOverlay .ar-einheitwahl .wahl .rolle { font-size: 11px; color: var(--text-secondary); background: var(--ar-open-bg); border: var(--ar-line); border-radius: 999px; padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle b, #arModalOverlay .ar-einheitwahl .wahl .rolle b { font-weight: 600; color: var(--text); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle.mehr { color: var(--text-muted); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle.beendet, #arModalOverlay .ar-einheitwahl .wahl .rolle.beendet { opacity: 0.72; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle.beendet b, #arModalOverlay .ar-einheitwahl .wahl .rolle.beendet b { font-weight: 500; color: var(--text-secondary); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .rolle .bis, #arModalOverlay .ar-einheitwahl .wahl .rolle .bis { color: var(--text-muted); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit:hover .rolle { background: var(--bg-input); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .pen { flex: 0 0 auto; color: var(--ar-t3); padding: 2px 4px; border-radius: 6px; font-size: 13px; line-height: 1; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .hit .pen:hover { color: var(--ar-brand); background: var(--ar-brand-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .none { padding: 13px 14px; font-size: 13px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .add { padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ar-brand); border-top: 1px solid var(--ar-bd); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .add:hover { background: var(--ar-brand-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form { padding: 13px 14px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form .t { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-t3); margin-bottom: 10px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form input { width: 100%; height: 38px; padding: 0 12px; font-size: 13.5px; font-family: inherit; margin-bottom: 8px; border: 1px solid var(--ar-bd); border-radius: 11px; background: var(--ar-input); color: var(--ar-t); outline: none; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form input:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 2px var(--ar-brand-ring); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form .row { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 8px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form .row.plz { grid-template-columns: 140px minmax(0,1fr); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd .form .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dd-hinweis { font-size: 11px; color: var(--ar-t3); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ar-bd-lt); } /* ── Einstellungen: Reiter als Leiste links ────────────────────────────── Der Entwurf stellt die Reiter senkrecht in eine eigene Karte, damit die sieben Namen ausgeschrieben lesbar sind statt in einer Zeile zu scrollen. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-cfg { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; } @media (max-width: 900px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-cfg { grid-template-columns: 1fr; } } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tabs { background: var(--ar-card); border: 1px solid var(--ar-bd); border-radius: 18px; box-shadow: var(--ar-ring); padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--ar-head-h) + 20px); } @media (max-width: 900px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tabs { position: static; flex-direction: row; flex-wrap: wrap; } } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tabs button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--ar-t2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.18s, color 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tabs button:hover { background: var(--ar-s2); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tabs button.on { background: var(--ar-s2); color: var(--ar-t); box-shadow: var(--ar-ring-2); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-years { display: flex; gap: 8px; flex-wrap: wrap; } /* Positionsvorlagen: eine Zeile je Vorlage, Felder nebeneinander. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--ar-bd); border-radius: 13px; background: var(--ar-s3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage input, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage select { height: 36px; padding: 0 12px; font-size: 13px; font-family: inherit; border: 1px solid var(--ar-bd); border-radius: 11px; background: var(--ar-input); color: var(--ar-t); outline: none; min-width: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage input:focus, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage select:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 2px var(--ar-brand-ring); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .bez { flex: 1 1 150px; font-weight: 600; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .beschr { flex: 2 1 190px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .preis { flex: 0 0 92px; text-align: right; font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .einheit { flex: 0 0 110px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .ust { flex: 0 0 86px; text-align: right; font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .menge { flex: 0 0 68px; text-align: right; font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-vorlage .ar-iconbtn { flex: 0 0 32px; } /* Briefvorlagen zur Auswahl (Reiter Layout). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout > .karte { border: 1px solid var(--ar-bd); border-radius: 14px; padding: 14px; cursor: pointer; background: var(--ar-s3); transition: all 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout > .karte:hover { border-color: var(--ar-bd-str); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout > .karte.on { border-color: var(--ar-brand); background: var(--ar-brand-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout .name { display: flex; align-items: center; gap: 8px; margin-top: 11px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout .name > b { font-size: 13px; font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout .name > .badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ar-brand-dark); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-wahl-layout .sub { font-size: 11.5px; color: var(--ar-t3); } /* Gesellschaften und ihre Funktionsmerkmale. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mandant { border: 1px solid var(--ar-bd); border-radius: 14px; padding: 14px 16px; background: var(--ar-s3); margin-bottom: 10px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mandant > .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mandant > .kopf > b { font-size: 13.5px; font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mandant > .kopf > span { font-size: 11.5px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-mandant > .merkmale { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-merkmal { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ar-bd); background: var(--ar-card); color: var(--ar-t2); font-size: 12.5px; font-weight: 600; transition: all 0.18s; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-merkmal:hover { border-color: var(--ar-bd-str); color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-merkmal > .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-bd-str); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-merkmal.on > .dot { background: var(--ar-green); } /* Werteliste zum Nachlesen (Einstellungen ohne Änderungsrecht). */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-untertitel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-t3); margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ar-bd-lt); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-untertitel:first-child { margin-top: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 8px 18px; margin: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl dt { font-size: 12.5px; color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl dd { margin: 0; font-size: 13.5px; color: var(--ar-t); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl dd.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl dd.leer { color: var(--ar-t3); font-style: italic; } @media (max-width: 640px) { :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl { grid-template-columns: 1fr; gap: 2px 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-dl dd { margin-bottom: 10px; } } /* ── Tabellen der Nebenansichten (Serien, Mahnwesen, Vergütung) ─────────── */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl th { text-align: left; padding: 0 10px 9px; font-size: 11.5px; font-weight: 600; color: var(--ar-t3); border-bottom: 1px solid var(--ar-bd); white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl th.r { text-align: right; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td { padding: 10px; border-bottom: 1px solid var(--ar-bd-lt); vertical-align: middle; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl tr:last-child td { border-bottom: 0; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl tbody tr:hover td { background: var(--ar-s3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.nr { font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.r, :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.money { font-weight: 700; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.acts { text-align: right; white-space: nowrap; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.acts .ar-btn { margin-left: 6px; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td.quiet { color: var(--ar-t3); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl tr.late td { background: var(--ar-red-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl tr.due td { background: var(--ar-amber-bg); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-tbl td .days { font-weight: 700; color: var(--ar-red-ink); font-variant-numeric: tabular-nums; } /* Zweite Zeile in einer Tabellenzelle: der Umstand zur Zahl darüber. */ :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-untertext, #arModalOverlay .ar-untertext { font-size: 11px; color: var(--ar-t3); margin-top: 2px; font-weight: 400; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-untertext.warn { color: var(--ar-amber-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-untertext.stop { color: var(--ar-red-ink); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-scroll { max-height: 420px; overflow-y: auto; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-fade { opacity: 0.62; } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-link { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ar-brand); } :is(#pageAusgangsrechnungen, #pageVertrieb) .ar-link:hover { text-decoration: underline; } /* ── Überlagerungen ────────────────────────────────────────────────────── Eigene Kennungen, weil die Dialoge an hängen und damit außerhalb von :is(#pageAusgangsrechnungen, #pageVertrieb) liegen. Die Farbstufen deshalb hier erneut. */ #arModalOverlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(11,15,25,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 24px; } #arModalOverlay .box { --ar-card: #ffffff; --ar-s2: #f4f6f9; --ar-s3: #fbfcfd; --ar-input: #ffffff; --ar-bd: #e8ebf0; --ar-bd-lt: #f1f3f7; --ar-bd-str: #c9d0da; --ar-t: #10141b; --ar-t2: #3c4654; --ar-t3: #7c8492; --ar-t4: #a6aeba; --ar-brand: #07a1e2; --ar-brand-dark: #0683bc; --ar-brand-bg: #e7f6fd; --ar-brand-ink: #0f4f6b; --ar-brand-ring: #dceff9; --ar-amber: #e0931c; --ar-amber-bg: #fbf1dd; --ar-amber-ink: #8a5b08; --ar-red: #e2483d; --ar-red-bg: rgba(226,72,61,0.12); --ar-red-ink: #e2483d; --ar-green: #1ca05a; --ar-green-bg: #e4f6ec; --ar-void-bg: #f4f6f9; background: var(--ar-card); color: var(--ar-t); border: 1px solid var(--ar-bd); border-radius: 22px; box-shadow: 0 24px 64px rgba(11,15,25,0.35); max-width: 960px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; font-size: 14px; line-height: 1.45; } html.dark #arModalOverlay .box { --ar-card: #111827; --ar-s2: rgba(255,255,255,0.06); --ar-s3: rgba(255,255,255,0.03); --ar-input: #0b0f19; --ar-bd: rgba(255,255,255,0.13); --ar-bd-lt: rgba(255,255,255,0.07); --ar-bd-str: rgba(255,255,255,0.26); --ar-t: #f8fafc; --ar-t2: #cbd5e1; --ar-t3: #94a3b8; --ar-t4: #7c8492; --ar-brand: #2cb5f0; --ar-brand-dark: #7bd3f7; --ar-brand-bg: rgba(7,161,226,0.16); --ar-brand-ink: #bae4f9; --ar-brand-ring: rgba(44,181,240,0.35); --ar-amber: #fb923c; --ar-amber-bg: rgba(249,115,22,0.16); --ar-amber-ink: #fcc38a; --ar-red: #f87171; --ar-red-bg: rgba(248,113,113,0.14); --ar-red-ink: #f87171; --ar-green: #4ade80; --ar-green-bg: rgba(34,197,94,0.16); --ar-void-bg: rgba(255,255,255,0.06); } /* Ein Rückfragedialog ist schmal. Große Listen (Mahnwesen, Serien) bleiben breit. */ #arModalOverlay .box.eng { max-width: 520px; } #arModalOverlay .box > h3 { margin: 0; padding: 20px 24px 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } /* Kopf mit Sinnbild: das Zeichen sagt, um welche Art Entscheidung es geht. */ #arModalOverlay .box > .kopf { display: flex; gap: 14px; align-items: flex-start; padding: 26px 26px 0; } #arModalOverlay .box > .kopf > .zeichen { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--ar-amber-bg); color: var(--ar-amber); } #arModalOverlay .box > .kopf > .zeichen.stop { background: var(--ar-red-bg); color: var(--ar-red); } #arModalOverlay .box > .kopf > .zeichen.gut { background: var(--ar-green-bg); color: var(--ar-green); } #arModalOverlay .box > .kopf > .zeichen svg { width: 21px; height: 21px; } #arModalOverlay .box > .kopf > div { min-width: 0; } #arModalOverlay .box > .kopf h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } #arModalOverlay .box > .kopf p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ar-t2); } #arModalOverlay .box > .kopf p strong { color: var(--ar-t); font-weight: 700; } #arModalOverlay .box > .content { padding: 18px 26px; overflow-y: auto; flex: 1 1 auto; } #arModalOverlay .box > .kopf + .content { padding-top: 18px; } #arModalOverlay .box > .content > p:first-child { margin-top: 0; } #arModalOverlay .box > .content p { font-size: 13px; line-height: 1.6; color: var(--ar-t2); } #arModalOverlay .box > .content p strong { color: var(--ar-t); font-weight: 700; } #arModalOverlay .box > .acts { display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding: 16px 26px 22px; } #arModalOverlay .box > .acts .gap { flex: 1 1 auto; } /* Breite Dialoge tragen eine Liste: dort trennt eine Linie Inhalt von Aktionen. */ #arModalOverlay .box:not(.eng) > h3 { padding-bottom: 14px; border-bottom: 1px solid var(--ar-bd); } #arModalOverlay .box:not(.eng) > .acts { border-top: 1px solid var(--ar-bd); background: var(--ar-s3); } /* Werteliste im Dialog: Empfänger, Nummer, Betrag vor dem Festschreiben. */ #arModalOverlay .ar-sammel { margin-top: 14px; border: 1px solid var(--ar-bd); border-radius: 12px; overflow: hidden; } #arModalOverlay .ar-sammel-z { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--ar-bd-lt); } #arModalOverlay .ar-sammel-z:last-child { border-bottom: 0; } #arModalOverlay .ar-sammel-z.aus { opacity: .55; } #arModalOverlay .ar-sammel-z input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--ar-brand); } #arModalOverlay .ar-sammel-z .wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #arModalOverlay .ar-sammel-z .wer .f { color: var(--ar-red-ink); font-size: 12.5px; } #arModalOverlay .ar-sammel-z .wer .g { color: var(--ar-green); font-size: 12.5px; } #arModalOverlay .ar-sammel-z .geld { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } #arModalOverlay .ar-sammel-z .mark { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } #arModalOverlay .ar-sammel-z .mark svg { width: 12px; height: 12px; } #arModalOverlay .ar-sammel-z .mark.ok { background: var(--ar-green-bg); color: var(--ar-green); } #arModalOverlay .ar-sammel-z .mark.fehler { background: var(--ar-red-bg); color: var(--ar-red); } #arModalOverlay .ar-sammel-z .mark.laeuft { color: var(--ar-t3); } #arModalOverlay .ar-sammel-fuss { display: flex; justify-content: flex-end; margin-top: 14px; } #arModalOverlay .ar-mailrahmen { width: 100%; min-height: 420px; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-top: 14px; } #arModalOverlay .ar-mailanhaenge { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } #arModalOverlay .ar-fakten { border: 1px solid var(--ar-bd); border-radius: 14px; overflow: hidden; } #arModalOverlay .ar-fakten > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--ar-bd-lt); } #arModalOverlay .ar-fakten > div:first-child { background: var(--ar-s3); } #arModalOverlay .ar-fakten > div:last-child { border-bottom: 0; } #arModalOverlay .ar-fakten .k { font-size: 12.5px; color: var(--ar-t3); } #arModalOverlay .ar-fakten .v { font-size: 12.5px; font-weight: 600; text-align: right; } #arModalOverlay .ar-fakten .v.gross { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } #arModalOverlay .ar-fakten .v.mono { font-variant-numeric: tabular-nums; } /* Die Bauteile der Seite auch im Dialog verfügbar machen. */ #arModalOverlay .ar-btn { appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 11px; white-space: nowrap; border: 1px solid var(--ar-bd); background: var(--ar-card); color: var(--ar-t2); font-size: 13px; font-weight: 600; transition: all 0.18s; } #arModalOverlay .ar-btn:hover { background: var(--ar-s2); color: var(--ar-t); } #arModalOverlay .ar-btn:disabled { opacity: 0.55; cursor: not-allowed; } #arModalOverlay .ar-btn.primary { border: 0; padding: 0 18px; background: var(--ar-brand); color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(7,161,226,0.35); } #arModalOverlay .ar-btn.primary:hover { background: var(--ar-brand-dark); color: #fff; } /* Nicht bestätigt heißt: der Knopf ist da, sagt aber, dass noch etwas fehlt. */ #arModalOverlay .ar-btn.primary:disabled { background: var(--ar-t4); box-shadow: none; } #arModalOverlay .ar-btn.primary:disabled:hover { background: var(--ar-t4); } #arModalOverlay .ar-btn.sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; } #arModalOverlay .ar-btn.danger { color: var(--ar-red-ink); border-color: rgba(226,72,61,0.35); } #arModalOverlay .ar-btn.danger:hover { background: var(--ar-red-bg); border-color: var(--ar-red); } #arModalOverlay .ar-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #arModalOverlay .ar-f > label { font-size: 11.5px; font-weight: 600; color: var(--ar-t3); } #arModalOverlay .ar-f > label .req { color: var(--ar-red); font-weight: 700; } #arModalOverlay .ar-f input, #arModalOverlay .ar-f textarea, #arModalOverlay .ar-f select { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--ar-bd); border-radius: 11px; background: var(--ar-input); color: var(--ar-t); outline: none; } #arModalOverlay .ar-f textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; } #arModalOverlay .ar-f input:focus, #arModalOverlay .ar-f textarea:focus, #arModalOverlay .ar-f select:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 2px var(--ar-brand-ring); } #arModalOverlay .ar-f .hint { font-size: 11px; color: var(--ar-t3); } #arModalOverlay .ar-fgrid { display: grid; gap: 12px; } #arModalOverlay .ar-fgrid.c2 { grid-template-columns: 1fr 1fr; } /* Auswahl aus wenigen gleichrangigen Möglichkeiten (welche Gesellschaft). */ #arModalOverlay .ar-wahl { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } #arModalOverlay .ar-wahl .ar-btn { justify-content: flex-start; height: auto; padding: 13px 16px; font-size: 13.5px; } #arModalOverlay .ar-wahl .ar-btn:hover { border-color: var(--ar-brand); color: var(--ar-brand-dark); } #arModalOverlay .ar-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 13px 14px; border: 1px solid var(--ar-bd); border-radius: 13px; background: var(--ar-s3); font-size: 12.5px; color: var(--ar-t2); line-height: 1.5; } #arModalOverlay .ar-check input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--ar-brand); flex: 0 0 auto; } #arModalOverlay .ar-check .sub { display: block; font-size: 11.5px; color: var(--ar-t3); margin-top: 2px; } #arModalOverlay .ar-check.blank { padding: 0; border: 0; background: transparent; gap: 9px; align-items: center; } #arModalOverlay .ar-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--ar-brand-ink); padding: 12px 14px; border-radius: 12px; background: var(--ar-brand-bg); } #arModalOverlay .ar-note > svg { flex: 0 0 auto; margin-top: 1px; width: 16px; height: 16px; } #arModalOverlay .ar-note.warn { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } #arModalOverlay .ar-note.warn > svg { color: var(--ar-amber); } #arModalOverlay .ar-note.stop { background: var(--ar-red-bg); color: var(--ar-red-ink); } #arModalOverlay .ar-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 8px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--ar-s2); color: var(--ar-t3); } #arModalOverlay .ar-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #arModalOverlay .ar-tag.s-draft { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } #arModalOverlay .ar-tag.s-open { background: var(--ar-brand-bg); color: var(--ar-brand-ink); } #arModalOverlay .ar-tag.s-late { background: var(--ar-red-bg); color: var(--ar-red-ink); } #arModalOverlay .ar-tag.s-part { background: var(--ar-amber-bg); color: var(--ar-amber-ink); } #arModalOverlay .ar-tag.s-paid { background: var(--ar-green-bg); color: var(--ar-green); } #arModalOverlay .ar-tag.s-void { background: var(--ar-s2); color: var(--ar-t4); } #arModalOverlay .ar-tag.s-credit { background: var(--ar-s2); color: var(--ar-t4); } #arModalOverlay .ar-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } #arModalOverlay .ar-tbl th { text-align: left; padding: 0 10px 9px; font-size: 11.5px; font-weight: 600; color: var(--ar-t3); border-bottom: 1px solid var(--ar-bd); white-space: nowrap; position: sticky; top: 0; background: var(--ar-card); z-index: 1; } #arModalOverlay .ar-tbl th.r { text-align: right; } #arModalOverlay .ar-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--ar-bd-lt); } #arModalOverlay .ar-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #arModalOverlay .ar-tbl td.money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } #arModalOverlay .ar-tbl td.quiet { color: var(--ar-t3); font-size: 12.5px; } #arModalOverlay .ar-tbl td.check { width: 34px; } #arModalOverlay .ar-tbl input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ar-brand); } #arModalOverlay .ar-scroll { max-height: 380px; overflow-y: auto; } #arModalOverlay .ar-tabs { display: flex; gap: 3px; margin-bottom: 16px; padding: 3px; background: var(--ar-s2); border-radius: 12px; overflow-x: auto; } #arModalOverlay .ar-tabs button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ar-t2); white-space: nowrap; } #arModalOverlay .ar-tabs button:hover { color: var(--ar-t); } #arModalOverlay .ar-tabs button.on { background: var(--ar-card); color: var(--ar-t); box-shadow: 0 1px 2px rgba(16,20,27,0.1); } #arModalOverlay .ar-selall { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 12.5px; color: var(--ar-t2); cursor: pointer; } #arModalOverlay .ar-selall input { width: 16px; height: 16px; accent-color: var(--ar-brand); } #arModalOverlay details summary { font-size: 12.5px; color: var(--ar-t2); cursor: pointer; padding: 6px 0; } #arModalOverlay details summary:hover { color: var(--ar-t); } #arModalOverlay .ar-link { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ar-brand); } #arModalOverlay .ar-link:hover { text-decoration: underline; } #arModalOverlay .ar-link.danger { color: var(--ar-red-ink); } #arModalOverlay .ar-untertitel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-t3); margin: 18px 0 10px; } /* Vollbild-Vorschau. Seit 09.09.2026 zeichnet pdf.js in Leinwände statt eines