/*
* EXQR.DE – Dynamische QR-Code-Verwaltung
* Copyright © 2026 Metrik GmbH. Alle Rechte vorbehalten.
*
* Diese Software „EXQR.DE“ ist geistiges Eigentum der Metrik GmbH.
* Die Nutzung ist ausschließlich dem Unternehmen bzw. der Institution
* gestattet, das/die mit der Metrik GmbH einen entsprechenden Vertrag
* geschlossen hat. Kopieren, Weitergabe, Weiterverkauf oder Überlassung
* an Dritte – ganz oder in Teilen – sind ohne vorherige schriftliche
* Zustimmung der Metrik GmbH untersagt. Siehe LIZENZ.md.
*/
/* =====================================================================
theme.css – Zentrale Gestaltung (Farben & Schriften)
---------------------------------------------------------------------
Diese Datei ist die EINZIGE Stelle für das visuelle Erscheinungsbild:
Schriftarten und alle Farben (Hell- und Dunkel-Modus). Wer das Aussehen
der Anwendung anpassen möchte, ändert nur hier – die Layout-/Komponenten-
Regeln in style.css greifen ausschließlich auf diese Variablen zu.
Einbindung im HTML immer VOR style.css:
Aufbau:
1. Schriftart (Manrope, selbst gehostet – DSGVO-konform)
2. Farb-Tokens Hell-Modus (:root)
3. Farb-Tokens Dunkel-Modus (data-theme="dark" + Systemvorgabe)
===================================================================== */
/* ---------------------------------------------------------------------
1. Schriftart – Manrope, selbst gehostet (keine externen Anfragen)
Zum Wechseln der Schrift: die woff2-Dateien ersetzen ODER unten die
Variable --font-sans auf eine andere (System-)Schrift setzen.
--------------------------------------------------------------------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2');}
/* ---------------------------------------------------------------------
2. Hell-Modus – Standard-Tokens
--------------------------------------------------------------------- */
:root{
/* Schrift-Stacks */
--font-sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* Markenfarbe (EXQR Electric Violet) */
--akzent:#6C5CFF;
--akzent-dunkel:#5647e6;
/* Text */
--text:#0A0A0A; /* Off-Black */
--text-leise:#6b6b76; /* gedämpfter Text (Labels, Hinweise) */
/* Flächen & Linien */
--bg:#f5f5f8; /* Seitenhintergrund */
--karte:#ffffff; /* Karten/Tabellen/Panels */
--flaeche:#fafbfd; /* leicht abgesetzte Fläche (Tabellenkopf, Panels) */
--linie:#e7e7ee; /* Rahmen/Trennlinien */
/* Sekundär-Buttons (hell) */
--btn-hell:#eef0f6;
--btn-hell-h:#e2e5ef;
/* Statusfarben */
--gruen:#0f9d58;
--rot:#d93025;
/* Meldungen: Erfolg / Fehler / Warnung (Fläche + Text + ggf. Linie) */
--ok-bg:#e6f4ea; --ok-text:#0b6b3a;
--fehler-bg:#fdecea; --fehler-text:#a61b0e;
--warnung-bg:#fff4e5; --warnung-text:#8a5300; --warnung-linie:#f5d9a8;
/* Badges (Status & Codetyp) – Flächen; Textfarbe kommt aus obigen Tokens */
--badge-an-bg:#e6f4ea; /* aktiv */
--badge-aus-bg:#fdecea; /* inaktiv */
--badge-dyn-bg:rgba(108,92,255,.14); /* dynamisch */
--badge-stat-bg:#eef0f6; /* statisch */
/* Form & Tiefe */
--radius:12px;
--schatten:0 1px 2px rgba(10,10,10,.05),0 8px 24px rgba(10,10,10,.06);
--acol-schatten:-10px 0 10px -8px rgba(10,10,10,.10); /* Kante der fixierten Aktionsspalten */
}
/* ---------------------------------------------------------------------
3. Dunkel-Modus
Wird zweimal definiert, damit beides funktioniert:
a) explizite Wahl über den Hell/Dunkel-Umschalter -> [data-theme="dark"]
b) Systemvorgabe „dunkel", solange nicht ausdrücklich hell gewählt wurde
Beide Blöcke setzen DIESELBEN Werte – bei Änderungen bitte beide pflegen.
--------------------------------------------------------------------- */
:root[data-theme="dark"]{
--akzent:#7c6dff; --akzent-dunkel:#6C5CFF;
--text:#ffffff; --text-leise:#a1a1ad;
--bg:#0A0A0A; --karte:#141418; --flaeche:#1a1a20; --linie:#26262f;
--btn-hell:#22222b; --btn-hell-h:#2c2c36;
--gruen:#34d399; --rot:#f87171;
--ok-bg:rgba(52,211,153,.14); --ok-text:#8ff0c2;
--fehler-bg:rgba(248,113,113,.14); --fehler-text:#ffb4ab;
--warnung-bg:rgba(245,180,80,.14); --warnung-text:#f3c778; --warnung-linie:rgba(245,180,80,.35);
--badge-an-bg:rgba(52,211,153,.15);
--badge-aus-bg:rgba(248,113,113,.15);
--badge-dyn-bg:rgba(108,92,255,.14);
--badge-stat-bg:#22222b;
--schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
--acol-schatten:-10px 0 10px -8px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--akzent:#7c6dff; --akzent-dunkel:#6C5CFF;
--text:#ffffff; --text-leise:#a1a1ad;
--bg:#0A0A0A; --karte:#141418; --flaeche:#1a1a20; --linie:#26262f;
--btn-hell:#22222b; --btn-hell-h:#2c2c36;
--gruen:#34d399; --rot:#f87171;
--ok-bg:rgba(52,211,153,.14); --ok-text:#8ff0c2;
--fehler-bg:rgba(248,113,113,.14); --fehler-text:#ffb4ab;
--warnung-bg:rgba(245,180,80,.14); --warnung-text:#f3c778; --warnung-linie:rgba(245,180,80,.35);
--badge-an-bg:rgba(52,211,153,.15);
--badge-aus-bg:rgba(248,113,113,.15);
--badge-dyn-bg:rgba(108,92,255,.14);
--badge-stat-bg:#22222b;
--schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
--acol-schatten:-10px 0 10px -8px rgba(0,0,0,.5);
}
}