/* =========================================================
HATOX – Design Tokens
Wird von JEDER Seite eingebunden (index.php + configurator.php, jeweils
im per ), noch VOR
login.css bzw. configurator.css. Enthält keine Element-Styles für
bestimmte Bauteile, sondern nur globale Variablen + absolute Basics
(Reset, Schrift-Grundeinstellung). Farben hier zentral anpassen, wirkt
sich automatisch auf ALLE Seiten aus, die var(--color-...) verwenden.
========================================================= */
/* CSS-Variablen (Custom Properties), global auf gültig - werden in
login.css und configurator.css überall per var(--name) referenziert statt
fester Hex-Werte im Code zu verstreuen. */
:root {
/* Marken-/Primärfarbe: aus dem HATOX-Logo per Pixel-Sampling ermittelt.
Genutzt für: Buttons (.btn-primary in login.css), Links, Signal-Ringe
(.ring in login.css), Überschriften-Akzente (.component-group-title,
.total in configurator.css). */
--color-primary: #1d4e9e;
--color-primary-dark: #123a73; /* Hover-Zustand von .btn-primary/.btn-ghost, Verlaufsende von .brand-panel */
--color-primary-darker: #0b2650; /* dunkelstes Verlaufsende von .brand-panel (login.css) */
--color-accent: #4a7fd1; /* Fokus-Rahmen an Inputs/Selects (:focus-visible weiter unten, .field input:focus) */
--color-accent-light: #a9c3ec; /* aktuell ungenutzt, für künftige helle Akzente reserviert */
/* Neutrale Flächen-/Textfarben, genutzt in beiden Stylesheets für
Hintergründe (.page, .configurator-card), Rahmen (.field select) und
Fließtext (.hint, .form-subtitle). */
--color-bg: #f5f8fd;
--color-surface: #ffffff;
--color-text: #10182b;
--color-text-muted: #5b6b8c;
--color-border: #dde5f3;
--color-error: #d1483f; /* Fehlermeldung beim Login, .form-error in login.css */
/* Schriftarten: über Google-Fonts- in von index.php /
configurator.php geladen, hier nur als Variable verfügbar gemacht. */
--font-display: "Space Grotesk", "Segoe UI", sans-serif; /* Überschriften h1/h2/h3 (siehe unten) */
--font-body: "Inter", "Segoe UI", sans-serif; /* Fließtext/Formulare, body-Regel weiter unten */
/* Eckenradien, genutzt an Karten/Buttons/Inputs in beiden Stylesheets. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
/* Schatten für Karten (.configurator-card, .form-card-Umgebung) und Buttons. */
--shadow-md: 0 12px 32px rgba(18, 58, 115, 0.14);
--shadow-sm: 0 4px 12px rgba(18, 58, 115, 0.08);
}
/* Globaler Box-Model-Reset: padding/border zählen in width/height mit rein,
sonst müsste jede feste Breite (z.B. .configurator-card) das Padding von
Hand abziehen. Gilt für jedes Element auf jeder Seite. */
* {
box-sizing: border-box;
}
/* Browser-Standardabstand von / entfernen, volle Höhe nutzbar
machen (wichtig für .login-page/.page, die auf 100vh/calc(100vh...)
aufbauen). */
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Basis-Schrift/-Farbe/-Hintergrund für den gesamten - einzelne
Elemente überschreiben das gezielt über var(--font-display) o.ä. */
body {
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
/* Alle Überschriften (egal auf welcher Seite) bekommen automatisch die
Display-Schrift und keinen Browser-Default-Außenabstand - einzelne
Klassen wie .form-title/.configurator-card h1 setzen nur noch
Größe/Farbe obendrauf. */
h1,
h2,
h3 {
font-family: var(--font-display);
margin: 0;
}
a {
color: inherit;
}
button {
font-family: var(--font-body);
}
/* Sichtbarer Fokus-Rahmen für Tastatur-Navigation (Tab-Taste) - gilt für
alle fokussierbaren Elemente auf jeder Seite, ergänzt die individuellen
:focus-Styles von Inputs/Selects. */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Barrierefreiheit: wer in den Betriebssystem-Einstellungen "Bewegung
reduzieren" aktiviert hat, bekommt die Ring-Puls-Animation
(.ring/@keyframes pulse in login.css) praktisch ausgeschaltet statt
erzwungen zu sehen. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}