/* ============================================================================
eTime — App CSS (KONSOLIDIERT)
============================================================================
Diese Datei ist die Single-Source-of-Truth für die gesamte App-Optik.
Sie konsolidiert die vorherigen 5 Dateien:
1. tokens.css (~150 Zeilen) Design-Tokens (Farben, Radien, …)
2. shell.css (~560 Zeilen) Header, Footer, Nav, User-Menü
3. index.css (~610 Zeilen) App-Layout (.content, Tabellen, Modals)
4. vacation.css (~50 Zeilen) Urlaubs-Kalender
5. theme.css (~700 Zeilen) Modern-Light-Look-Layer
Reihenfolge ist absichtlich: später überschreibt früher. Die Theme-
Sektion am Ende ist der maßgebliche Look.
Auth-Pages, lp-2.php und docu.php haben weiterhin ihre eigenen CSS-
Files (auth.css, lp-2 inline, docu.css), weil sie ein anderes
Layout-Paradigma haben (Hero/Marketing/Sidebar).
Designentscheidungen (2026-05):
- Body komplett weiß, keine Pastell-Gradienten
- Cards: subtiler Header-Gradient erhalten, Body weiß
- Buttons: flat (nur UIColor als Hintergrund), Hover via filter:brightness(0.88)
- Titel mit FA-Icon: Icon in Brand-Soft-Kreis (wie Auth-Pages)
============================================================================ */
/* Breiter Kalender / Schichtraster (.calendar-wrapper in shift/main/worktime):
das innere Element hat min-width:1000px. Ohne overflow-x sprengt das auf
schmalen Screens die ganze Seite (Menü/Footer verschieben sich). Daher den
Wrapper auf die Breite begrenzen und HORIZONTAL darin scrollen. */
.calendar-wrapper {
max-width: 100%;
overflow-x: auto;
}
/* ============================================================================
SEKTION 1 — DESIGN TOKENS (ehem. tokens.css)
============================================================================ */
:root {
/* -------- Brand & Akzent -------- */
--color-brand: #D52B1E;
--color-brand-hover: #B82418;
--color-brand-soft: rgba(213, 43, 30, 0.08);
--color-brand-line: rgba(213, 43, 30, 0.18);
--color-brand-glow: rgba(213, 43, 30, 0.32);
/* -------- Neutrale Farbskala -------- */
--color-ink: #0f172a;
--color-text: #1f2937;
--color-text-soft: #475569;
--color-text-muted: #94a3b8;
--color-text-onbrand: #ffffff;
/* -------- Flächen / Hintergründe -------- */
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-bg-soft: #f1f5f9;
--color-bg-tinted: #fafbfd;
--color-surface: #ffffff;
--color-surface-glass: rgba(255, 255, 255, 0.72);
--color-surface-tint: rgba(255, 255, 255, 0.55);
/* -------- Linien -------- */
--color-border: #e2e8f0;
--color-border-soft: #eef2f7;
--color-border-strong: #cbd5e1;
/* -------- State-Farben (Pastell-Akzente) -------- */
--color-success: #10b981;
--color-success-soft: rgba(16, 185, 129, 0.10);
--color-warning: #f59e0b;
--color-warning-soft: rgba(245, 158, 11, 0.10);
--color-danger: #ef4444;
--color-danger-soft: rgba(239, 68, 68, 0.10);
--color-info: #3b82f6;
--color-info-soft: rgba(59, 130, 246, 0.10);
/* -------- Abstände -------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px;
/* -------- Radien -------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-full: 9999px;
/* -------- Schatten -------- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.04);
--shadow-focus: 0 0 0 4px var(--color-brand-soft);
/* -------- Typografie -------- */
--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* -------- Transitions -------- */
--transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
/* -------- Z-Index Layer -------- */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 500;
--z-shell-header: 1000;
--z-overlay: 2000;
--z-modal: 3000;
--z-toast: 4000;
--z-tooltip: 5000;
/* -------- Backwärtskompatible Aliase -------- */
--primary: var(--color-brand);
--primary-soft: var(--color-brand-soft);
--primary-line: var(--color-brand-line);
--text: var(--color-text);
--text-soft: var(--color-text-soft);
--text-muted: var(--color-text-muted);
--shell-bg: var(--color-bg);
--bg-subtle: var(--color-bg-subtle);
--bg-soft: var(--color-bg-soft);
--border: var(--color-border);
--border-soft: var(--color-border-soft);
--radius: var(--radius-lg);
--shadow: var(--shadow-md);
--font: var(--font-sans);
--shell-header-h: 72px;
/* Einheitliche Höhe aller Header-Steuerelemente rechts
* (Sprache, User, Shop-Icon, Switch-Company, Hamburger, Login).
* Eine zentrale Variable garantiert, dass alle Pillen/Buttons
* exakt gleich hoch sind — Desktop wie Mobile. */
--shell-control-h: 40px;
}
/* ============================================================================
SEKTION 2 — SHELL (Header, Footer, Hauptnavigation, User-Menü)
============================================================================
Übernommen aus shell.css. Behält die ursprüngliche Struktur,
damit die Selektoren stabil bleiben.
============================================================================ */
/* ============================================================
eTime — shell.css
============================================================
Gemeinsame Optik-Basis (Design Tokens + Header + Footer)
für alle Seiten, die das gleiche Branding zeigen:
- lp-2.php (Marketing)
- index.php (Backoffice-App)
- docu.php (Dokumentation)
Pflege-Hinweis:
- Inhalte AUSSERHALB Header/Footer/Buttons gehören NICHT hier rein.
- Hero/Features/Pricing/etc. bleiben inline in lp-2.php.
- App-spezifisches CSS (Tabellen, Akkordions, Forms) bleibt in css/index.css.
============================================================ */
:root {
--primary: #D52B1E;
--primary-soft: rgba(213, 43, 30, 0.08);
--primary-line: rgba(213, 43, 30, 0.25);
--text: #1a1a1a;
--text-soft: #4a4a4a;
--text-muted: #8a8a8a;
/* --shell-bg ist die Body-Hintergrundfarbe für Shell-Seiten.
* NICHT --bg verwenden! Die App nutzt --bg für die wählbare User-Themefarbe
* (red/golden/blue/emerald/purple), und shell.css darf das nicht überschreiben.
*/
--shell-bg: #ffffff;
--bg-subtle: #fafafa;
--bg-soft: #f3f4f6;
--border: #e5e7eb;
--border-soft: #f0f1f3;
--radius: 14px;
--radius-lg: 20px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow: 0 8px 24px rgba(0,0,0,0.06);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.08);
--font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
/* Header-Höhe als CSS-Variable, damit App-Layout korrekt darunter
Platz lassen kann (margin-top oder padding-top) */
--shell-header-h: 72px;
}
/* ============================================================
Reset + Body
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--text);
background: var(--shell-bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================================================
Header (Sticky, Inter, mit Blur)
============================================================ */
.shell-header {
position: sticky; top: 0; z-index: 1050;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-soft);
min-height: var(--shell-header-h);
}
.shell-header__inner {
/* 3-Spalten-Layout über die volle Viewport-Breite.
* Spalte 1 (auto): Logo links am Rand
* Spalte 2 (1fr): Hauptnav, zentriert in dieser Spalte
* Spalte 3 (auto): Steuerelemente (Firma wechseln, Shop, Sprache, User)
* rechts am Rand
*
* Vorher war hier max-width: 1440px gesetzt — das zentrierte den
* gesamten Header in einem 1440px-Container, sodass auf breiten
* Bildschirmen das Logo nicht am linken Rand und die Steuerelemente
* nicht am rechten Rand waren. Jetzt nimmt der Header die volle Breite. */
display: grid;
/* minmax(0, 1fr) statt 1fr: erlaubt der Nav-Spalte, UNTER ihre Inhalts-
* breite zu schrumpfen — sonst (1fr = minmax(auto,1fr)) hält die Spalte
* immer die volle Menübreite, die Nav scrollt NICHT und schiebt/überlappt
* die Nachbarspalten. */
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
padding: 16px 16px;
gap: 16px;
}
/* Brand-Wrapper: Uhr-Icon + Logo nebeneinander.
* Beide bilden zusammen die erste Grid-Spalte (auto-sized) des
* .shell-header__inner-Grids. Auf der Demo-Seite trägt das Uhr-Icon
* zusätzlich die Klasse .blink (siehe @keyframes blink weiter unten). */
.shell-brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none; /* .shell-brand ist jetzt der Home-Link (klickbare Uhr) */
color: var(--text);
}
.shell-brand:hover { text-decoration: none; color: var(--text); }
.shell-clock {
font-size: 1.4rem;
color: var(--primary);
line-height: 1;
}
.shell-logo {
font-weight: 800; font-size: 1.5rem; letter-spacing: -1px;
color: var(--text);
display: inline-block;
text-decoration: none; /* Kein Unterstrich am Logo */
}
.shell-logo:hover { text-decoration: none; color: var(--text); }
.shell-logo span { color: var(--primary); }
/* Hauptnav (Center-Spalte des 3-Spalten-Headers).
* justify-self: start sorgt dafür, dass das Menü direkt nach dem
* Logo links beginnt — nicht in der Mitte der freien Spalte zentriert.
* Die Steuerelemente rechts bleiben durch grid-template-columns="auto 1fr auto"
* an ihrer Position am rechten Rand. */
.shell-nav {
display: flex; gap: 18px;
font-size: 0.95rem; color: var(--text-soft);
font-weight: 500;
align-items: center;
flex-wrap: nowrap;
justify-self: start;
margin-left: 6px;
/* Zu breites Menue scrollt INTERN (links/rechts) statt die ganze Seite zu
* verschieben. min-width:0 erlaubt der 1fr-Grid-Spalte zu schrumpfen (Grid-
* Items haben sonst min-width:auto = Inhaltsbreite -> Header sprengt). */
min-width: 0;
overflow-x: auto;
scrollbar-width: none; /* Firefox: Scrollbalken aus */
}
.shell-nav::-webkit-scrollbar { display: none; } /* WebKit: Scrollbalken aus */
/* lp-2 (Marketing-Landing): Header wird in einem 1200px-Container
* zentriert, damit Logo, Nav und Steuerelemente parallel zum Hero/
* Pricing-Layout darunter laufen (das ebenfalls zentriert in einem
* Container sitzt). Auf der App bleibt der Header voll-viewport-breit. */
body.lp-2-page .shell-nav {
justify-self: center;
margin-left: 0;
}
body.lp-2-page .shell-header__inner {
max-width: 1200px;
margin: 0 auto;
}
.shell-nav > .shell-nav__item,
.shell-nav > a,
.shell-nav__group > .shell-nav__item {
padding: 6px 0;
transition: color .15s;
cursor: pointer;
color: #000; display: inline-flex; align-items: center; gap: 6px;
}
.shell-nav > .shell-nav__item:hover,
.shell-nav > a:hover,
.shell-nav__group > .shell-nav__item:hover { color: var(--primary); }
.shell-nav__item.is-active,
.shell-nav a.is-active { color: var(--primary); }
.shell-nav__caret::after {
content: '\f107'; /* fa-chevron-down */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 6px;
font-size: 0.75rem;
opacity: 0.5;
}
/* Dropdown-Container */
.shell-nav__group {
position: relative;
}
.shell-nav__menu {
display: none;
/* position:fixed (statt absolute), damit das Dropdown NICHT vom
* overflow-x:auto der .shell-nav (interner Horizontal-Scroll) geclippt
* wird. CSS-Regel erzwingt overflow-y:auto, sobald overflow-x gesetzt ist —
* ein absolut positioniertes, nach unten aufklappendes Menue wuerde sonst
* abgeschnitten/unsichtbar. Die exakte top/left-Position setzt shell.js
* beim Oeffnen anhand des Trigger-Rechtecks. Im mobilen Off-Canvas
* ueberschreibt die Media-Query unten auf position:static. */
position: fixed;
top: 0; left: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow);
min-width: 220px;
padding: 8px;
margin-top: 8px;
z-index: 1060;
}
.shell-nav__group.is-open > .shell-nav__menu { display: block; }
.shell-nav__menu a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 8px;
font-size: 0.92rem;
color: #000;
cursor: pointer;
transition: background .12s, color .12s;
}
.shell-nav__menu a:hover {
background: #000;
color: var(--color-brand);
}
.shell-nav__menu a:hover i {
color: var(--color-brand);
}
.shell-nav__menu a i {
width: 18px; text-align: center;
color: #000;
font-size: 0.9rem;
transition: color .12s;
}
.shell-nav__menu a:hover i { color: var(--primary); }
/* Rechte Seite: Sprache, Switch-Company, User-Menü, CTA */
.shell-header__right {
display: flex; align-items: center; gap: 7px;
flex-shrink: 0;
}
/* ============================================================
Einheitliche Höhe ALLER Header-Steuerelemente
============================================================
Vorher hatten die Controls unterschiedliche Höhen, weil sie ihre
Höhe teils aus dem Padding ableiteten (.shell-lang, .shell-user__trigger,
.btn-*-shell) und teils fest gesetzt war (.shell-icon-btn 44px,
.shell-mobile-toggle 40px). Auf Mobile fiel das als ungleiche
Button-Höhen auf.
Lösung: feste Höhe über --shell-control-h für alle Controls, mit
box-sizing: border-box (Border zählt in die Höhe) und vertikalem
Padding 0 (vertikale Zentrierung übernimmt align-items: center).
Horizontales Padding bleibt erhalten. */
.shell-lang,
.shell-company,
.shell-user__trigger,
.shell-header__right .btn-outline-shell,
.shell-header__right .btn-primary-shell,
.shell-icon-btn,
.shell-mobile-toggle {
height: var(--shell-control-h);
min-height: var(--shell-control-h);
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
}
/* Icon-only-Buttons quadratisch halten. */
.shell-icon-btn,
.shell-mobile-toggle {
width: var(--shell-control-h);
min-width: var(--shell-control-h);
padding-left: 0;
padding-right: 0;
}
.shell-lang {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid #000;
border-radius: 10px;
font-size: 0.9rem; font-weight: 500;
cursor: pointer;
background: transparent;
color: #000;
position: relative;
user-select: none;
transition: background-color .15s, color .15s, border-color .15s;
}
.shell-lang:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
.shell-lang img { width: 20px; height: 14px; object-fit: cover; }
.shell-lang__flag {
/* Vorher: 
. Jetzt:
* mit lokal gehosteten SVGs aus node_modules/flag-icons. Das umgeht die
* Content-Security-Policy-Restriktionen (img-src 'self' data:), die externe
* Bild-URLs blockieren würden. */
width: 20px;
height: 14px;
display: inline-block;
background-size: cover;
background-position: center;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
flex-shrink: 0;
}
.shell-lang__menu {
display: none;
position: absolute;
top: 100%; right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
margin-top: 4px;
padding: 4px;
z-index: 1060;
min-width: 100px;
}
.shell-lang.is-open .shell-lang__menu { display: block; }
.shell-lang__menu a {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border-radius: 6px;
color: #000;
cursor: pointer;
transition: background .12s, color .12s;
}
.shell-lang__menu a:hover {
background: #000;
color: var(--color-brand);
}
/* Firma-wechseln-Dropdown — gleicher Look wie die Sprachauswahl. */
.shell-company {
display: inline-flex; align-items: center; gap: 8px;
max-width: 220px;
padding: 8px 14px;
border: 1px solid #000;
border-radius: 10px;
font-size: 0.9rem; font-weight: 500;
cursor: pointer;
background: transparent;
color: #000;
position: relative;
user-select: none;
transition: background-color .15s, color .15s, border-color .15s;
}
.shell-company:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
.shell-company__current {
max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-company__menu {
display: none;
position: absolute;
top: 100%; right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
margin-top: 4px;
padding: 4px;
z-index: 1060;
min-width: 180px;
max-height: 320px; overflow-y: auto;
}
.shell-company.is-open .shell-company__menu { display: block; }
.shell-company__menu a {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border-radius: 6px;
color: #000;
cursor: pointer;
white-space: nowrap;
transition: background .12s, color .12s;
}
.shell-company__menu a:hover {
background: #000;
color: var(--color-brand);
}
.shell-company__menu a.is-current {
font-weight: 700;
background: var(--color-brand-soft);
}
/* User-Menü (Dropdown rechts oben mit Name + Logout etc.) */
.shell-user {
position: relative;
}
.shell-user__trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid #000;
border-radius: 10px;
font-size: 0.9rem; font-weight: 500;
cursor: pointer;
background: transparent;
color: #000;
transition: background-color .15s, color .15s, border-color .15s;
}
.shell-user__trigger:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
.shell-user.is-open .shell-user__menu { display: block; }
.shell-user__menu {
display: none;
position: absolute;
top: 100%; right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
margin-top: 4px;
padding: 4px;
z-index: 1060;
min-width: 200px;
}
.shell-user__menu a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 6px;
color: #000;
cursor: pointer;
font-size: 0.92rem;
transition: background .12s, color .12s;
}
.shell-user__menu a:hover {
background: #000;
color: var(--color-brand);
}
.shell-user__menu a:hover i { color: var(--color-brand); }
.shell-user__menu a i {
width: 18px; text-align: center;
color: #000;
transition: color .12s;
}
.shell-user__menu .shell-user__divider {
height: 1px; background: var(--border-soft);
margin: 4px 0;
}
/* ============================================================
UIColor-Palette im User-Menü
============================================================
Wird im User-Menü als kleine Reihe von 5 Farbpunkten gerendert.
Die Buttons tragen die Klasse .color-box-click — dadurch greift
automatisch der existierende jQuery-Handler in js/user.js, der
change_color per AJAX an den User-Controller schickt und die
Seite reloaded. */
.shell-user__colors {
padding: 8px 12px;
}
.shell-user__colors-label {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.shell-user__colors-row {
display: flex;
gap: 6px;
}
.shell-user__color {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--border);
cursor: pointer;
padding: 0;
transition: transform .12s ease, box-shadow .12s ease;
}
.shell-user__color:hover {
transform: scale(1.15);
}
.shell-user__color.is-active {
box-shadow: 0 0 0 2px var(--primary);
transform: scale(1.1);
}
/* ============================================================
Shop-Icon (Warenkorb, links der Sprachauswahl)
============================================================ */
.shell-icon-btn {
display: inline-flex;
align-items: center; justify-content: center;
width: var(--shell-control-h);
min-width: var(--shell-control-h);
height: var(--shell-control-h);
flex-shrink: 0;
box-sizing: border-box;
border: 1px solid #000;
border-radius: 10px;
background: transparent;
color: #000;
font-size: 1.1rem;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
text-decoration: none;
padding: 0;
}
.shell-icon-btn:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
text-decoration: none;
}
.shell-icon-btn.is-active {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
/* ============================================================
Mobile-Toggle (Hamburger)
============================================================ */
.shell-mobile-toggle {
display: none;
background: transparent;
border: 1px solid #000;
border-radius: 10px;
width: var(--shell-control-h); height: var(--shell-control-h);
box-sizing: border-box;
cursor: pointer;
color: #000;
font-size: 1.1rem;
align-items: center; justify-content: center;
transition: background-color .15s, color .15s, border-color .15s;
}
.shell-mobile-toggle:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
/* ============================================================
Buttons (lp-2-Stil, gemeinsam)
============================================================ */
.btn-primary-shell {
background: #000;
color: var(--color-brand);
border: 1px solid #000;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
}
.btn-primary-shell:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
text-decoration: none;
}
.btn-primary-shell:active { transform: translateY(1px); }
.btn-outline-shell {
background: transparent;
color: #000;
border: 1px solid #000;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
}
.btn-outline-shell:hover {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
text-decoration: none;
}
/* ============================================================
Footer
============================================================ */
.shell-footer {
background: var(--bg-soft);
border-top: 1px solid var(--border-soft);
padding: 64px 0 32px;
margin-top: 80px;
color: var(--text-soft);
font-size: 0.92rem;
}
.shell-footer__grid {
display: grid;
/* 4 Spalten: Logo/Tagline, Produkt, Rechtliches, Kontakt
* (Unternehmen-Sektion entfernt) */
grid-template-columns: 1.4fr repeat(2, 1fr) 1.2fr;
gap: 40px;
margin-bottom: 40px;
}
.shell-footer__logo {
font-weight: 800;
font-size: 1.4rem;
color: var(--text);
margin-bottom: 12px;
letter-spacing: -1px;
}
.shell-footer__logo span { color: var(--primary); }
.shell-footer h5 {
color: var(--text);
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 14px;
}
.shell-footer a {
display: block;
color: var(--color-text-soft);
text-decoration: none;
padding: 4px 0;
cursor: pointer;
transition: color var(--transition-fast);
}
.shell-footer a:hover {
color: var(--color-brand);
text-decoration: none;
}
.shell-footer__contact div {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.shell-footer__contact i {
color: var(--text-muted);
width: 18px; text-align: center;
}
.shell-footer__copy {
border-top: 1px solid var(--border-soft);
padding-top: 24px;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
/* ============================================================
Slim-Footer (kleinere Variante fürs Backoffice)
============================================================ */
.shell-footer--slim {
padding: 18px 0;
margin-top: 40px;
}
.shell-footer--slim .shell-footer__grid { display: none; }
.shell-footer--slim .shell-footer__copy {
/* 2-Zeilen-Layout: oben die Links (.shell-footer__links), unten das
* Copyright (.shell-footer__copyright). Beide zentriert. */
border-top: none;
padding-top: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.shell-footer--slim .shell-footer__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 8px;
}
.shell-footer--slim .shell-footer__copyright {
text-align: center;
}
/* Footer-Links: gleicher Look wie die Auth-Card .btn-link
* (transparenter Hintergrund, dezenter Text; beim Hover wird der Link
* mit Brand-Soft-Hintergrund und UIColor-Text gefüllt — wie bei
* "Kostenpflichtig registrieren" / "Zur Anmeldung zurück" auf den
* Auth-Seiten). */
.shell-footer--slim .shell-footer__copy a,
.shell-footer--slim .shell-footer__copy a:link,
.shell-footer--slim .shell-footer__copy a:visited {
display: inline-block;
color: var(--color-text-soft);
text-decoration: none;
padding: 4px 4px;
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast);
cursor: pointer;
}
.shell-footer--slim .shell-footer__copy a:hover {
color: var(--color-brand);
background: var(--color-brand-soft);
border-color: var(--color-brand-line);
text-decoration: none;
}
/* ============================================================
Mobile-Verhalten
============================================================ */
@media (max-width: 1075px) {
/* WICHTIG (z-index / Stacking):
* Die Off-Canvas-Nav (.shell-nav) und das Backdrop (.shell-nav-backdrop)
* werden beim Öffnen per JS (shell.js) ans -Ende verschoben
* (appendChild). Sie sind dann KEINE Kinder des Headers mehr und können
* vom Header-Stacking-Context nicht eingesperrt werden. Im Body-Context
* gilt: Nav (9999) > Backdrop (9998) → korrekt.
*
* Deshalb darf — und MUSS — der Header weiterhin einen echten,
* positiven z-index behalten. Wird er (wie früher) auf `auto` gesetzt,
* landet er im selben Stacking-Layer wie z.B. die Bootstrap-.input-group
* der Jahresauswahl (position: relative, z-index: auto). Dann entscheidet
* die DOM-Reihenfolge — und die später im DOM stehende Jahresauswahl
* überdeckt das geöffnete Sprach-/User-Menü (siehe Bug-Report).
*
* Mit z-index 1050 bildet der Header einen Stacking-Context ÜBER dem
* Seiteninhalt; seine Dropdowns (z-index 1060) liegen damit zuverlässig
* über Jahresauswahl, Kalender etc. */
.shell-header {
z-index: 1050;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.shell-header__inner {
/* Mobile: 2-Spalten-Layout (Logo links | Rest rechts).
* Die Nav wird per Off-Canvas ausgeklappt und braucht keine eigene
* Grid-Spalte mehr. minmax(0,1fr): rechte Spalte darf schrumpfen. */
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
/* Kleinere Steuerelemente auf Mobil, damit der rechte Cluster (inkl.
* KI-Agent) in die Breite passt. */
--shell-control-h: 34px;
}
/* eTime-Schriftzug auf Mobil ausblenden (Platz fuer die Steuerelemente);
* das Uhr-Icon bleibt als Marke/Home-Link. */
.shell-logo { display: none; }
/* Engere Abstaende im rechten Cluster auf Mobil. */
.shell-header__right { gap: 4px; }
/* Eingeschaltet (Burger): rechte Steuerelemente buendig an den rechten
* Rand der 1fr-Spalte, statt linksbuendig direkt hinters Logo. */
.shell-header__right {
/* Cluster fuellt nur seine Grid-Spalte (stretch) und richtet die Buttons
* rechtsbuendig aus. KEIN overflow hier — das wuerde die Dropdowns
* (Firma/Sprache/User klappen nach unten auf) abschneiden. Genug Platz
* entsteht durch kleinere Controls + ausgeblendeten Schriftzug. */
justify-self: stretch;
justify-content: flex-end;
min-width: 0;
flex-shrink: 1;
flex-wrap: nowrap;
}
.shell-mobile-toggle {
display: inline-flex;
}
/* Hauptnav versteckt + slide-in als Off-Canvas */
.shell-nav {
display: none;
position: fixed;
top: 0; left: 0;
width: 280px;
height: 100vh;
background: #fff;
padding: 24px;
box-shadow: var(--shadow-lg);
z-index: 9999 !important; /* defensiv hoch */
pointer-events: auto !important; /* sicherstellen klickbar */
flex-direction: column;
align-items: stretch;
gap: 4px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .2s ease-out;
}
.shell-nav.is-open {
display: flex;
transform: translateX(0);
}
/* Children sollen Klicks empfangen — defensiv */
.shell-nav a,
.shell-nav .shell-nav__item,
.shell-nav__menu a {
pointer-events: auto !important;
}
.shell-nav > a,
.shell-nav > .shell-nav__item,
.shell-nav__group > .shell-nav__item {
padding: 12px 8px;
border-radius: 8px;
gap: 12px;
font-size: 1rem;
}
.shell-nav > .shell-nav__item:hover,
.shell-nav > a:hover,
.shell-nav__group > .shell-nav__item:hover {
background: var(--bg-subtle);
}
/* Dropdowns auf Mobile aufgeklappt */
.shell-nav__menu {
position: static;
display: block;
margin: 4px 0 12px 24px;
box-shadow: none;
border: none;
padding: 0;
background: transparent;
min-width: 0;
}
.shell-nav__menu a {
padding: 8px 12px;
font-size: 0.92rem;
}
.shell-nav__caret::after {
display: none;
}
/* Backdrop für Off-Canvas */
.shell-nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 9998 !important; /* knapp unter Nav (9999) */
}
.shell-nav-backdrop.is-open { display: block; }
/* Auf Mobile schmaler Footer */
.shell-footer__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ============================================================================
SEKTION 3 — APP-LAYOUT (ehem. index.css)
============================================================================
App-spezifisches Layout: .content-Wrapper, Tabellen-Erweiterungen,
Calendar, Charts-Container.
Anpassung gegenüber index.css:
- .btn-primary-Block ENTFERNT (kollidierte: schwarzer Hintergrund mit
--bg-Border. Wird jetzt in der Theme-Sektion mit Flat-UIColor neu
definiert.)
- .card-Block ENTFERNT (kollidierte: 20px Padding und feste
Hintergrund-Settings. Wird in Theme-Sektion neu definiert.)
============================================================================ */
/* SHELL-INTEGRATION:
* Die alte fixed-bottom Status-Navbar gibt es nicht mehr — kein
* padding-bottom mehr nötig. Der Shell-Footer fließt im Dokumentfluss.
*/
body {
padding-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 1px var(--bg);
}
.content {
/* SHELL-INTEGRATION:
* Vorher 90px margin-top für die alte fixed-top-Navbar.
* Der Shell-Header ist "position: sticky" (nicht fixed), nimmt also
* im Layout Platz weg — kein margin-top mehr nötig, sonst doppelter Abstand.
*/
margin: 20px 20px 20px 20px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
opacity: 0.5;
filter: alpha(opacity=50);
background-color: black;
}
.spinner {
left: calc(50% - 35px);
top: calc(50% - 35px);
position: absolute;
}
.scrollToTop {
position: fixed;
bottom: 70px;
right: 20px;
width: 45px;
height: 45px;
background-color: black;
color: var(--bg);
border: 1px solid var(--bg);
border-radius: 50%;
text-align: center;
line-height: 43px;
font-size: 20px;
z-index: 1000;
display: none;
transition: all 0.3s ease;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.scrollToTop:hover {
background-color: var(--bg);
color: black;
transform: translateY(-5px);
}
/* Alte Focus-Regel auf textarea/input/.input-select aus index.css ENTFERNT.
* Sie hatte mit !important einen Inset-Schatten + 8px-Glow-Schatten gesetzt,
* der den modernen Auth-Look (var(--shadow-focus)) überschrieb. Die neue
* Definition steht weiter unten in der Theme-Sektion. */
/* Input-Group-Text: das schwarze Icon-Quadrat links (oder rechts) vom
* Input/Select. Wird in zwei Patterns verwendet:
*
* 1.
* → Bootstrap-Standard, z.B. Region/Zeitzone-Felder im Firmenprofil
*
* 2.
* → Älteres Pattern, z.B. Jahresauswahl-Pfeile, Datums-Picker-Pfeile.
* Hier IST das selbst der Button-Inhalt.
*
* Beide Patterns sollen gleich aussehen: schwarzes Quadrat, UIColor-Icon,
* gleiche Höhe wie das Input/Select daneben.
*
* Die display:inline-flex sorgt dafür, dass auch -Elemente die Größe
* korrekt einnehmen (sonst greift width auf nicht).
*
* HINWEIS für Pattern 2 (FA-Icon mit input-group-text-Klasse direkt am ):
* Wir setzen font-family hier NICHT, damit FA's eigene .fa-solid /.fa-regular
* Regeln die FA-Schriftart festlegen können. */
.input-group-text {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 50px;
height: 38px;
box-sizing: border-box;
border: 1px solid #000 !important;
background-color: #000 !important;
color: var(--color-brand) !important;
font-size: 1.1rem;
line-height: 1;
padding: 0;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.input-group-text:hover {
background-color: var(--color-brand) !important;
color: #000 !important;
}
/* Statisches Einheiten-/Label-Addon (z.B. "h" hinter einer Stundenzahl):
* NICHT klickbar -> kein Pointer-Cursor und kein Hover-Wechsel. Höhe/Breite
* richten sich nach dem Nachbar-Input (Flex-Stretch) statt der festen
* 50x38-Box der klickbaren Icon-Addons, damit die Box exakt so hoch ist wie
* das Eingabefeld daneben. */
.input-group-text.input-group-text--unit {
cursor: default;
width: auto;
height: auto;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.input-group-text.input-group-text--unit:hover {
background-color: #000 !important;
color: var(--color-brand) !important;
}
/* Spezialfall Pattern 2: FA-Klasse direkt am kombiniert mit
* input-group-text. Wir stellen explizit sicher, dass die FA-Schriftart
* verwendet wird, falls eine andere Regel sie überschrieben hätte. */
i.input-group-text.fa-solid,
i.input-group-text.fa-regular,
i.input-group-text.fa-brands {
font-family: "Font Awesome 6 Free" !important;
}
i.input-group-text.fa-brands {
font-family: "Font Awesome 6 Brands" !important;
}
i.input-group-text.fa-solid {
font-weight: 900 !important;
}
i.input-group-text.fa-regular {
font-weight: 400 !important;
}
/* HINWEIS: Der Stil für .input-group > a steht weiter unten in der
* input-group-Sektion (display:flex, text-decoration:none), damit alle
* input-group-Regeln zusammen stehen. */
textarea {
resize: none;
}
/* TableView-Inputs und -Selects:
* Gleiche Optik wie .form-control in der Theme-Sektion (Auth-Look mit
* weichen Rundungen statt Bootstrap-Default-Kanten). Hat aktuell width:100%
* damit Inputs die volle Zellbreite einnehmen. */
td input,
td select,
td textarea,
.input-select {
width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 6px 10px;
font-size: var(--font-size-sm);
background: var(--color-bg);
color: var(--color-text);
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
td input:focus,
td select:focus,
td textarea:focus,
.input-select:focus {
border-color: var(--color-brand);
box-shadow: var(--shadow-focus);
outline: none;
}
.input-select {
height: 34px;
}
/* Mobil: Eingaben in Tabellen (TableView) brauchen eine Mindestbreite, sonst
* quetscht das Auto-Layout sie auf wenige Pixel zusammen und man erkennt
* nichts. Die Tabelle scrollt dafür horizontal in .table-responsive (normales
* Mobil-Tabellen-Verhalten). Farbe/Checkbox/Radio bleiben unberührt (eigene
* feste Größen). Desktop bleibt unverändert (kein erzwungenes min-width). */
@media (max-width: 767px) {
td input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
td select,
td textarea {
min-width: 8.5em;
}
}
/* TableView-Action-Buttons: quadratisch, größere Icons, gleiche
* Höhe wie die Inputs daneben. Greift nur in TableView-Tabellen
* (Button-Spalte ist immer das letzte td mit class="text-end"). */
td.text-end > a.btn.btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 1rem;
border-radius: var(--radius-md);
margin: 0 2px;
vertical-align: middle;
}
td.text-end > a.btn.btn-sm i {
margin: 0;
}
/* Input-Type=color in TableView: kleines quadratisches Farbfeld.
* padding: 5px gibt einen schmalen weißen Innenrand um das Farbfeld
* (User-Wunsch nach Iteration über 0/2/5px). */
td input[type="color"],
td input.color-selection {
width: 40px;
height: 34px;
padding: 10px;
cursor: pointer;
}
td input[type="checkbox"],
td input[type="radio"] {
width: auto;
height: auto;
padding: 0;
}
/* Bootstrap-Checkboxen (.form-check-input) in Tabellenzellen:
* width/height:auto aus der Regel darüber kollabiert appearance:none-
* Checkboxen auf 0×0 — sie wären unsichtbar (z.B. Auswahl-Checkboxen
* der Konten-Übernahme). Explizite Größe stellt die Bootstrap-Optik
* wieder her. */
td .form-check-input[type="checkbox"] {
width: 1.15em;
height: 1.15em;
}
select.user_data_input[multiple] option:checked {
background: black linear-gradient(0deg, black 0%, black 100%) !important;
color: var(--bg) !important;
}
select.user_data_input[multiple]:focus {
outline: 1px solid var(--bg) !important;
}
/* Utility-Klasse: erzwingt display:none, auch wenn andere Selektoren
* display:inline-flex etc. setzen (z.B. Bootstrap-Buttons mit
* class="btn hidden"). Wird per JS umgeschaltet, um Elemente bei
* Bedarf ein-/auszublenden. */
.hidden {
display: none !important;
}
.menu-logo {
color: var(--bg);
font-size: 1.25em;
}
.year-selection-div {
/* Flex-Container, damit die innere .input-group per
* justify-content: flex-end zuverlässig nach rechts rückt.
* Vorher haben wir das per flex-row-reverse auf der .input-group
* selbst gemacht — das schob als Side-Effect aber auch die
* :first-child/:last-child-Logik durcheinander, sodass border-radius
* an der falschen Seite landete. */
display: flex;
justify-content: flex-end;
width: 100%;
padding: 10px;
}
/* Bootstrap setzt .input-group { width: 100% } per Default — das verhindert,
* dass justify-content: flex-end die Pille nach rechts rücken kann
* (volle Breite = keine freie Strecke zum Rücken). width: auto setzt das
* zurück, damit die Pille content-breit ist und nach rechts wandern kann. */
.year-selection-div > .input-group {
width: auto;
}
#year_selection,
.year-selection-div #shift_date_selection {
width: 100px;
text-align: center;
height: 38px;
box-sizing: border-box;
padding: 6px 10px;
border: 1px solid #000;
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
}
/* Datums-Variante (Schichtenseite) braucht mehr Breite für dd.mm.yyyy
inkl. nativem Kalender-Icon. Gleicher Rahmen/Look wie die Jahresauswahl. */
.year-selection-div #shift_date_selection {
width: 150px;
}
#year_selection:focus,
.year-selection-div #shift_date_selection:focus {
border-color: var(--color-brand);
outline: none;
box-shadow: none;
}
#month_selection_select {
margin-bottom: 5px;
}
.fixed-bottom a {
color: black;
}
.loggedin-user {
text-shadow: 0 0 2px var(--bg);
color: black;
}
.btn {
margin: 2px;
}
/* In input-groups soll der Buttons-Margin weg, damit die Elemente
* nahtlos aneinander stoßen (visuelle Button-Gruppe). */
.input-group .btn,
.input-group a {
margin: 0;
}
.input-group-append a i, .input-group-prepend a i {
border-radius: 0px !important;
}
.tooltip-inner {
white-space: pre-wrap;
}
.tooltip {
pointer-events: none;
z-index: 10000 !important;
}
.navbar form a {
min-width: 43px;
}
.nav-link, .nav-link:hover {
color: black;
font-weight: bold;
}
.iziToast > .iziToast-body .iziToast-texts {
display: flex !important;
flex-direction: column !important;
}
.iziToast-texts .iziToast-title {
margin-right: 0 !important;
display: block !important;
margin-bottom: 5px;
}
.iziToast-texts .iziToast-message {
display: block !important;
margin-left: 0 !important;
}
.flag-icon {
font-size: 40px !important;
margin: 5px;
}
.flag-icon:hover {
cursor: pointer;
opacity: 50%;
}
#accordion .card {
margin-bottom: 10px;
}
#accordion .card-body .card {
border: none;
box-shadow: none;
}
.card-header h5 button, .card-header h5 button:hover {
color: black;
font-weight: bold;
}
.card-body select {
width: 100%;
}
.centered-form.card {
position: fixed;
width: 100%;
max-width: 560px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
border: none !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
padding: 20px !important;
}
.centered-form .card-title {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.card-icon {
color: var(--bg);
background-color: #000000;
border-radius: 50%;
font-size: 30px;
width: 50px;
height: 50px;
line-height: 50px;
padding-top: 0;
margin-top: 0;
margin-right: 15px;
float: none;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.centered-form .card-title h3 {
margin: 0;
font-size: 20px;
padding: 0;
text-shadow: none;
}
.card-body select:focus {
border-color: var(--bg70) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--bg50) !important;
outline: 0 none;
}
#button_register_company, #button_goto_login, #button_reset_password, #google_sso_login, #button_demo {
color: black;
font-size: 14px;
}
#button_register_company:hover, #button_goto_login:hover, #button_reset_password:hover, #google_sso_login:hover, #button_demo:hover {
color: var(--bg);
}
#button_register_company, #button_reset_password, #google_sso_login {
margin-right: 5px;
}
.btn-full-width {
width: 100%;
margin-top: 10px;
}
.color-selection {
width: 25px;
height: 25px;
padding: 5px;
border: 1px solid black;
}
.calendar {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.calendar-employee-name, .calendar-employee-name-inactive, .calendar-month-name {
display: inline-block;
font-weight: bold;
border: 1px solid black;
padding-left: 5px;
}
.calendar-employee-name a, .calendar-employee-name-inactive a, .calendar-month-name a, .calendar-day a, .calendar-day-inactive a {
color: black;
}
.calendar-employee-name a:hover, .calendar-month-name a:hover {
color: var(--bg);
}
.calendar-day, .calendar-day-inactive {
display: inline-block;
width: 30px;
margin-left: -1px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
.comment_gold {
background-image: url("../img/comment_gold.png");
}
.comment_red {
background-image: url("../img/comment_red.png");
}
.calendar-day-highlight {
background-color: black !important;
box-shadow: inset 2px 2px 1.5em #ff0000;
}
/* Auswahl reservierter (genehmigter) Urlaubstage für die Stornierung —
bewusst anders als .calendar-day-highlight, damit sich Antrags- und
Storno-Auswahl nicht vermischen. */
.calendar-cancel-highlight {
outline: 3px solid #dc3545;
outline-offset: -2px;
box-shadow: inset 2px 2px 1.5em rgba(220, 53, 69, 0.55);
}
.absence-type-preview {
width: 200px;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
color: #000000;
}
.nowrap {
white-space: nowrap;
}
.red {
color: #a94442;
}
.green {
color: #3c763d;
}
.lime {
color: #01ff70;
}
.fixed-table-toolbar .input-group .input-group-append .btn, .page-list .btn-group .btn {
margin: 0;
color: var(--bg);
background-color: black;
border-color: black;
}
.page-item.active .page-link {
color: var(--bg);
background-color: black;
border-color: black;
}
.page-item .page-link {
color: black;
background-color: #fffff;
border-color: black;
}
.highlight-line {
background-color: #fce4e4 !important;
border-left: 2px solid #f8a3a3;
}
/* Die Markierung muss auch auf den Zellen liegen: .table-striped/.table-hover
setzen einen td-Hintergrund, der den tr-Hintergrund sonst überdeckt
(sichtbar nur bei geraden Zeilen). !important schlägt beide Regeln. */
.highlight-line > td {
background-color: #fce4e4 !important;
}
#qr_code_inputX, #qr_code_inputX:focus {
color: #ffffff !important;
background-color: #ffffff !important;
border: 0 solid #ffffff !important;
box-shadow: 0 0 0 0 !important;
}
#qr_code_input {
caret-color: transparent !important;
color: transparent !important;
selection-background-color: transparent !important;
outline: none !important;
border: none !important;
user-select: none !important;
}
.sidebar-wrapper {
position: fixed;
right: 0;
z-index: 9999;
display: flex;
transition: transform 0.3s ease;
transform: translateX(calc(100% - 40px));
}
.sidebar-wrapper:hover, .sidebar-wrapper.is-open {
transform: translateX(0);
}
#colorSidebar {
top: 150px;
}
#recruitSidebar {
top: 200px;
}
#onlineSidebar {
top: 250px;
}
.online-sidebar .sidebar-content {
min-width: 180px;
}
#online_list_container strong {
display: inline-block;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.sidebar-handle {
width: 40px;
height: 40px;
background: #212529;
color: var(--bg);
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px 0 0 5px;
cursor: pointer;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}
.sidebar-content {
background: white;
padding: 10px;
border: 1px solid #ddd;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
min-width: 150px;
}
.recruit-sidebar .sidebar-content {
min-width: 200px;
}
.recruit-sidebar h6 {
text-shadow: none;
color: #333;
}
.color-grid {
display: grid;
grid-template-columns: repeat(3, 30px);
gap: 5px;
}
.color-box-wrapper {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 3px;
border: 1px solid #ddd;
}
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: #999;
text-align: center;
height: 1.5em;
opacity: 0.8;
margin: 10px 0 5px 0;
}
.hr-text:before {
content: '';
background: linear-gradient(to right, transparent, #ccc, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.hr-text span {
position: relative;
display: inline-block;
padding: 0 10px;
background: #f8f9fa;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.legal-consent-container {
background-color: #f8f9fa;
padding: 15px;
border: 1px solid black;
border-radius: 8px;
margin-bottom: 20px;
}
.legal-consent-container .custom-control-label {
line-height: 1.5;
color: #333;
cursor: pointer;
}
.legal-consent-container a {
color: black;
text-decoration: none;
}
.legal-consent-container a:hover {
border-bottom: 1px solid var(--bg);
transition: all 0.2s;
}
.legal-checkbox-card {
padding-left: 20px !important;
font-size: 16px;
}
.custom-control-input:checked ~ .custom-control-label::before {
background-color: black !important;
border-color: black !important;
}
.blink {
animation: blink 2s infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
@media (hover: none) {
.navbar .btn-primary:hover,
.navbar .btn-primary:active {
background-color: #000000 !important;
color: var(--bg) !important;
}
}
@media (max-width: 1089px) {
#month_selection_navtabs {
display: none;
}
}
@media (min-width: 1090px) {
#month_selection_select {
display: none;
}
}
@media (max-width: 675px) {
.navbar form {
margin-left: auto;
width: auto;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.content {
margin-left: 7px;
margin-right: 7px;
}
}
/* ============================================================================
SEKTION 4 — URLAUBS-KALENDER (ehem. vacation.css)
============================================================================ */
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #ffffff;
border: solid 1px #ccc;
margin: 1px;
min-height: 0;
min-width: 0;
width: 24vw;
float: left;
margin-bottom: 25px;
}
.day-item {
padding: 5px;
overflow: hidden;
min-width: 0;
cursor: pointer;
caret-color: transparent;
}
.month-name {
position: absolute;
width: 24vw;
background: #000000;
color: rgb(213, 43, 30);
margin-top: -25px;
margin-left: -1px;
padding-left: 10px;
font-weight: bold;
}
@media (max-width: 1800px) {
.month-grid, .month-name {
width: 32vw;
}
}
@media (max-width: 1600px) {
.month-grid, .month-name {
width: 47vw;
}
}
@media (max-width: 1050px) {
.month-grid, .month-name {
width: 95vw;
}
}
/* ============================================================================
SEKTION 5 — MODERN-LIGHT THEME (Look-Override)
============================================================================
Lädt zuletzt und überschreibt alle Defaults von Bootstrap + den vorherigen
Sektionen mit der konsolidierten App-Optik.
Anpassungen ggü. der vorherigen theme.css:
- Body komplett weiß, kein Pastell-Gradient mehr (Userwahl)
- Buttons flat (nur UIColor), Hover via filter:brightness(0.88)
- Titel-mit-Icon: konsistent Brand-Soft-Kreis (wie Auth-Pages)
- Subtiler Card-Header-Gradient bleibt erhalten
============================================================================ */
/* ---------------------------------------------------------------------------
T1. Body & Globale Typografie
--------------------------------------------------------------------------- */
body[data-page]:not(.auth-page) {
background: #ffffff;
font-family: var(--font-sans);
color: var(--color-text);
}
/* ---------------------------------------------------------------------------
T2. Cards
--------------------------------------------------------------------------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
padding: 0;
transition: box-shadow var(--transition-base);
}
.card.shadow,
.card.shadow-sm {
box-shadow: var(--shadow-md);
}
/* Card-Header: schlicht weiß, keine Akkordion-Gradienten mehr */
.card-header {
background: #fff;
border-bottom: 1px solid var(--color-border-soft);
padding: var(--space-4) var(--space-5);
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
}
.card-header.bg-white { background: #fff; }
.card-body { padding: var(--space-5); }
.card-footer { background: #fff; border-top: 1px solid var(--color-border-soft); padding: var(--space-4) var(--space-5); }
.card-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-ink);
margin-bottom: var(--space-3);
}
/* ---------------------------------------------------------------------------
T3. Titel-mit-Icon (das wichtigste visuelle Element)
---------------------------------------------------------------------------
Wenn ein ein als ersten Child hat, rendert es
wie auf den Auth-Pages: Icon im Brand-Soft-Kreis links, Text rechts.
Beispiel:
Shop
--------------------------------------------------------------------------- */
.card-header h5,
.card-header h4,
.card-header h3 {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
}
.card-header h5 > i.fa-solid,
.card-header h5 > i.fa-regular,
.card-header h5 > i.fa-brands,
.card-header h4 > i.fa-solid,
.card-header h4 > i.fa-regular,
.card-header h4 > i.fa-brands,
.card-header h3 > i.fa-solid,
.card-header h3 > i.fa-regular,
.card-header h3 > i.fa-brands {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-line));
color: var(--color-brand);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
box-shadow: var(--shadow-xs);
/* me-2-Margin aus dem Original-HTML wegnegieren (Icon hat eigene Lücke
* durch Flex-Gap). */
margin: 0 !important;
flex-shrink: 0;
}
/* Analog auch für andere Titel-Kontexte (außerhalb card-header) */
h1 > i.fa-solid, h1 > i.fa-regular, h1 > i.fa-brands,
h2 > i.fa-solid, h2 > i.fa-regular, h2 > i.fa-brands,
h3 > i.fa-solid, h3 > i.fa-regular, h3 > i.fa-brands,
h4 > i.fa-solid, h4 > i.fa-regular, h4 > i.fa-brands,
h5 > i.fa-solid, h5 > i.fa-regular, h5 > i.fa-brands {
/* Gilt nur wenn der h-Tag explizit display:flex hat, sonst lassen
* wir die Standard-Inline-Optik. Den Stil greifen wir nur dann ab,
* wenn das h selbst flex/inline-flex ist. */
}
/* ---------------------------------------------------------------------------
T4. Buttons — Schwarzer Hintergrund + UIColor als Vordergrund
---------------------------------------------------------------------------
Designentscheidung 2026-05:
- Buttons sind schwarz (#000) mit UIColor-Text/Icon (var(--color-brand))
- Hover invertiert: UIColor wird Hintergrund, Schwarz wird Vordergrund
- Gilt für alle solid- und outline-Varianten
- Outline-Buttons: Default = schwarzer Text auf transparentem Grund mit
schwarzer Border; Hover = wird zu solid (schwarz/UIColor) gefüllt
--------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
border: 1px solid transparent;
transition: background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base),
box-shadow var(--transition-base);
text-decoration: none;
cursor: pointer;
}
.btn:disabled,
.btn.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn:focus,
.btn:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* Primary: schwarz + UIColor, Hover invertiert */
.btn-primary {
background: #000;
color: var(--color-brand);
border-color: #000;
}
.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:active:not(:disabled):not(.disabled),
.btn-primary:focus:not(:disabled):not(.disabled) {
background: var(--color-brand);
color: #000;
border-color: var(--color-brand);
}
/* Secondary: gleiche Logik, nur ohne Brand-Farbe (etwas zurückgenommen) */
.btn-secondary {
background: #000;
color: #fff;
border-color: #000;
}
.btn-secondary:hover:not(:disabled):not(.disabled) {
background: #fff;
color: #000;
border-color: #000;
}
/* Solid-State-Buttons (success/danger/warning/info): schwarz mit
* State-Farbe als Vordergrund, Hover invertiert */
.btn-success {
background: #000;
color: var(--color-success);
border-color: #000;
}
.btn-success:hover:not(:disabled):not(.disabled) {
background: var(--color-success);
color: #000;
border-color: var(--color-success);
}
.btn-danger {
background: #000;
color: var(--color-danger);
border-color: #000;
}
.btn-danger:hover:not(:disabled):not(.disabled) {
background: var(--color-danger);
color: #000;
border-color: var(--color-danger);
}
.btn-warning {
background: #000;
color: var(--color-warning);
border-color: #000;
}
.btn-warning:hover:not(:disabled):not(.disabled) {
background: var(--color-warning);
color: #000;
border-color: var(--color-warning);
}
.btn-info {
background: #000;
color: var(--color-info);
border-color: #000;
}
.btn-info:hover:not(:disabled):not(.disabled) {
background: var(--color-info);
color: #000;
border-color: var(--color-info);
}
/* Outline-Buttons:
* Default = transparenter Hintergrund, schwarzer Text, schwarze Border;
* Hover = wird zu solid schwarz/UIColor gefüllt */
.btn-outline-primary {
background: transparent;
color: #000;
border-color: #000;
}
.btn-outline-primary:hover {
background: #000;
color: var(--color-brand);
border-color: #000;
}
/* Outline-State-Buttons: semantische Farben (danger=rot, success=grün etc.).
* Default: transparent + State-Color für Text und Border.
* Hover: filled mit der State-Color als Hintergrund + schwarzer Text.
* Diese behalten ihre semantische Bedeutung — anders als .btn-outline-primary,
* das schwarz/UIColor folgt. */
.btn-outline-success {
background: transparent;
color: var(--color-success);
border-color: var(--color-success);
}
.btn-outline-success:hover {
background: var(--color-success);
color: #000;
border-color: var(--color-success);
}
.btn-outline-danger {
background: transparent;
color: var(--color-danger);
border-color: var(--color-danger);
}
.btn-outline-danger:hover {
background: var(--color-danger);
color: #000;
border-color: var(--color-danger);
}
.btn-outline-warning {
background: transparent;
color: var(--color-warning);
border-color: var(--color-warning);
}
.btn-outline-warning:hover {
background: var(--color-warning);
color: #000;
border-color: var(--color-warning);
}
.btn-outline-info {
background: transparent;
color: var(--color-info);
border-color: var(--color-info);
}
.btn-outline-info:hover {
background: var(--color-info);
color: #000;
border-color: var(--color-info);
}
.btn-sm { padding: 4px var(--space-3); font-size: var(--font-size-xs); }
.btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--font-size-base); }
.btn-block { width: 100%; }
/* ---------------------------------------------------------------------------
T5. Form-Inputs
--------------------------------------------------------------------------- */
.form-control,
.form-select {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
background: var(--color-bg);
color: var(--color-text);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
box-shadow: none;
}
.form-control:focus,
.form-select:focus {
border-color: var(--color-brand);
box-shadow: var(--shadow-focus);
background: var(--color-bg);
color: var(--color-text);
outline: none;
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 1; }
.form-control[readonly],
.form-control:disabled {
background: var(--color-bg-soft);
color: var(--color-text-soft);
}
.form-control-lg { padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); }
.form-control-sm { padding: 4px var(--space-2); font-size: var(--font-size-xs); }
/* Selects mit der Legacy-Klasse "form-control" (statt Bootstrap-5's "form-select")
* bekommen den Standard-Dropdown-Pfeil. Bootstrap 5 rendert ihn nur für
* .form-select via background-image, aber viel Anwendungscode (modals.js, alte
* Templates) nutzt noch