/* ================================================================ Haus-Waechter ERP - Brand Theme (non-invasiv) ================================================================ */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/Caveat-Variable.woff2') format('woff2'); } :root { /* Brand: Orange #C2632A Komma-getrennt (nicht Leerzeichen!): Filaments kompiliertes CSS nutzt an ~200 Stellen die alte rgba(var(--x), alpha)-Syntax, die Kommas braucht. Mit Leerzeichen ist rgba(48 43 37, 1) ungueltiges CSS -> Regel wird vom Browser komplett verworfen (z.B. Choices-Dropdown im Dark Mode wurde dadurch transparent). */ --primary-50: 249, 246, 244; --primary-100: 242, 235, 231; --primary-200: 229, 213, 204; --primary-300: 225, 182, 156; --primary-400: 215, 143, 100; --primary-500: 194, 99, 41; --primary-600: 164, 84, 35; --primary-700: 126, 64, 27; --primary-800: 97, 49, 20; --primary-900: 67, 34, 14; --primary-950: 42, 21, 9; /* Mute Brown var(--hw-mute) */ --gray-50: 247, 247, 246; --gray-100: 238, 237, 235; --gray-200: 219, 216, 214; --gray-300: 198, 191, 184; --gray-400: 170, 158, 146; --gray-500: 138, 122, 106; --gray-600: 118, 104, 90; --gray-700: 90, 79, 68; --gray-800: 69, 61, 53; --gray-900: 48, 43, 37; --gray-950: 30, 27, 23; /* Brand Custom-Variablen */ --hw-ink: #2B1F18; --hw-ink-2: #4A372C; --hw-cream: #EDE3D6; --hw-cream-2: #F5EEE3; --hw-paper: #FBF8F2; --hw-paper-2: #FFFFFF; --hw-line: #D8CDB9; --hw-line-2: #E7DCC8; --hw-mute: #8B7B6A; --hw-accent: #C2632A; --hw-accent-2: #E08A4A; --hw-display: 'Caveat', 'Brush Script MT', cursive; /* Fliesstext auf Papier-Flaechen (getrennt von --hw-ink, das als feste Espresso-Flaeche bei Sidebar/Login-Hero/Welcome-Card weiterlebt) */ --hw-text: #2B1F18; --hw-text-2: #4A372C; } /* ================================================================ DARK MODE — Filament setzt die Klasse "dark" auf , sobald der Nutzer im Profil-Menü auf Mond/System(dunkel) umschaltet. Alle Regeln unten referenzieren ausschliesslich diese Variablen (!important-Werte inklusive), daher genuegt eine Neudefinition hier, um die komplette Flaeche umzufaerben. --hw-ink/--hw-ink-2/--hw-cream/--hw-accent* bleiben bewusst unveraendert: sie sind die feste "Espresso"-Flaeche (Sidebar, Login-Hero, Welcome-/Heute-Karte) bzw. der Marken-Akzent, beides soll in beiden Modi gleich aussehen. ================================================================ */ .dark { --hw-paper: #17110C; --hw-paper-2: #221A12; --hw-cream-2: #2A2117; --hw-line: #4A3C2C; --hw-line-2: #362B1F; --hw-mute: #B4A48F; --hw-text: #F2E8DA; --hw-text-2: #CDBBA4; } html, body, .fi-body { background-color: var(--hw-paper) !important; } /* ─── Sidebar (Espresso) ─── */ .fi-sidebar { background-color: var(--hw-ink) !important; border-right: 1px solid #1c130d !important; } .fi-sidebar-header { background-color: var(--hw-ink) !important; border-bottom: 1px solid rgba(237, 227, 214, 0.1) !important; } .fi-sidebar-nav { background: transparent !important; } .fi-sidebar-group-label { color: rgba(237, 227, 214, 0.45) !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding-left: 0.875rem !important; } .fi-sidebar-item-button, .fi-sidebar-item a { color: rgba(237, 227, 214, 0.78) !important; border-radius: 0.5rem !important; } .fi-sidebar-item-button:hover, .fi-sidebar-item a:hover { background-color: rgba(237, 227, 214, 0.06) !important; color: var(--hw-cream) !important; } .fi-sidebar-item-button .fi-sidebar-item-icon, .fi-sidebar-item a .fi-sidebar-item-icon { color: rgba(237, 227, 214, 0.6) !important; } .fi-sidebar-item-button:hover .fi-sidebar-item-icon, .fi-sidebar-item a:hover .fi-sidebar-item-icon { color: var(--hw-cream) !important; } .fi-sidebar-item-active .fi-sidebar-item-button, .fi-sidebar-item-active > a, .fi-sidebar-item.fi-active > a { background-color: var(--hw-accent) !important; color: #ffffff !important; } .fi-sidebar-item-active .fi-sidebar-item-icon { color: #ffffff !important; } .fi-logo { font-family: var(--hw-display) !important; font-weight: 600 !important; font-size: 1.5rem !important; letter-spacing: 0 !important; color: var(--hw-cream) !important; } .fi-sidebar-collapse-button { color: var(--hw-cream) !important; background: rgba(237, 227, 214, 0.05) !important; } /* ─── Topbar ─── */ .fi-topbar { background-color: var(--hw-paper-2) !important; border-bottom: 1px solid var(--hw-line) !important; } /* ─── Page Header ─── */ .fi-header-heading { color: var(--hw-text) !important; letter-spacing: -0.01em !important; font-weight: 800 !important; } /* ─── Page-Background ─── */ .fi-page, .fi-page-content { background-color: var(--hw-paper) !important; } /* ─── Sections / Cards ─── */ .fi-section { background-color: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; border-radius: 0.75rem !important; } .fi-section-header-heading { color: var(--hw-text) !important; font-weight: 700 !important; } /* ─── Tables ─── */ .fi-ta-content, .fi-ta-table { background-color: var(--hw-paper-2) !important; } .fi-ta-header-cell { background-color: var(--hw-cream-2) !important; color: var(--hw-text-2) !important; border-bottom: 1px solid var(--hw-line) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .fi-ta-row { border-bottom: 1px solid var(--hw-line-2) !important; } .fi-ta-row:hover { background-color: var(--hw-cream-2) !important; } /* ─── Badges ─── */ .fi-badge { font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-size: 0.65rem !important; border-radius: 999px !important; } /* ─── Buttons ─── */ .fi-btn { font-weight: 600 !important; letter-spacing: 0.01em !important; border-radius: 0.5rem !important; } /* ─── Header-Action-Buttons (Festschreiben, PDF, Mail) ─── */ /* Filament setzt fi-color-{name} fuer Color-Varianten */ .fi-btn[class*="fi-color-info"], .fi-ac-btn-action[class*="fi-color-info"], .fi-btn-color-info { background-color: var(--hw-accent) !important; color: #ffffff !important; border-color: var(--hw-accent) !important; } .fi-btn[class*="fi-color-info"]:hover, .fi-ac-btn-action[class*="fi-color-info"]:hover, .fi-btn-color-info:hover { background-color: #A95626 !important; color: #ffffff !important; } .fi-btn[class*="fi-color-warning"], .fi-btn-color-warning { background-color: #C28A2A !important; color: #ffffff !important; border-color: #C28A2A !important; } .fi-btn[class*="fi-color-success"], .fi-btn-color-success { background-color: #5C7A3E !important; color: #ffffff !important; border-color: #5C7A3E !important; } .fi-btn[class*="fi-color-danger"], .fi-btn-color-danger { background-color: #A8442C !important; color: #ffffff !important; border-color: #A8442C !important; } .fi-btn[class*="fi-color-gray"], .fi-btn-color-gray { background-color: var(--hw-paper-2) !important; color: var(--hw-text) !important; border: 1px solid var(--hw-line) !important; } .fi-btn[class*="fi-color-gray"]:hover, .fi-btn-color-gray:hover { background-color: var(--hw-cream-2) !important; } /* Outlined-Variant fuer alle Header-Actions falls Filament outlined nutzt */ .fi-btn-outlined.fi-color-primary, .fi-btn-outlined[class*="fi-color-primary"] { background-color: transparent !important; color: var(--hw-accent) !important; border: 1.5px solid var(--hw-accent) !important; } /* ─── User-Avatar ─── */ .fi-avatar { background-color: var(--hw-accent) !important; color: #ffffff !important; } /* ─── Stats ─── */ .fi-wi-stats-overview-stat { border: 1px solid var(--hw-line) !important; background-color: var(--hw-paper-2) !important; } .fi-wi-stats-overview-stat-value { letter-spacing: -0.02em !important; font-weight: 800 !important; } /* ─── Caveat-Class ─── */ .hw-display { font-family: var(--hw-display) !important; font-weight: 500 !important; } /* ─── Login-Page Brand-Look ─── */ .fi-simple-page { background-color: var(--hw-ink) !important; background-image: radial-gradient(ellipse at top, rgba(194, 99, 42, 0.18), transparent 50%); } .fi-simple-main { background-color: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; border-radius: 0.875rem !important; box-shadow: 0 10px 40px rgba(43, 31, 24, 0.4) !important; } /* ─── Slogan in Sidebar (via RenderHook) ─── */ .hw-sidebar-slogan { padding: 1.25rem 1rem 1rem; text-align: center; font-family: var(--hw-display); font-size: 1.05rem; color: rgba(237, 227, 214, 0.45); letter-spacing: 0.02em; border-top: 1px solid rgba(237, 227, 214, 0.06); line-height: 1.2; } /* ─── Form-Field-Labels ─── */ .fi-fo-field-wrp-label { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--hw-text-2) !important; } /* ─── Welcome-Widget Brand-Card ─── */ .hw-welcome-card { background: linear-gradient(135deg, var(--hw-ink) 0%, var(--hw-ink-2) 100%); border-radius: 0.75rem; padding: 1.75rem 2rem; color: var(--hw-cream); position: relative; overflow: hidden; } .hw-welcome-card::after { content: ''; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; background-image: url('/images/logo-haus-waechter.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.08; pointer-events: none; } .hw-welcome-card .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hw-accent-2); margin-bottom: 0.25rem; } .hw-welcome-card .greeting { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .hw-welcome-card .greeting .name { font-family: var(--hw-display); font-weight: 500; color: var(--hw-accent-2); font-size: 1.9rem; margin-left: 0.25rem; } .hw-welcome-card .summary { font-size: 0.85rem; color: rgba(237, 227, 214, 0.7); margin-top: 0.5rem; } .hw-welcome-card .quote { font-family: var(--hw-display); font-size: 1.4rem; color: var(--hw-accent-2); margin-top: 0.75rem; line-height: 1.1; } /* ─── Pipeline-Widget ─── */ .hw-pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .hw-pipeline-col { background: var(--hw-cream-2); border-radius: 0.5rem; padding: 0.875rem 1rem; border-top: 3px solid var(--hw-mute); } .hw-pipeline-col.geplant { border-top-color: #C28A2A; } .hw-pipeline-col.inarbeit { border-top-color: var(--hw-accent); } .hw-pipeline-col.fertig { border-top-color: #5C7A3E; } .hw-pipeline-col .label { font-size: 0.65rem; color: var(--hw-mute); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hw-pipeline-col .value { font-size: 1.6rem; font-weight: 800; color: var(--hw-text); margin-top: 0.125rem; letter-spacing: -0.02em; } .hw-pipeline-list { margin-top: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; } .hw-pipeline-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); } .hw-pipeline-row .nr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.7rem; color: var(--hw-mute); min-width: 8rem; } .hw-pipeline-row .name { flex: 1; font-size: 0.8rem; font-weight: 600; color: var(--hw-text); } .hw-pipeline-row .status { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.125rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; } /* ─── Heute-Widget ─── */ .hw-heute-card { background: var(--hw-ink) !important; color: var(--hw-cream) !important; border: 1px solid var(--hw-ink) !important; position: relative; overflow: hidden; } .hw-heute-card::after { content: ''; position: absolute; right: -2rem; bottom: -2rem; width: 9rem; height: 9rem; background-image: url('/images/logo-haus-waechter.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.1; pointer-events: none; } .hw-heute-card .label { color: var(--hw-accent-2) !important; } .hw-heute-list { margin-top: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 2; } .hw-heute-row { display: flex; gap: 0.75rem; padding: 0.625rem 0.75rem; background: rgba(237, 227, 214, 0.06); border-radius: 0.375rem; border-left: 3px solid var(--hw-accent); } .hw-heute-row .time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; color: var(--hw-accent-2); font-weight: 700; min-width: 3rem; } .hw-heute-row .name { font-size: 0.8rem; font-weight: 600; color: var(--hw-cream); } .hw-heute-row .desc { font-size: 0.7rem; color: rgba(237, 227, 214, 0.6); margin-top: 0.125rem; } /* ─── Modal-Buttons (Per E-Mail senden Modal) ─── */ .fi-modal .fi-btn { border: 1px solid transparent; } /* === Modul 3 Polish === */ /* ================================================================ Polish-Patches Modul 3 - AccountWidget oben verstecken (Filament-Default Welcome) - Filament-Info-Widget verstecken (Default-Footer) - Status-Badges branded ================================================================ */ /* Filament Default-Widgets ausblenden — wir haben unser eigenes WelcomeWidget */ .fi-wi-account-widget, .fi-wi-filament-info-widget, [class*="filament-account"], [class*="filament-info"] { display: none !important; } /* Status-Badges in Brand-Farben (Filament Color Mapping) */ .fi-badge.fi-color-primary { background-color: rgba(194, 99, 41, 0.12) !important; color: var(--hw-accent) !important; border: 1px solid rgba(194, 99, 41, 0.3); } .fi-badge.fi-color-success { background-color: rgba(92, 122, 62, 0.12) !important; color: #5C7A3E !important; border: 1px solid rgba(92, 122, 62, 0.3); } .fi-badge.fi-color-warning { background-color: rgba(194, 138, 42, 0.12) !important; color: #C28A2A !important; border: 1px solid rgba(194, 138, 42, 0.3); } .fi-badge.fi-color-danger { background-color: rgba(168, 68, 44, 0.12) !important; color: #A8442C !important; border: 1px solid rgba(168, 68, 44, 0.3); } .fi-badge.fi-color-gray { background-color: rgba(139, 123, 106, 0.12) !important; color: var(--hw-mute) !important; border: 1px solid rgba(139, 123, 106, 0.3); } /* ─── Zahlungs-Indikator auf Edit-Invoice ─── */ .hw-payment-progress { background: var(--hw-cream-2); border: 1px solid var(--hw-line); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; } .hw-payment-progress .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--hw-mute); text-transform: uppercase; } .hw-payment-progress .value { font-size: 1.1rem; font-weight: 800; color: var(--hw-text); } .hw-payment-progress .bar { flex: 1; height: 8px; background: var(--hw-line-2); border-radius: 999px; overflow: hidden; position: relative; } .hw-payment-progress .bar-fill { height: 100%; background: linear-gradient(90deg, var(--hw-accent), var(--hw-accent-2)); border-radius: 999px; transition: width 200ms; } /* === UI Polish v2 === */ .fi-input-wrp, .fi-fo-text-input, .fi-fo-select, .fi-fo-date-time-picker, .fi-fo-textarea { background-color: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; border-radius: 0.5rem !important; } .fi-input-wrp:focus-within { border-color: var(--hw-accent) !important; box-shadow: 0 0 0 3px rgba(194, 99, 42, 0.15) !important; } button[type="submit"].fi-btn, .fi-form-actions button[type="submit"] { background-color: var(--hw-accent) !important; color: white !important; border: 1px solid var(--hw-accent) !important; font-weight: 700 !important; } .fi-btn[disabled] { opacity: 0.4 !important; } button[role="switch"] { background-color: var(--hw-line) !important; border: 1px solid var(--hw-mute) !important; } button[role="switch"][aria-checked="true"] { background-color: var(--hw-accent) !important; border-color: var(--hw-accent) !important; } input[type="checkbox"], input[type="radio"] { border: 1.5px solid var(--hw-mute) !important; background-color: var(--hw-paper-2) !important; } input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--hw-accent) !important; border-color: var(--hw-accent) !important; } /* === Polish v2: Logo & Brand in Sidebar === */ .fi-sidebar-header { padding: 1.25rem 1.25rem 0.75rem !important; border-bottom: 1px solid rgba(237, 227, 214, 0.12) !important; } /* Logo-Container */ .fi-sidebar-header a, .fi-sidebar-header > div { gap: 0.75rem !important; align-items: center !important; } /* Logo-Bild selbst */ .fi-sidebar-header img, .fi-logo img { max-height: 2.5rem !important; width: auto !important; object-fit: contain !important; } /* Brand-Name (wenn als Text gerendert ohne Logo) */ .fi-sidebar-header span, .fi-logo { font-family: 'Caveat', cursive !important; color: var(--hw-cream) !important; font-size: 1.6rem !important; line-height: 1 !important; letter-spacing: 0.01em !important; } /* Bei kollabierten Sidebar nur Logo, kompakter */ .fi-sidebar.fi-sidebar-collapsed .fi-sidebar-header img { max-height: 2rem !important; } /* Login-Page: Logo zentriert + groesser */ .fi-simple-page .fi-logo, .fi-simple-page .fi-simple-header img { max-height: 4.5rem !important; margin: 0 auto !important; } /* === UI Polish v3: Action-Buttons === */ /* Header-Action-Buttons in Listen (z.B. "+ Wartungsvertrag", "+ Kunde") */ a.fi-btn[class*="color-primary"], button.fi-btn[class*="color-primary"], .fi-header-actions a.fi-btn, .fi-header-actions button.fi-btn, .fi-ta-header-toolbar a.fi-btn, .fi-ta-header-toolbar button.fi-btn { background-color: var(--hw-accent) !important; color: #fff !important; border: 1px solid var(--hw-accent) !important; font-weight: 600 !important; } a.fi-btn[class*="color-primary"]:hover, button.fi-btn[class*="color-primary"]:hover, .fi-header-actions a.fi-btn:hover, .fi-header-actions button.fi-btn:hover { background-color: #A7541F !important; border-color: #A7541F !important; } /* Action-Buttons in der Tabellen-Reihen-Aktion */ .fi-ta-actions a.fi-btn, .fi-ta-actions button.fi-btn { color: var(--hw-accent) !important; } /* Sekundaere Buttons (Color::Gray) - sichtbarer Outline */ a.fi-btn[class*="color-gray"], button.fi-btn[class*="color-gray"] { background-color: var(--hw-paper-2) !important; color: var(--hw-text) !important; border: 1px solid var(--hw-line) !important; } a.fi-btn[class*="color-gray"]:hover, button.fi-btn[class*="color-gray"]:hover { background-color: var(--hw-cream) !important; } /* === UI Polish v3: Action-Buttons === */ a.fi-btn[class*="color-primary"], button.fi-btn[class*="color-primary"], .fi-header-actions a.fi-btn, .fi-header-actions button.fi-btn, .fi-ta-header-toolbar a.fi-btn, .fi-ta-header-toolbar button.fi-btn { background-color: var(--hw-accent) !important; color: #fff !important; border: 1px solid var(--hw-accent) !important; font-weight: 600 !important; } a.fi-btn[class*="color-primary"]:hover, button.fi-btn[class*="color-primary"]:hover, .fi-header-actions a.fi-btn:hover, .fi-header-actions button.fi-btn:hover { background-color: #A7541F !important; border-color: #A7541F !important; } .fi-ta-actions a.fi-btn, .fi-ta-actions button.fi-btn { color: var(--hw-accent) !important; } a.fi-btn[class*="color-gray"], button.fi-btn[class*="color-gray"] { background-color: var(--hw-paper-2) !important; color: var(--hw-text) !important; border: 1px solid var(--hw-line) !important; } a.fi-btn[class*="color-gray"]:hover, button.fi-btn[class*="color-gray"]:hover { background-color: var(--hw-cream) !important; } /* === UI Polish v4: Dashboard-Wireframe-Match === */ /* Filament StatsOverview-Cards mit Brand-Akzent */ .fi-wi-stats-overview-stat, .fi-stats-overview-stat { background: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; border-top: 3px solid var(--hw-mute) !important; border-radius: 6px !important; box-shadow: none !important; padding: 1rem 1.125rem !important; } .fi-wi-stats-overview-stat[class*="primary"], .fi-stats-overview-stat[class*="primary"] { border-top-color: var(--hw-accent) !important; } .fi-wi-stats-overview-stat[class*="success"], .fi-stats-overview-stat[class*="success"] { border-top-color: #5C7A3E !important; } .fi-wi-stats-overview-stat[class*="warning"], .fi-stats-overview-stat[class*="warning"] { border-top-color: #C28A2A !important; } .fi-wi-stats-overview-stat[class*="danger"], .fi-stats-overview-stat[class*="danger"] { border-top-color: #A8442C !important; } /* Stats: Wert groesser, Label uppercase */ .fi-wi-stats-overview-stat-value, .fi-stats-overview-stat-value { font-size: 1.625rem !important; font-weight: 800 !important; color: var(--hw-text) !important; line-height: 1.1 !important; } .fi-wi-stats-overview-stat-label, .fi-stats-overview-stat-label { font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--hw-mute) !important; font-weight: 700 !important; } .fi-wi-stats-overview-stat-description, .fi-stats-overview-stat-description { font-size: 0.6875rem !important; color: var(--hw-mute) !important; } /* Tabellen-Header uppercase + tracking */ .fi-ta-header-cell { font-size: 0.625rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; } /* Status-Badges einheitlich als Pills */ .fi-badge { border-radius: 999px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: 0.625rem !important; font-weight: 700 !important; padding: 2px 8px !important; } /* Custom-Pipeline-Stages mit Brand-Top-Border (greift wenn Widget die Klassen hat) */ .hw-pipeline-stage { background: var(--hw-cream-2) !important; border-radius: 6px; padding: 0.625rem 0.75rem; border-top: 3px solid var(--hw-mute) !important; } .hw-pipeline-stage.stage-anfrage { border-top-color: var(--hw-mute) !important; } .hw-pipeline-stage.stage-geplant { border-top-color: #C28A2A !important; } .hw-pipeline-stage.stage-in-arbeit { border-top-color: var(--hw-accent) !important; } .hw-pipeline-stage.stage-fertig { border-top-color: #5C7A3E !important; } .hw-pipeline-stage .stage-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-mute); } .hw-pipeline-stage .stage-num { font-size: 1.375rem; font-weight: 800; color: var(--hw-text); margin-top: 2px; } /* Heute-Termin-Card-Pattern */ .hw-today-event { border-left: 3px solid var(--hw-accent) !important; background: rgba(237,227,214,0.08) !important; padding: 0.625rem 0.75rem !important; border-radius: 6px; display: flex; gap: 0.75rem; margin-bottom: 0.5rem; } .hw-today-event .time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875rem; color: #E08A4A; font-weight: 700; min-width: 44px; } /* Sidebar-Sektionsueberschriften "STAMMDATEN" etc. mit tracking */ .fi-sidebar-group-label { font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(237,227,214,0.4) !important; padding: 1rem 0.75rem 0.375rem !important; } /* Page-Titel kraefter (h-page Pattern aus Wireframe) */ .fi-header-heading { font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--hw-text) !important; } /* === UI Polish v4b: Pipeline-Cards exakte Klassen === */ .hw-pipeline-col { background: var(--hw-cream-2) !important; border: 1px solid var(--hw-line) !important; border-top: 3px solid var(--hw-mute) !important; border-radius: 6px !important; padding: 0.75rem 0.875rem !important; } .hw-pipeline-col.mute { border-top-color: var(--hw-mute) !important; } .hw-pipeline-col.geplant { border-top-color: #C28A2A !important; } .hw-pipeline-col.inarbeit { border-top-color: var(--hw-accent) !important; } .hw-pipeline-col.fertig { border-top-color: #5C7A3E !important; } .hw-pipeline-col .label { font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--hw-mute) !important; } .hw-pipeline-col .value { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--hw-text) !important; line-height: 1.1 !important; margin-top: 2px !important; } /* Auftrags-Liste unter der Pipeline: outline-Status-Pills */ .hw-pipeline-row { display: flex !important; align-items: center !important; gap: 0.625rem !important; padding: 0.5rem 0.625rem !important; background: #FAF6EC !important; border: 1px solid var(--hw-line) !important; border-radius: 6px !important; margin-bottom: 0.375rem !important; } .hw-pipeline-row .nr { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 0.6875rem !important; color: var(--hw-mute) !important; } .hw-pipeline-row .name { flex: 1 !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--hw-text) !important; min-width: 0 !important; } .hw-pipeline-row .status { font-size: 0.625rem !important; font-weight: 700 !important; border: 1px solid currentColor !important; border-radius: 999px !important; padding: 2px 8px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; white-space: nowrap !important; } /* === Schnellzugriff-Widget === */ .hw-quick-card { background: var(--hw-cream-2) !important; } .hw-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; } .hw-quick-tile { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 6px; text-decoration: none; color: var(--hw-text); font-size: 0.8125rem; font-weight: 600; transition: all 0.15s ease; } .hw-quick-tile:hover { background: var(--hw-cream); border-color: var(--hw-accent); transform: translateY(-1px); } .hw-quick-icon { width: 1rem; height: 1rem; color: var(--hw-accent); flex-shrink: 0; } .hw-quick-label { flex: 1; min-width: 0; } /* === UI Polish v4c: Stats-Cards Inhalt-Layout === */ /* Filament 3 Stats-Card hat .fi-wi-stats-overview-stat-overview als wrapper */ .fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(4, 1fr) !important; gap: 0.75rem !important; } @media (max-width: 1024px) { .fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .fi-wi-stats-overview-stats-ctn { grid-template-columns: 1fr !important; } } /* Stats-Card ohne icon-overhang */ .fi-wi-stats-overview-stat { min-height: 5rem; } /* Pipeline-Cards Top-Border verstaerken (war evtl. zu subtil) */ .hw-pipeline-col { border-width: 1px !important; border-top-width: 4px !important; } /* === UI Polish v4d: Schnellzugriff-Icons sichtbar === */ .hw-quick-tile svg { width: 1.125rem !important; height: 1.125rem !important; color: var(--hw-accent) !important; flex-shrink: 0 !important; } .hw-quick-tile { color: var(--hw-text) !important; } .hw-quick-tile:hover svg { color: #A7541F !important; } /* === Login-Page === */ body.fi-simple-layout { background: var(--hw-paper) !important; } .fi-simple-page { padding: 0 !important; max-width: none !important; width: 100% !important; min-height: 100vh !important; } /* Default Filament-Header (Logo+Heading) verstecken auf Custom-Login */ .fi-simple-header { display: none !important; } /* Custom Login-Shell */ .hw-login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; } @media (max-width: 900px) { .hw-login-shell { grid-template-columns: 1fr; } .hw-login-hero { min-height: 240px; padding: 2rem 1.5rem !important; } .hw-login-slogan { font-size: 1.75rem !important; } .hw-login-form-pane { padding: 1.5rem 1rem !important; } .hw-login-form-card { max-width: 100% !important; } } /* Passwort-vergessen Link unter Form */ .hw-login-forgot { text-align: right; margin: 0.5rem 0 1rem; font-size: 0.85rem; } .hw-login-forgot a { color: var(--hw-accent, #C2632A) !important; text-decoration: none; font-weight: 500; } .hw-login-forgot a:hover { text-decoration: underline; } /* Hero links - Espresso */ .hw-login-hero { background: var(--hw-ink); color: var(--hw-cream); padding: 4rem 3.5rem; display: flex; align-items: center; position: relative; overflow: hidden; } .hw-login-hero::before { content: ''; position: absolute; inset: 0; background-image: url('/images/logo-haus-waechter-light.png'); background-position: -120px center; background-size: 600px; background-repeat: no-repeat; opacity: 0.08; pointer-events: none; } .hw-login-hero-inner { position: relative; z-index: 1; width: 100%; } .hw-login-logo img { height: 4rem; width: auto; margin-bottom: 2.5rem; } .hw-login-tag { background: var(--hw-accent); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px; display: inline-block; margin-bottom: 1.5rem; } .hw-login-slogan { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 3rem; line-height: 1.05; letter-spacing: -0.01em; color: var(--hw-cream); margin: 0 0 1.5rem 0; } .hw-login-slogan br + * { display: inline; } .hw-login-cursive { font-family: 'Caveat', cursive; font-size: 1.5rem; color: rgba(237, 227, 214, 0.7); margin-bottom: 4rem; } .hw-login-footer { font-size: 0.75rem; color: rgba(237, 227, 214, 0.45); letter-spacing: 0.02em; } /* Form-Pane rechts */ .hw-login-form-pane { background: var(--hw-paper); display: flex; align-items: center; justify-content: center; padding: 3rem; } .hw-login-form-card { width: 100%; max-width: 380px; } .hw-login-form-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: var(--hw-mute); margin-bottom: 0.5rem; } .hw-login-form-heading { font-size: 1.875rem; font-weight: 800; color: var(--hw-text); margin: 0 0 2rem 0; letter-spacing: -0.01em; } /* Form-Inputs darin auch sauber */ .hw-login-form .fi-input { background: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; border-radius: 6px !important; } .hw-login-form .fi-input:focus-within { border-color: var(--hw-accent) !important; box-shadow: 0 0 0 3px rgba(194, 99, 42, 0.15) !important; } /* Custom-Login-Texte explizit dunkel (Labels, Checkbox-Label, Hilfetexte) */ .hw-login-form, .hw-login-form *, .hw-login-form label, .hw-login-form input, .hw-login-form .fi-fo-field-wrp-label, .hw-login-form .fi-fo-checkbox-label, .hw-login-form .fi-fo-component-label-default, .hw-login-form .fi-fo-field-wrp-hint { color: var(--hw-text) !important; } .hw-login-form input, .hw-login-form .fi-input input { background-color: var(--hw-paper-2) !important; color: var(--hw-text) !important; } .hw-login-form .fi-fo-field-wrp-hint, .hw-login-form small { color: var(--hw-mute) !important; } .hw-login-form .fi-link, .hw-login-form a { color: var(--hw-accent, #C2632A) !important; } /* === Login-Page Full-Bleed Override === */ .fi-simple-page > div, .fi-simple-main-ctn, .fi-simple-main { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* Filament's default-card-wrapper mit padding-removen */ .fi-simple-main > div, .fi-simple-page section { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Outer body resetten */ body.fi-body.fi-simple-layout, body[class*="fi-simple"] { padding: 0 !important; margin: 0 !important; background: var(--hw-paper) !important; } /* Shell soll viewport fuellen */ .hw-login-shell { width: 100vw !important; min-height: 100vh !important; grid-template-columns: 1fr 1fr !important; } .hw-login-hero { padding: 4rem 3.5rem !important; min-height: 100vh !important; } .hw-login-form-pane { padding: 3rem !important; min-height: 100vh !important; } /* Slogan break-words korrekt zwingen */ .hw-login-slogan { word-break: keep-all !important; white-space: normal !important; hyphens: none !important; } /* Caveat-Cursive vertical statt zerlegt */ .hw-login-cursive { white-space: nowrap !important; } /* Footer einzeilig statt zerschnitten */ .hw-login-footer { white-space: normal !important; line-height: 1.5 !important; } /* === Login-Page Full-Bleed Override === */ .fi-simple-page > div, .fi-simple-main-ctn, .fi-simple-main { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* Filament's default-card-wrapper mit padding-removen */ .fi-simple-main > div, .fi-simple-page section { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Outer body resetten */ body.fi-body.fi-simple-layout, body[class*="fi-simple"] { padding: 0 !important; margin: 0 !important; background: var(--hw-paper) !important; } /* Shell soll viewport fuellen */ .hw-login-shell { width: 100vw !important; min-height: 100vh !important; grid-template-columns: 1fr 1fr !important; } .hw-login-hero { padding: 4rem 3.5rem !important; min-height: 100vh !important; } .hw-login-form-pane { padding: 3rem !important; min-height: 100vh !important; } /* Slogan break-words korrekt zwingen */ .hw-login-slogan { word-break: keep-all !important; white-space: normal !important; hyphens: none !important; } /* Caveat-Cursive vertical statt zerlegt */ .hw-login-cursive { white-space: nowrap !important; } /* Footer einzeilig statt zerschnitten */ .hw-login-footer { white-space: normal !important; line-height: 1.5 !important; } /* === UI Polish v5: Order-Tabs als Stepper im Brand-Look === */ .fi-tabs { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 6px; overflow: hidden; } .fi-tabs nav { background: var(--hw-cream-2) !important; padding: 0.25rem !important; gap: 0.25rem !important; } .fi-tabs-item { border-radius: 4px !important; padding: 0.625rem 1rem !important; font-weight: 600 !important; font-size: 0.8125rem !important; color: var(--hw-mute) !important; transition: all 0.15s ease; } .fi-tabs-item:hover { background: rgba(255,255,255,0.5) !important; color: var(--hw-text) !important; } .fi-tabs-item[aria-selected="true"] { background: var(--hw-accent) !important; color: #fff !important; } .fi-tabs-item[aria-selected="true"] .fi-icon { color: #fff !important; } .fi-tabs-item .fi-badge { margin-left: 0.375rem; } /* === UI Polish v6: Sidebar-Badges + Footer === */ /* Navigation-Badges in Sidebar als pill-Badge */ .fi-sidebar-item-badge { border-radius: 999px !important; font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; padding: 1px 7px !important; min-width: 1.25rem !important; text-align: center !important; } /* Aktive Sidebar-Item: Badge aufhellt */ .fi-sidebar-item.fi-active .fi-sidebar-item-badge { background: rgba(255,255,255,0.85) !important; color: var(--hw-accent) !important; } /* Footer-Slogan Spacing */ .fi-sidebar::after { margin-top: 2rem !important; padding: 0.75rem 0.75rem 1.5rem !important; font-size: 1.125rem !important; } /* === Login-Page Feinschliff === */ @media (min-width: 1200px) { .hw-login-slogan { font-size: 3.5rem !important; } .hw-login-cursive { font-size: 1.75rem !important; } } /* Form-Card kompakt */ .hw-login-form-heading { font-size: 2rem !important; } .hw-login-form .fi-input-wrp { background: var(--hw-paper-2) !important; border-radius: 6px !important; } /* === Customer View-Page === */ .hw-cv-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; } @media (max-width: 1100px) { .hw-cv-grid { grid-template-columns: 1fr; } } .hw-cv-main, .hw-cv-sidebar { display: flex; flex-direction: column; gap: 1rem; } .hw-cv-card { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 1rem 1.125rem; } .hw-cv-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .hw-cv-card-title { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hw-mute); margin-bottom: 0.75rem; } .hw-cv-card-head .hw-cv-card-title { margin-bottom: 0; } .hw-cv-link { font-size: 0.75rem; color: #C2632A; text-decoration: none; font-weight: 600; } .hw-cv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; } .hw-cv-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hw-mute); margin-bottom: 0.125rem; } .hw-cv-value { font-size: 0.875rem; color: var(--hw-text); font-weight: 500; } .hw-cv-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .hw-cv-table thead th { text-align: left; padding: 0.375rem 0.5rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-mute); border-bottom: 1px solid var(--hw-line-2); background: #FAF6EC; } .hw-cv-table tbody td { padding: 0.5rem 0.5rem; border-bottom: 1px solid #F2E9D8; } .hw-cv-table tbody tr:hover { background: #FAF6EC; } .hw-cv-pill { display: inline-block; padding: 1px 7px; border: 1px solid var(--hw-mute); color: var(--hw-mute); border-radius: 999px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .hw-cv-obj-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .hw-cv-obj-name { font-weight: 700; color: var(--hw-text); font-size: 0.875rem; } .hw-cv-obj-addr { font-size: 0.75rem; color: var(--hw-mute); margin-top: 1px; } .hw-cv-obj-meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--hw-text-2); white-space: nowrap; } .hw-cv-dot { width: 6px; height: 6px; border-radius: 50%; background: #C2632A; } .hw-cv-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #C2632A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; } /* === Customer-View Tab-Bar === */ .hw-cv-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hw-line); margin-bottom: 1.5rem; padding: 0 0.25rem; flex-wrap: wrap; } .hw-cv-tab { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--hw-mute); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.15s ease, border-color 0.15s ease; font-family: inherit; } .hw-cv-tab.active { color: var(--hw-text); border-bottom-color: #C2632A; } .hw-cv-tab:hover:not(.active) { color: var(--hw-text); } .hw-cv-tab-count { background: var(--hw-line-2); color: var(--hw-text-2); font-size: 0.6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 1.25rem; text-align: center; } .hw-cv-tab.active .hw-cv-tab-count { background: #C2632A; color: #fff; } /* ================================================================ MOBILE OPTIMIZATION (<= 768px) ================================================================ */ @media (max-width: 768px) { /* === Customer-View / Order-View / Inspection-View === */ .hw-cv-grid-2 { grid-template-columns: 1fr; gap: 0.625rem; } .hw-cv-card { padding: 0.875rem 1rem; } /* Tab-Bar horizontal scrollen statt umbrechen */ .hw-cv-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .hw-cv-tabs::-webkit-scrollbar { display: none; } .hw-cv-tab { flex-shrink: 0; padding: 0.625rem 0.75rem; font-size: 0.8125rem; } /* Tabellen horizontal scrollbar */ .hw-cv-table { display: block; overflow-x: auto; white-space: nowrap; } .hw-cv-table thead, .hw-cv-table tbody, .hw-cv-table tr { display: table; width: 100%; table-layout: fixed; } /* Risiko-Card etwas weniger massiv */ .hw-cv-risk-card { padding: 0.875rem 1rem !important; } /* === Dashboard-Pipeline === */ .hw-pipeline-grid { grid-template-columns: 1fr; gap: 0.5rem; } .hw-pipeline-col { padding: 0.75rem 0.875rem; } /* === Login === */ .hw-login-hero { padding: 1.75rem 1.5rem !important; min-height: 200px !important; } .hw-login-slogan { font-size: 1.625rem !important; } .hw-login-form-wrap, .fi-simple-page main { padding: 1.5rem 1.25rem !important; } /* === Allgemein: Filament Sidebar wird auf mobile als off-canvas === */ /* Sidebar-Slogan ausblenden auf Mobile (lenkt nur ab) */ .hw-sidebar-slogan { display: none; } /* Auftrag-Edit Befall-Banner: Pest + Level untereinander */ .fi-page-subheading > div[style*="display: flex"][style*="gap: 1.5rem"] { flex-direction: column !important; gap: 0.625rem !important; align-items: flex-start !important; } /* Customer-View Avatar + Status-Pill: Status-Pill unter Name */ .fi-page-heading h1 > div[style*="display: flex"][style*="align-items: center"][style*="gap: 1rem"] { flex-wrap: wrap; } } /* === Touch-Targets vergroessern (alle Bildschirme mit Touch-Input) === */ @media (hover: none) and (pointer: coarse) { .hw-cv-tab { min-height: 2.75rem; /* 44px Apple-HIG */ } .hw-cv-table tbody tr { min-height: 2.75rem; } button, .fi-btn, .fi-link { min-height: 2.5rem; } } /* === Wochenkalender === */ .hw-cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.625rem; margin-top: 0.5rem; } .hw-cal-col { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 0.625rem; min-height: 200px; } .hw-cal-col.today { border-color: #C2632A; box-shadow: 0 0 0 2px #C2632A22; } .hw-cal-col.past { background: #FAF6EC; opacity: 0.75; } .hw-cal-day-header { border-bottom: 1px solid var(--hw-line-2); padding-bottom: 0.5rem; margin-bottom: 0.625rem; } .hw-cal-weekday { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hw-mute); } .hw-cal-col.today .hw-cal-weekday { color: #C2632A; } .hw-cal-date { font-size: 1.125rem; font-weight: 800; color: var(--hw-text); line-height: 1.2; } .hw-cal-count { font-size: 0.6875rem; color: var(--hw-mute); margin-top: 2px; } .hw-cal-empty { font-style: italic; color: #B5A78F; text-align: center; padding: 1.5rem 0; font-size: 0.8125rem; } .hw-cal-event { display: block; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-left: 3px solid var(--hw-mute); border-radius: 4px; padding: 0.5rem 0.625rem; margin-bottom: 0.5rem; text-decoration: none; color: inherit; transition: background 0.15s, transform 0.15s; } .hw-cal-event:hover { background: var(--hw-cream-2); transform: translateX(2px); } .hw-cal-event-time { font-family: monospace; font-size: 0.75rem; color: var(--hw-text-2); display: flex; justify-content: space-between; align-items: center; } .hw-cal-event-status { font-family: 'Inter', sans-serif; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .hw-cal-event-title { font-size: 0.8125rem; font-weight: 600; color: var(--hw-text); margin-top: 2px; line-height: 1.3; } .hw-cal-event-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 0.6875rem; color: var(--hw-mute); } .hw-cal-tech { color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 0.625rem; font-weight: 600; } @media (max-width: 768px) { .hw-cal-grid { grid-template-columns: 1fr; } .hw-cal-col { min-height: auto; } } /* === Forecast-Widget === */ .hw-forecast-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; } .hw-forecast-card { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-left: 4px solid var(--hw-fc-color); border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; } .hw-forecast-card:hover { background: var(--hw-paper); transform: translateX(2px); box-shadow: 0 2px 6px rgba(43, 31, 24, 0.08); } .hw-forecast-icon { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: color-mix(in srgb, var(--hw-fc-color) 12%, white); color: var(--hw-fc-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hw-forecast-body { flex: 1; min-width: 0; } .hw-forecast-count { font-size: 1.5rem; font-weight: 800; color: var(--hw-text); line-height: 1; } .hw-forecast-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hw-mute); margin-top: 4px; line-height: 1.3; } .hw-forecast-arrow { font-size: 1rem; color: #B5A78F; transition: color 0.15s, transform 0.15s; } .hw-forecast-card:hover .hw-forecast-arrow { color: var(--hw-fc-color); transform: translateX(2px); } @media (max-width: 1024px) { .hw-forecast-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hw-forecast-grid { grid-template-columns: 1fr; } } /* === Customer Notes Timeline === */ .hw-notes-timeline { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 0.5rem; } .hw-note { display: flex; gap: 0.875rem; padding: 0.75rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-left: 3px solid #C2632A; border-radius: 6px; } .hw-note-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #C2632A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } .hw-note-body { flex: 1; min-width: 0; } .hw-note-meta { font-size: 0.75rem; color: var(--hw-text); margin-bottom: 4px; } .hw-note-text { font-size: 0.875rem; line-height: 1.5; color: var(--hw-text); white-space: pre-wrap; } /* === Customer-View Multi-Contact === */ .hw-cv-contact-item { padding: 0.5rem 0; } .hw-cv-contact-item:first-child { padding-top: 0; } .hw-cv-contact-divider { border-bottom: 1px solid var(--hw-line-2); margin-bottom: 0.5rem; padding-bottom: 0.875rem; } /* === Permissions Matrix === */ .hw-perm-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--hw-line-2); margin-bottom: 1rem; padding-bottom: 0; } .hw-perm-tab { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1rem; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--hw-mute); font-weight: 600; font-size: 0.875rem; cursor: pointer; border-radius: 6px 6px 0 0; margin-bottom: -1px; } .hw-perm-tab.active { background: var(--hw-paper-2); color: var(--hw-text); border-color: var(--hw-line-2); border-bottom-color: #fff; } .hw-perm-readonly { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: #FFF6E0; border: 1px solid #C28A2A; border-radius: 6px; color: #6D4D17; font-size: 0.8125rem; margin-bottom: 1rem; } .hw-perm-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; } .hw-perm-side { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 0.75rem; height: fit-content; } .hw-perm-side-title { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hw-mute); margin-bottom: 0.625rem; padding: 0 0.25rem; } .hw-perm-role-pill { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.625rem; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--hw-text); font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-align: left; margin-bottom: 2px; transition: background 0.15s; } .hw-perm-role-pill:hover { background: var(--hw-paper); } .hw-perm-role-pill.active { background: #FFF6E0; border-color: #C2632A; color: var(--hw-text); font-weight: 600; } .hw-perm-role-count { background: var(--hw-line-2); color: var(--hw-text); padding: 1px 6px; border-radius: 9px; font-size: 0.6875rem; font-family: monospace; font-weight: 600; } .hw-perm-role-pill.active .hw-perm-role-count { background: #C2632A; color: #fff; } .hw-perm-main { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 1rem; overflow: hidden; } .hw-perm-head { margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--hw-line-2); } .hw-perm-head-title { font-size: 1.125rem; font-weight: 700; color: var(--hw-text); } .hw-perm-head-sub { font-size: 0.8125rem; color: var(--hw-mute); margin-top: 2px; } .hw-perm-legend { display: flex; gap: 1rem; padding: 0.5rem 0.75rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; font-size: 0.75rem; color: var(--hw-text-2); margin-bottom: 0.875rem; } .hw-perm-legend-item { display: flex; align-items: center; gap: 0.5rem; } .hw-perm-matrix { width: 100%; border-collapse: collapse; } .hw-perm-matrix th { text-align: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hw-mute); padding: 0.5rem 0.625rem; border-bottom: 2px solid var(--hw-line-2); } .hw-perm-matrix .hw-perm-th-module { text-align: left; width: 40%; } .hw-perm-matrix tbody tr { border-bottom: 1px solid #F0E9D9; } .hw-perm-matrix tbody tr:hover { background: var(--hw-paper); } .hw-perm-td-module { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; font-weight: 600; font-size: 0.875rem; color: var(--hw-text); } .hw-perm-cell { text-align: center; padding: 0.5rem; } .hw-perm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--hw-paper-2); border: 1.5px solid var(--hw-line); color: #fff; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; } .hw-perm-toggle:not(.disabled):hover { transform: scale(1.08); border-color: var(--hw-mute); } .hw-perm-toggle.on { background: #5C7A3E; border-color: #5C7A3E; } .hw-perm-toggle.direct { background: #C2632A; border-color: #C2632A; } .hw-perm-toggle.disabled { cursor: not-allowed; opacity: 0.6; } @media (max-width: 1024px) { .hw-perm-layout { grid-template-columns: 1fr; } .hw-perm-matrix .hw-perm-th-module { width: auto; } } /* === Sidebar-Footer Version-Pille === */ .hw-version-pill { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0.75rem 0.5rem; padding: 0.5rem 0.75rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; font-size: 0.6875rem; color: var(--hw-text-2); text-decoration: none; font-family: monospace; transition: background 0.15s, border-color 0.15s; } .hw-version-pill:hover { background: #FFF6E0; border-color: #C2632A; } .hw-version-dot { width: 6px; height: 6px; background: #5C7A3E; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #5C7A3E33; } .hw-version-text { font-weight: 700; color: var(--hw-text); } .hw-version-codename { color: var(--hw-mute); font-family: 'Inter', sans-serif; font-size: 0.625rem; font-style: italic; } /* === Changelog === */ .hw-cl-head { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .hw-cl-version-pill { display: inline-flex; align-items: center; gap: 0.375rem; background: #C2632A; color: #fff; padding: 0.375rem 0.875rem; border-radius: 999px; font-weight: 700; font-size: 0.875rem; } .hw-cl-codename { color: var(--hw-mute); font-size: 0.875rem; margin-top: 0.5rem; font-style: italic; } .hw-cl-timeline { display: flex; flex-direction: column; gap: 1rem; } .hw-cl-entry { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; padding: 1rem 1.25rem; } .hw-cl-entry.current { border-color: #C2632A; box-shadow: 0 2px 8px rgba(194, 99, 42, 0.12); } .hw-cl-entry.unreleased { background: var(--hw-paper); border-style: dashed; } .hw-cl-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--hw-line-2); } .hw-cl-entry-version { display: flex; align-items: center; gap: 0.625rem; } .hw-cl-tag-version { font-family: monospace; font-weight: 800; font-size: 1rem; color: var(--hw-text); } .hw-cl-tag-unreleased { background: var(--hw-line-2); color: #6B5347; padding: 2px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .hw-cl-tag-codename { color: #C2632A; font-size: 0.875rem; font-style: italic; font-weight: 600; } .hw-cl-entry-date { font-family: monospace; font-size: 0.75rem; color: var(--hw-mute); } .hw-cl-section { margin: 0.75rem 0; } .hw-cl-section-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-cl-section); padding: 2px 8px; background: color-mix(in srgb, var(--hw-cl-section) 12%, white); display: inline-block; border-radius: 4px; margin-bottom: 0.5rem; } .hw-cl-section-list { list-style: none; padding: 0; margin: 0; } .hw-cl-section-list li { padding: 4px 0 4px 1rem; position: relative; font-size: 0.875rem; line-height: 1.5; color: var(--hw-text); } .hw-cl-section-list li::before { content: ""; position: absolute; left: 0; top: 0.875rem; width: 6px; height: 6px; background: var(--hw-cl-section); border-radius: 50%; opacity: 0.6; } /* === Anonymisiert-Banner === */ .hw-anonymized-banner { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; background: #FBE9E5; border: 1px solid #A8442C; border-radius: 6px; color: #6B2A1B; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.875rem; } .hw-anonymized-banner svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* === Audit-Log Timeline === */ .hw-audit-timeline { position: relative; padding-left: 1.25rem; } .hw-audit-timeline::before { content: ""; position: absolute; left: 0.375rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--hw-line-2); } .hw-audit-entry { position: relative; padding: 0.5rem 0; margin-bottom: 0.5rem; } .hw-audit-dot { position: absolute; left: -1rem; top: 0.875rem; width: 12px; height: 12px; border-radius: 50%; background: #C2632A; border: 2px solid #fff; box-shadow: 0 0 0 2px #C2632A33; } .hw-audit-dot.created { background: #5C7A3E; box-shadow: 0 0 0 2px #5C7A3E33; } .hw-audit-dot.updated { background: #C28A2A; box-shadow: 0 0 0 2px #C28A2A33; } .hw-audit-dot.deleted { background: #A8442C; box-shadow: 0 0 0 2px #A8442C33; } .hw-audit-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--hw-text); } .hw-audit-user { font-weight: 700; } .hw-audit-time { color: var(--hw-mute); font-size: 0.6875rem; font-family: monospace; } .hw-audit-action { color: var(--hw-text-2); font-size: 0.75rem; } .hw-audit-changes { margin-top: 0.375rem; padding-left: 0.5rem; border-left: 2px solid var(--hw-line-2); font-size: 0.75rem; line-height: 1.6; color: var(--hw-text-2); } .hw-audit-change-field { font-weight: 600; color: #6B5347; } .hw-audit-change-from { color: #A8442C; font-family: monospace; font-size: 0.6875rem; background: #FBE9E5; padding: 0 4px; border-radius: 3px; } .hw-audit-change-arrow { color: var(--hw-mute); margin: 0 4px; } .hw-audit-change-to { color: #5C7A3E; font-family: monospace; font-size: 0.6875rem; background: #E8F0DD; padding: 0 4px; border-radius: 3px; font-weight: 600; } .hw-audit-empty { color: var(--hw-mute); text-align: center; padding: 1.5rem 0; font-size: 0.875rem; font-style: italic; } /* === Calendar Drag&Drop === */ .hw-cal-hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: #FFF6E0; border: 1px dashed #C28A2A; border-radius: 6px; color: #6D4D17; font-size: 0.75rem; margin-bottom: 0.875rem; } .hw-cal-event-wrapper[draggable="true"] { cursor: grab; } .hw-cal-event-wrapper[draggable="true"]:active { cursor: grabbing; } .hw-cal-event-wrapper.dragging .hw-cal-event { opacity: 0.4; transform: scale(0.97); } .hw-cal-event.draggable { position: relative; transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s; } .hw-cal-event.draggable::before { content: "⋮⋮"; position: absolute; right: 6px; top: 6px; color: #B5A78F; font-size: 10px; letter-spacing: -1px; opacity: 0; transition: opacity 0.12s; line-height: 1; } .hw-cal-event-wrapper:hover .hw-cal-event.draggable::before { opacity: 1; } .hw-cal-col.drop-active { background: #FFF6E0; border-color: #C28A2A; box-shadow: 0 0 0 2px #C28A2A55, inset 0 0 0 2px #C28A2A22; } .hw-cal-col.drop-active .hw-cal-day-header { border-color: #C28A2A; } .hw-cal-day-body { min-height: 80px; } /* === Spesen-Liste === */ .hw-expense-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .hw-expense-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; background: var(--hw-paper-2); border: 1px solid var(--hw-line-2); border-left: 3px solid #C2632A; border-radius: 6px; } .hw-expense-row.billed { opacity: 0.65; border-left-color: var(--hw-mute); } .hw-expense-icon { width: 2.25rem; height: 2.25rem; border-radius: 6px; background: #FFF6E0; color: #C2632A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hw-expense-body { flex: 1; min-width: 0; } .hw-expense-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .hw-expense-head strong { font-size: 0.875rem; color: var(--hw-text); } .hw-expense-type { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hw-mute); background: var(--hw-cream-2); padding: 1px 6px; border-radius: 3px; } .hw-expense-meta { font-size: 0.75rem; color: var(--hw-mute); margin-top: 2px; } .hw-expense-amount { text-align: right; flex-shrink: 0; } .hw-expense-gross { font-weight: 700; color: var(--hw-text); font-size: 0.9375rem; font-family: monospace; } .hw-expense-billable { font-size: 0.6875rem; margin-top: 2px; } /* === Today/Mobile-View === */ .hw-today { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; margin: 0 auto; } .hw-today-nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; position: sticky; top: 0; z-index: 10; } .hw-today-navbtn { padding: 0.5rem 0.875rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; color: var(--hw-text-2); font-weight: 600; cursor: pointer; font-size: 0.875rem; min-width: 44px; min-height: 36px; } .hw-today-navbtn.primary { background: #C2632A; border-color: #C2632A; color: #fff; } .hw-today-navbtn:hover { background: #FFF6E0; } .hw-today-summary { flex: 1; text-align: right; font-size: 0.8125rem; color: var(--hw-text-2); } .hw-today-empty { text-align: center; padding: 3rem 1rem; color: var(--hw-mute); background: var(--hw-paper-2); border: 1px dashed var(--hw-line-2); border-radius: 8px; } .hw-today-empty svg { margin: 0 auto; } .hw-today-list { display: flex; flex-direction: column; gap: 0.625rem; } .hw-today-card { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-left: 4px solid var(--hw-status-color); border-radius: 8px; padding: 0.875rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .hw-today-card.status-completed { opacity: 0.65; background: var(--hw-paper); } .hw-today-card.status-in_progress { box-shadow: 0 0 0 2px var(--hw-status-color)33, 0 1px 4px rgba(0,0,0,0.08); } .hw-today-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .hw-today-time { font-family: monospace; font-weight: 700; font-size: 1.125rem; color: var(--hw-text); } .hw-today-status { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-status-color); background: color-mix(in srgb, var(--hw-status-color) 12%, white); padding: 2px 8px; border-radius: 4px; } .hw-today-title { font-size: 1rem; font-weight: 700; color: var(--hw-text); line-height: 1.3; } .hw-today-cust { margin-top: 4px; font-size: 0.875rem; color: var(--hw-text-2); } .hw-today-addr { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.8125rem; color: #6B5347; background: var(--hw-paper); padding: 0.5rem 0.625rem; border-radius: 6px; } .hw-today-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; } .hw-today-actionbtn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: #FFF6E0; border: 1px solid #C28A2A; border-radius: 6px; color: #6D4D17; font-size: 0.8125rem; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 38px; } .hw-today-actionbtn:hover { background: #FBF1D0; } .hw-today-actionbtn.secondary { background: var(--hw-paper); border-color: var(--hw-line); color: var(--hw-text-2); } .hw-today-actionbtn.primary { background: #C2632A; border-color: #C2632A; color: #fff; } .hw-today-actionbtn:disabled { opacity: 0.5; cursor: not-allowed; } .hw-today-status-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; padding-top: 0.625rem; border-top: 1px solid var(--hw-line-2); } .hw-today-bigbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: 8px; border: none; color: #fff; font-weight: 700; font-size: 0.9375rem; cursor: pointer; min-height: 48px; } .hw-today-bigbtn.start { background: #C28A2A; } .hw-today-bigbtn.start:hover { background: #A77321; } .hw-today-bigbtn.complete { background: #5C7A3E; } .hw-today-bigbtn.complete:hover { background: #4D6532; } .hw-today-quicknote { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px dashed var(--hw-line-2); display: flex; flex-direction: column; gap: 0.5rem; } .hw-today-noteinput { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--hw-line-2); border-radius: 6px; font-size: 0.875rem; background: var(--hw-paper); resize: vertical; font-family: inherit; } .hw-today-noteinput:focus { outline: none; border-color: #C2632A; background: var(--hw-paper-2); } @media (max-width: 480px) { .hw-today-summary { font-size: 0.75rem; } .hw-today-time { font-size: 1rem; } .hw-today-title { font-size: 0.9375rem; } } /* === User-View Stat-Cards === */ .hw-stat-card { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-left: 4px solid var(--hw-stat-color); border-radius: 8px; padding: 0.875rem 1rem; } .hw-stat-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hw-mute); } .hw-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--hw-text); margin-top: 4px; font-family: monospace; } .hw-link-btn { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; background: #FFF6E0; border: 1px solid #C28A2A; border-radius: 4px; color: #6D4D17; text-decoration: none; } .hw-link-btn:hover { background: #FBF1D0; } /* === Document/Anhang Liste === */ .hw-doc-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .hw-doc-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; } .hw-doc-row:hover { background: #FFF6E0; } .hw-doc-icon { width: 2.25rem; height: 2.25rem; border-radius: 6px; background: var(--hw-paper-2); color: #C2632A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--hw-line-2); } .hw-doc-body { flex: 1; min-width: 0; } .hw-doc-name { font-weight: 700; color: var(--hw-text); font-size: 0.875rem; text-decoration: none; word-break: break-word; } .hw-doc-name:hover { color: #C2632A; } .hw-doc-meta { font-size: 0.6875rem; color: var(--hw-mute); margin-top: 2px; line-height: 1.4; } .hw-doc-download { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #C2632A; color: #fff; text-decoration: none; font-size: 1rem; font-weight: 700; flex-shrink: 0; } .hw-doc-download:hover { background: #A14F1E; } /* === Today: Tasks-Section === */ .hw-today-tasks { background: #FFF6E0; border: 1px solid #E8C97A; border-radius: 8px; padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; } .hw-today-tasks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .hw-today-task-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; background: var(--hw-paper-2); border: 1px solid var(--hw-line-2); border-left: 3px solid var(--hw-pri-color); border-radius: 6px; } .hw-today-task-pri { width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.6875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: monospace; } .hw-today-task-body { flex: 1; min-width: 0; } .hw-today-task-title { font-weight: 700; color: var(--hw-text); font-size: 0.875rem; line-height: 1.3; } .hw-today-task-meta { font-size: 0.6875rem; color: var(--hw-mute); margin-top: 2px; } .hw-today-task-done { width: 2rem; height: 2rem; border-radius: 6px; background: #5C7A3E; color: #fff; font-weight: 800; font-size: 1rem; border: none; cursor: pointer; flex-shrink: 0; } .hw-today-task-done:hover { background: #4D6532; } /* === KPI-Dashboard === */ .hw-kpi { display: flex; flex-direction: column; gap: 1rem; } .hw-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; } @media (max-width: 768px) { .hw-kpi-row { grid-template-columns: repeat(2, 1fr); } } .hw-kpi-card { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-left: 4px solid var(--c, var(--hw-mute)); border-radius: 8px; padding: 1rem 1.125rem; } .hw-kpi-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hw-mute); } .hw-kpi-value { font-size: 1.625rem; font-weight: 800; color: var(--hw-text); margin-top: 6px; font-family: monospace; line-height: 1.1; } .hw-kpi-sub { font-size: 0.75rem; color: var(--hw-mute); margin-top: 4px; } .hw-kpi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 1024px) { .hw-kpi-grid-2 { grid-template-columns: 1fr; } } /* === Menu-Editor (Mobile-First) === */ .hw-menu-editor { display: flex; flex-direction: column; gap: 0.875rem; max-width: 880px; margin: 0 auto; -webkit-tap-highlight-color: transparent; } .hw-menu-banner { background: #FFF6E0; border: 1px solid #E8C97A; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.8125rem; color: #6D4D17; line-height: 1.5; } .hw-menu-mobile-hint { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #E8C97A; font-size: 0.75rem; } @media (min-width: 768px) { .hw-menu-mobile-hint { display: none; } } /* Action-Bar */ .hw-menu-actions { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background: rgba(251, 248, 242, 0.95); backdrop-filter: blur(6px); border-radius: 8px; margin: -0.5rem -0.5rem 0.5rem -0.5rem; } .hw-menu-save-btn, .hw-menu-reset-btn, .hw-menu-addgrp-btn { flex: 1; min-width: 120px; min-height: 44px; padding: 0.625rem 0.875rem; border-radius: 8px; font-weight: 700; font-size: 0.875rem; cursor: pointer; border: 1px solid; text-align: center; } .hw-menu-save-btn { background: #C2632A; border-color: #C2632A; color: #fff; } .hw-menu-save-btn:disabled { opacity: 0.5; cursor: not-allowed; } .hw-menu-save-btn:hover:not(:disabled) { background: #A14F1E; } .hw-menu-reset-btn { background: var(--hw-paper); border-color: var(--hw-line); color: var(--hw-text-2); } .hw-menu-reset-btn:hover { background: #FFF6E0; } .hw-menu-addgrp-btn { background: #FFF6E0; border-color: #C28A2A; color: #6D4D17; flex: 0 1 auto; min-width: 100px; } .hw-menu-addgrp-btn:hover { background: #FBF1D0; } @media (min-width: 768px) { .hw-menu-actions { position: relative; backdrop-filter: none; background: transparent; margin: 0; padding: 0; } .hw-menu-save-btn, .hw-menu-reset-btn { flex: 0 1 auto; } .hw-menu-addgrp-btn { margin-left: auto; } } /* Sections */ .hw-menu-section { background: var(--hw-paper-2); border: 1px solid var(--hw-line); border-radius: 8px; overflow: hidden; } .hw-menu-section-head { background: var(--hw-paper); padding: 0.625rem 0.875rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hw-line-2); gap: 0.5rem; } .hw-menu-section-label { font-weight: 700; color: var(--hw-text); font-size: 0.9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hw-menu-grp-actions { margin-left: 0.5rem; display: inline-flex; gap: 4px; } .hw-menu-grp-actions button { border: none; background: transparent; cursor: pointer; font-size: 1rem; padding: 6px 10px; border-radius: 4px; min-width: 36px; min-height: 36px; } .hw-menu-grp-actions button:hover { background: var(--hw-line-2); } .hw-menu-section-count { font-size: 0.75rem; color: var(--hw-mute); font-family: monospace; background: var(--hw-paper-2); padding: 2px 8px; border-radius: 12px; border: 1px solid var(--hw-line-2); } /* Item-Liste */ .hw-menu-items { padding: 0.5rem; min-height: 60px; display: flex; flex-direction: column; gap: 6px; } .hw-menu-empty { text-align: center; color: var(--hw-mute); font-size: 0.75rem; padding: 1rem 0.75rem; font-style: italic; border: 1px dashed var(--hw-line-2); border-radius: 6px; } /* Item: groesser auf Mobile (44px+ Tap-Target) */ .hw-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.5rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; min-height: 56px; transition: opacity 0.15s, background 0.15s; } .hw-menu-item:hover { background: #FFF6E0; } .hw-menu-item.is-hidden { opacity: 0.5; background: #f5f0e6; } .hw-menu-handle { color: var(--hw-mute); cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; padding: 8px 6px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; touch-action: none; } .hw-menu-handle:active { cursor: grabbing; background: var(--hw-line-2); } .hw-menu-handle svg { pointer-events: none; } .hw-menu-label-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hw-menu-label { font-size: 0.9375rem; color: var(--hw-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-menu-kind { font-size: 0.6875rem; color: var(--hw-mute); background: var(--hw-paper-2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--hw-line-2); align-self: flex-start; font-weight: 400; } .hw-menu-toggle { border: 1px solid var(--hw-line-2); background: var(--hw-paper-2); font-size: 1.125rem; cursor: pointer; padding: 0; border-radius: 6px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hw-menu-toggle:hover { background: #FFF6E0; } .hw-menu-toggle:active { transform: scale(0.95); } .hw-menu-toggle.is-off { background: #FFE3D8; border-color: #E8B4A0; color: #A8442C; } /* Drag-Feedback */ .hw-menu-ghost { opacity: 0.4; background: #FFF6E0 !important; border-style: dashed !important; } .hw-menu-chosen { box-shadow: 0 0 0 2px #C2632A; } .hw-menu-drag { cursor: grabbing !important; box-shadow: 0 8px 24px rgba(194, 99, 42, 0.3); background: var(--hw-paper-2) !important; transform: scale(1.02); } @media (max-width: 480px) { .hw-menu-section-label { font-size: 0.875rem; } .hw-menu-label { font-size: 0.875rem; } .hw-menu-kind { display: none; } .hw-menu-banner { font-size: 0.75rem; } .hw-menu-empty { padding: 0.75rem 0.5rem; font-size: 0.6875rem; } } /* === Customer Communications === */ .hw-comm-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .hw-comm-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-left: 4px solid var(--c, var(--hw-mute)); border-radius: 6px; } .hw-comm-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--hw-paper-2); color: var(--c, var(--hw-mute)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--c, var(--hw-line-2)); } .hw-comm-body { flex: 1; min-width: 0; } .hw-comm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; } .hw-comm-channel { font-size: 0.6875rem; font-weight: 700; color: var(--c, var(--hw-mute)); text-transform: uppercase; letter-spacing: 0.06em; } .hw-comm-direction { font-size: 0.75rem; font-weight: 600; } .hw-comm-badge { font-size: 0.6875rem; font-weight: 700; padding: 1px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; } .hw-comm-badge.new { background: #FFF6E0; color: #6D4D17; border: 1px solid #E8C97A; } .hw-comm-badge.followup { background: #FFE3D8; color: #8C381E; border: 1px solid #E8B4A0; } .hw-comm-badge.resp { background: #FFE5E5; color: #A8442C; border: 1px solid #F0BFBF; } .hw-comm-subject { font-size: 0.9375rem; font-weight: 700; color: var(--hw-text); line-height: 1.3; margin-bottom: 4px; } .hw-comm-content { font-size: 0.875rem; color: var(--hw-text-2); line-height: 1.5; white-space: pre-wrap; margin-bottom: 6px; } .hw-comm-meta { font-size: 0.75rem; color: var(--hw-mute); line-height: 1.4; } /* === PDF Template Editor === */ .hw-pdf-editor { display: flex; flex-direction: column; gap: 1rem; } .hw-pdf-tabs { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 8px; padding: 0.5rem; } .hw-pdf-tab { padding: 0.5rem 1rem; border: 1px solid var(--hw-line); background: var(--hw-paper-2); border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 600; } .hw-pdf-tab.active { background: #C2632A; color: #fff; border-color: #C2632A; } .hw-pdf-tab:not(.active):hover { background: #FFF6E0; } .hw-pdf-tabs-actions { margin-left: auto; display: flex; gap: 0.5rem; } .hw-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 1100px) { .hw-pdf-grid { grid-template-columns: 1fr; } } .hw-pdf-edit-col, .hw-pdf-preview-col { display: flex; flex-direction: column; gap: 1rem; } .hw-pdf-textarea { width: 100%; min-height: 200px; font-family: 'Courier New', monospace; font-size: 0.75rem; padding: 0.625rem; border: 1px solid var(--hw-line); border-radius: 6px; background: var(--hw-paper); line-height: 1.5; resize: vertical; } .hw-pdf-cols { display: flex; flex-direction: column; gap: 4px; } .hw-pdf-col { display: grid; grid-template-columns: 24px 110px 1fr 70px 80px 36px; gap: 6px; align-items: center; background: var(--hw-paper); border: 1px solid var(--hw-line-2); border-radius: 6px; padding: 6px; } .hw-pdf-col.is-hidden { opacity: 0.45; } .hw-pdf-col-handle { cursor: grab; color: var(--hw-mute); text-align: center; user-select: none; } .hw-pdf-col-handle:active { cursor: grabbing; } .hw-pdf-col-key { font-family: monospace; font-size: 0.6875rem; color: var(--hw-mute); background: var(--hw-paper-2); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--hw-line-2); overflow: hidden; text-overflow: ellipsis; } .hw-pdf-col-input, .hw-pdf-col-width, .hw-pdf-col-align { border: 1px solid var(--hw-line); border-radius: 4px; padding: 4px 6px; font-size: 0.8125rem; background: var(--hw-paper-2); } .hw-pdf-col-toggle { border: 1px solid var(--hw-line-2); background: var(--hw-paper-2); border-radius: 4px; cursor: pointer; font-size: 1rem; } .hw-pdf-settings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem 1rem; } .hw-pdf-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--hw-mute); font-weight: 600; } .hw-pdf-settings input, .hw-pdf-settings select { border: 1px solid var(--hw-line); border-radius: 4px; padding: 5px 8px; font-size: 0.875rem; background: var(--hw-paper-2); } .hw-pdf-settings input[type="color"] { height: 32px; padding: 2px; cursor: pointer; } .hw-pdf-toggle-label { flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.875rem !important; color: var(--hw-text) !important; } .hw-pdf-vars { display: flex; flex-wrap: wrap; gap: 4px; max-height: 240px; overflow-y: auto; } .hw-pdf-var-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--hw-paper-2); border: 1px solid var(--hw-line-2); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 0.6875rem; transition: background 0.15s; } .hw-pdf-var-pill code { color: #C2632A; font-weight: 700; } .hw-pdf-var-label { color: var(--hw-mute); font-size: 0.6875rem; } .hw-pdf-var-pill:hover { background: #FFF6E0; } .hw-pdf-var-pill.copied { background: #5C7A3E; color: #fff; } .hw-pdf-var-pill.copied code, .hw-pdf-var-pill.copied .hw-pdf-var-label { color: #fff; } .hw-pdf-preview-card { position: sticky; top: 1rem; } .hw-pdf-preview-iframe { width: 100%; height: 760px; border: 1px solid var(--hw-line-2); border-radius: 6px; background: var(--hw-paper-2); } @media (max-width: 1100px) { .hw-pdf-preview-card { position: relative; top: 0; } .hw-pdf-preview-iframe { height: 500px; } } /* ──────────────────────────────────────────────────── * Polish v3: Compact Inbox Row * ──────────────────────────────────────────────────── */ /* Header verstecken wenn nur ViewColumn — Spaltenkoepfe sind leer */ .fi-resource-customer-communications .fi-ta-header-cell { display: none; } .fi-resource-customer-communications .fi-ta-table thead { display: none; } /* Zell-Padding rausnehmen — die Row managed das selber */ .fi-resource-customer-communications .fi-ta-cell:has(.hw-inbox-row), .fi-resource-customer-communications .fi-ta-cell:has(.hw-inbox-row) > * { padding: 0 !important; } .hw-inbox-row { display: grid; grid-template-columns: 18px 1fr 64px; gap: 12px; align-items: center; padding: 10px 1rem 10px 1.25rem; border-left: 3px solid transparent; font-size: 13px; line-height: 1.3; color: rgba(76, 70, 64, 0.75); transition: background-color .12s ease; min-height: 38px; } .hw-inbox-row.is-unread { color: #2c2622; background: rgba(194, 99, 42, 0.05); border-left-color: #C2632A; padding-left: calc(1.25rem - 3px); } .hw-inbox-row.is-unread .hw-sender, .hw-inbox-row.is-unread .hw-subj { font-weight: 600; } .hw-inbox-row.is-unread .hw-date { color: #C2632A; font-weight: 600; } .fi-ta-row:hover .hw-inbox-row { background: rgba(194, 99, 42, 0.08); } .hw-inbox-row .hw-icn { width: 16px; height: 16px; color: rgba(120, 113, 108, 0.7); display: flex; align-items: center; justify-content: center; } .hw-inbox-row .hw-icn svg { width: 16px; height: 16px; } .hw-inbox-row .hw-line { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; } .hw-inbox-row .hw-sender { flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-inbox-row .hw-tag { flex-shrink: 0; font-size: 10.5px; padding: 1px 7px; border-radius: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; line-height: 1.5; } .hw-tag-kunde { background: #E6F1FB; color: #0C447C; } .hw-tag-lief { background: #EEEDFE; color: #3C3489; } .hw-tag-intern { background: #F1EFE8; color: #444441; } .hw-tag-job { background: #E1F5EE; color: #0F6E56; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; } .hw-inbox-row .hw-dot { flex-shrink: 0; color: rgba(120,113,108,0.4); font-size: 13px; } .hw-inbox-row .hw-subj-wrap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-inbox-row .hw-subj { color: #2c2c2a; } .hw-inbox-row .hw-prev { color: rgba(120, 113, 108, 0.7); font-weight: 400; } .hw-inbox-row .hw-attach { flex-shrink: 0; color: rgba(120, 113, 108, 0.6); } .hw-inbox-row .hw-date { text-align: right; color: rgba(120, 113, 108, 0.75); font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ── v3.1: zusätzliche Chips & outbound-state ── */ .hw-tag-supplier { background: #EEEDFE; color: #3C3489; } .hw-tag-warn { background: #FAEEDA; color: #854F0B; } .hw-inbox-row.is-outbound { color: rgba(76, 70, 64, 0.6); } .hw-inbox-row.is-outbound .hw-icn { color: rgba(120, 113, 108, 0.5); } .hw-prefix { flex-shrink: 0; font-size: 11px; color: rgba(120, 113, 108, 0.7); font-weight: 500; letter-spacing: 0.02em; } /* ── v3.2: Sidebar Brand Block + Header bereinigen ── */ .fi-sidebar-header { display: none !important; } .hw-brand-block { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 0.5px solid rgba(237,227,214,0.07); margin-bottom: 4px; } .hw-brand-logo { height: 34px; width: auto; flex-shrink: 0; object-fit: contain; } .hw-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .hw-brand-name { font-weight: 500; font-size: 14px; color: #EDE3D6; letter-spacing: 0.01em; } .hw-brand-tag { font-size: 9.5px; color: rgba(237,227,214,0.5); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } /* ── v3.3: ToggleButtons (Firma / Privatperson) — weiss-auf-weiss Fix ── */ .fi-fo-toggle-buttons-option, [role="radiogroup"] button[role="radio"] { background: var(--hw-paper-2) !important; color: #2c2622 !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; } .fi-fo-toggle-buttons-option:hover, [role="radiogroup"] button[role="radio"]:hover { background: #faf6f0 !important; color: #C2632A !important; border-color: rgba(194, 99, 42, 0.35) !important; } .fi-fo-toggle-buttons-option[aria-pressed="true"], .fi-fo-toggle-buttons-option[aria-checked="true"], .fi-fo-toggle-buttons-option[data-checked="true"], [role="radiogroup"] button[role="radio"][aria-checked="true"], [role="radiogroup"] button[role="radio"][aria-pressed="true"] { background: #C2632A !important; color: #fff !important; border-color: #C2632A !important; } .fi-fo-toggle-buttons-option[aria-pressed="true"] svg, .fi-fo-toggle-buttons-option[aria-checked="true"] svg, .fi-fo-toggle-buttons-option[data-checked="true"] svg, [role="radiogroup"] button[role="radio"][aria-checked="true"] svg { color: #fff !important; } /* ── v3.4: Mail-Body Iframe-Container in Kommunikationsverlauf ── */ .hw-comm-content-frame { margin-top: 8px; } .hw-mail-iframe { width: 100%; border: 1px solid rgba(139, 123, 106, 0.20); border-radius: 6px; background: var(--hw-paper-2); display: block; min-height: 60px; max-height: 360px; } .hw-mail-open { display: inline-block; margin-top: 6px; font-size: 11px; color: #C2632A; text-decoration: none; font-weight: 500; } .hw-mail-open:hover { text-decoration: underline; } /* ================================================================ SAFETY-OVERRIDES für Mobile/Tablet — verhindert weiße Schrift auf weiß bei Modals, Repeater und Form-Komponenten ================================================================ */ .fi-modal-window, .fi-modal-window .fi-fo-field-wrp, .fi-modal-window .fi-fo-field-wrp-label, .fi-modal-window .fi-section, .fi-modal-window .fi-fo-repeater-item-content, .fi-modal-window .fi-modal-content { color: var(--hw-text) !important; } .fi-modal-window .fi-input, .fi-modal-window .fi-fo-text-input input, .fi-modal-window .fi-fo-select input, .fi-modal-window .fi-fo-select select, .fi-modal-window textarea, .fi-modal-window select, .fi-fo-repeater textarea, .fi-fo-repeater .fi-input, .fi-fo-repeater select, .fi-fo-repeater input[type="text"], .fi-fo-repeater input[type="number"] { background-color: var(--hw-paper-2, #ffffff) !important; color: var(--hw-text) !important; } .fi-modal-window .fi-fo-field-wrp-label, .fi-modal-window label, .fi-fo-repeater label, .fi-modal-window .fi-section-header-heading, .fi-modal-window .fi-section-header-description { color: var(--hw-text-2) !important; } .fi-modal-window .fi-fo-placeholder, .fi-modal-window .fi-fo-field-wrp-hint, .fi-modal-window .fi-fo-field-wrp small { color: var(--hw-mute) !important; } .fi-fo-repeater-item-header, .fi-fo-repeater-item-header * { color: var(--hw-text) !important; } .fi-fo-radio-option label, .fi-fo-radio-option-label, .fi-fo-radio-option-description { color: var(--hw-text) !important; } .fi-fo-radio-option-description { color: var(--hw-mute) !important; } /* Edit-Page-Form: Inhalte und Labels nicht weiß-auf-weiß */ .fi-page .fi-fo-component-ctn, .fi-page .fi-fo-component-ctn label, .fi-page .fi-fo-field-wrp-label { color: var(--hw-text) !important; } /* ================================================================ TABLE-FIX: Filament-Tabellen auf Pages — erzwinge dunklen Text gegen Dark-Mode-Auto-Variante die in Mobile/Tablet greift ================================================================ */ .fi-page .fi-ta-table, .fi-page .fi-ta-table thead, .fi-page .fi-ta-table tbody, .fi-page .fi-ta-table tr, .fi-page .fi-ta-table th, .fi-page .fi-ta-table td, .fi-page .fi-ta-text, .fi-page .fi-ta-text-item, .fi-page .fi-ta-text-item-label, .fi-page .fi-ta-header-cell-label, .fi-page .fi-ta-record-content, .fi-page .fi-ta-cell, .fi-page .fi-ta-empty-state-heading, .fi-page .fi-ta-empty-state-description { color: var(--hw-text) !important; } /* Mute fuer subtile Bereiche */ .fi-page .fi-ta-header-cell, .fi-page .fi-ta-text-item-description, .fi-page .fi-ta-text-item-prefix, .fi-page .fi-ta-text-item-suffix, .fi-page .fi-ta-empty-state-description { color: var(--hw-mute) !important; } /* Aber: Badges und Buttons in der Tabelle behalten ihre weiße Text-Farbe */ .fi-page .fi-badge, .fi-page .fi-badge *, .fi-page .fi-btn, .fi-page .fi-btn *, .fi-page .fi-ta-actions .fi-btn, .fi-page .fi-ta-actions .fi-btn * { color: inherit !important; } /* Filament Badge mit eigenem Style soll seine Farbe behalten */ .fi-page .fi-badge[class*="fi-color-"] { color: #ffffff !important; } /* Spezifisch fuer farbige Badges (status, technician chip etc.) */ .fi-page .fi-badge.fi-color-gray { color: var(--hw-text) !important; background-color: var(--hw-cream-2) !important; } /* ================================================================ ACTIONGROUP-DROPDOWN: Items als Buttons stylen statt schlichte Text-Links ================================================================ */ .fi-dropdown-panel .fi-dropdown-list { padding: 0.5rem !important; display: flex !important; flex-direction: column !important; gap: 0.35rem !important; } .fi-dropdown-list .fi-dropdown-list-item { border-radius: 0.5rem !important; padding: 0.55rem 0.85rem !important; font-weight: 500 !important; border: 1px solid transparent !important; transition: filter 120ms !important; width: 100% !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; cursor: pointer !important; } .fi-dropdown-list .fi-dropdown-list-item:hover { filter: brightness(0.92); } /* Pro Farbe einen kraeftigen Button-Look */ .fi-dropdown-list .fi-dropdown-list-item.fi-color-success, .fi-dropdown-list .fi-color-success { background-color: #5C7A3E !important; color: #ffffff !important; } .fi-dropdown-list .fi-dropdown-list-item.fi-color-info, .fi-dropdown-list .fi-color-info { background-color: #2C5C7A !important; color: #ffffff !important; } .fi-dropdown-list .fi-dropdown-list-item.fi-color-danger, .fi-dropdown-list .fi-color-danger { background-color: #B23A1F !important; color: #ffffff !important; } .fi-dropdown-list .fi-dropdown-list-item.fi-color-warning, .fi-dropdown-list .fi-color-warning { background-color: #C28A2A !important; color: #ffffff !important; } .fi-dropdown-list .fi-dropdown-list-item.fi-color-gray, .fi-dropdown-list .fi-color-gray, .fi-dropdown-list .fi-dropdown-list-item:not([class*="fi-color-"]) { background-color: var(--hw-cream-2) !important; color: var(--hw-text) !important; } /* Icon + Label-Text */ .fi-dropdown-list .fi-dropdown-list-item-icon, .fi-dropdown-list .fi-dropdown-list-item-label { color: inherit !important; } /* Panel selber: fester Hintergrund */ .fi-dropdown-panel { background-color: var(--hw-paper-2) !important; border: 1px solid var(--hw-line) !important; box-shadow: 0 8px 20px rgba(43, 31, 24, 0.15) !important; border-radius: 0.6rem !important; min-width: 13rem !important; } /* Page-Heading und Untertitel */ .fi-page .fi-header-heading, .fi-page .fi-section-header-heading, .fi-page .fi-header-subheading { color: var(--hw-text) !important; } /* Page-Filter-Boxen */ .fi-page .fi-ta-filters, .fi-page .fi-ta-filters * { color: var(--hw-text-2) !important; } .fi-page .fi-ta-filters .fi-badge { color: #ffffff !important; } /* ================================================================ SIMPLE-PAGES (Login, Register, Forgot/Reset Password) Filament 3 nutzt .fi-simple-page statt .fi-page ================================================================ */ .fi-simple-page, .fi-simple-page .fi-simple-main, .fi-simple-main-ctn, .fi-simple-page .fi-section, .fi-simple-page .fi-form, .fi-simple-page .fi-fo-component-ctn { color: var(--hw-text) !important; } .fi-simple-page .fi-simple-main { background-color: var(--hw-paper-2, #ffffff) !important; box-shadow: 0 4px 12px rgba(43, 31, 24, 0.08) !important; } .fi-simple-page, body:has(.fi-simple-page) { background-color: var(--hw-cream-2) !important; } .fi-simple-page h1, .fi-simple-page h2, .fi-simple-page h3, .fi-simple-page p, .fi-simple-page label, .fi-simple-page .fi-fo-field-wrp-label, .fi-simple-page .fi-fo-component-label-default, .fi-simple-page .fi-simple-header-heading, .fi-simple-page .fi-simple-header-sub-heading { color: var(--hw-text) !important; } .fi-simple-page input, .fi-simple-page select, .fi-simple-page textarea, .fi-simple-page .fi-input { background-color: var(--hw-paper-2, #ffffff) !important; color: var(--hw-text) !important; border: 1px solid var(--hw-line) !important; } .fi-simple-page small, .fi-simple-page .fi-fo-field-wrp-hint, .fi-simple-page .fi-fo-field-wrp-helper-text { color: var(--hw-mute) !important; } .fi-simple-page a { color: var(--hw-accent, #C2632A) !important; } /* Signature-Pad Sicherheit */ [data-pad-wrapper] canvas { background-color: #ffffff !important; } /* ================================================================ MODAL-PANEL HINTERGRUND (only on the WINDOW, not the backdrop) ================================================================ */ .fi-modal-window { background-color: var(--hw-paper-2) !important; color: var(--hw-text) !important; } .fi-modal-window .fi-section, .fi-modal-window .fi-section-content, .fi-modal-window .fi-fo-component-ctn { background-color: var(--hw-paper-2) !important; } /* Force dark text on ALL non-button/non-badge content in modal window — weil das Filament-Dark-CSS sonst weiße Schrift auf unsere weißen Panels schreibt */ .fi-modal-window p, .fi-modal-window span:not([class*="fi-badge"]):not([class*="badge"]), .fi-modal-window label, .fi-modal-window h1, .fi-modal-window h2, .fi-modal-window h3, .fi-modal-window h4, .fi-modal-window strong, .fi-modal-window em, .fi-modal-window li, .fi-modal-window th, .fi-modal-window td, .fi-modal-window legend, .fi-modal-window option, .fi-modal-window input, .fi-modal-window textarea, .fi-modal-window select, .fi-modal-window .fi-input, .fi-modal-window .fi-fo-field-wrp-label, .fi-modal-window .fi-section-header-heading, .fi-modal-window .fi-section-header-description, .fi-modal-window .fi-modal-heading, .fi-modal-window .fi-modal-description, .fi-modal-window .fi-fo-radio-option-label, .fi-modal-window .fi-fo-radio-option-description, .fi-modal-window .fi-fo-field-wrp-hint, .fi-modal-window .fi-fo-placeholder, .fi-modal-window .fi-fo-component-label-default, .fi-modal-window .fi-link, .fi-modal-window .fi-text { color: var(--hw-text) !important; } /* Hilfstext etwas heller (Mute), aber lesbar */ .fi-modal-window .fi-fo-field-wrp-hint, .fi-modal-window .fi-fo-placeholder, .fi-modal-window .fi-fo-field-wrp-helper-text, .fi-modal-window small { color: var(--hw-mute) !important; } /* Repeater-Item-Header (z.B. "0001 Maus — Befall") sichtbar */ .fi-modal-window .fi-fo-repeater-item-header, .fi-modal-window .fi-fo-repeater-item-label, .fi-modal-window .fi-fo-repeater-item-header * { color: var(--hw-text) !important; } /* === Sidebar schmaler — Filament rechnet Offset selbst via --sidebar-width === */ :root { --sidebar-width: 13rem !important; --collapsible-sidebar-width: 13rem !important; } .fi-sidebar { width: 13rem !important; } .fi-sidebar-nav-groups .fi-sidebar-item-label { white-space: nowrap; } /* Filaments innere max-width-Begrenzung des Page-Wrappers aufheben — Content nutzt volle Breite */ .fi-main, .fi-main-ctn, .fi-page, .fi-resource-page, .fi-resource-list-records-page, .fi-resource-edit-record-page, .fi-resource-view-record-page { max-width: none !important; width: 100% !important; } /* Page-Wrapper-Padding reduzieren — mehr Platz für Tabellen */ .fi-page-content, .fi-resource-list-records-page .fi-section, .fi-resource-edit-record-page .fi-section { max-width: none !important; } /* Tabellen voll ausnutzen — Spalten dürfen wrappen statt horizontal zu scrollen */ .fi-ta, .fi-ta-ctn, .fi-ta-content, .fi-ta-table { max-width: none !important; width: 100% !important; } .fi-ta-content { overflow-x: auto !important; } /* Fallback wenn doch breiter */ .fi-ta-table { table-layout: auto !important; } .fi-ta-cell { white-space: normal !important; } /* Wrap statt nowrap */ .fi-ta-text-item-label, .fi-badge-label { white-space: normal !important; word-break: break-word; } /* === Positionen-Repeater im Rechnungs-Zeilen-Look === */ .hw-positions-section .hw-pos-header { display: grid; grid-template-columns: repeat(16, 1fr); gap: 0.5rem; padding: 0 0.75rem 0.25rem; border-bottom: 1px solid var(--hw-line); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hw-mute); } .hw-positions-section .hw-pos-col.hw-pos-num { text-align: right; } .hw-positions-section .hw-pos-col:nth-child(1) { grid-column: span 4; } /* Beschreibung */ .hw-positions-section .hw-pos-col:nth-child(2) { grid-column: span 2; } /* Menge */ .hw-positions-section .hw-pos-col:nth-child(3) { grid-column: span 1; } /* Einheit */ .hw-positions-section .hw-pos-col:nth-child(4) { grid-column: span 3; } /* Preis */ .hw-positions-section .hw-pos-col:nth-child(5) { grid-column: span 2; } /* Steuer */ .hw-positions-section .hw-pos-col:nth-child(6) { grid-column: span 2; } /* Σ netto */ .hw-positions-section .hw-pos-col:nth-child(7) { grid-column: span 2; } /* Σ brutto */ /* Repeater-Items kompakter */ .hw-positions-repeater .fi-fo-repeater-item { padding: 0.5rem 0.75rem !important; background: var(--hw-paper) !important; border: 1px solid var(--hw-line-2) !important; border-radius: 6px !important; margin-bottom: 0.5rem !important; } .hw-positions-repeater .fi-fo-repeater-item-header { display: none !important; } /* Hauptzeile (Grid 16 cols): komplett Labels, Sternchen, Hint-Wrapper ausblenden */ .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child label, .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child .fi-fo-field-wrp-label, .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child .fi-fo-field-wrp-label-section, .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child .fi-fo-field-wrp-hint-wrapper, .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child .fi-required-mark { display: none !important; } .hw-positions-repeater .fi-fo-field-wrp { gap: 0 !important; } /* Meta-Zeile: Labels + Helper-Texte sichtbar */ .hw-positions-meta .fi-fo-field-wrp-label { display: block !important; } .hw-positions-meta .fi-fo-field-wrp-hint-wrapper { display: block !important; } .hw-positions-repeater .fi-input-wrp input, .hw-positions-repeater .fi-select-input, .hw-positions-repeater .fi-select-input-element, .hw-positions-repeater button[type="button"].fi-select-input { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; font-size: 0.875rem !important; min-height: 2.25rem !important; line-height: 1.25 !important; } /* Hauptzeile vertikal mittig ausrichten, damit Select und Placeholder auf gleicher Höhe sitzen */ .hw-positions-repeater .fi-fo-component-ctn > .fi-fo-grid:first-child { align-items: end; } /* Zeilensumme */ .hw-pos-sum { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9375rem; padding: 0.5rem 0.25rem; color: var(--hw-text-2); min-height: 2.25rem; display: flex; align-items: center; justify-content: flex-end; } .hw-pos-sum-strong { font-weight: 800; color: var(--hw-text); } /* Meta-Zeile (toggles + Notiz) */ .hw-positions-meta { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px dashed var(--hw-line-2); } .hw-positions-meta .fi-fo-toggle label, .hw-positions-meta .fi-fo-field-wrp-label-section label { font-size: 0.75rem !important; color: var(--hw-mute) !important; } /* Footer-Summe */ .hw-pos-footer { margin-top: 0.75rem; border-top: 2px solid var(--hw-text); padding-top: 0.5rem; max-width: 360px; margin-left: auto; } .hw-pos-footer-row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-variant-numeric: tabular-nums; color: var(--hw-text-2); } .hw-pos-footer-row.hw-pos-footer-total { border-top: 1px solid var(--hw-line); margin-top: 0.25rem; padding-top: 0.5rem; font-size: 1.125rem; font-weight: 800; color: var(--hw-text); } /* --- Kundenart-Auswahl als Boxen (CustomerResource, .hw-type-cards) --- */ .hw-type-cards { margin-top: 0 !important; gap: 0.75rem !important; } .hw-type-cards > div { padding-top: 0 !important; } .hw-type-cards > div > label { border: 2px solid var(--hw-line); border-radius: 0.75rem; padding: 0.875rem 1rem; cursor: pointer; background: var(--hw-paper-2); height: 100%; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .hw-type-cards > div > label:hover { border-color: rgb(var(--primary-400)); } .hw-type-cards > div > label:has(input:checked) { border-color: rgb(var(--primary-500)); background: rgb(var(--primary-50)); box-shadow: 0 0 0 1px rgb(var(--primary-500)); } .hw-type-cards > div > label:has(input:checked) span { color: rgb(var(--primary-700)); } .dark .hw-type-cards > div > label { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); } .dark .hw-type-cards > div > label:has(input:checked) { border-color: rgb(var(--primary-400)); background: rgba(194, 99, 41, .12); box-shadow: 0 0 0 1px rgb(var(--primary-400)); } .dark .hw-type-cards > div > label:has(input:checked) span { color: rgb(var(--primary-300)); } /* --- Rechnungsliste: Zeilenfarbe nach Zahlungsstatus (.hw-inv-*) --- */ /* Bezahlt = grün, teilbezahlt = gelb, offen = rot (zart), überfällig = rot (kräftig + Balken) */ tr.hw-inv-paid { background-color: rgba(34, 197, 94, .10) !important; box-shadow: inset 4px 0 0 #22c55e; } tr.hw-inv-part { background-color: rgba(245, 158, 11, .10) !important; box-shadow: inset 4px 0 0 #f59e0b; } tr.hw-inv-open { background-color: rgba(239, 68, 68, .07) !important; box-shadow: inset 4px 0 0 rgba(239, 68, 68, .45); } tr.hw-inv-overdue { background-color: rgba(239, 68, 68, .16) !important; box-shadow: inset 4px 0 0 #ef4444; } tr.hw-inv-cancelled { opacity: .55; } tr.hw-inv-paid:hover, tr.hw-inv-part:hover, tr.hw-inv-open:hover, tr.hw-inv-overdue:hover { filter: brightness(.97); } .dark tr.hw-inv-paid { background-color: rgba(34, 197, 94, .12) !important; } .dark tr.hw-inv-part { background-color: rgba(245, 158, 11, .12) !important; } .dark tr.hw-inv-open { background-color: rgba(239, 68, 68, .10) !important; } .dark tr.hw-inv-overdue { background-color: rgba(239, 68, 68, .20) !important; } .dark tr.hw-inv-paid:hover, .dark tr.hw-inv-part:hover, .dark tr.hw-inv-open:hover, .dark tr.hw-inv-overdue:hover { filter: brightness(1.15); } /* --- Portal-Login (Kunden): amber Hero + Badge + Mitarbeiter-Link --- */ .hw-login-portal .hw-login-hero { background: linear-gradient(160deg, #92400E, #B45309 55%, #D97706); } .hw-login-portal .hw-login-hero::before { opacity: 0.10; } .hw-login-portal .hw-login-tag { background: #FDE68A; color: #78350F; } .hw-login-portal .hw-login-cursive { color: rgba(255, 244, 214, 0.85); } .hw-login-portal .hw-login-footer { color: rgba(255, 244, 214, 0.55); } .hw-login-portal-badge { display: inline-block; background: #D97706; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; padding: 5px 14px; border-radius: 4px; margin-bottom: 0.75rem; } .hw-login-portal-hint { font-size: 0.8rem; color: var(--hw-mute); margin: 0.75rem 0 1rem; } .hw-login-staff-link { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.82rem; color: var(--hw-mute); line-height: 1.7; } .hw-login-staff-link a { color: #B45309; font-weight: 700; text-decoration: none; } .hw-login-staff-link a:hover { text-decoration: underline; } /* --- Kundenformular auf einer Seite (CustomerResource, .hw-cf, 05.09.2026) --- */ .hw-cf .fi-section { border-radius: 0.9rem; overflow: hidden; } .hw-cf .fi-section-header { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; background: var(--hw-paper-2); border-bottom: 1px solid var(--hw-line); } .hw-cf .fi-section-header-icon { color: rgb(var(--primary-600)); } .hw-cf .fi-section-header-heading { font-size: 0.95rem; letter-spacing: .01em; } .hw-cf .fi-section-header-description { font-size: 0.8rem; } .hw-cf .fi-section-content { padding-top: 1rem !important; padding-bottom: 1rem !important; } .hw-cf .fi-fo-field-wrp-hint, .hw-cf .fi-fo-field-wrp-helper-text { font-size: 0.75rem; line-height: 1.35; } .hw-cf .fi-fo-field-wrp-label { font-size: 0.85rem; } .hw-cf .hw-type-cards > div > label { padding: 0.75rem 0.9rem; } .dark .hw-cf .fi-section-header { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); } /* Kundendetail: Button "Neu" in Karten-Koepfen (05.09.2026) */ .hw-cv-card-head .hw-cv-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:.5rem; background: rgb(var(--primary-600)); color:#fff !important; font-size:.75rem; font-weight:600; text-decoration:none; } .hw-cv-card-head .hw-cv-btn:hover { background: rgb(var(--primary-700)); } /* Mail-Dialog Behandlungsbeleg (05.09.2026) */ .hw-mail-anhang { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem; border:1px solid var(--hw-line); border-radius:.5rem; background: var(--hw-paper-2); font-size:.8125rem; font-weight:600; } .hw-hist td, .hw-hist th { font-size: .8125rem; vertical-align: top; } /* Kundendetail Behandlungen: aufklappbares Versandprotokoll (05.09.2026) */ .hw-cv-toggle { background:none; border:1px solid var(--hw-line); border-radius:6px; width:1.4rem; height:1.4rem; line-height:1; cursor:pointer; color:#C2632A; font-size:.8rem; margin-right:.5rem; vertical-align:middle; transition: transform .15s; } .hw-cv-toggle.open { transform: rotate(90deg); } .hw-cv-log td { background: var(--hw-paper-2); cursor: default !important; } .hw-cv-log-box { padding:.5rem .75rem .75rem 2.4rem; } .hw-cv-log-title { font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hw-mute); margin-bottom:.35rem; } .hw-cv-log-tab { width:100%; border-collapse:collapse; font-size:.8125rem; } .hw-cv-log-tab th { text-align:left; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hw-mute); padding:.2rem .5rem; border-bottom:1px solid var(--hw-line); } .hw-cv-log-tab td { padding:.3rem .5rem; border-bottom:1px dashed var(--hw-line); vertical-align:top; } .hw-cv-log-tab tfoot td { border-bottom:none; padding-top:.15rem; padding-bottom:.15rem; } /* ===== Rechnungspapier (Bearbeitung) – 05.09.2026 ===== */ .hw-paper { background:#fff; max-width: 960px; margin: 0 auto; padding: 2.5rem 3rem 2rem; box-shadow: 0 10px 30px rgba(43,31,24,.10), 0 1px 3px rgba(43,31,24,.08); border: 1px solid var(--hw-line); border-radius: 4px; font-size:.875rem; } .dark .hw-paper { background:#1f1a17; } .hw-paper > .fi-fo-component-ctn { gap: 1.25rem; } .hw-paper-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #C2632A; padding-bottom:.75rem; } .hw-paper-brand { font-size:1.25rem; font-weight:700; letter-spacing:.04em; } .hw-paper-tagline { font-style:italic; color:var(--hw-mute); font-size:.8125rem; margin-top:.15rem; } .hw-paper-logo { height:64px; width:auto; } .hw-paper-sender { font-size:.6875rem; color:var(--hw-mute); border-bottom:1px solid var(--hw-line); padding-bottom:.25rem; margin-top:1.25rem; } .hw-paper-empf .fi-input-wrp, .hw-paper-empf .fi-select-input, .hw-paper-empf .choices__inner { box-shadow:none !important; border:1px dashed var(--hw-line) !important; background:transparent !important; } .hw-paper-adresse .fi-fo-placeholder-content, .hw-paper-adresse .fi-fo-placeholder { font-size:.9375rem; line-height:1.6; } .hw-paper-meta { border:1px solid var(--hw-line); border-radius:6px; padding:.75rem 1rem; background:var(--hw-paper-2); display:grid; grid-template-columns:1fr 1fr; gap:.5rem .75rem; } .hw-paper-meta > .fi-fo-component-ctn { display:contents; } .hw-paper-meta .fi-fo-field-wrp-label { font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--hw-mute); } .hw-paper-meta .fi-fo-field-wrp { gap:.15rem; } .hw-paper-meta .fi-input-wrp { box-shadow:none; background:#fff; } .hw-paper-title { font-size:1.5rem; font-weight:700; margin-top:.5rem; } .hw-paper-title span { color:#C2632A; font-family:ui-monospace, monospace; font-size:1.125rem; margin-left:.35rem; } .hw-paper-text .fi-input-wrp, .hw-paper-notiz .fi-input-wrp { box-shadow:none; background:transparent; border:1px dashed transparent; border-radius:4px; } .hw-paper-text .fi-input-wrp:hover, .hw-paper-text .fi-input-wrp:focus-within, .hw-paper-notiz .fi-input-wrp:hover, .hw-paper-notiz .fi-input-wrp:focus-within { border-color:var(--hw-line); background:var(--hw-paper-2); } .hw-paper-text textarea, .hw-paper-notiz textarea { padding-left:.25rem !important; } /* Positionstabelle */ .hw-paper-items-head { display:grid; grid-template-columns: 2.25rem 5fr 1fr 1fr 2fr 1fr 2fr 2.5rem; gap:.5rem; font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hw-mute); border-bottom:2px solid #2B1F18; padding:0 .25rem .35rem; margin-bottom:-.75rem; } .dark .hw-paper-items-head { border-color:#c9bba9; } .hw-paper-items-head .r { text-align:right; } .hw-paper-items .fi-fo-repeater-item { box-shadow:none !important; border:0 !important; border-bottom:1px solid var(--hw-line) !important; border-radius:0 !important; background:transparent !important; counter-increment: hwpos; position:relative; padding-left:2.25rem; } .hw-paper-items > .fi-fo-component-ctn { counter-reset: hwpos; } .hw-paper-items .fi-fo-repeater-item::before { content: counter(hwpos); position:absolute; left:.25rem; top:.9rem; font-size:.8125rem; color:var(--hw-mute); font-weight:600; } .hw-paper-items .fi-fo-repeater-item-header { position:absolute; right:0; top:.55rem; padding:0 !important; border:0 !important; background:transparent !important; } .hw-paper-items .fi-fo-repeater-item-header .fi-fo-repeater-item-header-label { display:none; } .hw-paper-items .fi-fo-repeater-item-content { padding:.5rem 2.75rem .5rem 0 !important; } .hw-paper-items .fi-fo-repeater-item .fi-input-wrp { box-shadow:none; background:transparent; border:1px dashed transparent; } .hw-paper-items .fi-fo-repeater-item .fi-input-wrp:hover, .hw-paper-items .fi-fo-repeater-item .fi-input-wrp:focus-within { border-color:var(--hw-line); background:var(--hw-paper-2); } .hw-paper-items .hw-r input { text-align:right; } .hw-paper-items .hw-paper-zeile { text-align:right; font-weight:600; padding-top:.55rem; } .hw-paper-items .hw-paper-lohn .fi-input-wrp { font-size:.75rem; } .hw-paper-items .fi-fo-repeater-actions, .hw-paper-items > .fi-fo-component-ctn > .fi-btn, .hw-paper-items .fi-ac { margin-top:.5rem; } .hw-paper-items .fi-fo-field-wrp { gap:0; } /* Summen */ .hw-paper-summen { margin-left:auto; width:100%; } .hw-paper-summen .fi-fo-field-wrp { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px dashed var(--hw-line); padding:.3rem 0; } .hw-paper-summen .fi-fo-field-wrp-label { font-size:.8125rem; color:var(--hw-mute); } .hw-paper-summen .fi-fo-placeholder { text-align:right; font-variant-numeric: tabular-nums; } .hw-paper-summen .hw-paper-brutto { border-bottom:3px double #2B1F18; font-size:1.0625rem; } .hw-paper-zahlung { font-size:.875rem; } .hw-paper-foot { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; font-size:.6875rem; color:var(--hw-mute); border-top:1px solid var(--hw-line); padding-top:.75rem; margin-top:1rem; line-height:1.5; } @media (max-width: 900px) { .hw-paper { padding:1.25rem; } .hw-paper-items-head { display:none; } .hw-paper-foot { grid-template-columns:1fr 1fr; } } /* Positionszeile: eigenes Spaltenraster statt 12er-Grid (05.09.2026) */ .hw-paper-items-head { grid-template-columns: 2.25rem 5fr 1.2fr 1.2fr 2fr 1.3fr 2fr 2.5rem; } .hw-paper-items .fi-fo-repeater-item-content > .fi-fo-component-ctn { display:grid !important; grid-template-columns: 5fr 1.2fr 1.2fr 2fr 1.3fr 2fr !important; gap:.5rem !important; } .hw-paper-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > * { grid-column: auto !important; } .hw-paper-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-paper-notiz { grid-column: 1 / 5 !important; } .hw-paper-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-paper-lohn { grid-column: 5 / 7 !important; } .hw-paper-items .fi-input-wrp input, .hw-paper-items .fi-select-input { padding-left:.5rem !important; padding-right:.5rem !important; } .hw-paper-items .fi-input-wrp-suffix { padding-right:.4rem; } .hw-paper { padding: 2.25rem 2.25rem 1.75rem; } /* ===== Auftragsformular auf einer Seite (.hw-of, 05.09.2026) ===== */ .hw-of-info { background: var(--hw-accent); color: #fff; border-radius: 10px; padding: 1rem 1.125rem; font-size: .8125rem; line-height: 1.5; position: sticky; top: 5rem; } .hw-of-info-h { font-weight: 700; font-size: .9375rem; margin-bottom: .5rem; } .hw-of-info p { margin: 0 0 .6rem; opacity: .95; } .hw-of-fotos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .hw-of-fotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hw-line); } .hw-of-hint { font-size: .75rem; color: var(--hw-mute); margin-top: .35rem; } .hw-of-skizze { max-width: 100%; max-height: 260px; border: 1px solid var(--hw-line); border-radius: 6px; background: #fff; } .hw-of-items .fi-fo-repeater-item { border-color: var(--hw-line) !important; } .hw-of-items .fi-fo-repeater-item-header { background: var(--hw-paper) !important; } .hw-of-items .fi-fo-repeater-item-content { padding: .75rem 1rem !important; } .hw-of-betrag .fi-fo-placeholder { font-weight: 700; padding-top: .5rem; text-align: right; } .hw-of-summen { margin-left: auto; width: 100%; max-width: 22rem; margin-top: .75rem; font-size: .875rem; } .hw-of-summen div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; } .hw-of-summen div.klein { font-size: .75rem; color: var(--hw-mute); } .hw-of-summen div.gesamt { border-top: 2px solid var(--hw-ink); margin-top: .25rem; padding-top: .35rem; font-weight: 700; font-size: .9375rem; } .hw-of-summen b { font-variant-numeric: tabular-nums; } .dark .hw-of-summen div.gesamt { border-color: #c9bba9; } @media (min-width: 768px) { .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn { display:grid !important; grid-template-columns: 4fr 1.1fr 1.1fr 1.7fr 1.2fr 1.5fr !important; gap:.6rem .75rem !important; } .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > * { grid-column: auto !important; } .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-of-art { grid-column: 1 / -1 !important; } .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-of-notes { grid-column: 1 / 3 !important; } .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-of-toggles { grid-column: 5 / 7 !important; display:flex; gap:1rem; align-items:flex-end; } .hw-of-items .fi-fo-repeater-item-content > .fi-fo-component-ctn > .hw-of-toggles > .fi-fo-component-ctn { display:flex; gap:1rem; flex-direction:row; } .hw-of-items .fi-fo-field-wrp-label { white-space:nowrap; } }