/* =============================================================================
Urlaubsplaner v2 — Designsystem (Premium)
- Fahrer / App-Shell (page-app): Dark-Mode, mobile-first
- Chef / Admin (page-chef): Light-Mode, Desktop-first mit Sidebar
- Mint als Hauptakzent · Team-Farben Pharma blau / KFZ orange
- Spacing / Shadow / Motion / Z-Index als Token; Premium-Polish überall
============================================================================= */
@import url('./fonts/fonts.css');
/* ============ TOKENS ============ */
:root {
/* Mint accent */
--mint: #3DD9B6;
--mint-soft: #D8F4EC;
--mint-deep: #1FA889;
--mint-darker:#187862;
--mint-glow: rgba(61, 217, 182, 0.22);
--mint-glow-2:rgba(61, 217, 182, 0.40);
/* Teams */
--pharma: #5B7BDB;
--pharma-deep: #3D5DBD;
--pharma-soft: #DDE5F8;
--kfz: #E8804E;
--kfz-deep: #B8551F;
--kfz-soft: #FBE0D0;
/* Krankheit — bewusst NICHT rot/orange (zu ähnlich zu KFZ),
sondern Anthrazit-Grau für klare Abgrenzung. */
--sick: #3F3F46;
--sick-soft: rgba(63, 63, 70, 0.12);
--sick-ink: #27272A;
/* Status (semantic) */
--success: var(--mint);
--success-soft: var(--mint-soft);
--success-ink: #186456;
--warning: #F4B942;
--warning-soft: #FBEAC4;
--warning-ink: #7A5715;
--danger: #E8704F;
--danger-soft: #FBD9CE;
--danger-ink: #8E2E15;
--info: #5B7BDB;
--info-soft: #DDE5F8;
/* Light mode (Chef/Admin Desktop + Fahrer-Light) — Cool Platinum
Leicht kühler Anflug, harmoniert mit Mint + Pharma-Blau. */
--bg: #E4E6E8;
--bg-alt: #D4D7DA;
--bg-elev: #ECEEF0;
--card: #FFFFFF;
--card-elev: #FFFFFF;
/* Light-Mode-Akzent: tieferer Teal-Mint für besseren Kontrast auf hellem Grau */
--mint: #1FA889;
--mint-glow: rgba(31, 168, 137, 0.28);
--mint-glow-2:rgba(31, 168, 137, 0.45);
--ink: #18181D;
--ink-2: #4A4A52;
--ink-3: #6E6E76;
--ink-4: #A1A1A8;
--line: rgba(24, 24, 29, 0.10);
--line-2: rgba(24, 24, 29, 0.14);
--line-3: rgba(24, 24, 29, 0.24);
--hairline: rgba(24, 24, 29, 0.12);
--focus-ring: rgba(61, 217, 182, 0.45);
--backdrop: rgba(20, 20, 28, 0.45);
/* Shadows — premium feel, soft & layered (Light-Mode: spürbar tiefer) */
--shadow-xs: 0 1px 2px rgba(20, 20, 28, 0.06);
--shadow-sm: 0 1px 3px rgba(20, 20, 28, 0.08), 0 1px 2px rgba(20, 20, 28, 0.05);
--shadow-md: 0 8px 20px -6px rgba(20, 20, 28, 0.14), 0 4px 8px -3px rgba(20, 20, 28, 0.06);
--shadow-lg: 0 20px 40px -12px rgba(20, 20, 28, 0.22), 0 8px 16px -6px rgba(20, 20, 28, 0.10);
--shadow-xl: 0 32px 64px -16px rgba(20, 20, 28, 0.30), 0 12px 24px -10px rgba(20, 20, 28, 0.14);
--shadow-glow:0 12px 28px -8px var(--mint-glow), 0 0 0 1px rgba(31, 168, 137, 0.08);
/* Radii */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 24px;
--r-2xl: 32px;
--r-pill: 999px;
/* Spacing scale */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 28px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
/* Motion */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* Z-Index */
--z-base: 1;
--z-sticky: 20;
--z-nav: 50;
--z-drawer: 80;
--z-modal: 100;
--z-toast: 200;
/* Container */
--app-max: 520px;
--chef-max: 1400px;
--sidebar-w: 232px;
/* Fonts */
--font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---- Card-Tiefe (überall konsistent — hier zentral steuern) ----
Default (Light): subtiler dunkler Anflug für Tiefe auf weißen Cards.
Wird im Dark-Mode (page-app default + page-chef[data-theme=dark]) überschrieben. */
--card-shine: rgba(20, 20, 28, 0.025); /* radial-Highlight oben-rechts */
--card-edge: rgba(20, 20, 28, 0.04); /* Inset-Highlight obere Kante */
/* ---- Nav-Item States (Hover + Active) ---- */
--nav-hover-bg: rgba(61, 217, 182, 0.05);
--nav-active-bg: rgba(61, 217, 182, 0.12);
--nav-active-ring: rgba(61, 217, 182, 0.20);
}
/* Dark mode für die Fahrer-App. Override aller relevanten Variablen.
Theme wird live via data-theme am -Element gesteuert (siehe app.js). */
.page-app {
--bg: #0B0B11;
--bg-alt: #14141B;
--bg-elev: #181821;
--card: #1A1A23;
--card-elev: #23232E;
--ink: #FFFFFF;
--ink-2: rgba(255, 255, 255, 0.72);
--ink-3: rgba(255, 255, 255, 0.48);
--ink-4: rgba(255, 255, 255, 0.32);
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.10);
--line-3: rgba(255, 255, 255, 0.20);
--hairline: rgba(255, 255, 255, 0.08);
--focus-ring: rgba(61, 217, 182, 0.50);
--backdrop: rgba(0, 0, 0, 0.65);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 28px 64px -20px rgba(0, 0, 0, 0.75);
/* Dark-Cards brauchen helle Highlights */
--card-shine: rgba(255, 255, 255, 0.03);
--card-edge: rgba(255, 255, 255, 0.06);
/* Dark-Mode: heller Mint für Pop auf schwarzen Cards */
--mint: #3DD9B6;
--mint-glow: rgba(61, 217, 182, 0.22);
--mint-glow-2:rgba(61, 217, 182, 0.40);
}
/* Light Mode für die Fahrer-App — Outdoor-tauglich.
Aktivierbar via (durch JS gesetzt). */
:root[data-theme="light"] .page-app {
--bg: #E4E6E8;
--bg-alt: #D4D7DA;
--bg-elev: #ECEEF0;
--card: #FFFFFF;
--card-elev: #FFFFFF;
/* Light-Mode-Akzent: tieferer Teal-Mint */
--mint: #1FA889;
--mint-glow: rgba(31, 168, 137, 0.28);
--mint-glow-2:rgba(31, 168, 137, 0.45);
--ink: #18181D;
--ink-2: #4A4A52;
--ink-3: #6E6E76;
--ink-4: #A1A1A8;
--line: rgba(24, 24, 29, 0.10);
--line-2: rgba(24, 24, 29, 0.14);
--line-3: rgba(24, 24, 29, 0.24);
--hairline: rgba(24, 24, 29, 0.12);
--focus-ring: rgba(61, 217, 182, 0.45);
--backdrop: rgba(20, 20, 28, 0.45);
--shadow-sm: 0 1px 2px rgba(20, 20, 28, 0.06), 0 1px 3px rgba(20, 20, 28, 0.06);
--shadow-md: 0 4px 10px -3px rgba(20, 20, 28, 0.10), 0 2px 4px -2px rgba(20, 20, 28, 0.06);
--shadow-lg: 0 12px 28px -10px rgba(20, 20, 28, 0.20), 0 4px 10px -4px rgba(20, 20, 28, 0.10);
--shadow-xl: 0 24px 56px -16px rgba(20, 20, 28, 0.30), 0 8px 20px -8px rgba(20, 20, 28, 0.14);
/* Light-Cards: dunkles Token-Set für card-shine/edge */
--card-shine: rgba(20, 20, 28, 0.025);
--card-edge: rgba(20, 20, 28, 0.04);
}
/* HTML-Background Sync für Light-Mode bei page-app */
:root[data-theme="light"]:has(body.page-app) { background: #E4E6E8; }
/* Dark-Mode für Chef/Admin (page-chef).
Default ist Light (s. :root oben). Bei data-theme="dark" override. */
:root[data-theme="dark"] .page-chef {
--bg: #0B0B11;
--bg-alt: #14141B;
--bg-elev: #181821;
--card: #1A1A23;
--card-elev: #23232E;
--surface: #1A1A23;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
--ink: #FFFFFF;
--ink-2: rgba(255, 255, 255, 0.72);
--ink-3: rgba(255, 255, 255, 0.48);
--ink-4: rgba(255, 255, 255, 0.32);
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.10);
--line-3: rgba(255, 255, 255, 0.20);
--hairline: rgba(255, 255, 255, 0.08);
--focus-ring: rgba(61, 217, 182, 0.50);
--backdrop: rgba(0, 0, 0, 0.65);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 28px 64px -20px rgba(0, 0, 0, 0.75);
/* Status soft backgrounds: aufhellen für Dark */
--mint-soft: rgba(61, 217, 182, 0.14);
--pharma-soft: rgba(91, 123, 219, 0.14);
--kfz-soft: rgba(232, 128, 78, 0.16);
--sick: #A1A1AA;
--sick-soft: rgba(161, 161, 170, 0.18);
--sick-ink: #D4D4D8;
--success-soft: rgba(61, 217, 182, 0.14);
--warning-soft: rgba(244, 185, 66, 0.16);
--danger-soft: rgba(232, 112, 79, 0.16);
--info-soft: rgba(91, 123, 219, 0.16);
--success-ink: var(--mint);
--warning-ink: #F4B942;
--danger-ink: #FFA38A;
/* Dark-Cards brauchen helle Highlights */
--card-shine: rgba(255, 255, 255, 0.03);
--card-edge: rgba(255, 255, 255, 0.06);
/* Dark-Mode: heller Mint für Pop auf schwarzen Cards */
--mint: #3DD9B6;
--mint-glow: rgba(61, 217, 182, 0.22);
--mint-glow-2:rgba(61, 217, 182, 0.40);
}
:root[data-theme="dark"]:has(body.page-chef) { background: #0B0B11; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-feature-settings: "ss03", "ss04", "cv11"; /* Geist alternates für schmalere a / 1 */
font-weight: 400;
/* "clip" statt "hidden": clipt horizontalen Overflow OHNE einen neuen
Scroll-Container zu erzeugen → position: sticky bleibt funktional.
Fallback hidden für sehr alte Browser via @supports. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body { min-height: 100vh; min-height: 100dvh; }
/* HTML-Background-Sync: html erbt body's bg, damit kein weißer Streifen sichtbar wird,
wenn body kürzer als Viewport ist oder unerwartet Margin hat.
:has() greift in Chrome/Safari/FF (105+). Als Fallback dual-setting per Body-Class. */
:root:has(body.page-app), :root:has(body.page-login) { background: #0B0B11; }
:root:has(body.page-legal) { background: #0A0A10; }
:root:has(body.page-chef), :root:has(body.page-form) { background: #E4E6E8; }
/* Tabular numerals in allen .num-Kontexten */
.tnum, .balance .big, .balance .stats .v,
.summary-row .vl, .req-days, .sc-big,
.date-tile .d, .cd .num, .greet .name {
font-variant-numeric: tabular-nums lining-nums;
}
/* Globaler, dezenter Focus-Ring (Tastatur-Navigation) */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--r-sm);
}
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline-offset: 2px;
}
/* Link-Reset */
a { color: inherit; }
/* Selection */
::selection { background: var(--mint); color: #0E0E13; }
/* Utility */
.u-hidden { display: none !important; }
.u-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.u-stack-1 > * + * { margin-top: var(--s-1); }
.u-stack-2 > * + * { margin-top: var(--s-2); }
.u-stack-3 > * + * { margin-top: var(--s-3); }
.u-stack-4 > * + * { margin-top: var(--s-4); }
.u-stack-6 > * + * { margin-top: var(--s-6); }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
/* ============ BOOT-SCREEN (Test-Pages) ============ */
.boot {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 32px;
}
.boot-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 48px;
max-width: 560px;
width: 100%;
}
.boot-mark {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600;
color: var(--ink-2);
margin-bottom: 32px;
}
.boot-mark .dot {
width: 10px; height: 10px;
background: var(--mint);
border-radius: 3px;
transform: rotate(45deg);
}
.boot-card h1 {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 48px);
font-weight: 600; line-height: 1.05;
letter-spacing: -0.035em;
margin-bottom: 8px;
}
.boot-card h1 em { font-style: normal; font-weight: 700; color: var(--mint); }
.boot-sub {
font-size: 14px;
color: var(--ink-3);
margin-bottom: 32px;
}
.boot-meta {
display: grid; grid-template-columns: max-content 1fr;
gap: 8px 20px; padding-top: 24px;
border-top: 1px solid var(--line-2);
font-size: 14px;
}
.boot-meta dt { color: var(--ink-3); font-weight: 500; }
.boot-meta dd { color: var(--ink); }
.boot-meta code {
font-family: var(--font-mono);
font-size: 13px;
background: var(--bg-alt);
padding: 2px 6px; border-radius: 6px;
}
.status {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px; border-radius: 100px;
font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.status--ok { background: var(--mint-soft); color: var(--success-ink); }
.status--ok::before { background: var(--mint); }
.status--fail { background: var(--danger-soft); color: var(--danger-ink); }
.status--fail::before { background: var(--danger); }
.error {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 12px; color: var(--danger);
word-break: break-word;
}
/* ============ LOGIN-SCREEN ============ */
.page-login { background: #0A0A10; }
.login-screen {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: #0A0A10;
color: #fff;
position: relative;
overflow: hidden;
}
/* ----- Atmosphärischer animierter Hintergrund (Blobs) ----- */
.login-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.login-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.login-blob--1 {
width: 560px; height: 560px;
background: var(--mint);
opacity: 0.22;
top: -180px; right: -180px;
animation: blob-drift-1 22s ease-in-out infinite;
}
.login-blob--2 {
width: 440px; height: 440px;
background: #2E6F8A;
opacity: 0.22;
bottom: -200px; left: -160px;
animation: blob-drift-2 28s ease-in-out infinite;
}
.login-blob--3 {
width: 380px; height: 380px;
background: var(--mint-deep);
opacity: 0.15;
top: 40%; left: 35%;
animation: blob-drift-3 26s ease-in-out infinite;
}
@keyframes blob-drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(50px, 60px) scale(1.08); }
66% { transform: translate(-30px, 90px) scale(0.96); }
}
@keyframes blob-drift-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(70px, -50px) scale(1.15); }
}
@keyframes blob-drift-3 {
0%, 100% { transform: translate(0, 0) scale(0.9); }
33% { transform: translate(-60px, -40px) scale(1.05); }
66% { transform: translate(40px, 50px) scale(1); }
}
/* ----- Single-Column-Layout (Mobile + Desktop) ----- */
.login-pane {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-8);
position: relative;
z-index: 1;
}
.login-inner {
position: relative;
width: 100%;
max-width: 420px;
}
/* ----- Logo-Lockup: Diamond + Wordmark + Tagline (zentriert) ----- */
.login-logo {
text-align: center;
margin-bottom: var(--s-7);
}
.login-logo-name {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.025em;
color: rgba(255, 255, 255, 0.92);
margin-top: var(--s-3);
}
.login-logo-sub {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.40);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 4px;
}
/* Headline + Sub zentriert unter dem Logo */
.login-screen h1 { text-align: center; }
.login-sub { margin-left: auto; margin-right: auto; text-align: center; }
.login-error { text-align: left; }
.login-screen h1 {
font-family: var(--font-display);
font-size: clamp(40px, 6.5vw, 60px);
font-weight: 600; line-height: 1.02;
letter-spacing: -0.035em;
margin-bottom: 16px;
}
.login-screen h1 em { font-style: normal; font-weight: 700; color: var(--mint); }
.login-sub {
font-size: 14px; line-height: 1.55;
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--s-6); max-width: 320px;
}
.login-error {
background: rgba(232, 112, 79, 0.12);
border: 1px solid rgba(232, 112, 79, 0.35);
color: #FFC9B5;
padding: 12px 16px; border-radius: var(--r-md);
font-size: 13.5px; margin-bottom: 20px;
}
.input-group { margin-bottom: 14px; }
.input-group label {
display: block;
font-size: 11px; font-weight: 600;
letter-spacing: 0.5px; text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 8px;
}
.input-group input,
.input-group select,
.input-group textarea {
width: 100%; padding: 16px 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--r-md);
color: #fff; font-family: inherit; font-size: 15px;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
outline: none; border-color: var(--mint);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Browser-Autofill (Chrome/Safari/Edge) NICHT in Standard-Gelb/Weiß zeigen.
GETRENNTE Regeln pro Pseudo, weil bei ungültigem Selektor sonst die ganze Regel verworfen würde.
Trick mit 600000s transition: Chromes Yellow-Animation läuft so langsam, dass sie nie ankommt. */
.page-login input:-webkit-autofill,
.page-login input:-webkit-autofill:hover,
.page-login input:-webkit-autofill:focus,
.page-login input:-webkit-autofill:active {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
caret-color: #fff !important;
background-color: rgba(20, 20, 28, 1) !important;
transition: background-color 600000s 0s, color 600000s 0s !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.page-login input:autofill,
.page-login input:autofill:hover,
.page-login input:autofill:focus {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
caret-color: #fff !important;
background-color: rgba(20, 20, 28, 1) !important;
transition: background-color 600000s 0s, color 600000s 0s !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.page-login input:-webkit-autofill:focus,
.page-login input:autofill:focus {
border-color: var(--mint) !important;
}
/* Chromes "Preview"-State (graue Vorschlagsschrift im Feld, BEVOR User Vorschlag akzeptiert).
Eigene Regel, falls dieser Selector im Browser unbekannt ist und sonst die ganze
vorherige Regel-Liste invalidieren würde. */
.page-login input:-internal-autofill-previewed,
.page-login input:-internal-autofill-selected {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
box-shadow: 0 0 0 100px rgba(20, 20, 28, 1) inset !important;
background-color: rgba(20, 20, 28, 1) !important;
color: #fff !important;
}
.input-group .hint { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
/* Input mit Icon links */
.input-icon-wrap {
position: relative;
}
.input-icon-wrap .input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
color: rgba(255, 255, 255, 0.40);
pointer-events: none;
z-index: 1;
transition: color var(--dur-fast) var(--ease-out);
}
.input-icon-wrap input {
padding-left: 48px;
}
.input-icon-wrap:focus-within .input-icon {
color: var(--mint);
}
/* Password-Toggle (Auge) rechts im Input */
.input-icon-wrap--has-toggle input { padding-right: 50px; }
/* Schmaler Wrapper, der nur das Toggle-Button-Positioning ermöglicht (kein linkes Icon) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 50px; }
.pw-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
z-index: 10;
pointer-events: auto;
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle:hover {
color: var(--ink);
background: var(--bg-alt);
}
.pw-toggle:focus-visible {
outline: 2px solid var(--mint);
outline-offset: 1px;
}
/* Login-Seite hat hardcoded dunklen Hintergrund — explizit auf weiß-alpha */
.page-login .pw-toggle { color: rgba(255, 255, 255, 0.45); }
.page-login .pw-toggle:hover {
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.06);
}
.pw-toggle-icon { width: 18px; height: 18px; }
.pw-toggle-icon[hidden] { display: none; }
/* CapsLock-Indicator: dezentes ⇧-Symbol IM Feld, rechts neben dem Auge */
.caps-indicator {
position: absolute;
right: 52px; /* 8px Pw-Toggle-Right + 36px breit + 8px Gap */
top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
color: #F4B942;
background: rgba(244, 185, 66, 0.14);
border: 1px solid rgba(244, 185, 66, 0.35);
border-radius: 50%;
z-index: 2;
pointer-events: auto; /* damit title-Tooltip funktioniert */
cursor: help;
}
.caps-indicator[hidden] { display: none; }
.caps-indicator svg { width: 12px; height: 12px; }
/* Wenn der Caps-Indicator sichtbar ist, dem Input mehr rechts-Padding geben,
damit der Text nicht unter dem Symbol verschwindet. */
.input-icon-wrap--has-toggle:has(.caps-indicator:not([hidden])) input,
.pw-wrap:has(.caps-indicator:not([hidden])) input {
padding-right: 86px;
}
/* Primary-CTA mit Pfeil */
.btn-login {
width: 100%; padding: 18px;
background: var(--mint);
color: #0E0E13;
border: none; border-radius: var(--r-md);
font-family: inherit; font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
cursor: pointer; margin-top: 18px;
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
box-shadow: 0 8px 24px -8px var(--mint-glow);
}
.btn-login:hover {
background: var(--mint-deep);
box-shadow: 0 14px 32px -8px var(--mint-glow-2);
}
.btn-login:active { transform: scale(0.985); }
.btn-login-arrow {
width: 18px; height: 18px;
transition: transform var(--dur-fast) var(--ease-out);
}
.btn-login:hover .btn-login-arrow {
transform: translateX(3px);
}
.login-foot {
text-align: center; font-size: 12.5px;
color: rgba(255, 255, 255, 0.4);
margin-top: var(--s-5);
}
.login-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.login-foot a:hover { color: rgba(255, 255, 255, 0.7); }
/* Kleine Hint-Zeile unter einem Login-Input (z.B. Passwort-Anforderungen) */
.login-pane .login-hint {
display: block;
margin-top: 6px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.01em;
}
/* ----- Dot-Grid als Fullscreen-Hintergrund (sehr subtil) ----- */
.login-hero-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
}
/* ----- Hero-Mark (Diamond) mit Halo + Pulse — als Logo-Anker ----- */
.login-hero-mark-wrap {
position: relative;
width: 56px;
height: 56px;
margin: 0 auto;
display: grid;
place-items: center;
}
.login-hero-mark-halo {
position: absolute;
inset: -32px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--mint) 20%,
transparent 45%,
var(--mint-deep) 65%,
transparent 90%);
filter: blur(14px);
opacity: 0.55;
animation: hero-halo-spin 12s linear infinite;
will-change: transform;
}
.login-hero-mark {
position: relative;
width: 56px; height: 56px;
background: var(--mint);
border-radius: 10px;
transform: rotate(45deg);
box-shadow:
0 0 56px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
animation: hero-mark-pulse 4.5s ease-in-out infinite;
z-index: 1;
}
/* Auf Desktop: Logo etwas wuchtiger + Form mehr Padding */
@media (min-width: 1024px) {
.login-pane--form { padding: var(--s-10); }
.login-hero-mark-wrap { width: 64px; height: 64px; }
.login-hero-mark { width: 64px; height: 64px; border-radius: 12px; }
.login-hero-mark-halo { inset: -38px; }
.login-logo-name { font-size: 22px; }
.login-logo-sub { font-size: 12px; }
}
/* Niedrige Viewports (Laptop 1280×720 o.ä.): kompakte Variante */
@media (max-height: 760px) {
.login-pane { padding: var(--s-5); }
.login-logo { margin-bottom: var(--s-5); }
.login-screen h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 10px; }
.login-sub { margin-bottom: var(--s-4); }
.input-group { margin-bottom: 10px; }
.btn-login { padding: 15px; margin-top: var(--s-3); }
.login-foot { margin-top: var(--s-4); }
.login-legal-footer { margin-top: var(--s-3); }
/* Diamond etwas kompakter */
.login-hero-mark-wrap,
.login-hero-mark { width: 52px; height: 52px; }
.login-hero-mark-halo { inset: -28px; }
.login-logo-name { font-size: 18px; margin-top: var(--s-2); }
}
@keyframes hero-halo-spin {
to { transform: rotate(360deg); }
}
@keyframes hero-mark-pulse {
0%, 100% {
box-shadow:
0 0 56px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
50% {
box-shadow:
0 0 96px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
}
@keyframes hero-halo-spin {
to { transform: rotate(360deg); }
}
@keyframes hero-mark-pulse {
0%, 100% {
box-shadow:
0 0 56px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
50% {
box-shadow:
0 0 96px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
}
/* Accessibility: keine Animationen wenn User es ausgeschaltet hat */
@media (prefers-reduced-motion: reduce) {
.login-blob,
.login-hero-mark-halo,
.login-hero-mark,
.legal-brand-mark-halo,
.err-zero-inner {
animation: none !important;
}
}
/* ============ Error-Pages (404 / 403 / 500) — Login-Style, mittig zentriert ============ */
.page-404, .page-error { background: #0A0A10; }
.err-screen {
min-height: 100vh;
min-height: 100dvh;
color: #fff;
overflow: hidden;
position: relative;
}
/* Die Card sitzt mittig im Viewport. Charaktere werden später per
.err-guide absolut am Viewport-Boden positioniert (siehe unten). */
.err-frame,
.err-frame--left,
.err-frame--duo {
/* KEIN position: relative hier → .err-guide-Absolute referenziert direkt
die .err-screen (full viewport) und kann am Boden andocken */
z-index: 5;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(24px, 5vw, 64px);
}
.err-card { position: relative; z-index: 6; }
.err-card {
max-width: 560px;
width: 100%;
text-align: center;
margin: 0 auto;
}
.err-eyebrow {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
gap: 8px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--mint);
margin: 0 auto 18px;
padding: 4px 10px 4px 8px;
border: 1px solid rgba(61, 217, 182, 0.25);
border-radius: 100px;
background: rgba(61, 217, 182, 0.08);
box-shadow: 0 4px 14px -6px var(--mint-glow);
}
.err-eyebrow::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 8px var(--mint-glow-2);
}
.err-code {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2px, 1.2vw, 12px);
font-family: var(--font-display);
font-weight: 600;
line-height: 0.9;
letter-spacing: -0.06em;
margin: 0 auto clamp(20px, 3.5vw, 36px);
}
.err-digit {
font-size: clamp(96px, 18vw, 200px);
color: #fff;
text-shadow:
0 0 40px rgba(61, 217, 182, 0.18),
0 8px 32px rgba(20, 20, 28, 0.6);
}
.err-digit--zero {
position: relative;
width: clamp(80px, 16vw, 180px);
height: clamp(96px, 18vw, 200px);
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle, var(--mint) 0%, var(--mint-deep) 70%);
color: transparent;
overflow: hidden;
box-shadow:
inset 0 0 0 6px rgba(255, 255, 255, 0.08),
0 20px 60px -10px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.4);
}
.err-zero-inner {
position: absolute;
inset: 18% 18%;
border-radius: 50%;
background: #0A0A10;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
inset 0 0 40px rgba(0, 0, 0, 0.5);
animation: err-zero-pulse 4s ease-in-out infinite;
}
@keyframes err-zero-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.96); }
}
.err-card h1 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.05;
color: #fff;
margin-bottom: 18px;
}
.err-card h1 em {
font-style: normal;
font-weight: 700;
color: var(--mint);
}
.err-sub {
color: rgba(255, 255, 255, 0.65);
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.55;
margin: 0 auto 28px;
max-width: 460px;
}
.err-cta {
width: auto !important;
min-width: 200px;
padding: 14px 26px !important;
margin: 0 auto !important;
}
.err-cta span { display: inline-block; }
.err-cta svg { width: 16px; height: 16px; }
/* Charaktere sind absolut positioniert: kleben am Viewport-Boden, ihre
abgeschnittenen Beine (im PNG bei mid-thigh gecroppt) ragen UNTER den sichtbaren
Bereich → der Screen-Rand kaschiert sie. */
.err-guide {
display: block;
position: absolute;
bottom: -30px;
z-index: 2;
height: 180px;
animation: err-guide-float 6s ease-in-out infinite;
pointer-events: none;
}
.err-guide img {
height: 100%; width: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}
/* Mobile: Charakter am linken Bildrand, leicht transparenter damit Text nicht erdrückt wird */
@media (max-width: 899px) {
.err-guide {
height: 340px;
opacity: 0.85;
left: -50px;
bottom: -60px;
}
}
/* Desktop: größer, am linken Bildrand */
@media (min-width: 900px) {
.err-guide {
height: clamp(320px, 55vh, 520px);
bottom: -40px;
}
/* 404 (Default err-frame): Charakter links unten */
.err-frame > .err-guide {
left: clamp(-30px, 4vw, 80px);
}
}
@keyframes err-guide-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* --- 403 (Verboten): Charakter LINKS am Viewport-Boden, warn-Akzent --- */
@media (min-width: 900px) {
.err-frame--left .err-guide--left {
left: clamp(-30px, 4vw, 80px);
right: auto;
}
}
.err-eyebrow--warn {
color: #F4B942;
border-color: rgba(244, 185, 66, 0.30);
background: rgba(244, 185, 66, 0.10);
box-shadow: 0 4px 14px -6px rgba(244, 185, 66, 0.30);
}
.err-eyebrow--warn::before {
background: #F4B942;
box-shadow: 0 0 8px rgba(244, 185, 66, 0.5);
}
.err-eyebrow--danger {
color: #FFA38A;
border-color: rgba(232, 112, 79, 0.30);
background: rgba(232, 112, 79, 0.10);
box-shadow: 0 4px 14px -6px rgba(232, 112, 79, 0.35);
}
.err-eyebrow--danger::before {
background: var(--danger);
box-shadow: 0 0 8px rgba(232, 112, 79, 0.55);
}
/* Lock-Digit für 403: anstelle der 0 ein Schloss-Symbol */
.err-digit--lock {
width: clamp(80px, 16vw, 180px);
height: clamp(96px, 18vw, 200px);
border-radius: 32px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
linear-gradient(180deg, rgba(244, 185, 66, 0.18) 0%, rgba(244, 185, 66, 0.05) 100%);
color: #F4B942;
display: inline-flex; align-items: center; justify-content: center;
box-shadow:
inset 0 0 0 1px rgba(244, 185, 66, 0.35),
0 20px 60px -10px rgba(244, 185, 66, 0.30);
}
.err-digit--lock svg {
width: 56%; height: 56%;
}
/* --- 500 (Server-Fehler): BEIDE Charaktere am Viewport-Boden, danger-Akzent --- */
@media (min-width: 900px) {
.err-frame--duo .err-guide--left {
left: clamp(-30px, 4vw, 80px);
right: auto;
animation-delay: 0s;
}
.err-frame--duo .err-guide--right {
right: clamp(-30px, 4vw, 80px);
left: auto;
animation-delay: -2s; /* leicht versetzt, damit's nicht synchron schwingt */
}
}
/* Danger-Tone Code für 500 */
.err-code--danger .err-digit {
text-shadow:
0 0 40px rgba(232, 112, 79, 0.22),
0 8px 32px rgba(20, 20, 28, 0.6);
}
.err-code--danger .err-digit--zero {
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.10) 0%, transparent 50%),
radial-gradient(circle, var(--danger) 0%, #8E2E15 70%);
box-shadow:
inset 0 0 0 6px rgba(255, 255, 255, 0.08),
0 20px 60px -10px rgba(232, 112, 79, 0.50),
0 0 0 1px rgba(232, 112, 79, 0.4);
}
.err-code--warn .err-digit {
text-shadow:
0 0 40px rgba(244, 185, 66, 0.22),
0 8px 32px rgba(20, 20, 28, 0.6);
}
/* Im --duo Frame brauchen wir die generelle .err-guide-Display-Regel NICHT —
die spezifischen `.err-frame--duo .err-guide--left/--right` regeln das selbst.
In --left Frame ebenso. Damit die Charakter-Bilder nur dort sichtbar werden
wo wir's explizit wollen, gibt's für die Spezial-Frames eigene Display-Regeln. */
/* ============ ONBOARDING-TOUR (6 Schritte, Guide-Charaktere) ============ */
.page-onboarding { background: #0A0A10; }
.onboarding-screen {
position: relative;
min-height: 100vh;
min-height: 100dvh;
color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
}
.onboarding-frame {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
padding: clamp(24px, 4vw, 48px);
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
/* Top: Dots + Skip */
.onboarding-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: clamp(24px, 4vh, 56px);
}
.onboarding-dots {
display: inline-flex;
align-items: center;
gap: 8px;
}
.onboarding-dots .dot {
width: 32px; height: 4px;
background: rgba(255, 255, 255, 0.10);
border-radius: 100px;
transition: background 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
.onboarding-dots .dot.is-active {
background: var(--mint);
box-shadow: 0 0 12px var(--mint-glow-2);
}
.onboarding-skip-form { margin: 0; }
.onboarding-skip {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font: inherit; font-size: 13px; font-weight: 500;
padding: 8px 14px;
border-radius: 100px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.onboarding-skip:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.05);
}
/* Stage / Slides */
.onboarding-stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 380px;
}
.onboarding-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.onboarding-slide.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Card mittig (Text-Inhalt) */
.onboarding-card {
max-width: 520px;
width: 100%;
text-align: center;
padding: 0 16px;
}
.onboarding-eyebrow {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 16px;
}
.onboarding-card h1 {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.04;
margin-bottom: 16px;
color: #fff;
}
.onboarding-card h1 em {
font-style: normal;
font-weight: 700;
color: var(--mint);
}
.onboarding-text {
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
max-width: 460px;
margin: 0 auto;
}
/* Sprach-Auswahl (Step 2) */
.onboarding-langs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.onboarding-lang {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--r-md);
color: #fff;
font: inherit;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.onboarding-lang:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.20);
transform: translateY(-2px);
}
.onboarding-lang.is-active {
background: rgba(61, 217, 182, 0.10);
border-color: var(--mint);
box-shadow: 0 0 0 1px var(--mint), 0 8px 24px -8px var(--mint-glow);
}
.onboarding-lang-flag { font-size: 28px; line-height: 1; }
.onboarding-lang-name { font-size: 14px; font-weight: 600; }
.onboarding-lang-name small {
display: block;
font-size: 11px; font-weight: 400;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
}
/* Guide-Charaktere (links/rechts) */
.onboarding-guides {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.onboarding-guide {
position: absolute;
bottom: 0;
height: clamp(280px, 50vh, 460px);
width: auto;
opacity: 0;
transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.onboarding-guide--left {
left: clamp(-40px, 2vw, 40px);
transform: translateX(-30px);
}
.onboarding-guide--right {
right: clamp(-40px, 2vw, 40px);
transform: translateX(30px);
}
.onboarding-guide.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Footer-Buttons */
.onboarding-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: clamp(24px, 4vh, 48px);
position: relative;
z-index: 3;
}
.onboarding-foot .btn-login {
width: 200px;
min-width: 0;
padding: 13px 24px;
margin: 0;
font-size: 14px;
gap: 8px;
}
.onboarding-foot .btn-login svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.onboarding-prev {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: none !important;
}
.onboarding-prev:hover {
background: rgba(255, 255, 255, 0.10) !important;
color: #fff !important;
}
.onboarding-done-form { margin: 0; }
/* hidden-Attribut muss explizit "display: none" forcen, weil .btn-login display: inline-flex setzt */
.onboarding-foot [hidden] { display: none !important; }
/* Mobile (<720): Charaktere bleiben, nur kleiner + Text drüber.
WICHTIG: KEIN blanket opacity-Override — sonst werden BEIDE Guides sichtbar.
Stattdessen die `.is-visible`-Logik intakt lassen, nur Größe + Position anpassen. */
@media (max-width: 720px) {
.onboarding-frame { padding: 16px; }
.onboarding-stage {
min-height: 440px;
z-index: 2; /* Card-Text über dem Charakter */
}
.onboarding-guide {
height: clamp(260px, 38vh, 340px);
bottom: 0;
z-index: 1;
}
.onboarding-guide--left { left: -20px; }
.onboarding-guide--right { right: -20px; }
/* Card-Text bekommt eigene Transparenz-Schicht damit Char nicht durch Buchstaben überlagert wirkt */
.onboarding-card {
position: relative;
z-index: 2;
}
.onboarding-card h1 { font-size: 30px; }
.onboarding-text { font-size: 14px; }
.onboarding-foot .btn-login { min-width: 0; flex: 1; }
}
/* ============ FORM-SCREEN (Light, Passwort-Wechsel u.ä.) ============ */
.page-form { background: var(--bg); }
.form-screen {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 32px;
}
.form-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 48px;
max-width: 520px; width: 100%;
}
.form-mark {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600;
color: var(--ink-2); margin-bottom: 24px;
}
.form-mark .dot {
width: 10px; height: 10px;
background: var(--mint);
border-radius: 3px;
transform: rotate(45deg);
}
.form-card h1 {
font-family: var(--font-display);
font-size: clamp(30px, 4.4vw, 44px);
font-weight: 600; line-height: 1.04;
letter-spacing: -0.035em; margin-bottom: 12px;
}
.form-card h1 em { font-style: normal; font-weight: 700; color: var(--mint); }
.form-sub {
color: var(--ink-2);
font-size: 15px; line-height: 1.55;
margin-bottom: 32px; max-width: 420px;
}
.form-error {
background: var(--danger-soft);
border: 1px solid rgba(232, 112, 79, 0.4);
color: var(--danger-ink);
padding: 12px 16px; border-radius: var(--r-md);
font-size: 13.5px; margin-bottom: 20px;
}
.form-error ul { padding-left: 20px; }
.input-group--light label { color: var(--ink-3); }
.input-group--light input,
.input-group--light select,
.input-group--light textarea {
background: var(--bg-alt);
border: 1px solid var(--line-2);
color: var(--ink);
}
.input-group--light input:focus,
.input-group--light select:focus,
.input-group--light textarea:focus {
border-color: var(--mint); background: var(--card);
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Autofill in .input-group--light (Profil-Modals etc.) — bleibt theme-konform */
.input-group--light input:-webkit-autofill,
.input-group--light input:-webkit-autofill:hover,
.input-group--light input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 100px var(--bg-alt) inset;
caret-color: var(--ink);
transition: background-color 5000s ease-in-out 0s;
}
.btn-primary {
width: 100%; padding: 16px;
background: var(--mint); color: #0E0E13;
border: none; border-radius: var(--r-md);
font-family: inherit; font-size: 15px; font-weight: 700;
cursor: pointer; margin-top: 18px;
transition: background var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
box-shadow: 0 8px 24px -8px var(--mint-glow), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn-primary:hover {
background: var(--mint-deep);
box-shadow: 0 16px 36px -10px var(--mint-glow-2), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-text {
display: inline-block; margin-top: 16px;
color: var(--ink-2); font-size: 13.5px;
text-decoration: none;
border-bottom: 1px solid var(--line-2);
padding-bottom: 2px;
}
.btn-text:hover { color: var(--ink); border-color: var(--ink); }
.btn-text--danger { color: var(--danger); }
.btn-text--danger:hover { color: var(--danger); border-color: var(--danger); }
/* ============ APP-SHELL (Fahrer, dark, mobile-first) ============ */
.page-app { background: var(--bg); color: var(--ink); position: relative; }
/* Dezenter Atmosphären-Blob im Background (sehr leise, fixed) — gibt der Light-Variante
einen Hauch von Atmosphäre, ohne von Content abzulenken. */
.page-app::before {
content: '';
position: fixed;
pointer-events: none;
z-index: 0;
top: -200px; right: -200px;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--mint) 0%, transparent 65%);
opacity: 0.05;
filter: blur(40px);
}
.page-app::after {
content: '';
position: fixed;
pointer-events: none;
z-index: 0;
bottom: -250px; left: -200px;
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, var(--mint) 0%, transparent 70%);
opacity: 0.04;
filter: blur(50px);
}
:root[data-theme="dark"] .page-app::before,
:root[data-theme="dark"] .page-app::after { display: none; }
/* Sichtbarer Inhalt über den Blobs */
.page-app > * { position: relative; z-index: 1; }
.app-shell {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
min-height: 100vh;
display: flex; flex-direction: column;
padding-bottom: calc(80px + env(safe-area-inset-bottom));
background: var(--bg);
}
/* Cards nehmen die volle Inhaltsbreite ein (mit Padding der screen-body) */
.app-shell .top,
.app-shell .screen-body { width: 100%; }
/* Tablet — voll-fluid bis 1023px, Inhalt nutzt die ganze Breite */
@media (min-width: 720px) {
.app-shell { max-width: 100%; padding-left: 0; padding-right: 0; }
.top { padding: var(--s-10) var(--s-8) var(--s-5); max-width: none; }
.screen-body { padding: var(--s-2) var(--s-8) var(--s-7); max-width: none; }
.greet .name { font-size: 44px; }
}
/* Bottom-Nav-Container auf Tablet (720–1023): bleibt voll breit */
@media (min-width: 720px) and (max-width: 1023px) {
.bnav {
width: 100%;
max-width: 100%;
border-radius: 0;
}
}
/* =============================================================================
Desktop (≥1024px) — Bottom-Nav wird linke Sidebar.
Fahrer-App bekommt jetzt eine echte Desktop-Architektur.
============================================================================= */
@media (min-width: 1024px) {
/* Body mit Padding: 16px überall außen, Sidebar-Breite + 2× 16 links */
.page-app {
padding-left: calc(260px + var(--s-4) + var(--s-4));
padding-right: var(--s-4);
}
.app-shell {
max-width: 100%;
padding: 0;
/* Selber Bottom-Abstand wie die fixed Sidebar (siehe .bnav)
damit Content und Sidebar auf gleicher Höhe enden */
padding-bottom: var(--s-4);
min-height: 100vh;
}
/* Sidebar — schwebt frei wie eine Card (selbe Tiefe wie Hero-Cards)
!important nötig weil die Mobile-Bottom-Nav Base-Regel SPÄTER im Source liegt */
.bnav {
position: fixed !important;
top: calc(56px + var(--s-4)) !important;
bottom: var(--s-4) !important;
left: var(--s-4) !important;
right: auto !important;
width: 260px !important;
max-width: 260px !important;
margin: 0 !important;
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card) !important;
border: 1px solid var(--line) !important;
border-top: 1px solid var(--line) !important;
border-radius: var(--r-2xl) !important;
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: var(--s-6) var(--s-4) var(--s-5) !important;
display: flex !important;
flex-direction: column !important;
gap: var(--s-5);
z-index: var(--z-nav);
overflow: hidden; /* Container scrollt NICHT — nur der .bnav-scroll-Bereich darin */
}
.bnav::before { display: none; }
/* User-Block oben + Footer unten bleiben fix */
.bnav > .bnav-brand,
.bnav > .bnav-user,
.bnav > .bnav-foot { flex-shrink: 0; }
.bnav-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: var(--s-5);
scrollbar-width: thin;
mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
}
}
@media (max-width: 1023px) {
.bnav-scroll { display: contents; }
}
@media (min-width: 1024px) {
/* Brand: NICHT in Sidebar — Brand sitzt jetzt in der Top-Bar */
.bnav-brand { display: none !important; }
.bnav-brand-dot { width: 10px; height: 10px; }
/* User-Block — als kleine "User-Card": Avatar groß oben, drunter Infos gestackt */
.bnav-user {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: var(--s-3);
padding: 0 var(--s-2) var(--s-5);
border-bottom: 1px solid var(--line);
text-align: center;
}
.bnav-user-avatar {
position: relative;
width: 88px; height: 88px;
border-radius: 50%;
background: var(--bg-alt);
color: #0B0B11;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 26px;
flex-shrink: 0;
overflow: hidden;
text-decoration: none;
box-shadow:
0 0 0 3px var(--card),
0 0 0 5px rgba(61, 217, 182, 0.40),
0 0 24px -4px var(--mint-glow);
transition: transform var(--dur-fast) var(--ease-out);
}
.bnav-user-avatar:hover { transform: scale(1.03); }
.bnav-user-meta {
min-width: 0;
width: 100%;
display: flex; flex-direction: column;
align-items: center;
gap: 4px;
}
.bnav-user-name {
font-family: var(--font-display);
font-size: 17px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.bnav-user-team { font-size: 10.5px; margin-top: 2px; }
.bnav-user-date {
font-size: 11px;
color: var(--ink-3);
margin-top: var(--s-3);
letter-spacing: 0.02em;
}
.bnav-user-clock {
display: inline-flex; align-items: center; justify-content: center;
gap: 4px;
margin-top: 8px;
color: var(--ink);
}
.bnav-clock-d {
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 6px 0;
font-family: var(--font-ui);
font-size: 18px; font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
width: 22px; text-align: center;
}
.bnav-clock-sep {
font-family: var(--font-ui);
font-size: 18px; font-weight: 600;
color: var(--ink-3);
line-height: 1;
padding: 0 2px;
}
.bnav-user-leave {
margin-top: 4px;
display: flex; align-items: baseline; gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.bnav-user-leave-num {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.025em;
color: var(--mint);
font-variant-numeric: tabular-nums lining-nums;
}
.bnav-user-leave-label {
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Nav-Items vertikal */
.bnav-items {
display: flex !important;
flex-direction: column !important;
gap: 2px;
grid-template-columns: none !important;
}
.bnav-item {
flex-direction: row !important;
gap: 12px;
justify-content: flex-start !important;
align-items: center !important;
padding: 11px 14px !important;
font-size: 14px !important;
font-weight: 500;
border-radius: var(--r-md);
color: var(--ink-2);
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.bnav-item svg { width: 18px; height: 18px; }
.bnav-item:hover {
background: var(--nav-hover-bg);
color: var(--ink);
}
/* Active: mint-soft Pille mit Border + Glow */
.bnav-item.active {
background: var(--nav-active-bg);
color: var(--mint);
font-weight: 600;
box-shadow:
inset 0 0 0 1px var(--nav-active-ring),
0 4px 14px -6px var(--mint-glow);
}
.bnav-item.active::before {
content: '' !important;
position: absolute !important;
left: 4px !important; top: 50% !important;
right: auto !important; bottom: auto !important;
transform: translateY(-50%) !important;
width: 3px !important; height: 18px !important;
background: var(--mint) !important;
border-radius: 100px !important;
box-shadow: 0 0 8px var(--mint-glow);
}
.bnav-item span { display: inline; }
/* Theme-Toggle + Logout: NICHT in Sidebar — beides in der Top-Bar */
.bnav-theme,
.bnav-logout { display: none !important; }
/* Inhalts-Bereich: voll-fluid bis ans Browser-Rand-Padding */
.top {
padding: var(--s-10) var(--s-10) var(--s-6);
max-width: none;
width: 100%;
}
.top .avatar { display: none; } /* User-Info ist jetzt in der Sidebar */
.top .greet { width: 100%; }
.greet .name { font-size: 56px; letter-spacing: -0.04em; }
.greet .label { font-size: 13px; }
.screen-body {
/* Außen-Padding kommt vom Body (links/rechts) und app-shell (oben/unten).
Hier nur intern padding-top für etwas Atemraum unter der Topbar. */
padding: 0;
max-width: none;
width: 100%;
}
/* Dashboard: 2-Spalt-Hero (Resturlaub-Card + Nächste-Vacations-Block),
darunter voll-breit Team-Steckbriefe. 16px Gaps + 0 padding-top
(app-shell hat schon 16px Atemraum unter Top-Bar). */
.app-shell--dashboard .screen-body {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
column-gap: var(--s-4);
row-gap: var(--s-4);
align-items: stretch;
padding-top: 0;
}
.app-shell--dashboard .screen-body > .balance,
.app-shell--dashboard .screen-body > .next-vacations {
align-self: stretch;
/* Beide Cards exakt gleich hoch. Bei vielen Urlauben scrollt
die Liste IN der Card — overscroll-behavior bleibt aber 'auto',
damit Page-Scroll funktioniert sobald inner nichts mehr zu scrollen hat. */
height: 380px;
}
.app-shell--dashboard .screen-body > .balance {
grid-column: 1;
display: flex; flex-direction: column;
}
.app-shell--dashboard .screen-body > .balance .meter { margin-top: auto; }
.app-shell--dashboard .screen-body > .next-vacations { grid-column: 2; }
.app-shell--dashboard .screen-body > .team-section-h { grid-column: 1 / -1; margin: 0; }
.app-shell--dashboard .screen-body > .team-grid { grid-column: 1 / -1; }
.app-shell--dashboard .screen-body > .team-section { grid-column: 1 / -1; }
.app-shell--dashboard .screen-body > .decision-banner,
.app-shell--dashboard .screen-body > .flash { grid-column: 1 / -1; }
/* Antrag: Form-Bereich links, Summary-Card rechts.
Beide Cards füllen die Sidebar-Höhe (= Viewport minus Top-Bar minus 2×16). */
.app-shell--antrag .screen-body {
max-width: none;
min-height: calc(100vh - 56px - var(--s-4) - var(--s-4));
}
.app-shell--antrag .antrag-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.5fr);
gap: var(--s-4);
align-items: stretch;
min-height: calc(100vh - 56px - var(--s-4) - var(--s-4));
}
.app-shell--antrag .antrag-form { min-width: 0; display: flex; flex-direction: column; }
.app-shell--antrag .antrag-side {
display: flex;
}
.app-shell--antrag .antrag-form-card { flex: 1; }
.app-shell--antrag .antrag-side-card { flex: 1; display: flex; flex-direction: column; }
.app-shell--antrag .antrag-side-actions { margin-top: auto; }
/* Kalender: 2 Grid-Items — kal-main (Kalender) links, kal-side (Liste) rechts.
align-items: start — sonst zwingt eine lange kal-side (viele Urlaube)
den kal-main auf gleiche Höhe und es entsteht großer Abstand zwischen
cal-h und dem Kalender. */
/* Kalender: 1-Spalt-Layout — Kalender oben breit, Kommende-Urlaube drunter */
.app-shell--kalender .screen-body {
max-width: none;
padding-top: 0; /* app-shell hat schon 56+16 padding-top */
padding-bottom: 0; /* Sidebar endet auf gleicher Höhe (app-shell hat var(--s-4)) */
}
.app-shell--kalender .screen-body > .kal-main { min-width: 0; }
.app-shell--kalender .screen-body > .kal-side {
/* Sticky deaktiviert — Liste sitzt unter dem Kalender */
position: static;
max-height: none;
overflow: visible;
}
/* Profil-Layout: linke Spalte (Hero+Push in eigenem Flex-Container)
+ rechte Spalte (Persönliche Daten/Sicherheit-Cards). Wichtig: die
linke Spalte ist ein eigener .profile-left-col-Wrapper, damit die
rechte Cards-Spalte das Grid nicht mit Row-Spans aufzieht. */
.app-shell--profil .top { display: none; }
.app-shell--profil .profile-hero { margin: 0; }
.app-shell--profil .screen-body {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
grid-template-rows: auto;
align-items: start;
align-content: start;
gap: var(--s-4);
}
.app-shell--profil .screen-body > .profile-left-col {
display: flex;
flex-direction: column;
gap: var(--s-4);
grid-column: 1; grid-row: 1;
min-width: 0;
}
.app-shell--profil .screen-body > .profile-cards:not(.profile-push-section) {
grid-column: 2; grid-row: 1;
align-self: start;
}
.app-shell--profil .screen-body > .flash { grid-column: 1 / -1; grid-row: 1; }
.app-shell--profil .screen-body > .flash ~ .profile-left-col { grid-row: 2; }
.app-shell--profil .screen-body > .flash ~ .profile-cards:not(.profile-push-section) { grid-row: 2; }
/* Flash spannt über beide Spalten und sitzt oben */
.app-shell--profil .screen-body > .flash { grid-column: 1 / -1; grid-row: 1; }
.app-shell--profil .screen-body > .flash + .profile-hero { grid-row: 2; }
.app-shell--profil .screen-body > .flash ~ .profile-push-section { grid-row: 3; }
.app-shell--profil .screen-body > .flash ~ .profile-cards:not(.profile-push-section) { grid-row: 2 / 4; }
/* Tipps füllen den restlichen Platz, damit die Card die Sidebar-Höhe erreicht */
.app-shell--profil .profile-tips { margin-top: auto; }
}
/* Profile-Cards-Wrapper (Mobile + Desktop): EINE Card mit shine + Items als Listenzeilen */
.profile-cards {
display: flex; flex-direction: column;
gap: 0;
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-3);
box-shadow: var(--card-edge), var(--shadow-md);
}
/* Interner Scroll NUR auf Desktop, wo die Card durch das Grid auf eine feste Höhe
gezwungen wird. Auf Mobile/Tablet fließt sie natürlich → kein Touch-Capture-Bug. */
@media (min-width: 1024px) {
.app-shell--profil .profile-cards {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
}
.app-shell--profil .profile-section-h {
margin: 6px var(--s-2) 2px;
}
.app-shell--profil .profile-section-h:first-child { margin-top: 2px; }
.app-shell--profil .profile-card {
background: transparent;
border: 0;
border-radius: var(--r-md);
margin-bottom: 0;
padding: 7px var(--s-2);
box-shadow: none;
}
.app-shell--profil .profile-card + .profile-card { border-top: 0; }
.app-shell--profil .profile-card:hover {
background: linear-gradient(90deg, rgba(61, 217, 182, 0.06) 0%, transparent 70%);
transform: none;
box-shadow: none;
}
.top {
padding: 32px 24px 18px;
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px;
}
.greet .label {
font-size: 12px; color: var(--ink-3);
font-weight: 500; margin-bottom: 4px;
}
.greet .name {
font-family: var(--font-display);
font-size: clamp(30px, 8vw, 38px); font-weight: 600;
letter-spacing: -0.035em; line-height: 1.02;
color: var(--ink);
}
.greet .name em { font-style: normal; font-weight: 700; color: var(--mint); }
.avatar {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--ink); font-weight: 700; font-size: 13px;
background: var(--mint);
text-decoration: none; flex-shrink: 0;
cursor: pointer;
overflow: hidden;
}
/* Avatar mit echtem Bild — füllt den Kreis */
.avatar .avatar-img,
.req-avatar .avatar-img,
.bnav-user-avatar .avatar-img,
.profile-avatar .avatar-img,
.profile-avatar-img,
img.avatar-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
/* Wenn Bild drin: kein Background mehr nötig */
.avatar:has(.avatar-img),
.req-avatar:has(.avatar-img) { background: var(--bg-alt); }
.team-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: rgba(91, 123, 219, 0.18);
color: var(--pharma);
border-radius: 100px;
font-size: 11px; font-weight: 600;
}
.page-chef .team-pill { background: var(--pharma-soft); }
.team-pill::before {
content: ''; width: 6px; height: 6px;
background: var(--pharma); border-radius: 50%;
}
.team-pill.kfz { background: var(--kfz-soft); color: var(--kfz-deep); }
:root[data-theme="dark"] .page-app .team-pill.kfz {
background: rgba(232, 128, 78, 0.18);
color: #FFB088;
}
.page-chef .team-pill.kfz { background: var(--kfz-soft); color: #B8551F; }
.team-pill.kfz::before { background: var(--kfz); }
/* Base: flex-1 ohne padding. Padding-Werte werden pro Breakpoint gesetzt
(Mobile: hier drunter; Desktop: in @media (min-width: 1024px) oben). */
.screen-body { flex: 1; }
@media (max-width: 1023px) {
/* 16px (var(--s-4)) Außen-Abstand auf Mobile — gleicher Look wie Desktop */
.screen-body { padding: var(--s-4); }
}
/* Dashboard Mobile: app-shell hat schon den Top-Abstand, hier auch padding-top: 0 */
.app-shell--dashboard .screen-body { padding-top: 0; }
/* Stack-Layout bis Desktop (< 1024px) — Desktop-Grid greift ab 1024px */
@media (max-width: 1023px) {
.app-shell--dashboard .screen-body {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.app-shell--dashboard .screen-body > .balance { margin-bottom: 0; }
.app-shell--dashboard .screen-body > .team-section-h { margin: 0; }
.app-shell--profil .screen-body {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
}
/* Kalender Layout (gilt auf allen Größen): Stack mit 16px Gap */
.app-shell--kalender .screen-body {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
/* ----- Balance Card (folgt dem Theme — dark oder light) ----- */
.balance {
background:
radial-gradient(140% 90% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
color: var(--ink);
border-radius: var(--r-2xl);
padding: var(--s-7);
position: relative; overflow: hidden;
/* Safari-Fix: gleicher Grund wie bei .stat-card — der ::after-Glow nutzt
filter:blur und würde sonst über die gerundete Ecke hinausragen. */
clip-path: inset(0 round var(--r-2xl));
margin-bottom: var(--s-4); /* 16px Gap nach unten (Mobile-relevant) */
box-shadow:
var(--shadow-md),
0 12px 32px -16px var(--mint-glow), /* mint-getönter Boden-Glow */
inset 0 1px 0 var(--card-edge);
}
/* In Grid-Layouts (Desktop Dashboard): margin entfernen, row-gap übernimmt */
.app-shell--dashboard .screen-body > .balance { margin-bottom: 0; }
.balance::after {
content: '';
position: absolute;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, var(--mint) 0%, transparent 70%);
top: -100px; right: -100px;
opacity: 0.30;
filter: blur(2px);
animation: balance-glow-drift 18s ease-in-out infinite;
will-change: transform;
}
@keyframes balance-glow-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-30px, 30px) scale(1.08); }
66% { transform: translate(20px, -10px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.balance::after { animation: none !important; }
}
.balance .label {
font-size: 11px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 16px;
position: relative; z-index: 1;
}
.balance .big {
font-family: var(--font-display);
font-size: clamp(72px, 15vw, 96px);
font-weight: 600; line-height: 0.95;
letter-spacing: -0.05em;
margin-bottom: 6px;
position: relative; z-index: 1;
font-feature-settings: "tnum", "lnum", "ss03";
/* Subtler Mint-Gradient für Premium-Feel: oben heller, unten tiefer.
Funktioniert in beiden Themes — mint und mint-deep sind theme-aware. */
background: linear-gradient(180deg, var(--mint) 0%, var(--mint-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.balance .of {
font-size: 14px;
color: var(--ink-2);
margin-bottom: 20px;
position: relative; z-index: 1;
}
.balance .meter {
height: 8px; background: var(--bg-alt);
border-radius: 4px; overflow: hidden;
margin-bottom: 16px;
position: relative; z-index: 1;
}
.balance .meter-fill {
height: 100%; background: var(--mint); border-radius: 4px;
transition: width 0.4s ease;
box-shadow: 0 0 12px var(--mint-glow);
}
.balance .stats {
display: flex; gap: 14px; font-size: 12px;
position: relative; z-index: 1;
}
.balance .stats > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.balance .stats .v {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink); line-height: 1;
font-feature-settings: "tnum", "lnum";
}
.balance .stats .l {
font-size: 10px; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.5px;
font-weight: 600;
}
/* CTA in der Balance-Card — passt zum dark Hintergrund */
.balance-cta {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
gap: 8px;
width: 100%;
margin-top: var(--s-6);
padding: 14px 18px;
border-radius: var(--r-md);
background: var(--mint);
color: #0B0B11;
font-family: inherit; font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: 0 8px 24px -10px var(--mint-glow-2);
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.balance-cta:hover {
background: var(--mint-deep);
box-shadow: 0 14px 30px -10px var(--mint-glow-2);
}
.balance-cta:active { transform: scale(0.985); }
.balance-cta svg { width: 18px; height: 18px; }
/* ----- Section Title ----- */
.sec-title {
font-family: var(--font-ui);
font-size: 13px; font-weight: 600;
color: var(--ink-3);
letter-spacing: 0.3px; text-transform: uppercase;
margin: 28px 0 12px;
display: flex; justify-content: space-between; align-items: center;
}
.sec-title a {
font-size: 12px; color: var(--ink); font-weight: 600;
text-decoration: none; text-transform: none; letter-spacing: 0;
}
/* Chef-Kalender: 16px Abstand zwischen Kalender-Card und Kommende-Urlaube-Aside.
(Fahrer-View nutzt screen-body-Grid mit gap, deshalb hier nur im Chef-Scope.) */
.chef-main > .kal-main { margin-bottom: var(--s-4); }
/* ----- Kalender-Side-Panel (Kommende Urlaube am Kalender ausgerichtet) ----- */
.kal-side {
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
display: flex;
flex-direction: column;
gap: var(--s-4);
min-width: 0;
}
.kal-side .sec-title {
margin: 0;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-2);
font-size: 11px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-3);
}
.kal-side-list {
display: flex; flex-direction: column;
margin: 0 calc(var(--s-6) * -1);
padding: 0 var(--s-6);
overflow: visible;
}
/* Collapsible: zeigt nur die ersten ~10 Items; restliche per Button-Toggle */
.kal-side-list[data-collapsed] .vacation--collapsible { display: none; }
/* "Mehr anzeigen" / "Weniger" Button */
.kal-side-more {
display: inline-flex;
align-self: center;
align-items: center;
gap: 6px;
padding: 8px 16px;
margin-top: var(--s-3);
background: transparent;
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
color: var(--ink-2);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.kal-side-more:hover {
border-color: var(--mint);
color: var(--mint);
background: var(--nav-hover-bg);
}
.kal-side-more .kal-side-more-hide { display: none; }
.kal-side:has([data-collapsible]:not([data-collapsed])) .kal-side-more .kal-side-more-show { display: none; }
.kal-side:has([data-collapsible]:not([data-collapsed])) .kal-side-more .kal-side-more-hide { display: inline; }
/* Desktop: kein innerer Scroll mehr — Page scrollt durch (kal-side sitzt unter Kalender) */
@media (min-width: 1024px) {
.kal-side-list::-webkit-scrollbar { width: 6px; }
.kal-side-list::-webkit-scrollbar-track { background: transparent; }
.kal-side-list::-webkit-scrollbar-thumb {
background: var(--line-3);
border-radius: 100px;
}
.kal-side-list::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
}
/* Items in der Side-Liste: List-Style mit Hairline statt Card-Look */
.kal-side-list .vacation {
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
border-radius: 0;
/* Negative Margin + Padding-Trick: Hover-Bg läuft bis an die Card-Ränder,
Content bleibt mit s-6 Padding aligned. */
padding: var(--s-3) var(--s-6);
margin: 0 calc(var(--s-6) * -1);
box-shadow: none;
width: auto;
}
.kal-side-list .vacation:last-child { border-bottom: none; }
.kal-side-list .vacation:hover {
background: var(--bg-alt);
transform: none;
border-bottom-color: var(--line);
box-shadow: none;
}
/* ----- Nächste Urlaube als umschließende Card-Box ----- */
.next-vacations {
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
min-width: 0;
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
display: flex; flex-direction: column;
gap: var(--s-4);
}
.next-vacations .sec-title {
margin: 0;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-2);
font-size: 11px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-3);
}
.next-vac-count {
background: var(--mint-soft);
color: var(--success-ink);
padding: 2px 9px;
border-radius: 100px;
font-size: 11px; font-weight: 700;
letter-spacing: 0;
text-transform: none;
box-shadow: inset 0 0 0 1px rgba(31, 168, 137, 0.20), 0 2px 6px -2px var(--mint-glow);
}
:root[data-theme="dark"] .page-app .next-vac-count {
background: rgba(61, 217, 182, 0.16);
color: var(--mint);
}
.next-vacations-scroll {
display: flex; flex-direction: column;
margin: 0 calc(var(--s-6) * -1);
padding: 0 var(--s-6);
/* Default Mobile: kein innerer Scroll */
overflow: visible;
}
/* Desktop: Inner-Scroll bei vielen Items, aber OHNE overscroll-contain →
wenn nichts zu scrollen ist (≤4 Items) oder am Limit, gehen Wheel-Events zur Page */
@media (min-width: 1024px) {
.next-vacations-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
/* overscroll-behavior bleibt 'auto' (Default) — Scroll-Chaining funktioniert */
}
}
/* Custom Scrollbar */
.next-vacations-scroll::-webkit-scrollbar { width: 6px; }
.next-vacations-scroll::-webkit-scrollbar-track { background: transparent; }
.next-vacations-scroll::-webkit-scrollbar-thumb {
background: var(--line-3);
border-radius: 100px;
}
.next-vacations-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* Kompakte Legende am Ende der Box */
.vac-legend {
display: flex; align-items: center; flex-wrap: wrap;
gap: 4px 6px;
padding-top: var(--s-3);
border-top: 1px solid var(--line);
font-size: 11px;
color: var(--ink-3);
}
.vac-legend .status-chip {
font-size: 9.5px; padding: 2px 7px;
text-transform: uppercase;
}
.vac-legend-txt {
margin-right: var(--s-2);
color: var(--ink-3);
letter-spacing: 0.01em;
}
.vac-legend-txt:last-of-type { margin-right: 0; }
/* Innere Vacation-Items: verlieren Card-Style, werden zu List-Items mit Hairline.
Padding wird vom Scroll-Container hier ins Item verlegt, damit der Hover-Background
über die VOLLE Card-Breite läuft (nicht nur über die Content-Area). */
.next-vacations-scroll .vacation {
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: var(--s-3) var(--s-6);
margin: 0 calc(var(--s-6) * -1);
box-shadow: none;
width: auto;
}
.next-vacations-scroll .vacation:last-child { border-bottom: none; }
.next-vacations-scroll .vacation:hover {
background: var(--bg-alt);
transform: none;
border-bottom-color: var(--line);
box-shadow: none;
}
/* ----- Vacation Card ----- */
.vacation {
background: var(--card);
border-radius: var(--r-lg);
padding: var(--s-4);
display: flex; gap: var(--s-3); align-items: center;
margin-bottom: var(--s-2);
border: 1px solid var(--line);
transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.vacation--clickable {
width: 100%; text-align: left; font: inherit; cursor: pointer;
color: inherit;
}
.vacation--clickable:hover {
background: var(--card-elev);
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.vacation--clickable:active { transform: translateY(0); }
.date-tile {
background: var(--mint-soft);
border-radius: 12px;
padding: 8px 0; text-align: center;
min-width: 54px;
flex-shrink: 0;
}
:root[data-theme="dark"] .page-app .date-tile { background: rgba(61, 217, 182, 0.16); }
.date-tile.tile-wait { background: var(--warning-soft); }
:root[data-theme="dark"] .page-app .date-tile.tile-wait { background: rgba(244, 185, 66, 0.18); }
.date-tile.tile-pharma { background: var(--pharma-soft); }
:root[data-theme="dark"] .page-app .date-tile.tile-pharma { background: rgba(91, 123, 219, 0.18); }
.date-tile.tile-kfz { background: var(--kfz-soft); }
:root[data-theme="dark"] .page-app .date-tile.tile-kfz { background: rgba(232, 128, 78, 0.18); }
.date-tile .m {
font-size: 10px; text-transform: uppercase;
color: var(--mint-deep);
font-weight: 700; letter-spacing: 1px;
}
:root[data-theme="dark"] .page-app .date-tile .m { color: var(--mint); }
.date-tile.tile-wait .m { color: var(--warning-ink); }
:root[data-theme="dark"] .page-app .date-tile.tile-wait .m { color: var(--warning); }
.date-tile.tile-pharma .m { color: var(--pharma); }
.date-tile.tile-kfz .m { color: var(--kfz); }
:root[data-theme="dark"] .page-app .date-tile.tile-kfz .m { color: #FFB088; }
.date-tile .d {
font-family: var(--font-display);
font-size: 24px; font-weight: 600;
letter-spacing: -0.03em;
color: var(--ink); line-height: 1;
font-feature-settings: "tnum", "lnum";
}
.vacation .info { flex: 1; min-width: 0; }
.vacation .info .t {
font-weight: 500; font-size: 14px; color: var(--ink);
margin-bottom: 2px;
}
.vacation .info .s { font-size: 11.5px; color: var(--ink-3); }
.status-chip {
font-size: 10px; font-weight: 700;
padding: 4px 10px; border-radius: 100px;
text-transform: uppercase; letter-spacing: 0.5px;
flex-shrink: 0;
}
.status-chip.ok {
background: var(--mint-soft); color: var(--success-ink);
box-shadow: inset 0 0 0 1px rgba(31, 168, 137, 0.20), 0 2px 8px -2px var(--mint-glow);
}
:root[data-theme="dark"] .page-app .status-chip.ok { background: rgba(61, 217, 182, 0.18); color: var(--mint); }
.status-chip.wait {
background: var(--warning-soft); color: var(--warning-ink);
box-shadow: inset 0 0 0 1px rgba(244, 185, 66, 0.25), 0 2px 8px -2px rgba(244, 185, 66, 0.22);
}
:root[data-theme="dark"] .page-app .status-chip.wait { background: rgba(244, 185, 66, 0.20); color: var(--warning); }
.status-chip.work { background: var(--info-soft); color: #2E4FAB; }
:root[data-theme="dark"] .page-app .status-chip.work { background: rgba(91, 123, 219, 0.20); color: #8EA5EB; }
.status-chip.deny {
background: var(--danger-soft); color: var(--danger-ink);
box-shadow: inset 0 0 0 1px rgba(232, 112, 79, 0.25), 0 2px 8px -2px rgba(232, 112, 79, 0.22);
}
:root[data-theme="dark"] .page-app .status-chip.deny { background: rgba(232, 112, 79, 0.20); color: #FFA38A; }
.empty-card {
background: var(--card);
border: 1px dashed var(--line-2);
border-radius: 18px; padding: 24px;
text-align: center;
font-size: 14px; color: var(--ink-3);
}
/* ----- Team Section Header ----- */
/* Team-Section: Wrapper-Card um Section-Header + Team-Grid */
.team-section {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-5);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.team-section .team-section-h {
margin: 0 0 var(--s-4); /* nur 16px Abstand nach unten zum Grid */
}
.team-section .team-grid {
/* Grid ist schon definiert; sitzt jetzt in der Card */
margin: 0;
}
.team-section-h {
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: var(--s-3);
margin: var(--s-4) 0 var(--s-3); /* 16px oben (Mobile-Gap zur Card drüber), 12px zur Liste drunter */
}
.team-section-h-label {
font-family: var(--font-ui);
font-size: 11px; font-weight: 600;
color: var(--ink-3);
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 6px;
display: inline-flex; align-items: center; gap: 6px;
}
.team-section-h-label::before {
content: '';
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.team-section-h-title {
font-family: var(--font-display);
font-size: clamp(26px, 4vw, 32px); font-weight: 600;
letter-spacing: -0.035em; line-height: 1.05;
color: var(--ink);
}
.team-section-h-title em { font-style: normal; font-weight: 700; color: var(--mint); }
.team-section-h-right {
display: flex; align-items: center; gap: var(--s-3);
flex-wrap: wrap;
padding-bottom: 2px;
}
.team-section-h-meta {
font-size: 13px;
color: var(--ink-3);
white-space: nowrap;
}
/* Suchfeld */
.team-search {
position: relative;
display: inline-flex; align-items: center;
background: var(--card);
border: 1px solid var(--line-2);
border-radius: 100px;
padding: 0 12px 0 32px;
height: 36px;
min-width: 220px;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.team-search:focus-within {
border-color: var(--mint);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.team-search svg {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
pointer-events: none;
}
.team-search input {
background: transparent;
border: none; outline: none;
color: var(--ink);
font: inherit; font-size: 13.5px;
width: 100%;
}
.team-search input::placeholder { color: var(--ink-3); }
.team-search input::-webkit-search-cancel-button { cursor: pointer; }
/* ----- Team Grid (Steckbriefe) ----- */
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
}
@media (min-width: 540px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1700px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 2000px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }
.team-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-4) var(--s-4) var(--s-3);
display: flex; flex-direction: column;
gap: var(--s-3);
transition: transform var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
box-shadow: var(--shadow-xs);
}
.team-card[hidden] { display: none !important; }
.team-card:hover {
transform: translateY(-2px);
border-color: rgba(61, 217, 182, 0.30);
box-shadow:
var(--shadow-md),
0 0 0 1px rgba(61, 217, 182, 0.10),
0 16px 32px -16px rgba(61, 217, 182, 0.18);
}
.team-card--away .team-card-head .team-avatar { filter: saturate(0.5) brightness(0.85); }
.team-card-head { display: flex; align-items: center; gap: var(--s-3); }
.team-avatar {
position: relative;
width: 52px; height: 52px;
flex-shrink: 0;
}
.team-avatar img,
.team-avatar-fallback {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 17px;
color: #fff;
line-height: 1;
/* Subtler Mint-Ring außen, plus dezenter Dark-Hairline für Trennung */
box-shadow:
0 0 0 2px var(--card),
0 0 0 3.5px rgba(61, 217, 182, 0.45);
}
.team-card:hover .team-avatar img,
.team-card:hover .team-avatar-fallback {
box-shadow:
0 0 0 2px var(--card),
0 0 0 3.5px var(--mint),
0 0 12px rgba(61, 217, 182, 0.25);
}
.team-avatar-fallback--pharma { background: linear-gradient(135deg, var(--pharma), var(--pharma-deep)); }
.team-avatar-fallback--kfz { background: linear-gradient(135deg, var(--kfz), var(--kfz-deep)); }
.team-id { min-width: 0; flex: 1; }
.team-name {
font-weight: 600; font-size: 15px;
color: var(--ink);
line-height: 1.2;
margin-bottom: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Status-Pill (statt nur Dot) */
.team-status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px 2px 6px;
background: rgba(61, 217, 182, 0.14);
color: var(--mint);
border-radius: 100px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.01em;
max-width: 100%;
}
.team-status-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px rgba(61, 217, 182, 0.6);
}
.team-status-pill--away { background: rgba(244, 185, 66, 0.16); color: var(--warning); }
.team-status-pill--away .team-status-dot { background: var(--warning); box-shadow: 0 0 6px rgba(244, 185, 66, 0.5); }
.team-meta {
display: flex; flex-direction: column;
gap: var(--s-2);
padding-top: var(--s-3);
border-top: 1px solid var(--line);
margin: 0;
}
.team-meta-row {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: center;
font-size: 13px;
color: var(--ink-2);
}
.team-meta-row dt { color: var(--ink-3); display: flex; align-items: center; }
.team-meta-row dd { min-width: 0; }
.team-phone { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.team-birthday-soon {
display: inline-block;
background: rgba(244, 185, 66, 0.16);
color: var(--warning);
padding: 1px 8px;
border-radius: 100px;
font-size: 10.5px; font-weight: 700;
margin-left: 6px;
letter-spacing: 0.02em;
}
/* Action-Buttons (richtige Größe, klare CTA) */
.team-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding-top: var(--s-2);
}
.team-action {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
padding: 8px 10px;
border-radius: var(--r-sm);
font-size: 12.5px; font-weight: 600;
text-decoration: none;
border: 1px solid var(--line-2);
color: var(--ink-2);
background: var(--bg-alt);
transition: all var(--dur-fast) var(--ease-out);
}
.team-action svg { flex-shrink: 0; }
.team-action:hover { border-color: var(--mint); color: var(--ink); }
.team-action--call:hover { background: var(--bg-elev); color: var(--mint); }
.team-action--wa {
background: rgba(61, 217, 182, 0.16);
color: var(--mint);
border-color: rgba(61, 217, 182, 0.30);
}
.team-action--wa:hover {
background: var(--mint);
color: #0B0B11;
border-color: var(--mint);
box-shadow: var(--shadow-glow);
}
/* ----- Team Strip (Legacy — bleibt für Kalender) ----- */
.team-strip {
display: flex; gap: 8px;
overflow-x: auto;
margin: 0 -24px; padding: 0 24px 4px;
scrollbar-width: none;
}
.team-strip::-webkit-scrollbar { display: none; }
.t-card {
flex-shrink: 0; width: 96px;
background: var(--card);
border-radius: 18px;
padding: 14px 10px; text-align: center;
border: 1px solid var(--line);
}
.t-card .face {
width: 44px; height: 44px; border-radius: 50%;
margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; color: #fff; font-size: 13px;
position: relative;
}
.t-card .face--pharma { background: linear-gradient(135deg, #5B7BDB, #3D5DBD); }
.t-card .face--kfz { background: linear-gradient(135deg, #E8804E, #B8551F); }
.t-card .nm {
font-size: 12px; font-weight: 500; color: var(--ink);
margin-bottom: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-card .st { font-size: 10px; color: var(--mint); font-weight: 600; }
.t-card.away .st { color: var(--warning); }
.t-card.away .face::after {
content: '';
position: absolute;
top: -2px; right: -2px;
width: 12px; height: 12px;
background: var(--warning);
border: 2px solid var(--card);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(244, 185, 66, 0.6);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(244, 185, 66, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(244, 185, 66, 0); }
100% { box-shadow: 0 0 0 0 rgba(244, 185, 66, 0); }
}
/* ----- Action Button (Hero CTA) ----- */
.action-btn {
width: 100%; padding: 18px;
background: var(--mint); color: #0B0B11;
border: none; border-radius: var(--r-md);
font-family: inherit; font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
cursor: pointer; margin-top: 18px;
display: flex; align-items: center; justify-content: center;
gap: 8px; text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
box-shadow: var(--shadow-glow);
}
.action-btn:hover { background: var(--mint-deep); box-shadow: 0 14px 32px -10px var(--mint-glow-2); }
.action-btn:active { transform: scale(0.985); }
.action-btn svg { width: 18px; height: 18px; }
.action-btn--danger {
background: transparent;
color: var(--danger);
border: 1px solid rgba(232, 112, 79, 0.35);
box-shadow: none;
margin-top: var(--s-7);
}
.action-btn--danger:hover { background: rgba(232, 112, 79, 0.10); color: var(--danger); box-shadow: none; }
/* ----- Bottom-Nav (Mobile) ----- */
/*
* Mobile (<1024px): fixed unten, nur 4 Icon-Items sichtbar, Brand/User/Logout hidden
* Desktop (>=1024px): wird zur linken Sidebar — siehe @media unten
*/
.bnav {
position: fixed;
bottom: 0; left: 0; right: 0;
background: rgba(11, 11, 17, 0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-top: 1px solid var(--line);
padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
z-index: var(--z-nav);
width: 100%;
margin: 0;
}
:root[data-theme="light"] .bnav {
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.8),
4px 0 24px -8px rgba(20, 20, 28, 0.06),
20px 0 60px -30px var(--mint-glow);
}
.bnav-brand, .bnav-user, .bnav-logout { display: none; }
/* Brand-Dot (Mint-Raute) — wird in Sidebar UND Fahrer-Mobile-Header verwendet */
.bnav-brand-dot {
position: relative;
display: inline-block;
width: 10px; height: 10px;
background: var(--mint);
border-radius: 3px;
transform: rotate(45deg);
box-shadow: 0 0 10px var(--mint-glow);
flex-shrink: 0;
animation: brand-dot-pulse 4s ease-in-out infinite;
}
.bnav-brand-dot::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--mint) 25%,
transparent 50%);
filter: blur(5px);
opacity: 0.5;
animation: hero-halo-spin 10s linear infinite;
pointer-events: none;
z-index: -1;
}
@keyframes brand-dot-pulse {
0%, 100% { box-shadow: 0 0 10px var(--mint-glow); }
50% { box-shadow: 0 0 18px var(--mint-glow-2); }
}
@media (prefers-reduced-motion: reduce) {
.bnav-brand-dot,
.bnav-brand-dot::before { animation: none !important; }
}
/* Theme-Toggle: zeigt das jeweils ANDERE Icon (z.B. Mond bei light = "wechsle zu dark") */
.theme-icon-dark, .theme-icon-light { width: 18px; height: 18px; flex-shrink: 0; }
:root[data-theme="dark"] .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-label-dark { display: none; }
:root[data-theme="light"] .theme-label-light { display: none; }
/* Theme-Toggle als Sidebar-Button */
.sb-link--btn {
background: transparent; border: 0; width: 100%;
text-align: left; cursor: pointer; font: inherit;
}
/* Mobile/Tablet (<1024px): Theme-Toggle in Bottom-Nav verstecken,
da er jetzt im Top-Header sitzt. */
@media (max-width: 1023px) {
.bnav-theme { display: none !important; }
}
.bnav-items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
/* Mobile (<1024px): Profil-Item raus + 3 Spalten — Profil ist im Top-Header */
@media (max-width: 1023px) {
.bnav-items { grid-template-columns: repeat(3, 1fr); }
.bnav-item--mobile-hide { display: none !important; }
}
/* ---------- Top-Header (Fahrer) — Mobile UND Desktop ---------- */
.fnav-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: fixed;
top: 0; left: 0; right: 0;
z-index: calc(var(--z-nav) + 1);
padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
border-bottom: 1px solid var(--line);
box-shadow: 0 8px 24px -10px rgba(20, 20, 28, 0.10);
}
/* Platz für den fixierten Header — App-Shell oben Padding (Top-Bar + 16px Gap) */
.page-app:has(.fnav-top) .app-shell {
padding-top: calc(56px + var(--s-4) + env(safe-area-inset-top, 0px));
}
.page-app:has(.fnav-top) .top .avatar { display: none; }
.page-app:has(.fnav-top) .top .greet { width: 100%; }
:root[data-theme="dark"] .fnav-top {
background: rgba(26, 26, 35, 0.85); /* card-Ton statt bg-Ton — passt zu Sidebar + Cards */
border-bottom-color: var(--card-edge);
}
.fnav-top-brand {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--ink);
font-weight: 700; font-size: 15px;
letter-spacing: -0.01em;
min-width: 0;
}
.fnav-top-brand-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fnav-top-right {
display: flex; align-items: center; gap: 8px;
}
.fnav-top-user {
display: flex; align-items: center; gap: 8px;
text-decoration: none; color: var(--ink);
padding: 4px 6px 4px 10px;
border-radius: 999px;
transition: background var(--dur-fast) var(--ease-out);
}
.fnav-top-user:hover { background: var(--bg-alt); }
.fnav-top-user-name {
font-size: 13px; font-weight: 600;
max-width: 140px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fnav-top-avatar {
width: 30px; height: 30px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-alt);
color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
border: 1px solid var(--line);
}
.fnav-top-avatar .avatar-img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.fnav-top-icon {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--card);
color: var(--ink-2);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0;
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.fnav-top-icon svg { width: 16px; height: 16px; }
.fnav-top-icon:hover { color: var(--mint); border-color: var(--mint); }
.fnav-top-icon:active { transform: scale(0.92); }
.fnav-top-icon--logout:hover { color: var(--danger); border-color: var(--danger); }
/* Schmaler Screen: User-Name ausblenden, nur Avatar */
@media (max-width: 420px) {
.fnav-top-user-name { display: none; }
.fnav-top-user { padding: 4px; }
}
/* Sanfter Fade über die Nav */
.bnav::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 100%;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--bg) 92%);
pointer-events: none;
}
.bnav-item {
background: none; border: none; cursor: pointer;
display: flex; flex-direction: column;
align-items: center; gap: 4px;
padding: 10px 4px 6px;
color: var(--ink-3);
font-family: inherit;
font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em;
text-decoration: none;
border-radius: var(--r-md);
position: relative;
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.bnav-item:hover { color: var(--ink); }
.bnav-item.active { color: var(--mint); }
.bnav-item.active::before {
content: '';
position: absolute;
top: 2px; left: 50%;
transform: translateX(-50%);
width: 22px; height: 3px;
background: var(--mint);
border-radius: 0 0 100px 100px;
box-shadow: 0 0 8px var(--mint-glow-2);
}
.bnav-item:active { transform: scale(0.94); }
.bnav-item svg { width: 22px; height: 22px; stroke-width: 2; }
/* ============ BANNER-FAMILY ============
Gemeinsame Optik für alle inline-Hinweis-Boxen. EINE Quelle der Wahrheit für
Form, Padding, Card-BG, Grid und Icon-Kreis — Varianten setzen nur noch den
Akzent (Border-Left-Farbe + Icon-Tint).
Mitglieder: .flash · .decision-banner · .overlap-block
(.form-error ist die Pflicht-Field-Fehler-Variante mit eigenem Look)
Spec:
- border-radius: var(--r-md) (12px — einheitlich für ALLE Banner)
- padding: 14px 14px 14px 16px
- background: var(--card) + card-shine
- border: 1px var(--line), border-left: 3px Akzentfarbe
- grid: 36px (Icon) | 1fr (Body) | auto (Close-Button)
- Icon-Kreis: 36×36, flat tint (kein Gradient/Glow)
- Schließ-Transition: max-height/margin/padding für sanftes Einklappen
*/
.flash,
.decision-banner,
.overlap-block {
padding: 14px 14px 14px 16px;
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-left: 3px solid var(--mint);
border-radius: var(--r-md);
color: var(--ink);
font-size: 14px; font-weight: 500; line-height: 1.35;
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 14px;
box-shadow: var(--shadow-md);
position: relative;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
max-height var(--dur-base) var(--ease-out),
margin var(--dur-base) var(--ease-out),
padding var(--dur-base) var(--ease-out);
max-height: 320px;
overflow: hidden;
}
.flash.is-closing,
.decision-banner.is-closing,
.overlap-block.is-closing {
opacity: 0;
transform: translateY(-4px);
max-height: 0;
margin-top: 0; margin-bottom: 0;
padding-top: 0; padding-bottom: 0;
border-width: 0;
}
/* ============ FLASH ============ */
/* Außerhalb von .screen-body bekommt der Flash margin (Page-Padding sonst null).
Icon kommt per ::before (Background-SVG, kein PHP-Touch).
.flash-close (X-Button) wird in JS injiziert (siehe app.js -> initFlash). */
.flash {
margin: 0 var(--s-4) 12px;
}
/* Icon-Kreis (Grid-Col 1). Inline-SVG via background-image, Hintergrund-Tint = Akzentfarbe. */
.flash::before {
content: '';
grid-column: 1;
width: 36px; height: 36px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
}
/* Wenn der Flash INSIDE der screen-body sitzt, übernimmt das Grid/Flex die Ausrichtung */
.screen-body > .flash { margin: 0; }
/* Chef-Main hat horizontal kein Padding (Gaps kommen vom Body) — also auch
beim Flash KEINE Außen-Margin, sonst sitzt er schmaler als Filter-Card/Liste darunter.
Banner-Family direkte Kinder bekommen 16px-Abstand zur nächsten Box (in screen-body
liefert das Grid den Gap, hier müssen wir's selbst setzen). */
.chef-main > .flash,
.chef-main > .decision-banner,
.chef-main > .overlap-block {
margin: 0 0 var(--s-4);
}
.flash-close {
grid-column: 3;
position: static;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0; border-radius: 50%;
color: var(--ink-3); opacity: 0.85;
cursor: pointer;
transition: opacity var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.flash-close:hover { opacity: 1; color: var(--ink); background: var(--bg-alt); }
.flash-close svg { width: 14px; height: 14px; }
@media (min-width: 720px) {
.flash { margin: 0 var(--s-8) var(--s-3); }
.screen-body > .flash { margin: 0; }
}
/* ============ DECISION-BANNER (bewilligt / abgelehnt auf Dashboard) ============ */
/* Erbt komplette Optik aus der Banner-Family — hier nur Varianten-Akzente. */
.decision-banner--ok { border-left-color: var(--mint); }
.decision-banner--no { border-left-color: var(--danger); }
.decision-banner--info { border-left-color: var(--warning); }
.decision-banner-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
position: relative;
}
/* Clean & flat — identisch zum .flash::before-Icon (dezenter Tint, kein Glow/Ring) */
.decision-banner--ok .decision-banner-icon {
background: rgba(61, 217, 182, 0.18);
color: var(--mint);
}
.decision-banner--no .decision-banner-icon {
background: rgba(232, 112, 79, 0.18);
color: var(--danger);
}
.decision-banner--info .decision-banner-icon {
background: rgba(244, 185, 66, 0.18);
color: #F4B942;
}
.decision-banner-link {
color: var(--mint); text-decoration: none;
border-bottom: 1px solid rgba(61, 217, 182, 0.35);
padding-bottom: 1px;
transition: border-color var(--dur-fast) var(--ease-out);
}
.decision-banner-link:hover { border-color: var(--mint); }
.decision-banner-icon svg { width: 18px; height: 18px; }
.decision-banner-text { min-width: 0; }
.decision-banner-title {
font-size: 14px; font-weight: 600; color: var(--ink);
line-height: 1.35;
}
.decision-banner-sub {
font-size: 12.5px; color: var(--ink-3);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.decision-banner-form { margin: 0; display: contents; }
.decision-banner-close {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0; border-radius: 50%;
color: var(--ink-3); opacity: 0.85;
cursor: pointer;
transition: opacity var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.decision-banner-close:hover { opacity: 1; color: var(--ink); background: var(--bg-alt); }
.decision-banner-close svg { width: 14px; height: 14px; }
/* Type-Varianten: Border-Left + Icon-Kreis-Farbe + Glyph */
.flash--success { border-left-color: var(--mint); }
.flash--success::before {
background-color: rgba(61, 217, 182, 0.16);
background-image: url("data:image/svg+xml;utf8,");
}
.flash--error, .flash--warn { border-left-color: var(--danger); }
.flash--error::before, .flash--warn::before {
background-color: rgba(232, 112, 79, 0.16);
background-image: url("data:image/svg+xml;utf8,");
}
/* ============ ANTRAG-FORM (dark on .page-app) ============ */
.antrag-sub {
color: var(--ink-2);
font-size: 14.5px; line-height: 1.5; margin-bottom: var(--s-4);
}
@media (max-width: 720px) {
.antrag-sub { font-size: 13.5px; margin-bottom: var(--s-3); }
}
.muted { color: var(--ink-4); font-weight: 400; font-size: 11px; }
.hidden { display: none !important; }
.form-section { margin-bottom: 20px; }
.form-section > label {
display: block;
font-size: 11px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 10px;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
background: var(--card);
border: 1px solid var(--line-2);
color: var(--ink);
padding: 10px 16px; border-radius: 100px;
font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer; text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
display: inline-flex; align-items: center; gap: 6px;
}
.pill.active {
background: var(--mint); color: #0E0E13;
border-color: var(--mint);
box-shadow: 0 6px 18px -6px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pill:hover:not(.active):not([disabled]) {
border-color: var(--mint); color: var(--mint);
background: rgba(61, 217, 182, 0.06);
}
.pill[disabled], .pill[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.pill-soon {
background: rgba(244, 185, 66, 0.20);
color: var(--warning);
padding: 1px 7px;
border-radius: 100px;
font-size: 10px; font-weight: 700;
margin-left: 6px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.pill-badge {
background: rgba(0,0,0,0.08); color: var(--ink);
border-radius: 100px; padding: 1px 7px;
font-size: 11px; font-weight: 700; margin-left: 4px;
}
.pill.active .pill-badge { background: rgba(14, 14, 19, 0.15); color: #0E0E13; }
:root[data-theme="dark"] .page-app .pill-badge { background: rgba(255, 255, 255, 0.10); color: #fff; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-pick {
display: flex; flex-direction: column;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 12px 14px; cursor: pointer;
}
.date-pick .l {
font-size: 11px; font-weight: 600;
color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 6px;
}
.date-pick input[type="date"] {
border: none; background: transparent; color: var(--ink);
font: inherit; font-family: var(--font-display); font-size: 17px;
font-weight: 600; letter-spacing: -0.02em;
padding: 0;
color-scheme: dark light;
font-feature-settings: "tnum", "lnum";
}
:root[data-theme="dark"] .page-app .date-pick input[type="date"] { color-scheme: dark; }
.date-pick input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
/* Dark-Mode: native Date-Inputs (Chef/Admin-Seiten) sollen den hellen Picker-Indikator
bekommen — sonst dunkles Icon auf dunklem Hintergrund. */
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="datetime-local"] {
color-scheme: dark;
}
.form-input {
width: 100%; padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
color: var(--ink);
font-family: inherit; font-size: 14px;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.form-input:focus {
outline: none;
border-color: var(--mint);
box-shadow: 0 0 0 3px var(--focus-ring);
}
textarea.form-input { resize: vertical; min-height: 80px; }
.summary-card {
background: var(--card-elev);
border: 1px solid var(--line);
color: var(--ink);
border-radius: var(--r-lg);
padding: 20px;
margin: 24px 0 18px;
}
.summary-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0; font-size: 14px;
}
.summary-row .lb { color: var(--ink-3); }
.summary-row .vl {
font-family: var(--font-display);
font-size: 20px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
font-feature-settings: "tnum", "lnum";
}
.summary-row.total { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 12px; }
.summary-row.total .vl { color: var(--mint); font-weight: 700; }
.summary-warn {
margin-top: 10px; padding: 10px 12px;
border-radius: var(--r-md);
background: rgba(232, 112, 79, 0.20);
color: #FFC9B5;
font-size: 12px;
}
.summary-conflict {
margin-top: 12px; padding: 12px 14px;
border-radius: var(--r-md);
background: rgba(244, 185, 66, 0.14);
border: 1px solid rgba(244, 185, 66, 0.40);
color: var(--warning);
font-size: 12.5px; line-height: 1.45;
}
.page-chef .summary-conflict {
background: var(--warning-soft);
color: var(--warning-ink);
}
.summary-conflict-head { font-weight: 600; margin-bottom: 6px; }
.summary-conflict ul {
margin: 4px 0 6px 18px;
padding: 0 8px 0 0;
max-height: 160px;
overflow-y: auto;
}
.summary-conflict li { margin: 2px 0; }
.summary-conflict-foot { opacity: 0.85; font-size: 11.5px; margin-top: 4px; }
/* Wenn Warnung oder Konflikt sichtbar: Tipps verstecken — Fokus auf das Problem,
Side-Card wächst nicht über den Viewport raus. */
.antrag-side-card:has(.summary-warn:not(.hidden)) .antrag-tips--side,
.antrag-side-card:has(.summary-conflict:not(.hidden)) .antrag-tips--side {
display: none;
}
.submit-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 8px; }
/* =============================================================================
Flatpickr Custom-Theme — passend zum App-Dark-Mode + Mint-Akzent
============================================================================= */
/* AltInput (das was der User sieht) — flatpickr fügt die Klassen "form-control input active" hinzu.
Wir formatieren es wie das original .date-pick input[type=date]. */
.date-pick input.form-control,
.date-pick input.flatpickr-alt-input,
.date-pick input[type="text"][readonly] {
border: none !important;
background: transparent !important;
color: var(--ink) !important;
font: inherit !important;
font-family: var(--font-display) !important;
font-size: 17px !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
padding: 0 !important;
width: 100% !important;
cursor: pointer;
font-feature-settings: "tnum", "lnum" !important;
outline: none !important;
box-shadow: none !important;
height: auto !important;
}
.date-pick input.form-control::placeholder { color: var(--ink-3) !important; font-weight: 500 !important; }
.date-pick input.form-control:focus { box-shadow: none !important; outline: none !important; }
.date-pick input.form-control.active { background: transparent !important; }
/* Calendar-Container */
.flatpickr-calendar {
background: var(--card-elev) !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-xl) !important;
color: var(--ink) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
padding: 6px !important;
width: 354px !important;
overflow: visible !important;
z-index: calc(var(--z-modal) + 10) !important;
}
/* In Dialogs: inline rendern + volle Breite */
dialog .flatpickr-calendar {
position: relative !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-shadow: none !important;
margin: 10px 0 4px;
}
/* Date-Field: Input + Icon-Button als verbundene Pill */
.date-field {
display: flex; align-items: stretch;
gap: 8px;
}
.date-field input { flex: 1; min-width: 0; }
.date-field-btn {
flex-shrink: 0;
width: 44px;
background: var(--bg-alt);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--ink-2);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.date-field-btn svg { width: 20px; height: 20px; }
.date-field-btn:hover { border-color: var(--mint); color: var(--mint); background: var(--card); }
.date-field-btn:active { transform: scale(0.96); }
.flatpickr-calendar.hasWeeks { width: 386px !important; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none !important; }
.flatpickr-calendar.animate.open { animation: fp-fade var(--dur-fast) var(--ease-out); }
@keyframes fp-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Monat-Header */
.flatpickr-months {
background: transparent !important;
padding: 6px 10px 10px !important;
border-bottom: 1px solid var(--line) !important;
margin-bottom: 6px;
align-items: center !important;
justify-content: space-between !important;
}
.flatpickr-month {
color: var(--ink) !important;
height: 38px !important;
background: transparent !important;
}
.flatpickr-current-month {
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
padding: 6px 0 !important;
height: 38px !important;
color: var(--ink) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px;
position: static !important;
left: auto !important; right: auto !important;
width: auto !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: transparent !important;
color: var(--ink) !important;
font-weight: 700 !important;
font-family: var(--font-display) !important;
font-size: 15px !important;
padding: 4px 8px !important;
border-radius: var(--r-sm) !important;
cursor: pointer;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--bg-alt) !important; }
/* Year-Select (custom, ersetzt das numInput) */
.flatpickr-year-wrap {
position: relative;
display: inline-block;
}
.flatpickr-year-wrap::after {
content: '';
position: absolute;
right: 10px; top: 50%;
width: 0; height: 0;
margin-top: -2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--ink-3);
pointer-events: none;
}
.flatpickr-year-select {
appearance: none;
-webkit-appearance: none;
background: var(--bg-alt);
color: var(--ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 4px 26px 4px 10px;
cursor: pointer;
}
.flatpickr-year-select:hover { background: var(--card); border-color: var(--mint); }
.flatpickr-year-select:focus {
outline: none;
border-color: var(--mint);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.flatpickr-monthDropdown-months option {
background: var(--card) !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
.flatpickr-current-month input.cur-year {
color: var(--ink) !important;
font-weight: 700 !important;
font-family: var(--font-display) !important;
font-size: 15px !important;
background: var(--bg-alt) !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--r-sm) !important;
text-align: center !important;
padding: 4px 8px !important;
width: 70px !important;
box-shadow: none !important;
cursor: text !important;
}
.flatpickr-current-month input.cur-year:hover { border-color: var(--mint) !important; }
.flatpickr-current-month input.cur-year:focus {
outline: none !important;
border-color: var(--mint) !important;
box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
.flatpickr-current-month .numInputWrapper {
width: 78px !important;
display: inline-flex !important;
align-items: center;
border-radius: var(--r-sm);
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: var(--ink-2) !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--ink-2) !important; }
/* Pfeile — aus den Ecken (default position:absolute) raus in den Flex-Flow */
.flatpickr-prev-month, .flatpickr-next-month {
position: relative !important;
top: auto !important; left: auto !important; right: auto !important;
fill: var(--ink-2) !important;
color: var(--ink-2) !important;
padding: 0 !important;
width: 30px !important;
height: 30px !important;
border-radius: var(--r-sm) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out) !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
background: var(--bg-alt) !important;
fill: var(--mint) !important;
color: var(--mint) !important;
}
.flatpickr-prev-month.flatpickr-disabled,
.flatpickr-next-month.flatpickr-disabled {
opacity: 0.25 !important;
pointer-events: none;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: inherit !important; }
/* Wochentage-Header — gleiches 7-Spalt-Grid wie die Day-Cells */
.flatpickr-weekdays {
background: transparent !important;
height: 28px !important;
margin-bottom: 2px;
}
.flatpickr-weekdaycontainer {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
width: 100% !important;
gap: 2px;
}
.flatpickr-weekday {
background: transparent !important;
color: var(--ink-3) !important;
font-weight: 700 !important;
font-size: 10px !important;
letter-spacing: 0.8px !important;
text-transform: uppercase;
width: 100% !important;
max-width: none !important;
flex-basis: auto !important;
}
/* InnerContainer ist flex — rContainer muss wachsen damit Days breit genug sind */
.flatpickr-innerContainer { width: 100% !important; }
.flatpickr-rContainer {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
display: block !important;
}
/* Day-Container — explizit 7-Spalten-Grid für sauberen Tab-Sync mit KW */
.flatpickr-days {
width: 100% !important;
background: transparent !important;
overflow: visible !important;
}
.dayContainer {
background: transparent !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: 2px 0 !important;
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px;
justify-items: center;
}
.flatpickr-day {
color: var(--ink) !important;
border-radius: var(--r-sm) !important;
font-weight: 500 !important;
font-size: 13px !important;
width: 100% !important;
max-width: none !important;
flex-basis: auto !important;
height: 36px !important;
line-height: 36px !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
position: relative;
}
.flatpickr-day:hover, .flatpickr-day:focus {
background: var(--bg-alt) !important;
color: var(--ink) !important;
box-shadow: none !important;
}
.flatpickr-day.today:not(.selected) {
box-shadow: inset 0 0 0 1.5px var(--mint) !important;
color: var(--mint) !important;
font-weight: 700 !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
background: var(--mint) !important;
color: #0B0B11 !important;
border-color: var(--mint) !important;
font-weight: 700 !important;
box-shadow: 0 4px 12px -4px var(--mint-glow) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: var(--ink-4) !important;
background: transparent !important;
cursor: not-allowed !important;
opacity: 0.35;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--ink-4) !important;
opacity: 0.5;
}
.flatpickr-day.fp-holiday::after {
content: '';
position: absolute;
bottom: 4px; left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
background: var(--mint);
border-radius: 50%;
}
.flatpickr-day.selected.fp-holiday::after { background: #0B0B11; }
/* VON-Datum im BIS-Picker hervorheben (gestrichelter Ring) — so weiß man wo man war */
.flatpickr-day.fp-from-day:not(.selected) {
box-shadow: inset 0 0 0 1.5px var(--mint-soft) !important;
color: var(--mint) !important;
}
.flatpickr-day.fp-from-day:not(.selected)::before {
content: '';
position: absolute;
top: 3px; right: 3px;
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
}
/* Kalenderwochen-Spalte links — gleiche Y-Positionen wie Day-Cells */
.flatpickr-weekwrapper {
background: transparent !important;
border-right: 1px solid var(--line) !important;
margin-right: 4px;
padding-right: 6px;
width: 30px !important;
}
.flatpickr-weekwrapper .flatpickr-weeks {
background: transparent !important;
padding: 2px 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column;
gap: 2px;
}
.flatpickr-weekwrapper span.flatpickr-day {
color: var(--ink-3) !important;
font-size: 10px !important;
font-weight: 600 !important;
background: transparent !important;
width: 22px !important;
max-width: 22px !important;
height: 36px !important;
line-height: 36px !important;
border: none !important;
cursor: default !important;
margin: 0 !important;
box-shadow: none !important;
flex-shrink: 0;
}
.flatpickr-weekwrapper .flatpickr-weekday {
background: transparent !important;
color: var(--ink-3) !important;
font-weight: 700 !important;
font-size: 9px !important;
letter-spacing: 0.5px !important;
width: 22px !important;
height: 28px !important;
line-height: 28px !important;
}
/* Overlap-Block: zeigt deutlich an, dass der User schon einen Urlaub im Zeitraum hat */
/* ============ OVERLAP-BLOCK (Konflikt auf Antrag-Page) ============ */
/* Erbt Banner-Family Optik. Markup hat Icon + verschachtelten Body mit
Title/Sub/Actions — auto-Spalte für Actions entfällt, daher Grid-Override. */
.overlap-block {
grid-template-columns: 36px 1fr;
border-left-color: var(--warning);
margin-bottom: var(--s-4);
align-items: start; /* Body kann mehrzeilig sein */
}
.overlap-block-icon {
width: 36px; height: 36px;
background: rgba(244, 185, 66, 0.18);
color: var(--warning);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px; /* optisches Mitte-an-Text-Alignment */
}
.overlap-block-icon svg { width: 18px; height: 18px; }
.overlap-block-title {
font-size: 14px; font-weight: 600;
color: var(--ink);
line-height: 1.35;
margin-bottom: 2px;
}
.overlap-block-sub {
font-size: 12.5px; line-height: 1.5;
color: var(--ink-3);
margin-bottom: var(--s-3);
}
.overlap-block-actions {
display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.btn-pri--sm, .btn-sec--sm {
padding: 8px 14px !important;
font-size: 13px !important;
}
/* Antrag-Grid: Default 1-spaltig (Mobile/Tablet), Desktop wird's 2-spaltig.
Kleinerer Gap auf Mobile damit Form-Card und Zusammenfassung enger zusammenstehen. */
.antrag-grid { display: flex; flex-direction: column; gap: var(--s-3); }
/* Antrag-Form-Card (umschließt Header + Art, Zeitraum, Notiz) */
.antrag-form-card {
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
}
/* Header innerhalb der Card */
.antrag-card-head {
margin-bottom: var(--s-5);
padding-bottom: var(--s-5);
border-bottom: 1px solid var(--line);
}
.antrag-card-eyebrow {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 6px;
}
.antrag-card-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.antrag-card-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 38px);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--ink);
margin: 0 0 var(--s-3);
}
.antrag-card-title em {
font-style: normal; font-weight: 700;
color: var(--mint);
}
.antrag-card-sub {
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
max-width: 540px;
}
.antrag-form-card .form-section { margin-bottom: var(--s-5); }
.antrag-form-card .form-section:last-child { margin-bottom: 0; }
/* ===== Option A: Tipps & Smart-Hints ===== */
.antrag-tips {
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.antrag-tips-head {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: var(--s-3);
}
.antrag-tips-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.antrag-tips-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.antrag-tips-list li {
display: flex; gap: 10px;
padding: var(--s-3);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-size: 13px; line-height: 1.5;
color: var(--ink-2);
}
.antrag-tips-list li svg {
width: 32px; height: 32px;
padding: 7px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
color: var(--mint);
flex-shrink: 0;
box-sizing: border-box;
}
.antrag-tips-list li strong { color: var(--ink); font-weight: 600; }
/* Side-Variant: 1-spaltig, kompakter (in der schmaleren Zusammenfassung-Card) */
.antrag-tips--side {
margin-top: var(--s-4);
padding-top: 0;
border-top: none;
}
.antrag-tips--side .antrag-tips-list {
grid-template-columns: 1fr;
gap: var(--s-2);
}
.antrag-tips--side .antrag-tips-list li {
padding: 10px;
font-size: 12.5px;
line-height: 1.45;
}
.antrag-tips--side .antrag-tips-list li svg { width: 28px; height: 28px; padding: 6px; }
@media (max-width: 720px) {
.antrag-tips-list { grid-template-columns: 1fr; }
}
/* ===== Option B: Jahres-Visualisierung ===== */
.antrag-year-vis {
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.antrag-year-vis-head {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s-4);
flex-wrap: wrap;
}
.antrag-year-vis-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.antrag-year-vis-title { color: var(--ink-3); }
.antrag-year-vis-title strong { color: var(--ink); font-weight: 700; }
.antrag-year-vis-meta {
color: var(--ink-3);
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
margin-left: auto;
}
.antrag-year-vis-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
align-items: end;
height: 120px;
}
.antrag-year-vis-month {
display: flex; flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
padding: 4px;
border-radius: var(--r-sm);
transition: background var(--dur-fast) var(--ease-out);
}
.antrag-year-vis-month.is-current {
background: rgba(61, 217, 182, 0.06);
}
.antrag-year-vis-bar-wrap {
flex: 1;
width: 100%;
display: flex; flex-direction: column;
justify-content: flex-end;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
overflow: hidden;
position: relative;
min-height: 4px;
}
.antrag-year-vis-bar {
width: 100%;
transition: height var(--dur-base) var(--ease-out);
}
.antrag-year-vis-bar--approved { background: var(--mint); box-shadow: 0 0 8px var(--mint-glow); }
.antrag-year-vis-bar--pending { background: var(--mint-deep); opacity: 0.6; }
.antrag-year-vis-label {
font-size: 10px; font-weight: 600;
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.antrag-year-vis-month.is-current .antrag-year-vis-label { color: var(--mint); }
.antrag-year-vis-legend {
display: flex; align-items: center; gap: var(--s-4);
margin-top: var(--s-3);
font-size: 11px;
color: var(--ink-3);
}
.vis-lg { display: inline-flex; align-items: center; gap: 6px; }
.vis-lg-mark {
width: 12px; height: 12px;
border-radius: 3px;
display: inline-block;
}
.vis-lg-approved { background: var(--mint); }
.vis-lg-pending { background: var(--mint-deep); opacity: 0.6; }
/* ===== Mini-Kalender Live-Vorschau (in Antrag-Form-Card) ===== */
.antrag-mini-cal {
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.antrag-mini-cal-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-3);
}
.antrag-mini-cal-eyebrow {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 2px;
}
.antrag-mini-cal-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.antrag-mini-cal-title {
font-family: var(--font-display);
font-size: 16px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
}
.antrag-mini-cal-nav {
display: flex; gap: 4px;
}
.antrag-mini-cal-arrow {
width: 30px; height: 30px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink-2);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.antrag-mini-cal-arrow:hover { border-color: var(--mint); color: var(--mint); }
.antrag-mini-cal-wd {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px;
font-size: 10px; font-weight: 600;
color: var(--ink-3);
text-align: center;
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 4px;
}
.antrag-mini-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.antrag-mini-day {
aspect-ratio: 1;
display: grid; place-items: center;
font-size: 12px; font-weight: 500;
color: var(--ink-2);
border-radius: var(--r-sm);
position: relative;
font-variant-numeric: tabular-nums lining-nums;
background: var(--bg);
border: 1px solid transparent;
}
.antrag-mini-day.muted { color: var(--ink-4); opacity: 0.4; }
.antrag-mini-day.today {
border-color: var(--mint);
color: var(--mint);
font-weight: 700;
}
.antrag-mini-day.in-range {
background: var(--mint);
color: #0B0B11;
font-weight: 700;
box-shadow: 0 0 12px var(--mint-glow);
}
.antrag-mini-day.team-vac:not(.in-range):not(.muted) {
background: var(--pharma-soft);
color: var(--pharma);
font-weight: 600;
}
.antrag-mini-day.team-vac.kfz:not(.in-range):not(.muted) {
background: var(--kfz-soft);
color: var(--kfz);
}
.antrag-mini-day.holiday:not(.in-range):not(.muted) {
color: var(--mint);
font-weight: 600;
}
.antrag-mini-cal-legend {
display: flex; align-items: center; gap: var(--s-3);
flex-wrap: wrap;
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--line);
font-size: 11px;
color: var(--ink-3);
}
.mini-lg { display: inline-flex; align-items: center; gap: 6px; }
.mini-lg-mark {
width: 12px; height: 12px;
border-radius: 3px;
display: inline-block;
}
.mini-lg-me { background: var(--mint); box-shadow: 0 0 6px var(--mint-glow); }
.mini-lg-team { background: var(--pharma-soft); }
.mini-lg-holiday {
background: transparent;
color: var(--mint);
border: 1px solid var(--mint);
}
.antrag-form-card .form-section > label {
display: block;
font-size: 11px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s-2);
}
/* Antrag Side-Panel — gleiche Card-Tiefe wie Form-Card */
.antrag-side-card {
background:
radial-gradient(120% 80% at 100% 0%, rgba(61, 217, 182, 0.08) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
}
.antrag-side-title {
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s-3);
text-align: left;
}
.antrag-side-card .summary-row {
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-size: 13px;
}
.antrag-side-card .summary-row:last-of-type { border-bottom: none; }
.antrag-side-card .summary-row .vl {
font-size: 18px;
}
.antrag-side-card .summary-row.total {
margin-top: var(--s-2);
border-top: 1px solid var(--line-2);
border-bottom: none;
padding-top: var(--s-3);
}
.antrag-side-card .summary-row.total .vl {
font-size: 26px;
color: var(--mint);
}
.antrag-side-actions {
display: flex;
gap: var(--s-2);
margin-top: var(--s-4);
}
.antrag-side-actions .btn-pri {
flex: 1;
padding: 14px;
font-size: 14.5px;
display: inline-flex; align-items: center; justify-content: center;
}
.antrag-side-actions .btn-sec {
flex: 0 0 auto;
width: 48px; height: 48px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
text-align: center;
}
.antrag-side-actions .btn-sec svg { width: 18px; height: 18px; }
.btn-pri {
background: var(--mint); color: #0B0B11;
border: none; border-radius: var(--r-md);
padding: 16px;
font: inherit; font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
cursor: pointer;
transition: background var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
box-shadow: 0 8px 24px -8px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn-pri:hover {
background: var(--mint-deep);
box-shadow: 0 16px 36px -10px var(--mint-glow-2), inset 0 1px 0 rgba(255, 255, 255, 0.24);
transform: translateY(-1px);
}
.btn-pri:active { transform: translateY(0) scale(0.985); }
.btn-pri:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
/* Variante: kompakter Inline-CTA (z.B. Header-Actions, "Neue:r Mitarbeiter:in") */
.btn-pri--cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 14px;
border-radius: 100px;
text-decoration: none;
white-space: nowrap;
}
.btn-sec {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 16px;
font: inherit; font-size: 15px; font-weight: 600;
cursor: pointer;
text-decoration: none; text-align: center;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-sec:hover {
border-color: var(--mint);
color: var(--mint);
background: rgba(61, 217, 182, 0.06);
box-shadow: 0 4px 14px -6px var(--mint-glow);
}
.btn-sec--sm { padding: 8px 14px; font-size: 13px; }
.btn-sec--danger { color: var(--danger); border-color: rgba(232, 112, 79, 0.4); }
.btn-sec--danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(232,112,79,0.06); }
.hint-box {
background: var(--info-soft);
color: #2E4FAB;
padding: 14px 16px; border-radius: var(--r-md);
font-size: 13.5px; line-height: 1.45; margin-bottom: 20px;
border: 1px solid rgba(91, 123, 219, 0.30);
border-left: 3px solid var(--info);
box-shadow: 0 4px 14px -8px rgba(91, 123, 219, 0.25);
}
.warn-box {
background: var(--warning-soft);
color: var(--warning-ink);
padding: 14px 16px; border-radius: var(--r-md);
font-size: 13.5px; line-height: 1.45; margin-bottom: 20px;
border: 1px solid rgba(244, 185, 66, 0.55);
border-left: 3px solid var(--warning);
box-shadow: 0 4px 14px -8px rgba(244, 185, 66, 0.30);
}
:root[data-theme="dark"] .page-app .hint-box,
:root[data-theme="dark"] .page-chef .hint-box {
background: rgba(91, 123, 219, 0.14);
color: #8EA5EB;
border-color: rgba(91, 123, 219, 0.30);
}
:root[data-theme="dark"] .page-app .warn-box,
:root[data-theme="dark"] .page-chef .warn-box {
background: rgba(244, 185, 66, 0.14);
color: var(--warning);
border-color: rgba(244, 185, 66, 0.40);
}
/* ============ CHEF-KALENDER (Desktop, beide Teams) ============ */
.chef-cal {
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
}
/* Neuer Header in der Calendar-Card: Title (links) · View-Switch (mitte) · Nav (rechts) */
.cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
flex-wrap: wrap;
padding-bottom: var(--s-5);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
}
.cal-head-title { min-width: 0; }
.cal-head-team {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
display: inline-flex; align-items: center; gap: 6px;
}
.cal-head-team::before {
content: '';
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.cal-head-monthyear {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 32px);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--ink);
}
.cal-head-monthyear em {
font-style: normal; font-weight: 700;
color: var(--mint);
}
/* Sub-Datum unter der KW in Wochen-Ansicht */
.cal-head-sub {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: -0.01em;
line-height: 1.3;
margin-top: 2px;
}
/* View-Switcher: Pill-Tab-Style */
.cal-view-switch {
display: inline-flex;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
gap: 2px;
}
.cal-view-tab {
display: inline-flex;
align-items: center;
padding: 7px 16px;
border-radius: 999px;
font-size: 13px; font-weight: 600;
color: var(--ink-2);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.cal-view-tab:hover {
color: var(--ink);
}
.cal-view-tab.active {
background: var(--card);
color: var(--mint);
box-shadow:
var(--shadow-sm),
inset 0 0 0 1px var(--nav-active-ring);
}
/* Nav-Buttons rechts (sowohl neuer .cal-head-nav als auch alter .cal-grid-nav in Chef-Kalender) */
.cal-head-nav,
.chef-cal .cal-grid-nav {
display: flex; gap: 8px; align-items: center;
}
.chef-cal .cal-grid-nav {
justify-content: flex-end;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.cal-head-nav .cal-arrow,
.cal-head-nav .cal-today-btn,
.chef-cal .cal-grid-nav .cal-arrow,
.chef-cal .cal-grid-nav .cal-today-btn {
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 7px 12px;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--ink); text-decoration: none; cursor: pointer;
display: inline-flex; align-items: center;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.cal-head-nav .cal-arrow,
.chef-cal .cal-grid-nav .cal-arrow { padding: 7px 10px; }
.cal-head-nav .cal-arrow:hover,
.cal-head-nav .cal-today-btn:hover,
.chef-cal .cal-grid-nav .cal-arrow:hover,
.chef-cal .cal-grid-nav .cal-today-btn:hover { border-color: var(--mint); color: var(--mint); }
/* Mobile: Header umbrechen */
@media (max-width: 720px) {
.cal-head {
gap: var(--s-3);
}
.cal-view-switch { order: 3; width: 100%; justify-content: center; }
.cal-view-tab { flex: 1; justify-content: center; padding: 6px 10px; font-size: 12.5px; }
.cal-head-monthyear { font-size: 22px; }
}
/* ===== Wochen-Ansicht ===== */
.cal-week-meta {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s-3);
display: inline-flex; align-items: center; gap: 6px;
}
.cal-week-meta::before {
content: '';
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
.cal-week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--s-3);
}
.cal-week-day {
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
box-shadow: inset 0 1px 0 var(--card-edge);
padding: var(--s-3);
min-height: 200px;
display: flex;
flex-direction: column;
gap: var(--s-2);
color: var(--ink);
cursor: pointer;
text-align: left;
font: inherit;
transition: border-color var(--dur-fast) var(--ease-out);
}
.cal-week-day:hover { border-color: var(--line-3); }
.cal-week-day.today { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.cal-week-day.weekend { background: transparent; opacity: 0.85; }
.cal-week-day-head {
display: flex; align-items: baseline; gap: 8px;
}
.cal-week-day-wd {
font-size: 11px; font-weight: 600;
color: var(--ink-3);
letter-spacing: 0.06em; text-transform: uppercase;
}
.cal-week-day-num {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.cal-week-day.today .cal-week-day-num { color: var(--mint); }
.cal-week-day-holiday {
font-size: 10.5px; font-weight: 600;
color: var(--mint);
background: rgba(61, 217, 182, 0.14);
border: 1px solid rgba(61, 217, 182, 0.20);
border-radius: var(--r-xs);
padding: 2px 6px;
width: max-content;
max-width: 100%;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.cal-week-day-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 4px;
font-size: 12px;
}
.cal-week-day-list li {
display: flex; align-items: center; gap: 6px;
}
.cal-week-day-name {
font-size: 11.5px;
color: var(--ink-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mobile/Tablet: 7 Tage vertikal stapeln, jeder Tag volle Breite */
@media (max-width: 900px) {
.cal-week-grid {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.cal-week-day {
min-height: auto;
padding: var(--s-4);
}
.cal-week-day-head {
gap: 10px;
margin-bottom: var(--s-1);
}
.cal-week-day-num { font-size: 26px; }
}
/* ===== Jahres-Ansicht ===== */
.cal-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
@media (max-width: 1100px) { .cal-year-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cal-year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cal-year-grid { grid-template-columns: 1fr; } }
.cal-mini-month {
display: flex; flex-direction: column;
gap: 6px;
padding: var(--s-3);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
text-decoration: none; color: var(--ink);
transition: border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.cal-mini-month:hover {
border-color: var(--mint);
transform: translateY(-1px);
}
.cal-mini-month-name {
font-size: 13px; font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.cal-mini-wd {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
font-size: 9.5px; font-weight: 600;
color: var(--ink-3);
text-align: center;
text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-mini-day {
aspect-ratio: 1;
display: grid; place-items: center;
font-size: 10.5px; font-weight: 500;
color: var(--ink-2);
border-radius: 4px;
position: relative;
font-variant-numeric: tabular-nums lining-nums;
}
.cal-mini-day.muted { color: var(--ink-4); opacity: 0.5; }
.cal-mini-day.today {
background: var(--mint);
color: #0B0B11;
font-weight: 700;
box-shadow: 0 0 0 2px var(--mint), 0 0 12px var(--mint-glow-2);
animation: cal-mini-today-pulse 2s ease-in-out infinite;
}
@keyframes cal-mini-today-pulse {
0%, 100% {
box-shadow: 0 0 0 2px var(--mint), 0 0 12px var(--mint-glow);
}
50% {
box-shadow: 0 0 0 3px var(--mint), 0 0 22px var(--mint-glow-2);
}
}
@media (prefers-reduced-motion: reduce) {
.cal-mini-day.today { animation: none !important; }
}
.cal-mini-day.holiday {
color: var(--mint);
font-weight: 600;
}
.cal-mini-day.has-me {
background: var(--mint);
color: #0B0B11;
font-weight: 700;
}
.cal-mini-day.has-others:not(.has-me) {
background: rgba(61, 217, 182, 0.18);
color: var(--mint);
font-weight: 600;
}
/* 8-Spalten-Layout mit KW-Spalte */
.chef-cal .cal-wd--kw {
display: grid;
grid-template-columns: 44px repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
background: transparent; /* override legacy .cal-wd { background: var(--line-2) } */
}
.chef-cal .cal-wd > div {
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
color: var(--ink-3); text-transform: uppercase; text-align: left;
padding: 0 10px;
background: transparent; /* override legacy .cal-wd > div { background: var(--card) } */
}
.chef-cal .cal-wd-kw { text-align: center !important; padding: 0 !important; }
.chef-cal-days.cal-days--kw {
display: grid;
grid-template-columns: 44px repeat(7, 1fr);
grid-auto-rows: 88px;
gap: 4px;
background: transparent; /* overrides legacy .cal-days { background: var(--line-2) } */
}
/* KW-Zelle: oben ausgerichtet, dezent */
.cal-kw {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
background: transparent;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: var(--ink-3);
font-size: 10px;
text-align: center;
line-height: 1.1;
padding-top: 10px;
min-height: 80px;
}
.cal-kw span {
font-size: 9px; opacity: 0.55; letter-spacing: 0.08em;
text-transform: uppercase; font-weight: 600;
}
.cal-kw strong {
font-weight: 700; font-size: 13px; color: var(--ink-2); margin-top: 3px;
font-variant-numeric: tabular-nums;
}
.chef-cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 88px;
gap: 4px;
background: transparent; /* overrides legacy .cal-days { background: var(--line-2) } */
}
.chef-cal-days .cd {
position: relative;
aspect-ratio: auto; /* override global .cd aspect-ratio: 1 */
background: var(--bg) !important; /* dunklere "Page-Bg" Cells in Card-Container */
border: 1px solid var(--line-2);
border-radius: var(--r-md);
box-shadow: inset 0 1px 0 var(--card-edge);
padding: 8px 10px 6px;
min-height: 0;
overflow: hidden;
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px;
cursor: pointer; text-align: left;
font: inherit; color: inherit;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.chef-cal-days .cd:hover:not(.muted) {
border-color: rgba(61, 217, 182, 0.40);
}
/* Muted cells: BG matched zur Big-Box (Card-Color) — blenden ein, sind "ausgegraut" */
.chef-cal-days .cd.muted {
background: var(--card) !important;
border-color: var(--line) !important;
cursor: default;
}
.chef-cal-days .cd.muted .num { opacity: 0.35; }
.chef-cal-days .cd .num {
font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1;
font-variant-numeric: tabular-nums;
}
/* Today: dezenter Mint-Background + Mint-Pill um die Zahl */
.chef-cal-days .cd.today {
background: rgba(95, 184, 156, 0.08);
border-color: rgba(95, 184, 156, 0.4);
}
:root[data-theme="dark"] .page-chef .chef-cal-days .cd.today,
:root[data-theme="dark"] .page-app .chef-cal-days .cd.today {
background: rgba(61, 217, 182, 0.10);
border-color: rgba(61, 217, 182, 0.4);
}
.chef-cal-days .cd.today .num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 7px;
border-radius: 999px;
background: var(--mint);
color: #fff;
font-size: 13px;
margin: -2px 0;
}
.chef-cal-days .cd.holiday .num { color: var(--mint-deep); }
/* Feiertag: kleine Pill oben rechts in der Cell */
.cd-holiday-label {
position: absolute;
top: 8px; right: 8px;
font-size: 9px; font-weight: 700;
color: var(--mint-deep);
background: rgba(95, 184, 156, 0.12);
border-radius: 999px;
padding: 2px 7px;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: none;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; max-width: calc(100% - 30px);
}
:root[data-theme="dark"] .page-chef .cd-holiday-label,
:root[data-theme="dark"] .page-app .cd-holiday-label {
color: var(--mint);
background: rgba(61, 217, 182, 0.14);
}
.cd-bars {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: auto;
}
.cd-bar {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; min-width: 20px;
padding: 0 7px;
font-size: 11px; font-weight: 700;
border-radius: 5px;
color: #fff;
letter-spacing: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.cd-bar-pharma { background: var(--pharma); }
.cd-bar-kfz { background: var(--kfz); }
.cd-bar-sick { background: var(--sick); }
/* Mein Urlaub (Fahrer-Kalender): Mint-Pill (Brand-Color) */
.cd-bar-me {
background: var(--mint);
color: #0B0B11;
letter-spacing: 0.02em;
}
:root[data-theme="dark"] .page-app .cd-bar-me {
background: var(--mint);
color: #0B0B11;
}
/* Pending / In_Review: gestrichelter Mint-Border + transparenter Hintergrund.
!important nötig, weil :root[data-theme="dark"] .page-app .cd-bar-me
höhere Specificity hat und sonst das background überschreibt. */
.cd-bar-me--pending {
background: transparent !important;
color: var(--mint);
border: 1px dashed var(--mint);
box-shadow: none;
}
:root[data-theme="dark"] .page-app .cd-bar-me--pending {
color: var(--mint);
border-color: var(--mint);
}
@media (max-width: 900px) {
.chef-cal .cal-wd--kw,
.chef-cal-days.cal-days--kw {
grid-template-columns: 32px repeat(7, 1fr);
gap: 4px;
}
.cal-kw { min-height: 50px; padding-top: 6px; }
.cal-kw span { font-size: 8px; }
.cal-kw strong { font-size: 11px; }
.chef-cal-days .cd { min-height: 62px; padding: 6px; gap: 3px; }
.chef-cal-days .cd .num { font-size: 12px; }
.chef-cal-days .cd.today .num { min-width: 20px; height: 20px; font-size: 12px; }
.cd-bar { height: 16px; min-width: 16px; font-size: 10px; padding: 0 5px; }
.cd-holiday-label { display: none; }
}
/* Legende Erweiterung */
.cal-legend .lg-sick { background: var(--sick); box-shadow: 0 0 6px rgba(63, 63, 70, 0.35); }
/* Today-Liste in Chef-Sidebar */
.chef-today-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--s-2);
}
.chef-today-list li {
display: flex; align-items: center; gap: var(--s-3);
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-size: 14px; color: var(--ink-2);
}
.chef-today-list li:last-child { border-bottom: 0; }
.chef-today-list .badge { flex-shrink: 0; }
.chef-today-list .badge-stack { flex-shrink: 0; }
/* Sick-Varianten für Side-Panel — Anthrazit-Grau, klar von KFZ-Orange abgegrenzt */
.badge-sick {
background: var(--sick-soft);
color: var(--sick);
font-weight: 700;
padding: 2px 7px; border-radius: 100px; font-size: 10px;
letter-spacing: 0.04em;
}
:root[data-theme="dark"] .page-chef .badge-sick { color: var(--sick-ink); }
.tile-sick {
background: var(--sick-soft);
color: var(--sick);
}
:root[data-theme="dark"] .page-chef .tile-sick { color: var(--sick-ink); }
/* Drawer-Day-Groups */
.day-group + .day-group { margin-top: var(--s-5); }
.day-group-h {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink-3);
margin-bottom: var(--s-2);
display: flex; align-items: center; gap: 8px;
}
.day-group-c {
background: var(--bg-alt); color: var(--ink-2);
padding: 1px 7px; border-radius: 100px;
font-size: 10px; font-weight: 700;
}
.day-group-list { list-style: none; padding: 0; margin: 0; }
.day-group-list li {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-size: 14px; color: var(--ink);
}
.day-group-list li:last-child { border-bottom: 0; }
.day-group-list .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.day-group-list .dot-pharma { background: var(--pharma); }
.day-group-list .dot-kfz { background: var(--kfz); }
.day-group-list .dot-sick { background: var(--sick); }
.day-group-list--detailed li { align-items: flex-start; padding: 10px 0; }
.day-group-list--detailed .dot { margin-top: 6px; }
.day-group-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-group-name { font-weight: 600; color: var(--ink); }
.day-group-range { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.day-group-team-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.04em;
vertical-align: middle;
}
.day-group-team-tag--pharma { background: var(--pharma-soft); color: var(--pharma); }
.day-group-team-tag--kfz { background: var(--kfz-soft); color: #B8551F; }
:root[data-theme="dark"] .page-chef .day-group-team-tag--pharma { color: #8EA5EB; }
:root[data-theme="dark"] .page-chef .day-group-team-tag--kfz { color: #FFB088; }
/* ============ USER-CARD (Steckbrief-Popup) ============ */
.user-card-modal { max-width: 460px; }
.user-card-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
border: 0; background: transparent;
color: var(--ink-3); font-size: 24px; line-height: 1;
cursor: pointer; border-radius: 50%;
}
.user-card-close:hover { background: var(--bg-alt); color: var(--ink); }
.user-card-body { padding: var(--s-2) 0; }
.user-card-loading { padding: 40px; text-align: center; color: var(--ink-3); }
.user-card-head {
display: flex; gap: 16px; align-items: center;
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-4);
}
.user-card-avatar {
width: 64px; height: 64px;
border-radius: 50%;
font-size: 22px;
flex-shrink: 0;
overflow: hidden;
}
.user-card-avatar .avatar-img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.user-card-name {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink);
}
.user-card-meta {
margin-top: 6px;
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: 13px; color: var(--ink-3);
}
.user-card-status {
margin-bottom: var(--s-4);
padding: 10px 14px;
background: var(--bg-alt);
border-radius: var(--r-md);
font-size: 13.5px; color: var(--ink-2);
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.user-card-meta .meta-sep { color: var(--ink-3); }
.user-card-actions {
display: flex; gap: 8px;
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--line);
}
.user-card-actions .team-action {
flex: 1; justify-content: center;
}
.user-card-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.user-card-list li {
display: grid;
grid-template-columns: 130px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.user-card-list li:last-child { border-bottom: 0; }
.user-card-key {
color: var(--ink-3);
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.user-card-val { color: var(--ink); }
.user-card-val a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px dashed rgba(61, 217, 182, 0.35);
}
.user-card-val a:hover { border-bottom-color: var(--mint); color: var(--mint); }
.user-card-wa {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; margin-left: 6px;
background: rgba(37, 211, 102, 0.12); color: #25D366;
border-radius: 50%; border: 0 !important;
vertical-align: middle;
}
.user-card-wa:hover { background: rgba(37, 211, 102, 0.22); border: 0 !important; }
/* Klickbare Namen optisch markieren */
[data-user-card-id] {
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out);
}
[data-user-card-id]:hover {
color: var(--mint);
}
@media (max-width: 600px) {
.user-card-list li { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.user-card-key { font-size: 11.5px; }
}
/* ============ LEGAL-SEITEN (Impressum / Datenschutz) ============ */
/* --- Dark-Variante: page-legal — passt zum Login --- */
.page-legal {
background: #0A0A10;
color: rgba(255, 255, 255, 0.85);
min-height: 100vh;
min-height: 100dvh;
position: relative;
overflow-x: clip;
}
/* Fullscreen-Background — fixed damit's beim Scrollen bleibt */
.legal-bg {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.legal-grid {
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at top, #000 15%, transparent 70%);
mask-image: radial-gradient(ellipse at top, #000 15%, transparent 70%);
}
/* ----- Fixed Topbar: Back links · Wordmark oben mittig · Diamond hängend ----- */
.legal-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 10;
background: rgba(10, 10, 16, 0.55);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
overflow: visible; /* damit das Diamond-Medaillon nach unten rausragen kann */
}
/* Back: links in der Bar */
.legal-topbar .legal-back {
position: absolute;
left: var(--s-6);
top: 50%;
transform: translateY(-50%);
margin-bottom: 0;
}
/* Wordmark: horizontal zentriert im OBEREN Drittel der Bar (Platz für Medaillon drunter) */
.legal-brand {
position: absolute;
left: 50%;
top: 12px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.92);
transition: opacity var(--dur-fast) var(--ease-out);
}
.legal-brand:hover { opacity: 0.85; }
.legal-brand-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
}
/* Medaillon: Diamond zentriert am Bar-Bottom, halb in / halb out */
.legal-brand-medallion {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%); /* halb über, halb unter dem Bar-Bottom */
width: 36px; height: 36px;
text-decoration: none;
z-index: 11;
transition: transform var(--dur-fast) var(--ease-out);
}
.legal-brand-medallion:hover { transform: translate(-50%, calc(50% - 1px)); }
.legal-brand-mark-halo {
position: absolute;
inset: -16px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--mint) 20%,
transparent 45%,
var(--mint-deep) 65%,
transparent 90%);
filter: blur(12px);
opacity: 0.55;
animation: hero-halo-spin 12s linear infinite;
will-change: transform;
}
.legal-brand-mark {
position: relative;
width: 36px; height: 36px;
background: var(--mint);
border-radius: 9px;
transform: rotate(45deg);
box-shadow:
0 0 28px var(--mint-glow-2),
0 0 0 1px rgba(61, 217, 182, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
animation: hero-mark-pulse 4.5s ease-in-out infinite;
z-index: 1;
}
/* Haus-Icon absolut zentriert im Diamond (über dem rotierten Mark) */
.legal-brand-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 18px;
height: 18px;
color: #0A0A10;
pointer-events: none;
}
/* Container: padding-top muss bar + medaillon clearen */
.legal {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
padding: 120px 20px 80px;
}
.legal-head { margin-bottom: 28px; }
.legal-back {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px 7px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
color: rgba(255, 255, 255, 0.60);
text-decoration: none;
font-size: 12.5px; font-weight: 500;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.legal-back:hover {
color: var(--mint); border-color: rgba(61, 217, 182, 0.4);
background: rgba(61, 217, 182, 0.06);
transform: translateX(-2px);
}
.legal-head h1 {
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 52px);
font-weight: 600;
margin: 0;
color: #fff;
letter-spacing: -0.03em; line-height: 1.05;
}
.legal-head h1::after {
content: '';
display: block;
width: 48px; height: 3px;
background: var(--mint);
border-radius: 2px;
margin-top: 16px;
box-shadow: 0 0 12px var(--mint-glow-2);
}
.legal-body {
background: rgba(20, 20, 27, 0.55);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--r-xl);
padding: 36px 40px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.65; font-size: 15px;
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.legal-body h2 {
font-size: 13px; font-weight: 700;
color: var(--mint);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 32px 0 10px;
display: flex; align-items: center; gap: 10px;
}
.legal-body h2::before {
content: '';
flex-shrink: 0;
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 8px var(--mint-glow-2);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 14px; }
.legal-body p strong { color: #fff; font-weight: 600; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin: 4px 0; }
.legal-body a {
color: var(--mint);
text-decoration: none;
border-bottom: 1px dashed rgba(61, 217, 182, 0.5);
transition: border-color var(--dur-fast) var(--ease-out);
}
.legal-body a:hover { border-bottom-style: solid; border-bottom-color: var(--mint); }
/* Stand-Footer dezent */
.legal-stand {
margin-top: 32px !important;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 12.5px;
color: rgba(255, 255, 255, 0.40);
}
@media (max-width: 600px) {
.legal { padding: 110px 14px 60px; }
.legal-head h1 { font-size: 36px; }
.legal-body { padding: 24px 22px; font-size: 14.5px; }
/* Topbar kompakter auf Mobile */
.legal-topbar { height: 54px; }
.legal-brand { top: 10px; }
.legal-brand-name { font-size: 14.5px; }
.legal-brand-medallion { width: 32px; height: 32px; }
.legal-brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.legal-brand-mark-halo { inset: -12px; }
.legal-brand-icon { width: 16px; height: 16px; }
}
/* Login-Footer */
.login-legal-footer {
text-align: center; margin-top: var(--s-4);
color: var(--ink-3); font-size: 12.5px;
}
.login-legal-footer a {
color: var(--ink-3); text-decoration: none; margin: 0 8px;
}
.login-legal-footer a:hover { color: var(--mint); }
/* ============ STATUS-RADIO-GROUP (Drawer: Status-Auswahl) ============ */
.status-radio-group {
display: flex; flex-direction: column;
gap: 6px;
margin-top: 6px;
}
.status-radio {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line-2);
border-radius: var(--r-md);
cursor: pointer;
background: var(--card);
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.status-radio:hover { border-color: var(--ink-3); }
.status-radio input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.status-radio-dot {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid var(--line-3);
flex-shrink: 0;
position: relative;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.status-radio.is-active { border-color: var(--ink); background: var(--bg-alt); }
.status-radio.is-active .status-radio-dot {
border-color: var(--ink);
background:
radial-gradient(circle, var(--ink) 0 5px, transparent 6px);
}
:root[data-theme="dark"] .page-chef .status-radio.is-active {
border-color: var(--mint); background: rgba(61, 217, 182, 0.10);
}
:root[data-theme="dark"] .page-chef .status-radio.is-active .status-radio-dot {
border-color: var(--mint);
background: radial-gradient(circle, var(--mint) 0 5px, transparent 6px);
}
.status-radio-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-radio-name {
font-size: 14px; font-weight: 600; color: var(--ink);
line-height: 1.2;
}
.status-radio-desc {
font-size: 12px; color: var(--ink-3);
line-height: 1.35;
}
.status-radio.status-radio--pausiert.is-active { border-color: var(--warning); background: rgba(244, 185, 66, 0.08); }
.status-radio.status-radio--pausiert.is-active .status-radio-dot {
border-color: var(--warning);
background: radial-gradient(circle, var(--warning) 0 5px, transparent 6px);
}
.status-radio.status-radio--ausgeschieden.is-active { border-color: var(--danger); background: rgba(232, 112, 79, 0.06); }
.status-radio.status-radio--ausgeschieden.is-active .status-radio-dot {
border-color: var(--danger);
background: radial-gradient(circle, var(--danger) 0 5px, transparent 6px);
}
/* Team-Varianten in der Radio-Group */
.status-radio.status-radio--team-pharma.is-active { border-color: var(--pharma); background: rgba(91, 123, 219, 0.06); }
.status-radio.status-radio--team-pharma.is-active .status-radio-dot {
border-color: var(--pharma);
background: radial-gradient(circle, var(--pharma) 0 5px, transparent 6px);
}
.status-radio.status-radio--team-kfz.is-active { border-color: var(--kfz); background: rgba(232, 128, 78, 0.06); }
.status-radio.status-radio--team-kfz.is-active .status-radio-dot {
border-color: var(--kfz);
background: radial-gradient(circle, var(--kfz) 0 5px, transparent 6px);
}
/* Passwort-Reset: Input + Button auf einer Linie */
.pw-reset-row {
display: flex; gap: 8px; align-items: stretch;
}
.pw-reset-row .fg-input { flex: 1; min-width: 0; }
.pw-reset-row .btn-sec { white-space: nowrap; flex-shrink: 0; }
/* ============ STATUS-PILLS + ROLE-PILLS (Admin-Views) ============ */
.status-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
text-transform: uppercase;
}
.status-pill.ok { background: rgba(61, 217, 182, 0.16); color: var(--mint); }
.status-pill.warn { background: rgba(244, 185, 66, 0.16); color: var(--warning); }
.status-pill.err { background: rgba(232, 112, 79, 0.16); color: var(--danger); }
.page-chef .status-pill.ok { background: var(--mint-soft); color: var(--success-ink); }
.page-chef .status-pill.warn { background: var(--warning-soft); color: var(--warning-ink); }
.page-chef .status-pill.err { background: var(--danger-soft); color: var(--danger-ink); }
.role-pill {
display: inline-block;
padding: 2px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
background: rgba(21, 19, 14, 0.06); color: var(--ink-2);
}
.role-pill.role-admin { background: rgba(232, 112, 79, 0.14); color: var(--danger); }
.role-pill.role-chef { background: rgba(91, 123, 219, 0.14); color: var(--pharma); }
.role-pill.role-fahrer{ background: rgba(232, 128, 78, 0.14); color: var(--kfz-deep); }
:root[data-theme="dark"] .page-chef .role-pill.role-admin { color: #FFA38A; }
:root[data-theme="dark"] .page-chef .role-pill.role-chef { color: #8EA5EB; }
:root[data-theme="dark"] .page-chef .role-pill.role-fahrer { color: #FFB088; }
/* ============ AUDIT-LOG ============ */
.audit-filter {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 16px 18px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-edge);
}
.audit-filter .af-row {
display: grid;
grid-template-columns: 180px 220px 150px 150px 1fr auto;
gap: 12px; align-items: end;
}
.audit-filter .fg { margin: 0; }
.audit-filter .btn-pri { white-space: nowrap; padding: 11px 18px; }
@media (max-width: 1100px) {
.audit-filter .af-row { grid-template-columns: 1fr 1fr; }
.audit-filter .af-q { grid-column: 1 / -1; }
.audit-filter .btn-pri { grid-column: 1 / -1; }
}
.audit-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.audit-dot--ok { background: var(--mint); box-shadow: 0 0 8px rgba(61, 217, 182, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.audit-dot--err { background: var(--danger); box-shadow: 0 0 8px rgba(232, 112, 79, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.audit-dot--warn { background: var(--warning); box-shadow: 0 0 8px rgba(244, 185, 66, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.audit-dot--neutral { background: rgba(21, 19, 14, 0.25); }
:root[data-theme="dark"] .page-app .audit-dot--neutral { background: rgba(244, 241, 234, 0.25); }
.audit-details summary {
cursor: pointer;
font-size: 12.5px;
color: var(--mint);
user-select: none;
list-style: none;
}
.audit-details summary::-webkit-details-marker { display: none; }
.audit-details summary::before { content: '▸ '; transition: transform 0.15s ease; display: inline-block; }
.audit-details[open] summary::before { content: '▾ '; }
.audit-details pre {
margin: 8px 0 0; padding: 10px 12px;
background: var(--bg-alt);
border-radius: var(--r-sm);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 11.5px; line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap; word-break: break-all;
color: var(--ink-2);
}
:root[data-theme="dark"] .page-app .audit-details pre { background: rgba(244, 241, 234, 0.04); }
.pager {
display: flex; align-items: center; justify-content: center;
gap: 16px; margin: 24px 0;
}
.pager-btn {
display: inline-flex; align-items: center;
padding: 9px 16px; border-radius: var(--r-md);
background: var(--card); border: 1px solid var(--line-2);
color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 500;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.pager-btn:hover {
border-color: var(--mint);
color: var(--mint);
background: rgba(61, 217, 182, 0.06);
box-shadow: 0 4px 14px -6px var(--mint-glow);
}
.pager-btn.disabled {
opacity: 0.4; pointer-events: none;
}
.pager-info { color: var(--ink-3); font-size: 13px; }
/* Setup-Steps (Admin Telegram-View) */
.setup-steps {
list-style: none; counter-reset: setup; padding: 0; margin: 0;
display: grid; gap: 14px;
}
.setup-steps > li {
counter-increment: setup;
position: relative;
padding: 14px 16px 14px 52px;
border-radius: var(--r-md);
background: var(--bg-alt);
border: 1px solid var(--line);
font-size: 14px; line-height: 1.55; color: var(--ink-2);
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.setup-steps > li:hover {
border-color: rgba(31, 168, 137, 0.30);
box-shadow: 0 8px 20px -10px var(--mint-glow);
}
.setup-steps > li::before {
content: counter(setup);
position: absolute; left: 14px; top: 12px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--mint); color: #0E0E13;
border-radius: 50%;
font-family: var(--font-display);
font-style: italic; font-weight: 700; font-size: 15px;
box-shadow: 0 4px 12px -4px var(--mint-glow);
}
.setup-steps > li strong { color: var(--ink); font-weight: 600; }
.setup-steps > li code {
background: var(--bg);
border: 1px solid var(--line);
padding: 1px 6px; border-radius: 6px;
font-size: 12.5px;
color: var(--ink);
font-family: var(--font-mono);
}
.setup-steps > li a { color: var(--mint); text-decoration: none; border-bottom: 1px dashed rgba(61, 217, 182, 0.4); }
/* ============ SHEET / MODAL (dialog) ============ */
/* Mobile (<=720px): Bottom-Sheet. Desktop: zentriertes Modal. */
.sheet {
border: none;
background: var(--card);
color: var(--ink);
padding: var(--s-6);
box-shadow: var(--shadow-xl);
font-family: inherit;
z-index: var(--z-modal);
width: 100%;
max-width: var(--app-max);
position: relative;
}
/* Universelles X oben rechts — wird per JS in jeden Sheet/Drawer/Confirm injiziert */
.sheet-close-x {
position: absolute;
top: 14px; right: 14px;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sheet-close-x:hover { background: var(--bg-alt); color: var(--ink); }
.sheet-close-x svg { width: 14px; height: 14px; }
.sheet::backdrop {
background: var(--backdrop);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.sheet[open]::backdrop { animation: backdrop-fade var(--dur-base) var(--ease-out); }
@keyframes backdrop-fade { from { opacity: 0; } to { opacity: 1; } }
/* Mobile: unten anliegend, Grab-Handle, slide-up */
@media (max-width: 720px) {
.sheet {
position: fixed;
inset: auto 0 0 0;
margin: 0 auto;
padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
border-radius: var(--r-2xl) var(--r-2xl) 0 0; /* angeglichen an Fahrer-Profil-Card-Rundung (32px) */
max-height: 86dvh;
overflow-y: auto;
}
.sheet[open] { animation: sheet-up var(--dur-slow) var(--ease-out); }
@keyframes sheet-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
}
/* Desktop: zentriert, Card-Look, kein Grab-Handle */
@media (min-width: 721px) {
.sheet {
position: fixed;
inset: 0;
margin: auto;
max-width: 480px;
max-height: 86vh;
max-height: 86dvh;
height: fit-content;
border-radius: var(--r-2xl); /* identisch zu Fahrer-Profil-Cards (.profile-hero, .profile-stats) */
overflow-y: auto;
}
.sheet--wide { max-width: 560px; }
.sheet[open] { animation: sheet-pop var(--dur-base) var(--ease-out); }
@keyframes sheet-pop {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.sheet .sheet-grab { display: none; }
}
/* Quick-Antrag Mini-Summary im Modal */
.quick-summary {
background: var(--bg-alt);
border-radius: var(--r-md);
padding: 12px 14px;
margin: var(--s-3) 0 var(--s-4);
display: flex; flex-direction: column;
gap: 6px;
}
.quick-summary-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13.5px;
color: var(--ink-2);
}
.quick-summary-row strong {
font-family: var(--font-display);
font-size: 17px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.quick-summary-row:last-child strong { color: var(--mint); }
.sheet-grab {
width: 44px; height: 4px;
background: var(--line-3);
border-radius: 100px;
margin: -8px auto 16px;
}
.sheet-head { margin-bottom: 18px; }
.sheet-title {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
line-height: 1.15; letter-spacing: -0.025em;
}
.sheet-sub { color: var(--ink-3); font-size: 13px; line-height: 1.45; margin-top: 4px; }
.sheet-sub code { background: var(--bg-alt); padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.sheet-btn {
display: block; width: 100%; padding: 14px;
background: var(--bg-alt); color: var(--ink);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
font: inherit; font-size: 14.5px; font-weight: 600;
cursor: pointer; margin-top: 8px;
text-decoration: none; text-align: center;
transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.sheet-btn:hover { border-color: var(--mint); color: var(--mint); }
.sheet-btn--primary { background: var(--mint); color: #0E0E13; border-color: var(--mint); }
.sheet-btn--primary:hover { background: var(--mint-deep); color: #0E0E13; }
.sheet-btn--danger { background: var(--danger-soft); color: var(--danger-ink); border-color: rgba(232,112,79,0.4); }
:root[data-theme="dark"] .page-app .sheet-btn--danger { background: rgba(232,112,79,0.14); color: #FFA38A; }
.sheet-btn--danger:hover { background: rgba(232, 112, 79, 0.20); }
.sheet-btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); margin-top: 4px; }
.sheet-btn--ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--line-3); }
/* ---- Sheet-Variante: Danger (Reset-Bestätigung etc.) ---- */
.sheet--danger {
/* Roter Top-Akzent */
border-top: 3px solid var(--danger, #E8645F);
}
.reset-sheet-head {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: var(--s-4);
}
.reset-sheet-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--danger-soft, rgba(232, 100, 95, 0.12));
color: var(--danger, #E8645F);
border-radius: 50%;
}
.reset-sheet-head .sheet-title { font-size: 18px; }
.reset-summary {
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 8px;
margin-bottom: var(--s-4);
}
.reset-summary-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
font-size: 13px;
}
.reset-summary-label {
color: var(--ink-3);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.reset-summary-value {
color: var(--ink);
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
}
.reset-summary-count {
color: var(--danger, #E8645F);
font-family: var(--font-display);
font-size: 15px;
}
.reset-actions {
display: flex; gap: 8px;
flex-direction: row-reverse;
}
.reset-actions .sheet-btn {
flex: 1;
margin: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.reset-actions .sheet-btn--danger:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.reset-actions .sheet-btn--danger:not(:disabled) {
background: var(--danger, #E8645F);
color: #fff;
border-color: var(--danger, #E8645F);
}
.reset-actions .sheet-btn--danger:not(:disabled):hover {
background: #D5544F;
border-color: #D5544F;
}
.sheet-list { list-style: none; padding: 0; margin: 0 0 16px; }
.sheet-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sheet-item--detailed { align-items: flex-start; }
.sheet-item--detailed .dot { margin-top: 6px; flex-shrink: 0; }
.sheet-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-item-name { font-weight: 600; color: var(--ink); }
.sheet-item-range { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sheet-empty { color: var(--ink-3); padding: 18px 0; text-align: center; font-style: italic; }
/* File-Drop-Area: input ist visuell versteckt aber zugänglich,
label wirkt als großer klickbarer Button. */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.file-drop {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
border: 2px dashed var(--line-3);
border-radius: var(--r-md);
padding: 28px 18px;
text-align: center; cursor: pointer;
color: var(--ink-2); font-weight: 500; margin-bottom: 12px;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.file-drop svg { color: var(--ink-3); transition: color var(--dur-fast) var(--ease-out); }
.file-drop:hover { border-color: var(--mint); background: var(--bg-alt); color: var(--mint); }
.file-drop:hover svg { color: var(--mint); }
.file-drop-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.file-drop:hover .file-drop-title { color: var(--mint); }
.file-drop-hint { font-size: 12.5px; color: var(--ink-3); }
.file-drop-name {
font-size: 12.5px; font-weight: 500;
color: var(--mint);
margin-top: 4px;
word-break: break-all;
}
.file-drop-name:empty { display: none; }
/* Fokus für Tastatur-User: dashed-border wird mint */
.file-drop:focus-within { border-color: var(--mint); outline: none; }
/* Drag-over-State */
.file-drop.is-dragover {
border-color: var(--mint);
background: var(--mint-soft);
color: var(--mint);
}
.file-drop.is-dragover svg { color: var(--mint); }
.file-drop.is-dragover .file-drop-title { color: var(--mint); }
/* ============ KALENDER (App) ============ */
.cal-h { display: flex; justify-content: flex-end; margin-bottom: 16px; }
/* Nav-Buttons als reguläre Zeile in der Kalender-Card (oben rechts) */
.cal-grid-nav {
display: flex; gap: 8px; align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.cal-grid-nav .cal-arrow,
.cal-grid-nav .cal-today-btn {
background: var(--bg-elev);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 7px 12px;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--ink); text-decoration: none; cursor: pointer;
}
.cal-grid-nav .cal-arrow { padding: 7px 10px; }
.cal-grid-nav .cal-arrow:hover,
.cal-grid-nav .cal-today-btn:hover { border-color: var(--mint); color: var(--mint); }
@media (max-width: 720px) {
.cal-grid-nav .cal-today-btn { padding: 6px 10px; font-size: 12px; }
}
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-arrow, .cal-today-btn {
background: var(--card);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 8px 14px;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--ink); text-decoration: none; cursor: pointer;
}
.cal-arrow svg { display: block; }
.cal-arrow:hover, .cal-today-btn:hover { border-color: var(--mint); color: var(--mint); }
.cal-grid {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden; /* damit Hintergrund-Trennlinien an den Card-Rand stoßen */
}
/* Wochentag-Header */
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
margin-bottom: 1px;
background: var(--line-2);
}
.cal-wd > div {
text-align: left;
font-size: 10px; font-weight: 700;
color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.8px;
padding: 8px 10px;
background: var(--card);
}
/* Tag-Grid: gap:1px + Hintergrund = elegante Trennlinien wie bei Notion/Linear */
.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--line-2);
}
.cd {
position: relative; aspect-ratio: 1;
background: var(--card);
border: none;
border-radius: 0;
display: flex; align-items: flex-start; justify-content: flex-start;
padding: 8px 10px;
font: inherit; font-size: 13px;
color: var(--ink); cursor: pointer; overflow: hidden;
transition: background var(--dur-fast) var(--ease-out);
}
.cd:hover:not(.muted) { background: var(--bg-alt); }
.cd.muted { color: var(--ink-4); cursor: default; background: var(--bg-elev); }
/* Heute: ring statt fill, damit die Zahl klar lesbar bleibt */
.cd.today {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 2px var(--mint);
}
.cd.today .num { color: var(--mint); font-weight: 700; }
.cd.today:hover { background: rgba(61, 217, 182, 0.10); }
.cd.holiday .num { color: var(--mint-deep); font-weight: 700; }
:root[data-theme="dark"] .page-app .cd.holiday .num { color: var(--mint); }
.cd .num { position: relative; z-index: 2; line-height: 1; font-weight: 500; }
/* Range-Bar: keine Lücken zwischen Tagen (4px Overhang in beide Richtungen kompensiert grid-gap) */
.cd .range {
position: absolute;
left: -2px; right: -2px; bottom: 8px;
height: 14px;
background: var(--mint);
z-index: 1; opacity: 0.92;
}
.cd .range-s { left: 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cd .range-e { right: 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.cd .range-one { left: 6px; right: 6px; border-radius: 8px; }
.cd.today .range { opacity: 0.55; }
.cd .dots {
position: absolute; bottom: 4px;
left: 0; right: 0;
display: flex; justify-content: center; gap: 3px;
z-index: 2;
}
.cd .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-pharma { background: var(--pharma); }
.dot-kfz { background: var(--kfz); }
.dot-me { background: var(--mint); }
.cd .dot-extra { font-size: 9px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.cal-legend {
display: flex; flex-wrap: wrap; gap: 12px;
margin: 12px 0 4px;
font-size: 11.5px; color: var(--ink-3);
}
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-legend .lg-me { background: var(--mint); border-radius: 3px; box-shadow: 0 0 6px var(--mint-glow); }
.cal-legend .lg-holiday { background: var(--mint-deep); }
:root[data-theme="dark"] .page-app .cal-legend .lg-holiday { background: var(--mint); }
.badge {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700;
padding: 3px 8px; border-radius: 100px;
letter-spacing: 0.5px;
}
.badge-me { background: var(--mint-soft); color: var(--success-ink); }
:root[data-theme="dark"] .page-app .badge-me { background: rgba(61, 217, 182, 0.18); color: var(--mint); }
.badge-pharma { background: var(--pharma-soft); color: var(--pharma); }
:root[data-theme="dark"] .page-app .badge-pharma { background: rgba(91, 123, 219, 0.18); color: #8EA5EB; }
.badge-kfz { background: var(--kfz-soft); color: #B8551F; }
:root[data-theme="dark"] .page-app .badge-kfz { background: rgba(232, 128, 78, 0.18); color: #FFB088; }
.badge-change { background: var(--info-soft); color: var(--info); margin-left: 6px; }
:root[data-theme="dark"] .page-app .badge-change { background: rgba(91, 123, 219, 0.20); color: #8EA5EB; }
/* Stack: Team-Badge + Krank-Badge nebeneinander */
.badge-stack {
display: inline-flex; align-items: center; gap: 4px;
flex-wrap: wrap;
}
/* ============ PROFIL ============ */
.profile-hero {
text-align: center;
padding: var(--s-5) var(--s-5) var(--s-4);
background:
radial-gradient(140% 90% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
box-shadow:
var(--shadow-md),
0 12px 32px -16px var(--mint-glow),
inset 0 1px 0 var(--card-edge);
}
/* ----- Profil-Stats: Urlaub-Übersicht ----- */
.profile-stats {
background:
radial-gradient(140% 90% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-4) var(--s-5);
box-shadow:
var(--shadow-md),
0 12px 32px -16px var(--mint-glow),
inset 0 1px 0 var(--card-edge);
}
.profile-stats-head {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: var(--s-2);
}
.profile-stats-dot,
.profile-account-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
animation: mint-dot-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.profile-stats-dot, .profile-account-dot { animation: none; }
}
.profile-stats-hero { margin-bottom: var(--s-3); }
.profile-stats-big {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 54px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
font-variant-numeric: tabular-nums lining-nums;
}
.profile-stats-of {
font-size: 13px;
color: var(--ink-3);
margin-top: 4px;
}
.profile-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
}
.profile-stats-cell {
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 10px 12px;
}
.profile-stats-cell-val {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.1;
}
.profile-stats-cell-lab {
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin-top: 2px;
}
/* ----- Profil-Account: Mitglied seit, Telegram etc. ----- */
.profile-account {
background:
radial-gradient(120% 80% at 100% 0%, var(--card-shine) 0%, transparent 55%),
var(--card);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--s-6);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--card-edge);
}
.profile-account-head {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: var(--s-3);
}
.profile-account-list {
display: flex; flex-direction: column;
}
.profile-account-row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3);
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 13px;
}
.profile-account-row:last-child { border-bottom: none; padding-bottom: 0; }
.profile-account-row:first-child { padding-top: 0; }
.profile-account-lab {
color: var(--ink-3);
}
.profile-account-val {
color: var(--ink);
font-weight: 500;
text-align: right;
}
.profile-account-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 700;
padding: 3px 9px;
border-radius: 100px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.profile-account-pill::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
}
.profile-account-pill.is-on {
background: var(--mint-soft);
color: var(--mint);
}
.profile-account-pill.is-off {
background: rgba(255, 255, 255, 0.05);
color: var(--ink-3);
}
.profile-account-pill.is-link {
text-decoration: none;
cursor: pointer;
background: var(--mint-soft);
color: var(--mint);
transition: background var(--dur-fast) var(--ease-out);
}
.profile-account-pill.is-link:hover {
background: rgba(61, 217, 182, 0.22);
}
/* Account-List innerhalb der Identity-Card (Profile-Hero) — Trennlinie oben */
.profile-account-list--inside {
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--line);
text-align: left;
}
.profile-avatar {
position: relative;
width: 96px; height: 96px;
margin: 0 auto var(--s-3);
}
.profile-avatar-img,
.profile-avatar-initials {
width: 100%; height: 100%;
border-radius: 50%; object-fit: cover;
/* Subtler Mint-Ring um den Avatar + premium Boden-Glow */
box-shadow:
0 0 0 3px var(--card),
0 0 0 5px var(--mint),
0 12px 32px -8px var(--mint-glow),
0 4px 12px -2px rgba(20, 20, 28, 0.10);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.profile-avatar:hover .profile-avatar-img,
.profile-avatar:hover .profile-avatar-initials {
transform: scale(1.02);
box-shadow:
0 0 0 3px var(--card),
0 0 0 6px var(--mint),
0 18px 40px -8px var(--mint-glow-2),
0 6px 16px -2px rgba(20, 20, 28, 0.14);
}
.profile-avatar-initials {
background: var(--mint);
color: #0B0B11;
font-size: 40px; font-weight: 700;
letter-spacing: -0.02em;
display: flex; align-items: center; justify-content: center;
}
.profile-avatar-edit {
position: absolute; right: -4px; bottom: -4px;
width: 36px; height: 36px;
background: var(--ink); color: var(--mint);
border-radius: 50%;
border: 3px solid var(--bg);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.profile-avatar-edit:hover { transform: scale(1.05); background: var(--mint); color: #0B0B11; }
.profile-avatar-edit svg { width: 16px; height: 16px; }
.profile-name {
font-family: var(--font-display);
font-size: 26px; font-weight: 600;
letter-spacing: -0.03em; line-height: 1.1;
color: var(--ink);
margin-bottom: var(--s-2);
}
.profile-tags {
display: flex; justify-content: center;
gap: 6px; flex-wrap: wrap;
margin-bottom: 0;
}
.profile-hint { color: var(--ink-3); font-size: 12.5px; }
/* Section-Header in Cards-Liste */
.profile-section-h {
font-size: 11px; font-weight: 700;
letter-spacing: 0.7px; text-transform: uppercase;
color: var(--ink-3);
margin: var(--s-4) var(--s-2) var(--s-2);
}
.profile-section-h:first-child { margin-top: 0; }
/* Profile-Card mit Icon links */
.profile-card {
width: 100%;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 10px 14px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 12px;
margin-bottom: var(--s-1);
font: inherit; font-size: 14px;
cursor: pointer; text-align: left;
color: inherit;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.profile-card:hover {
background: var(--card-elev);
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.pc-icon {
width: 34px; height: 34px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
color: var(--ink-2);
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.profile-card:hover .pc-icon {
background: rgba(61, 217, 182, 0.10);
border-color: rgba(61, 217, 182, 0.40);
color: var(--mint);
}
.pc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
color: var(--ink-3);
}
.pc-value {
font-size: 14px; font-weight: 500;
color: var(--ink);
overflow: hidden; text-overflow: ellipsis;
}
.pc-chev {
color: var(--ink-4); font-size: 22px;
transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.profile-card:hover .pc-chev { color: var(--mint); transform: translateX(2px); }
/* Logout-Link subtil */
.profile-logout {
display: inline-flex; align-items: center; gap: 8px;
margin-top: var(--s-5);
padding: 10px 14px;
color: var(--ink-3);
font-size: 13px; font-weight: 500;
text-decoration: none;
border-radius: var(--r-md);
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.profile-logout:hover { color: var(--danger); background: rgba(232, 112, 79, 0.08); }
.profile-logout svg { flex-shrink: 0; }
/* Profil-Tipps — wie antrag-tips: Tiles statt Liste */
.profile-tips {
margin-top: var(--s-2);
padding-top: var(--s-2);
border-top: 1px solid var(--line);
}
.profile-tips-head {
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: var(--s-1);
}
.profile-tips-dot {
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
animation: mint-dot-pulse 3s ease-in-out infinite;
}
@keyframes mint-dot-pulse {
0%, 100% { box-shadow: 0 0 6px var(--mint-glow-2); }
50% { box-shadow: 0 0 14px var(--mint-glow-2), 0 0 0 4px rgba(61, 217, 182, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
.profile-tips-dot { animation: none; }
}
.profile-tips-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
}
.profile-tips-list li {
display: flex; gap: 8px;
padding: 8px 10px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-size: 11.5px; line-height: 1.35;
color: var(--ink-2);
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.profile-tips-list li:hover {
border-color: rgba(31, 168, 137, 0.25);
background: linear-gradient(135deg, rgba(61, 217, 182, 0.04) 0%, var(--bg-alt) 100%);
transform: translateY(-1px);
}
.profile-tips-list svg {
width: 24px; height: 24px;
padding: 5px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--mint);
flex-shrink: 0;
box-sizing: border-box;
}
.profile-tips-list strong {
color: var(--ink); font-weight: 600;
}
@media (max-width: 720px) {
.profile-tips-list { grid-template-columns: 1fr; }
}
/* Choice-Tiles für Modal-Auswahl (Geschlecht, Sprache, …) */
.choice-grid {
display: grid;
gap: var(--s-2);
margin: var(--s-2) 0 var(--s-3);
}
.choice-grid--2 { grid-template-columns: 1fr 1fr; }
.choice-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.choice-tile {
display: flex; align-items: center; justify-content: center;
padding: 14px 12px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-size: 14px; font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.choice-tile input { position: absolute; opacity: 0; pointer-events: none; }
.choice-tile:hover { border-color: var(--line-2); color: var(--ink); }
.choice-tile.is-active {
background: rgba(61, 217, 182, 0.10);
border-color: var(--mint);
color: var(--ink);
}
.choice-tile--ghost {
grid-column: 1 / -1;
font-size: 13px;
color: var(--ink-3);
background: transparent;
}
@media (max-width: 480px) {
.choice-grid--3 { grid-template-columns: 1fr 1fr; }
}
.pc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.5px; display: block; }
.pc-value { display: block; color: var(--ink); margin-top: 2px; font-weight: 500; grid-column: 1; }
.pc-chev { color: var(--ink-4); font-size: 20px; }
/* ============ CHEF / ADMIN — Light, Desktop, Sidebar ============ */
.page-chef { background: var(--bg); color: var(--ink); }
.chef-layout {
display: block;
min-height: 100vh; min-height: 100dvh;
}
.chef-layout > * { min-width: 0; }
/* ---- Desktop (≥901px): Floating-Sidebar + sichtbare Top-Bar wie beim Fahrer ---- */
@media (min-width: 901px) {
/* Body bekommt links Platz für die freistehende Sidebar (260px + 2× 16px) */
.page-chef {
padding-left: calc(260px + var(--s-4) + var(--s-4));
padding-right: var(--s-4);
}
/* chef-main: horizontal NULL — die 16px-Gaps liefert das Body-Padding.
Oben Platz für die fixed Top-Bar (56px + 16px Atemraum) — exakt wie Fahrer .fnav-top. */
.chef-main {
padding-top: calc(56px + env(safe-area-inset-top, 0px) + var(--s-4)) !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: var(--s-4) !important;
}
}
/* ---- Sidebar — freistehende Card wie beim Fahrer (.bnav Desktop) ---- */
.sidebar {
background: var(--card);
background-image: var(--card-shine);
padding: var(--s-6) var(--s-4) var(--s-5);
display: flex; flex-direction: column;
gap: var(--s-5);
scrollbar-width: thin;
}
@media (min-width: 901px) {
.sidebar {
position: fixed;
top: calc(56px + env(safe-area-inset-top, 0px) + var(--s-4)); /* Topbar 56px + 16px Atemraum — wie chef-main */
bottom: var(--s-4);
left: var(--s-4);
width: 260px;
max-width: 260px;
border: 1px solid var(--line);
border-radius: var(--r-2xl);
box-shadow:
var(--shadow-md),
0 12px 32px -16px var(--mint-glow),
inset 0 1px 0 var(--card-edge);
overflow: hidden; /* Sidebar selbst scrollt NICHT — nur der .sb-scroll-Bereich darin */
z-index: var(--z-nav);
}
/* User-Block + Footer fix, mittlerer Bereich scrollbar */
.sidebar > .sb-brand,
.sidebar > .sb-user,
.sidebar > .sb-foot { flex-shrink: 0; }
.sb-scroll {
flex: 1;
min-height: 0; /* nötig für korrektes flex-overflow */
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: var(--s-5);
scrollbar-width: thin;
/* unten dünne Maske als visueller Hinweis dass es scrollbar ist */
mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
}
/* Konto-Section behält margin-top:auto, im scroll-flex-Container damit es an den Boden rutscht */
.sb-scroll .sb-section--account { margin-top: auto; }
}
@media (max-width: 900px) {
/* Mobile: kein Scroll-Container, alles fließt normal */
.sb-scroll { display: contents; }
}
/* ---- Clock-Digit-Boxen für Chef-Sidebar (.sb-user-clock).
Die Fahrer-Variante hat ihre Regeln im @media (min-width:1024px) Block weiter oben;
für Chef ist die Sidebar bereits ab 901px sichtbar, daher hier auf Top-Level. ---- */
.sb-user-clock .bnav-clock-d {
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 6px 0;
font-family: var(--font-ui);
font-size: 18px; font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
width: 22px; text-align: center;
}
.sb-user-clock .bnav-clock-sep {
font-family: var(--font-ui);
font-size: 18px; font-weight: 600;
color: var(--ink-3);
line-height: 1;
padding: 0 2px;
}
/* ---- Chef-Sidebar User-Block (analog .bnav-user beim Fahrer) ---- */
.sb-user {
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: var(--s-3);
padding: 0 var(--s-2) var(--s-5);
border-bottom: 1px solid var(--line);
text-align: center;
}
.sb-user-avatar {
position: relative;
width: 88px; height: 88px;
border-radius: 50%;
background: var(--bg-alt);
color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 26px;
flex-shrink: 0;
overflow: hidden;
text-decoration: none;
box-shadow:
0 0 0 3px var(--card),
0 0 0 5px rgba(61, 217, 182, 0.40),
0 0 24px -4px var(--mint-glow);
transition: transform var(--dur-fast) var(--ease-out);
}
.sb-user-avatar:hover { transform: scale(1.03); }
.sb-user-meta {
min-width: 0;
width: 100%;
display: flex; flex-direction: column;
align-items: center;
gap: 4px;
}
.sb-user-name {
font-family: var(--font-display);
font-size: 17px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.sb-user-role {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
background: var(--mint-soft);
color: var(--success-ink);
border-radius: 100px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: inset 0 0 0 1px rgba(31, 168, 137, 0.25);
margin-top: 2px;
}
.sb-user-role::before {
content: '';
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
}
:root[data-theme="dark"] .page-chef .sb-user-role {
background: rgba(61, 217, 182, 0.14);
color: var(--mint);
}
.sb-user-date {
font-size: 11px;
color: var(--ink-3);
margin-top: var(--s-3);
letter-spacing: 0.02em;
}
.sb-user-clock {
display: inline-flex; align-items: center; justify-content: center;
gap: 4px;
margin-top: 8px;
color: var(--ink);
}
.sb-user-stat {
margin-top: var(--s-3);
display: flex; align-items: baseline; gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.sb-user-stat-num {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.025em;
color: var(--mint);
font-variant-numeric: tabular-nums lining-nums;
}
.sb-user-stat-label {
font-size: 10.5px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Auf Desktops/Laptops mit Höhe < 950px: User-Block kompakter, damit
alle Menü-Punkte (besonders bei Admin mit vielen Items) unten
reinpassen ohne Scrollen-Müssen. */
@media (min-width: 901px) and (max-height: 950px) {
.sb-user { gap: 6px; padding-bottom: 4px; }
.sb-user-avatar { width: 56px !important; height: 56px !important; }
.sb-user-date,
.sb-user-clock,
.sb-user-stat { display: none !important; }
}
/* Auf Mobile (<900): User-Block ausblenden (Sidebar ist eh weg) */
@media (max-width: 900px) {
.sb-user { display: none !important; }
}
/* Desktop: Dropdown-Trigger versteckt, Items immer sichtbar */
.sb-dropdown-trigger { display: none; }
.sb-dropdown-items { display: contents; }
/* Mobile-only: Bottom-Nav (auf Desktop versteckt) */
.cnav-bottom { display: none; }
/* Top-Header: auf ALLEN Größen sichtbar, fixed oben (analog Fahrer .fnav-top) */
.cnav-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: fixed;
top: 0; left: 0; right: 0;
z-index: calc(var(--z-nav) + 1);
padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; /* exakt wie Fahrer .fnav-top */
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
border-bottom: 1px solid var(--line);
box-shadow: 0 8px 24px -10px rgba(20, 20, 28, 0.10);
}
:root[data-theme="dark"] .page-chef .cnav-top {
background: rgba(26, 26, 35, 0.85);
border-bottom-color: var(--card-edge);
}
/* Top-Bar-Inhalte: greifen auf ALLEN Größen (analog .fnav-top beim Fahrer).
Mobile-spezifische Größen-Overrides folgen im @media-Block unten. */
.cnav-top-brand {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--ink);
font-weight: 700; font-size: 15px;
letter-spacing: -0.01em;
min-width: 0;
}
.cnav-top-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnav-top-right { display: flex; align-items: center; gap: 8px; }
.cnav-top-user {
display: flex; align-items: center; gap: 8px;
text-decoration: none; color: var(--ink);
padding: 4px 6px 4px 10px;
border-radius: 999px;
transition: background var(--dur-fast) var(--ease-out);
}
.cnav-top-user:hover { background: var(--bg-alt); }
.cnav-top-user-name {
font-size: 13px; font-weight: 600;
max-width: 140px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cnav-top-avatar {
width: 30px; height: 30px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-alt);
color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
border: 1px solid var(--line);
}
.cnav-top-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnav-top-icon {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--card);
color: var(--ink-2);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0;
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.cnav-top-icon svg { width: 16px; height: 16px; }
.cnav-top-icon:hover { color: var(--mint); border-color: var(--mint); }
.cnav-top-icon:active { transform: scale(0.92); }
.cnav-top-icon--logout:hover { color: var(--danger); border-color: var(--danger); }
/* Auf Desktop:
- Brand sitzt in der Top-Bar (nicht doppelt in der Sidebar)
- User-Name + Avatar sitzen in der Top-Bar (klick öffnet Profil) →
macht die "Konto"-Sektion in der Sidebar überflüssig
- Admin-Dropdown hat die Sidebar-Verwaltung → Top-Bar-Cog weg */
@media (min-width: 901px) {
.cnav-top-admin { display: none !important; }
.sb-brand { display: none !important; }
.sb-section--account { display: none !important; }
}
@media (max-width: 900px) {
/* Sidebar komplett ausblenden — Mobile nutzt Top-Header + Bottom-Nav */
.sidebar { display: none !important; }
/* Layout-Wrapper: Sidebar-Spalte raus, Main-Inhalt nutzt volle Breite +
Padding für die fixed Header oben und Bottom-Nav unten. */
.page-chef { padding-left: 0 !important; padding-right: 0 !important; }
.chef-layout:has(.cnav-top) .chef-main {
padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ---- Chef Top-Header (Mobile-Override) — schlanker, kompaktere Paddings ---- */
.cnav-top { padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; }
.cnav-top-user-name { max-width: 90px; }
/* Admin-Dropdown im Top-Header */
.cnav-top-admin { position: relative; }
.cnav-top-admin-items {
display: none;
position: absolute;
top: calc(100% + 8px); right: 0;
min-width: 180px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
padding: 6px;
flex-direction: column;
gap: 2px;
z-index: calc(var(--z-nav) + 1);
}
.cnav-top-admin[data-open="true"] .cnav-top-admin-items { display: flex; }
.cnav-top-admin-link {
padding: 9px 12px;
border-radius: var(--r-sm);
text-decoration: none;
color: var(--ink-2);
font-size: 13.5px;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cnav-top-admin-link:hover { background: var(--bg-alt); color: var(--ink); }
.cnav-top-admin-link.active { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .page-chef .cnav-top-admin-link.active {
background: rgba(61, 217, 182, 0.16); color: var(--mint);
}
/* Sehr schmaler Screen: User-Name ausblenden, nur Avatar */
@media (max-width: 420px) {
.cnav-top-user-name { display: none; }
.cnav-top-user { padding: 4px; }
}
/* ---- Chef Bottom-Nav (Mobile) ---- */
.cnav-bottom {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
position: fixed;
bottom: 0; left: 0; right: 0;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border-top: 1px solid var(--line);
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
z-index: var(--z-nav);
box-shadow: 0 -8px 24px -10px rgba(20, 20, 28, 0.10);
}
:root[data-theme="dark"] .page-chef .cnav-bottom {
background: rgba(11, 11, 17, 0.85);
}
.cnav-item {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
text-decoration: none;
color: var(--ink-3);
padding: 6px 4px;
font-size: 11px; font-weight: 500;
border-radius: var(--r-sm);
transition: color var(--dur-fast) var(--ease-out);
}
.cnav-item svg { width: 20px; height: 20px; }
.cnav-item:hover { color: var(--ink); }
.cnav-item.active { color: var(--mint); }
.cnav-item.active svg { stroke: var(--mint); }
.cnav-badge {
position: absolute;
top: 2px; right: calc(50% - 22px);
min-width: 16px; height: 16px;
padding: 0 4px;
background: var(--mint); color: var(--bg);
border-radius: 999px;
font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
/* Stat-Cards: 2 Spalten bis 540, 1 darunter */
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
/* 2×2 Grid — User-Wunsch (vorher 1×4 untereinander, zu viel Platz) */
.stats-grid { gap: var(--s-2); }
.stat-card { padding: var(--s-4); }
.sc-big { font-size: 28px; }
.sc-label { font-size: 10px; }
.sc-sub { font-size: 11px; }
.chef-main { padding: var(--s-4) var(--s-4) var(--s-10); }
.chef-header { gap: var(--s-3); }
.chef-h-title { font-size: 26px; }
.chef-h-sub { font-size: 13px; margin-top: 6px; }
/* Sidebar-Avatar (Profil-Link) im Header nach rechts */
.chef-h-right { width: 100%; justify-content: flex-end; }
/* Tab-Row als horizontaler Scroll (kein Umbruch, kein Klemmen) */
.tab-row {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-left: calc(-1 * var(--s-4));
margin-right: calc(-1 * var(--s-4));
padding: 0 var(--s-4);
}
.tab-row::-webkit-scrollbar { display: none; }
.tab { padding: 10px 12px; font-size: 13px; flex-shrink: 0; }
.tab-actions { margin-left: auto; gap: 6px; padding-bottom: 6px; flex-shrink: 0; }
.pill { padding: 8px 12px; font-size: 12.5px; flex-shrink: 0; }
.chef-grid { gap: var(--s-4); }
.chef-stream { position: static; }
/* Profil-Avatar zurück oben, klein im Header */
.chef-h-right { width: auto; }
}
.sb-brand {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px var(--s-3);
margin-bottom: var(--s-2);
font-weight: 700; font-size: 15px;
letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .sb-brand { border-bottom: none; padding-bottom: 6px; margin-bottom: 0; } }
.sb-brand .dot {
width: 10px; height: 10px; background: var(--mint);
border-radius: 3px; transform: rotate(45deg);
box-shadow: 0 0 8px var(--mint-glow);
}
.sb-section { display: flex; flex-direction: column; gap: 2px; }
.sb-section-label {
font-size: 10px; font-weight: 700;
color: var(--ink-3);
letter-spacing: 0.7px; text-transform: uppercase;
padding: 0 12px; margin-bottom: 6px;
}
@media (max-width: 900px) { .sb-section-label { display: none; } }
.sb-link {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; /* analog Fahrer .bnav-item Desktop */
color: var(--ink-2);
text-decoration: none;
font-size: 14px; /* analog Fahrer */
font-weight: 500;
border-radius: var(--r-md); /* etwas größer = luftiger */
position: relative;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
flex-shrink: 0;
}
.sb-link:hover {
background: rgba(61, 217, 182, 0.06);
color: var(--ink);
}
.sb-link.active {
background: var(--nav-active-bg);
color: var(--mint);
font-weight: 600;
box-shadow:
inset 0 0 0 1px var(--nav-active-ring),
0 4px 14px -6px var(--mint-glow);
}
:root[data-theme="dark"] .page-chef .sb-link.active {
background: rgba(61, 217, 182, 0.14);
color: var(--mint);
}
:root[data-theme="dark"] .page-chef .sb-link.active .sb-badge {
background: var(--mint); color: #0B0B11;
}
/* Mint-Strich INNERHALB der aktiven Pille (analog Fahrer .bnav-item.active::before) */
.sb-link.active::before {
content: '';
position: absolute;
left: 4px; top: 50%;
transform: translateY(-50%);
width: 3px; height: 18px;
background: var(--mint);
border-radius: 100px;
box-shadow: 0 0 8px var(--mint-glow);
}
@media (max-width: 900px) { .sb-link.active::before { display: none; } }
.sb-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-badge {
margin-left: auto;
background: var(--mint);
color: #0E0E13;
font-size: 10px; font-weight: 700;
padding: 2px 7px; border-radius: 100px;
}
.sb-link.active .sb-badge { background: var(--mint); color: #0E0E13; box-shadow: 0 2px 6px -2px var(--mint-glow); }
.sb-foot, .bnav-foot {
margin-top: auto; /* drückt den Footer ans untere Ende der Sidebar */
padding: 12px 12px 4px;
color: var(--ink-3);
font-size: 11px;
border-top: 1px solid var(--line);
text-align: center;
}
.sb-foot-link {
color: var(--ink-2);
text-decoration: none;
font-weight: 600;
border-bottom: 1px dotted var(--line-3);
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.sb-foot-link:hover {
color: var(--mint);
border-bottom-color: var(--mint);
}
@media (max-width: 900px) { .sb-foot { display: none; } }
@media (max-width: 1023px) { .bnav-foot { display: none; } }
/* ---- Main ---- */
.chef-main {
padding: var(--s-4) var(--s-4) var(--s-4); /* 16px überall — Standard-Gap */
max-width: var(--chef-max);
min-width: 0;
width: 100%;
}
.chef-grid > * { min-width: 0; }
.req-table { min-width: 0; }
@media (max-width: 700px) { .chef-main { padding: var(--s-4) var(--s-4) var(--s-10); } }
.chef-header {
display: flex; justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--s-4); /* 16px Standard-Gap */
gap: var(--s-6); flex-wrap: wrap;
}
.chef-h-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.7px;
color: var(--ink-3); margin-bottom: 6px;
}
.chef-h-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 600; line-height: 1.05;
letter-spacing: -0.035em; margin: 0;
color: var(--ink);
}
.chef-h-title em { font-style: normal; font-weight: 700; color: var(--mint); }
.chef-h-sub { color: var(--ink-2); font-size: 14px; margin-top: 12px; }
.chef-h-sub strong { color: var(--ink); font-weight: 700; }
.pharma-txt { color: var(--pharma); font-weight: 600; }
.kfz-txt { color: var(--kfz); font-weight: 600; }
.chef-h-right { display: flex; align-items: center; gap: 12px; }
.chef-h-link {
color: var(--ink-2);
text-decoration: none;
font-size: 13px; font-weight: 600;
padding: 8px 14px;
border-radius: 100px;
border: 1px solid var(--line-2);
}
.chef-h-link:hover { border-color: var(--mint); color: var(--mint); }
.page-chef .avatar { background: var(--mint); color: #0E0E13; }
/* ---- Tabs ---- */
.tab-row {
display: flex; align-items: center;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-4);
}
.tab {
background: none; border: none;
padding: 12px 16px;
font: inherit; font-size: 14px; font-weight: 600;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
position: relative;
border-radius: var(--r-sm) var(--r-sm) 0 0;
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--ink); background: var(--bg-alt); }
.tab.active { color: var(--mint); background: transparent; }
.tab.active::after {
content: '';
position: absolute;
left: 12px; right: 12px;
bottom: -1px;
height: 2px;
background: var(--mint);
border-radius: 2px;
box-shadow: 0 0 12px var(--mint-glow-2);
}
.tab-badge {
background: var(--ink);
color: var(--bg);
font-size: 11px; font-weight: 700;
padding: 1px 7px; border-radius: 100px;
margin-left: 6px;
}
/* Dark-Mode: ink=weiß → weiß auf weiß. Mint-Akzent stattdessen */
:root[data-theme="dark"] .page-chef .tab-badge {
background: rgba(61, 217, 182, 0.16);
color: var(--mint);
}
.tab.active .tab-badge { background: var(--mint); color: #0E0E13; }
.tab-actions {
margin-left: auto;
display: flex; gap: 8px; align-items: center;
padding-bottom: 6px;
}
/* ---- Filter-Card: Status-Tabs + Team-Pills in einer Premium-Card ---- */
.filter-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 8px var(--s-4);
margin-bottom: var(--s-4); /* 16px Standard-Gap */
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.filter-card-tabs {
display: flex;
align-items: center;
gap: 2px;
}
.filter-card-tabs .tab {
padding: 10px 14px;
border-radius: var(--r-sm);
border-bottom: none !important;
}
.filter-card-tabs .tab.active::after { display: none; }
.filter-card-tabs .tab.active {
background: rgba(61, 217, 182, 0.10);
color: var(--mint);
box-shadow: inset 0 0 0 1px rgba(61, 217, 182, 0.30);
}
.filter-card-tabs .tab.active .tab-badge {
background: var(--mint); color: #0E0E13;
box-shadow: 0 2px 6px -2px var(--mint-glow);
}
.filter-card-divider {
width: 1px; height: 28px;
background: var(--line-2);
flex-shrink: 0;
}
.filter-card-pills {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.filter-card-pills-label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-right: 4px;
}
.filter-card-pills .fpill {
padding: 6px 12px;
font-size: 12.5px;
}
/* ---- Filter-Radio-Group: optisch deutlich anders als Status-Tabs/Pills.
Klassische Radio-Buttons mit Team-farbigem Dot. ---- */
.filter-radio-group {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.filter-radio-group > .filter-card-pills-label {
display: inline-flex;
align-items: center;
color: var(--ink-3);
margin-right: 6px;
}
.filter-radio-group > .filter-card-pills-label svg {
flex-shrink: 0;
}
.filter-radio {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 8px;
font-size: 13px; font-weight: 500;
color: var(--ink-2);
text-decoration: none;
border-radius: 100px;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.filter-radio:hover { background: var(--bg-alt); color: var(--ink); }
.filter-radio.is-active {
background: var(--bg-alt);
color: var(--ink);
font-weight: 600;
}
.filter-radio-dot {
width: 14px; height: 14px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--line-3);
flex-shrink: 0;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
position: relative;
}
.filter-radio.is-active .filter-radio-dot::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 50%;
background: currentColor;
}
.filter-radio-dot--pharma { color: var(--pharma); }
.filter-radio-dot--kfz { color: var(--kfz); }
.filter-radio-dot--all,
.filter-radio-dot--mint { color: var(--mint); }
.filter-radio-dot--warn { color: var(--warning); }
.filter-radio-dot--danger { color: var(--danger); }
.filter-radio-dot--neutral { color: var(--ink-3); }
.filter-radio.is-active .filter-radio-dot--pharma {
border-color: var(--pharma);
box-shadow: 0 0 0 3px rgba(91, 123, 219, 0.18);
}
.filter-radio.is-active .filter-radio-dot--kfz {
border-color: var(--kfz);
box-shadow: 0 0 0 3px rgba(232, 128, 78, 0.18);
}
.filter-radio.is-active .filter-radio-dot--all,
.filter-radio.is-active .filter-radio-dot--mint {
border-color: var(--mint);
box-shadow: 0 0 0 3px rgba(61, 217, 182, 0.18);
}
.filter-radio.is-active .filter-radio-dot--warn {
border-color: var(--warning);
box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.22);
}
.filter-radio.is-active .filter-radio-dot--danger {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(232, 112, 79, 0.22);
}
.filter-radio.is-active .filter-radio-dot--neutral {
border-color: var(--ink-2);
box-shadow: 0 0 0 3px rgba(24, 24, 29, 0.10);
}
/* Badge im Radio (z.B. Anzahl offener Anträge) */
.filter-radio-badge {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
margin-left: 4px;
background: var(--warning);
color: #0E0E13;
font-size: 10.5px; font-weight: 700;
border-radius: 100px;
box-shadow: 0 2px 6px -2px rgba(244, 185, 66, 0.40);
}
.filter-radio.is-active .filter-radio-badge {
background: var(--ink);
color: var(--bg);
box-shadow: none;
}
/* Variante: Filter-Card mit Page-Header oben drin */
.filter-card--with-head {
flex-direction: column;
align-items: stretch;
padding: var(--s-5) var(--s-5) var(--s-4);
gap: var(--s-4);
}
/* Stats-Grid INNERHALB der Filter-Card: kein doppelter margin-bottom */
.filter-card-stats {
margin: 0 !important;
}
.filter-card--with-head .filter-card-head {
display: flex;
flex-direction: column;
gap: 4px;
}
.filter-card--with-head .filter-card-head .chef-h-label { margin-bottom: 0; }
.filter-card--with-head .filter-card-head .chef-h-title { margin: 4px 0 6px; }
.filter-card--with-head .filter-card-head .chef-h-sub { margin-top: 0; }
/* Variante: Head mit rechtsbündigen Action-Buttons (z. B. Tourenplanung).
Title-Block bleibt links als Spalte, Actions rechts. */
.filter-card-head--row {
flex-direction: row !important;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-4);
flex-wrap: wrap;
}
.filter-card-head-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.filter-card-head-text .chef-h-label { margin-bottom: 0; }
.filter-card-head-text .chef-h-title { margin: 4px 0 6px; }
.filter-card-head-text .chef-h-sub { margin-top: 0; }
.filter-card-head-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
.filter-card-row {
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.filter-card-row + .filter-card-row { padding-top: var(--s-3); }
/* Aktiv-Filter-Hint (z.B. unter den Pills auf /admin/users wenn Team/Rolle gesetzt) */
/* Vehicle-Chip in der Mitarbeiter-Liste — zeigt KFZ-Kennzeichen oder
markiert fehlende Zuweisung. */
.req-emp-sub-row {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-top: 2px;
}
.vehicle-chip {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 7px 1px 5px;
background: rgba(95, 184, 156, 0.12);
color: var(--mint-deep);
border: 1px solid rgba(95, 184, 156, 0.30);
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .page-chef .vehicle-chip { color: var(--mint); }
.vehicle-chip svg { flex-shrink: 0; opacity: 0.7; }
.vehicle-chip--missing {
background: rgba(244, 185, 66, 0.10);
color: var(--warning-ink, #B8772A);
border-color: rgba(244, 185, 66, 0.35);
font-weight: 600;
}
:root[data-theme="dark"] .page-chef .vehicle-chip--missing { color: var(--warning, #F4B942); }
/* Input mit rechtem Icon-Overlay (z.B. Kalender bei date-Inputs).
Auch flatpickr's altInput soll Icon-Platz rechts haben. */
.fg-input-wrap { position: relative; }
.fg-input-wrap .fg-input,
.fg-input-wrap input.flatpickr-input,
.fg-input-wrap input.flatpickr-alt-input {
padding-right: 36px;
}
.fg-input-icon {
position: absolute;
right: 10px; top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
pointer-events: none;
display: inline-flex;
transition: color var(--dur-fast) var(--ease-out);
}
.fg-input-wrap:focus-within .fg-input-icon { color: var(--mint); }
.filter-card-active-hint {
display: flex;
align-items: center;
gap: 6px;
padding-top: var(--s-3);
border-top: 1px dashed var(--line);
margin-top: var(--s-3);
font-size: 11.5px;
color: var(--ink-3);
flex-wrap: wrap;
}
.filter-active-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: var(--mint-soft);
color: var(--mint-deep);
border: 1px solid rgba(95, 184, 156, 0.30);
border-radius: 100px;
font-size: 11px;
font-weight: 500;
text-decoration: none;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.filter-active-chip:hover {
background: rgba(255, 90, 90, 0.10);
border-color: var(--danger, #E8645F);
color: var(--danger, #E8645F);
}
.filter-active-chip strong { font-weight: 700; }
:root[data-theme="dark"] .page-chef .filter-active-chip { color: var(--mint); }
/* Variante: Filter-Form mit Inputs (Audit-Log etc.) — Felder neben Pills/Radios */
.filter-card-row--form {
align-items: flex-end;
gap: var(--s-3);
}
.filter-card-row--form .fg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-card-row--form .fg .fg-label {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
}
.filter-card-row--form .fg .fg-input { min-width: 0; }
.filter-card-row--form .fg--grow { flex: 1 1 200px; }
/* Alle Controls dieser Row auf exakt 44px Höhe und gleiche Optik ziehen.
Native Date-Inputs sind sonst 46px (Calendar-Widget), Buttons können
stark divergieren — hier wird alles eingenordet. */
.filter-card-row--form .fg-input,
.filter-card-row--form .fg-select,
.filter-card-row--form input[type="date"],
.filter-card-row--form input[type="search"],
.filter-card-row--form input[type="text"],
.filter-card-row--form button[type="submit"],
.filter-card-row--form .btn-sec,
.filter-card-row--form .btn-pri {
height: 44px;
box-sizing: border-box;
border-radius: var(--r-md);
font-size: 14px;
padding: 0 14px;
line-height: 1;
}
.filter-card-row--form .fg-select { padding-right: 42px; }
.filter-card-row--form button[type="submit"],
.filter-card-row--form .btn-sec,
.filter-card-row--form .btn-pri {
padding: 0 22px;
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
font-weight: 600;
white-space: nowrap;
}
/* Spacer-Label: leeres Label damit Buttons in derselben fg-Spalte exakt
auf der Input-Linie sitzen (Label-Höhe wird reserviert, aber invisible). */
.fg-label--spacer { visibility: hidden; pointer-events: none; }
.filter-card-row--form .fg--btn { flex: 0 0 auto; }
/* Flatpickr altInput in Filter-Row kompakter halten, sonst wrapped die Row */
.filter-card-row--form .fg input.flatpickr-alt-input { width: 100%; }
.filter-card-row--form .fg:has(> .fg-input-wrap) { flex: 0 0 160px; }
/* Calendar-Icon als klickbarer Button (öffnet Picker) */
.fg-input-icon--btn {
appearance: none; background: transparent; border: 0;
cursor: pointer; padding: 0;
color: var(--ink-3);
transition: color .12s ease;
}
.fg-input-icon--btn:hover { color: var(--mint-deep); }
:root[data-theme="dark"] .fg-input-icon--btn:hover { color: var(--mint); }
/* In .fg-input-wrap: Icon rechts platzieren, Input bekommt Padding-Right */
.fg-input-wrap .fg-input-icon {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
pointer-events: auto;
}
.fg-input-wrap > input.fg-input,
.fg-input-wrap > input.flatpickr-alt-input,
.fg-input-wrap > input.flatpickr-input { padding-right: 38px; }
/* Selects in Filter-Row auf vernünftige Maxima cappen — sonst stretcht ein
langer User-Name die Box auf 250+px und der Filtern-Button wrapped. */
.filter-card-row--form .fg:has(> .fg-select) { flex: 1 1 140px; min-width: 0; max-width: 200px; }
.filter-card-row--form .fg-select {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Such-Feld inline in der Filter-Row — Lupe links, kompakter Input rechts */
.filter-card-search {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 100px;
flex: 0 1 280px;
min-width: 180px;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.filter-card-search:focus-within {
border-color: var(--mint);
background: var(--card);
}
.filter-card-search svg {
flex-shrink: 0;
color: var(--ink-3);
}
.filter-card-search input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
padding: 7px 0;
font: inherit;
font-size: 13px;
color: var(--ink);
}
.filter-card-search input::placeholder { color: var(--ink-3); }
/* Mobile: Filter-Card wird zweizeilig — Tabs oben, Pills unten */
@media (max-width: 720px) {
.filter-card {
padding: 8px;
gap: 8px;
}
.filter-card-tabs {
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.filter-card-tabs::-webkit-scrollbar { display: none; }
.filter-card-divider { display: none; }
.filter-card-pills {
width: 100%;
margin-left: 0;
padding-top: 6px;
border-top: 1px solid var(--line);
padding: 8px 4px 4px;
}
}
/* ---- Req-Empty: schöner Empty-State in der Anfragen-Tabelle ---- */
.req-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px 56px;
gap: 12px;
}
.req-empty-icon {
/* Clean & flat — identisch zu .decision-banner-icon-Look (kein Gradient/Glow/Ring). */
width: 64px; height: 64px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(61, 217, 182, 0.14);
color: var(--mint);
margin-bottom: 4px;
}
.req-empty-icon svg { width: 28px; height: 28px; }
.req-empty-title {
font-family: var(--font-display);
font-size: 20px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
}
.req-empty-sub {
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-2);
max-width: 360px;
margin: 0 auto;
}
.req-empty-cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 12px;
padding: 9px 16px;
background: var(--mint);
color: #0E0E13;
border-radius: 100px;
font-size: 13px; font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 18px -6px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.20);
transition: background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.req-empty-cta:hover {
background: var(--mint-deep);
box-shadow: 0 10px 24px -6px var(--mint-glow-2);
transform: translateY(-1px);
}
/* ---- Activity-Stream als Card mit Erklärungs-Head ---- */
.stream-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-4);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.stream-card-head {
padding-bottom: var(--s-3);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
}
.stream-card-title {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 6px;
}
.stream-card-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 8px var(--mint-glow-2);
animation: mint-dot-pulse 3s ease-in-out infinite;
}
.stream-card-desc {
font-size: 12px;
line-height: 1.5;
color: var(--ink-3);
}
.stream-empty {
padding: var(--s-4);
font-size: 12.5px;
}
/* ============ Wochenübersicht (Chef-Übersicht) ============ */
.week-grid-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
margin-top: var(--s-4); /* 16px Standard-Gap */
}
.week-grid-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--line);
background: var(--bg-elev);
gap: var(--s-3);
flex-wrap: wrap;
}
.week-grid-title {
font-family: var(--font-display);
font-size: 18px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.week-grid-sub {
font-size: 12.5px;
color: var(--ink-3);
margin-top: 4px;
}
.week-grid-nav {
display: flex; align-items: center; gap: 8px;
}
.week-grid-scroll {
overflow-x: auto;
scrollbar-width: thin;
}
.week-grid {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 760px;
}
.week-grid thead th {
text-align: center;
padding: 10px 6px;
background: var(--bg-alt);
color: var(--ink-3);
font-size: 11px; font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.week-grid thead th.wg-th-emp {
text-align: left;
width: 1%; /* shrink-to-fit, gibt den Tag-Spalten den Platz */
white-space: nowrap;
padding-left: var(--s-4);
position: sticky;
left: 0;
z-index: 3;
/* Header-Hintergrund (bg-alt) damit durchscrollende Tag-Spalten abgedeckt sind */
background: var(--bg-alt);
}
.week-grid thead th.wg-th-stats {
text-align: right;
width: 1%; /* shrink-to-fit */
white-space: nowrap;
padding-right: var(--s-4);
}
/* Tag-Spalten gleichmäßig verteilen den freien Platz */
.week-grid thead th:not(.wg-th-emp):not(.wg-th-stats) {
width: auto;
min-width: 60px;
}
.wg-th-day { font-size: 11.5px; }
.wg-th-date { font-size: 11px; font-weight: 500; opacity: 0.7; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.wg-th-count {
margin-top: 4px;
font-size: 10.5px; font-weight: 600;
color: var(--mint);
letter-spacing: 0;
text-transform: none;
font-variant-numeric: tabular-nums;
}
.wg-th-weekend { background: var(--bg); opacity: 0.6; }
.wg-th-today {
background: var(--mint-soft) !important;
color: var(--mint-deep) !important;
}
:root[data-theme="dark"] .page-chef .wg-th-today { color: var(--mint) !important; }
.wg-th-today .wg-th-date { color: var(--mint-deep); }
:root[data-theme="dark"] .page-chef .wg-th-today .wg-th-date { color: var(--mint); }
.wg-th-holiday {
background: rgba(244, 185, 66, 0.12);
color: var(--warning-ink);
}
.week-grid tbody tr {
border-bottom: 1px solid var(--line);
transition: background var(--dur-fast) var(--ease-out);
}
.week-grid tbody tr:last-child { border-bottom: none; }
/* Vertikale Spalten-Trenner — analog zu den horizontalen Zeilen-Strichen */
.week-grid thead th + th,
.week-grid tbody td + td {
border-left: 1px solid var(--line);
}
.week-grid tbody tr:hover {
background: linear-gradient(90deg, rgba(61, 217, 182, 0.04) 0%, var(--bg-alt) 60%);
}
.wg-row-paused { opacity: 0.6; }
.wg-cell-emp {
padding: 8px var(--s-4) 8px var(--s-4);
white-space: nowrap;
position: sticky;
left: 0;
z-index: 2;
background: var(--card); /* deckt durchscrollende Tag-Zellen ab */
}
/* Hover-State auch auf die sticky Mitarbeiter-Zelle anwenden (sonst hellt der
Bg-Override aus dem Tr nicht durch) */
.week-grid tbody tr:hover .wg-cell-emp {
background: linear-gradient(90deg, rgba(61, 217, 182, 0.06) 0%, var(--card) 100%);
}
/* Subtiler Shadow am rechten Rand der Sticky-Zelle, der erst beim Scrollen
sichtbar wird (zeigt: "es geht noch weiter nach rechts") */
.wg-cell-emp::after,
.week-grid thead th.wg-th-emp::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 8px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent);
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out);
}
.week-grid-scroll.is-scrolled .wg-cell-emp::after,
.week-grid-scroll.is-scrolled .week-grid thead th.wg-th-emp::after {
opacity: 1;
}
/* Kompakte Mitarbeiter-Zelle: Avatar + Name + Team-Chip auf einer Zeile */
.wg-emp {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
}
.wg-emp-avatar {
width: 32px; height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid transparent;
background: var(--bg-alt);
}
.wg-emp-avatar.req-avatar--pharma { border-color: rgba(91, 123, 219, 0.55); }
.wg-emp-avatar.req-avatar--kfz { border-color: rgba(232, 128, 78, 0.55); }
.wg-emp-meta { min-width: 0; }
.wg-emp-row {
display: flex; align-items: center; gap: 8px;
}
.wg-emp-name {
font-size: 13.5px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Mobile: schmälere Sticky-Spalte mit gekürztem Namen */
@media (max-width: 720px) {
.week-grid thead th.wg-th-emp,
.wg-cell-emp {
max-width: 150px;
padding-left: var(--s-3);
padding-right: var(--s-2);
}
.wg-emp-name { max-width: 90px; }
.wg-emp-team { display: none; } /* auf engem Bildschirm Team-Pill ausblenden,
Avatar-Border zeigt schon das Team */
}
.wg-emp-team {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 100px;
line-height: 1.4;
}
.wg-emp-team--pharma { background: rgba(91, 123, 219, 0.16); color: var(--info); }
.wg-emp-team--kfz { background: rgba(232, 128, 78, 0.18); color: #C5582A; }
.wg-emp-paused {
font-size: 12px;
color: var(--warning-ink);
background: var(--warning-soft);
border-radius: 100px;
padding: 1px 6px;
}
.wg-cell {
text-align: center;
padding: 10px 6px;
vertical-align: middle;
position: relative;
font-variant-numeric: tabular-nums;
}
.wg-cell--weekend { background: rgba(24, 24, 29, 0.03); }
.wg-cell--today {
background: rgba(61, 217, 182, 0.05);
box-shadow: inset 0 0 0 1px rgba(61, 217, 182, 0.20);
}
.wg-cell--vacation {
background: rgba(61, 217, 182, 0.16);
}
.wg-cell--vacation-pending {
background: rgba(244, 185, 66, 0.14);
background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(244, 185, 66, 0.12) 4px, rgba(244, 185, 66, 0.12) 8px);
}
.wg-cell--sick {
background: rgba(232, 112, 79, 0.14);
}
.wg-cell--holiday {
background: rgba(244, 185, 66, 0.10);
}
.wg-marker {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
color: var(--ink);
}
.wg-cell--vacation .wg-marker { background: var(--mint); color: #0E0E13; box-shadow: 0 2px 6px -2px var(--mint-glow); }
.wg-cell--vacation-pending .wg-marker { background: var(--warning); color: #0E0E13; box-shadow: 0 2px 6px -2px rgba(244, 185, 66, 0.4); }
.wg-cell--sick .wg-marker { background: var(--danger); color: #fff; box-shadow: 0 2px 6px -2px rgba(232, 112, 79, 0.4); }
.wg-marker--holiday {
background: transparent !important;
border: 1px dashed var(--warning);
color: var(--warning-ink);
box-shadow: none !important;
}
.wg-cell-stats {
text-align: right;
padding: 8px var(--s-4) 8px 12px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.wg-stats-row {
display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
line-height: 1;
}
.wg-stat-big {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.02em;
}
.wg-stat-of {
font-size: 13px; color: var(--ink-3);
}
.wg-stats-meta {
font-size: 11px; color: var(--ink-3);
margin-top: 4px;
line-height: 1.4;
}
.week-grid-legend {
display: flex; align-items: center; gap: var(--s-4);
padding: var(--s-3) var(--s-5);
border-top: 1px solid var(--line);
background: var(--bg-elev);
font-size: 11.5px; color: var(--ink-3);
flex-wrap: wrap;
}
.wg-legend-box {
display: inline-block;
width: 18px; height: 14px;
border-radius: var(--r-xs);
vertical-align: middle;
margin-right: 4px;
}
/* Mobile: Tab-Row als 2 Zeilen, Tabs oben, Team-Toggles drunter.
So passt alles in den Viewport, kein horizontales Scrollen. */
@media (max-width: 720px) {
.tab-row {
flex-wrap: wrap;
row-gap: 8px;
}
.tab-row > .tab { padding: 10px 12px; font-size: 13px; }
.tab-row > .tab-actions {
margin-left: 0;
width: 100%;
flex-wrap: wrap;
padding: 8px 0 4px;
border-top: 1px dashed var(--line);
gap: 6px;
}
.tab-row > .tab-actions .pill {
padding: 7px 12px;
font-size: 12.5px;
}
}
.chef-toggles {
display: flex; flex-wrap: wrap;
gap: 8px; align-items: center;
margin-bottom: var(--s-4);
}
.toggle-sep { height: 20px; width: 1px; background: var(--line-2); margin: 0 4px; }
/* ---- Stats Grid ---- */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4); margin-bottom: var(--s-4); /* 16px gap zwischen Cards + 16px nach unten */
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5);
position: relative; overflow: hidden;
/* Safari-Fix: composited Pseudo-Layers (filter:blur o.ä.) werden von
`overflow: hidden` allein NICHT an der border-radius geclippt. clip-path
erzwingt das Clipping auch für eigene Compositing-Schichten. */
clip-path: inset(0 round var(--r-lg));
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-edge);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.stat-card:hover {
border-color: var(--line-2);
box-shadow: var(--shadow-md), 0 8px 24px -10px var(--mint-glow), inset 0 1px 0 var(--card-edge);
transform: translateY(-2px);
}
/* Hero-Variante: gleiche Card-Optik wie die anderen, aber mit Mint-Akzent
(Zahl in Mint, dezenter Mint-Glow oben rechts, kräftiger Hover-Effekt).
So bleibt sie visuell hervorgehoben ohne aus dem Light/Dark-System auszubrechen. */
.stat-card--dark {
background: var(--card);
border-color: var(--line);
position: relative;
overflow: hidden;
}
.stat-card--dark {
box-shadow: var(--shadow-md), 0 12px 32px -16px var(--mint-glow), inset 0 1px 0 var(--card-edge);
}
.stat-card--dark::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%);
pointer-events: none;
}
.stat-card--dark::after {
content: '';
position: absolute;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, var(--mint) 0%, transparent 70%);
top: -70px; right: -70px;
opacity: 0.22;
filter: blur(8px);
pointer-events: none;
}
.stat-card--dark:hover {
box-shadow: var(--shadow-lg), 0 18px 40px -12px var(--mint-glow-2), inset 0 1px 0 var(--card-edge);
}
.sc-label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.7px; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 10px;
position: relative; z-index: 1;
}
.sc-big {
font-family: var(--font-display);
font-size: 44px; font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--ink);
position: relative; z-index: 1;
font-feature-settings: "tnum", "lnum";
}
.stat-card--dark .sc-big { color: var(--mint-deep); }
:root[data-theme="dark"] .page-chef .stat-card--dark .sc-big { color: var(--mint); }
.sc-sub { color: var(--ink-3); font-size: 12px; margin-top: 6px; position: relative; z-index: 1; }
.sc-link { display: inline-block; margin-top: 8px; color: var(--mint-deep); font-size: 13px; font-weight: 700; text-decoration: none; }
.sc-link:hover { color: var(--ink); }
:root[data-theme="dark"] .page-chef .sc-link { color: var(--mint); }
/* ---- Main 2-col grid (Tabelle + Stream) ---- */
.chef-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: var(--s-4);
align-items: start;
}
/* Bei schmalem Viewport (≤1200px) wandert der Stream unter die Tabelle,
damit die Cards genug Platz haben. Darüber 2-spaltig (Tabelle | Stream). */
@media (max-width: 1200px) { .chef-grid { grid-template-columns: 1fr; } }
/* Chef-Kalender hat eigenes Spaltenverhältnis (1.6fr / 1fr für Kalender + Side) */
.chef-grid--cal {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--s-6);
}
@media (max-width: 1100px) {
.chef-grid--cal { grid-template-columns: 1fr; }
}
/* ---- Requests-Liste: jeder Antrag als eigene Card ---- */
.req-table {
display: flex;
flex-direction: column;
gap: 12px;
}
.req-table-head { display: none; }
.req-row {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs);
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
padding: 16px 20px;
align-items: center;
position: relative;
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.req-row > .req-employee { grid-column: 1; grid-row: 1; align-self: start; }
.req-row > .col-actions { grid-column: 2; grid-row: 1; align-self: start; }
.req-row > .col-period {
grid-column: 1 / -1; grid-row: 2;
display: flex; align-items: baseline; gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 10px;
}
.req-row > .col-period .req-period-sub::before { content: ' · '; opacity: 0.6; }
.req-row > .col-days {
grid-column: 1 / -1; grid-row: 3;
display: flex; align-items: baseline; gap: 8px;
}
.req-row > .col-days .req-days { font-size: 18px; }
.req-row > .col-days .req-days-l { font-size: 11px; margin-top: 0; }
.req-row > .col-status {
grid-column: 1 / -1; grid-row: 4;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.req-row:hover {
border-color: rgba(31, 168, 137, 0.30);
box-shadow: var(--shadow-md), 0 8px 20px -10px var(--mint-glow);
transform: translateY(-1px);
}
.req-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: transparent;
transition: background var(--dur-fast) var(--ease-out);
}
.req-row:hover::before { background: var(--mint); }
.req-row--change::before { background: var(--pharma); }
.req-row--change { background: rgba(91, 123, 219, 0.04); }
.req-row--change:hover { background: rgba(91, 123, 219, 0.06); }
/* Mobile-Feintuning: kompakteres Padding */
@media (max-width: 900px) {
.req-table-head { display: none; }
.req-row { padding: 14px 16px; gap: 6px 12px; }
.conflict-strip { padding: 10px 16px 12px; }
.conflict-strip-list { gap: 4px; }
}
/* Table-Head bei Card-Layout verbergen (gibt's nur noch dekorativ) */
.req-table-head { display: none; }
.req-employee { display: flex; gap: 12px; align-items: center; min-width: 0; }
.req-avatar {
width: 36px; height: 36px; border-radius: 50%;
color: #fff; font-weight: 700; font-size: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.req-avatar--pharma { background: linear-gradient(135deg, #5B7BDB, #3D5DBD); }
.req-avatar--kfz { background: linear-gradient(135deg, #E8804E, #B8551F); }
.req-emp-meta { min-width: 0; }
.req-name {
font-weight: 600; font-size: 14px;
color: var(--ink);
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
/* Name selbst niemals mitten im Wort umbrechen — nur an Whitespace */
overflow-wrap: normal;
word-break: keep-all;
line-height: 1.3;
}
.req-emp-sub { color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.req-period { font-size: 13px; color: var(--ink-2); }
.req-period-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.req-days {
font-family: var(--font-display);
font-size: 24px; font-weight: 600;
letter-spacing: -0.03em;
line-height: 1; color: var(--ink);
font-feature-settings: "tnum", "lnum";
}
.req-days-l { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; margin-top: 2px; }
.req-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-deny, .btn-approve {
width: 36px; height: 36px;
border: none; border-radius: 10px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform 0.15s var(--ease-out),
opacity 0.15s,
background 0.15s,
box-shadow 0.15s var(--ease-out);
}
.btn-deny {
background: var(--danger-soft); color: var(--danger-ink);
box-shadow: inset 0 0 0 1px rgba(232, 112, 79, 0.20), 0 2px 6px -2px rgba(232, 112, 79, 0.18);
}
.btn-deny:hover {
background: rgba(232, 112, 79, 0.22);
box-shadow: inset 0 0 0 1px rgba(232, 112, 79, 0.40), 0 6px 16px -6px rgba(232, 112, 79, 0.35);
transform: translateY(-1px);
}
.btn-approve {
background: var(--mint); color: #0E0E13;
box-shadow: 0 4px 12px -2px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-approve:hover {
background: var(--mint-deep);
box-shadow: 0 10px 24px -6px var(--mint-glow-2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
.btn-deny:active, .btn-approve:active { transform: translateY(0) scale(0.94); }
.req-conflict {
display: inline-flex; align-items: center;
margin-top: 6px;
font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 100px;
background: var(--warning-soft); color: var(--warning-ink);
letter-spacing: 0.02em;
}
.req-conflict--high { background: var(--danger-soft); color: var(--danger-ink); }
/* Inline-Konflikt-Strip unter der req-row */
/* Conflict-Strip lebt INNERHALB einer .req-row Card — als angehefteter Footer. */
.conflict-strip {
background: var(--warning-soft);
color: var(--warning-ink);
border-top: 1px solid rgba(244, 185, 66, 0.45);
padding: 10px 20px 12px;
font-size: 12.5px; line-height: 1.45;
/* Spannt volle Card-Breite, kompensiert das req-row-Padding */
margin: 10px -20px -16px;
border-radius: 0 0 var(--r-lg) var(--r-lg);
grid-column: 1 / -1;
}
.conflict-strip--high {
background: var(--danger-soft);
color: var(--danger-ink);
border-top-color: rgba(232, 112, 79, 0.45);
}
.conflict-strip-head {
display: flex; align-items: center; gap: 6px;
font-weight: 600; margin-bottom: 4px;
}
.conflict-strip-head svg { flex-shrink: 0; }
.conflict-strip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.conflict-strip-list li::before { content: '· '; opacity: 0.6; margin-right: 2px; }
.conflict-strip-list li:first-child::before { content: ''; margin: 0; }
@media (max-width: 1100px) {
.conflict-strip-list { flex-direction: column; gap: 4px; }
.conflict-strip-list li::before { content: ''; margin: 0; }
}
/* Approve-Confirm-Modal-Inhalt */
.approve-conflict-box {
background: var(--danger-soft);
color: var(--danger-ink);
border: 1px solid rgba(232, 112, 79, 0.40);
border-radius: var(--r-md);
padding: 12px 14px;
font-size: 13px; line-height: 1.5;
margin-bottom: var(--s-3);
}
:root[data-theme="dark"] .page-app .approve-conflict-box {
background: rgba(232, 112, 79, 0.14);
color: #FFC9B5;
border-color: rgba(232, 112, 79, 0.35);
}
.approve-conflict-head { font-weight: 600; margin-bottom: 6px; }
.approve-conflict-box ul { padding-left: 18px; margin: 0; }
.approve-conflict-box li { margin: 2px 0; }
.req-note { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; font-style: italic; line-height: 1.4; }
.req-note--chef {
background: var(--bg-alt);
padding: 6px 10px; border-radius: 8px;
font-style: normal;
}
/* ============ Activity Stream — Premium ============ */
.chef-stream {
position: sticky;
/* Topbar 56px + 16px Atemraum — wie .sidebar/.chef-main, siehe Spacing-Standard */
top: calc(56px + env(safe-area-inset-top, 0px) + var(--s-4));
/* Damit die Stream-Card NIE höher wird als der Viewport (sonst klemmt
Mausrad-Scroll am sticky-Element). Inhalt scrollt intern. */
max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - var(--s-4) - var(--s-4));
overflow-y: auto;
/* Scroll am Stream-Ende soll nicht auf die Page durchschlagen */
overscroll-behavior: contain;
scrollbar-width: thin;
}
/* Im responsive Fallback (≤1200px) wandert der Stream unter die Liste —
dann darf er natürlich wieder volle Höhe nehmen und mit der Seite scrollen. */
@media (max-width: 1200px) {
.chef-stream {
position: static;
max-height: none;
overflow: visible;
}
}
/* Tone-Tokens (Pill-Hintergrund + Stripe-Linie pro Event-Tone) */
.stream-item {
--tone-stripe: var(--ink-3);
--tone-bg: rgba(21, 19, 14, 0.05);
--tone-ink: var(--ink-2);
--tone-border: rgba(21, 19, 14, 0.12);
position: relative;
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px 12px 18px; /* +4px links für Tone-Stripe */
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
margin-bottom: 8px;
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-edge);
overflow: hidden; /* Stripe darf nicht raushängen */
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.stream-item::before { /* linker Tone-Stripe */
content: '';
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
background: var(--tone-stripe);
border-radius: 0 100px 100px 0;
opacity: 0.85;
}
.stream-item:hover {
border-color: rgba(31, 168, 137, 0.28);
box-shadow: var(--shadow-md), 0 6px 16px -8px var(--mint-glow);
transform: translateY(-1px);
}
.stream-item--new { --tone-stripe: var(--warning); --tone-bg: var(--warning-soft); --tone-ink: var(--warning-ink); --tone-border: rgba(244, 185, 66, 0.32); }
.stream-item--warn { --tone-stripe: var(--warning); --tone-bg: var(--warning-soft); --tone-ink: var(--warning-ink); --tone-border: rgba(244, 185, 66, 0.32); }
.stream-item--success { --tone-stripe: var(--mint); --tone-bg: rgba(31, 168, 137, 0.14); --tone-ink: var(--mint-deep); --tone-border: rgba(31, 168, 137, 0.32); }
.stream-item--danger { --tone-stripe: var(--danger); --tone-bg: var(--danger-soft); --tone-ink: var(--danger-ink); --tone-border: rgba(232, 112, 79, 0.32); }
.stream-item--info { --tone-stripe: var(--info); --tone-bg: var(--info-soft); --tone-ink: var(--info); --tone-border: rgba(91, 123, 219, 0.32); }
.stream-item--neutral { --tone-stripe: var(--ink-3); --tone-bg: rgba(21, 19, 14, 0.06); --tone-ink: var(--ink-2); --tone-border: rgba(21, 19, 14, 0.14); }
/* Channel-Icon-Box (32px Rund, kanal-getönt) */
.st-icon-wrap {
width: 32px; height: 32px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: rgba(21, 19, 14, 0.06);
color: var(--ink-2);
border: 1px solid rgba(21, 19, 14, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.st-icon-wrap--telegram { background: rgba(91, 123, 219, 0.14); color: var(--info); border-color: rgba(91, 123, 219, 0.28); }
.st-icon-wrap--whatsapp_link { background: rgba(31, 168, 137, 0.14); color: var(--mint-deep);border-color: rgba(31, 168, 137, 0.28); }
.st-icon-wrap--in_app { background: rgba(21, 19, 14, 0.06); color: var(--ink-2); border-color: rgba(21, 19, 14, 0.10); }
/* Dark-Mode: Icons heller, kräftigere Tönung — sonst verschwinden sie auf dunklem Card-BG */
:root[data-theme="dark"] .st-icon-wrap--telegram {
background: rgba(140, 165, 235, 0.18);
color: #A4BAFF;
border-color: rgba(140, 165, 235, 0.38);
}
:root[data-theme="dark"] .st-icon-wrap--whatsapp_link {
background: rgba(61, 217, 182, 0.20);
color: var(--mint);
border-color: rgba(61, 217, 182, 0.40);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .st-icon-wrap--in_app {
background: rgba(255, 255, 255, 0.08);
color: var(--ink-2);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.st-body { min-width: 0; } /* damit lange Strings nicht überlaufen */
.st-head {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
/* Event-Pill (farbcodiert je Tone) */
.st-event-pill {
display: inline-flex; align-items: center;
padding: 3px 9px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
background: var(--tone-bg);
color: var(--tone-ink);
border: 1px solid var(--tone-border);
line-height: 1.4;
white-space: nowrap;
}
.st-age {
margin-left: auto;
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.st-text {
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.5;
word-break: break-word;
}
/* ---- Strukturierte Antrags-Info im Stream-Item ---- */
.st-person {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-top: 2px;
}
.st-person-name {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.st-team-chip {
display: inline-flex; align-items: center;
padding: 1px 7px;
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.5;
}
.st-team-chip--pharma { background: rgba(91, 123, 219, 0.14); color: var(--info); border: 1px solid rgba(91, 123, 219, 0.28); }
.st-team-chip--kfz { background: rgba(232, 128, 78, 0.14); color: #C5582A; border: 1px solid rgba(232, 128, 78, 0.30); }
.st-kr-chip {
display: inline-flex; align-items: center;
padding: 1px 7px;
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
background: var(--danger-soft);
color: var(--danger-ink);
border: 1px solid rgba(232, 112, 79, 0.30);
line-height: 1.5;
}
.st-period {
display: inline-flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
padding: 5px 9px;
background: rgba(21, 19, 14, 0.04);
border: 1px solid rgba(21, 19, 14, 0.06);
border-radius: 8px;
font-size: 12px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
:root[data-theme="dark"] .st-period {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
}
.st-period-icon { color: var(--ink-3); flex-shrink: 0; }
.st-period-sep { color: var(--ink-3); padding: 0 2px; }
.st-period-days {
margin-left: 4px;
padding-left: 8px;
border-left: 1px solid rgba(21, 19, 14, 0.10);
color: var(--ink-3);
font-size: 11.5px;
font-weight: 600;
}
:root[data-theme="dark"] .st-period-days {
border-left-color: rgba(255, 255, 255, 0.10);
}
.st-reason {
margin-top: 8px;
padding: 7px 10px;
background: var(--danger-soft);
border: 1px solid rgba(232, 112, 79, 0.20);
border-radius: 8px;
display: flex; gap: 8px; align-items: baseline;
font-size: 12px;
color: var(--danger-ink);
line-height: 1.4;
}
.st-reason-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.78;
flex-shrink: 0;
}
.st-reason-text { word-break: break-word; }
.st-foot {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
/* Channel-Tag (kleines Label im Footer, dezent) */
.st-channel-tag {
display: inline-flex; align-items: center;
padding: 3px 8px;
border-radius: 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
background: rgba(21, 19, 14, 0.04);
color: var(--ink-3);
border: 1px solid rgba(21, 19, 14, 0.06);
}
.st-channel-tag--telegram { color: var(--info); background: rgba(91, 123, 219, 0.08); border-color: rgba(91, 123, 219, 0.18); }
.st-channel-tag--whatsapp_link { color: var(--mint-deep); background: rgba(31, 168, 137, 0.08); border-color: rgba(31, 168, 137, 0.18); }
/* Status-Pill (Gesendet / Fehler / In Warteschlange) */
.st-status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.st-status-pill::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
}
.st-status-pill--sent { background: rgba(31, 168, 137, 0.12); color: var(--mint-deep); }
.st-status-pill--sent::before { background: var(--mint); box-shadow: 0 0 6px var(--mint-glow); }
.st-status-pill--failed { background: var(--danger-soft); color: var(--danger-ink); }
.st-status-pill--failed::before { background: var(--danger); }
.st-status-pill--queued { background: var(--warning-soft); color: var(--warning-ink); }
.st-status-pill--queued::before { background: var(--warning); }
/* WhatsApp-CTA mit Icon */
.st-cta-wa {
display: inline-flex; align-items: center; gap: 6px;
margin-left: auto;
background: var(--mint);
color: #0E0E13;
padding: 7px 12px 7px 10px;
border-radius: 100px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 4px 12px -4px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.30);
transition: background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.st-cta-wa:hover {
background: var(--mint-deep);
box-shadow: 0 8px 20px -6px var(--mint-glow-2), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
color: #0E0E13;
}
.st-cta-wa svg { flex-shrink: 0; }
/* Admin User-Drawer-Inhalt */
.user-drawer-head {
display: flex; align-items: center; gap: var(--s-3);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-3);
}
/* Resturlaubs-Übersicht: Auslastungs-Bar pro Mitarbeiter */
.uebersicht-bar {
background: var(--bg-alt);
height: 6px;
border-radius: 100px;
overflow: hidden;
min-width: 80px;
max-width: 140px;
}
.uebersicht-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--mint) 0%, var(--mint-deep) 100%);
border-radius: 100px;
transition: width var(--dur-base) var(--ease-out);
}
.uebersicht-bar-label {
font-size: 10.5px;
font-weight: 700;
color: var(--ink-3);
margin-top: 3px;
letter-spacing: 0.02em;
}
/* Krankheit */
.form-card--inline {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ============ Krankheit-Page (neue Premium-Card-Optik) ============ */
/* Zwei-Spalten-Grid: Form links, laufende Krankheits-Einträge rechts.
Auf engem Viewport untereinander, oben Form, drunter Einträge. */
.krankheit-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--s-4);
align-items: start;
}
@media (max-width: 1100px) {
.krankheit-grid { grid-template-columns: 1fr; }
}
.krankheit-form-card .filter-card-head {
border-bottom: 1px solid var(--line);
margin-bottom: 0;
padding-bottom: var(--s-4);
}
.krankheit-form-card .filter-card-head .chef-h-sub {
background: rgba(244, 185, 66, 0.08);
border-left: 3px solid var(--warning);
border-radius: var(--r-md);
padding: var(--s-3) var(--s-4);
margin-top: var(--s-3);
line-height: 1.55;
}
.krankheit-form {
padding: var(--s-5);
display: flex; flex-direction: column;
gap: var(--s-4);
}
.krankheit-form .date-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
@media (max-width: 540px) {
.krankheit-form .date-row { grid-template-columns: 1fr; }
}
.krankheit-active-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-4);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
display: flex; flex-direction: column;
gap: var(--s-3);
}
/* Grid hat bereits gap var(--s-4) — keinen zusätzlichen margin-top hier */
.krankheit-active-head {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
}
.krankheit-active-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 8px var(--mint-glow-2);
animation: mint-dot-pulse 3s ease-in-out infinite;
}
.krankheit-active-empty {
padding: var(--s-5) var(--s-4);
text-align: center;
color: var(--ink-3);
font-size: 13px;
font-style: italic;
}
.sickness-row {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 16px;
display: flex; justify-content: space-between; align-items: center;
gap: 16px; margin-bottom: 8px; flex-wrap: wrap;
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-edge);
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.sickness-row:hover {
border-color: rgba(31, 168, 137, 0.25);
box-shadow: var(--shadow-md), 0 6px 16px -8px var(--mint-glow);
}
.sickness-meta { min-width: 200px; }
.sickness-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.sickness-period { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.sickness-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* =============================================================================
PATTERN-BIBLIOTHEK — für kommende Admin/Chef-Seiten
(Users, Audit, Feiertage, Telegram, Übersicht, …)
============================================================================= */
/* ---- Section-Header: H2 + optionale Actions ---- */
.section-h {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--s-4); flex-wrap: wrap;
margin: var(--s-8) 0 var(--s-4);
}
.section-h:first-child { margin-top: 0; }
.section-h .section-h-meta { min-width: 0; flex: 1; }
.section-h .section-h-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.7px;
color: var(--ink-3); margin-bottom: 4px;
}
.section-h h2 {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.025em; line-height: 1.15;
color: var(--ink);
}
.section-h h2 em { font-style: normal; font-weight: 700; color: var(--mint); }
.section-h .section-h-sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.section-h .section-h-actions { display: flex; gap: var(--s-2); align-items: center; flex-shrink: 0; }
/* ---- Breadcrumbs ---- */
.crumbs {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 12px; color: var(--ink-3); margin-bottom: var(--s-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs > span:not(.crumb-sep) { color: var(--ink); font-weight: 600; }
.crumb-sep { opacity: 0.5; }
/* ---- Filter-Bar (Suche + Toggle-Buttons + Sort) ---- */
.filter-bar {
display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
margin-bottom: var(--s-4);
}
.filter-bar > .fb-search {
position: relative; flex: 1 1 220px; min-width: 200px;
}
.filter-bar > .fb-search input {
width: 100%;
background: var(--card);
border: 1px solid var(--line-2);
border-radius: 100px;
padding: 10px 14px 10px 38px;
font: inherit; font-size: 13.5px;
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease-out);
}
.filter-bar > .fb-search input:focus {
outline: none; border-color: var(--mint);
}
.filter-bar > .fb-search::before {
content: '';
position: absolute; left: 14px; top: 50%;
width: 14px; height: 14px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
pointer-events: none;
}
.fb-divider { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
/* Filter-Pill (kompakter als .pill, für Listenfilter) */
.fpill {
background: var(--card);
border: 1px solid var(--line-2);
color: var(--ink-2);
padding: 8px 14px; border-radius: 100px;
font: inherit; font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.fpill:hover {
border-color: rgba(31, 168, 137, 0.40);
color: var(--ink);
background: rgba(61, 217, 182, 0.06);
transform: translateY(-1px);
}
.fpill.active {
background: var(--mint); color: #0B0B11; border-color: var(--mint);
box-shadow: 0 6px 18px -6px var(--mint-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fpill.active .fpill-count { background: rgba(11, 11, 17, 0.18); color: #0B0B11; }
:root[data-theme="dark"] .page-chef .fpill.active {
background: var(--mint); color: #0B0B11; border-color: var(--mint);
}
:root[data-theme="dark"] .page-chef .fpill.active .fpill-count { background: rgba(11,11,17,0.22); color: #0B0B11; }
/* „now"-Variante: aktive Woche IST die aktuelle KW. Pulsierender Mint-Dot +
kleines Tag-Label rechts. */
.fpill--now { display: inline-flex; align-items: center; gap: 7px; }
.fpill-now-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
animation: fpillNowPulse 1.8s ease-in-out infinite;
flex: 0 0 auto;
}
.fpill-now-tag {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
background: rgba(11, 11, 17, 0.22); color: #0B0B11;
padding: 1px 6px; border-radius: 6px;
}
@keyframes fpillNowPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Jump-Now Quick-Link wenn man NICHT auf der aktuellen Woche ist */
.fpill--jump-now {
background: var(--mint-soft) !important;
color: var(--mint-deep) !important;
border-color: transparent !important;
font-weight: 600;
}
.fpill--jump-now:hover {
background: var(--mint) !important;
color: #0B0B11 !important;
}
.fpill--jump-now .fpill-now-dot { background: var(--mint-deep); animation-name: fpillJumpPulse; }
.fpill--jump-now:hover .fpill-now-dot { background: #0B0B11; }
:root[data-theme="dark"] .page-chef .fpill--jump-now { background: rgba(95,184,156,.12) !important; color: var(--mint) !important; }
:root[data-theme="dark"] .page-chef .fpill--jump-now:hover { background: var(--mint) !important; color: #0B0B11 !important; }
:root[data-theme="dark"] .page-chef .fpill--jump-now .fpill-now-dot { background: var(--mint); }
@keyframes fpillJumpPulse {
0% { box-shadow: 0 0 0 0 rgba(95, 184, 156, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(95, 184, 156, 0); }
100% { box-shadow: 0 0 0 0 rgba(95, 184, 156, 0); }
}
.fpill-count {
background: var(--bg-alt); color: var(--ink-2);
border-radius: 100px; padding: 1px 7px;
font-size: 11px; font-weight: 700;
}
/* ---- Data-Table (generisch, für Admin-Listen) ---- */
.data-table {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.dt-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: 12px 18px;
border-bottom: 1px solid var(--line);
background: var(--bg-elev);
}
.dt-toolbar h3 { font-size: 14px; font-weight: 700; color: var(--ink); }
.dt-toolbar .dt-actions { display: flex; gap: 8px; align-items: center; }
.dt-table {
width: 100%; border-collapse: collapse;
font-size: 13.5px;
}
.dt-table thead th {
text-align: left;
padding: 10px 18px;
background: var(--bg-alt);
color: var(--ink-3);
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.dt-table thead th.dt-sortable { cursor: pointer; user-select: none; }
.dt-table thead th.dt-sortable:hover { color: var(--ink); }
.dt-table thead th.dt-sortable::after { content: '↕'; opacity: 0.4; margin-left: 4px; }
.dt-table thead th.dt-sort-asc::after { content: '↑'; opacity: 1; color: var(--ink); }
.dt-table thead th.dt-sort-desc::after { content: '↓'; opacity: 1; color: var(--ink); }
/* Klickbare Sortier-Header (Link-basiert, statt JS) */
.dt-th-sortable {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink-3);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 11px; font-weight: 700;
transition: color var(--dur-fast) var(--ease-out);
}
.dt-th-sortable:hover { color: var(--mint); }
.dt-th-sortable.is-active { color: var(--ink); }
.dt-th-sortable.is-active:hover { color: var(--mint); }
.dt-th-sortable.dt-th-right { float: right; }
.dt-sort-arrow {
font-size: 9px;
color: var(--mint);
font-weight: 400;
}
.dt-sort-arrow-inactive {
color: var(--ink-4);
opacity: 0.5;
}
.dt-th-sortable:not(.is-active) .dt-sort-arrow { color: var(--ink-4); }
.dt-sort-hint {
font-size: 11.5px;
color: var(--ink-3);
margin-left: auto;
}
.dt-sort-hint strong { color: var(--ink-2); font-weight: 600; }
.dt-toolbar { gap: var(--s-3); }
.dt-table tbody td {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
color: var(--ink-2); vertical-align: middle;
}
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.dt-table tbody tr:hover {
background: linear-gradient(90deg, rgba(61, 217, 182, 0.04) 0%, var(--bg-alt) 50%);
}
.dt-table .dt-cell-strong { color: var(--ink); font-weight: 600; }
.dt-table .dt-cell-num {
font-variant-numeric: tabular-nums lining-nums;
font-family: var(--font-display);
font-weight: 600; font-size: 15px;
letter-spacing: -0.02em;
}
.dt-empty {
padding: 48px 24px; text-align: center;
color: var(--ink-3); font-size: 14px;
}
/* ============ Card-View für Mobile ============
* Bei ≤700px wird die Tabelle in einzelne Cards umgewandelt:
* - thead versteckt
* - tr → Card mit Avatar+Name in Header, 2x2 Grid für Zahlen, Bar unten
* - td bekommt sein Label aus data-label
*/
@media (max-width: 900px) {
.dt-toolbar { padding: 10px 14px; }
.dt-sort-hint { display: none; }
/* Tabelle bleibt Tabelle, scrollt horizontal — Personen-Spalte sticky links */
.data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-table thead th {
white-space: nowrap;
padding: 10px 12px;
}
.dt-table tbody td {
white-space: nowrap;
padding: 10px 12px;
}
/* Erste Spalte (Person) und erste Header-Zelle bleiben links sticky */
.dt-table thead th:first-child,
.dt-table tbody td.dt-cell-emp {
position: sticky;
left: 0;
background: var(--card);
z-index: 1;
border-right: 1px solid var(--line);
box-shadow: 4px 0 12px -8px rgba(0, 0, 0, 0.35);
min-width: 0;
}
.dt-table thead th:first-child {
background: var(--bg-alt);
z-index: 2;
}
/* Avatar etwas kleiner + Name kurz, damit die Sticky-Spalte schmal bleibt */
.dt-table tbody td.dt-cell-emp .req-avatar { width: 32px; height: 32px; font-size: 12px; }
.dt-table tbody td.dt-cell-emp .req-employee { gap: 8px; max-width: 200px; }
.dt-table tbody td.dt-cell-emp .req-name {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dt-table tbody td.dt-cell-emp .req-emp-sub {
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Bearbeiten-Button kompakt */
.dt-table tbody td.dt-cell-actions .btn-sec--sm {
padding: 6px 12px;
font-size: 12.5px;
}
}
.dt-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--bg-alt);
border-radius: 50%; margin-bottom: 12px;
color: var(--ink-3);
}
.dt-empty-icon svg { width: 22px; height: 22px; }
.dt-pagination {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px;
border-top: 1px solid var(--line);
background: var(--bg-elev);
color: var(--ink-3); font-size: 12.5px;
}
.dt-pagination .dt-pg-btns { display: flex; gap: 4px; }
.dt-pagination button {
background: var(--card); border: 1px solid var(--line-2);
color: var(--ink); padding: 6px 10px;
border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all var(--dur-fast) var(--ease-out);
}
.dt-pagination button:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); }
.dt-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---- Toggle Switch ---- */
.switch {
position: relative; display: inline-block;
width: 40px; height: 22px;
flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
position: absolute; inset: 0;
background: var(--line-3);
border-radius: 100px; cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.switch-track::before {
content: '';
position: absolute; left: 2px; top: 2px;
width: 18px; height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .switch-track { background: var(--mint); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-track {
box-shadow: 0 0 0 3px var(--focus-ring);
}
.switch input:disabled + .switch-track { opacity: 0.4; cursor: not-allowed; }
/* ---- Tag/Chip (statisch, mehrere Varianten) ---- */
.tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
background: var(--bg-alt);
color: var(--ink-2);
border-radius: 100px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.01em;
}
.tag-dot::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.tag-mint { background: var(--mint-soft); color: var(--success-ink); }
.tag-pharma { background: var(--pharma-soft); color: var(--pharma); }
.tag-kfz { background: var(--kfz-soft); color: var(--kfz-deep); }
.tag-warn { background: var(--warning-soft); color: var(--warning-ink); }
.tag-danger { background: var(--danger-soft); color: var(--danger-ink); }
.tag-ghost { background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); }
:root[data-theme="dark"] .page-app .tag { background: var(--bg-alt); color: var(--ink-2); }
:root[data-theme="dark"] .page-app .tag-mint { background: rgba(61, 217, 182, 0.16); color: var(--mint); }
:root[data-theme="dark"] .page-app .tag-pharma { background: rgba(91, 123, 219, 0.18); color: #8EA5EB; }
:root[data-theme="dark"] .page-app .tag-kfz { background: rgba(232, 128, 78, 0.18); color: #FFB088; }
:root[data-theme="dark"] .page-app .tag-warn { background: rgba(244, 185, 66, 0.18); color: var(--warning); }
:root[data-theme="dark"] .page-app .tag-danger { background: rgba(232, 112, 79, 0.18); color: #FFA38A; }
/* ---- Toast / Snackbar ---- */
.toast-stack {
position: fixed;
bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
left: 50%; transform: translateX(-50%);
z-index: var(--z-toast);
display: flex; flex-direction: column-reverse; gap: var(--s-2);
pointer-events: none;
width: min(420px, calc(100% - var(--s-6)));
}
.toast {
background: var(--ink);
color: #fff;
border-radius: var(--r-md);
padding: 12px 16px;
font-size: 13.5px; font-weight: 500;
display: flex; align-items: center; gap: 10px;
box-shadow: var(--shadow-xl);
pointer-events: auto;
animation: toast-in var(--dur-base) var(--ease-out);
}
.toast--success { background: var(--mint-deep); color: #fff; }
.toast--error { background: var(--danger); color: #fff; }
.toast--info { background: var(--info); color: #fff; }
.toast .toast-close {
background: rgba(255,255,255,0.12);
border: none; color: inherit;
width: 22px; height: 22px; border-radius: 50%;
margin-left: auto; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Drawer / Side-Panel (für User-Edit, Detail-Ansichten) ---- */
.drawer {
border: none; padding: 0;
background: var(--card);
color: var(--ink);
width: min(480px, 100%);
max-width: 100%;
height: 100vh;
height: 100dvh;
/* Browser-Default ist max-height: calc(100% - 38px) auf dialog — kappt
sonst unten 38px. Override damit Drawer wirklich bis Viewport-Boden geht. */
max-height: 100vh;
max-height: 100dvh;
margin: 0; margin-right: 0;
position: fixed;
inset: 0 0 0 auto;
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
overflow: hidden;
font-family: inherit;
}
.drawer::backdrop {
background: var(--backdrop);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.drawer[open] { animation: drawer-in var(--dur-slow) var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--line);
background: var(--bg-elev);
}
.drawer-head h3 {
font-family: var(--font-display);
font-size: 18px; font-weight: 600;
letter-spacing: -0.02em;
flex: 1;
}
.drawer-close {
background: var(--bg-alt); border: 1px solid var(--line-2);
color: var(--ink-2);
width: 32px; height: 32px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all var(--dur-fast) var(--ease-out);
}
.drawer-close:hover { background: var(--card); color: var(--ink); }
.drawer-body {
padding: var(--s-6);
overflow-y: auto;
height: calc(100% - 64px);
}
.drawer-foot {
position: sticky; bottom: 0;
padding: var(--s-4) var(--s-6) calc(var(--s-4) + env(safe-area-inset-bottom));
background: var(--card);
border-top: 1px solid var(--line);
display: flex; gap: var(--s-2); justify-content: flex-end;
}
/* ---- Confirm-Dialog (zentriert, klein) ---- */
.confirm {
border: none; padding: 0;
background: var(--card);
color: var(--ink);
width: min(420px, calc(100% - var(--s-6)));
border-radius: var(--r-xl);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
font-family: inherit;
}
.confirm::backdrop {
background: var(--backdrop);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.confirm[open] { animation: confirm-in var(--dur-base) var(--ease-out); }
@keyframes confirm-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.confirm-body { padding: var(--s-6) var(--s-6) var(--s-4); }
.confirm-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--danger-soft); color: var(--danger-ink);
margin-bottom: var(--s-3);
}
.confirm-icon--warn { background: var(--warning-soft); color: var(--warning-ink); }
.confirm-icon--info { background: var(--info-soft); color: var(--info); }
.confirm-icon svg { width: 22px; height: 22px; }
.confirm h3 {
font-family: var(--font-display); font-size: 20px; font-weight: 600;
letter-spacing: -0.025em; margin-bottom: 6px;
}
.confirm p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.confirm-foot {
padding: var(--s-3) var(--s-6) var(--s-5);
display: flex; gap: var(--s-2); justify-content: flex-end;
}
/* ---- Form-Group (konsistent Light + Dark, für alle Formulare) ---- */
.fg {
display: flex; flex-direction: column;
gap: 6px;
margin-bottom: var(--s-4);
}
.fg-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--ink-3);
}
.fg-label .fg-req { color: var(--danger); margin-left: 2px; }
.fg-label .fg-opt { color: var(--ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.fg-input,
.fg-select,
.fg-textarea {
width: 100%;
background: var(--card);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 12px 14px;
font: inherit; font-size: 14px;
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.fg-input:hover:not(:disabled),
.fg-select:hover:not(:disabled),
.fg-textarea:hover:not(:disabled) { border-color: var(--line-3, var(--ink-3)); }
.fg-input:focus, .fg-select:focus, .fg-textarea:focus {
outline: none;
border-color: var(--mint);
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Custom-Select: native Pfeil weg, eigener Chevron, höheres Padding-Right */
select.fg-input,
.fg-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 42px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px 14px;
font-weight: 500;
}
select.fg-input::-ms-expand,
.fg-select::-ms-expand { display: none; }
select.fg-input:hover,
.fg-select:hover { background-image: url("data:image/svg+xml;utf8,"); }
select.fg-input:focus,
.fg-select:focus { background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="dark"] select.fg-input,
:root[data-theme="dark"] .fg-select { background-image: url("data:image/svg+xml;utf8,"); }
select.fg-input option,
.fg-select option { background: var(--card); color: var(--ink); }
.fg-textarea { resize: vertical; min-height: 80px; }
.fg-hint { font-size: 12px; color: var(--ink-3); }
.fg-error { font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 4px; }
.fg-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
@media (max-width: 520px) { .fg-row { grid-template-columns: 1fr; } }
/* ---- KBD (Tastatur-Shortcut visualisieren) ---- */
.kbd {
display: inline-block;
background: var(--bg-alt);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 6px;
padding: 1px 6px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
color: var(--ink-2);
}
/* ---- Skeleton (Loading-Placeholder) ---- */
.skel {
display: block;
background: linear-gradient(90deg,
var(--bg-alt) 0%,
var(--line-2) 50%,
var(--bg-alt) 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
border-radius: var(--r-sm);
color: transparent;
user-select: none;
}
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- Divider mit Label ---- */
.divider-label {
display: flex; align-items: center; gap: var(--s-3);
color: var(--ink-3); font-size: 11px; font-weight: 700;
letter-spacing: 0.7px; text-transform: uppercase;
margin: var(--s-6) 0;
}
.divider-label::before, .divider-label::after {
content: ''; flex: 1; height: 1px; background: var(--line-2);
}
/* ---- Card-Surface (generisches Card-Element) ---- */
.card-surface {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.card-surface--padless { padding: 0; }
.card-surface--elev { box-shadow: var(--shadow-md); }
/* ---- Avatar (skalierbar, mehrere Größen) ---- */
.av {
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-alt);
color: var(--ink-2);
font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
line-height: 1;
}
.av--sm { width: 28px; height: 28px; font-size: 11px; }
.av--md { width: 36px; height: 36px; font-size: 12px; }
.av--lg { width: 44px; height: 44px; font-size: 14px; }
.av--xl { width: 64px; height: 64px; font-size: 18px; }
.av--mint { background: var(--mint); color: #0B0B11; }
.av--pharma { background: linear-gradient(135deg, var(--pharma), var(--pharma-deep)); color: #fff; }
.av--kfz { background: linear-gradient(135deg, var(--kfz), var(--kfz-deep)); color: #fff; }
.av--ink { background: var(--ink); color: #fff; }
.av-dot {
position: absolute; right: -2px; top: -2px;
width: 12px; height: 12px;
border-radius: 50%; background: var(--mint);
border: 2px solid var(--card);
}
.av-wrap { position: relative; display: inline-block; }
/* ---- Inline Help-Text (Hint mit Icon) ---- */
.help-inline {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-alt);
color: var(--ink-2);
padding: 8px 12px; border-radius: var(--r-sm);
font-size: 12.5px; line-height: 1.45;
}
.help-inline svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
/* =============================================================================
Premium-Polish kleine Helfer
============================================================================= */
/* Bildtrick: Avatar-Edit-Badge im Profil größer für Mobile-Touch */
.profile-avatar-edit { width: 36px; height: 36px; }
/* Hairline-Border-Klasse: 0.5px wo möglich */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.hairline { border-width: 0.5px !important; }
}
/* Print: Browser-Nav weg, Cards ohne Schatten */
@media print {
.bnav, .sidebar, .filter-bar, .dt-toolbar, .dt-pagination { display: none !important; }
.balance, .stat-card, .vacation, .req-table, .data-table { box-shadow: none !important; border: 1px solid #ccc !important; }
}
/* ============================================================================
TOURENPLANUNG (Phase 1 — Mockup)
============================================================================ */
/* "Bald"-Pill für Menüpunkt + Buttons */
.sb-soon-badge,
.soon-pill {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
background: var(--mint-soft);
color: var(--mint-deep);
font-size: 9px; font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
vertical-align: middle;
}
:root[data-theme="dark"] .page-chef .sb-soon-badge,
:root[data-theme="dark"] .page-chef .soon-pill { color: var(--mint); }
/* Beta-Pill mit Zahnrad-Icon (z.B. neben Tourenplanung) */
.sb-beta-pill {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 2px 7px 2px 5px;
background: rgba(244, 185, 66, 0.16);
color: var(--warning-ink, #B8772A);
border: 1px solid rgba(244, 185, 66, 0.45);
border-radius: 999px;
font-size: 9px; font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
flex-shrink: 0;
}
.sb-beta-pill svg {
width: 10px; height: 10px;
animation: beta-gear-spin 8s linear infinite;
}
:root[data-theme="dark"] .page-chef .sb-beta-pill { color: var(--warning, #F4B942); }
@media (prefers-reduced-motion: reduce) {
.sb-beta-pill svg { animation: none; }
}
@keyframes beta-gear-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Banner "In Entwicklung" */
.bald-banner {
display: flex; align-items: flex-start; gap: var(--s-4);
background: var(--card);
background-image:
radial-gradient(120% 80% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%),
var(--card-shine);
border: 1px solid var(--line);
border-left: 3px solid var(--mint);
border-radius: var(--r-lg);
padding: var(--s-4) var(--s-5);
margin: var(--s-3) 0 var(--s-5);
box-shadow: var(--shadow-md), 0 8px 24px -10px var(--mint-glow);
}
.bald-banner-icon {
/* Clean & flat — identisch zur Banner-Family-Icon-Optik. */
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(61, 217, 182, 0.18);
color: var(--mint);
display: inline-flex; align-items: center; justify-content: center;
}
.bald-banner-icon svg { width: 18px; height: 18px; }
.bald-banner strong { display: block; color: var(--mint-deep); margin-bottom: 2px; }
.bald-banner p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
:root[data-theme="dark"] .page-chef .bald-banner strong { color: var(--mint); }
/* Touren-Pool */
.tour-pool-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5);
margin-bottom: var(--s-5);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.tour-pool-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--s-3);
flex-wrap: wrap; gap: var(--s-2);
}
.tour-pool-head .section-h-label { margin-right: auto; }
.tour-pool-hint { font-size: 12px; color: var(--ink-3); font-style: italic; }
/* "Woche zurücksetzen"-Button: rechts im Pool-Head, danger-Tönung */
.tour-pool-reset {
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.tour-pool-reset[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.tour-pool-reset-count {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
margin-left: 2px;
background: var(--danger, #E8645F);
color: #fff;
border-radius: 100px;
font-size: 10.5px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.tour-pool {
display: flex; flex-wrap: wrap; gap: 6px;
}
.tour-chip {
display: inline-flex; align-items: center; justify-content: center;
min-width: 50px;
padding: 6px 10px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--font-display);
font-size: 13px; font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
cursor: not-allowed;
user-select: none;
transition: border-color var(--dur-fast) var(--ease-out);
}
.tour-chip:hover { border-color: var(--mint); }
.tour-chip--used {
opacity: 0.55;
background: var(--card);
}
.tour-chip--used:hover { opacity: 1; }
.tour-chip-count {
display: inline-block;
margin-left: 5px;
padding: 1px 5px;
background: var(--mint);
color: #fff;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
vertical-align: middle;
letter-spacing: 0;
}
/* Heute-Spalte hervorheben */
.tour-table thead th.tour-th-today {
background: var(--mint-soft) !important;
color: var(--mint-deep) !important;
}
:root[data-theme="dark"] .page-chef .tour-table thead th.tour-th-today { color: var(--mint) !important; }
.tour-table thead th.tour-th-today .tour-th-date { color: var(--mint-deep); }
:root[data-theme="dark"] .page-chef .tour-table thead th.tour-th-today .tour-th-date { color: var(--mint); }
.tour-th-today-dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
margin-left: 4px;
vertical-align: middle;
box-shadow: 0 0 6px rgba(95, 184, 156, 0.6);
}
.tour-cell.tour-cell--today { background: rgba(95, 184, 156, 0.06); }
:root[data-theme="dark"] .page-chef .tour-cell.tour-cell--today { background: rgba(61, 217, 182, 0.06); }
.tour-cell.tour-cell--today.tour-cell--weekend { background: rgba(95, 184, 156, 0.08); }
/* Inaktive Tour-Zeile im Admin */
.tour-row--inactive td { opacity: 0.55; }
.tour-row--inactive td:last-child { opacity: 1; }
/* Admin: Toggle-Switch für is_special pro Tour */
.tour-special-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 8px 4px 6px;
background: transparent;
border: 1px solid var(--line);
border-radius: 100px;
color: var(--ink-3);
font: inherit;
font-size: 12px; font-weight: 500;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.tour-special-toggle:hover { border-color: var(--pharma); }
.tour-special-toggle.is-on {
background: var(--pharma-soft);
border-color: var(--pharma);
color: var(--pharma);
}
.tour-special-toggle-track {
position: relative;
width: 26px; height: 14px;
background: var(--line-2);
border-radius: 100px;
transition: background var(--dur-fast) var(--ease-out);
}
.tour-special-toggle-thumb {
position: absolute;
top: 1px; left: 1px;
width: 12px; height: 12px;
background: var(--card);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
transition: transform var(--dur-fast) var(--ease-out);
}
.tour-special-toggle.is-on .tour-special-toggle-track { background: var(--pharma); }
.tour-special-toggle.is-on .tour-special-toggle-thumb { transform: translateX(12px); background: #fff; }
/* fpill Count-Badge */
.fpill-count {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: var(--bg-alt);
color: var(--ink-3);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
}
.fpill.active .fpill-count { background: rgba(255,255,255,0.2); color: inherit; }
/* Status-Pill OK/OFF */
.status-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.status--ok { background: var(--mint-soft); color: var(--mint-deep); }
.status--off { background: var(--bg-alt); color: var(--ink-3); }
:root[data-theme="dark"] .page-chef .status--ok { color: var(--mint); }
/* Inline Input für Touren-Admin */
.fg-input--inline { padding: 6px 8px; font-size: 13px; height: 32px; }
/* Wochen-Tabelle */
.tour-table-wrap {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: var(--s-5);
}
.tour-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tour-table {
width: 100%;
border-collapse: separate; border-spacing: 0;
font-size: 12.5px;
min-width: 900px;
}
.tour-table thead th {
position: sticky; top: 0;
background: var(--bg-elev);
padding: 8px 6px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
text-align: center;
font-weight: 600;
color: var(--ink-2);
z-index: 1;
}
.tour-table thead th:last-child { border-right: none; }
.tour-table thead th.tour-th-emp {
text-align: left;
background: var(--bg-alt);
min-width: 180px;
position: sticky; left: 0; z-index: 2;
}
.tour-table thead th.tour-th-weekend {
background: linear-gradient(0deg, var(--bg-alt), var(--bg-elev));
color: var(--ink-3);
}
.tour-th-day { font-size: 13px; font-weight: 700; color: var(--ink); }
.tour-th-date { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tour-th-note { font-size: 10px; color: var(--mint-deep); font-weight: 600; margin-top: 4px; line-height: 1.3; }
:root[data-theme="dark"] .page-chef .tour-th-note { color: var(--mint); }
/* Body-Cells */
.tour-table tbody td {
padding: 8px 6px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
vertical-align: middle;
}
.tour-table tbody td:last-child { border-right: none; }
.tour-table tbody tr:last-child td { border-bottom: none; }
.tour-table tbody td.tour-td-emp {
background: var(--bg-elev);
position: sticky; left: 0;
min-width: 180px;
border-right: 1px solid var(--line);
}
.tour-emp-name { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tour-emp-fav-link {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
color: var(--ink-3);
text-decoration: none;
border-radius: 50%;
margin-left: auto;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tour-emp-fav-link svg { width: 14px; height: 14px; }
.tour-emp-fav-link:hover { color: var(--mint); background: var(--mint-soft); }
.tour-emp-veh { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tour-emp-sub { color: var(--mint-deep); font-weight: 600; }
:root[data-theme="dark"] .page-chef .tour-emp-sub { color: var(--mint); }
/* Inline-Edit-Variante: ganze Veh-Anzeige ist ein klickbarer Button.
Pen-Icon erscheint beim Hover, „+ Fahrzeug" als gestrichelter Add-Slot
wenn noch kein Fahrzeug gesetzt. */
button.tour-emp-veh {
appearance: none; background: transparent; border: 0; padding: 1px 6px 1px 0; margin-top: 2px;
text-align: left; color: var(--ink-3); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
border-radius: 6px; transition: background .12s ease, color .12s ease;
font: inherit; font-size: 11px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
/* =================================================================
Vehicle-Edit-Sheet — Premium Plate-Look
================================================================= */
.sheet--veh { max-width: 480px; padding: 26px 26px 22px; }
/* Head: Avatar links + Eyebrow/Name/Meta rechts (gleicher Look wie .user-card-head) */
.sheet--veh .veh-sheet-head {
display: flex; align-items: center; gap: 16px;
padding-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid var(--line, var(--line-1));
}
.sheet--veh .veh-sheet-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; font-size: 22px; }
.sheet--veh .veh-sheet-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet--veh .veh-sheet-head-text { min-width: 0; flex: 1; }
.sheet--veh .veh-sheet-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--mint-deep);
background: var(--mint-soft);
padding: 3px 9px; border-radius: 999px;
margin-bottom: 7px;
}
:root[data-theme="dark"] .sheet--veh .veh-sheet-eyebrow { color: var(--mint); background: rgba(95,184,156,0.12); }
.sheet--veh .user-card-name { font-size: 22px; }
/* License-Plate Live Preview */
.veh-plate {
display: flex; align-items: stretch; height: 58px;
background: #FFFFFF;
border: 2.5px solid #15130E;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 10px 28px -12px rgba(0,0,0,.45);
margin: 0 auto 22px;
max-width: 340px;
transition: opacity .15s ease, transform .15s ease;
position: relative;
}
.veh-plate[data-empty="1"] { opacity: .42; }
.veh-plate[data-empty="1"] .veh-plate-text {
font-family: var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
font-weight: 600; font-size: 13px; letter-spacing: .18em; color: #6e6a60;
}
:root[data-theme="dark"] .veh-plate { box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04); }
.veh-plate-eu {
width: 30px;
background: linear-gradient(180deg, #003399 0%, #0033AA 100%);
color: #FFCC00;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
padding: 5px 0 4px; border-right: 1.5px solid #15130E;
flex: 0 0 auto;
}
.veh-plate-stars { font-size: 5.5px; line-height: 1; letter-spacing: .5px; font-weight: 700; text-align: center; }
.veh-plate-d { color: #FFFFFF; font-weight: 800; font-size: 13px; letter-spacing: .02em; line-height: 1; font-family: ui-sans-serif, system-ui, sans-serif; }
.veh-plate-text {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; justify-content: center;
color: #15130E;
font-family: 'EuroPlate', 'FE-Schrift', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 26px;
letter-spacing: .03em;
padding: 0 12px;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Form Block */
.veh-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.veh-fg { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.veh-fg-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-2); display: flex; align-items: center; gap: 6px;
}
.veh-fg-hint { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
.veh-fg-input {
appearance: none; width: 100%;
background: var(--bg-alt);
border: 1.5px solid transparent;
border-radius: 12px;
padding: 12px 14px;
font: 500 14.5px/1.3 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
color: var(--ink);
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.veh-fg-input:hover { background: var(--bg); border-color: var(--line-2); }
.veh-fg-input:focus { outline: none; border-color: var(--mint); background: var(--bg); box-shadow: 0 0 0 4px var(--mint-soft); }
.veh-fg-input--plate {
font-family: 'EuroPlate', 'Arial Black', sans-serif;
font-size: 19px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.veh-fg-input::placeholder { color: var(--ink-3); font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--ff-ui, 'Inter Tight', system-ui, sans-serif); }
.veh-fg-input--plate::placeholder { font-family: 'EuroPlate', 'Arial Black', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .35; }
/* Action Row */
.veh-sheet-actions {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 4px; padding-top: 14px;
border-top: 1px solid var(--line-1);
}
.veh-sheet-actions-right { display: flex; gap: 8px; }
.veh-btn {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
border: 1.5px solid transparent;
border-radius: 12px;
padding: 10px 18px;
font: 600 13.5px/1 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.veh-btn:active { transform: translateY(1px); }
.veh-btn--ghost {
background: transparent; color: var(--ink-2); border-color: var(--line-2);
}
.veh-btn--ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--line-3); }
.veh-btn--primary {
background: var(--mint); color: #0E0E13; border-color: var(--mint);
box-shadow: 0 6px 18px -8px rgba(95,184,156,.55);
}
.veh-btn--primary:hover { background: var(--mint-deep); border-color: var(--mint-deep); box-shadow: 0 8px 22px -8px rgba(95,184,156,.7); }
.veh-btn[disabled] { opacity: .5; cursor: not-allowed; }
.veh-remove-btn {
appearance: none; border: 0; background: transparent; cursor: pointer;
color: var(--ink-3); font-size: 12.5px; font-weight: 600;
display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px;
border-radius: 10px; transition: color .15s ease, background .15s ease;
}
.veh-remove-btn:hover { color: var(--danger, #D5573B); background: rgba(213,87,59,.08); }
.veh-remove-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Mobile */
@media (max-width: 560px) {
.sheet--veh { padding: 22px 18px 18px; }
.veh-plate { max-width: 100%; height: 52px; }
.veh-plate-text { font-size: 24px; }
.veh-sheet-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.veh-sheet-actions-right { width: 100%; }
.veh-sheet-actions-right .veh-btn { flex: 1; justify-content: center; }
.veh-remove-btn { justify-content: center; width: 100%; }
}
button.tour-emp-veh:hover { background: var(--mint-soft); color: var(--mint-deep); }
.tour-emp-veh-pen { opacity: 0; transition: opacity .12s ease; flex: 0 0 auto; }
button.tour-emp-veh:hover .tour-emp-veh-pen { opacity: 1; }
.tour-emp-veh--add {
color: var(--ink-3); font-weight: 500;
border: 1px dashed rgba(21,19,14,.18); padding: 2px 8px; border-radius: 8px;
opacity: .65;
}
.tour-emp-veh--add:hover { opacity: 1; border-color: var(--mint); background: var(--mint-soft); color: var(--mint-deep); }
:root[data-theme="dark"] .page-chef .tour-emp-veh--add { border-color: rgba(255,255,255,.12); }
@media print { .tour-emp-veh-pen { display: none !important; } }
/* Slot-Grid pro Tag-Zelle: 2x2 */
.tour-cell { position: relative; min-width: 95px; }
.tour-cell--weekend { background: rgba(0, 0, 0, 0.025); }
:root[data-theme="dark"] .page-chef .tour-cell--weekend { background: rgba(255, 255, 255, 0.025); }
.tour-cell--blocked .tour-slots { opacity: 0.25; pointer-events: none; }
.tour-cell-overlay {
position: absolute;
inset: 4px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-alt);
color: var(--ink-3);
font-weight: 700; font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--r-sm);
z-index: 1;
}
.tour-cell-overlay--sick {
background: var(--sick-soft);
color: var(--sick);
}
.tour-cell-overlay--leave {
background: var(--warning-soft);
color: var(--warning-ink);
}
:root[data-theme="dark"] .page-chef .tour-cell-overlay--leave { color: var(--warning); }
.tour-slots {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
min-height: 56px;
}
.tour-slot {
display: flex; align-items: center; justify-content: center;
min-height: 24px;
background: transparent;
border: 1px dashed var(--line-2);
border-radius: 4px;
font-family: var(--font-display);
font-size: 12px; font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
cursor: pointer;
font: inherit; padding: 2px 4px;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.tour-slot:hover:not(:disabled) { border-color: var(--mint); border-style: solid; }
.tour-slot:active:not(:disabled) { transform: scale(0.96); }
.tour-slot:disabled { cursor: not-allowed; opacity: 0.4; }
.tour-slot--filled {
background: var(--bg-alt);
border: 1px solid var(--line);
color: var(--ink);
font-size: 11.5px;
}
.tour-slot--blue {
background: var(--pharma-soft);
border-color: var(--pharma);
color: var(--pharma);
}
/* ---- Picker-Sheet ---- */
.tour-picker-current {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
background: var(--bg-alt);
border-radius: var(--r-sm);
padding: 10px 14px;
margin-bottom: var(--s-4);
font-size: 13px;
}
.tp-current-label { color: var(--ink-3); font-size: 12px; }
.tp-current-chip {
font-family: var(--font-display);
font-size: 16px; font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.tp-section-label {
font-size: 11px; font-weight: 700;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: var(--s-3) 0 8px;
}
.tour-picker-chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.tour-chip--picker {
cursor: pointer;
border-width: 1px;
}
.tour-chip--picker:hover { border-color: var(--mint); color: var(--mint); }
.tour-chip--picker.active {
background: var(--mint); color: #fff; border-color: var(--mint);
}
.tour-chip--none { font-style: italic; }
.tour-picker-actions {
display: flex; flex-direction: column; gap: 6px;
margin-top: var(--s-4);
}
/* ---- Notiz-Saved-Flash ---- */
.tour-daily-note-input { transition: border-color var(--dur-fast) var(--ease-out); }
.tour-daily-note-input.saved { border-color: var(--mint); }
/* ---- Print-Layout für Tourenplanung ---- */
/* Print-only / Screen-only Helper */
.print-only { display: none; }
@media print {
@page {
size: A4 landscape;
margin: 8mm 10mm;
}
html, body, .page-chef { background: #fff !important; color: #000 !important; }
/* === Alles unterdrücken, was nicht in den PDF gehört === */
.sidebar, .cnav-top, .cnav-bottom, .bnav,
.filter-card, .filter-card--with-head,
.tour-conflict-banner,
.tour-pool-card, .tour-roadmap, .tour-table-legend,
.tour-emp-fav-link, .tour-th-today-dot,
.flash, .decision-banner, .overlap-block,
dialog, .notif-bell, .pwa-opt-in-banner,
[role="status"] { display: none !important; }
/* "Heute"-Spalten-Hervorhebung im PDF neutralisieren — irrelevant fürs Wochenblatt.
Selector muss die Screen-Variante (.tour-table thead th.tour-th-today) übertreffen. */
.tour-cell.tour-cell--today { background: #fff !important; }
.tour-table thead th.tour-th-today { background: #f0f0f0 !important; color: #000 !important; }
.tour-table thead th.tour-th-today .tour-th-date { color: #333 !important; }
/* === Reine Druck-Header-Block (statt Filter-Card) === */
.print-only { display: block !important; }
.print-header {
margin: 0 0 5mm;
padding-bottom: 3mm;
border-bottom: 1pt solid #444;
font-family: var(--font-display);
}
.print-header-title {
font-size: 16pt;
font-weight: 700;
color: #000;
letter-spacing: -0.01em;
}
.print-header-week {
margin-top: 2mm;
font-size: 11pt;
font-weight: 500;
color: #444;
font-variant-numeric: tabular-nums;
}
/* === Layout-Container neutralisieren === */
.chef-layout { display: block !important; }
.chef-main { padding: 0 !important; max-width: none !important; width: 100%; }
/* === Tabellen-Card "naked" drucken === */
.tour-table-wrap { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.tour-table-scroll { overflow: visible !important; }
.tour-table { font-size: 9pt; min-width: 0 !important; width: 100%; page-break-inside: avoid; border-collapse: collapse !important; }
.tour-table thead th { background: #f0f0f0 !important; color: #000 !important; border: 0.5pt solid #999 !important; position: static !important; padding: 2.5mm 1.5mm !important; }
/* Wochentag + Datum innerhalb der Header-Zellen explizit auf Druckschwarz setzen,
da die Screen-Vars (--ink, --ink-3) in Dark-Mode hell sind und der th-Color
von inneren divs überschrieben wird. */
.tour-table thead th .tour-th-day { color: #000 !important; font-weight: 700 !important; font-size: 10.5pt !important; }
.tour-table thead th .tour-th-date { color: #333 !important; font-weight: 500 !important; font-size: 9pt !important; }
.tour-table thead th.tour-th-emp { color: #000 !important; font-size: 10pt !important; font-weight: 700 !important; }
.tour-table tbody td { border: 0.5pt solid #bbb !important; vertical-align: top; padding: 1.5mm 1mm !important; }
.tour-table tbody td.tour-td-emp { background: #f7f7f7 !important; position: static !important; min-width: 0 !important; }
.tour-emp-name { color: #000 !important; font-size: 9.5pt !important; font-weight: 700 !important; }
.tour-emp-veh, .tour-emp-sub { color: #555 !important; font-size: 8pt !important; }
/* Slots: weiße Buttons mit dünnem Border */
.tour-slot { border: 0.5pt solid #ccc !important; color: #000 !important; min-height: 14pt; background: #fff !important; font-size: 9pt; }
.tour-slot--filled { background: #f0f0f0 !important; }
.tour-slot--blue { background: #DDE5F8 !important; color: #3D5DBD !important; border-color: #B5C8EE !important; }
.tour-slot--conflict { background: #FBE2E0 !important; color: #B33A35 !important; border-color: #E8645F !important; box-shadow: none !important; animation: none !important; }
.tour-slot:disabled, .tour-slots[aria-hidden="true"] .tour-slot { background: #fafafa !important; }
/* Overlays */
.tour-cell-overlay { background: rgba(0,0,0,0.05) !important; color: #555 !important; }
.tour-cell-overlay--sick { background: rgba(0,0,0,0.12) !important; color: #222 !important; }
.tour-cell-overlay--leave { background: rgba(244, 185, 66, 0.25) !important; color: #7A5715 !important; }
/* Notiz-Zeile (Werkstatt): leere Notizen sehen aus wie freie Linien */
.tour-cell--note { padding: 1mm !important; }
.tour-cell-note { border: 0.5pt solid #ccc !important; background: #fff !important; color: #000 !important; min-height: 12mm !important; padding: 1.5mm !important; font-size: 8.5pt !important; }
/* Footer-Disclaimer am Ende der Tabelle */
.tour-table-wrap::after {
content: "Kurzfristige Änderungen sind möglich";
display: block;
text-align: center;
font-size: 9pt;
color: #B8551F;
font-weight: 600;
padding-top: 3mm;
}
}
/* ---- Drag & Drop ---- */
.tour-chip[draggable="true"] { cursor: grab; }
.tour-chip[draggable="true"]:active { cursor: grabbing; }
.tour-slot[draggable="true"] { cursor: grab; }
.tour-slot[draggable="true"]:active { cursor: grabbing; }
.tour-chip.dragging,
.tour-slot.dragging { opacity: 0.45; transform: scale(0.95); }
.tour-slot.drop-target {
border-style: solid !important;
border-color: var(--mint) !important;
background: var(--mint-soft) !important;
color: var(--mint-deep);
}
:root[data-theme="dark"] .page-chef .tour-slot.drop-target { color: var(--mint); }
.tour-pool.drop-trash {
background: var(--sick-soft);
border-radius: var(--r-md);
outline: 2px dashed var(--sick);
outline-offset: -4px;
}
/* Werkstatt-Zeile */
.tour-row--workshop .tour-td-emp { background: var(--warning-soft); }
.tour-row--workshop .tour-emp-name { color: var(--warning-ink); }
:root[data-theme="dark"] .page-chef .tour-row--workshop .tour-td-emp { background: rgba(244, 185, 66, 0.16); }
:root[data-theme="dark"] .page-chef .tour-row--workshop .tour-emp-name { color: var(--warning); }
.tour-workshop-note {
font-size: 12px;
color: var(--warning-ink);
text-align: center;
font-weight: 600;
line-height: 1.3;
}
:root[data-theme="dark"] .page-chef .tour-workshop-note { color: var(--warning); }
/* Legende — gruppiert in Slot-Stile · Status · Tabelle */
.tour-table-legend {
display: flex; flex-wrap: wrap; gap: 18px;
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg-elev);
font-size: 12px;
color: var(--ink-2);
}
.tour-table-legend--grouped {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 12px 24px;
align-items: start;
padding: 14px 18px;
}
.tour-table-legend--grouped .lg-group {
display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.tour-table-legend--grouped .lg-group + .lg-group {
border-left: 1px solid var(--line);
padding-left: 24px;
}
.tour-table-legend .lg-group-title {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
}
.tour-table-legend .lg-group-items {
display: flex; flex-direction: column; gap: 6px;
}
.tour-table-legend .lg {
display: inline-flex; align-items: center; gap: 8px;
}
.tour-table-legend .lg-hint {
color: var(--ink-3);
font-size: 11.5px;
}
.tour-table-legend .lg-hint code {
background: var(--bg-alt);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
}
.tour-table-legend .lg-example--today {
background: var(--bg-alt);
border: 1px solid var(--mint);
color: var(--ink);
position: relative;
padding-right: 18px;
}
.tour-table-legend .lg-today-dot {
position: absolute;
top: 50%;
right: 6px;
width: 5px; height: 5px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--mint-glow-2);
transform: translateY(-50%);
}
/* Mobile: Legende stapelt sich, Dividers raus */
@media (max-width: 720px) {
.tour-table-legend--grouped {
grid-template-columns: 1fr;
gap: 12px;
}
.tour-table-legend--grouped .lg-group + .lg-group {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--line);
padding-top: 12px;
}
}
.tour-table-legend .lg-example {
pointer-events: none;
/* Slot-Beispiele kompakt halten */
min-width: 38px;
padding: 3px 7px;
font-size: 11px;
line-height: 1.1;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tour-table-legend .tour-cell-overlay.lg-example {
/* Overlay normalerweise position:absolute — in der Legende inline. */
position: static;
inset: auto;
transform: none;
padding: 3px 8px;
font-size: 10.5px;
border-radius: 100px;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tour-table-legend .lg-example--weekend {
background: var(--bg-alt);
color: var(--ink-3);
border: 1px solid var(--line);
}
:root[data-theme="dark"] .page-chef .tour-table-legend .lg-example--weekend {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
/* Doppelplanungs-Banner über der Tabelle */
.tour-conflict-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
margin-bottom: var(--s-4);
background: var(--danger-soft, rgba(232, 100, 95, 0.10));
border: 1px solid var(--danger, #E8645F);
border-radius: var(--r-lg);
color: var(--ink);
font-size: 13px;
line-height: 1.45;
}
.tour-conflict-banner > svg {
flex-shrink: 0;
color: var(--danger, #E8645F);
margin-top: 2px;
}
.tour-conflict-banner strong { color: var(--danger, #E8645F); }
.tour-conflict-list {
margin-top: 4px;
color: var(--ink-2);
font-size: 12.5px;
}
/* Slot mit Doppelplanungs-Konflikt */
.tour-slot--conflict {
background: var(--danger-soft, rgba(232, 100, 95, 0.16)) !important;
border-color: var(--danger, #E8645F) !important;
color: var(--danger, #E8645F) !important;
box-shadow: 0 0 0 1px var(--danger, #E8645F) inset;
animation: slot-conflict-pulse 2.4s ease-in-out infinite;
}
:root[data-theme="dark"] .page-chef .tour-slot--conflict {
background: rgba(232, 100, 95, 0.22) !important;
}
@keyframes slot-conflict-pulse {
0%, 100% { box-shadow: 0 0 0 1px var(--danger, #E8645F) inset; }
50% { box-shadow: 0 0 0 2px var(--danger, #E8645F) inset, 0 0 8px var(--danger, #E8645F); }
}
@media (prefers-reduced-motion: reduce) {
.tour-slot--conflict { animation: none; }
}
/* Werkstatt-Zeile: Inline-Notizen statt separater "Notizen pro Tag"-Card */
.tour-cell--note { padding: 4px !important; vertical-align: top; }
.tour-cell-note {
width: 100%;
min-height: 48px;
height: 100%;
padding: 6px 8px;
background: transparent;
border: 1px dashed var(--line);
border-radius: var(--r-sm);
font: inherit; font-size: 12px;
line-height: 1.35;
color: var(--ink);
resize: none;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.tour-cell-note::placeholder { color: var(--ink-4); }
.tour-cell-note:hover { border-color: var(--line-2); background: rgba(244, 185, 66, 0.05); }
.tour-cell-note:focus {
outline: none;
border-style: solid;
border-color: var(--warning);
background: rgba(244, 185, 66, 0.10);
}
.tour-cell-note.saved { border-color: var(--mint); }
:root[data-theme="dark"] .page-chef .tour-cell-note:hover { background: rgba(244, 185, 66, 0.08); }
:root[data-theme="dark"] .page-chef .tour-cell-note:focus { background: rgba(244, 185, 66, 0.14); }
/* Roadmap */
.tour-roadmap {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5);
}
.tour-roadmap-list {
list-style: none; padding: 0; margin: 0;
counter-reset: phase;
}
.tour-roadmap-list li {
position: relative;
padding: 10px 12px 10px 44px;
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: 13.5px;
line-height: 1.45;
counter-increment: phase;
}
.tour-roadmap-list li::before {
content: counter(phase);
position: absolute;
left: 10px; top: 10px;
width: 24px; height: 24px;
background: var(--mint-soft);
color: var(--mint-deep);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
}
:root[data-theme="dark"] .page-chef .tour-roadmap-list li::before { color: var(--mint); }
.tour-roadmap-list li + li { margin-top: 4px; }
.tour-roadmap-list strong { color: var(--ink); margin-right: 6px; }
/* Mobile: Pool kompakter */
@media (max-width: 700px) {
.tour-pool { gap: 4px; }
.tour-chip { min-width: 44px; padding: 5px 8px; font-size: 12px; }
.tour-pool-head .section-h-label { font-size: 11px; }
.tour-pool-hint { display: none; }
.bald-banner { padding: var(--s-3) var(--s-4); }
.bald-banner-icon { width: 30px; height: 30px; }
.bald-banner-icon svg { width: 15px; height: 15px; }
.bald-banner p { font-size: 12.5px; }
}
/* ============ Signal-Briefing-Seite (/chef/signal) ============ */
.signal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
margin-top: var(--s-4);
}
@media (max-width: 900px) {
.signal-grid { grid-template-columns: 1fr; }
}
.signal-card {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.signal-card--span { grid-column: 1 / -1; }
.signal-card--rec {
grid-column: 1 / -1;
border-left: 3px solid var(--mint);
background:
radial-gradient(140% 90% at 100% 0%, rgba(61, 217, 182, 0.10) 0%, transparent 55%),
var(--card);
}
.signal-card-head {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: var(--s-3);
}
.signal-card-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 8px var(--mint-glow-2);
animation: mint-dot-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.signal-card-dot { animation: none; }
}
.signal-list {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: var(--s-3);
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-2);
}
.signal-list li {
position: relative;
padding-left: 16px;
}
.signal-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 5px; height: 5px;
background: var(--ink-3);
border-radius: 50%;
}
.signal-list strong { color: var(--ink); font-weight: 600; }
.signal-list code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
padding: 1px 5px;
background: var(--bg-alt);
border-radius: 4px;
color: var(--ink);
}
.signal-phases {
list-style: none;
counter-reset: phase;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: var(--s-4);
}
.signal-phases li {
counter-increment: phase;
position: relative;
padding: var(--s-4);
padding-left: 64px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.signal-phases li::before {
content: counter(phase);
position: absolute;
left: 16px; top: 14px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--mint);
color: #0B0B11;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 16px; font-weight: 700;
box-shadow: 0 4px 12px -4px var(--mint-glow);
}
.signal-phase-label {
display: block;
font-size: 13px; font-weight: 700;
color: var(--ink);
letter-spacing: 0.01em;
margin-bottom: 4px;
}
.signal-phase-text {
display: block;
font-size: 13px; line-height: 1.55;
color: var(--ink-2);
}
.signal-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.signal-table td {
padding: 8px 0;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
line-height: 1.4;
}
.signal-table tr:last-child td { border-bottom: 0; }
.signal-table .signal-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.signal-table-sum td {
padding-top: 12px;
font-weight: 700;
color: var(--ink);
border-top: 1px solid var(--line-2);
border-bottom: 0;
}
.signal-rec-text {
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 var(--s-3);
}
.signal-rec-text:last-child { margin-bottom: 0; }
.signal-rec-text strong { color: var(--ink); }
/* HTML5-`hidden`-Attribut universell respektieren — schlägt jede display-Regel.
Notwendig weil viele Komponenten (banner-family, notif-panel etc.) explizit
`display: grid/flex` haben, was die UA-Default-Regel `[hidden]{display:none}`
übersteuern würde. */
[hidden] { display: none !important; }
/* ============ Notification-Glocke + Panel (Topbar) ============ */
.notif-bell { position: relative; overflow: visible; }
.notif-bell-badge {
position: absolute;
/* Sitzt außerhalb des 36×36-Buttons, nur die untere linke Ecke berührt ihn —
Bell-Icon bleibt komplett sichtbar. */
top: -6px; right: -6px;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--mint);
color: #0B0B11;
border-radius: 100px;
font-size: 11px; font-weight: 700;
line-height: 18px;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px var(--card), 0 0 10px var(--mint-glow);
pointer-events: none;
}
.notif-panel {
position: fixed;
top: calc(56px + env(safe-area-inset-top, 0px) + 6px);
right: var(--s-4);
z-index: calc(var(--z-nav) + 2);
width: min(360px, calc(100vw - 32px));
max-height: calc(100dvh - 80px);
display: flex; flex-direction: column;
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow:
var(--shadow-xl),
0 12px 32px -8px rgba(0, 0, 0, 0.35),
inset 0 1px 0 var(--card-edge);
overflow: hidden;
animation: notif-panel-in var(--dur-base) var(--ease-out);
}
@keyframes notif-panel-in {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.notif-panel-title {
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.notif-panel-link {
font-size: 12px; color: var(--mint);
text-decoration: none;
border-bottom: 1px dashed rgba(61, 217, 182, 0.4);
}
.notif-panel-link:hover { color: var(--mint-deep); border-bottom-color: var(--mint-deep); }
.notif-panel-list {
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s-2);
display: flex; flex-direction: column;
gap: 6px;
}
.notif-panel-empty {
padding: var(--s-5) var(--s-4);
text-align: center;
font-size: 13px;
color: var(--ink-3);
line-height: 1.5;
}
.notif-item {
--tone-stripe: var(--ink-3);
--tone-bg: rgba(21, 19, 14, 0.04);
--tone-ink: var(--ink-2);
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 8px;
padding: 10px 12px 10px 16px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
text-decoration: none;
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.notif-item::before {
content: '';
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
background: var(--tone-stripe);
border-radius: 0 100px 100px 0;
opacity: 0.85;
}
.notif-item:hover {
border-color: rgba(31, 168, 137, 0.28);
transform: translateY(-1px);
}
.notif-item--new { --tone-stripe: var(--warning); --tone-ink: var(--warning-ink); }
.notif-item--warn { --tone-stripe: var(--warning); --tone-ink: var(--warning-ink); }
.notif-item--success { --tone-stripe: var(--mint); --tone-ink: var(--mint-deep); }
.notif-item--danger { --tone-stripe: var(--danger); --tone-ink: var(--danger-ink); }
.notif-item--info { --tone-stripe: var(--info); --tone-ink: var(--info); }
/* Ungelesen-Markierung: Mint-Punkt oben rechts + leichter Mint-Wash.
Wird beim Öffnen des Panels gesetzt für Items, die nach dem letzten Öffnen
reingekommen sind — bleibt sichtbar bis zum nächsten Panel-Open. */
.notif-item--unread {
background:
linear-gradient(180deg, rgba(61, 217, 182, 0.08), rgba(61, 217, 182, 0.03)),
var(--bg-alt);
border-color: rgba(61, 217, 182, 0.30);
}
.notif-item--unread::after {
content: '';
position: absolute;
top: 10px; right: 10px;
width: 8px; height: 8px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--card), 0 0 8px var(--mint-glow);
}
/* „Neu"-Label vor dem Event-Pill bei ungelesenen */
.notif-item--unread .notif-item-pill::before {
content: 'NEU · ';
color: var(--mint-deep);
font-weight: 800;
letter-spacing: 0.04em;
}
/* Wenn das Item ungelesen + Status-Pill „neu" wäre, wäre „NEU · Neuer Antrag"
redundant — bei tone='new' den eigenen Prefix unterdrücken. */
.notif-item--unread.notif-item--new .notif-item-pill::before { content: none; }
/* Bei bereits gesehenen Items das Age-Datum etwas heller — visueller Hinweis,
dass es nicht mehr „frisch" ist. */
.notif-item:not(.notif-item--unread) .notif-item-age::before {
content: '✓';
color: var(--ink-3);
margin-right: 4px;
opacity: 0.5;
font-weight: 700;
}
.notif-item-pill {
grid-column: 1;
justify-self: start;
padding: 2px 8px;
border-radius: 100px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.01em;
background: var(--tone-bg);
color: var(--tone-ink);
line-height: 1.4;
}
.notif-item-age {
grid-column: 2;
align-self: center;
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.notif-item-title {
grid-column: 1 / -1;
font-size: 13px; font-weight: 600;
color: var(--ink);
line-height: 1.35;
}
.notif-item-meta {
grid-column: 1 / -1;
font-size: 12px;
color: var(--ink-3);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.notif-item-meta strong { color: var(--ink-2); font-weight: 600; }
/* ============ Profil: Meine Push-Geräte ============ */
.profile-push-section { gap: 0; }
.profile-cards-head {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
padding: var(--s-3) var(--s-4) var(--s-2);
}
.push-devices-count {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 6px;
background: var(--mint-soft);
color: var(--mint-deep);
border-radius: 100px;
font-size: 10.5px; font-weight: 800;
letter-spacing: 0;
}
:root[data-theme="dark"] .page-app .push-devices-count,
:root[data-theme="dark"] .page-chef .push-devices-count { color: var(--mint); }
.push-devices {
display: flex; flex-direction: column;
gap: var(--s-2);
padding: 0 var(--s-2) var(--s-3);
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-3) transparent;
/* Counter im Head zeigt total — Scroll wenn mehr als ~3 Devices */
}
.push-devices::-webkit-scrollbar { width: 6px; }
.push-devices::-webkit-scrollbar-track { background: transparent; }
.push-devices::-webkit-scrollbar-thumb {
background: var(--line-3);
border-radius: 100px;
}
.push-devices::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.push-devices-empty {
padding: var(--s-3) var(--s-4);
font-size: 13px; line-height: 1.5;
color: var(--ink-2);
background: var(--bg-alt);
border: 1px dashed var(--line-2);
border-radius: var(--r-md);
display: flex; flex-direction: column; gap: var(--s-3);
}
.push-devices-cta { align-self: flex-start; }
.push-device-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
flex-shrink: 0;
}
.push-device-row .push-device-icon { width: 32px; height: 32px; }
.push-device-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(61, 217, 182, 0.14);
color: var(--mint-deep);
display: inline-flex; align-items: center; justify-content: center;
}
.push-device-meta { min-width: 0; }
.push-device-label {
font-size: 13.5px; font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.push-device-times {
margin-top: 2px;
font-size: 11.5px;
color: var(--ink-3);
line-height: 1.4;
}
.push-device-form { margin: 0; }
.push-device-remove {
width: 30px; height: 30px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 8px;
color: var(--ink-3);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.push-device-remove:hover {
color: var(--danger);
border-color: var(--danger);
background: var(--danger-soft);
}
/* ============ iOS Install Hint (Push-Onboarding für iPhone) ============ */
.ios-install-sheet { max-width: 460px; }
.ios-install-hero {
text-align: center;
padding: var(--s-4) 0 var(--s-5);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-4);
}
.ios-install-icon {
width: 64px; height: 64px;
margin: 0 auto var(--s-3);
border-radius: 50%;
background: rgba(61, 217, 182, 0.14);
color: var(--mint-deep);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 18px -4px var(--mint-glow);
}
.ios-install-title {
font-family: var(--font-display);
font-size: 22px; font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 var(--s-2);
}
.ios-install-sub {
font-size: 14px; line-height: 1.55;
color: var(--ink-2);
margin: 0 auto;
max-width: 360px;
}
.ios-install-steps {
list-style: none;
padding: 0; margin: 0 0 var(--s-4);
counter-reset: ios-step;
display: flex; flex-direction: column;
gap: var(--s-3);
}
.ios-install-steps li {
counter-increment: ios-step;
position: relative;
padding: var(--s-3) var(--s-4) var(--s-3) 50px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-size: 13.5px; line-height: 1.5;
color: var(--ink-2);
}
.ios-install-steps li::before {
content: counter(ios-step);
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
width: 26px; height: 26px;
border-radius: 50%;
background: var(--mint);
color: #0B0B11;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
}
.ios-install-steps strong { color: var(--ink); font-weight: 600; }
.ios-install-steps em { font-style: normal; font-weight: 600; color: var(--mint-deep); }
.ios-step-icon {
display: inline-block;
vertical-align: -3px;
margin: 0 4px;
color: var(--info);
}
/* Eingerücktes Zitat (für Rollout-Ansage o.ä.) */
.signal-quote {
margin: 0;
padding: var(--s-4) var(--s-5);
background: var(--bg-alt);
border-left: 3px solid var(--mint);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-2);
font-style: italic;
}
.signal-quote strong { color: var(--ink); font-style: normal; font-weight: 700; }
/* =================================================================
User-Create-Form (Neue:r Mitarbeiter:in) — Premium Sections
================================================================= */
.user-create-form { width: 100%; }
.form-card-stack {
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 18px;
}
/* Untere Reihe: Zuordnung + Account als 2-spaltiges Grid */
.ucf-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: stretch;
}
.ucf-row-2 .ucf-sec { display: flex; flex-direction: column; }
.ucf-row-2 .ucf-sec-body { flex: 1; }
@media (max-width: 880px) {
.ucf-row-2 { grid-template-columns: 1fr; }
}
/* Person-Card: 4 Felder im 2x2-Grid */
.ucf-sec-body--grid4 {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 620px) {
.ucf-sec-body--grid4 { grid-template-columns: 1fr; }
}
.ucf-sec {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
padding: 22px 24px 24px;
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ucf-sec:hover { border-color: var(--line-2, var(--line)); }
.ucf-sec:focus-within {
border-color: var(--mint);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge), 0 0 0 3px var(--mint-soft);
}
.ucf-sec-head {
display: flex; align-items: flex-start; gap: 14px;
padding-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px dashed var(--line-1);
}
.ucf-sec-num {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 12px;
background: var(--mint-soft);
color: var(--mint-deep);
display: inline-flex; align-items: center; justify-content: center;
font: 700 13px/1 ui-monospace, 'SF Mono', Menlo, monospace;
letter-spacing: .04em;
}
:root[data-theme="dark"] .ucf-sec-num { background: rgba(95,184,156,.14); color: var(--mint); }
.ucf-sec-eyebrow {
font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 2px;
}
.ucf-sec-title {
margin: 0;
font-family: var(--font-display, var(--ff-display, 'Instrument Serif', serif));
font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--ink);
letter-spacing: -.01em;
}
.ucf-sec-body { display: flex; flex-direction: column; gap: 14px; }
.ucf-sec-body .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .ucf-sec-body .fg-row { grid-template-columns: 1fr; } }
.fg-input--narrow { max-width: 140px; }
.fg-input--mono {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
letter-spacing: .01em;
}
/* Input mit Einheits-Suffix (z.B. „Tage", „€", „%") */
.fg-input-suffix {
position: relative;
display: flex; align-items: stretch;
}
.fg-input-suffix .fg-input {
padding-right: 72px;
text-align: left;
font-variant-numeric: tabular-nums;
}
.fg-input-suffix-tag {
position: absolute;
right: 6px; top: 50%; transform: translateY(-50%);
background: var(--bg-alt, var(--bg));
color: var(--ink-3);
font-size: 11.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
padding: 5px 10px;
border-radius: 8px;
pointer-events: none;
border: 1px solid var(--line-1);
}
:root[data-theme="dark"] .fg-input-suffix-tag { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.fg-input-suffix:focus-within .fg-input-suffix-tag {
color: var(--mint-deep); background: var(--mint-soft); border-color: rgba(95,184,156,.3);
}
:root[data-theme="dark"] .fg-input-suffix:focus-within .fg-input-suffix-tag {
color: var(--mint); background: rgba(95,184,156,.12); border-color: rgba(95,184,156,.25);
}
/* Passwort-Row mit Generieren-Button */
.ucf-pw-row { display: flex; gap: 8px; align-items: stretch; }
.ucf-pw-row .fg-input { flex: 1; min-width: 0; }
.ucf-pw-gen {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-alt);
color: var(--ink-2);
border: 1.5px solid var(--line-2);
border-radius: 12px;
padding: 0 14px;
font: 600 13px/1 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
transition: background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.ucf-pw-gen:hover { background: var(--mint-soft); color: var(--mint-deep); border-color: var(--mint); }
.ucf-pw-gen svg { transition: transform .35s ease; }
.ucf-pw-gen:hover svg { transform: rotate(-90deg); }
.ucf-pw-flash {
animation: ucfPwFlash .9s ease;
}
@keyframes ucfPwFlash {
0% { box-shadow: 0 0 0 0 var(--mint); border-color: var(--mint); }
50% { box-shadow: 0 0 0 6px var(--mint-soft); border-color: var(--mint); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Aktion-Leiste */
.ucf-actions {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 0 2px;
}
.ucf-btn {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
border: 1.5px solid transparent;
border-radius: 14px;
padding: 11px 20px;
font: 600 14px/1 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ucf-btn:active { transform: translateY(1px); }
.ucf-btn--ghost {
background: transparent; color: var(--ink-2); border-color: var(--line-2);
}
.ucf-btn--ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--line-3); }
.ucf-btn--primary {
background: var(--mint); color: #0E0E13; border-color: var(--mint);
box-shadow: 0 8px 22px -10px rgba(95,184,156,.6);
}
.ucf-btn--primary:hover { background: var(--mint-deep); border-color: var(--mint-deep); box-shadow: 0 10px 26px -10px rgba(95,184,156,.7); }
/* Back-Link in der Card-Head */
.back-link {
color: var(--ink-3); text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
transition: color .15s ease;
}
.back-link:hover { color: var(--mint-deep); }
:root[data-theme="dark"] .back-link:hover { color: var(--mint); }
/* Mobile */
@media (max-width: 640px) {
.ucf-sec { padding: 18px 18px 20px; border-radius: 16px; }
.ucf-sec-num { width: 32px; height: 32px; font-size: 12px; }
.ucf-sec-title { font-size: 17px; }
.ucf-actions { flex-direction: column-reverse; gap: 8px; }
.ucf-btn { justify-content: center; width: 100%; }
.ucf-pw-row { flex-direction: column; }
.ucf-pw-gen { justify-content: center; }
}
/* =================================================================
Touren-Pool — Quick-Add-Bar + Compact-Table
================================================================= */
/* Quick-Add: kompakte Single-Row über der Tabelle */
.tour-quickadd {
display: grid;
grid-template-columns: auto 180px minmax(0, 1fr) 140px auto;
gap: 10px;
align-items: center;
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
padding: 14px 16px;
margin-bottom: var(--s-4);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
}
.tour-quickadd-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--mint-deep);
background: var(--mint-soft);
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.tour-quickadd-eyebrow .muted { color: var(--ink-3); font-weight: 600; letter-spacing: .06em; text-transform: none; margin-left: 4px; }
:root[data-theme="dark"] .tour-quickadd-eyebrow { color: var(--mint); background: rgba(95,184,156,.12); }
.tour-quickadd .fg-input { padding: 10px 12px; font-size: 13.5px; min-width: 0; width: 100%; }
.tour-quickadd-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; }
.tour-quickadd-sort { width: 140px; }
.tour-quickadd-sort .fg-input { padding-right: 60px; }
.tour-quickadd-sort .fg-input-suffix-tag { font-size: 10px; padding: 3px 7px; }
@media (max-width: 1100px) {
.tour-quickadd { grid-template-columns: 1fr 1fr auto; }
.tour-quickadd-eyebrow { grid-column: 1 / -1; }
.tour-quickadd-label { grid-column: 1 / -1; }
.tour-quickadd-sort { grid-column: 1 / 2; }
.tour-quickadd > button[type="submit"] { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 640px) {
.tour-quickadd { grid-template-columns: 1fr; }
.tour-quickadd-eyebrow,
.tour-quickadd-code,
.tour-quickadd-label,
.tour-quickadd-sort,
.tour-quickadd > button[type="submit"] { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
}
/* Liste */
.tour-pool-list {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
overflow: hidden;
}
.tour-pool-list-head {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--line-1);
}
.tour-pool-list-head .ucf-sec-eyebrow { margin: 0 0 4px; padding: 0; background: transparent; }
.tour-pool-list-head .ucf-sec-title { font-size: 17px; }
.tour-pool-list-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Empty */
.tour-empty {
padding: 38px 20px; text-align: center;
color: var(--ink-3); font-size: 14px;
}
/* Tabelle */
.tour-table-wrap { overflow-x: auto; }
.tour-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.tour-table thead th {
text-align: left;
padding: 11px 14px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3);
background: var(--bg-alt, transparent);
border-bottom: 1px solid var(--line-1);
white-space: nowrap;
}
.tour-table tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--line-1);
vertical-align: middle;
}
.tour-table tbody tr:last-child td { border-bottom: 0; }
.tour-table tbody tr.tour-row { transition: background .12s ease; }
.tour-table tbody tr.tour-row:hover { background: var(--bg-alt); }
.tt-th-num { width: 56px; }
.tt-th-code { width: 100px; }
.tt-th-nutz { width: 130px; }
.tt-th-spec { width: 120px; }
.tt-th-status { width: 90px; }
.tt-th-act { width: 130px; text-align: right; }
/* Sortier-Header */
.tt-th-sortable { padding: 0 !important; }
.tt-th-sortable a {
display: flex; align-items: center; gap: 5px;
padding: 11px 14px;
color: inherit; text-decoration: none;
transition: color .12s ease, background .12s ease;
}
.tt-th-sortable a:hover { color: var(--ink); background: rgba(0,0,0,.025); }
:root[data-theme="dark"] .tt-th-sortable a:hover { background: rgba(255,255,255,.04); }
.tt-th-sortable.is-active a { color: var(--mint-deep); }
:root[data-theme="dark"] .tt-th-sortable.is-active a { color: var(--mint); }
.tt-th-sortable .sort-arrow { font-size: 11px; opacity: 1; line-height: 1; }
.tt-th-sortable .sort-arrow-inactive { opacity: .35; font-size: 11px; }
.tt-th-sortable.is-active .sort-arrow { opacity: 1; }
/* Sticky Code-Spalte für horizontales Scrolling auf Mobile */
@media (max-width: 760px) {
.tour-table-wrap { -webkit-overflow-scrolling: touch; }
.tour-table thead th.tt-th-code,
.tour-table tbody td.tt-cell-code {
position: sticky; left: 0; z-index: 2;
background: var(--card);
box-shadow: 1px 0 0 var(--line-1);
}
.tour-table thead th.tt-th-code { background: var(--bg-alt, var(--card)); }
.tour-table tbody tr.tour-row:hover td.tt-cell-code { background: var(--bg-alt); }
.tour-row--editing td.tt-cell-code { background: var(--mint-soft) !important; }
.tour-table thead th.tt-th-num,
.tour-table tbody td.tt-cell-num { display: none; } /* Sort-Spalte auf Mobile wegblenden */
}
.tt-cell-num { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.tt-cell-code { white-space: nowrap; }
.tt-code { font-family: var(--font-display, var(--ff-display, 'Instrument Serif', serif)); font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.tt-cell-nutz { white-space: nowrap; }
.tt-cell-nutz .tag { margin-right: 4px; }
.tt-cell-spec form { display: inline-flex; align-items: center; }
.tt-cell-act { text-align: right; white-space: nowrap; }
.tt-cell-act form { display: inline-block; margin: 0; }
/* Inaktive Zeilen */
.tour-row--inactive { opacity: .55; }
.tour-row--inactive .tt-code { text-decoration: line-through; }
/* Icon-Buttons in der Aktions-Spalte */
.tt-icon-btn {
appearance: none;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
color: var(--ink-3);
cursor: pointer;
margin-left: 2px;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tt-icon-btn:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--line-2); }
.tt-icon-btn--danger:hover { background: rgba(213,87,59,.08); color: var(--danger, #D5573B); border-color: rgba(213,87,59,.25); }
.tt-icon-btn--lock { color: var(--ink-4, var(--ink-3)); opacity: .5; cursor: not-allowed; }
.tt-icon-btn--lock:hover { background: transparent; color: var(--ink-4, var(--ink-3)); border-color: transparent; }
/* Edit-Row: expandiert direkt unter der Tour-Zeile */
.tour-row--editing td { border-bottom-color: transparent; background: var(--mint-soft); }
:root[data-theme="dark"] .tour-row--editing td { background: rgba(95,184,156,.07); }
.tour-edit-row td {
padding: 16px 20px 18px !important;
background: linear-gradient(180deg, var(--mint-soft) 0%, transparent 100%);
border-bottom: 1px solid var(--line-1) !important;
}
:root[data-theme="dark"] .tour-edit-row td {
background: linear-gradient(180deg, rgba(95,184,156,.07) 0%, transparent 100%);
}
.tour-edit-grid {
display: grid;
grid-template-columns: 160px 1fr 140px;
gap: 12px;
margin-bottom: 12px;
}
.tour-edit-grid .fg { margin: 0; }
.tour-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
.tour-edit-grid { grid-template-columns: 1fr 1fr; }
.tour-edit-grid .fg:nth-child(2) { grid-column: 1 / -1; }
}
/* =================================================================
Confirm-Sheet (Lösch-Bestätigung, Bulk-Aktionen etc.)
================================================================= */
.sheet--confirm {
max-width: 440px;
padding: 32px 28px 24px;
text-align: center;
}
.sheet--confirm .confirm-icon {
margin: 0 auto 16px;
width: 52px; height: 52px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--danger-soft, rgba(213,87,59,.1));
color: var(--danger, #D5573B);
border: 1px solid rgba(213,87,59,.18);
}
.sheet--confirm .confirm-icon svg { width: 24px; height: 24px; }
.sheet--confirm .confirm-title {
font-family: var(--font-display, var(--ff-display, 'Instrument Serif', serif));
font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em;
color: var(--ink);
margin-bottom: 12px;
}
.sheet--confirm .confirm-target {
display: inline-flex; align-items: baseline; gap: 4px;
padding: 8px 16px;
margin-bottom: 14px;
background: var(--bg-alt);
border: 1px solid var(--line-1);
border-radius: 12px;
max-width: 100%;
}
.sheet--confirm .confirm-target-code {
font-family: var(--font-display, var(--ff-display, 'Instrument Serif', serif));
font-size: 18px; font-weight: 700; letter-spacing: .02em;
color: var(--ink);
}
.sheet--confirm .confirm-target-label {
color: var(--ink-3); font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
.sheet--confirm .confirm-sub {
color: var(--ink-3); font-size: 13.5px; line-height: 1.5;
margin-bottom: 22px;
max-width: 340px; margin-left: auto; margin-right: auto;
}
.sheet--confirm .confirm-actions {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.sheet--confirm .ucf-btn { padding: 11px 18px; }
/* Danger-Variante für ucf-btn */
.ucf-btn--danger {
background: var(--danger, #D5573B); color: #FFFFFF;
border-color: var(--danger, #D5573B);
box-shadow: 0 8px 22px -10px rgba(213,87,59,.6);
}
.ucf-btn--danger:hover { background: #B8442A; border-color: #B8442A; box-shadow: 0 10px 26px -10px rgba(213,87,59,.7); }
@media (max-width: 460px) {
.sheet--confirm { padding: 24px 18px 18px; }
.sheet--confirm .confirm-actions { flex-direction: column-reverse; gap: 8px; }
.sheet--confirm .confirm-actions .ucf-btn { width: 100%; justify-content: center; }
}
/* Krankheit-Form Date-Row: zwei Datepicker nebeneinander */
.krank-date-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.krank-date-row .fg { margin-bottom: 0; }
@media (max-width: 560px) { .krank-date-row { grid-template-columns: 1fr; } }
/* =================================================================
Onboarding Step 7 — PWA Installation
================================================================= */
.onboarding-card--wide { max-width: 720px; }
/* Karte nach links schieben, damit der right-guide darunter nicht überlappt */
.onboarding-card--shift-left { margin-right: auto; max-width: 620px; text-align: left; }
@media (max-width: 900px) { .onboarding-card--shift-left { margin-right: 0; max-width: none; } }
.onboarding-card--shift-left h1 { text-align: left; }
.onboarding-card--shift-left .onboarding-text { text-align: left; }
.pwa-steps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 18px 0 16px;
text-align: left;
}
.pwa-step {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 16px 18px;
}
.pwa-step-head {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700; letter-spacing: .02em;
color: rgba(255,255,255,0.92);
margin-bottom: 10px;
}
.pwa-step ol {
list-style: none; counter-reset: pwa-step;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.pwa-step li {
counter-increment: pwa-step;
position: relative;
padding-left: 26px;
color: rgba(255,255,255,0.7);
font-size: 13.5px;
line-height: 1.45;
}
.pwa-step li::before {
content: counter(pwa-step);
position: absolute; left: 0; top: 0;
width: 18px; height: 18px;
background: var(--mint-soft); color: var(--mint-deep);
border-radius: 50%;
font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.pwa-step li strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.pwa-perks {
display: flex; flex-wrap: wrap; gap: 14px;
list-style: none; padding: 0; margin: 0;
color: rgba(255,255,255,0.7);
font-size: 13px;
justify-content: flex-start;
text-align: left;
}
.pwa-perks li { display: inline-flex; align-items: center; gap: 6px; }
.pwa-perks-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--mint); flex: 0 0 auto;
box-shadow: 0 0 6px rgba(95,184,156,0.6);
}
@media (max-width: 640px) {
.pwa-steps { grid-template-columns: 1fr; }
}
/* =================================================================
Onboarding Step 8 — Datenschutz-Zustimmung
================================================================= */
.privacy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 16px 0 18px;
text-align: left;
}
.privacy-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 14px 16px;
}
.privacy-card-eye {
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--mint);
margin-bottom: 6px;
}
.privacy-card p {
margin: 0; font-size: 13px; line-height: 1.5;
color: rgba(255,255,255,0.75);
}
.privacy-card p strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.privacy-card a { color: var(--mint); text-decoration: underline; text-underline-offset: 2px; }
.privacy-card a:hover { color: #FFFFFF; }
.privacy-accept {
display: flex; align-items: flex-start; gap: 12px;
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 14px 16px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
text-align: left;
}
.privacy-accept:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.privacy-accept.is-checked { background: rgba(95,184,156,0.10); border-color: var(--mint); }
.privacy-accept input { position: absolute; opacity: 0; pointer-events: none; }
.privacy-accept-box {
width: 22px; height: 22px; flex: 0 0 auto;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: 6px;
background: rgba(0,0,0,0.2);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, border-color .15s ease;
}
.privacy-accept-box svg {
width: 14px; height: 14px;
color: #0E0E13;
opacity: 0;
transition: opacity .15s ease;
}
.privacy-accept.is-checked .privacy-accept-box { background: var(--mint); border-color: var(--mint); }
.privacy-accept.is-checked .privacy-accept-box svg { opacity: 1; }
.privacy-accept-text {
color: rgba(255,255,255,0.88); font-size: 13.5px; line-height: 1.5;
}
.onboarding-done[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) {
.privacy-grid { grid-template-columns: 1fr; }
}
/* =================================================================
Cookie-Banner — Public-Seiten (Login, Datenschutz, Impressum)
Kein Tracker, also keine vierzehn Provider-Toggles — nur ein klarer
Hinweis und ein Acknowledge-Button.
================================================================= */
.cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px;
max-width: 520px; margin: 0 auto;
background: var(--card, #FFFFFF);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4), 0 6px 18px -10px rgba(0,0,0,0.2);
padding: 18px 20px;
z-index: 9000;
transform: translateY(120%);
opacity: 0;
transition: transform .35s var(--ease-out, cubic-bezier(.2,.7,.2,1)), opacity .25s ease;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner-head {
display: flex; align-items: center; gap: 8px;
font: 700 11px/1 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
letter-spacing: .14em; text-transform: uppercase;
color: var(--mint-deep);
margin-bottom: 10px;
}
.cookie-banner-head svg { color: var(--mint-deep); }
:root[data-theme="dark"] .cookie-banner-head { color: var(--mint); }
:root[data-theme="dark"] .cookie-banner-head svg { color: var(--mint); }
.cookie-banner-text {
font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
margin-bottom: 14px;
}
.cookie-banner-text strong { color: var(--ink); font-weight: 600; }
.cookie-banner-text a { color: var(--mint-deep); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .cookie-banner-text a { color: var(--mint); }
.cookie-banner-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.cookie-banner-btn {
appearance: none; cursor: pointer;
background: var(--mint); color: #0E0E13;
border: 1.5px solid var(--mint);
border-radius: 12px;
padding: 10px 18px;
font: 600 13.5px/1 var(--ff-ui, 'Inter Tight', system-ui, sans-serif);
transition: background .15s ease, border-color .15s ease;
}
.cookie-banner-btn:hover { background: var(--mint-deep); border-color: var(--mint-deep); }
@media (max-width: 480px) {
.cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
.cookie-banner-actions { justify-content: stretch; }
.cookie-banner-btn { flex: 1; justify-content: center; }
}
/* Datenschutz/Impressum-Listen — dark-page Variante (passt zu .legal-body) */
.legal-body .legal-list {
list-style: none; padding: 0; margin: 12px 0 18px;
display: flex; flex-direction: column; gap: 10px;
}
.legal-body .legal-list li {
position: relative;
padding-left: 18px;
margin: 0;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
}
.legal-body .legal-list li::before {
content: ''; position: absolute; left: 0; top: 10px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 6px var(--mint-glow-2);
}
.legal-body .legal-list li strong { color: #FFFFFF; font-weight: 600; }
/* Datenschutz/Impressum: TODO-Box für Platzhalter-Werte */
.legal-body .legal-todo-box {
background: rgba(244, 185, 66, 0.12);
border: 1px solid rgba(244, 185, 66, 0.35);
border-left: 3px solid var(--warning, #F4B942);
border-radius: var(--r-md);
color: rgba(255,255,255,0.85);
padding: 14px 18px;
margin: 0 0 24px;
font-size: 13.5px; line-height: 1.55;
}
.legal-body .legal-todo-box strong { color: var(--warning, #F4B942); display: block; margin-bottom: 4px; }
.legal-body .legal-todo-box code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
/* =================================================================
Admin Go-Live-Checkliste
================================================================= */
.gl-progress-bar {
width: 100%; height: 6px;
background: var(--bg-alt);
border-radius: 100px;
overflow: hidden;
margin-top: 4px;
}
.gl-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--mint) 0%, var(--mint-deep) 100%);
border-radius: 100px;
transition: width .4s ease;
}
.gl-section {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
padding: 22px 24px 18px;
margin-bottom: var(--s-4);
}
.gl-section-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px dashed var(--line-1);
}
.gl-section-head .ucf-sec-eyebrow { margin-bottom: 4px; padding: 0; background: transparent; color: var(--ink-3); }
.gl-section-head .ucf-sec-title { font-size: 19px; }
.gl-section-note {
color: var(--ink-3); font-size: 13px; margin-top: 6px; max-width: 600px;
}
.gl-section-count {
background: var(--bg-alt);
color: var(--ink-2);
border-radius: 999px;
padding: 5px 14px;
font-size: 12.5px; font-weight: 700;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
white-space: nowrap;
}
.gl-items { display: flex; flex-direction: column; gap: 10px; }
.gl-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: var(--bg-alt);
border: 1px solid transparent;
border-radius: 12px;
transition: background .15s ease, border-color .15s ease;
}
.gl-item:hover { background: var(--bg); border-color: var(--line-1); }
.gl-item--done {
background: var(--mint-soft);
border-color: rgba(95,184,156,.18);
}
:root[data-theme="dark"] .gl-item--done { background: rgba(95,184,156,.07); border-color: rgba(95,184,156,.18); }
.gl-item--done:hover { background: var(--mint-soft); }
:root[data-theme="dark"] .gl-item--done:hover { background: rgba(95,184,156,.10); }
.gl-check, .gl-check-form .gl-check {
flex: 0 0 24px;
width: 24px; height: 24px;
border-radius: 6px;
border: 1.5px solid var(--line-2);
background: var(--card);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-3);
margin-top: 1px;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gl-check-form { margin: 0; }
.gl-item--done .gl-check {
background: var(--mint); color: #0E0E13; border-color: var(--mint);
}
.gl-check--auto {
cursor: default;
background: rgba(255, 255, 255, 0.04);
}
.gl-item--done .gl-check--auto { background: var(--mint); color: #0E0E13; border-color: var(--mint); }
.gl-check:hover:not(.gl-check--auto) { border-color: var(--mint); color: var(--mint-deep); }
.gl-item-body { flex: 1; min-width: 0; }
.gl-item-label {
font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4;
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gl-item--done .gl-item-label { color: var(--ink); }
.gl-item--done .gl-item-label::after { content: '✓ erledigt'; font-size: 11px; font-weight: 700; color: var(--mint-deep); background: rgba(95,184,156,.15); padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="dark"] .gl-item--done .gl-item-label::after { color: var(--mint); background: rgba(95,184,156,.12); }
.gl-tag {
font-size: 9.5px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px;
background: var(--bg-alt);
color: var(--ink-3);
}
.gl-tag--auto { background: rgba(95, 123, 219, 0.12); color: #5B7BDB; }
:root[data-theme="dark"] .gl-tag--auto { background: rgba(95, 123, 219, 0.15); color: #8AA3FF; }
.gl-item-detail {
color: var(--ink-3); font-size: 12.5px; line-height: 1.5;
margin-top: 4px;
}
.gl-item-meta {
color: var(--mint-deep); font-size: 11.5px;
margin-top: 6px;
font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .gl-item-meta { color: var(--mint); }
@media (max-width: 640px) {
.gl-section { padding: 18px; }
.gl-section-head { flex-direction: column; gap: 8px; }
.gl-section-count { align-self: flex-start; }
.gl-item { padding: 10px 12px; }
}
/* =================================================================
Projekt-Wert: gruppierte Aufwand-Liste
================================================================= */
.pv-group {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
padding: 22px 24px 18px;
margin-bottom: var(--s-4);
}
.pv-group-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px dashed var(--line-1);
}
.pv-group-head .ucf-sec-eyebrow { margin-bottom: 4px; padding: 0; background: transparent; color: var(--ink-3); }
.pv-group-head .ucf-sec-title { font-size: 19px; }
.pv-group-sum {
display: flex; align-items: baseline; gap: 10px;
flex-shrink: 0;
}
.pv-group-hours {
font-family: var(--font-display, var(--ff-display, 'Instrument Serif', serif));
font-size: 26px; font-weight: 600; font-style: italic;
color: var(--mint-deep);
line-height: 1;
}
:root[data-theme="dark"] .pv-group-hours { color: var(--mint); }
.pv-group-eur {
font-size: 13px; font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.pv-list { list-style: none; padding: 0; margin: 0; }
.pv-item {
display: grid;
grid-template-columns: 1fr 80px 110px;
gap: 12px; align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--line-1);
}
.pv-item:last-child { border-bottom: 0; }
.pv-item-label { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.pv-item-hours { color: var(--ink-2); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.pv-item-eur { color: var(--ink-3); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.pv-context {
background: var(--card);
background-image: var(--card-shine);
border: 1px solid var(--line);
border-radius: var(--r-lg, 18px);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-edge);
padding: 22px 24px;
margin-bottom: var(--s-4);
}
.pv-context .ucf-sec-eyebrow { margin-bottom: 4px; padding: 0; background: transparent; color: var(--ink-3); }
.pv-context .ucf-sec-title { font-size: 19px; margin-bottom: 14px; }
.pv-context-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-context-list li {
position: relative;
padding-left: 18px;
color: var(--ink-2);
line-height: 1.55;
font-size: 13.5px;
}
.pv-context-list li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 6px var(--mint-glow-2);
}
.pv-context-p { color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; font-size: 14px; }
.pv-context-p:last-child { margin-bottom: 0; }
.pv-context-p strong { color: var(--ink); font-weight: 600; }
.pv-foot { margin-top: var(--s-4); color: var(--ink-3); font-size: 12.5px; text-align: center; font-style: italic; }
@media (max-width: 720px) {
.pv-group { padding: 18px; }
.pv-group-head { flex-direction: column; gap: 8px; }
.pv-item { grid-template-columns: 1fr 70px 90px; font-size: 13px; }
.pv-item-label, .pv-item-hours, .pv-item-eur { font-size: 13px; }
}