/* variables.css */ /* ============================================================ FIELDTAKT - CSS VARIABLES v4.0 (K2, tenant v1.21.0) ============================================================ Alle Design-Tokens an EINER Stelle - und in EINEM :root-Block (K2: der S6-Block am Ende ist eingearbeitet, das alte Blau ist weg). Marke: Field Navy #12314D, Takt Gelb #F2A900, Off-White #F5F6F4, Ink #17212B, Plan Grau #E8EDF1, Schrift Inter. --ft-* sind die Markennamen wie in admin.css; --brand-* bleiben als Umbieger fuer die Altregeln. Steuerhoehen --ctl-h/-sm/-xs gelten fuer Knopf UND Feld (so fluchten sie), Fokus immer gelb (--focus-ring). Farbe aendern? Hier aendern, fertig. Datei: /assets/css/variables.css ============================================================ */ :root { /* === BRAND === */ /* Marke (S6, seit K2 hier statt in einem zweiten Block) */ --ft-navy: #12314D; --ft-navy-hover: #245C8F; --ft-navy-dark: #0F2A44; --ft-yellow: #F2A900; --ft-off: #F5F6F4; --ft-ink: #17212B; --ft-grey: #E8EDF1; --brand-primary: var(--ft-navy); --brand-primary-hover: var(--ft-navy-hover); --brand-primary-light: var(--ft-grey); --brand-primary-text: var(--ft-navy); /* Textfarbe der Marke: hell Navy, dunkel Gelb - fuer color:, nie --brand-primary (das ist auf dunklem Grund unsichtbar) */ --brand-primary-rgb: 18, 49, 77; /* Kachel-Icon im Markenton (v1.43.0, .stat-icon.blue): eigenes Paar, weil --brand-primary-light/-text im dunklen Modus Gelb werden - dann war die Navy-Kachel von der orangen nicht zu unterscheiden */ --tile-navy-bg: var(--ft-grey); --tile-navy-fg: var(--ft-navy); --brand-accent: var(--ft-yellow); --brand-accent-rgb: 242, 169, 0; /* Bedienelemente: eine Hoehe je Groesse fuer Knopf und Feld, Rand, Rundung, gelber Fokus */ --ctl-h: 38px; --ctl-h-sm: 32px; --ctl-h-xs: 28px; --ctl-border: #C9D3DC; --ctl-radius: 8px; --focus-ring: 0 0 0 3px rgba(242, 169, 0, 0.4); /* === SEMANTIC COLORS === */ /* Jeweils: Basis (kraeftig) / -light (Hintergrund) / -border / -text (Text auf -light) */ --success: #16a34a; --success-light: #dcfce7; --success-border: #bbf7d0; --success-text: #166534; --warning: #f59e0b; --warning-light: #fef3c7; --warning-border: #fde68a; --warning-text: #92400e; --danger: #dc2626; --danger-light: #fee2e2; --danger-border: #fecaca; --danger-text: #991b1b; --info: #0891b2; --info-light: #e0f2fe; --info-border: #bae6fd; --info-text: #075985; --accent-light: #ede9fe; --accent-text: #5b21b6; /* === SPACING SCALE === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* === TYPOGRAPHY === */ --font-family: Inter, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace; /* v1.67.0 (Ralf: "alles sehr klein, zu mikromaessig"): Stufen je +1 bis +2 px - Grundschrift 16 px (Web-Standard fuer Arbeitsprogramme, Material Design) */ --font-xs: 13px; --font-sm: 14px; --font-base: 16px; --font-md: 18px; --font-lg: 22px; --font-xl: 26px; --font-2xl: 32px; --line-height: 1.55; /* === BORDERS & RADIUS === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* === SHADOWS === */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04); --shadow-xl: 0 20px 50px rgba(0,0,0,0.12); /* === LAYOUT === */ --sidebar-width: 260px; --sidebar-collapsed: 68px; --header-height: 60px; /* === TRANSITIONS === */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; } /* ============================================================ LIGHT THEME (Standard) ============================================================ */ [data-theme="light"], :root { --bg: var(--ft-off); --bg-subtle: var(--ft-grey); --card-bg: #ffffff; --text: var(--ft-ink); --text-secondary: #475569; --text-muted: #64748b; --border: #D9E0E7; --border-light: var(--ft-grey); --hover-bg: var(--ft-grey); /* Sidebar */ --sidebar-bg: var(--ft-navy); --sidebar-text: #B7C3CF; --sidebar-hover: rgba(255,255,255,0.07); --sidebar-active-bg: rgba(242,169,0,0.14); --sidebar-active-text: var(--ft-yellow); --sidebar-border: rgba(255,255,255,0.06); --sidebar-category-text: #8A9AAB; /* Overlay */ --overlay: rgba(18,49,77,0.5); } /* ============================================================ DARK THEME ============================================================ */ [data-theme="dark"] { --bg: #0f172a; --bg-subtle: #1e293b; --card-bg: #1e293b; --text: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --border: #334155; --border-light: #1e293b; --hover-bg: #334155; /* Sidebar */ --sidebar-bg: var(--ft-navy-dark); --sidebar-text: #8A9AAB; --sidebar-hover: rgba(255,255,255,0.04); --sidebar-active-bg: rgba(242,169,0,0.16); --sidebar-active-text: var(--ft-yellow); --sidebar-border: rgba(255,255,255,0.04); --sidebar-category-text: #475569; /* Overlay */ --overlay: rgba(0,0,0,0.6); /* Shadows staerker im Dark Mode */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.4); /* === SEMANTIC COLORS (Dark) === */ /* -light = getönter dunkler Hintergrund, -text = heller Text, -border = dezent */ --success-light: rgba(34,197,94,0.15); --success-border: rgba(34,197,94,0.30); --success-text: #4ade80; --warning-light: rgba(245,158,11,0.15); --warning-border: rgba(245,158,11,0.30); --warning-text: #fbbf24; --danger-light: rgba(239,68,68,0.15); --danger-border: rgba(239,68,68,0.30); --danger-text: #f87171; --info-light: rgba(14,165,233,0.15); --info-border: rgba(14,165,233,0.30); --info-text: #38bdf8; --accent-light: rgba(139,92,246,0.18); --accent-text: #c4b5fd; /* Brand-Tint fuer aktive Eintraege (Listen-Nav etc.) */ --brand-primary-light: rgba(242,169,0,0.18); --brand-primary-text: var(--ft-yellow); /* Kachel-Icon im Markenton (v1.43.0): helles Blau statt Gelb, sonst gleicht es der orangen Kachel */ --tile-navy-bg: rgba(36,92,143,0.30); --tile-navy-fg: #9CC3E6; } /* styles.css */ /* ============================================================ fieldtakt - Stylesheet der Kunden-App ============================================================ Alle Komponenten-Styles. Nutzt variables.css. Datei: /assets/css/styles.css INHALT: 1. Reset & Base 2. Layout (Sidebar + Main) 3. Navigation 4. Content Header & Body 5. Stat Cards 6. Cards 7. Tables 8. Badges 9. Buttons 10. Icons 11. Forms 12. Toasts 13. Modals 14. Activity List 15. Empty State 16. Helpers & Utilities 17. Responsive ============================================================ */ /* ============================================================ 1. RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); font-size: var(--font-base); line-height: var(--line-height); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--brand-primary); color: #fff; } /* ============================================================ 2. LAYOUT ============================================================ */ .app-layout { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: width var(--transition-normal); border-right: 1px solid var(--sidebar-border); } /* Sidebar Brand */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--sidebar-border); min-height: var(--header-height); } .sidebar-brand-icon { width: 34px; height: 34px; background: var(--brand-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-brand-icon .icon svg { stroke: #fff; } .sidebar-brand-text strong { color: #f1f5f9; font-size: var(--font-base); font-weight: 700; display: block; letter-spacing: -0.2px; } .sidebar-brand-text small { color: var(--sidebar-text); font-size: var(--font-xs); font-weight: 400; } .sidebar-brand-text { min-width: 0; } /* v1.120.1: Leitspruch in eigener Zeile ueber die volle Breite - einzeilig und ganz lesbar */ .sidebar-brand { flex-wrap: wrap; row-gap: 2px; } .sidebar-brand-tag { flex: 1 0 100%; text-align: center; color: var(--sidebar-text); font-size: 11px; font-weight: 400; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar.collapsed .sidebar-brand-tag { display: none; } /* v1.120.0: Mein Konto als Zahnrad neben dem Namen */ .admin-account { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--sidebar-text); flex: 0 0 auto; } .admin-account:hover, .admin-account.active { color: #fff; background: rgba(255, 255, 255, 0.08); } .sidebar.collapsed .admin-account { display: none; } /* Sidebar Toggle */ .sidebar-toggle { position: absolute; right: -13px; top: 22px; width: 26px; height: 26px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: var(--shadow-sm); transition: all var(--transition-fast); color: var(--text-muted); } .sidebar-toggle:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } /* Sidebar Footer */ .sidebar-footer { padding: 12px 10px; border-top: 1px solid var(--sidebar-border); } .sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 8px 14px; } .admin-info { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px; } .admin-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--font-sm); flex-shrink: 0; } .admin-info-text .admin-name { color: #cbd5e1; font-size: var(--font-sm); font-weight: 500; display: block; } .admin-info-text .admin-role { display: inline-block; background: rgba(37,99,235,0.15); color: var(--sidebar-active-text); padding: 1px 7px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .sidebar-footer .nav-item.logout:hover { background: rgba(220,38,38,0.12); color: #f87171; } /* Language Switcher */ .lang-switcher { display: flex; gap: 6px; padding: 8px 14px; margin-bottom: 4px; } .lang-switcher a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--font-md); opacity: 0.5; transition: all var(--transition-fast); background: rgba(255,255,255,0.05); } .lang-switcher a:hover { opacity: 0.8; background: rgba(255,255,255,0.1); } .lang-switcher a.active { opacity: 1; background: rgba(255,255,255,0.15); box-shadow: 0 0 0 2px var(--brand-primary); } /* ============================================================ 3. NAVIGATION ============================================================ */ .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; overflow-x: hidden; } .sidebar-nav::-webkit-scrollbar { width: 3px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; } /* Nav Items */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--sidebar-text); border-radius: var(--radius-sm); font-size: var(--font-base); font-weight: 450; transition: all var(--transition-fast); cursor: pointer; margin-bottom: 1px; white-space: nowrap; } .nav-item:hover { background: var(--sidebar-hover); color: #e2e8f0; } .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; } .nav-item .icon { flex-shrink: 0; } /* Nav Categories */ .nav-category { margin-bottom: 2px; } .nav-category-header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--sidebar-category-text); border-radius: var(--radius-sm); font-size: var(--font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all var(--transition-fast); user-select: none; } .nav-category-header:hover { color: var(--sidebar-text); background: var(--sidebar-hover); } .nav-category-header .icon { flex-shrink: 0; opacity: 0.6; } .nav-category-header .chevron-icon { margin-left: auto; transition: transform var(--transition-fast); opacity: 0.4; } .nav-category:not(.expanded) .chevron-icon { transform: rotate(180deg); } .nav-category-items { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); } /* Waehrend des initialen Ladens keine Animation (verhindert Aufblitzen) */ .sidebar.nav-preload .nav-category-items { transition: none; } .nav-category.expanded .nav-category-items { max-height: 500px; } .nav-subitem { padding-left: 42px; font-size: var(--font-sm); } /* ============================================================ 4. CONTENT HEADER & BODY ============================================================ */ .main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left var(--transition-normal); display: flex; flex-direction: column; } .content-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) var(--space-xl); background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; min-height: var(--header-height); } .content-header h1 { font-size: var(--font-xl); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); letter-spacing: -0.3px; } .content-header h1 .icon { color: var(--brand-primary-text); } /* v1.119.0: farbige Symbole nach Geldfluss (Einstellungen -> Darstellung; MoneyColors) - Seitenleiste dunkel: helle Toene, Kopf: kraeftige Toene */ /* Einstellungen -> Darstellung: Farbkombinationen zur Auswahl */ .ft-pal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } .ft-pal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; } .ft-pal.is-selected, .ft-pal:has(input:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); } .ft-pal input { position: absolute; opacity: 0; pointer-events: none; } .ft-pal-name { font-weight: 600; } .ft-pal-demo { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-sm, 13px); color: var(--text-secondary); } .ft-pal-row { display: inline-flex; align-items: center; gap: 6px; } .ft-pal-dark { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 8px; border-radius: 6px; background: #1B2A3F; } .ft-pal-dark-lbl { color: #C9D3E0; font-size: var(--font-xs); } .ft-money .nav-item.nav-money-in .icon { color: var(--money-in-soft); } .ft-money .nav-item.nav-money-out .icon { color: var(--money-out-soft); } .ft-money .content-header h1.ft-money-in > .icon { color: var(--money-in); } .ft-money .content-header h1.ft-money-out > .icon { color: var(--money-out); } [data-theme="dark"] .ft-money .content-header h1.ft-money-in > .icon { color: var(--money-in-soft); } [data-theme="dark"] .ft-money .content-header h1.ft-money-out > .icon { color: var(--money-out-soft); } /* v1.116.0 (Ralf): Titel "Nummer / Vorgangsnummer - Betreff" - die Nummer bleibt ganz, der Betreff wird je nach Platz mit ... gekuerzt */ .content-header h1 { min-width: 0; flex: 1 1 auto; } .content-header h1 .ft-title-main { flex: 0 0 auto; white-space: nowrap; } /* v1.118.0: Status-Pillen im Seitenkopf - 2x2-Feld vor der Belegnummer, nur was zutrifft; Farbe = Dringlichkeit */ .content-header h1 .ft-head-pills { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px 6px; flex: 0 0 auto; } .ft-hp { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 999px; font-size: var(--font-xs); font-weight: 600; line-height: 1.6; letter-spacing: 0; white-space: nowrap; border: 1px solid transparent; } .ft-hp-neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); } .ft-hp-info { background: var(--info-light); color: var(--info-text); border-color: var(--info-border); } .ft-hp-warn { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); } .ft-hp-danger { background: var(--danger-light); color: var(--danger-text); border-color: var(--danger-border); } .ft-hp-ok { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); } .content-header h1 .ft-title-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-secondary); } .header-actions { display: flex; gap: var(--space-sm); align-items: center; } .content-body { padding: var(--space-lg) var(--space-xl) var(--space-2xl); flex: 1; } /* ============================================================ 5. STAT CARDS ============================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .stat-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; align-items: flex-start; gap: var(--space-md); transition: all var(--transition-fast); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* v1.43.0: der zweite Behaelter .stat-cards ist entfallen - alle Kacheln kommen aus render_stat_cards() (includes/render-stats.php) und stehen in .stat-grid; Icon-Feld, Zahl und Beschriftung siehe .stat-icon weiter unten */ /* === LISTEN-TOOLBAR (Suche + Filter) === */ .list-toolbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); } /* Such-Box mit Icon */ .search-box { position: relative; display: flex; align-items: center; flex: 1 1 280px; min-width: 220px; } .search-box .icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; display: flex; } .search-box input { width: 100%; padding: 9px 12px 9px 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-base); font-family: inherit; background: var(--card-bg); color: var(--text); transition: all var(--transition-fast); } .search-box input::placeholder { color: var(--text-muted); } .search-box input:focus { outline: none; border-color: var(--ft-yellow); /* K2 (v1.21.0): Fokus gelb, wie in der Schaltzentrale */ box-shadow: var(--focus-ring); } /* K2 (v1.21.0): JEDES Feld im Inhaltsbereich - auch ausserhalb von .form-group (Filterleisten, Tabellen). :where() haelt die Spezifitaet bei 0, gezielte Regeln gewinnen weiter (CSS-Muster Abschnitt 6). */ :where(.main-content, .login-card) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) { height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm); } :where(.main-content, .login-card) :where(textarea) { border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm); padding: 9px 12px; } :where(.main-content, .login-card) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--ft-yellow); box-shadow: var(--focus-ring); } /* Filter-Tabs (Alle / Kunde / Lieferant / ...) */ .filter-tabs { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--font-sm); font-weight: 500; color: var(--text-secondary); background: var(--card-bg); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .filter-tab:hover { background: var(--hover-bg); color: var(--text); } .filter-tab.active { background: var(--brand-primary-light); border-color: transparent; color: var(--brand-primary-text); font-weight: 600; } .filter-tab .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 700; line-height: 1; background: var(--border); color: var(--text-secondary); } .filter-tab.active .tab-count { background: var(--brand-primary); color: #fff; } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon.blue { background: var(--tile-navy-bg); color: var(--tile-navy-fg); } /* v1.43.0: eigenes Token-Paar, dunkel nicht mehr gelb */ .stat-icon.green { background: var(--success-light); color: var(--success); } .stat-icon.orange { background: var(--warning-light); color: var(--warning); } .stat-icon.red { background: var(--danger-light); color: var(--danger); } .stat-icon.cyan { background: var(--info-light); color: var(--info); } .stat-icon.grey { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); } /* v1.43.0: abgeschlossen/archiviert - Rahmen statt Flaeche, sonst im Kartengrund unsichtbar */ /* v1.43.0: kleines Icon-Feld fuer .stat-mini im Reiterkopf einer Akte (render_stat_cards(..., 'mini')) */ .stat-icon.stat-icon-sm { width: 32px; height: 32px; border-radius: var(--radius-sm); } .stat-value { font-size: var(--font-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; } .stat-label { font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; font-weight: 450; } .stat-trend { font-size: var(--font-xs); font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 3px; } .stat-trend.up { color: var(--success); } .stat-trend.down { color: var(--danger); } /* ============================================================ 6. CARDS ============================================================ */ .card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: var(--space-lg); } .card:last-child { margin-bottom: 0; } .card-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); } .card-header h2, .card-title { /* .card-title: L5 (v1.146.0) */ font-size: var(--font-md); font-weight: 650; display: flex; align-items: center; gap: var(--space-sm); } .card-body { padding: var(--space-lg); } .card-body.flush { padding: 0; } .dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); } /* ============================================================ 7. TABLES ============================================================ */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--font-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); white-space: nowrap; } .data-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); font-size: var(--font-base); vertical-align: middle; } /* v1.103.0 (Ralf: "Tabelleneintraege verrueckt zur Ueberschrift"): .data-table th (0,1,1) schlug .ta-right (0,1,0) - Kopf links, Werte rechts. Ausrichtung gilt jetzt fuer Kopf UND Zellen jeder Tabelle gleich (CSS-Muster, Abschnitt Spezifitaet). */ .data-table th.ta-right, .data-table td.ta-right { text-align: right; } .data-table th.ta-center, .data-table td.ta-center { text-align: center; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--hover-bg); } .data-table tbody tr:last-child td { border-bottom: none; } .action-cell { white-space: nowrap; display: flex; gap: 4px; align-items: center; } /* ============================================================ 8. BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 600; white-space: nowrap; } .badge-success, .badge-active, .badge-confirmed { background: var(--success-light); color: var(--success-text); } .badge-warning, .badge-trial, .badge-in_progress { background: var(--warning-light); color: var(--warning-text); } .badge-danger, .badge-suspended, .badge-cancelled { background: var(--danger-light); color: var(--danger-text); } .badge-info, .badge-open, .badge-planned, .badge-scheduled { background: var(--info-light); color: var(--info-text); } .badge-neutral, .badge-completed { background: var(--bg); color: var(--text-secondary); } /* Auftrags-Status: Farbe je semantischer Kategorie. Zuordnung Code -> Kategorie in includes/RequestStatus.php. Nutzt die Farb-Tokens -> Light/Dark automatisch. */ .badge-status-new { background: var(--bg); color: var(--text-secondary); } .badge-status-planned { background: var(--accent-light); color: var(--accent-text); } .badge-status-in_progress { background: var(--warning-light); color: var(--warning-text); } .badge-status-done { background: var(--success-light); color: var(--success-text); } .badge-status-closed { background: var(--info-light); color: var(--info-text); } .badge-status-cancelled { background: var(--danger-light); color: var(--danger-text); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .badge-success .badge-dot, .badge-active .badge-dot { background: var(--success); } .badge-warning .badge-dot, .badge-trial .badge-dot { background: var(--warning); } .badge-danger .badge-dot, .badge-suspended .badge-dot { background: var(--danger); } .badge-info .badge-dot { background: var(--info); } /* ============================================================ 9. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); /* K2 (v1.21.0): eine Hoehe fuer Knopf und Feld */ padding: 0 16px; border-radius: var(--ctl-radius); font-size: var(--font-sm); font-weight: 550; font-family: inherit; border: 1px solid var(--ctl-border); background: var(--card-bg); color: var(--text); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; line-height: 1.4; text-decoration: none; } /* K2 (v1.21.0): jeder Knopf faerbt sich beim Ueberfahren - der neutrale fuellt sich mit Navy (dieselbe Familie wie .btn-primary) */ .btn:hover { background: var(--ft-navy); color: #fff; border-color: var(--ft-navy); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.25); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .btn-primary:hover { background: var(--brand-primary-hover); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: #b91c1c; } .btn-success { background: var(--success); color: #fff; border-color: var(--success); } .btn-success:hover { background: #15803d; } .btn-warn { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); } .btn-warn:hover { background: var(--warning-border); } /* K2 (v1.21.0): das eine Knopfsystem der Schaltzentrale - Warnung = Gelb auf Ink, Info; .btn-warn/.btn-ghost/... sind Altnamen bis K10 */ .btn-warning { background: var(--ft-yellow); color: var(--ft-ink); border-color: var(--ft-yellow); } .btn-warning:hover { background: #D99700; border-color: #D99700; color: var(--ft-ink); } .btn-info { background: var(--info); color: #fff; border-color: var(--info); } .btn-info:hover { background: var(--info-text); border-color: var(--info-text); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--hover-bg); } .btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--font-xs); } .btn-xs { height: var(--ctl-h-xs); padding: 0 8px; font-size: var(--font-xs); } .btn-lg { height: 44px; padding: 0 22px; font-size: var(--font-base); } .btn-full { width: 100%; text-align: center; justify-content: center; } .btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: var(--radius-sm); } /* ============================================================ 10. ICON SYSTEM ============================================================ */ .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon svg { width: 24px; height: 24px; /* v1.67.0: Material-Symbole wirken im selben Kasten kleiner - je Stufe +2 px */ stroke-width: 2; } .icon-xs svg { width: 18px; height: 18px; } /* v1.67.0: xs hatte keine Regel (offener Punkt BED-1) */ .icon-sm svg { width: 20px; height: 20px; } .icon-lg svg { width: 28px; height: 28px; } .icon-xl svg { width: 40px; height: 40px; } /* ============================================================ 11. FORMS ============================================================ */ .form-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: var(--space-lg); } .form-section { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border); } .form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .form-section h3 { font-size: var(--font-md); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-md); } .form-group label, .form-label { /* .form-label: L5 (v1.146.0), Beschriftung ausserhalb einer .form-group */ font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); } .form-input, .form-select, .form-textarea, .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), .form-group select, .form-group textarea { padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); font-size: var(--font-base); font-family: inherit; background: var(--card-bg); color: var(--text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; height: var(--ctl-h); /* K2 (v1.21.0): wie der Knopf - so fluchten Feld und Knopf in einer Zeile */ } .form-textarea, .form-group textarea { height: auto; padding: 9px 12px; } .form-input:focus, .form-select:focus, .form-textarea:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1); } .form-hint { font-size: var(--font-xs); color: var(--text-muted); } .form-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); } .checkbox-inline { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-sm); cursor: pointer; } .checkbox-inline input { width: 16px; height: 16px; } /* v1.38.1: als Schieber ueberschrieben, siehe unten */ /* ============================================================ 12. TOASTS ============================================================ */ .toast-container { position: fixed; top: var(--space-lg); right: var(--space-lg); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm); max-width: 380px; } .toast { display: flex; align-items: center; gap: var(--space-sm); padding: 12px 16px; border-radius: var(--radius-md); background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-size: var(--font-sm); font-weight: 500; animation: toastSlideIn 0.3s ease; min-width: 280px; } .toast-success { border-left: 3px solid var(--success); } .toast-success .icon { color: var(--success); } .toast-error { border-left: 3px solid var(--danger); } .toast-error .icon { color: var(--danger); } .toast-warning { border-left: 3px solid var(--warning); } .toast-warning .icon { color: var(--warning); } .toast-info { border-left: 3px solid var(--brand-primary); } .toast-info .icon { color: var(--brand-primary-text); } .toast.removing { animation: toastSlideOut 0.3s ease forwards; } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastSlideOut { to { transform: translateX(110%); opacity: 0; } } /* ============================================================ 12b. RUECKFRAGE (v1.14.0) - eigener Dialog statt Browser-confirm(); Frage fett, Beschreibung normal ============================================================ */ .ft-ask { position: fixed; inset: 0; background: var(--overlay); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; } .ft-ask[hidden] { display: none; } .ft-ask-box { width: min(460px, 100%); background: var(--card-bg); color: var(--text); border-radius: var(--radius-lg); padding: 22px 24px 18px; box-shadow: var(--shadow-xl); } .ft-ask-title { margin: 0; font-weight: 700; font-size: 15.5px; line-height: 1.4; } .ft-ask-desc { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } .ft-ask-desc[hidden] { display: none; } .ft-ask-input { width: 100%; margin-top: 12px; } .ft-ask-input[hidden] { display: none; } .ft-ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* ============================================================ 13. MODALS ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--transition-fast); backdrop-filter: blur(4px); } .modal-backdrop.visible { opacity: 1; visibility: visible; } .modal { background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 95%; max-width: 520px; max-height: 85vh; overflow: hidden; transform: scale(0.95) translateY(10px); transition: transform var(--transition-normal); } .modal-backdrop.visible .modal { transform: scale(1) translateY(0); } .modal-sm { max-width: 400px; } .modal-lg { max-width: 700px; } .modal-xl { max-width: 900px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg); border-bottom: 1px solid var(--border); } .modal-title { font-size: var(--font-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; font-size: var(--font-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition-fast); } .modal-close:hover { background: var(--hover-bg); color: var(--text); } .modal-body { padding: var(--space-lg); overflow-y: auto; max-height: 60vh; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); background: var(--bg-subtle); } /* ============================================================ 14. ACTIVITY LIST ============================================================ */ .activity-list { display: flex; flex-direction: column; } .activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); align-items: flex-start; } .activity-item:last-child { border-bottom: none; } .activity-icon-wrap { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-icon-wrap.green { background: var(--success-light); color: var(--success); } .activity-icon-wrap.blue { background: var(--brand-primary-light); color: var(--brand-primary-text); } .activity-icon-wrap.orange { background: var(--warning-light); color: var(--warning); } .activity-icon-wrap.red { background: var(--danger-light); color: var(--danger); } .activity-text { font-size: var(--font-sm); line-height: 1.5; } .activity-text strong { font-weight: 600; } .activity-meta { display: block; color: var(--text-muted); font-size: var(--font-xs); margin-top: 2px; } /* ============================================================ 15. ALERTS & EMPTY STATE ============================================================ */ .alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: var(--space-lg); font-size: var(--font-base); display: flex; align-items: center; gap: var(--space-sm); } .alert-success { background: var(--success-light); color: var(--success-text); border: 1px solid var(--success-border); } .alert-error { background: var(--danger-light); color: var(--danger-text); border: 1px solid var(--danger-border); } .alert-warning { background: var(--warning-light); color: var(--warning-text); border: 1px solid var(--warning-border); } .alert-info { background: var(--info-light); color: var(--info-text); border: 1px solid var(--info-border); } .empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); } .empty-state .icon { color: var(--text-muted); margin: 0 auto var(--space-md); } .empty-state h3 { margin-bottom: var(--space-sm); font-weight: 650; } .empty-state p { color: var(--text-muted); margin-bottom: var(--space-lg); max-width: 400px; margin-inline: auto; } /* ============================================================ 16. HELPERS ============================================================ */ /* Techniker-Punkt */ .tech-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* Skill Tags */ .skill-tag { display: inline-block; background: var(--accent-light); color: var(--accent-text); padding: 2px 8px; border-radius: 4px; font-size: var(--font-xs); margin: 1px 2px; } /* Code Highlight */ code.highlight { background: var(--warning-light); color: var(--warning-text); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-family: var(--font-mono); } /* Flex & Spacing Helpers */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .text-muted { color: var(--text-muted); } .text-danger { color: var(--danger); font-weight: 600; } .text-warning { color: var(--warning); } .text-success { color: var(--success); } .text-sm { font-size: var(--font-sm); } .text-center { text-align: center; } .text-right { text-align: right; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } /* v1.100.0: Zahnrad direkt an einem Listenfeld (includes/ListRegistry.php) - wer die Liste pflegen darf, kommt von hier auf die Pflegeseite */ .ft-list-gear { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--text-muted); } .ft-list-gear:hover, .ft-list-gear:focus-visible { color: var(--brand-primary-text); } /* v1.109.0: Symbole der Verknuepfungen (includes/LinkIcons.php, Bedien-Muster 57) - Farbe = Seite: Adresse gruen, Ort violett, Verbindung grau */ .ft-link-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: var(--font-xs); font-weight: 600; line-height: 1.6; text-decoration: none; border: 1px solid transparent; } .ft-link-pill:hover { text-decoration: none; filter: brightness(0.97); } .ft-link-label { display: inline-flex; vertical-align: middle; width: 18px; height: 18px; border-radius: 5px; align-items: center; justify-content: center; } .ft-link-addr { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); } .ft-link-site { background: var(--accent-light); color: var(--accent-text); } .ft-link-conn { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); } .ft-record-links { margin-top: 6px; } /* v1.122.0 (Bedien-Muster 65): Summe mit Schieber Netto/Brutto - beide Zahlen gleich gross, nicht fett; Kopfzeile mittig */ .ft-sum { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); } .ft-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; min-height: 24px; } .ft-sum-title { font-size: var(--font-xs); color: var(--text-secondary); line-height: 1; } .ft-sum-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--font-xs); color: var(--text-secondary); line-height: 1; } .ft-sum[data-mode="net"] .ft-sum-switch > span:first-child, .ft-sum[data-mode="gross"] .ft-sum-switch > span:last-child { color: var(--text-primary); font-weight: 600; } /* v1.135.0: Schieber "Firma | Privat" - Symbol vor dem Wort, senkrecht mittig; die gewaehlte Seite dunkel und fett (Regel darueber) */ .ft-sum-side { display: inline-flex; align-items: center; gap: 4px; } .ft-sum-side .icon { flex: none; } /* v1.136.0 (Bedien-Muster 69): Versionen eines Vorgangs - Pille im Kopf mit Liste (schwebend wie die Hilfe), gelbe Leiste bei ersetzter Version */ .ft-ver-wrap { margin-left: 8px; } .ft-ver-btn { cursor: pointer; font: inherit; font-size: var(--font-xs); font-weight: 600; } .ft-ver-btn:hover, .ft-ver-btn[aria-expanded="true"] { filter: brightness(0.96); } .ft-ver-pop { padding: 6px; min-width: 300px; } .ft-ver-pop-title { display: block; padding: 4px 8px 6px; font-size: var(--font-xs); color: var(--text-secondary); } .ft-ver-row { display: grid; grid-template-columns: max-content max-content 1fr max-content; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm, 6px); color: var(--text-primary); text-decoration: none; } .ft-ver-row:hover { background: var(--bg-subtle); text-decoration: none; } .ft-ver-row.is-me { background: var(--info-light); } .ft-ver-no { font-weight: 600; } .ft-ver-sum { text-align: right; } .ft-ver-banner { flex-wrap: wrap; } .ft-ver-banner-text { flex: 1 1 auto; } .ft-ver-banner-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; } .data-table tr.ft-ver-me > td { background: var(--info-light); } .ft-sum-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ft-sum-val { display: flex; flex-direction: column; } .ft-sum-num { font-size: var(--font-lg, 18px); font-weight: 500; } .ft-sum[data-mode="net"] [data-show="gross"], .ft-sum[data-mode="gross"] [data-show="net"] { display: none; } .ft-record-sep { margin-top: var(--space-md); } /* v1.114.0: Hilfe auf Klick (includes/help.php, Bedien-Muster 58) - ?-Symbol, schwebendes Fenster, kein Hover */ .ft-help-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; } .ft-help { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; line-height: 1; } .ft-help:hover, .ft-help:focus-visible, .ft-help[aria-expanded="true"] { color: var(--brand-primary-text); } .ft-help-pop { position: fixed; top: 0; left: 0; z-index: 1200; width: max-content; max-width: min(320px, 80vw); padding: 10px 12px; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--font-sm, 13px); font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; white-space: normal; } /* v1.113.0: Anschriften in der Vorgangskarte in Druckreihenfolge - das Anschriftfeld hervorgehoben */ .ft-print-addr { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); margin-top: 8px; } .ft-print-addr.ft-print-window { border-color: var(--success-border); background: var(--success-light); } .ft-print-addr-head { font-size: var(--font-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; } .ft-print-addr-lines { font-size: var(--font-sm, 13px); line-height: 1.45; } /* v1.123.0: weitere Anschriften als Sprung-Symbole in der Kopfzeile des Anschriftfelds (LinkIcons::jump) */ /* v1.126.0: Baustein "Feld sperrt Bereich" ([data-locks]) - gesperrter Bereich sichtbar ausgegraut */ fieldset.ft-lock-area { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset.ft-lock-area[disabled] { opacity: 0.5; } .form-section-sub { grid-column: 1 / -1; font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; padding: 0; margin: 4px 0 0; } .ft-link-jumps { display: inline-flex; gap: 4px; margin-left: 2px; } .ft-link-jump { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; } .ft-link-jump:hover { filter: brightness(0.95); text-decoration: none; } .ft-print-addr-tools { margin-left: auto; } .ft-print-addr-tools .btn { padding: 2px 6px; } /* v1.104.0: kleine Flagge der Korrespondenzsprache (includes/CommLanguage.php) - Grafik, weil Windows Flaggen-Emojis nur als Buchstaben zeigt */ .ft-flag { display: inline-flex; vertical-align: middle; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); margin-left: 6px; } .ft-flag svg { width: 100%; height: 100%; display: block; } .ft-flag-code { width: auto; height: auto; padding: 0 4px; font-size: var(--font-xs); font-weight: 700; color: var(--text-muted); box-shadow: 0 0 0 1px var(--border); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .text-link { color: var(--brand-primary-text); text-decoration: none; font-size: var(--font-sm); } .text-link:hover { text-decoration: underline; } /* Spinner */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ SIDEBAR COLLAPSED STATE ============================================================ */ .sidebar.collapsed { width: var(--sidebar-collapsed); } /* v1.124.0 (Bedien-Muster 66): eingeklappt + Maus drueber -> klappt UEBER den Inhalt auf; der Inhalt bleibt, wo er ist */ .sidebar.peek { width: var(--sidebar-width); z-index: 1100; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25); } .sidebar.peek ~ .main-content { margin-left: var(--sidebar-collapsed); } .sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-category-header .chevron-icon, .sidebar.collapsed .admin-info-text, .sidebar.collapsed .lang-switcher { display: none; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; } .sidebar.collapsed .sidebar-nav { padding: 12px 6px; } .sidebar.collapsed .nav-item { justify-content: center; padding: 10px; } .sidebar.collapsed .nav-subitem { padding-left: 10px; } .sidebar.collapsed .nav-category-header { justify-content: center; padding: 9px 10px; } .sidebar.collapsed .sidebar-footer { padding: 12px 6px; } .sidebar.collapsed .admin-info { justify-content: center; padding: 10px; } .sidebar.collapsed .sidebar-toggle { right: -13px; } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); } /* Tooltip bei collapsed Sidebar */ .sidebar.collapsed .nav-item { position: relative; } .sidebar.collapsed .nav-item:hover::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--sidebar-bg); color: #f1f5f9; padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--font-xs); white-space: nowrap; z-index: 300; box-shadow: var(--shadow-md); pointer-events: none; } /* ============================================================ LOGIN PAGE ============================================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--space-lg); } .login-container { width: 100%; max-width: 420px; } .login-card { background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; } .login-header { text-align: center; padding: var(--space-xl) var(--space-lg) var(--space-lg); } .login-logo { width: 56px; height: 56px; background: var(--brand-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); } .login-logo .icon svg { stroke: #fff; } .login-header h1 { font-size: var(--font-xl); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; } .login-header p { color: var(--text-muted); font-size: var(--font-sm); } .login-form { padding: 0 var(--space-lg) var(--space-lg); } .login-form .form-group { margin-bottom: var(--space-md); } .login-form .btn { margin-top: var(--space-sm); } .login-footer { text-align: center; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); background: var(--bg-subtle); } .login-footer small { display: block; margin-top: var(--space-sm); color: var(--text-muted); font-size: var(--font-xs); } .login-footer .lang-switcher { justify-content: center; } /* ============================================================ PROGRESS BAR (Limits) ============================================================ */ .progress-bar-wrap { background: var(--border); border-radius: var(--radius-full); height: 8px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--brand-primary); transition: width 0.3s ease; } .progress-bar-fill.danger { background: var(--danger); } .progress-bar-fill.warning { background: var(--warning); } /* ============================================================ ROLE PICKER ============================================================ */ .role-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-sm); } .role-card { cursor: pointer; display: block; } .role-card input { display: none; } .role-card-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-md); border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); transition: all var(--transition-fast); text-align: center; } .role-card:hover .role-card-inner { border-color: var(--brand-primary); background: var(--hover-bg); } .role-card.selected .role-card-inner { border-color: var(--brand-primary); background: var(--brand-primary-light); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); } .role-icon { font-size: var(--font-xl); display: flex; } .role-name { font-weight: 600; font-size: var(--font-sm); } .role-desc { font-size: var(--font-xs); color: var(--text-muted); line-height: 1.3; } /* ============================================================ COLOR PICKER ============================================================ */ .color-picker { display: flex; gap: 8px; flex-wrap: wrap; } .color-option { cursor: pointer; } .color-option input { display: none; } .color-swatch-pick { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; transition: all var(--transition-fast); } .color-option input:checked + .color-swatch-pick { border-color: var(--text); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px currentColor; transform: scale(1.15); } /* ============================================================ CREDENTIALS BOX (User Created) ============================================================ */ .credentials-box { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); } .cred-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); } .cred-row:last-child { border-bottom: none; } .cred-label { font-size: var(--font-sm); color: var(--text-secondary); font-weight: 500; } .cred-value { font-size: var(--font-sm); font-weight: 600; } /* ============================================================ PASSWORD GRID (User Edit) ============================================================ */ .pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-md); } .pw-option { padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); } .pw-option h4 { font-size: var(--font-base); margin-bottom: var(--space-sm); } @media (max-width: 768px) { .pw-grid { grid-template-columns: 1fr; } .role-picker { grid-template-columns: 1fr 1fr; } } /* ============================================================ ACCORDION (global wiederverwendbar) ============================================================ Verwendung:
Inhalt
============================================================ */ .accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .accordion-item { border-bottom: 1px solid var(--border); } .accordion-item:last-child { border-bottom: none; } .accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: var(--bg-subtle); border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--font-sm); color: var(--text-primary); transition: background var(--transition-fast); text-align: left; gap: 8px; } .accordion-header:hover { background: var(--bg-hover); } .accordion-title { display: flex; align-items: center; gap: 8px; flex: 1; } .accordion-badge { font-size: var(--font-xs); font-weight: 400; color: var(--text-muted); margin-left: 4px; } .accordion-chevron { display: flex; align-items: center; transition: transform var(--transition-fast); color: var(--text-muted); } .accordion-item:not(.open) .accordion-chevron { transform: rotate(-180deg); } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-item.open > .accordion-body { max-height: 2000px; } /* Varianten */ .accordion-flush { border: none; border-radius: 0; } .accordion-flush .accordion-item { border-bottom: 1px solid var(--border-light); } .accordion-flush .accordion-item:last-child { border-bottom: none; } .accordion-flush .accordion-header { padding: 10px 16px; } /* Kompakt (weniger Padding) */ .accordion-sm .accordion-header { padding: 8px 12px; font-size: var(--font-xs); } /* ============================================================ PERMISSION MATRIX ============================================================ */ /* Rollen-Header-Leiste (ueber den Accordions) */ .perm-roles-bar { display: flex; align-items: center; padding: 10px 16px; background: var(--bg-subtle); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 10; gap: 0; } .perm-roles-spacer { flex: 1; min-width: 180px; } .perm-role-col-head { width: 100px; min-width: 100px; text-align: center; font-size: var(--font-xs); font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; } /* Matrix-Tabelle (innerhalb Accordion-Body) */ .perm-matrix { width: 100%; border-collapse: collapse; font-size: var(--font-sm); display: block; } .perm-matrix tbody { display: block; } .perm-matrix tbody tr { display: flex; align-items: center; border-bottom: 1px solid var(--border-light); } .perm-matrix tbody tr:last-child { border-bottom: none; } .perm-matrix tbody tr:hover { background: var(--bg-hover); } .perm-action-cell { flex: 1; min-width: 180px; padding: 10px 16px; } .perm-action-desc { display: block; color: var(--text-muted); font-size: var(--font-xs); line-height: 1.3; margin-top: 2px; } .perm-check-cell { width: 100px; min-width: 100px; text-align: center; padding: 8px 6px; } .perm-always { color: var(--brand-primary-text); opacity: 0.5; } .perm-yes { color: var(--success); } .perm-no { color: var(--text-muted); } /* Permission Toggle Switch */ .perm-toggle { display: inline-block; cursor: pointer; } .perm-toggle input { display: none; } .perm-toggle-track { display: block; width: 36px; height: 20px; background: var(--border); border-radius: var(--radius-full); position: relative; transition: background var(--transition-fast); } .perm-toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform var(--transition-fast); box-shadow: var(--shadow-xs); } .perm-toggle input:checked + .perm-toggle-track { background: var(--success); } .perm-toggle input:checked + .perm-toggle-track::after { transform: translateX(16px); } /* Icon Picker (Rolle erstellen) */ .icon-picker { display: flex; gap: 6px; flex-wrap: wrap; } .icon-option { cursor: pointer; } .icon-option input { display: none; } .icon-pick { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--border); border-radius: var(--radius-md); transition: all var(--transition-fast); } .icon-option input:checked + .icon-pick { border-color: var(--brand-primary); background: var(--brand-primary-light); color: var(--brand-primary-text); } /* ============================================================ 17. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } /* ============================================================ TOOLBAR & FILTER ============================================================ */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; flex: 1; } .toolbar-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } /* Search inline */ .search-inline { display: flex; } .input-icon { position: relative; display: flex; align-items: center; } .input-icon .icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; } .input-icon .form-input, .input-icon input { padding-left: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); font-size: var(--font-sm); min-width: 220px; outline: none; transition: border-color var(--transition-fast); } .input-icon input:focus { border-color: var(--brand-primary); } /* Filter Pills */ .filter-pills { display: flex; gap: 4px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: var(--font-sm); font-weight: 500; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--border); text-decoration: none; transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; } .pill:hover { background: var(--hover-bg); color: var(--text-primary); } .pill.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .pill-sm { padding: 4px 10px; font-size: var(--font-xs); } .pill-count { font-size: var(--font-xs); opacity: 0.7; } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left { flex-direction: column; } .toolbar-right { justify-content: flex-end; } .input-icon input { min-width: 100%; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.mobile-open { transform: translateX(0); } .main-content { margin-left: 0 !important; } .content-header { padding: var(--space-md); } .content-body { padding: var(--space-md); } .stat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } } /* S6 (v1.5.0): Marke fieldtakt - Schrift und Farben seit K2 (v1.21.0) in variables.css */ .sidebar-brand-logo img { width: 26px; height: 26px; display: block; } /* weisse Bildmarke im Navy-Kasten */ .login-logo-brand img { width: 40px; height: 40px; display: block; } .nav-item.active { border-left: 3px solid var(--brand-accent); } .nav-item.active .icon svg { stroke: var(--brand-accent); } /* M2 (v1.6.0): Passwort vergessen */ .login-forgot { text-align: center; margin-top: 12px; font-size: 14px; } .login-forgot a { color: var(--brand-primary-text); } #forgot .hint { font-size: 13px; color: var(--text-muted); margin: 6px 0 10px; } /* T1 (v1.7.0): Support-Tickets */ .tk-thread { display: flex; flex-direction: column; gap: 12px; } .tk-msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); } .tk-kunde { border-left: 4px solid var(--brand-accent); background: var(--warning-light); } .tk-team { border-left: 4px solid var(--brand-primary); } .tk-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .tk-body { font-size: 15px; line-height: 1.55; } .row-highlight td { background: var(--warning-light); } .nav-pill { margin-left: auto; background: var(--brand-accent); color: var(--brand-primary); font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; } .sidebar.collapsed .nav-pill { position: absolute; right: 6px; top: 6px; margin: 0; } .tk-files { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; } .tk-files a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); text-decoration: none; } .ft-modal { position: fixed; inset: 0; background: rgba(18,49,77,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; } .ft-modal[hidden] { display: none; } .ft-modal-box { width: min(960px, 100%); height: min(88vh, 900px); background: var(--card-bg); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .ft-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--brand-primary-text); } .ft-modal-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ft-modal-head button { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--text-muted); } #ft-modal-frame { flex: 1; border: 0; background: var(--bg); } /* K1 (v1.17.0): Nur Ansicht - Leiste und gesperrte Bereiche (Muster der Schaltzentrale, ro-banner / data-locked) */ .ro-banner { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand-accent); border-radius: var(--radius-md); background: var(--card-bg); color: var(--brand-primary-text); font-size: var(--font-sm); font-weight: 600; } form.is-locked input:disabled, form.is-locked select:disabled, form.is-locked textarea:disabled { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; } [data-locked] .btn:disabled, [data-locked] .btn.is-locked { opacity: .45; cursor: not-allowed; } .ro-banner-danger { border-left-color: var(--danger); color: var(--danger-text); background: var(--danger-light); } /* v1.23.0: Entwickler-Hinweise (devhints.js) - gepunktete Unterstreichung, damit man sieht, wo ein Tooltip liegt */ .ft-devhint { text-decoration: underline dotted rgba(242,169,0,.6); text-underline-offset: 3px; cursor: help; } /* S1 (v1.30.0): Tabellen mit Pflege in der Zeile - Muster der Schaltzentrale (.users-table, tr.row-edit, td.cell-actions, form.form-inline) */ .users-table td.cell-actions { white-space: nowrap; } .users-table td.cell-actions form.form-inline { display: inline; margin: 0; } .users-table .row-muted td { opacity: .62; } .users-table .row-muted td.cell-actions { opacity: 1; } .users-table .row-edit td { background: var(--bg-subtle); padding: var(--space-md) var(--space-lg); } .data-table .row-muted td { opacity: .62; } label.check input[type="checkbox"] { width: auto; height: auto; } /* S2 (v1.31.0): Haekchen-Reihen (Rollen) mit Luft - Ralfs Bild aus S1, die Labels klebten aneinander */ .check-list, .row-gap > label.check { display: inline-flex; } .check-list { display: flex; flex-wrap: wrap; gap: 6px 18px; } .row-gap > label.check { margin-right: 14px; } /* v1.34.0: Popup-Erfassung (data-modal) - Quelle bleibt versteckt; Hauptkontakt als gefuellter Stern */ .ft-modal-src { display: none; } .modal-body .form-grid { grid-template-columns: 1fr 1fr; } .modal-body .form-hint { display: block; } .ft-star { color: var(--brand-accent); display: inline-flex; vertical-align: middle; margin-left: 4px; } .ft-star .icon, .ft-star svg { fill: var(--brand-accent); } .btn .icon-star-on svg { fill: var(--brand-accent); color: var(--brand-accent); } /* v1.35.0: Suchfeld statt Auswahlliste (ft-combo) und Listen-Suche ohne Neuladen (ft-live) */ .ft-combo-wrap { position: relative; } .ft-combo-hidden { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; margin: 0; padding: 0; border: 0; } .ft-combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--bg-card, var(--surface, #fff)); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; margin-top: 2px; } .ft-combo-item { padding: 8px 12px; cursor: pointer; font-size: var(--font-sm); } .ft-combo-item:hover, .ft-combo-item.active { background: var(--brand-primary); color: #fff; } .ft-combo-item.current { font-weight: 600; } .ft-combo-item.ft-combo-keep { border-top: 1px solid var(--border); color: var(--brand-primary); } .ft-combo-more { padding: 6px 12px; font-size: var(--font-xs); color: var(--text-muted); } .ft-live-busy { opacity: .6; transition: opacity .15s; } /* v1.35.0: Suchfeld-Menue (ftCombo) und Listensuche ohne Neuladen */ .ft-combo { position: relative; } .ft-combo .ft-combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; } .ft-combo-list { position: absolute; z-index: 1200; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; } .ft-combo-item { padding: 8px 12px; cursor: pointer; font-size: var(--font-sm); } .ft-combo-item:hover, .ft-combo-item.active { background: var(--brand-primary); color: #fff; } .ft-combo-item.current { font-weight: 600; } .ft-combo-item.ft-combo-new { border-top: 1px solid var(--border); color: var(--brand-primary); font-weight: 600; } .ft-combo-more { padding: 6px 12px; font-size: var(--font-xs); color: var(--text-muted); } .ft-live-busy { opacity: .6; transition: opacity .15s; } tr[data-href] { cursor: pointer; } .ft-combo-input.ft-combo-isnew { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); } /* v1.35.3 (Ralf): Popup waechst mit dem Inhalt - keine zwei Scrollleisten. Der Hintergrund scrollt als Ganzes, wenn das Fenster hoeher als der Bildschirm ist; das Suchfeld-Menue ragt frei aus dem Fenster. */ .modal-backdrop { align-items: flex-start; overflow-y: auto; padding: 5vh 0; } .modal { max-height: none; overflow: visible; margin: auto 0; } .modal-body { max-height: none; overflow: visible; } .modal-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .modal-footer { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } /* v1.36.0: Formular-Abschnitte als Akkordeon (ftInitSections) - Optik der Rechte-Matrix */ .form-section.ft-acc { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-md); overflow: hidden; } .form-section.ft-acc > .form-section-title { margin: 0; padding: 10px 14px; background: var(--bg-subtle); border-bottom: 1px solid transparent; cursor: pointer; user-select: none; font-size: var(--font-sm); color: var(--text-primary); } .form-section.ft-acc > .form-section-title:hover { background: var(--bg-hover); } .form-section.ft-acc > .form-section-title .accordion-chevron { margin-left: auto; } .form-section.ft-acc:not(.open) > .form-section-title .accordion-chevron { transform: rotate(-180deg); } .form-section.ft-acc.open > .form-section-title { border-bottom-color: var(--border); } .form-section.ft-acc > .form-section-body { padding: var(--space-md) 14px; } .form-section.ft-acc:not(.open) > .form-section-body { display: none; } .ft-acc-bar { margin-bottom: var(--space-sm); justify-content: flex-end; } .modal-body .form-section.ft-acc { margin-bottom: var(--space-sm); } /* v1.36.1: Helfer .row-gap / .row-between fehlten in der Kunden-App (nur in der Schaltzentrale) - deshalb klebten Knoepfe und Haekchen aneinander. Akkordeon-Leiste rechts, Knoepfe .btn-sm wie bei den Berechtigungen. */ .row-gap { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; } .ft-acc-bar { justify-content: flex-end; margin-bottom: var(--space-md); } /* v1.38.1 (Ralf): Haekchen ueberall als Schieber wie im Rechtesystem - global, ohne Markup-Aenderung: jedes Kontrollkaestchen in label.check oder .form-group zeichnet sich selbst als Schalter (appearance: none). Tabellen-Auswahlkaestchen (data-table) bleiben Haekchen. */ label.check input[type="checkbox"], .form-group > input[type="checkbox"], .form-check input[type="checkbox"], .checkbox-inline input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; margin: 0; flex: none; cursor: pointer; background: var(--border); border: none; border-radius: var(--radius-full); position: relative; transition: background var(--transition-fast); vertical-align: middle; } label.check input[type="checkbox"]::after, .form-group > input[type="checkbox"]::after, .form-check input[type="checkbox"]::after, .checkbox-inline input[type="checkbox"]::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform var(--transition-fast); box-shadow: var(--shadow-xs); } label.check input[type="checkbox"]:checked, .form-group > input[type="checkbox"]:checked, .form-check input[type="checkbox"]:checked, .checkbox-inline input[type="checkbox"]:checked { background: var(--success); } label.check input[type="checkbox"]:checked::after, .form-group > input[type="checkbox"]:checked::after, .form-check input[type="checkbox"]:checked::after, .checkbox-inline input[type="checkbox"]:checked::after { transform: translateX(16px); } label.check input[type="checkbox"]:focus-visible, .form-group > input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242,169,0,.4); } label.check input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; } label.check { gap: 10px; } .form-check { display: flex; align-items: center; gap: 10px; } .form-check input[type="checkbox"] { width: 36px !important; height: 20px !important; } .checkbox-inline input[type="checkbox"] { width: 36px !important; height: 20px !important; } /* v1.39.0: Adresse mit Tipp-Suche (Geocoder::field / ftInitAddress) */ .ft-address { display: contents; } .ft-address-search { position: relative; } .ft-address-search .ft-combo-list { top: 100%; } .ft-address-geo { font-size: var(--font-sm); color: var(--danger); padding: 8px 0; } .ft-address-geo.ok { color: var(--success); font-family: var(--font-mono, monospace); } /* v1.40.0: Assistent (ftInitWizard) - Schrittleiste und Schritte in der Optik des Admin-Portals */ .wiz-head-bar { margin-bottom: var(--space-sm); } .wiz-steps { display: flex; margin: 4px 0 var(--space-md); } .wiz-sb { flex: 1; text-align: center; position: relative; padding-top: 34px; font-size: var(--font-xs); color: var(--text-muted); cursor: default; } .wiz-sb::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--border); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; z-index: 1; } .wiz-sb::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); } .wiz-sb:first-child::after { display: none; } .wiz-sb.active::before { background: var(--brand-primary); } .wiz-sb.done::before { content: "\2713"; background: var(--success); } .wiz-sb.done { cursor: pointer; } .wiz-sb.active { color: var(--text-primary); font-weight: 600; } form.wiz-on .form-section.wiz-hidden { display: none; } form.wiz-on .form-section.ft-acc > .form-section-title { pointer-events: none; } form.wiz-on .form-section.ft-acc > .form-section-title .accordion-chevron { display: none; } .wiz-nav { justify-content: flex-end; margin-top: var(--space-md); } form.wiz-on .ft-acc-bar { display: none; } form.ft-wizard .wiz-head-bar { gap: var(--space-lg); } .wiz-nav { justify-content: space-between; } .ft-wizard-foot { display: none; } /* v1.40.4: Schieberleiste des Assistenten - gleicher Abstand wie zwischen den Bloecken (der Block traegt schon margin-bottom) */ .wiz-nav { margin-top: 0; } .wiz-nav .check { margin: 0; } /* v1.40.5: Schieber "Assistent" auf der Vollseite - gleicher Abstand zum Kopf und zu den Reitern wie zwischen den Karten */ .ft-wizard-back-row { margin: var(--space-lg) 0; padding-left: 4px; } /* v1.41.0: Filterpille "nicht verortet" (nur wenn > 0) */ .filter-tab.filter-tab-warn { border-color: var(--danger); color: var(--danger); } .filter-tab.filter-tab-warn.active { background: var(--danger); color: #fff; } /* v1.41.3: Absende-Knopf wartet auf Pflichtfelder */ .btn.btn-waiting, .btn.btn-waiting:hover { opacity: .45; cursor: not-allowed; } /* v1.42.0: Zeilen mit Doppelklick */ tr[data-open] { user-select: none; cursor: pointer; } tr[data-open] td { cursor: pointer; } tr[data-open]:hover td { background: var(--hover-bg); } /* v1.42.2: Aufklapp-Pfeil als eigenes Ziel */ .expand-caret { cursor: pointer; padding: 4px 6px; margin-left: -6px; border-radius: 4px; } .expand-caret:hover { background: var(--border); } /* ---- Einstellungen Unternehmen (companies/settings.php) - seit v1.44.0 ---- */ .cty-name { display: inline-flex; align-items: center; gap: var(--space-sm); } .cty-del { border-top: 1px solid var(--border); margin-top: var(--space-md); padding-top: var(--space-md); align-items: flex-end; } .cty-del .form-group { margin-bottom: 0; } /* ---- Symbol-Wahl (includes/icon-field.php + ftIconPick in core.js) - seit v1.45.0 ---- Feld: Knopf mit dem aktuellen Symbol. Ebene: ueber dem Popup (Modal 9000), unter der Rueckfrage (#ft-ask 9500). */ .ft-iconfield-btn { gap: var(--space-sm); padding-left: 4px; } .ft-iconfield-btn .ft-iconfield-ico { width: 28px; height: 28px; } .ft-iconpick { position: fixed; inset: 0; background: var(--overlay); z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; } .ft-iconpick-box { width: min(620px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--card-bg); color: var(--text); border-radius: var(--radius-lg); padding: 22px 24px 18px; box-shadow: var(--shadow-xl); } .ft-iconpick-title { margin: 0 0 var(--space-md); font-weight: 700; font-size: var(--font-base); } .ft-iconpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--space-sm); overflow-y: auto; padding: 2px; } .ft-iconpick-opt { display: flex; align-items: center; justify-content: center; height: 48px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .ft-iconpick-opt:hover { border-color: var(--tile-navy-fg); color: var(--tile-navy-fg); } .ft-iconpick-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ft-iconpick-opt.active { border-color: var(--tile-navy-fg); background: var(--tile-navy-bg); color: var(--tile-navy-fg); } .ft-iconpick-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-md); } /* v1.89.0: Suche, Hinweis ohne Treffer, Name des gewaehlten Symbols (Gruppen: includes/icon-groups.php) */ .ft-iconpick-search { height: var(--ctl-h); width: 100%; margin: 0 0 var(--space-md); padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm); } .ft-iconpick-search:focus-visible { outline: none; border-color: var(--ft-yellow); box-shadow: var(--focus-ring); } .ft-iconpick-opt[hidden] { display: none; } .ft-iconpick-none { margin: var(--space-sm) 0 0; color: var(--text-muted); font-size: var(--font-sm); } .ft-iconpick-sel { flex: 1; min-width: 0; align-self: center; color: var(--text-secondary); font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Symbolsatz nach Bereichen (symbole.php) - seit v1.89.0 ---- */ .sym-search { max-width: 420px; margin-top: var(--space-sm); } .sym-none { margin-top: var(--space-sm); } .sym-group[hidden], .sym-tile[hidden] { display: none; } /* v1.131.0: Einstellungen -> Gewerke - je Gewerk eine Karte mit Haekchen und Vorschau der Anlagentypen */ .ft-trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-sm); } .ft-trade { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; background: var(--card-bg); } .ft-trade.is-on, .ft-trade:has(input:checked) { border-color: var(--success-border); background: var(--success-light); } .ft-trade-head { display: flex; align-items: center; gap: 8px; } .ft-trade-types { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); } .ft-trade-types small { margin-left: auto; } .ft-trade-sites { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: var(--font-sm, 13px); } /* v1.134.0 */ .ft-trade-area > .form-section-title .ft-pack-switch { margin-left: auto; margin-right: 8px; font-size: var(--font-xs); font-weight: 500; } /* v1.132.0 */ .ft-iconfield-more { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--font-xs); } .sym-group > .form-section-title .badge { margin-left: 6px; } .sym-group > .form-section-title .sym-count { font-weight: 400; font-size: var(--font-xs); margin-left: 4px; } /* v1.130.0: Akkordeon */ .sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); } .sym-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); text-align: center; min-width: 0; } .sym-tile .icon { color: var(--text); } .sym-label { font-size: var(--font-sm); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; } .sym-name { font-size: var(--font-xs); color: var(--text-muted); background: none; padding: 0; overflow-wrap: anywhere; } /* ---- Anlegen-Knopf links an der Ueberschrift (Seitenkopf $createAction, Kartenkopf div.ft-create) - seit v1.45.2 ---- Ralf 28.09.2026: "Neu anlegen immer links an die Ueberschrift - uebersichtlicher, passt zum Reiter". Die Gruppe steht direkt hinter h1/h2; margin-right:auto schiebt alle uebrigen Knoepfe (Zurueck, Zur Planung, Speichern ...) nach rechts. */ .content-header > .ft-create, .card-header > .ft-create { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-left: var(--space-md); margin-right: auto; } /* ---- Rechte am Ort (includes/render-rights.php, R1) - seit v1.48.0 ---- */ .ft-rights-roles { margin: var(--space-sm) 0 var(--space-md); } .ft-rights-list { display: flex; flex-direction: column; } .ft-rights-row { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .ft-rights-row:last-child { border-bottom: 0; } .ft-rights-row.is-capped { opacity: .55; cursor: not-allowed; } .ft-rights-text { display: flex; flex-direction: column; gap: 2px; } .ft-rights-desc { font-size: var(--font-xs); color: var(--text-muted); } .ft-rights-foot { display: flex; justify-content: flex-end; margin-top: var(--space-md); } /* ---- Vorschau "Ansicht als ..." (R2, includes/Preview.php + render-rights.php) - seit v1.49.0 ---- Gelbe Leiste zwischen Seitenkopf und Inhalt, bleibt beim Scrollen oben; ausserhalb von .content-body, damit die Nur-Ansicht-Sperre (data-locked) den Knopf "Vorschau beenden" nicht mitsperrt. */ .ft-preview-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: 10px var(--space-xl); background: var(--warning-light); color: var(--warning-text); border-bottom: 1px solid var(--warning-border); font-size: var(--font-sm); } .ft-preview-bar form { margin-left: auto; } /* ---- Adressliste (companies/index.php) - seit v1.50.2 ---- Symbole der gesetzten abweichenden Adressen hinter dem Namen (Tooltip = Rolle: Name), Land als ISO-Kuerzel vor PLZ/Ort. */ .co-roles { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-sm); vertical-align: middle; color: var(--text-muted); } .co-role { display: inline-flex; cursor: help; } .co-role:hover { color: var(--tile-navy-fg); } .co-place { white-space: nowrap; } .co-cc { display: inline-block; min-width: 24px; font-size: var(--font-xs); font-weight: 600; color: var(--text-muted); letter-spacing: .3px; } /* ---- Matchcode (companies/tabs/tab-stammdaten.php) - seit v1.51.0: tippt sichtbar in Grossbuchstaben (gespeichert wird ohnehin gross) */ .ft-upper { text-transform: uppercase; } .ft-upper::placeholder { text-transform: uppercase; } /* ---- Globaler Zurueck-Knopf (app_header.php + includes/Trail.php) - seit v1.52.0: rechts im Seitenkopf, letzter Knopf ---- */ .header-actions .ft-back { white-space: nowrap; } /* ---- Adressliste: Typ-Symbol vorn, Nummer in einer Flucht mit dem Namen - seit v1.53.0 ---- */ /* alle Zellen an der ERSTEN Textzeile ausrichten - bricht der Name (Symbole) um, bleibt die Nummer auf Hoehe des Namens */ .data-table.co-list td { vertical-align: baseline; } .data-table .co-typecell { width: 36px; padding-right: 0; text-align: center; white-space: nowrap; } .co-typecell .co-type + .co-type { margin-left: 4px; } /* A2 (v1.59.0): mehrere Rollen */ .co-type { display: inline-flex; color: var(--text-secondary); cursor: help; } .co-type:hover { color: var(--tile-navy-fg); } .data-table .co-nr { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); } /* ---- Filter-Kacheln (includes/render-tiles.php, T1) - seit v1.54.0 ---- 6 je Reihe ("Alle" + hoechstens 5), jede Kachel ein Link, die aktive mit Navy-Rahmen. Popup "Kacheln anpassen": Zeilen zum Ziehen (data-sortable, Griff .ft-drag) mit Schieber. */ .stat-grid.ft-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1280px) { .stat-grid.ft-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .stat-grid.ft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ft-tile { color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ft-tile:hover { border-color: var(--ctl-border); box-shadow: var(--shadow-md); } .ft-tile.is-active { border-color: var(--tile-navy-fg); box-shadow: inset 0 0 0 1px var(--tile-navy-fg); } /* v1.152.0: Rahmen 1 px + Innenschatten - die Kachel wird beim Aktivieren nicht hoeher */ .ft-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-tiles-bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); } .ft-tile-row { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin-bottom: 6px; } .ft-tile-row.is-fixed { background: var(--bg-subtle); color: var(--text-secondary); } .ft-tile-row .ft-tile-name { flex: 1; } .ft-tile-row label.check { margin: 0; } .ft-drag { display: inline-flex; color: var(--text-muted); cursor: grab; touch-action: none; border-radius: var(--radius-sm); } .ft-drag:focus-visible { outline: 2px solid var(--brand-accent); } [data-sortable].is-sorting, [data-sortable].is-sorting * { cursor: grabbing; user-select: none; } [data-sort-item].is-dragging { border-style: dashed; border-color: var(--tile-navy-fg); opacity: .85; } /* ---- Reihenfolge per Ziehen in Tabellen (T2, SortOrder.php) - seit v1.55.0: schmale Griff-Spalte vorn ---- */ .data-table .sort-handle-cell { width: 28px; padding-right: 0; } .data-table tr[data-sort-item].is-dragging td { background: var(--hover-bg); } /* ---- v1.147.0 Beleg-Positionen (Bedien-Muster 76): Vorschaubild mit Grossansicht (ft_thumb, global) und Kennzeichen (ItemFlags) ---- */ .data-table.ft-items td { vertical-align: middle; } /* Zeilen mit Vorschaubild: alles mittig zum Bild */ .data-table .ft-col-thumb { width: 52px; padding-right: 0; } .data-table .ft-col-flags { width: 1%; white-space: nowrap; } .data-table .ft-col-num { width: 8.5rem; } /* v1.148.0 (Ralf): Menge, Preis, Rabatt gleich breit - die Bezeichnung bekommt den Rest */ .data-table .ft-col-sum { width: 1%; white-space: nowrap; } .ft-item-link { color: inherit; text-decoration: none; } .ft-item-link:hover strong { color: var(--brand-primary-text); text-decoration: underline; } .ft-thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--card-bg); vertical-align: middle; } .ft-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .ft-thumb.is-empty { color: var(--text-muted); background: var(--bg-subtle); } .ft-zoom { position: fixed; z-index: 10001; pointer-events: none; padding: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .08s; } .ft-zoom.is-on { opacity: 1; } .ft-zoom img { display: block; max-width: 320px; max-height: 320px; width: auto; height: auto; } .ft-itemflags { display: inline-flex; gap: 4px; vertical-align: middle; } .ft-itemflag { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid transparent; } .ft-itemflag.is-empty { border: 0; } .ft-itemflag-info { background: var(--info-light); color: var(--info-text); border-color: var(--info-border); } .ft-itemflag-neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); } .ft-itemflag-warn { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); } .ft-itemflag-ok { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); } a.ft-itemflag.is-link { cursor: pointer; text-decoration: none; transition: box-shadow var(--transition-fast); } a.ft-itemflag.is-link:hover { box-shadow: 0 0 0 2px currentColor; } /* v1.148.0: Kennzeichen mit Ziel sichtbar anklickbar */ /* ---- Zahlungsbedingungen / Zahlungsarten (v1.57.0) ---- Gesperrte Werte in der Akte (kommen aus der gewaehlten Bedingung, aendern nur ueber das Zahnrad); Stern = Standard in den Listen */ .ft-locked { position: relative; } /* gleiche Kette wie die allgemeine Feldregel (.form-group input:not(...) x5, Zeile ~813) + .ft-locked - sonst verliert sie (CSS-Muster 9) */ .form-group .ft-locked input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) { background: var(--bg-subtle); color: var(--text-secondary); padding-right: 32px; cursor: default; } .ft-locked .ico, .ft-locked svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .ft-locked-hint { display: flex; align-items: center; gap: 6px; margin-top: calc(-1 * var(--space-sm)); } .ft-std { display: inline-flex; color: var(--brand-accent); } .ft-std svg { fill: currentColor; } /* ---- Rollen einer Adresse (A2, includes/AddressRoles.php) - seit v1.59.0 ---- Je Rolle eine Zeile: Schieber + Symbol + Name | unsere Nummer | Meine Nr. bei ihm */ .role-grid { display: grid; gap: 6px; } .role-grid-head, .role-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; } /* v1.59.2: halbe Breite (rechte Spalte) */ .role-grid-simple .role-row { grid-template-columns: 1fr; } .role-row:not(:has(input[type="checkbox"]:checked)) input[type="text"] { opacity: .45; } /* nicht gewaehlte Rolle: Nummern abgeblendet */ .role-row:not(:has(input[type="checkbox"]:checked)) input[type="text"]:focus { opacity: 1; } .role-grid-head span { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .role-row label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .role-checks { display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); } .role-checks label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; } @media (max-width: 720px) { .role-grid-head { display: none; } .role-row { grid-template-columns: 1fr; } } /* ---- Konditionen als Stufen-Zeilen (Reiter Kaufmaennisch) - seit v1.59.1: "Skonto 1: [3] % innerhalb [14] Tagen" ---- */ .pay-stages .pay-stage { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 6px; } .pay-stages .pay-stage[hidden] { display: none; } .pay-stage-label { min-width: 150px; font-weight: 600; color: var(--text-secondary); } .pay-num { width: 96px; flex: none; } /* ---- Einsatzort-Liste (E1, v1.60.0; E2 v1.61.0 Ralf: "Icon nicht verrueckt, wenn ausklappbar"): das Art-Symbol steht in JEDER Zeile an derselben Stelle (links, feste Breite), der Aufklapp-Pfeil kommt nur zusaetzlich dahinter und verschiebt nichts */ .data-table.co-list .co-typecell { text-align: left; width: 48px; } .co-typecell .co-type { display: inline-block; width: 18px; text-align: center; vertical-align: middle; } .co-typecell .expand-caret { display: inline-block; margin-left: 4px; color: var(--text-muted); cursor: pointer; vertical-align: middle; } /* ---- Speichern-Leiste (v1.62.0, Bedien-Muster 29, core.js ftInitSaveBar): links Speichern, rechts "Alle auf-/zuklappen" ---- */ .ft-acc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; } .ft-acc-bar .ft-acc-left { display: flex; align-items: center; gap: var(--space-sm); } .ft-acc-bar .ft-acc-right { margin-left: auto; } /* ---- v1.63.0 (Ralf: "das Dropdown geht ins Nichts - muss ueber den anderen Akkordeon-Block gehen"): der Block darf ueberstehen, damit Suchfeld-Menues (.ft-combo-list) und aehnliche Aufklapper ueber den folgenden Bloecken liegen statt abgeschnitten zu werden. Die runden Ecken traegt jetzt die Kopfzeile selbst (vorher schnitt overflow:hidden sie zurecht). ---- */ .form-section.ft-acc { overflow: visible; } .form-section.ft-acc > .form-section-title { border-radius: calc(var(--radius-md) - 1px); } .form-section.ft-acc.open > .form-section-title { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; } .form-section.ft-acc .ft-combo-list { z-index: 1200; } /* ---- v1.64.0 (Ralf, Bedien-Muster 30): Reiterleiste EINZEILIG - engere Abstaende; reicht der Platz nicht, scrollt der Reiter-Bereich (.tabs-scroll, render_tabs) waagerecht statt umzubrechen. Die Knoepfe rechts stehen fest daneben (nicht mehr absolut). Die Grundlinie ist ein innerer Schatten der Leiste, damit die Unterstreichung des aktiven Reiters im Scrollbereich nicht abgeschnitten wird. ---- */ .tabs-bar:has(> .tabs-scroll) { flex-wrap: nowrap; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--border); padding-right: var(--space-sm); gap: var(--space-sm); } /* die alten Platzhalter fuer absolut gesetzte Knoepfe (components/tabs.css, Gewicht 0,3,0, wird NACH styles.css geladen) gelten hier nicht - deshalb hoeher gewichtet (0,4,0, Klasse doppelt), ohne !important */ .tabs-bar.tabs-bar:has(> .tabs-scroll):has(> .tabs-right) { padding-right: var(--space-sm); } .tabs-bar > .tabs-scroll { display: flex; align-items: stretch; align-self: stretch; gap: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .tabs-bar > .tabs-scroll::-webkit-scrollbar { display: none; } .tabs-bar > .tabs-scroll > .tab-link { margin-bottom: 0; padding: 12px 8px; gap: 6px; white-space: nowrap; flex: none; } /* verdeckte Reiter: die Leiste laeuft an diesem Rand weich aus (core.js setzt more-l / more-r); Mausrad scrollt waagerecht */ .tabs-scroll.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); } .tabs-scroll.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); } .tabs-scroll.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); } .tabs-bar:has(> .tabs-scroll) > .tabs-right { position: static; flex: none; margin-left: auto; display: flex; gap: 6px; align-items: center; } /* Hauptbereich darf schmaler werden als sein Inhalt (Flex-Standard min-width:auto gab die volle Breite der Reiter nach oben weiter - die Seite wurde breiter als das Fenster); so scrollt die Reiterleiste in sich */ .app-layout > .main-content, .main-content > .content-body { min-width: 0; } /* ---- v1.64.0 (Ralf): zugeklappte Bloecke ohne leeren Streifen - der Block selbst hat keinen Innenabstand, den traegt der Inhalt ---- */ .form-section.ft-acc { padding: 0; } /* ---- v1.65.0 (global fuer Listen nach Schema, .co-list): Werte wie Nummer, Telefon, E-Mail brechen nie um (td.nw, .co-nr); wird die Tabelle breiter als ihre Karte, scrollt sie IN der Karte waagerecht statt die Seite zu verbreitern ---- */ .co-list td.nw, .co-list td.co-nr, .co-list td.co-place { white-space: nowrap; } .card-body-flush:has(> table.co-list) { overflow-x: auto; } .ct-list td { white-space: nowrap; } /* Kontaktliste: jede Zeile einzeilig (Name, Funktionen, Zuordnung) - Flucht wie Adressen */ /* ---- Baustein Blaettern (v1.66.0, includes/render-pagination.php, Bedien-Muster 33) ---- links Bereich, Mitte Pfeile + hoechstens 7 Zahlen mit "...", rechts "Je Seite"; alle Knoepfe 32 px wie .btn-sm, aktuelle Seite Navy */ .ft-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-md); border-top: 1px solid var(--border); } .ft-pager-info { font-size: var(--font-sm); color: var(--text-secondary); white-space: nowrap; } .ft-pager-nav, .ft-pager-nums { display: flex; align-items: center; gap: 4px; } .ft-pg { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card, #fff); color: var(--text-primary); font-size: var(--font-sm); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); } a.ft-pg:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .ft-pg-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 600; } .ft-pg-off { opacity: .4; cursor: default; } .ft-pg-dots { min-width: 20px; text-align: center; color: var(--text-muted); font-size: var(--font-sm); } .ft-pager-short { display: none; font-size: var(--font-sm); color: var(--text-secondary); padding: 0 8px; white-space: nowrap; } .ft-pager-per { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--text-secondary); margin: 0; white-space: nowrap; } .ft-pager-per select { width: auto; min-width: 72px; height: 32px; padding: 0 8px; } @media (max-width: 720px) { .ft-pager { justify-content: center; } .ft-pager-info, .ft-pager-per, .ft-pager-nums { display: none; } .ft-pager-short { display: inline; } } /* ---- Symbole: Material Symbols Outlined (v1.66.0, includes/icons.php, CSS-Muster) - Flaeche statt Strich; Farbe ueber color. Die drei alten Strich-Regeln (Seitenleisten-Logo, aktiver Menuepunkt, Login-Logo) bekommen ihre Farbe hier als color. ---- */ .icon svg.mi { fill: currentColor; stroke: none; stroke-width: 0; } .sidebar-brand-icon .icon, .login-logo .icon { color: #fff; } .nav-item.active .icon { color: var(--brand-accent); } .icv-table td { vertical-align: middle; } .icv-table .icv-old, .icv-table .icv-new { width: 70px; } .icv-table .icv-sizes .icon { margin-right: 10px; } /* ---- Persoenliche Anzeigegroesse (v1.67.0, Mein Konto -> Darstellung, wie im Altsystem): skaliert Schrift, Symbole und Abstaende gleich- maessig wie der Browser-Zoom; Wert je Benutzer in user_settings (ui_scale 90/100/110/125/140), vom Seitenkopf als --ui-scale gesetzt ---- */ html { zoom: var(--ui-scale, 1); } .ui-scale-pick { display: flex; flex-wrap: wrap; gap: 6px; } .ui-scale-pick button { min-width: 64px; } .ui-scale-pick button.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .ui-scale-pick button[data-scale="90"] { font-size: 13px; } .ui-scale-pick button[data-scale="110"] { font-size: 16px; } .ui-scale-pick button[data-scale="125"] { font-size: 18px; } .ui-scale-pick button[data-scale="140"] { font-size: 20px; } /* ---- Akten-Kopf (v1.68.0, Ralf 28.09.2026, Bedien-Muster 35): Name steht oben im Seitenkopf neben dem Symbol; die Kopfkarte darunter ist EINE schmale Zeile - Pillen vorn (Aktiv, Art, Funktion, Herkunft), dann die Angaben (Nr., Ort, Zuordnung, Telefon ...). Gilt fuer Adresse, Einsatzort, Kontakt und jede kommende Akte (.company-header-card.record-head). ---- */ .company-header-card.record-head { padding: 10px var(--space-md); min-height: 0; } .record-head .company-header-info { display: block; min-width: 0; } .record-head .company-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-width: 0; } .record-head-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .record-head-pills:empty { display: none; } .record-head .company-header-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; } .record-head .company-header-actions:empty { display: none; } .company-header-card.record-head:not(:has(.badge, .meta-item, .ft-star)) { display: none; } /* neue Akte: noch nichts zu zeigen */ .content-header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* lange Namen im Seitenkopf */ /* v1.68.0: Blaettern im Browser (Akten-Reiter) - dieselben Knoepfe als