/* ==========================================================================
Breuer App — Dark mode (Feedback #19232)
==========================================================================
"Can the colors be set to 'dark' like on an iPhone?" — the fourth axis of
appearance: light, dark or automatic, per user on the account
(`users.color_mode`, `app/appearance.py` → `MODUS`).
Three decisions carry this file:
1. **This file knows no mode.** It ONLY sets the dark values — WHETHER
they apply is decided by the `media` attribute of its ``, which
the server writes (`appearance.modus_media`):
Light `not all` never
Dark `screen` always
Automatic `screen and (prefers-color-scheme: dark)` follows the device
That way every dark value is defined exactly ONCE here, instead of
once for "Dark" and a second time in an `@media` block for
"Automatic". And it needs no script to query the device setting,
which would make every page briefly flash light before switching.
2. **Printing is always light.** `screen` appears in both media queries —
the invoice comes out of the printer on white paper regardless of what
the screen shows.
3. **VARIABLES wherever possible** — the same construction as accent,
background and glass in `app.css`. Individual rules appear here only
where `app.css` hard-codes white at an edge (light rim, preview
tiles).
Deliberately NOT dark: the signature field (`.arbeitsnachweis__feld`,
proof-of-work/Arbeitsnachweis) — signing happens there in a dark color, so
the image needs to travel onto the document that way —, the documents
themselves (their own pages without `app.css`), the customer's booking
page, the offline page (no account, no mode) and the ground of every QR
code (`--qr-grund`, Feedback #19575) — black modules on a dark card do
not scan.
========================================================================== */
:root {
/* This also turns the BROWSER's own form fields, select lists and
scrollbars dark — without it, a white select list would sit right in
the middle of a dark card. */
color-scheme: dark;
/* Text — measured on the lightest dark surface (sand, hover):
11.3:1 / 7.5:1 / 5.6:1. */
--text: #e6e8ea;
--text-muted: #b9bfc4;
--text-dim: #9ea5ab;
/* Signal colors. Red and green carry BOTH roles in `app.css`: text
directly on the ground (amounts, figures) and surfaces under white
text. The original red as text on dark would land at 2.6:1 —
lightened until it reaches 4.5:1, and no further: white text on top
of it then still holds 3:1, the same floor as for the accent.
Orange as text is already at 5.2:1 and stays as is. */
--signal-red: #e77055;
--signal-green: #37a665;
--signal-blue: #4b8fd6;
/* The same colors as text on their OWN tint (badges): light instead of
dark, measured against the tint over every dark surface, all above
4.8:1. */
--signal-green-text: #7ab793;
--signal-orange-text: #ed9f3d;
--signal-orange-text-tief: #ed9f3d;
--signal-red-text: #dc8e7d;
--signal-blue-text: #8db8e6;
/* The accent's tint reads weaker on dark than on white — hence
stronger here. */
--accent-soft: rgba(var(--accent-rgb), 0.20);
--accent-line: rgba(var(--accent-rgb), 0.45);
--glas-rgb: 32, 37, 42;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* --- Accent as TEXT --------------------------------------------------------
`--accent-dark` carries text on the ground (links, badges). On dark it
must be LIGHTER than the accent, not darker — the name stays, because
about thirty rules in `app.css` read it. Computed per accent: the hue,
lightened with white until it stays above 5:1 on every dark surface.
`--accent` itself stays: it carries white text, and that pairing does not
change because of the dark ground.
-------------------------------------------------------------------------- */
:root,
html[data-akzent="blau"] { --accent-dark: #42b6e2; }
html[data-akzent="petrol"] { --accent-dark: #67aeb7; }
html[data-akzent="marine"] { --accent-dark: #849ec0; }
html[data-akzent="indigo"] { --accent-dark: #979ada; }
html[data-akzent="violett"] { --accent-dark: #a697ec; }
html[data-akzent="beere"] { --accent-dark: #d18cb6; }
html[data-akzent="terra"] { --accent-dark: #e09372; }
html[data-akzent="graphit"] { --accent-dark: #989ea9; }
/* --- Backgrounds ------------------------------------------------------------
Each of the four light grounds has a dark counterpart with the same
character: "hellgrau" (light gray) -> anthracite, "schnee" (snow) ->
near-black (like on an iPhone), "sand" -> mocha, "nebel" (fog) -> night
blue. The preview tile `.ground--` is part of the selector, same as
in `app.css`: in dark mode the picker therefore shows the dark tones —
exactly what it then selects.
⚠️ These blocks come BEFORE the glass block further down — the same tie
in specificity as in `app.css`, the same order.
-------------------------------------------------------------------------- */
html[data-grund="hellgrau"],
.ground--hellgrau {
--bg: #15191c;
--surface: #1e2327;
--surface-hover: #272d32;
--border: #2c3338;
--border-strong: #3d464d;
--paper: #1e2327;
--paper-line: #2c3338;
}
html[data-grund="schnee"],
.ground--schnee {
--bg: #0b0c0d;
--surface: #17191b;
--surface-hover: #212427;
--border: #26292c;
--border-strong: #383c40;
--paper: #17191b;
--paper-line: #26292c;
}
html[data-grund="sand"],
.ground--sand {
--bg: #1b1714;
--surface: #25201b;
--surface-hover: #2f2923;
--border: #352e27;
--border-strong: #4a4036;
--paper: #25201b;
--paper-line: #352e27;
}
html[data-grund="nebel"],
.ground--nebel {
--bg: #121822;
--surface: #1b2330;
--surface-hover: #232d3c;
--border: #283344;
--border-strong: #3a4759;
--paper: #1b2330;
--paper-line: #283344;
}
/* --- Glass ------------------------------------------------------------------
`--glas-rgb` above already tints the surfaces dark. Only the EDGES are
set here: a white light rim at 75 % would be a glaring line on dark
instead of a subtle shimmer.
-------------------------------------------------------------------------- */
html[data-thema="glass"] {
--glanz: inset 0 1px 0 rgba(255, 255, 255, 0.07);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.18);
/* On dark, the light of the gradients reads stronger — toned down,
otherwise the page glows instead of shimmering. */
--flaeche:
radial-gradient(60rem 45rem at 8% -8%, rgba(var(--accent-rgb), 0.20), transparent 62%),
radial-gradient(45rem 40rem at 98% 4%, rgba(232, 133, 10, 0.09), transparent 60%),
radial-gradient(55rem 45rem at 62% 108%, rgba(var(--accent-rgb), 0.12), transparent 62%);
--text-dim: #a3aab0;
--shadow: 0 10px 34px rgba(0, 0, 0, 0.40);
--shadow-card: 0 8px 28px rgba(0, 0, 0, 0.30);
}
html[data-thema="glass"] .sidebar {
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.theme__preview--glass .theme__bar {
border-right-color: rgba(255, 255, 255, 0.08);
}
.theme__preview--glass .theme__card {
border-color: rgba(255, 255, 255, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 4px 14px rgba(0, 0, 0, 0.30);
}
/* The glass fallback (`app.css`) sets the surfaces to OPAQUE — with light
hex values. Because the glass block above comes later, that fallback
would otherwise end up with translucent dark and no blur: text on text.
Opaque here means: the dark surface of the background. */
@media (prefers-reduced-transparency: reduce) {
html[data-thema="glass"] {
--surface: var(--paper);
--surface-hover: var(--paper-line);
--border: var(--paper-line);
--border-strong: rgba(255, 255, 255, 0.18);
--text-dim: #9ea5ab;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
html[data-thema="glass"] {
--surface: var(--paper);
--surface-hover: var(--paper-line);
--border: var(--paper-line);
--border-strong: rgba(255, 255, 255, 0.18);
--text-dim: #9ea5ab;
}
}
/* --- Individual spots -------------------------------------------------------
The veil behind a dialog barely darkens anything further on dark —
made stronger, otherwise the dialog does not stand out from the rest. */
.modal__backdrop,
html[data-thema="glass"] .modal__backdrop {
background: rgba(0, 0, 0, 0.55);
}