/* Bausteine der Empfangsassistenz - Regeln und Beispiele: EMPFANG-DESIGN.md,
* lebende Vorschau: /web/design/handbuch.html.
*
* Einbinden (Reihenfolge wichtig):
*
*
*
*
* Harte Regeln (ein Test prueft sie):
* - Hier steht KEINE Farbe als Hex-Wert und kein 'grund-*'-Token - nur Bedeutungen
* wie var(--farbe-aktion). Neue Farbe? Erst in tokens.json, dann hier benutzen.
* - Alle Klassen beginnen mit 'ds-' (Design-System), damit sie nicht mit alten
* Seiten-Klassen kollidieren.
*/
/* ============================================================ Grundlage */
.ds-grundlage, .ds-grundlage body {
margin: 0;
background: var(--farbe-seite);
color: var(--farbe-text);
font-family: var(--schrift-familie);
font-size: var(--schrift-groesse-basis);
line-height: var(--schrift-zeile-text);
}
.ds-grundlage *, .ds-grundlage *::before, .ds-grundlage *::after { box-sizing: border-box; }
.ds-grundlage [hidden] { display: none !important; }
/* Tastatur-Fokus: immer sichtbar, nie wegdesignen. */
.ds-grundlage :focus-visible {
outline: var(--linie-fokus-breite) solid var(--farbe-fokus);
outline-offset: var(--linie-fokus-abstand);
}
.ds-kopfleiste :focus-visible { outline-color: var(--farbe-fokus-auf-dunkel); }
/* Uhrzeiten, Rufnummern, Zahlen: gleich breite Ziffern, damit nichts springt. */
.ds-ziffern { font-variant-numeric: tabular-nums; }
/* ============================================================ Textstufen */
.ds-text-anzeige { font-size: var(--schrift-groesse-anzeige); line-height: var(--schrift-zeile-eng); font-weight: var(--schrift-gewicht-fett); }
.ds-text-titel-1 { font-size: var(--schrift-groesse-titel-1); line-height: var(--schrift-zeile-titel); font-weight: var(--schrift-gewicht-fett); }
.ds-text-titel-2 { font-size: var(--schrift-groesse-titel-2); line-height: var(--schrift-zeile-titel); font-weight: var(--schrift-gewicht-halbfett); }
.ds-text-titel-3 { font-size: var(--schrift-groesse-titel-3); line-height: var(--schrift-zeile-titel); font-weight: var(--schrift-gewicht-fett); }
.ds-text-ueberschrift { font-size: var(--schrift-groesse-gross); line-height: var(--schrift-zeile-titel); font-weight: var(--schrift-gewicht-fett); }
.ds-text-gross { font-size: var(--schrift-groesse-gross); line-height: var(--schrift-zeile-text); }
.ds-text { font-size: var(--schrift-groesse-basis); line-height: var(--schrift-zeile-text); }
.ds-text-klein { font-size: var(--schrift-groesse-klein); line-height: var(--schrift-zeile-text); }
.ds-text-fett { font-size: var(--schrift-groesse-basis); line-height: var(--schrift-zeile-text); font-weight: var(--schrift-gewicht-fett); }
.ds-text-leise { color: var(--farbe-text-leise); }
.ds-etikett {
font-size: var(--schrift-groesse-klein); line-height: var(--schrift-zeile-titel);
font-weight: var(--schrift-gewicht-fett); letter-spacing: var(--schrift-laufweite-etikett);
text-transform: uppercase; color: var(--farbe-text-leise);
}
.ds-zahl {
font-size: var(--schrift-groesse-titel-1); line-height: var(--schrift-zeile-eng);
font-weight: var(--schrift-gewicht-fett); font-variant-numeric: tabular-nums;
}
/* ============================================================ Knopf
* Art: --haupt (blau, genau EINE pro Schritt) · --gut (grün, positiver Abschluss)
* · --gefahr (rot, Sicherheit/Beenden) · --neben (weiß, blauer Rand) · --leise (Textlink)
* Größe: --gross (64 px, Dashboard-Mitte) · Standard (48 px) · --klein (40 px, nur Backoffice)
* Aus: disabled bzw. aria-disabled="true" - Grund immer daneben nennen.
*/
.ds-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
min-height: var(--hoehe-knopf); padding: var(--abstand-2) var(--abstand-5);
border: var(--linie-normal) solid var(--farbe-aktion); border-radius: var(--radius-mittel);
background: var(--farbe-flaeche); color: var(--farbe-aktion-text);
font: inherit; font-size: var(--schrift-groesse-basis); font-weight: var(--schrift-gewicht-halbfett);
line-height: var(--schrift-zeile-titel); text-align: center; text-decoration: none;
cursor: pointer; white-space: pre-line;
transition: background-color var(--bewegung-kurz), border-color var(--bewegung-kurz), color var(--bewegung-kurz);
}
.ds-knopf:hover { background: var(--farbe-aktion-hell); }
.ds-knopf:active { border-color: var(--farbe-aktion-gedrueckt); }
.ds-knopf--haupt { background: var(--farbe-aktion); border-color: var(--farbe-aktion); color: var(--farbe-text-auf-farbe); }
.ds-knopf--haupt:hover { background: var(--farbe-aktion-hover); border-color: var(--farbe-aktion-hover); }
.ds-knopf--haupt:active { background: var(--farbe-aktion-gedrueckt); border-color: var(--farbe-aktion-gedrueckt); }
.ds-knopf--gut { background: var(--farbe-gut); border-color: var(--farbe-gut); color: var(--farbe-text-auf-farbe); }
.ds-knopf--gut:hover, .ds-knopf--gut:active { background: var(--farbe-gut-hover); border-color: var(--farbe-gut-hover); }
.ds-knopf--gefahr { background: var(--farbe-gefahr); border-color: var(--farbe-gefahr); color: var(--farbe-text-auf-farbe); }
.ds-knopf--gefahr:hover, .ds-knopf--gefahr:active { background: var(--farbe-gefahr-hover); border-color: var(--farbe-gefahr-hover); }
.ds-knopf--leise {
background: none; border-color: transparent; color: var(--farbe-text-leise);
text-decoration: underline; padding-inline: var(--abstand-2);
}
.ds-knopf--leise:hover { background: none; color: var(--farbe-text); }
.ds-knopf--gross {
min-height: var(--hoehe-knopf-gross); padding: var(--abstand-3) var(--abstand-6);
font-size: var(--schrift-groesse-gross);
}
.ds-knopf--klein {
min-height: var(--hoehe-knopf-klein); padding: var(--abstand-1) var(--abstand-3);
border-radius: var(--radius-klein); font-size: var(--schrift-groesse-klein);
}
.ds-knopf:disabled, .ds-knopf[aria-disabled="true"] {
background: var(--farbe-aus-flaeche); border-color: var(--farbe-aus-rand); color: var(--farbe-text-aus);
cursor: not-allowed; text-decoration: none;
}
/* Knopfreihe: große Abstände, damit niemand daneben tippt. */
.ds-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-4); align-items: center; }
/* ============================================================ Eingabefeld */
.ds-feld { display: grid; gap: var(--abstand-1); }
.ds-feld__etikett { font-size: var(--schrift-groesse-klein); font-weight: var(--schrift-gewicht-halbfett); color: var(--farbe-text); }
.ds-feld__eingabe {
min-height: var(--hoehe-feld); width: 100%; padding: var(--abstand-2) var(--abstand-3);
border: var(--linie-normal) solid var(--farbe-rand-feld); border-radius: var(--radius-klein);
background: var(--farbe-flaeche); color: var(--farbe-text);
font: inherit; font-size: var(--schrift-groesse-basis);
}
textarea.ds-feld__eingabe { min-height: 96px; resize: vertical; }
.ds-feld__eingabe:focus-visible { border-color: var(--farbe-aktion); }
.ds-feld__eingabe:disabled { background: var(--farbe-aus-flaeche); border-color: var(--farbe-aus-rand); color: var(--farbe-text-aus); }
.ds-feld__hilfe { font-size: var(--schrift-groesse-klein); color: var(--farbe-text-leise); }
.ds-feld--fehler .ds-feld__eingabe { border-color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.ds-feld--fehler .ds-feld__hilfe { color: var(--farbe-gefahr-text); font-weight: var(--schrift-gewicht-halbfett); }
/* ============================================================ Pille (Status-Etikett)
* Immer mit Wort - nie nur ein farbiger Punkt. */
.ds-pille {
display: inline-flex; align-items: center; gap: var(--abstand-1); white-space: nowrap;
padding: 2px var(--abstand-3); border-radius: var(--radius-voll);
background: var(--farbe-flaeche-ruhig); color: var(--farbe-text-leise);
font-size: var(--schrift-groesse-klein); font-weight: var(--schrift-gewicht-halbfett); line-height: var(--schrift-zeile-text);
}
.ds-pille--gut { background: var(--farbe-gut-hell); color: var(--farbe-gut-text); }
.ds-pille--achtung { background: var(--farbe-achtung-hell); color: var(--farbe-achtung-text); }
.ds-pille--gefahr { background: var(--farbe-gefahr-hell); color: var(--farbe-gefahr-text); }
.ds-pille--aktion { background: var(--farbe-aktion-hell); color: var(--farbe-aktion-text); }
.ds-pille--ki { background: var(--farbe-ki-hell); color: var(--farbe-ki); }
/* ============================================================ Zähler
* Offene Arbeit an Reitern und in der Kopfleiste. 0 = gar nicht anzeigen. */
.ds-zaehler {
display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 var(--abstand-2);
border-radius: var(--radius-voll); background: var(--farbe-text); color: var(--farbe-text-auf-farbe);
font-size: var(--schrift-groesse-klein); font-weight: var(--schrift-gewicht-fett); font-variant-numeric: tabular-nums;
}
.ds-zaehler--gefahr { background: var(--farbe-gefahr); }
.ds-zaehler--ki { background: var(--farbe-ki); }
/* ============================================================ Hinweis (Meldung)
* --gefahr ist die AUS/Fehler-Kennzeichnung: roter Grund + 2 px roter Rand + rotes Wort. */
.ds-hinweis {
display: grid; gap: var(--abstand-1); padding: var(--abstand-3) var(--abstand-4);
border-radius: var(--radius-mittel); border-left: 6px solid var(--farbe-aktion);
background: var(--farbe-aktion-hell); color: var(--farbe-text);
}
.ds-hinweis__titel { font-weight: var(--schrift-gewicht-fett); }
.ds-hinweis--gut { border-left-color: var(--farbe-gut); background: var(--farbe-gut-hell); }
.ds-hinweis--gut .ds-hinweis__titel { color: var(--farbe-gut-text); }
.ds-hinweis--achtung { border-left-color: var(--farbe-achtung); background: var(--farbe-achtung-hell); }
.ds-hinweis--achtung .ds-hinweis__titel { color: var(--farbe-achtung-text); }
.ds-hinweis--info .ds-hinweis__titel { color: var(--farbe-aktion-text); }
.ds-hinweis--gefahr {
border: var(--linie-normal) solid var(--farbe-gefahr); border-left-width: 6px;
background: var(--farbe-gefahr-hell);
}
.ds-hinweis--gefahr .ds-hinweis__titel { color: var(--farbe-gefahr-text); }
/* ============================================================ Karte */
.ds-karte {
background: var(--farbe-flaeche); border: var(--linie-duenn) solid var(--farbe-rand);
border-radius: var(--radius-mittel); padding: var(--abstand-4); box-shadow: var(--schatten-karte);
}
.ds-karte--ruhig { background: var(--farbe-flaeche-ruhig); box-shadow: none; }
.ds-karte--dran {
border: var(--linie-stark) solid var(--farbe-aktion); box-shadow: var(--schatten-hervor);
}
.ds-karte--neu { animation: ds-aufleuchten var(--bewegung-hinweis) ease-out; }
.ds-karte__kopf { display: flex; align-items: center; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
/* ============================================================ Jetzt-Kasten
* Das Herz des Dashboards: EIN Satz, was jetzt zu tun ist, darunter die Knöpfe. */
.ds-jetzt {
border: var(--linie-stark) solid var(--farbe-aktion); background: var(--farbe-aktion-hell);
border-radius: var(--radius-gross); padding: var(--abstand-4) var(--abstand-6) var(--abstand-5);
}
.ds-jetzt__ueberschrift {
display: flex; justify-content: space-between; gap: var(--abstand-3); flex-wrap: wrap;
font-size: var(--schrift-groesse-gross); font-weight: var(--schrift-gewicht-fett);
letter-spacing: var(--schrift-laufweite-etikett); text-transform: uppercase; color: var(--farbe-aktion-text);
}
.ds-jetzt__satz {
margin: var(--abstand-2) 0 var(--abstand-4);
font-size: var(--schrift-groesse-titel-2); line-height: var(--schrift-zeile-titel); font-weight: var(--schrift-gewicht-halbfett);
}
.ds-jetzt--gefahr { border-color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.ds-jetzt--gefahr .ds-jetzt__ueberschrift { color: var(--farbe-gefahr-text); }
.ds-jetzt--gut { border-color: var(--farbe-gut); background: var(--farbe-gut-hell); }
.ds-jetzt--gut .ds-jetzt__ueberschrift { color: var(--farbe-gut-text); }
.ds-jetzt--achtung { border-color: var(--farbe-achtung); background: var(--farbe-achtung-hell); }
.ds-jetzt--achtung .ds-jetzt__ueberschrift { color: var(--farbe-achtung-text); }
.ds-jetzt--klingelt { animation: ds-puls var(--bewegung-puls) ease-in-out infinite; }
/* ============================================================ Schritt (1 Wer? · 2 Fahrzeug? · …) */
.ds-schritte { display: flex; flex-wrap: wrap; gap: var(--abstand-2); list-style: none; padding: 0; margin: 0; }
.ds-schritt {
display: inline-flex; align-items: center; gap: var(--abstand-2); padding: 3px var(--abstand-3) 3px 3px;
border-radius: var(--radius-voll); background: var(--farbe-flaeche-ruhig); color: var(--farbe-text-leise);
font-size: var(--schrift-groesse-klein); font-weight: var(--schrift-gewicht-halbfett);
}
.ds-schritt__punkt {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
background: var(--farbe-flaeche); border: var(--linie-normal) solid var(--farbe-aus-rand);
font-weight: var(--schrift-gewicht-fett);
}
.ds-schritt--jetzt { background: var(--farbe-aktion); color: var(--farbe-text-auf-farbe); }
.ds-schritt--jetzt .ds-schritt__punkt { border-color: var(--farbe-flaeche); color: var(--farbe-aktion-text); }
.ds-schritt--fertig { background: var(--farbe-gut-hell); color: var(--farbe-gut-text); }
.ds-schritt--fertig .ds-schritt__punkt { background: var(--farbe-gut); border-color: var(--farbe-gut); color: var(--farbe-text-auf-farbe); }
/* ============================================================ Platz-Status (Kopfleiste)
* --pause ist AUS: kräftig rot mit weißem Rand, damit es auf dem Marineblau auffällt. */
.ds-platz {
display: inline-flex; align-items: center; gap: var(--abstand-2); padding: 5px var(--abstand-4);
border-radius: var(--radius-voll); font-size: var(--schrift-groesse-basis); font-weight: var(--schrift-gewicht-fett);
border: var(--linie-normal) solid transparent;
}
.ds-platz--frei { background: var(--farbe-gut-hell); color: var(--farbe-gut-text); }
.ds-platz--klingelt { background: var(--farbe-aktion); color: var(--farbe-text-auf-farbe); border-color: var(--farbe-kopfleiste-text); animation: ds-puls var(--bewegung-puls) ease-in-out infinite; }
.ds-platz--gespraech { background: var(--farbe-achtung-hell); color: var(--farbe-achtung-text); }
.ds-platz--pause { background: var(--farbe-gefahr); color: var(--farbe-text-auf-farbe); border-color: var(--farbe-kopfleiste-text); }
/* ============================================================ Kopfleiste */
.ds-kopfleiste {
display: flex; align-items: center; gap: var(--abstand-5); flex-wrap: wrap;
padding: var(--abstand-3) var(--abstand-6);
background: var(--farbe-kopfleiste); color: var(--farbe-kopfleiste-text);
border-bottom: 4px solid var(--farbe-marke-gruen);
}
/* Logo: 
* Die Datei ist für dunklen Grund gemacht - nur in der Kopfleiste verwenden. */
.ds-kopfleiste__logo { display: block; height: var(--hoehe-logo); width: auto; flex: none; }
.ds-kopfleiste__marke { font-size: var(--schrift-groesse-gross); font-weight: var(--schrift-gewicht-fett); }
.ds-kopfleiste__leise { color: var(--farbe-kopfleiste-leise); font-size: var(--schrift-groesse-klein); }
.ds-kopfleiste__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--abstand-4); }
/* ============================================================ Bewegung */
@keyframes ds-puls { 50% { box-shadow: 0 0 0 8px var(--farbe-aktion-schein); } }
@keyframes ds-aufleuchten { 0%, 40% { background-color: var(--farbe-neu); } }
/* Wer Bewegung im System abgeschaltet hat, bekommt ruhige Rahmen statt Pulsieren. */
@media (prefers-reduced-motion: reduce) {
.ds-grundlage *, .ds-grundlage *::before, .ds-grundlage *::after {
animation: none !important; transition: none !important;
}
}