/* ==========================================================================
Online Ticketing HausNotruf – Remastered 2026
Design-System (CSS Custom Properties)
--------------------------------------------------------------------------
WICHTIG: Alle bestehenden Klassennamen unterhalb bleiben unveraendert
erhalten (keine Umbenennung, keine Entfernung) - nur Eigenschaftswerte
(Farbe/Schrift/Abstand) wurden modernisiert. Keine HTML-Struktur, keine
IDs, keine name-Attribute werden durch dieses Stylesheet beeinflusst.
========================================================================== */
:root {
/* Corporate-Farbwelt, wiedererkennbar (bestehende Markenfarben) */
--color-primary: #2F4592; /* Dunkelblau - bestehende LinkText-/Nav-Farbe */
--color-primary-dark: #22346E;
--color-secondary: #AC163C; /* Dunkelrot/Bordeaux - bestehende UeberschriftMittel-/Footer-Farbe */
--color-accent: #2F4592;
--color-success: #1E7B34; /* neu: fuer Online-/Erfolgsstatus */
--color-warning: #B8860B; /* neu: kontrolliertes Gelb/Amber fuer Hinweise */
--color-warning-subtle: #FFF6DC;
--color-danger: #C0272D; /* neu: kontrolliertes Rot fuer kritische Aktionen */
--color-danger-strong: #E30613; /* bestehendes kraeftiges Eskalations-Rot */
--color-danger-subtle: #FDECEC; /* Kartenoptimierung Runde 3: dezenter hellroter Hintergrund
fuer Kontakthinweis-Kennzeichnung, analog --color-warning-subtle */
--color-park: #1565C0; /* neu (Phase D.4): "Blau = Parken"-Semantik, ersetzt frueheres Gelb */
--color-park-subtle: #E3F0FC;
--color-priority: #FFCC00; /* Kartenoptimierung: benannt statt hartcodiert - bestehende
"Hohe Dringlichkeit"-Farbe (unveraendert, nur als Token
gefasst), siehe Punkt 2/10 des Auftrags. */
--color-priority-text: #7A5B00; /* bestehende, bereits verwendete dunkle Textfarbe auf Gelb */
--color-info-subtle: #E8EEFB; /* neu (Phase E, Schritt 3): neutraler Info-Hinweis (z. B.
"weitere aktive Tickets zum Kontakt") - bewusst NICHT
--color-park/-park-subtle wiederverwendet, da das eine
andere, bereits belegte Bedeutung ("Geparkt") traegt; auch
NICHT --color-priority (Auftrag Punkt 18: Info ungleich
Prioritaet). Farbton an --color-primary angelehnt. */
--color-personal: #6E4A9E; /* neu (Auftrag "Persönliche Notizen", 21.09.2026): eigener
Violett-Ton fuer "privat/persoenlich" - bewusst NICHT Rot/
Gelb (laesst sonst wie eine Warnung/Fehlermeldung wirken,
siehe Auftrag Punkt 4: "nicht wie eine Warn- oder
Fehlermeldung aussehen") und bislang semantisch unbelegt. */
--color-personal-subtle: #F1ECFB;
--color-personal-dark: #4E3470; /* Textfarbe auf --color-personal-subtle, Kontrast >6:1 */
/* Container-Kopfleisten (20.08.2026, "Ticket-Detailansicht optisch
vereinheitlichen"): dunkle Variante je Farbfamilie, urspruenglich fuer
den vollflaechigen Titelbereich gedacht (seit 21.08.2026 nur noch als
Textfarbe/--panel-title genutzt, siehe .tc-detail-value--.../
.tc-detail-notes). Werte bewusst NICHT rein mathematisch abgedunkelt,
sondern einzeln so gewaehlt, dass Text/Icons zuverlaessig gut lesbar
bleiben (Kontrastverhaeltnis jeweils > 6:1) und der Eindruck ruhig/
professionell bleibt, nicht grell (Auftrag Punkt 5). --color-primary-
dark (Blau, Termin) existierte bereits und wird hier wiederverwendet.
--color-neutral-dark wird seit "Ticketfarbe als durchgaengige
Akzentfarbe" (21.08.2026) im normalen/neutralen Fall NICHT mehr
verwendet (dort greift jetzt --ticket-accent-dark, siehe
.tc-ticket-area) - bewusst nicht geloescht, falls irgendwo weiterhin
ein rein neutraler (nicht ticketfarbabhaengiger) dunkler Grauton
gebraucht wird. */
--color-neutral-dark: #4B5563; /* aktuell ungenutzt, siehe Kommentar oben */
--color-success-dark: #155A26; /* Textfarbe Wert gutgeschrieben */
--color-danger-dark: #8B1E22; /* Textfarbe Wert entwertet */
--color-warning-dark: #6B4E00; /* Textfarbe Interne Notizen/Hinweise */
--color-background: #F3F4F6; /* neutrale helle Flaeche statt kraeftiger Farbflaechen */
--color-surface: #FFFFFF;
--color-border: #D7D9DD;
--color-border-strong: #B9BCC2;
--color-text: #1F2328;
--color-text-muted: #5B6270;
--color-text-on-dark: #FFFFFF;
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 14px;
--shadow-small: 0 1px 2px rgba(20, 20, 30, 0.06);
--shadow-medium: 0 4px 14px rgba(20, 20, 30, 0.10);
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 40px;
/* Korrektur (12.08.2026): der vorherige Kommentar hier behauptete faelschlich,
--app-max-width werde von keiner Regel konsumiert - das war zum Zeitpunkt
des Schreibens bereits ueberholt. --app-max-width wird aktiv verwendet
(siehe "body > table" weiter unten, Abschnitt "Layout-Grundueberarbeitung") -
es zentriert/begrenzt die aeusserste Seitentabelle bereits seit Phase B.
--sidebar-left-width bleibt weiterhin ein reiner Design-Token ohne aktiven
Verbraucher: die linke Navigationsspalte (159px) ist als HTML-
-Attribut in jeder einzelnen Seite hart codiert, nicht zentral
(siehe Facelift_Analyse_und_Plan.md). --sidebar-right-width dagegen hat
seit dem Feinschliff vom 01.09.2026 (Auftrag "Neue Hauptnavigation und
Seitenlayout weiter anpassen", Punkt 4: strukturelle Vorbereitung einer
kuenftigen rechten Sidebar) wieder einen echten Verbraucher - siehe weiter
unten die :last-child-Regel auf der rechten Rahmenzelle. Max-Breite von
1600px auf 1700px (Layout-Grundueberarbeitung 12.08.2026) und jetzt auf
1900px angehoben (Feinschliff 01.09.2026) - die zusaetzlichen 200px
entsprechen genau --sidebar-right-width, damit die neue rechte Spalte auf
grossen Monitoren nicht zu Lasten der bisherigen Arbeitsbereichsbreite
geht, sondern den dort ohnehin ungenutzten Rand sinnvoll fuellt; auf
sehr breiten (2560px+) Bildschirmen bleiben Zeilen weiterhin nicht
unlesbar lang, da die Tabelle insgesamt weiterhin begrenzt ist. */
--sidebar-left-width: 200px;
/* Statusleiste ueberarbeiten (03.09.2026): von 200px auf 260px angehoben
(samt --app-max-width entsprechend von 1900px auf 1960px) - die neue
permanente Statusleiste (framework/Statusleiste/Default.php) zeigt
deutlich groessere Kennzahlen als die vorherige, rein leere
Reservierung, dafuer braucht es etwas mehr Platz/Innenabstand. */
--sidebar-right-width: 260px;
--app-max-width: 1960px;
--font-system: system-ui, "Segoe UI", Arial, sans-serif;
}
/* ==========================================================================
Dunkle Darstellung (29.09.2026, Auftrag "Persistente Benutzerfilter ...
Dark-/Light-Mode"): dieselben Design-Tokens wie oben, nur mit dunklen
Werten - gesetzt ueber data-theme="dunkel" auf (siehe
tc_pref_theme_bootstrap() in includes/tc_praeferenzen.php, laeuft im
vor dem ersten Rendern). Statusfarben behalten ihre Bedeutung
(Gelb = Prioritaet, Rot = Eskalation/kritisch, Blau = Parken, Gruen =
Erfolg), nur Flaechen/Text/Rahmen und die "-subtle"/"-dark"-Varianten
werden an den dunklen Hintergrund angepasst. Hart kodierte Restfarben
werden gesammelt im Abschnitt "Dunkle Darstellung - Korrekturen" am
Dateiende behandelt.
========================================================================== */
:root[data-theme="dunkel"] {
color-scheme: dark;
--color-primary: #5B78D6;
--color-primary-dark: #8FA7F2;
--color-secondary: #E0567A;
--color-accent: #5B78D6;
--color-success: #3FAE5E;
--color-warning: #D9A62B;
--color-warning-subtle: #3A3214;
--color-danger: #E0484F;
--color-danger-strong: #FF3B45;
--color-danger-subtle: #3E1F22;
--color-park: #4D93E8;
--color-park-subtle: #17293F;
--color-priority: #FFCC00;
--color-priority-text: #3A2C00;
--color-info-subtle: #1C2642;
--color-personal: #A07ED6;
--color-personal-subtle: #2B2338;
--color-personal-dark: #D4C1F2;
--color-neutral-dark: #C3C8D0;
--color-success-dark: #7DD694;
--color-danger-dark: #F4A3A6;
--color-warning-dark: #F0D27A;
--color-background: #11151B;
--color-surface: #1B2029;
--color-border: #333A46;
--color-border-strong: #4A5261;
--color-text: #E4E7EC;
--color-text-muted: #A3ABB8;
--color-text-on-dark: #FFFFFF;
--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-medium: 0 4px 14px rgba(0, 0, 0, 0.55);
}
/* ==========================================================================
Bestehende Basis-Selektoren - Werte modernisiert, Namen unveraendert
========================================================================== */
.TextNormal {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
text-decoration: none;
}
.ZitatinRahmen {
font-family: var(--font-system);
font-size: 15px;
font-style: italic;
color: var(--color-text-muted);
}
body {
background-color: var(--color-background);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
}
.TextFett {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
border: none;
background-color: var(--color-primary);
color: #FFF;
border-radius: var(--radius-small);
}
.UeberschriftText {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
font-weight: bold;
text-decoration: none;
}
.TextTabelle {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
background-color: var(--color-background);
}
.UeberschriftMittel {
font-family: var(--font-system);
font-size: 14px;
color: var(--color-text-on-dark);
background-color: var(--color-secondary); /* Phase B: Hauptnav bleibt in der wiedererkennbaren Bordeaux-Farbwelt */
text-decoration: none;
font-weight: 600;
letter-spacing: .01em;
}
/* Phase B: Hover-/Active-/Focus-States der Hauptnavigation. .active-nav wird
rein visuell in framework/Kopfzeile/Default.php anhand von $_SERVER['SCRIPT_NAME']
vergeben - keine URL-/Funktionsaenderung. */
a.UeberschriftMittel {
display: block;
padding: 12px 4px;
transition: background-color .12s ease;
}
a.UeberschriftMittel:hover {
background-color: var(--color-primary);
color: #FFF;
border: none;
border-radius: 0;
}
a.UeberschriftMittel:focus-visible {
outline: 2px solid #FFF;
outline-offset: -3px;
}
a.UeberschriftMittel.active-nav {
background-color: var(--color-primary-dark);
box-shadow: inset 0 -3px 0 0 #FFF;
}
.LinkText {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-primary);
text-decoration: none;
font-weight: bold;
}
.EingabeFeld {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
background-color: var(--color-surface);
text-decoration: none;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-small);
padding: 8px 10px;
min-height: 38px;
box-sizing: border-box;
}
.EingabeButton {
font-family: var(--font-system);
font-size: 15px;
color: #FFF;
font-weight: 600;
background-color: var(--color-primary);
border: 1px solid var(--color-primary-dark);
border-radius: var(--radius-small);
padding: 8px 18px;
min-height: 38px;
cursor: pointer;
}
.EingabeButton:hover {
background-color: var(--color-primary-dark);
}
.LinkTextKlein {
font-family: var(--font-system);
font-size: 13px;
color: var(--color-primary);
text-decoration: none;
}
.LinkTextDuenn {
font-family: var(--font-system);
font-size: 14px;
color: var(--color-primary);
text-decoration: none;
font-weight: normal;
}
.UeberschriftSeite {
font-family: var(--font-system);
font-size: 20px;
color: var(--color-text);
font-weight: 700;
text-decoration: none;
}
.LinkTextDuennBlau {
font-family: var(--font-system);
font-size: 14px;
color: var(--color-primary);
text-decoration: none;
font-weight: normal;
}
.TabelleLinieUnten {
font-family: var(--font-system);
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: var(--color-primary);
border: none;
}
.TabelleLinieUntenTEXT {
font-family: var(--font-system);
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: var(--color-primary);
}
.LinieUntenTextNormal {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--color-border-strong);
}
.LinieRundumTextNormal {
font-family: var(--font-system);
font-size: 15px;
border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
box-shadow: var(--shadow-small);
color: var(--color-text);
background-color: var(--color-surface);
}
.LinkaufGrau { font-family: var(--font-system); font-size: 14px; font-style: normal; font-weight: bold; font-variant: normal; color: var(--color-primary); text-decoration: none }
.UeberschriftaufGrau { font-family: var(--font-system); font-size: 16px; font-style: normal; font-weight: bold; font-variant: normal; color: var(--color-text); text-decoration: none}
.TextKommentar {
font-family: var(--font-system);
font-size: 13px;
color: var(--color-text-muted);
text-decoration: none;
font-style: normal;
}
.LinkaufRot {
font-family: var(--font-system); font-size: 14px; font-style: normal; font-weight: bold; font-variant: normal; color: var(--color-primary); text-decoration: none
}
.UeberschriftaufSW {
font-family: var(--font-system);
font-size: 22px;
color: var(--color-primary);
font-weight: 700;
text-decoration: none;
}
.ZitatTitel {
font-family: var(--font-system);
font-size: 14px;
color: var(--color-text-muted);
background-color: transparent;
text-decoration: none;
font-style: italic;
font-weight: normal;
}
.BildSW {
filter: Gray;
}
.EingabeButtonKlein {
font-family: var(--font-system);
font-size: 14px;
color: #FFF;
font-weight: 600;
background-color: var(--color-primary);
border: 1px solid var(--color-primary-dark);
border-radius: var(--radius-small);
padding: 6px 14px;
min-height: 36px;
cursor: pointer;
}
.EingabeButtonKlein:hover {
background-color: var(--color-primary-dark);
}
.EingabeFeldKlein {
font-family: var(--font-system);
font-size: 14px;
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-small);
padding: 6px 10px;
min-height: 36px;
box-sizing: border-box;
}
.TextKommentar2 {
font-family: var(--font-system);
font-size: 12px;
color: var(--color-text-muted);
text-decoration: none;
font-style: normal;
}
.Eskaliert {
font-family: var(--font-system);
font-size: 24px;
color: #FFF;
font-weight: 700;
text-decoration: none; /* frueher "blink" - bewusst entfernt: weiterhin deutlich rot, aber ruhig */
background-color: var(--color-danger-strong);
border-radius: var(--radius-small);
}
.SchnellButton {
font-family: var(--font-system);
font-size: 15px;
color: var(--color-text);
font-weight: bold;
background-color: var(--color-surface);
height: 40px;
width: 180px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-small);
text-decoration: none;
}
.EingabeFeldExtraGross {
font-family: var(--font-system);
font-size: 16px;
color: var(--color-text);
background-color: var(--color-surface);
text-decoration: none;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-small);
padding: 8px 10px;
}
/* ==========================================================================
Neu: Zusaetzliche Klassen fuer den App-Rahmen (Kopf-/Fusszeile, Gutter)
Werden NUR zusaetzlich zu bestehenden bgcolor-Attributen vergeben, um
diese optisch zu ueberschreiben, ohne bgcolor/Tabellenstruktur zu entfernen.
========================================================================== */
.app-rahmen-kante {
background-color: var(--color-border-strong) !important;
}
.app-rahmen-gutter {
background-color: var(--color-background) !important;
}
.app-header-flaeche {
background-color: var(--color-surface) !important;
/* Fehlerrunde (24.09.2026), Punkt 3 "Header kompakter": Trennlinie zog
bisher unter der GESAMTEN Zeile durch, also auch unter Logo/Wortmarke/
SMS-/E-Mail-Badges - siehe .app-header-rechtsbereich weiter unten, das
die Linie jetzt gezielt unter dem gesamten rechten Bereich (inkl. Logo)
ueberdeckt und dadurch nur noch unter dem linken Bereich
(Ticketaktion/Schnellsuche) sichtbar bleibt. Linie selbst zieht deshalb
jetzt auf .app-header-flex um (siehe dort), nicht mehr hier. */
}
.app-adminleiste {
background-color: var(--color-warning-subtle) !important;
color: var(--color-text) !important;
}
/* Feinschliff (01.09.2026, Auftrag "Neue Hauptnavigation und Seitenlayout
weiter anpassen", Punkt 5): der Footer war bisher ein kraeftiger
Bordeaux-Balken (var(--color-secondary), die alte Hauptnav-Farbe) - ein
deutlich sichtbares Ueberbleibsel des alten Designs, das zur jetzt hellen/
ruhigen Navigation nicht mehr passte. Jetzt eine dezente, helle Flaeche
(dieselbe --color-background-Toenung wie die uebrigen "Gutter"-Bereiche
des Layouts) mit oberer Trennlinie statt einer kraeftigen Farbflaeche -
modern, kompakt, ruhig, ohne neue Farbe einzufuehren. */
.app-footer-flaeche {
background-color: var(--color-background) !important;
color: var(--color-text-muted) !important;
font-size: 12.5px;
padding: 14px 24px;
border-top: 1px solid var(--color-border);
}
.app-footer-copyright {
color: var(--color-text) !important;
text-decoration: none;
font-weight: 700;
}
.app-footer-copyright:hover,
.app-footer-copyright:focus-visible {
color: var(--color-primary) !important;
text-decoration: underline;
}
/* Release-Notes-/Impressum-Link in der Fusszeile - schlichte Inline-Links
in der neuen, dezenten Fusszeilen-Schrift statt der frueheren weissen
Schrift auf rotem Grund. */
.app-footer-link {
color: var(--color-text-muted);
text-decoration: none;
font-weight: 600;
letter-spacing: .01em;
transition: color .12s ease;
}
.app-footer-link:hover,
.app-footer-link:focus-visible {
color: var(--color-primary);
text-decoration: underline;
}
.app-statusleiste-dunkel {
/* Phase A: frueher bgcolor="#000000" mit dunkelgrauem Text (.TextKommentar) -
schlechter Kontrast. Phase-B-Nacharbeit: dunkles Blau-Grau statt Nahe-Schwarz
bzw. statt des in Phase B zwischenzeitlich hellen Tons - kompakt, klar vom
Hauptinhalt abgesetzt, aber nicht staerker wirkend als die Hauptnavigation. */
background-color: #1F2937 !important;
color: #F3F4F6 !important;
padding: 5px 10px;
font-size: 12px;
border-top: none;
}
.app-statusleiste-dunkel a,
.app-statusleiste-dunkel .TextKommentar,
.app-statusleiste-dunkel strong {
color: #F3F4F6 !important;
}
.app-statusleiste-dunkel a:hover {
color: #FFFFFF !important;
background-color: var(--color-primary) !important;
border-radius: var(--radius-small);
}
.app-statusleiste-dunkel a:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 1px;
}
/* Phase-B-Nacharbeit: Zweite Navigationsebene - dezenter als die Hauptnavigation,
Padding leicht reduziert (Vorgabe Abschnitt 4: "kompakt, aber nicht klein") */
.TextTabelle a.LinkTextDuenn {
display: inline-block;
padding: 6px 4px;
}
.TextTabelle a.LinkTextDuenn:hover {
background-color: var(--color-surface);
border-radius: var(--radius-small);
text-decoration: underline;
}
/* Phase-B-Nacharbeit: Dritte Navigations-/Funktionszeile (Admin-Leiste) - ruhige
helle Flaeche statt Gelb-Flaeche, Gelb nur noch als schmaler oberer Akzent */
.app-adminleiste {
background-color: #F4F5F7 !important;
border-top: 3px solid var(--color-warning);
border-bottom: 1px solid var(--color-border);
color: var(--color-primary-dark) !important;
padding: 6px 4px;
}
.app-adminleiste a.LinkText,
.app-adminleiste a.LinkTextDuenn {
color: var(--color-primary-dark);
}
.app-adminleiste a:hover {
background-color: #E9ECF2;
border-radius: var(--radius-small);
text-decoration: underline;
}
.app-status-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: .02em;
}
/* Phase-B-Nacharbeit: Online-/Offline-Statuskennzeichnung - kompakter Punkt statt
altem GIF-Icon, reines CSS, keine externe Abhaengigkeit (Vorgabe Abschnitt 2) */
.app-status-gut,
.app-status-gut a {
color: var(--color-success) !important;
}
.app-status-schlecht,
.app-status-schlecht a {
color: var(--color-danger) !important;
}
.app-status-gut img,
.app-status-schlecht img {
display: none;
}
.app-status-gut a::before,
.app-status-schlecht a::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
.app-status-gut a::before {
background-color: var(--color-success);
}
.app-status-schlecht a::before {
background-color: var(--color-danger);
}
/* Phase-B-Nacharbeit: Schnellsuche im Header/Zweitnavigation - kompaktere,
vertikal zentrierte Ausrichtung von Feld und Button (Vorgabe Abschnitt 5).
Ueber die Formular-ID #schnellsuche gescoped, damit die allgemeinen
.EingabeFeldKlein/.EingabeButtonKlein-Klassen anderswo unangetastet bleiben. */
#schnellsuche {
display: inline-flex;
align-items: center;
gap: 6px;
}
#schnellsuche input.EingabeFeldKlein {
min-height: 30px;
padding: 4px 8px;
font-size: 13px;
}
#schnellsuche input.EingabeButtonKlein {
min-height: 30px;
padding: 4px 12px;
}
/* ==========================================================================
Phase B: Header - Flex-Ausrichtung "Neues Ticket erstellen" (links) /
Wortmarke (rechts), nur innerhalb der bestehenden Kopfzeilen-Zelle, keine
Aenderung an der umgebenden Tabellenstruktur.
========================================================================== */
.app-header-flaeche {
/* Fehlerrunde (24.09.2026), Punkt 3: Innenabstand/Mindesthoehe reduziert -
spart ein paar Pixel Kopfzeilenhoehe auf jeder Seite, ohne Logo/Text/
Badges vertikal zu eng wirken zu lassen. */
padding: 10px 24px;
min-height: 52px;
box-sizing: border-box;
}
.app-header-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
width: 100%;
/* Fehlerrunde (24.09.2026), Punkt 3: Trennlinie zur Hauptnavigation sitzt
jetzt hier statt auf .app-header-flaeche (siehe dortiger Kommentar) -
dieselbe Position/Optik, aber .app-header-rechtsbereich kann sie durch
eigenen Hintergrund gezielt unter Logo/Wortmarke/Badges ueberdecken. */
border-bottom: 1px solid var(--color-border);
}
.app-header-aktion {
display: inline-flex;
}
.app-header-cta {
display: inline-flex;
align-items: center;
gap: 7px;
background-color: var(--color-primary);
color: #FFF !important;
font-size: 15px;
font-weight: 600;
padding: 10px 20px;
border-radius: var(--radius-small);
text-decoration: none !important;
transition: background-color .12s ease;
}
.app-header-cta:hover {
background-color: var(--color-primary-dark);
color: #FFF !important;
}
.app-header-cta:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
.app-header-cta .tc-icon {
stroke-width: 1.8;
vertical-align: -1px;
}
/* Kopfnavigation und Header optimieren (01.09.2026, Auftrag Punkt 2):
HausNotruf-Bildlogo + "Remastered 2026" vollstaendig entfernt (kein
Bild/keine Logo-Grafik mehr an dieser Stelle) - ersetzt durch eine
schlichte, zweizeilige Textdarstellung ("Online Ticketing" /
"BeWo Telehealthcare GmbH"), rein per CSS gestapelt statt inline
nebeneinander. Ersetzt die vormals dreiteilige Wortmarke (.app-header-
marke-online/-akzent + .app-header-subtitle fuer "Remastered 2026",
beide jetzt entfernt, da ersatzlos aus der Kopfzeile verschwunden - siehe
framework/Kopfzeile/Default.php). */
.app-header-marke {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.3;
gap: 1px;
}
.app-header-marke-titel {
font-family: var(--font-system);
font-size: 16px;
font-weight: 700;
letter-spacing: .01em;
color: var(--color-text);
}
.app-header-marke-untertitel {
font-family: var(--font-system);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .01em;
color: var(--color-text-muted);
}
/* Auftrag "Logo-Verwaltung in Grundeinstellungen" (18.09.2026): optionales
Logo rechts in der Kopfzeile, ersetzt an dieser Stelle den Text-Schriftzug
(.app-header-marke) - siehe tc_logo_markup_header(), includes/main.php.
Feste Hoehe statt fester Breite, damit beliebige Seitenverhaeltnisse ohne
Verzerrung (object-fit: contain) in die Kopfzeile passen. */
.app-header-logo {
display: block;
/* Fehlerrunde (24.09.2026), Punkt 3 "Header kompakter": Logo moderat
verkleinert (80px -> 60px, Breite im selben Verhaeltnis mitreduziert) -
passt zur insgesamt niedrigeren Kopfzeile, bleibt weiterhin gut lesbar/
erkennbar. */
height: 60px;
max-width: 330px;
width: auto;
object-fit: contain;
}
/* Logo in Druck-/Ausgabeansichten (Ticket-Druckansicht, Stunden-/
Wertnachweis, Reports, Dashboard-Vollbild) - einheitlich oben rechts,
druckfreundlich klein, siehe tc_logo_markup_druck(). */
.tc-druck-logo {
display: block;
position: absolute;
top: 16px;
right: 16px;
height: 72px;
max-width: 400px;
width: auto;
object-fit: contain;
}
@media print {
.tc-druck-logo {
position: fixed;
}
}
/* Dashboard-Vollbildansicht: Logo als normales Element im bereits
bestehenden Flex-Kopfbereich (.tc-dash-vollbild-kopf) statt frei
positioniert - dort waere position:absolute (siehe .tc-druck-logo)
unpassend, da Titel/Live-Status im selben Kopfbereich stehen. */
.tc-dash-vollbild-logo {
display: block;
height: 64px;
max-width: 360px;
width: auto;
object-fit: contain;
}
/* Kurzer dynamischer Hinweistext links neben SMS-/E-Mail-Statuswidget im
Header (Auftrag 20.09.2026, "Header-Ueberwachung fuer SMS und E-Mail
erweitern") - nur sichtbar bei Stoerung oder neuen SMS (siehe [hidden]
in framework/Kopfzeile/Default.php), sonst kein zusaetzlicher Platzbedarf. */
.app-header-status-hinweis {
font-family: var(--font-system);
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
white-space: nowrap;
}
.app-header-status-hinweis[hidden] {
display: none;
}
.app-header-status-hinweis--fehler {
color: var(--color-warning);
}
/* SMS-Anzeige im Header (Nutzerauftrag 18.09.2026, "Thema SMS aus der
Seitenleiste zentriert im Header unterbringen"): ersetzt den bisherigen
SMS-Abschnitt in der persoenlichen Statusleiste (framework/Statusleiste/
Default.php) - dezent im Normalzustand (kein data-status/data-hat-neue-
Sonderfall), auffaellig/"laut" bei neuen SMS (data-hat-neue="true") ODER
einem Empfangsfehler (data-status="fehler"/"kritisch", siehe includes/
tc_sms.php) - reine Attributselektoren, keine Klassenumschaltung noetig
(siehe js/tc-start-live.js).
Nachbesserung (18.09.2026, "SMS-Status-Bubble im Header verschieben"):
vormals absolut in der geometrischen Mitte der GESAMTEN Kopfzeile
positioniert (unabhaengig von Suchfeld-/Wortmarken-Breite) - jetzt
normaler Teil des Flex-Ablaufs innerhalb von .app-header-rechtsbereich,
direkt links neben der Wortmarke, nie ueberlappend mit ihr oder anderen
Kopfzeilen-Inhalten. */
.app-header-sms {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background-color: var(--color-background);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-family: var(--font-system);
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-header-sms:hover {
border-color: var(--color-primary);
color: var(--color-primary) !important;
}
.app-header-sms .tc-icon {
stroke-width: 1.8;
flex-shrink: 0;
}
.app-header-sms-punkt {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--color-text-muted);
flex-shrink: 0;
}
.app-header-sms-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background-color: var(--color-text-muted);
color: #FFF;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.app-header-sms-badge[hidden] {
display: none;
}
/* Laut/auffaellig: neue SMS vorhanden - deutlich sichtbare Akzentfarbe +
Puls (dieselbe Puls-Animation wie das bestehende Dashboard-/SMS-
Lebenszeichen, siehe @keyframes tc-dash-puls weiter unten). */
.app-header-sms[data-hat-neue="true"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #FFF;
animation: tc-dash-puls 1.8s ease-in-out infinite;
}
.app-header-sms[data-hat-neue="true"]:hover {
color: #FFF !important;
}
.app-header-sms[data-hat-neue="true"] .app-header-sms-badge {
background-color: #FFF;
color: var(--color-primary);
}
.app-header-sms[data-hat-neue="true"] .app-header-sms-punkt {
background-color: #FFF;
}
/* Laut/auffaellig: SMS-Empfang hat einen Fehler - unabhaengig davon, ob
gerade neue SMS vorliegen (Nutzerauftrag: "auch wenn der SMS-Empfang
einen Fehler hat"). Nach "fehler"/"kritisch" im Quelltext platziert,
damit bei gleichzeitig neuen SMS UND einem Fehler die Fehlerfarbe
Vorrang hat (ein technischer Ausfall ist dringlicher als eine einzelne
ungelesene Nachricht). */
.app-header-sms[data-status="fehler"] {
background-color: var(--color-warning);
border-color: var(--color-warning);
color: #FFF;
}
.app-header-sms[data-status="fehler"]:hover {
color: #FFF !important;
}
.app-header-sms[data-status="fehler"] .app-header-sms-badge {
background-color: #FFF;
color: var(--color-warning);
}
.app-header-sms[data-status="fehler"] .app-header-sms-punkt {
background-color: #FFF;
}
.app-header-sms[data-status="kritisch"] {
background-color: var(--color-danger-strong, #C0392B);
border-color: var(--color-danger-strong, #C0392B);
color: #FFF;
animation: tc-dash-puls 1.2s ease-in-out infinite;
}
.app-header-sms[data-status="kritisch"]:hover {
color: #FFF !important;
}
.app-header-sms[data-status="kritisch"] .app-header-sms-badge {
background-color: #FFF;
color: var(--color-danger-strong, #C0392B);
}
.app-header-sms[data-status="kritisch"] .app-header-sms-punkt {
background-color: #FFF;
}
/* Nutzerauftrag (18.09.2026, "SMS-Status im Header auch signalisieren
lassen, wenn SMS-API aus"): bewusst NEUTRAL (kein Rot/Orange - eine
Deaktivierung ist kein Fehler), aber optisch klar von "laeuft normal"
unterscheidbar (gestrichelter Rahmen + reduzierte Deckkraft), damit ein
deaktivierter Zustand nicht mit dem Normalbetrieb verwechselt wird. */
.app-header-sms[data-status="deaktiviert"] {
opacity: .55;
border-style: dashed;
}
.app-header-sms[data-status="deaktiviert"] .app-header-sms-punkt {
background-color: transparent;
border: 1.5px solid var(--color-text-muted);
}
/* Nutzerauftrag (18.09.2026, "Bitte auch einen SMTP-Status in den
Header"): gleiche Basisoptik wie .app-header-sms, absichtlich separat
gehalten (kein gemeinsames Umbenennen/Refactoring der bereits
produktiven SMS-Bubble) - kein Neu-Zaehler/Puls, da SMTP kein
"neue Nachricht"-Konzept hat. */
.app-header-smtp {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background-color: var(--color-background);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-family: var(--font-system);
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-header-smtp:hover {
border-color: var(--color-primary);
color: var(--color-primary) !important;
}
.app-header-smtp .tc-icon {
stroke-width: 1.8;
flex-shrink: 0;
}
.app-header-smtp-punkt {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--color-text-muted);
flex-shrink: 0;
}
.app-header-smtp[data-status="fehler"] {
background-color: var(--color-warning);
border-color: var(--color-warning);
color: #FFF;
}
.app-header-smtp[data-status="fehler"]:hover {
color: #FFF !important;
}
.app-header-smtp[data-status="fehler"] .app-header-smtp-punkt {
background-color: #FFF;
}
.app-header-smtp[data-status="deaktiviert"] {
opacity: .55;
border-style: dashed;
}
.app-header-smtp[data-status="deaktiviert"] .app-header-smtp-punkt {
background-color: transparent;
border: 1.5px solid var(--color-text-muted);
}
/* Nachbesserung (18.09.2026, "SMS-Status-Bubble im Header verschieben"):
gemeinsamer rechter Bereich fuer SMS-Bubble + Wortmarke - haelt beide
zusammen am rechten Rand der Kopfzeile (dieselbe justify-content:
space-between-Aufteilung von .app-header-flex wie zuvor zwischen
.app-header-linksbereich und der (nun hier enthaltenen) Wortmarke
allein), damit die Bubble bei umbrechendem Flex-Layout auf schmalen
Bildschirmen sauber MIT der Wortmarke zusammen umbricht statt
unabhaengig irgendwo anders zu stehen. */
.app-header-rechtsbereich {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
justify-content: flex-end;
/* Fehlerrunde (24.09.2026), Punkt 3 "Header kompakter": auf volle
Zeilenhoehe strecken + eigener Hintergrund - ueberdeckt dadurch die auf
.app-header-flex liegende Trennlinie exakt unter dem gesamten rechten
Bereich (SMS-/E-Mail-Badges, Wortmarke, Logo). Die Linie bleibt so nur
noch links sichtbar (Ticketaktion/Schnellsuche) - "beginnt optisch erst
seitlich ab dem Logo", unabhaengig von der tatsaechlichen Logo-Breite,
da hier keine feste Pixelbreite noetig ist. */
align-self: stretch;
background-color: var(--color-surface);
}
/* Kopfnavigation und Header optimieren (01.09.2026, Auftrag Punkt 4/5):
"Neues Ticket erstellen" und die aus der vormaligen dritten Kopfzeile
(Technik-Pool/Schnellsuche, jetzt vollstaendig entfernt) hierher
verschobene Ticketschnellsuche bilden gemeinsam einen linken
Funktionsbereich - dadurch entfaellt eine komplette Tabellenzeile
zwischen Navigation und Hauptinhalt. Die Suche ist bewusst dezenter als
die primaere Aktion "Neues Ticket erstellen" gehalten (helle Flaeche
statt Farbflaeche, duennerer Rahmen), harmoniert aber ueber gleiche
Hoehe/Rundung/Abstaende mit dem CTA-Button daneben - keine zusaetzliche
Werkzeugleiste. */
.app-header-linksbereich {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.app-header-suche {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-small);
padding: 5px 6px 5px 10px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.app-header-suche .tc-icon {
width: 15px;
height: 15px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.app-header-suche:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(47, 69, 146, 0.12);
}
/* Eingabefeld bewusst nicht unnoetig breit (Vorgabe Punkt 4) - reicht fuer
einen Suchbegriff, ohne den linken Funktionsbereich zu dominieren.
Ueberschreibt die allgemeine .EingabeFeldKlein-Rahmung/-Flaeche, da das
Feld hier optisch Teil der umgebenden .app-header-suche-Flaeche ist,
nicht ein eigenstaendiges Formularfeld. */
.app-header-suche-feld.EingabeFeldKlein {
border: none !important;
background: transparent !important;
box-shadow: none !important;
min-height: 26px;
padding: 2px 0;
font-size: 13px;
width: 148px;
}
.app-header-suche-feld.EingabeFeldKlein:focus {
outline: none;
}
.app-header-suche-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
min-height: 26px;
padding: 0 8px;
border: none;
border-radius: var(--radius-small);
background-color: var(--color-surface);
color: var(--color-text-muted);
font-family: var(--font-system);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
/* Auftrag "Kartendarstellung Phase I/II visuell korrigieren", 03.09.2026,
Punkt 14: sichtbares ">>"-Textsymbol im Such-Button durch das bereits
im Suchfeld verwendete Icon 'suche' ersetzt (siehe
framework/Kopfzeile/Default.php). Ohne diese Regel wuerde die
allgemeinere ".app-header-suche .tc-icon"-Farbregel (siehe oben) auch
fuer das Icon IM Button gelten und dessen Weiss-Faerbung bei :hover
ueberschreiben - hier bewusst wieder auf die Button-eigene Farbe
(inkl. Hover-Wechsel) zurueckgesetzt. */
.app-header-suche-button .tc-icon {
width: 13px;
height: 13px;
color: inherit;
}
.app-header-suche-button:hover {
background-color: var(--color-primary);
color: #FFF;
}
.app-header-suche-button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
/* ==========================================================================
Kopfnavigation und Header optimieren (01.09.2026, Auftrag "Kopfnavigation
und Header gezielt weiter optimieren", Punkt 6/7): Sticky-Kopfbereich +
klarere Trennung zum Hauptinhalt.
--------------------------------------------------------------------------
"position: sticky" sitzt bewusst auf dem selbst (siehe
framework/Kopfzeile/Default.php), das jetzt beide verbleibenden
Kopfzeilen (Marken-/Aktionszeile + Hauptnavigation) umschliesst - dadurch
bleibt der GESAMTE Kopfbereich als ein zusammenhaengender Block am oberen
Fensterrand stehen, ohne dass fuer die zweite Zeile ein fester Pixel-
Versatz (= Hoehe der ersten Zeile) berechnet werden muesste. Das waere
bei der responsiv umbrechenden Navigation (siehe Media Queries weiter
unten) fragil, da sich die Hoehe der ersten Zeile je nach Fensterbreite/
Zoom aendern kann. traegt in jeder der ~370 Einzelseiten
automatisch ein implizites
fuer alle nachfolgenden Zeilen
(Platzhalterzeile/Hauptinhalt/Fusszeile) - gueltiges HTML5, keine der
Einzelseiten musste dafuer angepasst werden.
z-index 15 haelt den Kopfbereich ueber dem normalen Seiteninhalt (der
ueberwiegend ohne z-index oder mit 1/2/5 auskommt), bleibt aber bewusst
UNTER den im Projekt durchgaengig genutzten Popover-/Dropdown-Ebenen
(z-index 20-30), damit ein Popover in Kopfbereichsnaehe nicht verdeckt
wird. Native