/* Gonsoft Labs - Finanz-Dashboard Ruhige Gestaltung, viel Weissraum, Zahlen mit tabellarischen Ziffern. Light und Dark sind eigenstaendig gestaltet, Dark ist kein invertiertes Light. */ :root { /* Akzentfarbe kommt aus den Einstellungen und wird im -Tag gesetzt. */ --akzent: #2a78d6; --akzent-kontrast: #ffffff; --grund: #f6f6f4; --flaeche: #ffffff; --flaeche-2: #f0f0ed; --rand: #dcdcd6; --rand-stark: #bfbfb8; --text: #1c1c1a; --text-leise: #5d5d57; --text-sehr-leise: #85857e; --gut: #0ca30c; --warnung: #fab219; --kritisch: #d03b3b; --gut-flaeche: #e8f6e8; --warnung-flaeche: #fdf3dc; --kritisch-flaeche: #fbe9e9; --schatten: 0 1px 2px rgba(20, 20, 18, 0.06), 0 4px 12px rgba(20, 20, 18, 0.04); --radius: 10px; --radius-klein: 6px; --schrift: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --schrift-zahl: "Segoe UI", system-ui, sans-serif; --spalte: 1280px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grund: #14161a; --flaeche: #1c1f25; --flaeche-2: #23272f; --rand: #333842; --rand-stark: #4a505c; --text: #e8e9ec; --text-leise: #a5a9b3; --text-sehr-leise: #7d828d; --gut: #3ecb5c; --warnung: #f2c14e; --kritisch: #ef6a6a; --gut-flaeche: #16301c; --warnung-flaeche: #33290f; --kritisch-flaeche: #331919; --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { --grund: #14161a; --flaeche: #1c1f25; --flaeche-2: #23272f; --rand: #333842; --rand-stark: #4a505c; --text: #e8e9ec; --text-leise: #a5a9b3; --text-sehr-leise: #7d828d; --gut: #3ecb5c; --warnung: #f2c14e; --kritisch: #ef6a6a; --gut-flaeche: #16301c; --warnung-flaeche: #33290f; --kritisch-flaeche: #331919; --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Ueberschriften tragen die Gliederung - sie muessen sich deutlich vom Fliesstext und von den Zahlen abheben, sonst wirkt alles gleich gewichtet. */ h1, h2, h3, h4 { margin: 0 0 0.5rem; line-height: 1.2; color: var(--text); } h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; } h2 { font-size: 1.22rem; font-weight: 680; letter-spacing: -0.015em; } h3 { font-size: 1rem; font-weight: 650; } p { margin: 0 0 0.75rem; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; } .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sprungmarke { position: absolute; left: -999px; top: 0; background: var(--akzent); color: var(--akzent-kontrast); padding: 0.5rem 1rem; z-index: 100; } .sprungmarke:focus { left: 0; } /* --- Kopfzeile ---------------------------------------------------------- */ .kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 20; } .kopf-innen { max-width: var(--spalte); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1.5rem; min-height: 60px; } .marke { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; } .marke:hover { text-decoration: none; } .marke img { height: 32px; width: auto; display: block; } .navigation { display: flex; gap: 0.15rem; flex: 1; flex-wrap: wrap; } .navigation a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: var(--radius-klein); color: var(--text-leise); font-weight: 500; } .navigation a:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; } .navigation a[aria-current="page"] { background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent); } .zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--warnung); color: #2a2000; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .zaehler[data-leer="1"] { display: none; } /* --- Grundraster -------------------------------------------------------- */ .inhalt { max-width: var(--spalte); margin: 0 auto; padding: 1.75rem 1.5rem 3rem; } .seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .seitenkopf p { color: var(--text-leise); margin: 0.1rem 0 0; font-size: 0.95rem; } /* Farbiger Merker links an jeder Kartenueberschrift - der Blick findet die Abschnitte, ohne dass die Schrift lauter werden muss. */ .karte > h2, .diagramm-kopf h2 { padding-left: 0.7rem; border-left: 3px solid var(--akzent); border-radius: 1px; } .karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--schatten); } .karte + .karte { margin-top: 1rem; } .karte > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; } /* Der Zusatz rechts in der Ueberschrift bleibt zurueckhaltend. */ .karte > h2 .leise, .karte > h2 .sehr-leise { font-weight: 500; font-size: 0.92rem; } .raster { display: grid; gap: 1rem; } .raster-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .raster-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } /* --- KPI-Kacheln -------------------------------------------------------- */ .kpi { display: flex; flex-direction: column; gap: 0.35rem; } .kpi-titel { font-size: 0.75rem; font-weight: 700; color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.07em; } .kpi-wert { font-size: 1.65rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .kpi-zusatz { font-size: 0.85rem; color: var(--text-leise); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .kpi-sparkline { margin-top: 0.35rem; height: 34px; } .marke-status { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-klein); } .marke-status[data-status="gut"] { color: var(--gut); background: var(--gut-flaeche); } .marke-status[data-status="warnung"] { color: #7a5800; background: var(--warnung-flaeche); } :root[data-theme="dark"] .marke-status[data-status="warnung"] { color: var(--warnung); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke-status[data-status="warnung"] { color: var(--warnung); } } .marke-status[data-status="kritisch"] { color: var(--kritisch); background: var(--kritisch-flaeche); } table.liste.aufschluesselung { margin-top: 0.5rem; font-size: 0.85rem; } table.liste.aufschluesselung td { padding: 0.2rem 0; border-bottom: none; color: var(--text-leise); } table.liste.aufschluesselung tbody tr:hover { background: transparent; } /* --- Zeitraumfilter ----------------------------------------------------- */ .zeitraum { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0.4rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); } .zeitraum a, .zeitraum button { padding: 0.35rem 0.7rem; border-radius: var(--radius-klein); border: 1px solid transparent; background: transparent; color: var(--text-leise); font: inherit; font-size: 0.9rem; cursor: pointer; } .zeitraum a:hover, .zeitraum button:hover { background: var(--flaeche-2); text-decoration: none; } .zeitraum a[aria-current="true"] { background: var(--akzent); color: var(--akzent-kontrast); font-weight: 600; } .zeitraum form { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; } /* --- Tabellen ----------------------------------------------------------- */ .tabelle-rahmen { overflow-x: auto; } table.liste { width: 100%; border-collapse: collapse; font-size: 0.9rem; } table.liste th, table.liste td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; } table.liste th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-leise); font-weight: 600; border-bottom: 1px solid var(--rand-stark); white-space: nowrap; } table.liste tbody tr:hover { background: var(--flaeche-2); } table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } table.liste tr.storniert td { text-decoration: line-through; color: var(--text-sehr-leise); } table.liste caption { caption-side: top; text-align: left; padding-bottom: 0.5rem; color: var(--text-leise); } .leer { padding: 2rem 1rem; text-align: center; color: var(--text-leise); } /* --- Marken/Badges ------------------------------------------------------ */ .badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: var(--radius-klein); font-size: 0.75rem; font-weight: 600; border: 1px solid var(--rand-stark); color: var(--text-leise); white-space: nowrap; } .badge[data-art="verarbeitet"] { color: var(--gut); border-color: currentColor; } .badge[data-art="review"] { color: #7a5800; background: var(--warnung-flaeche); border-color: var(--warnung); } :root[data-theme="dark"] .badge[data-art="review"] { color: var(--warnung); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge[data-art="review"] { color: var(--warnung); } } .badge[data-art="fehler"] { color: var(--kritisch); border-color: currentColor; } .badge[data-art="duplikat"], .badge[data-art="ignoriert"] { color: var(--text-sehr-leise); } .badge[data-art="automatisch"] { color: var(--akzent); border-color: currentColor; } /* --- Formulare ---------------------------------------------------------- */ label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-leise); margin-bottom: 0.2rem; } input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], input[type="color"], select, textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--text); font: inherit; font-size: 0.92rem; } input[type="number"], input.zahl { text-align: right; font-variant-numeric: tabular-nums; } input:disabled, select:disabled { background: var(--flaeche-2); color: var(--text-sehr-leise); } .feldpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; } .feld { margin-bottom: 0.85rem; } .feld-hinweis { font-size: 0.8rem; color: var(--text-sehr-leise); margin-top: 0.2rem; } .schalter { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--text); margin-bottom: 0; } .schalter input { width: auto; } button, .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: var(--radius-klein); border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 550; cursor: pointer; } button:hover, .knopf:hover { background: var(--flaeche-2); text-decoration: none; } button.haupt, .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); } button.haupt:hover, .knopf.haupt:hover { filter: brightness(1.08); } button.leise { border-color: transparent; color: var(--text-leise); } button.gefahr { color: var(--kritisch); border-color: var(--kritisch); } button:disabled { opacity: 0.5; cursor: not-allowed; } .knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* Eingabefeld mit direkt anschliessendem Kurzbefehl, z. B. "wie Buchungsdatum" */ .feld-mit-knopf { display: flex; gap: 0.4rem; align-items: center; } .feld-mit-knopf input { flex: 1 1 auto; min-width: 8rem; } .feld-mit-knopf button { flex: 0 0 auto; } button.uebernommen { color: var(--gut); border-color: var(--gut); background: var(--gut-flaeche); } /* --- Hinweise ----------------------------------------------------------- */ .hinweis { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--flaeche-2); font-size: 0.9rem; margin-bottom: 1rem; } .hinweis[data-status="warnung"] { background: var(--warnung-flaeche); border-color: var(--warnung); } .hinweis[data-status="kritisch"] { background: var(--kritisch-flaeche); border-color: var(--kritisch); } .hinweis[data-status="gut"] { background: var(--gut-flaeche); border-color: var(--gut); } .hinweis .zeichen { font-weight: 700; } /* --- Diagramme ---------------------------------------------------------- */ .diagramm-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .diagramm-flaeche { position: relative; height: 280px; } .diagramm-tabelle { display: none; margin-top: 0.75rem; } .diagramm-tabelle[data-sichtbar="1"] { display: block; } .direktbeschriftung { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-leise); } .direktbeschriftung span { display: inline-flex; align-items: center; gap: 0.35rem; } .direktbeschriftung i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* --- Fortschrittsbalken (Umsatzgrenzen) --------------------------------- */ .grenze { margin-bottom: 1rem; } .grenze:last-child { margin-bottom: 0; } .grenze-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; margin-bottom: 0.3rem; } .grenze-wert { font-variant-numeric: tabular-nums; font-weight: 600; } .balken { height: 10px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--rand); overflow: hidden; } .balken > span { display: block; height: 100%; border-radius: 999px; } .balken > span[data-status="gut"] { background: var(--gut); } .balken > span[data-status="warnung"] { background: var(--warnung); } .balken > span[data-status="kritisch"] { background: var(--kritisch); } /* --- Review ------------------------------------------------------------- */ .review-paar { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 420px); gap: 1rem; align-items: start; } @media (max-width: 1000px) { .review-paar { grid-template-columns: 1fr; } } .vorschau { width: 100%; height: 620px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche-2); } .vorschau-ersatz { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: var(--text-leise); } .herleitung { font-size: 0.82rem; color: var(--text-leise); } .herleitung table { width: 100%; border-collapse: collapse; } .herleitung td { padding: 0.15rem 0.3rem; border-bottom: 1px solid var(--rand); } .herleitung td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .rohtext { max-height: 240px; overflow: auto; white-space: pre-wrap; font-family: "Consolas", "Menlo", monospace; font-size: 0.78rem; background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 0.6rem; color: var(--text-leise); } /* --- Fusszeile ---------------------------------------------------------- */ .fuss { max-width: var(--spalte); margin: 0 auto; padding: 1.5rem; border-top: 1px solid var(--rand); color: var(--text-sehr-leise); font-size: 0.82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* --- Kleinigkeiten ------------------------------------------------------ */ .leise { color: var(--text-leise); } .sehr-leise { color: var(--text-sehr-leise); } .zahl-spalte { font-variant-numeric: tabular-nums; text-align: right; } .nowrap { white-space: nowrap; } .abstand-oben { margin-top: 1.25rem; } .htmx-request .laedt { opacity: 0.55; transition: opacity 120ms; } @media print { .kopf, .zeitraum, .knopfreihe { display: none; } .karte { box-shadow: none; border-color: #ccc; } } /* --- Anmeldung ---------------------------------------------------------- */ .anmeldeseite { background: var(--grund); } .anmeldung { max-width: 26rem; margin: 0 auto; padding: 3rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; } .anmeldung-marke { text-align: center; } .anmeldung-marke img { max-height: 64px; max-width: 100%; } .anmeldung-wortmarke { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.01em; } .anmeldung-karte { padding: 1.5rem; } .anmeldung-karte h1 { margin-top: 0; font-size: 1.35rem; } .anmeldung-fuss { text-align: center; font-size: 0.82rem; color: var(--text-sehr-leise); margin: 0; } .formular-schmal { max-width: 26rem; } .formular-schmal small { display: block; margin-top: 0.25rem; line-height: 1.4; } button.breit { width: 100%; margin-top: 0.5rem; } /* --- Handy -------------------------------------------------------------- */ /* Unterwegs wird geschaut, nicht getippt: erst muss alles lesbar sein, ohne seitlich zu schieben. Breite Tabellen werden deshalb zu Karten gestapelt. */ @media (max-width: 680px) { .inhalt, .fuss, .kopf-innen { padding-left: 0.85rem; padding-right: 0.85rem; } .kopf-innen { flex-wrap: wrap; gap: 0.5rem; } .marke img { max-height: 32px; } .navigation { order: 3; /* Eigene Zeile unter Logo und Umschaltern - flex-basis 100% erzwingt den Umbruch; "width" allein reicht dafuer nicht. */ flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .navigation::-webkit-scrollbar { display: none; } .navigation a { white-space: nowrap; } .kopf-innen > .knopfreihe button { padding: 0.35rem 0.6rem; font-size: 0.85rem; } .seitenkopf { flex-direction: column; align-items: stretch; gap: 0.6rem; } .seitenkopf h1 { font-size: 1.4rem; } .knopfreihe { flex-wrap: wrap; } .raster-kpi { grid-template-columns: 1fr 1fr; } .raster-2 { grid-template-columns: 1fr; } .feldpaar { grid-template-columns: 1fr; } .karte { padding: 0.9rem; } /* Tippziele nach den Empfehlungen fuer Beruehrung: mindestens 44 px hoch. */ button, .knopf, select, input[type="date"], input[type="text"], input[type="search"], input[type="password"], input[type="number"] { min-height: 44px; } /* Aus jeder Tabellenzeile wird eine Karte; die Spaltenueberschrift wandert als Beschriftung vor den Wert. Dafuer braucht jede Zelle ein data-spalte. */ table.liste[data-mobil="karten"] thead { display: none; } table.liste[data-mobil="karten"], table.liste[data-mobil="karten"] tbody, table.liste[data-mobil="karten"] tr, table.liste[data-mobil="karten"] td { display: block; width: auto; } table.liste[data-mobil="karten"] tr { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; background: var(--flaeche); } table.liste[data-mobil="karten"] td { border: none; padding: 0.2rem 0; display: flex; justify-content: space-between; gap: 0.75rem; text-align: right; } table.liste[data-mobil="karten"] td::before { content: attr(data-spalte); color: var(--text-leise); font-size: 0.8rem; text-align: left; flex: 0 0 auto; } /* Zellen ohne Beschriftung (Aktionen) fuellen die Breite */ table.liste[data-mobil="karten"] td[data-spalte=""] { justify-content: flex-end; } table.liste[data-mobil="karten"] td.leer { display: block; text-align: center; } table.liste[data-mobil="karten"] td.leer::before { content: none; } }