/* Shared by index.html and hilfe.html - one palette, one dark mode. */
/* Light is the base; the dark block below redefines only these tokens.
Every colour on the page comes from here - a literal in a rule would keep
one theme's value in the other, which is how a page ends up with dark text
on a dark ground.
The hero keeps its dark blue gradient in both themes. It is the brand, it
already reads as "dark", and inverting it would cost the page its one
recognisable surface for no gain - so --on-brand and --hero-sub stay put. */
:root {
/* Tells the browser both themes exist, so scrollbars and any default UI
follow rather than staying light on a dark page. */
color-scheme: light dark;
--brand: #1d2b45;
--brand-2: #2e4570;
--accent: #3b6ff0;
--bg: #f5f7fb;
--panel: #ffffff;
--panel-2: #f5f7fb; /* cards inside a panel section */
--ink: #1c2430;
--muted: #5a6572;
--border: #dfe5ee;
--good: #2e8b57;
--part: #d9a63e;
--open: #c65b5b;
--on-brand: #ffffff;
--hero-sub: #d7e0f2;
--btn-primary-hover: #e8eefc;
--hero-line: rgba(255,255,255,.55);
--shadow: 0 1px 3px rgba(20,30,50,.06);
}
/* Follows the browser's system setting, which is the whole request: no
toggle, no stored preference. The accent is lifted and the ground kept off
pure black - a #000 page with #fff text is the harshest possible pairing,
and the panels need somewhere above the background to sit. */
@media (prefers-color-scheme: dark) {
:root {
--accent: #7aa2ff;
--bg: #10141b;
--panel: #171d27;
--panel-2: #10141b;
--ink: #e6e9ef;
--muted: #9aa4b2;
--border: #2a3341;
--good: #4cae7a;
--open: #e07777; /* --part carries over: amber reads on both grounds */
--shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* The screenshots are captures of a light interface and glare against a
dark card, so they are dimmed - brightness rather than opacity, which
would let the dark ground bleed through and mute the colours instead of
just lowering them. The slight contrast bump keeps the small type in the
captures legible after the dimming.
Full brightness on hover and on keyboard focus: every screenshot is a
link to its full-size version, so anyone actually looking at one sees the
product's real colours rather than a version this page darkened. */
.shot img {
background: #fff;
filter: brightness(.82) contrast(1.04);
transition: filter .2s ease;
}
.shot:hover img,
.shot a:focus-visible img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.shot img { transition: none; }
}
* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
/* The language switch used to hide one language with CSS on a single URL.
Each language has its own page now (build.py), so there is nothing left to
hide - and nothing left for a crawler to read in the wrong language. */
/* The hero shows the product behind its own promise: a blurred dashboard
under the brand gradient, rather than a flat block of colour. Three layers,
bottom to top - the gradient as the ground (and the fallback if the image
never loads), the blurred screenshot, then a scrim of the same gradient
that carries the contrast for the white text. The scrim is what makes this
safe: the readability does not depend on which part of the screenshot
happens to sit behind a given line. */
header.hero {
background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 100%);
color: var(--on-brand); padding: 3.2rem 0 4rem;
position: relative; isolation: isolate; overflow: hidden;
}
header.hero::before {
content: ""; position: absolute; inset: 0; z-index: -2;
background: url("img/dashboard.png") center top / cover no-repeat;
/* Scaled up so the blur's soft edges fall outside the box instead of
showing as a pale border. */
filter: blur(13px); transform: scale(1.08); opacity: .85;
}
header.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
/* Directional on purpose: nearly opaque on the left, where the headline and
the paragraph sit and the contrast has to hold, thinning towards the right
where nothing is written and the screenshot may actually show. The
vertical pass keeps the buttons off the brightest part of the image. */
background:
linear-gradient(180deg, rgba(29, 43, 69, .35) 0%, rgba(29, 43, 69, .75) 100%),
linear-gradient(95deg, rgba(29, 43, 69, .96) 0%, rgba(29, 43, 69, .9) 42%,
rgba(46, 69, 112, .58) 100%);
}
/* The directional scrim assumes the wide layout, where the text sits on the
left and the thin right-hand side is empty. Narrow, the text runs the full
width and reaches into that thin part. Measured against the background with
the text hidden, that costs the paragraph colour 6.67:1 -> 5.95:1: still
past AA either way, so this is not a fix for a failure - it buys back the
margin, and the screenshot stays visible as texture underneath. */
@media (max-width: 760px) {
header.hero::before { opacity: .5; }
header.hero::after {
background: linear-gradient(160deg, rgba(29, 43, 69, .94) 0%,
rgba(46, 69, 112, .92) 100%);
}
}
.hero .wrap { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.topline { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.logo { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; }
.logo img { width: 34px; height: 34px; border-radius: 7px; display: block; }
/* A link between two URLs now, not a button toggling a class - so it also
needs the anchor resets a