/* basis.css (T-1.192, E-109): Farben und Farbkleid, Seite, Schrift, Ueberschriften, Links, Knoepfe, Formularfelder, Meldungen, Status, Karte. Wird zuerst geladen; Vorlage fuer alles: /muster. */ /* Vorlaeufiges Stylesheet. Wird in T-1.3 durch Tailwind CSS ersetzt, das ueber die Tailwind-CLI in den Maven-Build eingehaengt wird (E-20). */ /* Farbkleid (E-101, Melissa Sitzung 23). Zwei Schalter stehen am : - data-farbe: das Schema der Firma (standard, mitternacht, aubergine, sand, kontrast) - data-modus: hell oder dunkel, je Benutzer im Browser gemerkt Jede Farbe der Oberflaeche kommt aus diesen Variablen -- feste Farbwerte stehen nur hier. Grundsatz: dunkler Grund = helle Schrift. --auf-akzent ist die Schrift auf farbigen Flaechen, die --ton-* sind die blassen Hinterlegungen fuer Meldungen und Stati. */ :root { --grund: #f5f6f8; --flaeche: #ffffff; --linie: #d9dce2; --text: #1f2430; --gedaempft: #5b6472; --akzent: #2f5bd0; --auf-akzent: #ffffff; --fehler: #b3261e; --erfolg: #1a7f43; --warnung: #8a5a00; --ton-akzent: #eef2fb; --ton-erfolg: #e9f6ee; --ton-fehler: #fdeceb; --ton-warnung: #fff4d6; --kopf-verlauf: linear-gradient(180deg, var(--flaeche), var(--flaeche)); --kopf-text: var(--text); } /* --- Mitternacht: Dunkelblau 001c37 mit Sandbeige fad6a5 --- */ :root[data-farbe="mitternacht"] { --grund: #eef1f5; --akzent: #001c37; --auf-akzent: #fad6a5; --text: #001c37; --gedaempft: #4a5b6d; --linie: #c9d2dc; --ton-akzent: #e3e9f0; --kopf-verlauf: linear-gradient(90deg, #001c37, #123a63); --kopf-text: #fad6a5; } :root[data-farbe="mitternacht"][data-modus="dunkel"] { --grund: #001223; --flaeche: #001c37; --linie: #123a63; --text: #f3e7d5; --gedaempft: #b09a7d; --akzent: #fad6a5; --auf-akzent: #001c37; --ton-akzent: #0d2b4a; --kopf-verlauf: linear-gradient(90deg, #001c37, #2b084e); --kopf-text: #fad6a5; } /* --- Aubergine: Dunkelviolett 2b084e mit Sandbeige fad6a5 --- */ :root[data-farbe="aubergine"] { --grund: #f3eef7; --akzent: #2b084e; --auf-akzent: #fad6a5; --text: #240a3e; --gedaempft: #5d4a71; --linie: #d6cbe0; --ton-akzent: #ebe3f2; --kopf-verlauf: linear-gradient(90deg, #2b084e, #4a1b7a); --kopf-text: #fad6a5; } :root[data-farbe="aubergine"][data-modus="dunkel"] { --grund: #17042a; --flaeche: #2b084e; --linie: #472a66; --text: #f6e9d8; --gedaempft: #b79ec4; --akzent: #fad6a5; --auf-akzent: #2b084e; --ton-akzent: #3d1566; --kopf-verlauf: linear-gradient(90deg, #2b084e, #001c37); --kopf-text: #fad6a5; } /* --- Sand: das helle fad6a5 als Leitfarbe, dunkelblaue Schrift --- */ :root[data-farbe="sand"] { --grund: #fdf4e8; --flaeche: #ffffff; --linie: #e6cfb2; --text: #001c37; --gedaempft: #6b5940; --akzent: #8a5a00; --auf-akzent: #ffffff; --ton-akzent: #fad6a5; --kopf-verlauf: linear-gradient(90deg, #fad6a5, #f3e3cb); --kopf-text: #001c37; } :root[data-farbe="sand"][data-modus="dunkel"] { --grund: #1c1408; --flaeche: #2a2011; --linie: #4b3a1f; --text: #fad6a5; --gedaempft: #c0a781; --akzent: #fad6a5; --auf-akzent: #2a2011; --ton-akzent: #3d2f18; --kopf-verlauf: linear-gradient(90deg, #2a2011, #001c37); --kopf-text: #fad6a5; } /* --- Kontrast: Schwarz und Weiss --- */ :root[data-farbe="kontrast"] { --grund: #ffffff; --flaeche: #ffffff; --linie: #000000; --text: #000000; --gedaempft: #333333; --akzent: #000000; --auf-akzent: #ffffff; --ton-akzent: #ededed; --ton-erfolg: #ededed; --ton-fehler: #ededed; --ton-warnung: #ededed; --kopf-verlauf: linear-gradient(180deg, #ffffff, #ffffff); --kopf-text: #000000; } :root[data-farbe="kontrast"][data-modus="dunkel"] { --grund: #000000; --flaeche: #000000; --linie: #ffffff; --text: #ffffff; --gedaempft: #cccccc; --akzent: #ffffff; --auf-akzent: #000000; --ton-akzent: #1c1c1c; --ton-erfolg: #1c1c1c; --ton-fehler: #1c1c1c; --ton-warnung: #1c1c1c; --kopf-verlauf: linear-gradient(180deg, #000000, #000000); --kopf-text: #ffffff; } /* --- Standard in dunkel --- */ :root[data-farbe="standard"][data-modus="dunkel"] { --grund: #14171d; --flaeche: #1f2430; --linie: #39404f; --text: #eef1f6; --gedaempft: #a7b0be; --akzent: #8fb0ff; --auf-akzent: #14171d; --ton-akzent: #27304a; --ton-erfolg: #1b3a29; --ton-fehler: #45211f; --ton-warnung: #43351a; --warnung: #f0c674; --kopf-verlauf: linear-gradient(90deg, #1f2430, #27304a); --kopf-text: #eef1f6; } /* Im dunklen Bild sind die blassen Toene dunkel -- die Schrift darauf muss hell bleiben */ :root[data-modus="dunkel"] .status-KLAERUNG, :root[data-modus="dunkel"] .marke { color: var(--warnung); } :root[data-modus="dunkel"] img, :root[data-modus="dunkel"] iframe { background: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 "Segoe UI", system-ui, sans-serif; } body.mittig { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .kopf { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); } .marke { font-weight: 600; } .rechts { display: flex; align-items: center; gap: 1rem; color: var(--gedaempft); } .inline { display: inline; margin: 0; } .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 2rem; margin: 2rem auto; max-width: 46rem; } .karte.schmal { max-width: 22rem; margin: 0; } h1 { margin: 0 0 0.5rem; font-size: 1.4rem; } .hinweis { color: var(--gedaempft); margin-top: 0; } label { display: block; margin-top: 1rem; font-size: 0.9rem; color: var(--gedaempft); } input { width: 100%; padding: 0.55rem 0.7rem; margin-top: 0.25rem; border: 1px solid var(--linie); border-radius: 6px; font-size: 1rem; } input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; } button { margin-top: 1.5rem; padding: 0.6rem 1.1rem; border: 0; border-radius: 6px; background: var(--akzent); color: var(--auf-akzent); font-size: 1rem; cursor: pointer; } button.schlicht { margin: 0; padding: 0.3rem 0.6rem; background: none; color: var(--akzent); font-size: 0.9rem; } .meldung { padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem; } .meldung.fehler { background: var(--ton-fehler); color: var(--fehler); } .meldung.erfolg { background: var(--ton-erfolg); color: var(--erfolg); } /* Vorschlag aus dem Stamm (T-1.79): hervorgehoben, mit Uebernehmen/Ablehnen in einer Zeile. */ .meldung.vorschlag { background: var(--ton-akzent); color: var(--akzent); display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; margin-bottom: 0.6rem; } .meldung.vorschlag form { display: inline; margin: 0; } .gedaempft { color: var(--gedaempft); } h2 { margin: 0 0 0.5rem; font-size: 1.15rem; } h3 { margin: 1.5rem 0 0; font-size: 1rem; color: var(--gedaempft); } details { margin-top: 1.5rem; } summary { cursor: pointer; color: var(--akzent); font-size: 0.9rem; } .marke a { color: inherit; text-decoration: none; } /* Formulare der Verwaltung (T-1.6) */ label { display: block; margin-top: 0.9rem; font-size: 0.9rem; color: var(--gedaempft); } label.wahl { display: flex; align-items: center; gap: 0.4rem; } label input[type="text"], label select { margin-top: 0.25rem; } label.wahl input { margin: 0; } select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); font: inherit; } label.wahl input[type="checkbox"], label.wahl input[type="radio"] { width: auto; } /* Umsatzsteuer im Firmenformular (E-98): Katalog der Befreiungen mit Klapptext, Massstab in einer Zeile */ fieldset.umsatzsteuer { border: 1px solid var(--linie); border-radius: 6px; padding: 0.6rem 0.9rem 0.9rem; margin-top: 1.2rem; } fieldset.umsatzsteuer legend { font-size: 0.9rem; color: var(--gedaempft); padding: 0 0.3rem; } fieldset.umsatzsteuer > p.gedaempft { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; } details.befreiungsgruppe { margin: 0.5rem 0 0; border: 1px solid var(--linie); border-radius: 6px; padding: 0.3rem 0.7rem; } details.befreiungsgruppe > summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; padding: 0.2rem 0; } details.befreiungsgruppe > summary small, details.befreiungsgruppe > summary .angehakt { font-weight: 400; margin-left: 0.3rem; font-size: 0.8rem; } details.befreiungsgruppe input.befreiungssuche { width: 100%; max-width: 22rem; margin: 0.3rem 0 0.2rem; padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--linie); border-radius: 6px; } /* Belegliste als Hauptseite (T-1.24, E-66) */ .kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .kopfzeile h1 { margin: 0; } a.knopf { padding: 0.5rem 1rem; border-radius: 6px; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font-size: 0.95rem; white-space: nowrap; } .status { padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.8rem; background: var(--grund); } .status-VORBEREITET { background: var(--ton-akzent); color: var(--akzent); } .status-EXTRAHIERT, .status-FREIGEGEBEN, .status-IMPORTIERT, .status-GEBUCHT { background: var(--ton-erfolg); color: var(--erfolg); } .status-KLAERUNG { background: var(--ton-warnung); color: var(--warnung); } .status-FEHLER, .status-DUBLETTE { background: var(--ton-fehler); color: var(--fehler); } .zurueck { margin: 0 0 0.75rem; font-size: 0.9rem; } button.zweitrangig { background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent); } /* Datumsfelder in derselben Schrift wie der Rest -- der Browser nimmt sonst seine eigene. Lieferant ueber die ganze Breite. */ input, select, textarea, button { font-family: inherit; } input[type="date"], input[type="number"], input[type="email"], input[type="url"], input[type="search"] { font-family: inherit; font-size: 0.92rem; } button.gefaehrlich { color: var(--fehler); border-color: var(--fehler); } /* Kopfleiste flach: nur Kunde / Firma links, Benutzer und Abmelden rechts (Sitzung 12) */ .kopf { padding: 0.35rem 1.25rem; } .kopf .ort { font-size: 0.95rem; font-weight: 600; } .kopf .ort a { color: inherit; text-decoration: none; } .kopf .ort a:hover { color: var(--akzent); } .kopf .rechts { font-size: 0.9rem; gap: 0.75rem; } a.kachel { text-decoration: none; } a.knopf.zweitrangig { background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent); margin-right: 0.5rem; } /* ---- Konten und Gliederung: Reiter Gliederung (T-1.62) ---- */ .reiter-seite { display: flex; gap: 0.25rem; margin: 0.75rem 0 1rem; border-bottom: 1px solid var(--linie); } .reiter-seite a, .reiter-seite span { padding: 0.4rem 0.9rem; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; text-decoration: none; color: inherit; } .reiter-seite .aktiv { border-color: var(--linie); background: var(--flaeche); font-weight: 600; margin-bottom: -1px; } .meldung.inline { display: inline; padding: 0.1rem 0.5rem; margin: 0; } button.textlink { margin: 0 0 0 0.4rem; padding: 0; border: 0; background: none; color: var(--akzent); text-decoration: underline; font: inherit; font-size: 0.78rem; cursor: pointer; } button.zweitrangig.klein { margin: 0 0 0.4rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; } details.lieferant-akkordeon { margin: 0 0 0.5rem; border: 1px solid var(--linie); border-radius: 6px; padding: 0.3rem 0.6rem; background: var(--grund); } details.lieferant-akkordeon summary { cursor: pointer; color: var(--akzent); font-size: 0.88rem; } details.lieferant-akkordeon .knoepfe { margin: 0.4rem 0; } details.lieferant-akkordeon .knoepfe button { padding: 0.35rem 0.8rem; font-size: 0.9rem; } details.lieferant-akkordeon form.umhaengen { margin-top: 0.5rem; } /* Lieferant: alle Knoepfe in einer Reihe, Zuordnen kompakt in einer Zeile */ details.lieferant-akkordeon .knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; } details.lieferant-akkordeon .knoepfe button { margin: 0; } details.lieferant-akkordeon form.umhaengen { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.2rem; } details.lieferant-akkordeon form.umhaengen label { margin: 0; flex: 0 0 auto; font-size: 0.85rem; } details.lieferant-akkordeon form.umhaengen select { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0.15rem 0.4rem; font-size: 0.85rem; } details.lieferant-akkordeon form.umhaengen button { margin: 0; padding: 0.15rem 0.6rem; font-size: 0.82rem; } input.kontonummer.fehlt { border-color: var(--fehler); color: var(--fehler); } /* Benachrichtigungen (E-94): Glocke rechts oben mit rotem Punkt, die Liste dahinter */ /* ungelesene Benachrichtigungen: roter Punkt am Benutzer-Knopf (T-1.211, vorher an der Glocke) */ .kopf .benutzer-knopf { position: relative; } .kopf .benutzer-knopf .punkt { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--fehler); border: 1.5px solid var(--flaeche); } a.knopf-klein { padding: 0.3rem 0.7rem; border: 1px solid var(--akzent); border-radius: 6px; color: var(--akzent); text-decoration: none; font-size: 0.85rem; white-space: nowrap; } /* Belegfilter als Klappfeld mit kleinen Feldern (Sitzung 20); "nicht" steht in der Kopfzeile des Felds */ details.filter-klapp { margin: 0.75rem 0 0; } details.filter-klapp > summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); font-size: 0.9rem; color: var(--text); list-style: none; } details.filter-klapp > summary::before { content: "\25B8"; color: var(--gedaempft); } details.filter-klapp[open] > summary::before { content: "\25BE"; } details.filter-klapp > summary::-webkit-details-marker { display: none; } .reiter-seite .export-knoepfe { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0; } /* T-1.169: Betragsfelder sind Textfelder (deutsche Schreibweise 2.577,50) -- rechtsbuendig wie Zahlen */ input[inputmode="decimal"] { text-align: right; } /* Kopfleiste im Farbkleid (E-101, nachgebessert Sitzung 23): die Schrift der Leiste kommt aus --kopf-text und passt damit zum Verlauf -- vorher nahm sie --auf-akzent und wurde im dunklen Standardbild schwarz auf schwarz. Alles in der Leiste erbt diese Farbe. */ .kopf { background: var(--kopf-verlauf); color: var(--kopf-text); border-bottom-color: var(--linie); } .kopf a, .kopf .ort, .kopf .ort a, .kopf .rechts, .kopf button.schlicht, .kopf span { color: inherit; } .kopf .ort a:hover, .kopf a:hover { color: inherit; text-decoration: underline; } :root[data-farbe="mitternacht"] .kopf, :root[data-farbe="aubergine"] .kopf, :root[data-modus="dunkel"] .kopf { border-bottom-color: transparent; } /* Links tragen die Akzentfarbe (Melissa, Sitzung 23): ohne Angabe nahm der Browser sein Blau und für besuchte Links sein Lila -- im dunklen Bild unlesbar. */ a:not([class]), a:not([class]):visited { color: var(--akzent); } /* Knoepfe und andere Links mit eigener Farbe behalten sie auch, wenn sie besucht sind */ a.knopf, a.knopf:visited { color: var(--auf-akzent); } /* umrandete Link-Knoepfe behalten die Akzentfarbe auch besucht (Sitzung 24: "Einstellungen"/"Export" waren weiss auf weiss) */ a.knopf.zweitrangig, a.knopf.zweitrangig:visited { color: var(--akzent); } /* der kleine Knopf ist nur umrandet: seine Schrift traegt die Akzentfarbe, nicht die Schrift auf Akzent */ a.knopf-klein, a.knopf-klein:visited { color: var(--akzent); } a.kachel, a.kachel:visited { color: inherit; } /* Nur eine Befreiung (T-1.148): eine Suche über allen Gruppen, "Keine Befreiung" davor */ input.befreiungssuche#befreiungssuche { width: 100%; max-width: 28rem; margin: 0.4rem 0 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.9rem; border: 1px solid var(--linie); border-radius: 6px; } /* Dunkelmodus, zweite Nachbesserung (Melissa, Sitzung 23): Eingabefelder hatten nie eigene Farben -- im hellen Bild fiel das nicht auf, im dunklen blieben sie weiß mit schwarzer Schrift. Jetzt tragen Feld, Auswahl und Textfeld die Flächenfarbe der Palette; Erfolg und Fehler werden im dunklen Bild heller, sonst stünde grün auf grün (das Häkchen am Lieferanten). */ input, select, textarea { background: var(--flaeche); color: var(--text); border-color: var(--linie); } input::placeholder, textarea::placeholder { color: var(--gedaempft); opacity: 0.8; } input:disabled, select:disabled, textarea:disabled { background: var(--grund); color: var(--gedaempft); } select option { background: var(--flaeche); color: var(--text); } :root[data-modus="dunkel"] { color-scheme: dark; } :root[data-modus="dunkel"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } :root[data-modus="dunkel"] { --erfolg: #6ddba0; --fehler: #ff9a94; } /* Textfelder in Formularen standen neben ihrer Beschriftung (Melissa, Sitzung 23) -- sie hatten nie eine Breitenregel. Jetzt wie die übrigen Felder: eigene Zeile, volle Breite. */ label > textarea { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--linie); border-radius: 6px; font: inherit; font-size: 0.92rem; box-sizing: border-box; resize: vertical; } label > small { display: block; margin-top: 0.2rem; } /* Knopfreihe (T-1.192): Knoepfe und Links als Knoepfe nebeneinander, ohne eigene Abstaende */ .knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; } .knopfreihe > button, .knopfreihe > a { margin: 0; } /* Gesperrte Knoepfe sehen gesperrt aus (T-1.192, Musterseite; Barrierefreiheit T-1.190) -- vorher nur in der Auswahlleiste der Belegliste */ button:disabled, button:disabled:hover { opacity: 0.5; cursor: not-allowed; } /* Hilfe-Symbol (Melissa, Sitzung 24; hilfe.js): Erklaerungen stehen hinter einem kleinen runden "?" -- dunkelgrau mit weissem Zeichen, im Dunkelmodus beige mit schwarzem. Ueberfahren, Fokus oder Klick zeigt den Text in einem grauen Kaestchen mit 2px runden Ecken. */ button.hilfe { display: inline-flex; align-items: center; justify-content: center; width: 0.9rem; height: 0.9rem; min-width: 0.9rem; margin: 0 0 0 0.3rem; padding: 0; border: 0; border-radius: 50%; background: #7a818c; color: #ffffff; font: 800 0.82rem/0.9rem "Segoe UI", system-ui, sans-serif; vertical-align: middle; cursor: help; } button.hilfe:hover { background: #5f6672; } button.hilfe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } button.hilfe.hilfe-ecke { position: absolute; top: 0.4rem; right: 0.4rem; margin: 0; z-index: 2; } .hilfe-text { display: none; position: fixed; z-index: 1000; max-width: 26rem; margin: 0; padding: 0.5rem 0.7rem; background: #e8eaee; color: #1f2430; border: 1px solid #c8ccd3; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 0.85rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; } .hilfe-text.offen { display: block; } .hilfe-text a { color: #1f4fbf; } :root[data-modus="dunkel"] button.hilfe { background: #fad6a5; color: #000000; } :root[data-modus="dunkel"] button.hilfe:hover { background: #ffe6c2; } :root[data-modus="dunkel"] .hilfe-text { background: #e8eaee; color: #000000; border-color: #b9bec7; } :has(> button.hilfe-ecke) { position: relative; } /* nur für Vorleseprogramme sichtbar (Barrierefreiheit, T-1.190) */ .nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }