/* Ein Satz Farben als Variablen. Kein Framework, keine Fremdschrift. * * Die Werte sind am 17.10.2026 im laufenden weclapp GEMESSEN (getComputedStyle), nicht * nach Augenmass gewaehlt — Festlegung des Eigentuemers: "sollte so aussehen wie * weclapp, aber abgespeckt, damit fuer die Damen der Umstieg ganz einfach ist." * Einzelheiten in durchsicht/04-oberflaeche.md. * * HELL IST DIE VORGABE, auch wenn das Betriebssystem auf dunkel steht: weclapp kennt * kein dunkles Bild, und "sieht aus wie gewohnt" ist hier der Massstab. Dunkel gibt es * weiter, aber nur auf ausdruecklichen Wunsch ueber den Knopf. */ :root { --grund: #ffffff; /* weclapp: body-Hintergrund weiss */ --karte: #ffffff; --rand: #dfe4e4; --kopf: #f2f6f6; /* gemessen: Hintergrund der Spaltenkoepfe */ --schrift: #212529; /* gemessen: rgb(33, 37, 41) */ --leise: #6c757d; --betont: #57709c; /* gemessen: ausgewaehlte Schaltflaeche */ --aktion: #00a369; /* gemessen: "Neues Angebot", gruen */ /* Die beiden Leisten. Am 17.10.2026 am laufenden weclapp gemessen (getComputedStyle, Kunde 21555): Kopfleiste rgb(11,11,11) bei 51 px Hoehe, Seitennavigation rgb(52,52,52) bei 220 px Breite mit Schrift rgb(241,241,241). Hoehe und Breite stimmten vorher schon - nur die Farben fehlten. */ --leiste: #0b0b0b; /* gemessen: Kopfleiste */ --leiste-nav: #343434; /* gemessen: Seitennavigation */ --leiste-schrift: #f1f1f1; /* gemessen: Schrift darin */ --leiste-aktiv: #fefefe; /* gemessen: aktiver Menuepunkt */ --warnung: #b02a37; --gut: #00a369; --band: #b45309; --platz: 0.75rem; --feldrand: #949f9f; /* gemessen: Rahmen der Eingabefelder */ } :root[data-thema="dunkel"] { --grund: #16181c; --karte: #1e2127; --rand: #333842; --kopf: #262b33; --schrift: #e8e9ea; --leise: #9aa0ab; --betont: #7aa2f7; --aktion: #2f9e6b; --warnung: #f0a07a; --gut: #86d99a; --band: #d79921; --feldrand: #4a515d; } * { box-sizing: border-box; } /* `hidden` muss gewinnen. Die Vorgabe des Browsers ist display:none, aber jede eigene display-Regel schlaegt sie — `header nav { display: flex }` liess die Navigation sichtbar, obwohl niemand angemeldet war. In jsdom faellt das NICHT auf: dort stimmt das Merkmal `hidden`, nur gezeichnet wird nicht. Gefunden am 13.10.2026 beim ersten Blick in den Browser. */ [hidden] { display: none !important; } /* Die Hausschrift: Figtree, frei (SIL OFL), lokal aus web/schrift/ — CircularStd, die Schrift von weclapp, liegt hier nicht vor, und Figtree ist ihr sehr aehnlich (Eigentuemer, 18.10.2026: "freie Webschrift", Download erlaubt). Eine variable Datei traegt alle Staerken von 300 bis 900. Arial bleibt Ersatz, falls die Datei fehlt — es ist weclapps eigene Ersatzschrift. 14px ueberall — gemessen. In weclapp hat das Menue dieselbe Groesse wie die Tabelle. */ @font-face { font-family: "Figtree"; src: url("schrift/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } body { margin: 0; background: var(--grund); color: var(--schrift); font: 14px/1.57 "Figtree", arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } #band { background: var(--band); color: #fff; text-align: center; padding: 0.3rem; font-weight: 600; letter-spacing: 0.1em; } /* ---- Das Geruest wie in weclapp (18.10.2026 gemessen) ----------------------------- Die Seitenleiste laeuft ueber die GANZE Hoehe und traegt oben den Logobereich; die schwarze Kopfleiste beginnt rechts davon bei x 220. Der Inhalt bekommt den ganzen Rest: KEINE max-width. */ #geruest { display: flex; min-height: calc(100vh - var(--bandhoehe, 0px)); } body:has(#band:not([hidden])) { --bandhoehe: 32px; } #seitenleiste { flex: 0 0 220px; width: 220px; position: sticky; top: 0; align-self: flex-start; height: calc(100vh - var(--bandhoehe, 0px)); overflow-y: auto; /* BEWUSST ANDERS ALS WECLAPP (Eigentuemer, 18.10.2026): dasselbe Schwarz wie die Kopfleiste, rgb(11,11,11). weclapp hat hier einen Grauverlauf von rgb(38,38,38) nach rgb(46,46,46); Leiste und Kopf sollen hier eine Flaeche sein. */ background: var(--leiste); color: rgb(222, 222, 222); } /* Der Logobereich, 220 x 51: Zeichen und Name „Vorgo ERP" (Eigentuemer, 18.10.2026, Name seit 19.10.2026). GROESSE WIE DORT — gemessen am weclapp-Logo: Zeichen und Schriftzug spannen von x 15 bis 205, die Buchstaben stehen rund 28 px hoch. Damals „Faktimo" in 32 px, Figtree 800, und „ERP" als kleines Etikett oben daneben; so passt beides in die 220 px. */ .logo { height: 51px; display: flex; align-items: center; gap: 8px; padding-left: 15px; user-select: none; } .logo img { display: block; flex: 0 0 auto; } .logo .logoname { font-size: 41px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: #fff; } /* Ohne „ERP" nachgemessen (18.10.2026): Zeichen 32 px, Abstand 8, Schriftzug 41 px — damit reicht das Logo wie das von weclapp von x 15 bis rund 205, und die Buchstaben stehen wie dort rund 28 px hoch. */ .logo img { width: 32px; height: 32px; } /* „Vorgo ERP" mit Zusatz (Eigentuemer, 19.10.2026: „mit ERP im Namen", Schreibweise 4 — zwei Woerter, beide gleich kraeftig). Damit der Schriftzug wie oben bei x 205 endet, ist er kleiner: 31,5 px, im Kopflosbetrieb ausgemessen. */ .logo .logoname { font-size: 31.5px; } /* Hauptpunkt: Symbol 18 px in einem 41 x 45-Feld bei x 4, Text 15 px rgb(222,222,222), Abstand 47 px — alles gemessen. */ #navigation { padding-bottom: 1rem; } #navigation .hauptpunkt { display: flex; align-items: center; width: 216px; height: 46px; margin: 0 0 1px; padding: 0; border: 0; border-left: 4px solid transparent; border-radius: 0 10px 0 0; background: none; color: rgb(222, 222, 222); font-size: 15px; text-align: left; } #navigation .navsymbol { flex: 0 0 41px; display: flex; justify-content: center; } #navigation .hauptpunkt:hover { color: #fff; } /* Offen: links ein 4-px-Streifen rgb(87,112,156), dahinter rgb(52,52,52), Ecke oben rechts 10 px rund; der Kasten der Unterpunkte setzt ihn fort, Ecke unten rechts. */ #navigation .bereich.offen .hauptpunkt { background: rgb(52, 52, 52); border-left-color: rgb(87, 112, 156); color: rgb(254, 254, 254); } #navigation .unterpunkte { display: none; } #navigation .bereich.offen .unterpunkte { display: block; width: 216px; padding: 4px; margin-bottom: 1px; background: rgb(52, 52, 52); border-radius: 0 0 10px 0; } /* Unterpunkt 208 x 26, Abstand 30, 14 px rgb(241,241,241), Polster 5px 10px; der aktive als Flaeche rgb(70,70,70) mit Radius 7 px. */ #navigation .unterpunkte button { display: block; width: 208px; height: 26px; margin: 0 0 4px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: rgb(241, 241, 241); font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #navigation .unterpunkte button:last-child { margin-bottom: 0; } #navigation .unterpunkte button:hover { background: rgb(62, 62, 62); } #navigation .unterpunkte button[aria-current="true"] { background: rgb(70, 70, 70); color: #fff; } #rechts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* Kopfleiste 51 px, rgb(11,11,11) — gemessen. */ header { display: flex; align-items: center; gap: 12px; height: 51px; padding: 0 20px; background: var(--leiste); color: var(--leiste-schrift); position: sticky; top: 0; z-index: 30; } header button { background: none; border-color: transparent; color: var(--leiste-schrift); } /* „+ Neu": 89 x 31 gruen, Abstand 5,6 px zwischen Symbol und Text, Polster 0 8px. */ .kopflinks { flex: 1 1 0; display: flex; align-items: center; min-width: 0; } .neu-huelle { position: relative; } header #neu-knopf { display: inline-flex; align-items: center; gap: 5.6px; padding: 0 8px; background: var(--aktion); border-color: var(--aktion); color: #fff; } .knopfsymbol { display: inline-flex; } /* Die Menues der Kopfleiste: dunkle Tafeln wie dort. */ .neumenue { position: absolute; top: 36px; z-index: 40; min-width: 200px; padding: 6px 0 8px; background: rgb(52, 52, 52); color: rgb(241, 241, 241); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } #neu-menue { left: 0; } .neugruppe { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; color: rgb(222, 222, 222); font-size: 14px; } .neumenue .neueintrag, .neumenue > button { display: block; width: 100%; height: 26px; padding: 0 12px 0 32px; text-align: left; border: 0; border-radius: 0; background: none; color: rgb(241, 241, 241); font-size: 14px; } .neumenue .neueintrag:hover, .neumenue > button:hover { background: rgb(70, 70, 70); } /* Rechts: der Avatar, ein Kreis 24 px mit Initialen 12/700 — wie dort. Der Rest des Platzes haelt das Suchfeld in der Fenstermitte: Die Leiste beginnt erst bei x 220, also bekommt die rechte Seite 220 px mehr als die linke. */ .kopfrechts { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; padding-left: 220px; min-width: 0; position: relative; } header #avatar { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgb(24, 202, 183); border: 0; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } header #avatar:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } #benutzermenue { right: 0; min-width: 240px; padding: 10px 0; } #benutzermenue #wer { display: block; padding: 2px 16px 8px; color: #fff; font-weight: 600; border-bottom: 1px solid rgb(70, 70, 70); margin-bottom: 6px; } #benutzermenue > button { padding-left: 16px; } #benutzermenue #version { display: block; padding: 8px 16px 0; margin-top: 6px; border-top: 1px solid rgb(70, 70, 70); color: rgb(200, 200, 200); font-size: 12px; } #benutzermenue #zustand { display: block; padding: 4px 16px 0; color: rgb(160, 160, 160); font-size: 12px; line-height: 1.4; } main { flex: 1 1 auto; min-width: 0; padding: 0 20px 20px; } /* 31px hoch, Radius 3px, 14px, nicht fett — gemessen. */ button { font: inherit; height: 31px; padding: 0 12px; border: 1px solid var(--rand); background: var(--karte); color: var(--schrift); border-radius: 3px; cursor: pointer; } button:hover { border-color: var(--betont); } button[aria-current="true"] { background: var(--betont); color: #fff; border-color: var(--betont); } /* Die Hauptaktion ist gruen, nicht blau — gemessen: rgb(0, 163, 105). */ button.wichtig { background: var(--aktion); color: #fff; border-color: var(--aktion); } button.wichtig:hover { filter: brightness(1.08); } /* 28px hoch, Rahmen rgb(148,159,159), Radius 3px, Innenabstand 2px 12px — gemessen. */ input, select, textarea { font: inherit; min-height: 28px; padding: 2px 12px; border: 1px solid var(--feldrand); border-radius: 3px; background: var(--karte); color: var(--schrift); width: 100%; } textarea { padding: 6px 12px; } input[type="checkbox"] { min-height: 0; } label { display: block; margin-bottom: 0.5rem; } label span { display: block; color: var(--leise); font-size: 0.85rem; } /* Spaltenkopf 32px, FETT, schwarz auf #f2f6f6. Datenzeile 33px, weiss. Beides gemessen — und beides ist dichter als die erste eigene Fassung: In weclapp stehen 49 Zeilen auf einem Schirm. */ table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rand); } th { height: 32px; color: var(--schrift); font-weight: 700; background: var(--kopf); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 1; } /* Die Filterzeile sitzt unter den Spaltenkoepfen und bleibt beim Rollen stehen — wie in weclapp. Sie traegt keinen eigenen Hintergrund: Kopf und Filter sind ein Block, kein zweiter Kasten. */ /* Filterzeile 48 px, Felder 28 px — am 17.10.2026 in weclapp gemessen. Sie klebt unter den Spaltenkoepfen (deren 32 px als `top`), damit beides beim Rollen stehenbleibt. Zwei kleine Felder nebeneinander bei Datum und Betrag: dort steht dort eine Spanne, kein einzelner Wert. */ tr.filterzeile th { height: 48px; padding: 4px 5px; top: 32px; font-weight: 400; } tr.filterzeile input { min-height: 28px; padding: 1px 6px; } tr.filterzeile .spanne { display: flex; gap: 4px; } tr.filterzeile .spanne input { min-width: 0; } tbody tr { height: 33px; } tbody tr:hover { background: var(--kopf); } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; } /* Mengen und Betraege stehen auch im Eingabefeld rechtsbuendig - wie in der Positionstabelle von weclapp. */ input.zahl { text-align: right; font-variant-numeric: tabular-nums; } .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 6px; padding: var(--platz); margin-bottom: var(--platz); } .reihe { display: flex; gap: var(--platz); align-items: flex-end; flex-wrap: wrap; } .reihe > * { flex: 1 1 12rem; } .reihe > button { flex: 0 0 auto; } .fehler { color: var(--warnung); border-left: 3px solid var(--warnung); padding-left: 0.6rem; } .gut { color: var(--gut); } .leise { color: var(--leise); } .warten { color: var(--leise); font-style: italic; } dl.felder { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; } dl.felder dt { color: var(--leise); } dl.felder dd { margin: 0; } form.anmeldung { max-width: 22rem; } /* ---- Belege ------------------------------------------------------------- */ /* Ein Entwurf ist kein Beleg. Das muss man sehen, ohne die Spalte zu lesen. */ tr.entwurf td { border-left: 3px solid var(--betont); } .marke { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.4rem; margin-right: 0.4rem; border: 1px solid var(--rand); border-radius: 3px; color: var(--leise); } .marke.entwurf { border-color: var(--betont); color: var(--betont); } button.verweis { border: none; background: none; color: var(--betont); padding: 0; text-decoration: underline; cursor: pointer; } button.gefahr { color: var(--warnung); } button.gefahr:hover { border-color: var(--warnung); } a.knopf { display: inline-block; font: inherit; padding: 0.4rem 0.8rem; border: 1px solid var(--rand); background: var(--karte); color: var(--schrift); border-radius: 4px; text-decoration: none; } a.knopf:hover { border-color: var(--betont); } /* Festlegung 14: Freitext und Ueberschrift laufen ueber die ganze Zeile — in der Ansicht wie in der Erfassung wie im Druckbild. Drei Stellen, eine Regel. */ table.positionen tr.ueberschrift td { font-weight: 600; background: var(--grund); } table.positionen tr.freitext td { color: var(--leise); white-space: pre-wrap; } /* Die Positionszeile ist HOCH, kein Raster: in weclapp 81 bis 99 px, weil Artikelnummer, Bezeichnung als Fliesstext und Zusaetze uebereinander stehen. Gemessen am 17.10.2026. Wer sie als 33-px-Zeile baut, trifft die Liste und nicht die Erfassung — und erfasst wird hier jeden Tag. */ table.positionen.erfassen tbody tr { height: auto; } table.positionen.erfassen td { vertical-align: top; padding: 0.3rem; } table.positionen.erfassen input, table.positionen.erfassen select, table.positionen.erfassen textarea { margin-bottom: 0.2rem; } table.positionen.erfassen td.werkzeuge { white-space: nowrap; width: 1%; } table.positionen.erfassen td.werkzeuge button { padding: 0.2rem 0.4rem; } table.positionen.erfassen td.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; } .reihe.eng { gap: 0.4rem; align-items: center; } .reihe.eng > * { flex: 0 1 auto; } label.schalter { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; } label.schalter input { width: auto; } label.breit { flex: 2 1 16rem; } ul.auswahl { list-style: none; padding: 0; margin: 0.3rem 0; } ul.auswahl li { padding: 0.2rem 0; } .treffer:empty, .artikeltreffer:empty { display: none; } .artikeltreffer { border-left: 2px solid var(--rand); padding-left: 0.5rem; margin-top: 0.3rem; } /* ---- Belegmaske: zweispaltig wie in weclapp -------------------------------- * * Gemessen: Inhalt 1619 px links, Karten 553 px rechts. Hier als Verhaeltnis statt * fester Zahlen, damit es auf jedem Schirm aufgeht — das Verhaeltnis ist dasselbe. * Unter 1200 px faellt die rechte Spalte nach unten; ein Beleg, dessen Positionen * auf 600 px gequetscht werden, ist unbrauchbar. */ /* Das VERHAELTNIS ist gemessen, nicht die feste Zahl: 1636 zu 513 bei 2213 px Inhaltsbreite, also 76 zu 24. Mit festen 513 px blieb auf einem schmalen Schirm fuer die Positionstabelle fast nichts uebrig — am 17.10.2026 im Browser gesehen. Die Obergrenze ist trotzdem die gemessene Zahl: breiter wird die Spalte auch in weclapp nicht. */ .belegflaeche { display: flex; gap: 33px; align-items: flex-start; } .belegflaeche > .haupt { flex: 76 1 0; min-width: 0; } .belegflaeche > .nebenspalte { flex: 24 1 0; min-width: 300px; max-width: 513px; } @media (max-width: 1200px) { .belegflaeche { display: block; } .belegflaeche > .nebenspalte { width: auto; } } /* Die PDF-Vorschau neben dem Beleg — das einzige Stueck der rechten weclapp-Spalte, das der Eigentuemer uebernommen hat (17.10.2026). Sie zeigt genau das Blatt, das hinausgeht; das Druckbild hat dreimal Fehler gezeigt, die gruene Pruefungen nicht fanden, und jedes Mal brauchte es dafuer einen Blick. */ /* Das Blatt behaelt seine Proportionen und wird verkleinert, statt auf Spaltenbreite umzubrechen. Bei 335 px Breite reflowt A4 sonst zu etwas, das wie ein kaputter Beleg aussieht — und eine Vorschau, die anders aussieht als das Blatt, ist schlimmer als keine. Der Faktor wird beim Zeichnen aus der wirklichen Breite gerechnet, nicht geraten; 794 px sind 210 mm bei 96 dpi. */ .vorschaurahmen { width: 100%; height: 70vh; min-height: 420px; overflow: hidden; border: 1px solid var(--rand); background: #fff; } .vorschau { width: 794px; height: 1123px; border: 0; display: block; transform: scale(var(--faktor, 0.42)); transform-origin: top left; } .nebenspalte .karte { margin-bottom: var(--platz); } .summen { margin: var(--platz) 0; } .summen .gesamt { font-weight: 700; font-size: 1.1rem; } dl.felder.summen { max-width: 22rem; margin-left: auto; } /* Anschriften, Ansprechpartner und E-Mail-Rollen: je Zeile der Text und die zwei Knoepfe. Der Text nimmt den Platz, die Knoepfe bleiben rechts und gleich breit — sonst springen sie je nach Laenge der Anschrift, und man klickt den falschen. */ ul.teile { list-style: none; padding: 0; margin: 0.4rem 0; } ul.teile > li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rand); } ul.teile > li > span { flex: 1 1 auto; } ul.teile > li > button { flex: 0 0 auto; } ul.teile > li:last-child { border-bottom: none; } /* --------------------------------------------------------------------------- * Die Belegseite - der Rahmen, den weclapp um jeden Beleg legt. * * Am 17.10.2026 am laufenden Mandanten gemessen (Angebot 2026-33524, Inhaltsbreite * 2213 px): Hauptspalte 1636, Luecke 33, Seitenleiste 513. Abschnittsueberschriften * 16 px in #949f9f mit Linie dahinter; Ueberschriften der Seitenleiste 24 px. * * **Der Beleg ERSETZT die Liste, er steht nicht darunter** (Eigentuemer, 17.10.2026). * In weclapp hat er eine eigene Seite mit eigener Adresse (/app/quotation/5661400); * oben rechts fuehrt "Uebersicht" zurueck. Genau das macht `belegseite` hier. * --------------------------------------------------------------------------- */ /* Aktionsleiste ganz oben, wie die Knopfreihe in weclapp. Sie klebt beim Blaettern oben - bei einem Beleg mit vierzig Positionen waere "Speichern" sonst nur nach einer langen Rollbewegung erreichbar. */ .aktionsleiste { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.4rem var(--platz); background: var(--kopf); border: 1px solid var(--rand); border-radius: 3px; position: sticky; top: 0; z-index: 5; } .aktionsleiste .rechts { margin-left: auto; display: flex; gap: 0.4rem; } /* Titelzeile: links "Angebot AN-2026-00001 - 2.423,00 EUR - Kunde 17473: Firma", rechts der Zustand. Dieselbe Reihenfolge wie dort, damit das Auge sie findet. */ .belegtitel { display: flex; align-items: baseline; gap: var(--platz); flex-wrap: wrap; margin: var(--platz) 0 0.5rem; } .belegtitel h1 { font-size: 1.45rem; font-weight: 700; margin: 0; } .belegtitel .wert { font-size: 1.45rem; font-weight: 400; color: var(--schrift); } .belegtitel .kunde { font-size: 1.45rem; font-weight: 400; color: var(--betont); } .belegtitel .rechts { margin-left: auto; text-align: right; font-size: 0.85rem; color: var(--leise); } /* Reiterleiste. weclapp zaehlt in Klammern mit, wie viel dahinter steckt - das erspart das Hineinklicken, nur um "nichts" zu sehen. */ /* Am 17.10.2026 am Angebot 2026-33524 gemessen, nicht geschaetzt: inaktiv Hintergrund rgb(148,159,159), Schrift WEISS, 34 px, Radius 4px 4px 0 0 aktiv Hintergrund weiss, Schrift schwarz, 35 px, derselbe Radius Der erste Entwurf hatte Reiter als flache Unterstreichung - das sieht moderner aus und ist nicht, was die Damen kennen. */ nav.reiter { display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid var(--rand); margin-bottom: var(--platz); } nav.reiter button { height: 34px; border: 0; border-radius: 4px 4px 0 0; background: var(--feldrand); padding: 0 1rem; color: #fff; font-size: 14px; } nav.reiter button:hover { filter: brightness(1.08); } nav.reiter button[aria-selected="true"] { height: 35px; background: var(--karte); color: #000; border: 1px solid var(--rand); border-bottom-color: var(--karte); margin-bottom: -1px; } /* Abschnitt mit Ueberschrift und Linie - 16 px, #949f9f, gemessen. */ .abschnitt { margin-bottom: 1.2rem; } /* 18 px, Gewicht 500, SCHWARZ - am 17.10.2026 nachgemessen. Vorher stand hier 16 px in #949f9f: Die erste Messung hatte einen Wrapper erwischt statt den Text, und auf dem Schirm sahen die Ueberschriften danach blass aus. #949f9f ist in Wahrheit die Farbe der INAKTIVEN REITER. */ .abschnitt > h2 { display: flex; align-items: center; gap: 0.75rem; font-size: 18px; font-weight: 500; color: #000; margin: 0 0 0.6rem; } .abschnitt > h2::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rand); } /* Zwei Spalten innerhalb eines Abschnitts: links die Felder, rechts der Infoblock (Belegadresse, Lieferadresse, E-Mail-Rollen) - so steht es in weclapp. */ .abschnitt .zweispaltig { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; } .abschnitt .zweispaltig > * { flex: 1 1 20rem; min-width: 0; } /* Die Seitenleiste nennt ihre Bloecke mit 24 px, nicht mit der Abschnittsschrift. */ .nebenspalte h2 { font-size: 24px; font-weight: 400; margin: 0 0 0.5rem; } /* "Angebotswert" gruen, "Kosten" rot - wie im Block "Allgemeines" bei weclapp. */ .kennzahl { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.6rem; border-radius: 3px; margin-bottom: 0.3rem; } .kennzahl.wert { background: var(--aktion); color: #fff; } .kennzahl.kosten { background: #d9534f; color: #fff; } .kennzahl b { font-variant-numeric: tabular-nums; } /* Beschriftung LINKS neben dem Feld, nicht darueber - gemessen: Die Felder beginnen bei x=166, die Beschriftungen bei x=16, also eine Spalte von 150 px. Felder sind 28 px hoch (nicht die 31 px der Knoepfe). Nur innerhalb von `.abschnitt`: In Suchleisten und kleinen Masken steht die Beschriftung weiter darueber, und dort ist das auch richtig. */ .abschnitt label { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .abschnitt label > span { color: var(--schrift); font-size: 14px; } .abschnitt label > input, .abschnitt label > select { min-height: 28px; height: 28px; } /* Feld und Knopf teilen sich die zweite Spalte; das Feld nimmt den Platz. */ .abschnitt label > .reihe { gap: 0.4rem; } .abschnitt label > .reihe > input { flex: 1 1 auto; min-height: 28px; height: 28px; } .abschnitt label > .reihe > button { flex: 0 0 auto; } .abschnitt label > textarea { min-height: 56px; } /* Schalter bleiben nebeneinander - ein Haken mit 150 px Beschriftungsspalte davor sieht aus wie ein vergessenes Feld. */ .abschnitt label.schalter { display: flex; grid-template-columns: none; } /* Die Suche in der Kopfleiste. * --------------------------------------------------------------------------- * Am 17.10.2026 am laufenden weclapp gemessen: weisse Huelle 850 x 31 px bei * 2433 px Fensterbreite (also rund 35 %), Radius 3 px, Lupe links, Feld 30 px, * Schrift 14 px in rgb(101,101,101), Platzhalter "Suche", mittig in der Leiste. * * Vorher stand sie als Karte UEBER der Liste, mit Beschriftung und eigenem * Suchknopf - der Eigentuemer hat beide Bilder nebeneinandergelegt. Die Leiste ist * der gewohnte Ort; wer sucht, greift dorthin, ohne hinzusehen. */ /* Wirklich MITTIG, nicht "in der Mitte des Restplatzes" (Eigentuemer, 17.10.2026). Links der Name, rechts Benutzer und Knoepfe - beide Seiten wachsen gleich (`flex: 1 1 0`), also sitzt das Feld dazwischen genau in der Fenstermitte. Mit `margin: 0 auto` zwischen vier gleichrangigen Kindern verschob es sich je nachdem, wie lang der Benutzername war. Gemessen bei weclapp: Feldmitte 1205 bei einem 2433 px breiten Fenster, also die Mitte. */ #suchfeld { display: flex; align-items: center; gap: 0.4rem; background: #fff; border-radius: 3px; height: 31px; flex: 0 1 850px; padding: 0 0 0 10px; } #suchfeld .lupe { color: rgb(101, 101, 101); display: inline-flex; } #suchfeld input { flex: 1 1 auto; height: 30px; min-height: 30px; border: 0; background: none; color: rgb(101, 101, 101); font-size: 14px; padding: 4px 12px 4px 0; } #suchfeld input:focus { outline: none; } /* Auf schmalen Schirmen wird das Feld kuerzer, statt den Benutzernamen auf "Je..." zu stauchen. Die 850 px sind der gemessene Wert bei 2433 px Fensterbreite - der Arbeitsplatz des Eigentuemers hat 2432, dort gelten sie. Darunter zaehlt, dass beide Seiten lesbar bleiben UND die Mitte die Mitte bleibt. */ @media (max-width: 1500px) { #suchfeld { flex: 0 1 520px; } } @media (max-width: 1000px) { #suchfeld { flex: 0 1 300px; } } /* Wo es nichts zu durchsuchen gibt, ist das Feld aus - ein Feld, in das man tippt und nichts geschieht, ist schlimmer als keines. */ #suchfeld.aus { opacity: 0.45; } #suchfeld.aus input { cursor: not-allowed; } /* Der Listenkopf: Titel und der gruene Knopf nebeneinander, LINKS. Gemessen: "Angebote" bei x=16, "+ Neues Angebot" bei x=134, 31 px hoch, #00a369. Vorher sass der Knopf ganz rechts in einer Karte - zwei Blicke statt einem. */ .listenkopf { display: flex; align-items: center; margin: 0 0 var(--platz); } .listenkopf h2 { font-size: 24px; font-weight: 400; margin: 0 0.5rem 0 0; } .listenkopf .reihe { align-items: center; } /* Blaetterleiste mittig unter der Tabelle, die Zahl der Datensaetze rechts daneben - wie "1 von 94 Seiten ... 18615 Datensaetze" in weclapp. */ .blaetterleiste { display: flex; align-items: center; justify-content: center; gap: var(--platz); margin-top: var(--platz); position: relative; } .blaetterleiste > .leise:last-child { position: absolute; right: 0; color: #636363; } @media (max-width: 900px) { .blaetterleiste > .leise:last-child { position: static; } } /* Listenspalten, die am 17.10.2026 dazugekommen sind. --------------------------------------------------------------------------- */ /* Auswahlkaestchen: schmal, mittig, und die Spalte nimmt nur ihre Breite. */ th.haken, td.haken { text-align: center; padding-left: 6px; padding-right: 6px; } td.mitte { text-align: center; } /* Das PDF-Symbol in der Zeile - ein Zeichen, kein Knopf. */ td a.pdf { text-decoration: none; font-size: 16px; color: var(--betont); } td a.pdf:hover { color: var(--aktion); } /* Eine Spanne, die auf unvollstaendigen Einkaufspreisen beruht, steht da - aber gezeichnet, damit niemand sie fuer bare Muenze nimmt. */ td.warnt { color: #a8730a; } /* Die Leiste der Massenaktionen erscheint nur, wenn etwas gewaehlt ist. Sie steht UEBER der Tabelle, wo in weclapp "Massenaktionen" sitzt. */ .massenleiste:empty { display: none; } .massenleiste { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: var(--kopf); border: 1px solid var(--rand); border-radius: 3px; padding: 0.4rem var(--platz); margin-bottom: 0.5rem; } .massenleiste .fehler { flex: 1 1 100%; } /* Zwoelf Spalten passen auf den Arbeitsplatz des Eigentuemers (2432 px), aber nicht auf jeden Schirm. weclapp rollt dort waagerecht - und das ist richtig: Spalten wegzulassen hiesse, dass dieselbe Liste bei zwei Leuten anderes zeigt. Umbrechen ist keine Alternative; eine Belegnummer ueber drei Zeilen ist keine. */ .tabellenflaeche { overflow-x: auto; } .tabellenflaeche > table { min-width: 100%; } /* Die Mindestbreite steht NICHT hier, sondern kommt aus den gemessenen Spaltenbreiten (`breitenSetzen` in listenbau.js): Jede Liste hat ihre eigene Summe, und eine runde Zahl an dieser Stelle galt fuer alle. Unterhalb davon quetschen sich die Spalten gegenseitig zu Brei - "Raiffeisen-IT GmbH" stand dann auf zwei Zeilen, und aus "Kundennummer" wurde "Kundenn". Ab dort wird gerollt statt gequetscht, wie dort. */ td .verweis, th { white-space: nowrap; } /* Die drei Symbole der Listenzeile: Bearbeiten, Kopieren, Loeschen. Am 17.10.2026 im weclapp-DOM nachgesehen (w-icon-edit, content_copy, delete) und vom Eigentuemer mit Bild bestellt: Stift GRUEN, Kopie grau, Korb ROT. Die Spalte ist dort 100 px breit und steht ganz links, vor dem Auswahlkaestchen. */ th.werkzeugspalte, td.werkzeugspalte { white-space: nowrap; padding: 0 2px; } /* 20 px je Knopf, zusammen 60 - die Spalte hat bei 1100 px Tabellenbreite 65 px. Mit 26 px passten sie nicht und das dritte Symbol wurde abgeschnitten (17.10.2026 im Bild gesehen). */ button.werkzeug { height: 22px; width: 20px; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1; cursor: pointer; } button.werkzeug.bearbeiten { color: var(--aktion); } button.werkzeug.kopieren { color: var(--feldrand); } button.werkzeug.loeschen { color: #d9534f; } button.werkzeug:hover:not(:disabled) { filter: brightness(1.2); transform: scale(1.1); } /* Ausgegraut statt versteckt: Wo das Symbol fehlt, sucht man es - wo es blass ist, sagt der Tooltip warum. */ button.werkzeug:disabled { opacity: 0.25; cursor: not-allowed; } /* Sortierbare Spaltenkoepfe - in weclapp traegt jeder einen Pfeil. Der Pfeil steht NUR an der aktiven Spalte: einer an jeder sieht aus wie eine Sortierung nach allen gleichzeitig. */ th.sortbar { padding: 0; } th.sortbar .sortknopf { width: 100%; height: 32px; border: 0; border-radius: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-align: inherit; padding: 4px 5.33px; cursor: pointer; } th.sortbar.zahl .sortknopf { text-align: right; } th.sortbar.mitte .sortknopf { text-align: center; } th.sortbar .sortknopf:hover { background: #e7eded; } th.sortbar.sortiert .sortknopf { color: var(--betont); } /* Filterzeile: Auswahllisten so hoch wie die Textfelder, und nichts quillt ueber. */ tr.filterzeile select { min-height: 28px; height: 28px; width: 100%; padding: 1px 4px; } tr.filterzeile input { width: 100%; } tr.filterzeile .spanne { display: flex; gap: 4px; } tr.filterzeile .spanne > input { min-width: 0; flex: 1 1 0; } /* Zeilen: heller Wechsel beim Darueberfahren, sonst weiss - wie dort. Der Entwurfsstreifen bleibt, er ist die wichtigste Unterscheidung im ganzen ERP. */ table.liste tbody tr:hover { background: #f7fafa; } table.liste td { vertical-align: middle; } /* FESTES Tabellenlayout - ohne das sind die -Breiten nur Vorschlaege, und der Browser verteilt nach Inhalt. Am 17.10.2026 im Bild gesehen: "Raiffeisen-IT GmbH" stand auf zwei Zeilen, obwohl die Spalte 332 px haben sollte. Was nicht passt, wird mit Auslassungspunkten gekuerzt und steht vollstaendig im Tooltip - eine Zeile, die umbricht, zerreisst die ganze Liste. */ table.liste { table-layout: fixed; } /* Zeilen 33 px, Zellen 4px/5,33px - gemessen. Mit dem Hauspolster 5px/8px wurden es 42 px, und auf einen Schirm passten ein Viertel weniger Zeilen. */ table.liste tbody tr { height: 33px; } table.liste td, table.liste th { padding: 4px 5.33px; } /* Der sortierbare Kopf traegt sein Polster im Knopf - sonst kaeme es doppelt und die Kopfzeile waere 40 statt der gemessenen 32 px hoch. */ table.liste th.sortbar { padding: 0; } table.liste th.sortbar .sortknopf { height: 32px; } /* Die Belegnummer ist in weclapp ein VERWEIS, kein Knopf. Unser Knopfstil gab ihr 31 px Hoehe, und die Zeile wurde dadurch 40 statt 33 px hoch - auf einen Schirm passten dadurch ein Fuenftel weniger Zeilen. */ table.liste td .verweis { height: auto; min-height: 0; padding: 0; line-height: 1.2; } table.liste td, table.liste th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.liste tr.filterzeile th { overflow: visible; } /* Eine stillgelegte Partei: blasser, aber lesbar. Aus der Uebernahme kommt heute keine (gemessen: 0 inaktiv) - stillgelegte und gesperrte Kunden bleiben draussen. Die Regel steht fuer den Tag, an dem jemand hier eine stilllegt. */ table.liste tbody tr.inaktiv td { color: var(--feldrand); font-style: italic; } /* =========================================================================== Die Liste, 1:1 - am 18.10.2026 in der weclapp-Angebotsliste nachgemessen und jedes Bedienelement aufgeklappt. Was hier steht, ueberschreibt die aelteren Regeln oben. =========================================================================== */ /* ZEBRA und KEINE Trennlinien. Gemessen: Zeilen abwechselnd weiss und rgb(248,250,250), border-bottom 0px. Unsere Fassung zog unter jede Zeile eine Linie und liess die Streifen weg - "kein Zebra" stand sogar als Begruendung da. Es war falsch abgelesen, und die Linien machten die Liste unruhig. */ table.liste tbody td { border-bottom: 0; } table.liste tbody tr:nth-child(even) { background: rgb(248, 250, 250); } table.liste tbody tr:hover { background: rgb(245, 245, 241); } /* Der Entwurfsstreifen war unsere Zutat. Dort steht der Zustand als Wort in der Spalte "Status" - und genau so steht er jetzt hier. */ table.liste tr.entwurf td { border-left: 0; } /* Verweise in der Zeile: Listenblau, OHNE Unterstrich (gemessen: rgb(87,112,156), text-decoration none). Der Unterstrich machte aus jeder Zeile eine Linkfarm. */ table.liste td .verweis { color: rgb(87, 112, 156); text-decoration: none; font: inherit; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.liste td .verweis:hover { text-decoration: underline; } /* Symbole stehen dort BLASS und werden ueber der Zeile kraeftig. */ table.liste td.werkzeugspalte button.werkzeug, table.liste td.blattzelle a { opacity: 0.45; transition: opacity 0.1s; } table.liste tbody tr:hover td.werkzeugspalte button.werkzeug:not(:disabled), table.liste tbody tr:hover td.blattzelle a { opacity: 1; } table.liste td.werkzeugspalte button.werkzeug:disabled { opacity: 0.2; } /* Die Blattspalte: ein rotes PDF-Zeichen und ein Holen-Pfeil, wie dort. */ td.blattzelle { white-space: nowrap; } td.blattzelle a { text-decoration: none; display: inline-block; vertical-align: middle; } td.blattzelle a.pdf { font-size: 9px; font-weight: 700; line-height: 1; color: #fff; background: #d9534f; border-radius: 2px; padding: 3px 3px; margin-right: 6px; } td.blattzelle a.holen { font-size: 15px; color: rgb(87, 112, 156); } /* Beleg versendet: Haken gruen oder Kreuz grau - dort steht in JEDER Zeile eines. */ td.versandt { color: var(--aktion); font-weight: 700; } td.nicht-versandt { color: var(--feldrand); } /* Der Kopf: das blasse Doppelpfeil-Zeichen an JEDER sortierbaren Spalte (gemessen: rgb(186,186,174), 12 px). */ th.sortbar .sortzeichen { margin-left: 5px; font-size: 12px; font-weight: 400; color: rgb(186, 186, 174); } th.sortbar.sortiert .sortzeichen { color: var(--betont); } th.sortbar.sortiert .sortknopf { color: inherit; } /* ---- Filterzeile ------------------------------------------------------------ */ table.liste tr.filterzeile th { vertical-align: middle; } table.liste tr.filterzeile input:not([type=hidden]), table.liste tr.filterzeile select { height: 28px; min-height: 28px; padding: 2px 12px; border-width: 0.67px; } table.liste tr.filterzeile select { padding: 2px 6px; color: rgb(101, 101, 101); } /* Von und Bis UEBEREINANDER, je 20 px, mit der Beschriftung davor. */ .vonbis { display: grid; gap: 0; } .vonbis label { display: grid; grid-template-columns: 22px 1fr; align-items: center; margin: 0; } .vonbis label > span { font-size: 12px; font-weight: 700; color: var(--schrift); } table.liste tr.filterzeile .vonbis input { height: 20px; min-height: 20px; padding: 0 4px; min-width: 0; } /* Die Aufklapper - Mehrfachauswahl, Datum, Massenaktionen - teilen sich eine Gestalt. */ .mehrfach, .datumsfilter, .massen { position: relative; } .aufklapper { /* FEST am Bildschirm - die Lage setzt anKnopf() in listenbau.js. Im Fluss wurde die Tafel vom Rollbereich der Tabelle abgeschnitten. */ position: fixed; z-index: 50; background: #fff; border: 1px solid var(--rand); border-radius: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); padding: 4px 0; text-align: left; font-weight: 400; } /* Mehrfachauswahl: zu wie ein Feld, auf "Alle | Keine OK" und die Eintraege. */ button.mehrfach-feld { width: 100%; height: 28px; min-height: 28px; padding: 2px 22px 2px 8px; text-align: left; border: 0.67px solid var(--feldrand); border-radius: 3px; background: #fff; font: inherit; font-weight: 700; color: var(--schrift); position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.mehrfach-feld.leer { font-weight: 400; color: rgb(170, 170, 170); } button.mehrfach-feld::after { content: "\2304"; position: absolute; right: 7px; top: 1px; color: #777; } .mehrfach-liste { max-height: 260px; overflow-y: auto; min-width: 180px; } .mehrfach-kopf { display: flex; align-items: center; padding: 4px 10px 6px; color: rgb(87, 112, 156); } .mehrfach-kopf .ok { margin-left: auto; } button.textknopf { border: 0; background: none; padding: 0; min-height: 0; font: inherit; font-weight: 700; color: rgb(87, 112, 156); cursor: pointer; } .aufklapper button.eintrag { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: #fff; padding: 6px 10px; min-height: 0; font: inherit; color: #555; cursor: pointer; } .aufklapper button.eintrag:hover:not(:disabled) { background: #f2f6f6; } .aufklapper button.eintrag.gewaehlt, .aufklapper button.eintrag.gewaehlt:hover:not(:disabled) { background: rgb(87, 112, 156); color: #fff; font-weight: 700; } /* Unter der Maus bleibt ein gewaehlter Eintrag BLAU - mit dem allgemeinen Grau stand dort weisse Schrift auf fast Weiss (18.10.2026 im Bild gesehen). */ .aufklapper button.eintrag.gewaehlt:hover:not(:disabled) { filter: brightness(1.1); } .mehrfach-kopf > span { margin: 0 4px; } .aufklapper button.eintrag:disabled { color: #bbb; cursor: default; } .aufklapper button.eintrag.gefahr { color: var(--warnung); } .aufklapper > .leise { padding: 4px 10px; font-size: 13px; } /* Datum: ein BLAUER Knopf (gemessen 152x31, rgb(87,112,156), weiss), darunter Zeitspanne, Ab, Bis und zwei Knoepfe - "Filter loeschen" rot, "OK" gruen. */ button.datumsknopf, button.blau { height: 31px; min-height: 31px; padding: 4px 10px; border-radius: 3px; font: inherit; background: rgb(87, 112, 156); border: 0.67px solid rgb(87, 112, 156); color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } button.datumsknopf { width: 100%; text-align: left; } button.datumsknopf .kalender { margin-right: 5px; font-size: 12px; } button.datumsknopf:hover:not(:disabled), button.blau:hover:not(:disabled) { filter: brightness(1.1); } /* Ausgeschaltet sieht ausgeschaltet aus (19.10.2026: „Mit Microsoft verbinden" ohne Einrichtung wirkte bedienbar). */ button.blau:disabled { opacity: 0.45; cursor: not-allowed; } .datumstafel { width: 230px; padding: 8px; } /* Mit "table.liste tr.filterzeile" davor: Die Tafel haengt im DOM der Filterzeile, und deren Regel faerbte die Auswahl grau auf Blau - "Zeitspanne" war kaum zu lesen. */ table.liste tr.filterzeile .datumstafel select.zeitspanne, .datumstafel select.zeitspanne { background: rgb(87, 112, 156); color: #fff; border-color: rgb(87, 112, 156); margin-bottom: 8px; width: 100%; } .datumstafel select.zeitspanne option { background: #fff; color: var(--schrift); } table.liste tr.filterzeile .datumstafel input[type=date] { width: 100%; padding: 2px 8px; } .datumstafel label { margin: 0 0 6px; } .datumstafel label > span { display: block; font-weight: 700; color: var(--schrift); margin-bottom: 2px; } .datumsknoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .datumsknoepfe button { min-height: 31px; padding: 4px 6px; border-radius: 3px; } .datumsknoepfe button.gefahr { background: #c9302c; border-color: #c9302c; color: #fff; } /* Massenaktionen: OBEN LINKS, ueber dem Titel (gemessen x=20, y=10, 140x31). */ .listenwerkzeug { display: flex; align-items: center; margin-bottom: 18px; } .massenleiste.aufklapper { min-width: 230px; display: block; padding: 4px 0; margin: 0; border-radius: 3px; } .massenmeldung:empty { display: none; } .massenmeldung { margin-bottom: 0.5rem; } /* ---- Blaetterleiste: [1] von 195 Seiten |< < > >| 9722 Datensaetze [50 pro Seite] */ .blaetterleiste { gap: 8px; color: #636363; } .blaetterleiste input.seitenfeld { width: 44px; min-height: 26px; height: 26px; padding: 2px 6px; text-align: center; } .blaetterleiste button.blaetterknopf { border: 0; background: none; min-height: 0; padding: 2px 6px; font-size: 16px; color: var(--schrift); cursor: pointer; } .blaetterleiste button.blaetterknopf:disabled { color: #c8cdcd; cursor: default; } .blaetterleiste .datensaetze { margin-left: 10px; color: #636363; } .blaetterleiste select.seitengroesse { width: auto; min-height: 26px; height: 26px; padding: 0 6px; } /* Die alte Regel rueckte die Zahl der Datensaetze nach rechts aussen - die neue Leiste haelt alles beieinander, wie dort. */ .blaetterleiste > .leise:last-child { position: static; } /* =========================================================================== Spaltenauswahl - das Symbol rechts im Listenkopf und der Dialog "Tabelleneinstellungen". Am 18.10.2026 in weclapp geoeffnet und vermessen. =========================================================================== */ /* Ganz rechts in der Titelzeile (gemessen: 24x24, rgb(87,112,156)). */ .listenkopf { justify-content: flex-start; } .listenkopf button.tabelleneinstellung { margin-left: auto; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; background: none; font-size: 20px; line-height: 1; color: rgb(87, 112, 156); cursor: pointer; } .listenkopf button.tabelleneinstellung:hover { filter: brightness(1.25); } /* Die abgedunkelte Seite und das Fenster - 749 px breit, oben mittig. */ .spaltenauswahl-huelle { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; } .spaltenauswahl { width: 749px; max-width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #fff; color: var(--schrift); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .spaltenauswahl-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; } /* Titel: 18 px, Gewicht 300, rgb(87,112,156), in Grossbuchstaben - gemessen. */ .spaltenauswahl-kopf h2 { margin: 0; font-size: 18px; font-weight: 300; text-transform: uppercase; color: rgb(87, 112, 156); letter-spacing: 0.02em; } .spaltenauswahl-kopf button.schliessen { border: 0; background: none; min-height: 0; padding: 2px 6px; font-size: 18px; color: var(--schrift); cursor: pointer; } .spaltenauswahl-filter { padding: 0 16px 8px; } .spaltenauswahl-filter input { height: 28px; min-height: 28px; padding: 2px 10px; } .spaltenauswahl-koerper { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 8px; } /* Je Anfangsbuchstabe eine Ueberschrift, 20 px - gemessen. */ .spaltenauswahl-gruppe h3 { margin: 14px 0 8px; font-size: 20px; font-weight: 400; } /* Drei Spalten mit Haken, wie dort. */ /* minmax(0, 1fr) statt 1fr: Sonst bestimmt das laengste Wort die Spaltenbreite, und "Hauptansprechpartner Abteilung" schob das Raster ueber den Rand - der Dialog bekam einen waagerechten Rollbalken (18.10.2026 in der Kundenliste gesehen). */ .spaltenauswahl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; } .spaltenauswahl-raster label span { overflow-wrap: anywhere; } .spaltenauswahl-koerper { overflow-x: hidden; } .spaltenauswahl-raster label { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; } .spaltenauswahl-raster input[type=checkbox] { width: 16px; height: 16px; margin: 1px 0 0; flex: none; } @media (max-width: 640px) { .spaltenauswahl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .spaltenauswahl-meldung:empty { display: none; } .spaltenauswahl-meldung { padding: 4px 16px; } /* Der Fuss: rot "Abbrechen", blau "Spalten zuruecksetzen", gruen "Speichern" rechts. */ .spaltenauswahl-fuss { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rand); } .spaltenauswahl-fuss button { min-height: 31px; height: 31px; padding: 4px 12px; border-radius: 3px; } .spaltenauswahl-fuss button.wichtig { margin-left: auto; } button.rot { background: #c9302c; border: 0.67px solid #c9302c; color: #fff; cursor: pointer; } button.rot:hover { filter: brightness(1.1); } /* =========================================================================== Der große Abgleich mit weclapp (18.10.2026) — Symbole, Kästchen, Listen. Steht am Ende, damit er die älteren Regeln eindeutig ablöst. =========================================================================== */ /* ---- Symbole: echte Zeichnungen statt Zeichen (Entscheidung D1) ---------------- */ svg.symbol { display: inline-block; vertical-align: middle; flex: 0 0 auto; } button.mitsymbol, button.wichtig, button.blau, button.rot, button.mitpfeil { display: inline-flex; align-items: center; justify-content: center; gap: 5.6px; } button.mitpfeil svg.symbol { margin-right: -3px; } /* Werkzeugknöpfe einer Zeile: Stift grün, Kopie grau, Korb rot — blass, kräftig erst über der Zeile (die Opazität steht weiter oben). */ button.werkzeug { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; background: none; } button.werkzeug.loeschen { color: rgb(217, 83, 79); } /* Die Blattspalte: rotes Dokument (ansehen) und graue Wolke (holen) — wie dort. */ td.blattzelle a { display: inline-flex; align-items: center; margin-right: 6px; } td.blattzelle a.pdf { background: none; padding: 0; border-radius: 0; font-size: inherit; color: rgb(217, 83, 79); } td.blattzelle a.holen { color: rgb(160, 170, 170); } /* Ja / Nein */ td.versandt svg.symbol { color: var(--aktion); stroke-width: 2.4; } td.nicht-versandt svg.symbol { color: rgb(170, 178, 178); } /* Sortieren: das blasse Symbol an jeder sortierbaren Spalte, die Richtung an der aktiven. */ th.sortbar .sortknopf { display: inline-flex; align-items: center; } th.sortbar .sortzeichen { display: inline-flex; margin-left: 3px; font-size: 0; color: rgb(186, 186, 174); } th.sortbar.sortiert .sortzeichen { color: var(--betont); } /* Das Tabellensymbol rechts in der Titelzeile (gemessen 24 x 24, rgb(87,112,156)). */ .listenkopf button.tabelleneinstellung { display: inline-flex; align-items: center; justify-content: center; } button.datumsknopf .kalender { display: inline-flex; margin-right: 5px; } /* ---- Kästchen: 16 x 16, Radius 3, Rand rgb(148,159,159) — gemessen ------------- */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; flex: 0 0 auto; vertical-align: middle; border: 0.67px solid rgb(148, 159, 159); border-radius: 3px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; } input[type="checkbox"]::before { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); visibility: hidden; } input[type="checkbox"]:checked { background: rgb(87, 112, 156); border-color: rgb(87, 112, 156); } input[type="checkbox"]:checked::before { visibility: visible; } input[type="checkbox"]:disabled { background: rgb(233, 236, 239); cursor: not-allowed; } input[type="checkbox"]:focus-visible { outline: 2px solid rgba(87, 112, 156, 0.4); outline-offset: 1px; } /* ---- Die Liste wie dort: randlos, fester Kopf, Blätterleiste unten (D4) --------- Gemessen: Die Tabelle beginnt an der Kante der Inhaltsfläche (x 219), der Listenkopf hat Polster 8px 20px 10px. Beim Rollen bleiben Spaltenkopf und Filterzeile stehen; die Blätterleiste sitzt fest am unteren Rand (y 1168, 28 px). Erkannt wird eine Listenseite an ihrer Tabellenfläche — keine Maske muss dafür etwas setzen. */ main:has(> .tabellenflaeche) { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 51px - var(--bandhoehe, 0px)); } main:has(> .tabellenflaeche) > .listenwerkzeug { margin: 0; padding: 12px 20px 0; } main:has(> .tabellenflaeche) > .listenkopf { margin: 0; padding: 8px 20px 10px; } main:has(> .tabellenflaeche) > div > .listenwerkzeug { margin: 0; padding: 12px 20px 0; } main:has(> .tabellenflaeche) > div > .listenkopf { margin: 0; padding: 8px 20px 10px; } main:has(> .tabellenflaeche) > div > .massenmeldung:not(:empty) { margin: 0 20px 8px; } main:has(> .tabellenflaeche) > .tabellenflaeche { flex: 1 1 auto; min-height: 0; overflow: auto; } main:has(> .tabellenflaeche) > .blaetterleiste { flex: 0 0 auto; margin: 0; padding: 4px 20px; height: 36px; background: var(--grund); border-top: 1px solid rgb(236, 240, 240); } .tabellenflaeche > table.liste > thead th { position: sticky; top: 0; z-index: 2; background: var(--kopf); } .tabellenflaeche > table.liste > thead tr.filterzeile th { top: 32px; background: var(--grund); } /* Die Werkzeugleiste unter der Kopfleiste: 51 px, rgb(248,249,249) — gemessen. In der Liste trägt sie „Massenaktionen", auf der Belegseite die Aktionsknöpfe. */ main:has(> .tabellenflaeche) > div > .listenwerkzeug, main:has(> .tabellenflaeche) > .listenwerkzeug { height: 51px; padding: 0 20px; margin: 0; background: rgb(248, 249, 249); display: flex; align-items: center; } /* Schriftgewicht: Figtree zeichnet bei 400 dünner als CircularStd. Nebeneinander fotografiert wirkt 450 wie das Original; Knöpfe und Menüpunkte 500. */ body { font-weight: 450; } button, .neumenue .neueintrag { font-weight: 500; } #navigation .hauptpunkt, #navigation .unterpunkte button { font-weight: 450; } #navigation .bereich.offen .hauptpunkt { font-weight: 500; } table.liste th { font-weight: 700; } /* =========================================================================== Die Belegseite nach dem großen Abgleich (18.10.2026) — Werte aus weclapp, Angebot 2026-33524. Gilt ebenso für Kunden- und Artikelseite. =========================================================================== */ main:has(> .belegseite) { padding: 0; height: calc(100vh - 51px - var(--bandhoehe, 0px)); display: flex; flex-direction: column; } .belegseite { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Werkzeugleiste 51 px, rgb(248,249,249), Knöpfe 31 px blaugrau mit Symbol. */ .belegseite > .aktionsleiste { flex: 0 0 51px; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 0 20px; margin: 0; background: rgb(248, 249, 249); border: 0; border-radius: 0; position: static; } .aktionsleiste .aktionen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .leistenknopf, a.knopf.leistenknopf { display: inline-flex; align-items: center; gap: 5.6px; height: 31px; padding: 4px 8px; border: 0; border-radius: 3px; background: rgb(87, 112, 156); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .leistenknopf:hover { filter: brightness(1.1); } .leistenknopf.wichtig { background: var(--aktion); } .leistenknopf:disabled { opacity: 0.55; cursor: not-allowed; } .leistenmenue { position: relative; } .leistentafel { position: absolute; top: 35px; left: 0; z-index: 40; min-width: 240px; padding: 4px 0; background: #fff; border: 1px solid rgb(223, 228, 228); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .leisteneintrag { display: block; width: 100%; height: 32px; line-height: 32px; padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--schrift); text-align: left; font-size: 14px; font-weight: 450; text-decoration: none; white-space: nowrap; } .leisteneintrag:hover { background: rgb(242, 246, 246); } .leisteneintrag.gefahr { color: rgb(217, 83, 79); } .aktionsleiste .rechts { margin-left: auto; display: flex; align-items: center; } button.uebersicht { height: auto; padding: 0; border: 0; background: none; color: rgb(87, 112, 156); font-weight: 700; font-size: 14px; } button.uebersicht:hover { text-decoration: underline; } /* Titel 24/400, der Kundenteil als Verweis in Listenblau; rechts der Zustand. */ .belegseite > .belegtitel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 12px 20px 10px; } .belegtitel h1 { display: inline-flex; align-items: flex-start; gap: 3px; font-size: 24px; font-weight: 400; margin: 0; } .belegtitel .titelpdf { color: rgb(217, 83, 79); display: inline-flex; margin-top: 1px; } .belegtitel .wert, .belegtitel .kunde { font-size: 24px; font-weight: 400; color: var(--schrift); } .belegtitel .titelverweis { font-size: 24px; font-weight: 400; height: auto; padding: 0; color: rgb(87, 112, 156); } .belegtitel .titelverweis:hover { text-decoration: underline; } .zustandsblock { margin-left: auto; min-width: 270px; } .zustandsblock .zustand { font-size: 14px; font-weight: 500; } .zustandsblock .zeile2 { font-size: 12px; font-style: italic; } .seitenmeldung { padding: 0 20px; } .seitenmeldung:empty, .seitenmeldung > div:empty { display: none; } /* Reiter: 35 px, Polster 8px 16px, Radius 4px 4px 0 0 — inaktiv rgb(148,159,159). */ .belegseite > nav.reiter { padding: 0 12px; margin: 0; gap: 8px; border-bottom: 1px solid rgb(223, 228, 228); } .belegseite > nav.reiter button { padding: 0 16px; font-weight: 450; } /* Haupt- und rechte Spalte rollen jede für sich; Kopf, Leiste und Reiter stehen. */ .belegseite > .belegflaeche { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; align-items: stretch; } .belegseite > .belegflaeche > .haupt { flex: 76 1 0; min-width: 0; overflow: auto; padding: 18px 16px 48px 20px; } .belegseite > .belegflaeche > .nebenspalte { flex: 24 1 0; min-width: 320px; max-width: 545px; overflow: auto; padding: 10px 16px 32px; border-left: 1px solid rgb(223, 228, 228); } @media (max-width: 1200px) { main:has(> .belegseite) { height: auto; } .belegseite > .belegflaeche { display: block; } .belegseite > .belegflaeche > .haupt, .belegseite > .belegflaeche > .nebenspalte { overflow: visible; max-width: none; } } /* Abschnitt: 18/500 schwarz, Linie rgb(148,159,159). */ .abschnitt { margin-bottom: 22px; } .abschnitt > h2::after { background: rgb(148, 159, 159); height: 0.67px; } /* Feldzeile: Beschriftung 13 px links in 150 px, Feld 28 px rechts. */ .feldzeile { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; min-height: 32px; margin-bottom: 2px; } .feldzeile .feldname { font-size: 13px; line-height: 1.15; padding-right: 8px; color: var(--schrift); } .feldzeile .feldwert { display: flex; align-items: center; gap: 6px; min-width: 0; } .feldzeile .feldwert > input, .feldzeile .feldwert > select { height: 28px; min-height: 28px; } .feldzeile .festwert { padding: 4px 0; min-height: 28px; display: flex; align-items: center; } .feldzeile .zusatz { white-space: nowrap; font-size: 14px; } .spalten2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; } @media (max-width: 1500px) { .spalten2 { grid-template-columns: minmax(0, 1fr); } } /* Der Infoblock rechts im Empfänger: fette Überschrift, der Name in Grau, darunter Anschrift und E-Mail, Trennlinie zwischen den Blöcken. */ .infoblock { padding: 6px 0 8px; border-bottom: 0.67px solid rgb(148, 159, 159); } .infoblock:last-child { border-bottom: 0; } .infoblock h3 { font-size: 14px; font-weight: 700; margin: 0 0 4px; } .infoblock .grau { color: rgb(120, 128, 128); } .infoblock div { font-size: 13px; line-height: 1.5; } /* Auswahlfeld mit Vorschlägen (Empfänger, Artikel) — wie die Combobox dort. */ .wahlfeld { position: relative; flex: 1 1 auto; min-width: 0; display: flex; } .wahlfeld > input { flex: 1 1 auto; padding-right: 30px; } .wahlfeld > .wahlpfeil { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgb(101, 101, 101); pointer-events: none; display: inline-flex; } .vorschlaege { position: absolute; top: 30px; left: 0; right: 0; z-index: 30; max-height: 320px; overflow: auto; background: #fff; border: 1px solid rgb(148, 159, 159); border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); padding: 2px 0; } .vorschlaege button { display: block; width: 100%; height: auto; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 0; background: none; text-align: left; font-weight: 450; white-space: normal; } .vorschlaege button:hover, .vorschlaege button.aktiv { background: rgb(242, 246, 246); } .vorschlaege .klein { display: block; font-size: 12px; color: rgb(120, 128, 128); } .vorschlaege .hinweis { padding: 6px 10px; font-size: 12px; color: rgb(120, 128, 128); } .symbolverweis { display: inline-flex; color: rgb(87, 112, 156); height: auto; padding: 2px; border: 0; background: none; } /* Positionen wie dort: Kopfzeile als schlichter Text, Zeile zweistöckig — oben Griff, Nummer, Stift, Korb, Artikel, Menge + Einheit, Preis, Steuer, Positionswert; darunter die Bezeichnung fett über die ganze Breite. */ .posliste { margin-top: 4px; } .poskopf, .posoben { display: grid; align-items: center; column-gap: 10px; grid-template-columns: 22px 26px 44px minmax(220px, 3fr) minmax(120px, 1.1fr) minmax(120px, 1.1fr) minmax(150px, 1.2fr) 110px; } .poskopf { padding: 6px 8px; font-size: 14px; } .poskopf .zahl, .posoben .zahl { text-align: right; } .posoben { padding: 8px 8px 4px; } .poszeile { border-radius: 3px; margin-bottom: 6px; background: rgb(248, 250, 250); } .poszeile:hover, .poszeile:focus-within { background: rgb(232, 245, 238); } .poszeile.gezogen { opacity: 0.5; } .poszeile.ziel { box-shadow: inset 0 3px 0 rgb(87, 112, 156); } .posgriff { cursor: grab; color: rgb(101, 101, 101); display: inline-flex; } .posnr { font-weight: 500; text-align: center; } .poswerkzeug { display: flex; gap: 2px; } .poswerkzeug button.werkzeug { opacity: 1; } .posmenge { display: flex; align-items: center; gap: 6px; } .posmenge input { text-align: right; } .posmenge .einheit { min-width: 2.5em; } .posunten { display: flex; align-items: center; gap: 12px; padding: 0 8px 8px 112px; flex-wrap: wrap; } .posunten .bezeichnung { flex: 1 1 400px; font-weight: 700; border-color: transparent; background: transparent; padding-left: 6px; } .posunten .bezeichnung:hover, .posunten .bezeichnung:focus { border-color: rgb(148, 159, 159); background: #fff; } .posunten .festbezeichnung { flex: 1 1 400px; font-weight: 700; padding-left: 6px; } .posunten label.schalter { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; } .posunten select { width: auto; height: 28px; min-height: 28px; } .posunten .posinfo { font-size: 12px; color: rgb(120, 128, 128); } .posdetail { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; padding: 0 8px 10px 112px; } .posdetail textarea { min-height: 56px; } .posfreitext { padding: 8px 8px 8px 0; display: grid; grid-template-columns: 22px 26px 44px minmax(0, 1fr); column-gap: 10px; align-items: start; } .posfreitext textarea { min-height: 52px; } .posfreitext .festtext { white-space: pre-wrap; padding: 4px 0; } .poswert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .posleer { padding: 14px 8px; color: rgb(120, 128, 128); } /* „+ Position hinzufügen" — hellgrau mit blauer Schrift, 31 px, Radius 3,2 (gemessen). */ .zusatzknoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; } button.leise-knopf { display: inline-flex; align-items: center; gap: 5px; height: 31px; padding: 4px 8px; border: 0.67px solid rgb(248, 249, 250); border-radius: 3.2px; background: rgb(248, 249, 250); color: rgb(87, 112, 156); font-weight: 450; } button.leise-knopf:hover { background: rgb(236, 241, 245); border-color: rgb(223, 228, 228); } /* Summen rechtsbündig wie dort: Positionen netto, USt, Gesamt brutto mit Doppellinie. */ .summenblock { width: 340px; margin: 14px 0 0 auto; font-size: 13px; } .summenblock .summenzeile { display: flex; justify-content: space-between; padding: 5px 0; } .summenblock .summenzeile b { font-variant-numeric: tabular-nums; font-weight: 450; } .summenblock .gesamt { border-top: 3px double rgb(148, 159, 159); margin-top: 4px; padding-top: 8px; font-weight: 700; } .summenblock .gesamt b { font-weight: 700; } .summenblock .neben { color: rgb(120, 128, 128); } .summenblock .fehler { margin-top: 6px; } /* Rechte Spalte: Überschriften 24/400, die Kennzahlbalken grün und rot wie dort. */ .nebenblock { margin-bottom: 18px; } .nebenblock > h2 { font-size: 24px; font-weight: 400; margin: 8px 0 10px; } .nebenblock .kennzahl { height: 30px; padding: 0 10px; margin-bottom: 6px; border-radius: 3px; font-size: 13px; } .nebenblock .kennzahl.kosten { background: rgb(201, 0, 0); } .nebenblock .kennzahl.wert { background: rgb(0, 163, 105); } .nebenzeilen { font-size: 13px; } .nebenzeilen .nebenzeile { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 0.67px solid rgb(223, 228, 228); } .nebenzeilen .nebenzeile:last-child { border-bottom: 0; } .nebenzeile .blattsymbole { display: inline-flex; gap: 4px; color: rgb(217, 83, 79); } .aktenkarte { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 6px; border-radius: 3px; background: rgb(242, 244, 240); font-size: 13px; text-decoration: none; color: var(--schrift); } button.aktenkarte { width: 100%; height: auto; border: 0; text-align: left; } .aktenkarte:hover { background: rgb(232, 236, 228); } .aktenkarte .aktensymbol { color: rgb(130, 190, 120); display: inline-flex; } .aktenkarte .aktenzeile2 { font-style: italic; font-size: 12px; } .aktenkarte .aktendatum { font-size: 12px; color: rgb(120, 128, 128); } .nebenblock .vorschaurahmen { border-color: rgb(223, 228, 228); border-radius: 3px; } /* Feinschliff der Belegseite nach dem ersten Blick (18.10.2026). */ .belegtitel .titelverweis, .belegtitel .titelverweis:link { text-decoration: none; } .abschnitt label > input[type="checkbox"], .posunten input[type="checkbox"] { height: 16px; min-height: 16px; width: 16px; } .festwert.zahl { justify-content: flex-end; } .posmenge .festwert.zahl { flex: 1 1 auto; } .feldwert { display: flex; align-items: center; gap: 6px; min-width: 0; } .feldwert > .feldwert, .feldwert > .wahlfeld, .feldwert > select, .feldwert > input:not([type="checkbox"]) { flex: 1 1 auto; min-width: 0; } .feldwert > input[type="date"] { flex: 1 1 auto; max-width: none; } .posoben > .feldwert { flex-wrap: nowrap; } /* =========================================================================== Kundenseite, direkt bearbeitbar (18.10.2026, Freigabe D7) In weclapp gemessen (Kunde 21555): Verweise 14 px rgb(87,112,156) ohne Unterstrich, das "+" rund, 25 px, rgb(148,159,159) mit weissem Zeichen, das Loeschkreuz rot, 17 px. =========================================================================== */ .verweisliste { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; min-height: 28px; } .verweisliste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .verweisliste ul:empty { display: none; } .verweisliste li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 18px; } .verweisliste li.inaktiv .verweis { color: rgb(148, 159, 159); text-decoration: line-through; } .verweisliste .verweis { border: 0; background: none; padding: 0; min-height: 0; height: auto; font: inherit; color: rgb(87, 112, 156); text-decoration: none; cursor: pointer; text-align: left; } .verweisliste .verweis:hover { text-decoration: underline; } .verweisliste .verweissymbol { color: rgb(87, 112, 156); display: inline-flex; } .verweisliste .verweiszusatz { font-size: 12px; color: rgb(120, 128, 128); font-style: italic; } .verweisliste .verweisrolle { font-size: 12px; color: rgb(80, 88, 88); background: rgb(242, 244, 240); border-radius: 3px; padding: 1px 6px; white-space: nowrap; } button.rundplus { flex: none; width: 25px; height: 25px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(148, 159, 159); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } button.rundplus:hover { filter: brightness(1.1); } button.loeschkreuz { border: 0; background: none; padding: 0 2px; min-height: 0; height: 17px; width: 17px; color: rgb(201, 48, 44); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.55; } .verweisliste li:hover button.loeschkreuz, button.loeschkreuz:focus { opacity: 1; } .haken-reihe { display: flex; gap: 18px; align-items: center; min-height: 28px; flex-wrap: wrap; } .haken-reihe label.schalter { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; cursor: pointer; } .haken-reihe input[type=checkbox], .feldwert > input[type=checkbox] { width: 16px; height: 16px; min-height: 16px; margin: 0; } .feldzeile.breit { align-items: start; margin-top: 4px; } .feldzeile.breit .feldname { padding-top: 6px; } .feldzeile.breit textarea { width: 100%; min-height: 86px; resize: vertical; } .parteiseite .feldzeile { margin-bottom: 6px; } .parteiseite .feldzeile > .feldname { align-self: start; padding-top: 6px; } .belegreiter table.liste { width: 100%; table-layout: auto; } .belegreiter .verweis { border: 0; background: none; padding: 0; min-height: 0; height: auto; font: inherit; color: rgb(87, 112, 156); cursor: pointer; } .belegreiter td.zahl, .belegreiter th.zahl { text-align: right; } /* Der Dialog - das Kleid der vermessenen "Tabelleneinstellungen". */ .dialog-huelle { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; } .dialog { width: 749px; max-width: 100%; max-height: calc(100vh - 80px); margin: 0; display: flex; flex-direction: column; background: var(--karte, #fff); color: var(--schrift); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); border-radius: 3px; } .dialog.schmal { width: 520px; } .dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; } .dialog-kopf h2 { margin: 0; font-size: 18px; font-weight: 300; text-transform: uppercase; color: rgb(87, 112, 156); letter-spacing: 0.02em; } .dialog-kopf button.schliessen { border: 0; background: none; min-height: 0; padding: 2px 6px; color: var(--schrift); cursor: pointer; } .dialog-koerper { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 8px; } .dialog-koerper .spalten2 { gap: 0 20px; } .dialog-koerper .feldzeile { margin-bottom: 6px; } .dialog-haken { margin-top: 8px; } .dialog-meldung:empty { display: none; } .dialog-meldung { padding: 4px 16px; } .dialog-fuss { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rand); } .dialog-fuss button { min-height: 31px; height: 31px; padding: 4px 12px; border-radius: 3px; display: inline-flex; align-items: center; gap: 6px; } .dialog-fuss button.rechtsbuendig { margin-left: auto; } /* Bündig untereinander: das Symbol hat immer seinen Platz, das Rollenwort eine feste Breite. */ .verweisliste .verweissymbol { width: 14px; flex: none; } .verweisliste li { flex-wrap: nowrap; } .verweisliste .verweisrolle { width: 132px; flex: none; text-align: left; box-sizing: border-box; } /* Im Dialog bleiben es zwei Spalten, auch auf schmalem Schirm: Der Dialog ist 749 px breit, gleich wie breit das Fenster ist. Erst auf dem Telefon untereinander. */ .dialog-koerper .spalten2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dialog-koerper .feldzeile { grid-template-columns: 110px minmax(0, 1fr); } @media (max-width: 700px) { .dialog-koerper .spalten2 { grid-template-columns: minmax(0, 1fr); } } /* Beim Ueberarbeiten: Positionen gesperrt, weil ein Folgebeleg oder eine Seriennummer daran haengt. Die Farben des „Interner Hinweis"-Kastens aus weclapp (gemessen): rgb(255,247,224), Schrift rgb(133,112,52), Radius 4. */ .sperrhinweis { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; background: rgb(255, 247, 224); color: rgb(133, 112, 52); border-radius: 4px; font-size: 13px; } /* Interne Notiz je Position und interner Hinweis am gesperrten Beleg (18.10.2026) — in den Farben des weclapp-Hinweiskastens, damit niemand sie fuer Belegtext haelt. */ .posnotiz { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 4px 66px; padding: 4px 8px; background: rgb(255, 247, 224); color: rgb(133, 112, 52); border-radius: 4px; font-size: 12.5px; white-space: pre-wrap; } .festwert.posnotiz { margin: 0; } .posnotiz svg { flex: none; margin-top: 1px; } /* „Abbrechen" im Dialog: rgb(190,0,0), am 18.10.2026 in „Kunde erstellen" gemessen. */ .dialog-fuss button.rot { background: rgb(190, 0, 0); border-color: rgb(190, 0, 0); } /* Einspaltige Dialoge („Kunde erstellen"): Beschriftung 150 px wie auf den Seiten — mit 110 px lief „Geschäftsbeziehung" in die Haken (18.10.2026 gesehen). Nur die zweispaltigen (Adresse, Ansprechpartner) bleiben bei 110 px. Titel 18/400, gemessen. */ .dialog-koerper > div > .feldzeile, .dialog-koerper .abschnitt > .feldzeile { grid-template-columns: 150px minmax(0, 1fr); } .dialog-koerper .spalten2 .feldzeile { grid-template-columns: 110px minmax(0, 1fr); } .dialog-kopf h2 { font-weight: 400; } /* Breiter Dialog für Tabellen (Bestellungen bilden, Gutschrift). */ .dialog.breit { width: 1100px; } .dialog .dialogtabelle { width: 100%; table-layout: auto; margin-bottom: 8px; } .dialog .dialogtabelle td { vertical-align: middle; } .dialog .dialogtabelle .wahlfeld { min-width: 280px; } .dialog .dialogtabelle input.zahl { width: 90px; text-align: right; } /* Die Vorschlaege eines Auswahlfelds (Lieferant im Bestelldialog) lagen IN der Rollflaeche des Dialogkoerpers und wurden abgeschnitten — vier Treffer, keiner sichtbar (18.10.2026 gesehen). Beim breiten Dialog rollt deshalb die Flaeche dahinter, nicht der Koerper. */ .dialog-huelle { overflow-y: auto; } .dialog.breit { max-height: none; } .dialog.breit .dialog-koerper { overflow: visible; } /* Listenzellen kuerzen mit „…" und schneiden dafuer ab (overflow: hidden) — im Dialog lag darin die Vorschlagsliste des Lieferantenfelds. Dort darf die Zelle ueberlaufen. */ .dialog .dialogtabelle td { overflow: visible; white-space: normal; } /* Seriennummern im Dialog: eine Zeile je Nummer, Loeschkreuz daneben wie bei Adressen. */ .snliste { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .snliste li { display: flex; align-items: center; gap: 6px; font-size: 14px; } .snliste li button.loeschkreuz { opacity: 0.55; } .snliste li:hover button.loeschkreuz { opacity: 1; } /* =========================================================================== Anmeldeseite (18.10.2026) — mittig, ohne Leisten, das Zeichen ueber der Karte. Die weclapp-Anmeldung ist nicht vermessen: Sie anzusehen hiesse, den angemeldeten Tab abzumelden. Gestaltet in den Farben und Maßen der uebrigen Seiten. =========================================================================== */ body.abgemeldet #seitenleiste, body.abgemeldet header { display: none; } /* Bis start.js weiß, wer angemeldet ist: nichts zeigen statt einer Seite, die angemeldet aussieht. */ body.laedt #geruest { visibility: hidden; } body.abgemeldet main#inhalt { padding: 0; } .anmeldeflaeche { min-height: calc(100vh - var(--bandhoehe, 0px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; background: rgb(248, 249, 249); } .anmeldemarke { display: flex; align-items: center; gap: 10px; } .anmeldemarke span { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; color: var(--schrift); } form.anmeldung { width: 360px; max-width: 100%; margin: 0; padding: 24px 24px 20px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); background: var(--karte); display: flex; flex-direction: column; gap: 12px; } form.anmeldung h2 { margin: 0 0 4px; font-size: 18px; font-weight: 400; text-transform: uppercase; color: rgb(87, 112, 156); letter-spacing: 0.02em; } form.anmeldung label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; } form.anmeldung input { height: 32px; min-height: 32px; } form.anmeldung button.wichtig { height: 34px; margin-top: 6px; font-size: 14px; } /* Fenster 2: wer sich anmeldet, darunter der Code; „Zurück" schlicht unter dem Knopf. */ form.anmeldung .anmeldeschritt { display: flex; flex-direction: column; gap: 12px; } form.anmeldung .anmeldeschritt p { margin: 0; overflow-wrap: anywhere; } form.anmeldung button.verweis { align-self: center; font-size: 13px; } /* =========================================================================== „Neue E-Mail verfassen" (18.10.2026) — nach dem Bildschirmfoto aus weclapp: 1100 px, Beschriftung 225 px breit, Felder 42 px hoch, Kaertchen in den Farben dort (Bootstrap „info": Grund #d1ecf1, Schrift #0c5460), der Text darunter ueber die ganze Breite. =========================================================================== */ .dialog.maildialog { width: 1100px; } .dialog.maildialog .dialog-koerper .feldzeile { grid-template-columns: 225px minmax(0, 1fr); margin-bottom: 8px; } .dialog.maildialog .dialog-koerper .feldname { font-size: 15px; } .dialog.maildialog .feldwert > select, .dialog.maildialog .feldwert > input[type=text] { width: 100%; height: 36px; min-height: 36px; font-size: 15px; } .adressfeld { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 36px; border-bottom: 1px solid var(--rand); padding: 2px 0; } .adressfeld .adresseingabe { flex: 1 1 180px; min-width: 160px; border: 0; height: 30px; min-height: 30px; background: transparent; font-size: 15px; padding: 0 4px; } .adressfeld .adresseingabe:focus { outline: none; } .kaertchen { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kaertchen-eintrag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; border-radius: 3px; font-size: 15px; line-height: 20px; } .kaertchen-eintrag .symbol { flex: none; } button.kaertchen-weg { border: 0; background: none; min-height: 0; height: auto; padding: 0 0 0 2px; color: #17a2b8; cursor: pointer; display: inline-flex; } button.kaertchen-weg:hover { color: #0c5460; } /* Der Editor (18.10.2026) — Werkzeugleiste wie der Editor dort: hellgraue Leiste, Knoepfe 28 px in Gruppen, darunter die weisse Flaeche in Arial wie die Mail. */ .editor { width: 100%; border: 1px solid var(--rand); border-radius: 2px; background: #fff; color: #000; } .editor.mailtext { margin-top: 10px; } .editorleiste { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; background: rgb(248, 248, 248); border-bottom: 1px solid var(--rand); } .editorzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } .editorgruppe { display: inline-flex; align-items: center; gap: 1px; padding-right: 8px; border-right: 1px solid rgb(221, 221, 221); } .editorgruppe:last-child { border-right: 0; } button.editorknopf { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid transparent; background: none; color: rgb(51, 51, 51); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } button.editorknopf:hover { background: rgb(230, 230, 230); border-color: rgb(204, 204, 204); } .editorfarbhuelle { position: relative; display: inline-flex; } input.editorfarbe { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; } select.editorauswahl, .dialog select.editorauswahl { width: auto; flex: 0 0 auto; height: 26px; min-height: 26px; font-size: 13px; padding: 0 4px; min-width: 110px; background: #fff; color: rgb(51, 51, 51); } .editorflaeche { min-height: 300px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 13.33px; line-height: 1.4; } .editorflaeche p { margin: 0 0 1em; } .editorflaeche blockquote { margin: 0 0 1em 1.5em; padding-left: 8px; border-left: 3px solid rgb(204, 204, 204); } .editorflaeche a { color: rgb(0, 102, 204); text-decoration: underline; } .editor.signaturfeld .editorflaeche, .editor.vorlagentext .editorflaeche { min-height: 240px; } /* Das Zahnrad der Kopfleiste und sein Menue — wie dort rechts neben den Symbolen. */ header button.kopfsymbol { width: 32px; height: 32px; min-height: 32px; padding: 0; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; color: rgb(222, 222, 222); border-radius: 4px; } header button.kopfsymbol:hover, header button.kopfsymbol[aria-expanded="true"] { background: rgb(52, 52, 52); } #einstellungen-menue { right: 34px; min-width: 240px; } /* Schriftverkehr-Vorlagen: die Breiten der Liste dort — Werkzeuge 50, je 332 px. */ table.vorlagenliste { table-layout: fixed; width: 100%; } table.vorlagenliste th:nth-child(1) { width: 64px; } table.vorlagenliste td.werkzeugspalte { overflow: visible; text-overflow: clip; white-space: nowrap; } table.vorlagenliste th:nth-child(2), table.vorlagenliste th:nth-child(3), table.vorlagenliste th:nth-child(4) { width: 332px; } .vorlagendialog .feldzeile.breit { grid-template-columns: 150px minmax(0, 1fr); } /* Der erste Schritt des Zweischritts: was gleich hinausgeht. */ .versandpruefung { margin: 0 0 12px; padding: 10px 14px; border-radius: 4px; font-size: 14px; background: rgb(255, 247, 224); color: rgb(90, 74, 30); display: flex; flex-direction: column; gap: 3px; } .versandpruefung-titel { font-weight: 600; margin-bottom: 4px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kaertchen-eintrag { background: #12343b; color: #bfe6ee; border-color: #1d4a53; } } :root[data-theme="dark"] .kaertchen-eintrag { background: #12343b; color: #bfe6ee; border-color: #1d4a53; } /* =========================================================================== Stufe 4 (18.10.2026): OP-Liste, Bezahlung, Mahnlauf, Mahnungen =========================================================================== */ /* Das „$" in der Werkzeugspalte der OP-Liste — öffnet „Bezahlung". */ button.werkzeug.zahlen { color: var(--betont); } /* Fälligkeit: Datum und daneben die Tage. Überschritten rot, sonst grau. */ td.faelligzelle { display: flex; align-items: center; gap: 8px; } .tageabzeichen { display: inline-block; padding: 0 6px; border-radius: 3px; line-height: 18px; font-size: 12px; background: rgb(233, 236, 239); color: var(--schrift); white-space: nowrap; } /* Die drei Farben der Fälligkeit, in weclapp abgelesen (alert-danger/-warning/-success). */ .tageabzeichen.ueberfaellig { background: rgb(242, 204, 204); color: rgb(99, 0, 0); } .tageabzeichen.bald { background: rgb(255, 247, 224); color: rgb(133, 112, 52); } .tageabzeichen.spaeter { background: rgb(212, 237, 218); color: rgb(21, 87, 36); } td.zahl.gutschrift { color: rgb(217, 83, 79); } /* „3/3" in der Liste der Mahnläufe — grün, wenn alles versandt ist. */ .zaehlabzeichen { display: inline-block; min-width: 34px; padding: 0 8px; border-radius: 10px; line-height: 20px; font-size: 12px; text-align: center; background: rgb(148, 159, 159); color: #fff; } .zaehlabzeichen.fertig { background: var(--aktion); } td.versandt-text { color: var(--aktion); } /* Die Seite „Mahnlauf": ein Formular in der Breite der Hauptspalte. */ .seitenformular { padding: 0 20px 20px; max-width: 1240px; } .seitenformular .hakenspalte { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .seitenformular label.schalter, .hakenspalte label.schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .hakenspalte input[type=checkbox] { width: 16px; height: 16px; min-height: 16px; margin: 0; } .formularfuss { margin-top: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } button.chip { height: 26px; min-height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; border: 1px solid var(--feldrand); background: #fff; color: var(--schrift); } button.chip.an { background: var(--betont); border-color: var(--betont); color: #fff; } /* Die Seite eines Mahnlaufs trägt die Leiste der Belegseite, aber eine Liste darunter. */ .belegseite.laufseite .tabellenflaeche { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Im Dialog „Bezahlung" sind die Beschriftungen länger als die 110 px der übrigen Zweispalter („Zahlungsbedingung", „Rechnungsnummer"). */ .dialog-koerper .spalten2.breitname .feldzeile { grid-template-columns: 140px minmax(0, 1fr); } /* Der Kopf eines Mahnlaufs: Titel, darunter die Zeile mit Nummer, Summe, wer, wann. */ .belegseite > .belegtitel.laufkopf { flex-direction: column; align-items: flex-start; gap: 2px; } .laufkopf .laufzeile { font-size: 14px; color: var(--leise); } /* Dialog „Detail" der OP-Liste: eine zum Entfernen vorgemerkte Zahlung steht durchgestrichen da, bis „Speichern" sie zurücknimmt. */ .zahlungsliste tr.wird-entfernt td:not(.werkzeugspalte) { text-decoration: line-through; color: var(--leise); } .dialog .leer-hinweis { padding: 24px 0; text-align: center; font-size: 16px; font-weight: 500; } .zahlungsliste td { white-space: nowrap; } .zahlungsliste td:nth-child(4) { white-space: normal; } /* ---- Einstellungen (Zahnrad), 18.10.2026 in weclapp gemessen ------------------------- Aufklapper 300 px, rgb(52,52,52), Radius 4, Schatten 0 1px 4px, Polster 10px 0; Hauptpunkt 32 px, 14 px rgb(241,241,241) mit Symbol 20 px, fett, wenn offen; Unterpunkt 28 px, eingerueckt; immer nur ein Bereich offen. */ #einstellungen-menue.einstellmenue { right: 0; width: 300px; min-width: 300px; padding: 10px 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); max-height: calc(100vh - 60px); overflow-y: auto; } .einstellkopf { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 0; background: none; text-align: left; color: rgb(241, 241, 241); font-size: 14px; font-weight: 500; } .einstellkopf:hover { background: rgb(70, 70, 70); } .einstellkopf[aria-expanded="true"] { font-weight: 700; } .einstellsymbol { display: inline-flex; width: 20px; justify-content: center; } .einstellpunkte { display: none; } .einstellkopf[aria-expanded="true"] + .einstellpunkte { display: block; } .einstellmenue .einstellpunkte .neueintrag { height: 28px; padding-left: 42px; } /* Die Listen der Einstellungen: feste Breiten wie gemessen, randlos wie die anderen. */ table.einstelltabelle td.fett { font-weight: 700; } table.einstelltabelle td.kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; } table.einstelltabelle tr.inaktiv td { color: rgb(148, 159, 159); } .verwaltungsstern .stern { color: rgb(255, 193, 7); font-size: 18px; line-height: 1; } .einstelldialog .feldzeile { margin-bottom: 6px; } .einstelldialog input[type="text"], .einstelldialog input[type="number"], .einstelldialog input[type="date"], .einstelldialog input[type="password"], .einstelldialog select { width: 100%; } .einstelldialog textarea.textbausteinfeld { width: 100%; min-height: 200px; font-family: inherit; } /* Textverwaltung: die Spaltenkoepfe in den Farben der Formularvorschau dort. */ table.liste.liste-texte thead th.kopf-einleitung { background: rgb(18, 218, 157); } table.liste.liste-texte thead th.kopf-belegtext { background: rgb(175, 204, 251); } table.liste-texte td.textzelle { vertical-align: top; padding-top: 6px; padding-bottom: 6px; } table.liste-texte tbody tr { height: auto; } .textzeile { display: flex; align-items: center; gap: 6px; min-width: 0; } .textvorschau { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .textleer { color: rgb(148, 159, 159); flex: 1 1 auto; } .textzeile .verweis.englisch { font-size: 12px; } /* Der Schluessel fuer die Authenticator-App: gross, in Vierergruppen, gut abzutippen. */ .totpschluessel { font-family: Consolas, "Courier New", monospace; font-size: 20px; letter-spacing: 1px; padding: 10px 12px; margin: 6px 0 10px; background: var(--flaeche-leise, rgb(242, 246, 246)); border-radius: 4px; user-select: all; } /* Protokollierung: Filter links, Eintraege rechts — Kasten rgb(245,245,241), Polster 8, Abstand 8; Kreis mit Initialen; Name 14/700; rechts „Geaendert | Zeit - KW". */ .protokollflaeche { display: grid; grid-template-columns: 465px minmax(0, 1fr); gap: 10px; padding: 0 0 0 5px; } @media (max-width: 1100px) { .protokollflaeche { grid-template-columns: minmax(0, 1fr); } } .protokollfilter .feldzeile { grid-template-columns: 97px minmax(0, 1fr); margin-bottom: 4px; } .protokollfilter input, .protokollfilter select { width: 100%; } .protokollgruppen { display: flex; flex-direction: column; margin-top: 8px; } .protokollgruppe { height: 27px; min-height: 27px; padding: 0 13px; text-align: left; border: 0; border-radius: 0; border-bottom: 1px solid rgb(232, 236, 236); background: none; color: rgb(87, 112, 156); font-weight: 400; } .protokollgruppe[aria-pressed="true"] { background: rgb(87, 112, 156); color: #fff; text-decoration: underline; } .protokollliste { list-style: none; margin: 0; padding: 0; } .protokolleintrag { display: flex; gap: 10px; align-items: flex-start; padding: 8px; margin-bottom: 8px; background: rgb(245, 245, 241); color: rgb(33, 37, 41); } .protokolleintrag .kreis { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: rgb(18, 218, 157); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .protokollinhalt { flex: 1 1 auto; min-width: 0; } .protokollkopf { display: flex; justify-content: space-between; gap: 10px; } .protokollzeit { font-size: 12px; color: rgb(101, 101, 101); white-space: nowrap; } .protokollzeit .art-hinzugefuegt { color: rgb(0, 163, 105); } .protokollzeit .art-geaendert { color: rgb(87, 112, 156); } .protokollzeit .art-geloescht { color: rgb(190, 0, 0); } .protokollpfeil { border: 0; background: none; min-height: 0; height: 18px; padding: 0 4px; vertical-align: middle; } .protokollpfeil[aria-expanded="true"] .symbol { transform: rotate(180deg); } .protokollfelder { margin: 4px 0 0; padding-left: 20px; font-size: 13px; } .protokollrechts .blaetterleiste { position: static; } /* Stift und Papierkorb passen in die gemessenen 50 px nur ohne das Zellpolster der Liste. */ table.einstelltabelle td.werkzeugspalte { padding: 0 2px; overflow: visible; text-overflow: clip; } /* Der QR-Code fuer die Authenticator-App: schwarz auf weiss auch im dunklen Bild, sonst liest ihn manche Kamera nicht. */ .qrhuelle { display: flex; justify-content: center; margin: 6px 0 10px; } .qrhuelle svg.qrcode { background: #fff; border-radius: 2px; } /* Altbeleg aus weclapp: das Original-PDF statt des Druckbilds, im Betrachter des Browsers. */ .vorschaurahmen.original { height: 80vh; } .vorschau-pdf { width: 100%; height: 100%; border: 0; display: block; } /* USt-ID-Prüfung (18.10.2026): rot, wenn sie keine steuerfreie EU-Rechnung trägt — wie der rote Hinweis bei weclapp unter „Letzte USt-Id Nr.-Prüfung". */ .ustid-schlecht { color: rgb(217, 83, 79); } /* Click-to-Dial (18.10.2026): das Telefonsymbol neben einer Rufnummer, Listenblau wie die Verweise; ausgegraut, wenn nicht angerufen werden kann (Grund im Tooltip). */ .feldmitknopf { display: flex; align-items: center; gap: 6px; width: 100%; } .feldmitknopf > input { flex: 1 1 auto; min-width: 0; } .anrufhuelle { display: inline-flex; align-items: center; gap: 6px; } .anrufknopf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: rgb(87, 112, 156); cursor: pointer; } .anrufknopf:hover:not([disabled]) { background: rgb(242, 246, 246); } .anrufknopf[disabled] { color: rgb(186, 186, 174); cursor: default; } .anrufmeldung { font-size: 12px; color: rgb(99, 99, 99); } .anrufmeldung:empty { display: none; } .anrufmeldung.fehler { color: rgb(217, 83, 79); } /* „Zeige PDF-Vorschau" über dem Blatt, wie dort (18.10.2026). */ .vorschaulink { display: inline-block; margin: 0 0 8px; color: rgb(87, 112, 156); font-size: 13px; text-decoration: none; } .vorschaulink:hover { text-decoration: underline; } /* Anschrift am Beleg bearbeiten (18.10.2026): Stift und Papierkorb neben der Überschrift des Blocks, wie dort; im Dialog zwei Felder in einer Zeile (Vorname/Nachname, PLZ/Stadt). */ .infoblock h3 { display: flex; align-items: center; gap: 4px; } .infoblock h3 > span { margin-right: 4px; } .feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; } .dialogabschnitt { font-size: 16px; font-weight: 500; margin: 10px 0 6px; border-bottom: 1px solid rgb(148, 159, 159); } .dialoghaken { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px 156px; font-size: 13px; } /* API-Token (19.10.2026): verdeckt wie dort, bis „Passwort eingeben" — die Liste verschwommen, darüber der Satz und der Knopf. */ .tokenrahmen { position: relative; margin-top: 8px; } .tokeninhalt.verdeckt { filter: blur(4px); pointer-events: none; user-select: none; } .tokenschleier { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .tokenschleier p { margin: 0; font-size: 14px; } .tokenknoepfe { margin-top: 10px; } .tokenanfang, .tokenklartext { font-family: Consolas, 'Courier New', monospace; } .tokenklartext { width: 100%; } /* Feste Breiten wie in den anderen Einstelllisten; die Bezeichnung nimmt den Rest. */ .tokenliste { table-layout: fixed; width: 100%; } .tokenliste th:nth-child(1), .tokenliste td:nth-child(1) { width: 40px; } .tokenliste th:nth-child(3), .tokenliste td:nth-child(3) { width: 140px; } .tokenliste th:nth-child(4), .tokenliste td:nth-child(4), .tokenliste th:nth-child(5), .tokenliste td:nth-child(5) { width: 190px; } /* E-Mail-Konto (19.10.2026): Name des verbundenen Kontos, darunter der Knopf. */ .emailkonto { display: flex; flex-direction: column; gap: 4px; } .emailkonto p { margin: 0; } .emailkontozeile { display: flex; align-items: center; gap: 6px; } .emailkontoknopf { margin-top: 4px; } /* =========================================================================== Dashboard und Berichtswesen (23.10.2026) In weclapp ist das Dashboard des Eigentuemers leer - die Widgets dort sind nicht vermessen. Sie tragen das Kleid der Abschnitte (18/500, Linie rgb(148,159,159)). Gemessen sind nur die Diagrammfarben im Umsatzcockpit: Vorjahr #1B4942, der festgelegte Zeitraum #12DA9D. =========================================================================== */ /* Dashboard: ein Punkt ohne Unterpunkte - offen sieht er aus wie ein offener Bereich, nur ohne Kasten darunter, also mit Ecke unten rechts. */ #navigation .bereich.ohneunter.offen .hauptpunkt { border-radius: 0 10px 10px 0; } .dashboard, .berichtsseite { padding: 8px 20px 20px; } .widgetraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 20px; } .widget, .cockpitkarte { background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; padding: 12px 16px 16px; min-width: 0; } .widget > h2, .cockpitkarte > h2 { font-size: 18px; font-weight: 500; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgb(148, 159, 159); } .widget > p.leise { margin: 0 0 8px; } .widgetverweis { margin-top: 8px; } table.widgettabelle { width: 100%; border-collapse: collapse; table-layout: fixed; } table.widgettabelle th { text-align: left; font-weight: 700; background: var(--kopf); height: 32px; padding: 4px 6px; } table.widgettabelle td { padding: 4px 6px; height: 33px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.widgettabelle tbody tr:nth-child(even) { background: rgb(248, 250, 250); } table.widgettabelle .zahl, table.berichtstabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; } table.widgettabelle td .verweis { height: auto; min-height: 0; padding: 0; } /* Waagerechte Balken - Verkaufs- und Bestellabwicklung, Angebotsstatus */ .balkenliste { display: flex; flex-direction: column; gap: 4px; } .balkenzeile { display: grid; grid-template-columns: 150px 1fr 48px 130px; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 2px 6px; border: 0; border-radius: 4px; background: none; color: var(--schrift); text-align: left; cursor: pointer; } .balkenzeile:hover { background: rgb(242, 246, 246); } .balkenzeile:focus-visible { outline: 2px solid var(--betont); outline-offset: 1px; } .balkenname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .balkenspur { height: 12px; background: rgb(236, 240, 240); border-radius: 0 4px 4px 0; overflow: hidden; } .balken { display: block; height: 100%; background: #1B4942; border-radius: 0 4px 4px 0; } .balkenzahl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .balkenzusatz { text-align: right; color: var(--leise); font-variant-numeric: tabular-nums; } /* Kennzahlen als Kacheln - Offene Posten, Angebotsauswertung */ .kennkacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .kennraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 12px 0 20px; } .kennkachel { border: 1px solid var(--rand); border-radius: 4px; padding: 10px 12px; background: var(--karte); min-width: 0; } .kennwert { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kenntext { color: var(--leise); font-size: 13px; } .kennkachel.warnung .kennwert { color: var(--warnung); } .kennkachel.leise .kennwert { color: var(--leise); } .kennpaar { display: flex; justify-content: space-between; gap: 10px; } .kennvorjahr { text-align: right; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Diagramme */ .diagramm { position: relative; } .diagrammuntertitel { text-align: center; color: var(--leise); font-size: 12px; margin-bottom: 4px; } .diagrammhalter { position: relative; } .diagrammflaeche svg.dg { display: block; width: 100%; height: auto; } .dg-achse { fill: var(--leise); font-size: 11px; font-family: inherit; } .dg-gitter { stroke: rgb(230, 233, 233); stroke-width: 1; } .dg-null { stroke: rgb(148, 159, 159); stroke-width: 1; } .dg-treffer { fill: transparent; } .dg-treffer:hover { fill: rgba(87, 112, 156, 0.06); } .dg-faden { stroke: rgb(148, 159, 159); stroke-width: 1; stroke-dasharray: 3 3; } .dg-linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dg-punkt { stroke: var(--karte); stroke-width: 2; } .dg-stueck { stroke: var(--karte); stroke-width: 2; } .diagrammtipp { position: absolute; z-index: 5; pointer-events: none; min-width: 160px; background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); padding: 6px 8px; font-size: 12px; } .tipptitel { font-weight: 600; margin-bottom: 4px; } .tippzeile { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; white-space: nowrap; } .tippzeile b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .diagrammlegende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; } .legendeneintrag { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--schrift); font-size: 12px; cursor: pointer; } .legendeneintrag.aus { color: rgb(186, 186, 174); } .legendeneintrag.aus .legendenfarbe { background: rgb(204, 204, 204) !important; } .legendenfarbe { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; } /* Reihenfarben. Vorjahr/Zeitraum wie dort gemessen; die Linienfarben 1-5 aus der geprueften Reihe (validate_palette.js), weil dort fuer fuenf Artikel keine unterscheidbaren Farben stehen. Als fill, stroke und Legendenfarbe zugleich. */ .dg-vorjahr { fill: #1B4942; stroke: #1B4942; background: #1B4942; } .dg-aktuell { fill: #12DA9D; stroke: #12DA9D; background: #12DA9D; } .dg-gs-vorjahr { fill: #6f7e7b; background: #6f7e7b; } .dg-gs-aktuell { fill: #9fd9c6; background: #9fd9c6; } .dg-neu { fill: #1B4942; background: #1B4942; } .dg-bestand { fill: #12DA9D; background: #12DA9D; } .dg-gew-vj { fill: #1B4942; background: #1B4942; } .dg-verl-vj { fill: #57709C; background: #57709C; } .dg-sonst-vj { fill: #A9B4C8; background: #A9B4C8; } .dg-gew { fill: #12DA9D; background: #12DA9D; } .dg-verl { fill: #8FA3C6; background: #8FA3C6; } .dg-sonst { fill: #C9D6EA; background: #C9D6EA; } .dg-s1 { fill: #2a78d6; stroke: #2a78d6; background: #2a78d6; } .dg-s2 { fill: #eb6834; stroke: #eb6834; background: #eb6834; } .dg-s3 { fill: #1baf7a; stroke: #1baf7a; background: #1baf7a; } .dg-s4 { fill: #eda100; stroke: #eda100; background: #eda100; } .dg-s5 { fill: #e87ba4; stroke: #e87ba4; background: #e87ba4; } .dg-rest { fill: #b8c0c0; background: #b8c0c0; } .dg-punkt.dg-s1, .dg-punkt.dg-s2, .dg-punkt.dg-s3, .dg-punkt.dg-s4, .dg-punkt.dg-s5 { stroke: var(--karte); } .dg-linie.dg-s1, .dg-linie.dg-s2, .dg-linie.dg-s3, .dg-linie.dg-s4, .dg-linie.dg-s5 { fill: none; } /* Berichtswahl: Kategorie | Wert | Parameter, wie in „Auswertungen" dort */ .berichtswahl { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(320px, 2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rand); margin-bottom: 16px; } .spaltenkopf { font-size: 13px; margin-bottom: 4px; } ul.berichtsliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); min-height: 120px; background: var(--karte); } ul.berichtsliste button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 2px 6px; color: rgb(87, 112, 156); font-size: 14px; height: auto; } ul.berichtsliste button[aria-selected="true"] { background: rgb(87, 112, 156); color: #fff; } .parameterspalte { display: flex; flex-direction: column; gap: 6px; } .parameterzeile { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; } .parameterzeile input[type=date], .parameterzeile input[type=number], .parameterzeile select { height: 28px; } .radiogruppe { display: flex; flex-direction: column; gap: 2px; } .reihe.rechtsbuendig { justify-content: flex-end; } select.zeitspanne.blau { background: rgb(87, 112, 156); color: #fff; border: 0; border-radius: 3px; height: 28px; width: auto; padding: 0 8px; } select.zeitspanne.blau option { background: #fff; color: var(--schrift); } .berichtsergebnis h2.berichtstitel { font-size: 24px; font-weight: 400; margin: 8px 0 2px; } table.berichtstabelle { table-layout: auto; width: 100%; } table.berichtstabelle tbody tr:nth-child(even) { background: rgb(248, 250, 250); } table.berichtstabelle tr.summenzeile td { font-weight: 700; border-top: 1px solid rgb(148, 159, 159); } table.berichtstabelle td.unsicher { color: var(--band); } table.berichtstabelle td.negativ { color: var(--warnung); } table.bestandstabelle tr.gruppenzeile td { font-weight: 700; background: var(--kopf); } table.bestandstabelle td:first-child { white-space: nowrap; } /* Umsatzcockpit und Angebotsauswertung: Filter oben, Karten zu zweit */ .cockpitfilter { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px 24px; padding: 8px 0 12px; border-bottom: 1px solid var(--rand); margin-bottom: 10px; align-items: center; } .cockpitflaeche { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 20px; padding-top: 12px; } .cockpitflaeche > p.cockpitzeitraum { grid-column: 1 / -1; margin: 0; } .cockpitkarte .reihe.eng { margin-bottom: 6px; align-items: center; } .knopfgruppe { display: inline-flex; } .knopfgruppe button { height: 28px; padding: 0 10px; border: 1px solid var(--rand); background: var(--karte); color: var(--schrift); margin-left: -1px; } .knopfgruppe button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; } .knopfgruppe button:last-child { border-radius: 0 3px 3px 0; } .knopfgruppe button[aria-pressed="true"] { background: rgb(87, 112, 156); border-color: rgb(87, 112, 156); color: #fff; } @media (max-width: 1100px) { .berichtswahl { grid-template-columns: 1fr; } .widgetraster, .cockpitflaeche { grid-template-columns: 1fr; } .balkenzeile { grid-template-columns: 110px 1fr 40px 100px; } } /* Das dunkle Bild: dieselben Reihen, auf dunklem Grund heller gestellt. */ :root[data-thema="dunkel"] .dg-vorjahr, :root[data-thema="dunkel"] .dg-neu, :root[data-thema="dunkel"] .dg-gew-vj, :root[data-thema="dunkel"] .balken { fill: #3f8f84; stroke: #3f8f84; background: #3f8f84; } :root[data-thema="dunkel"] .dg-gitter { stroke: #333842; } :root[data-thema="dunkel"] .balkenspur { background: #262b33; } :root[data-thema="dunkel"] .balkenzeile:hover { background: #262b33; } :root[data-thema="dunkel"] table.widgettabelle tbody tr:nth-child(even), :root[data-thema="dunkel"] table.berichtstabelle tbody tr:nth-child(even) { background: #1a1d22; } :root[data-thema="dunkel"] .dg-s1 { fill: #3987e5; stroke: #3987e5; background: #3987e5; } :root[data-thema="dunkel"] .dg-s2 { fill: #d95926; stroke: #d95926; background: #d95926; } :root[data-thema="dunkel"] .dg-s3 { fill: #199e70; stroke: #199e70; background: #199e70; } :root[data-thema="dunkel"] .dg-s4 { fill: #c98500; stroke: #c98500; background: #c98500; } :root[data-thema="dunkel"] .dg-s5 { fill: #d55181; stroke: #d55181; background: #d55181; } :root[data-thema="dunkel"] .dg-linie { fill: none; } .widgettabelle .verweis, .cockpitkarte .verweis { text-decoration: none; } table.widgettabelle th.breit { width: 32%; } table.widgettabelle th:first-child { width: 125px; } .radiogruppe { display: flex; gap: 16px; flex-wrap: wrap; } .radiogruppe label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .radiogruppe input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; } table.berichtstabelle td:not(.zahl) { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legendentext { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cockpitflaeche > p.cockpitzeitraum + :last-child { grid-column: 1 / -1; } .kennpaar > :first-child { flex: 1 1 auto; min-width: 0; } .kennpaar > .kennvorjahr { flex: none; } .kennkachel.unsicher .kennwert { color: var(--band); } .kennraster .kennwert { white-space: normal; overflow: visible; } table.widgettabelle th.zahl { width: 115px; } table.widgettabelle td.zahl { text-overflow: clip; }