/* === RESET & BASE === */ /* Inter selbst gehostet (Variable Font, latin-Subset inkl. Umlaute + €) — kein Google-Fonts-Request mehr: schneller, offline-faehig, DSGVO-sauber. Die Datei deckt als Variable Font alle Gewichte 400–700 ab. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } input, textarea, select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(91, 75, 196, 0.15); } /* Suchfelder bleiben beim Fokus dezent — kein Akzent-Ring */ input[type="search"]:focus { border-color: var(--color-border); box-shadow: none; } /* Strukturelle Tokens — Farben/Schatten definiert ausschliesslich themes.css (frueher lag hier ein kompletter Dark-Satz, der nur wegen der Bundle- Reihenfolge base→themes unsichtbar blieb) */ :root { --radius: 10px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-link, var(--color-primary)); } h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 600; } /* === THEME DEFINITIONEN === */ /* 2 Modi: Light (Default) + Dark */ /* Aktives Theme: data-theme Attribut auf ("light" | "dark") */ /* Brand-Akzent (faictory, themeunabhaengig): zweifarbiger Verlauf wie auf faictory.de fuer Primaer-Buttons + Sidebar-Marke/Nav-Avatar. Core-Default; ein Projekt-CI kann --accent/--accent-2/--accent-gradient uebersteuern (partials/ci-style.php). Konsumiert via var(--accent-gradient, var(--color-primary)) in components.css (.btn--primary) und layout.css (Marke, Nav-Avatar). */ :root { --accent: #f97467; --accent-2: #790a0a; --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); } /* --- LIGHT (Default) --- */ [data-theme="light"], :root { --color-primary: #5b4bc4; --color-primary-dark: #4d3fa6; --color-primary-light: #efedf9; --color-bg: #f6f5fa; --color-surface: #ffffff; --color-surface-hover: #faf9fd; --color-text: #211e33; --color-text-muted: #6f6d7a; --color-text-light: #a8a29e; --color-border: #e7e5e4; --color-border-light: #f5f5f4; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --shadow: 0 1px 2px rgba(33,30,51,0.05), 0 4px 16px rgba(33,30,51,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); --login-gradient: linear-gradient(135deg, #faf5ff 0%, #fafaf9 50%, #f5f3ff 100%); --color-favorite: #fbbf24; } /* --- DARK --- */ [data-theme="dark"] { --color-primary: #897dd5; --color-primary-dark: #5b4bc4; --color-primary-light: rgba(137, 125, 213, 0.12); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25); --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25); --shadow-lg: 0 10px 25px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3); --login-gradient: linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%); --color-favorite: #fbbf24; } /* Light-Theme Alert-Borders: kraeftigere Border, weil die *-light-Hintergruende im Light-Mode fast weiss sind */ [data-theme="light"] .alert--success { border-color: #a7f3d0; } [data-theme="light"] .alert--error { border-color: #fecaca; } [data-theme="light"] .alert--warning { border-color: #fde68a; } /* Dark/Light-Switch (Einstellungen → Erscheinungsbild) */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); } .theme-switch-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; transition: all 0.15s; } .theme-switch-opt:hover { color: var(--color-primary); } .theme-switch-opt--active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow); } .theme-switch-opt--active:hover { color: var(--color-text); } /* === Icon System (SVG inline, Linear-Style) === */ /* Monochrome, 1px stroke, currentColor */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 20px; height: 20px; } /* Icons als background-image SVG (currentColor via filter) */ .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* === Avatar (Sidebar-Benutzer-Chip + Konto-Popover) === Frueher gab es hier die komplette Top-Navigation (.nav*). Die ist entfernt — Sidebar ist das einzige Layout. Nur die Avatar-Klassen bleiben, weil sie der Benutzer-Chip und das Konto-Menue (partials/_usermenu-popover.php) nutzen. */ .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* === Main Content === */ .main { padding: 0; width: 100%; } /* Container-Varianten: tragen das Padding, damit .main padding-frei bleibt. * So koennen Module mit eigener Sidebar edge-to-edge im .main sitzen, * waehrend normaler Content bequem Abstand hat. */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; } .container--narrow { width: 100%; max-width: 640px; margin: 0 auto; padding: 2rem; } .container--wide { width: 100%; max-width: none; margin: 0; padding: 1rem; } /* ============================================================ * Sidebar-Layout (body[data-layout="sidebar"]) * Haupt-Navi wandert in eine fixe linke Spalte, Modul-Submenues * werden zu ausklappbaren Unterelementen. * * Breiten-Management via CSS-Variable --sidebar-width. Beim Collapse * wird nur die Variable geaendert, alles andere (Sidebar, Content, * Transitions) folgt automatisch. * ============================================================ */ body[data-layout="sidebar"] { --sidebar-width: 240px; --sidebar-gap: 0.5rem; } /* Collapsed-Mode: Sidebar schrumpft zur schmalen Icon-Rail (66px), sie bleibt * sichtbar. Nur die Variable aendert sich — .main und .app-sidebar folgen. * Wieder-Aufklappen ueber die Brand-Marke (app.js). */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] { --sidebar-width: 66px; --sidebar-gap: 0px; } /* Gap wird ueber margin-left erzeugt, NICHT ueber padding-left. * Dadurch bleibt .main's Padding einheitlich bei 2rem und alle Views * die sich mit 'margin: -2rem' in .main rausziehen funktionieren konsistent. */ body[data-layout="sidebar"] .main { margin-left: calc(var(--sidebar-width) + var(--sidebar-gap)); width: calc(100% - var(--sidebar-width) - var(--sidebar-gap)); padding: 0; min-height: 100vh; transition: margin-left 0.2s ease, width 0.2s ease; } .app-sidebar { display: none; position: fixed; left: 0; top: 0; width: var(--sidebar-width, 240px); /* folgt der Collapse-Variable: 240px <-> 66px */ height: 100vh; /* --sidebar-* setzt das CI-Theming (partials/ci-style.php); ohne CI gilt das Theme. */ background: var(--sidebar-bg, var(--color-surface)); border-right: 1px solid var(--color-border); box-shadow: none; padding: 20px 12px; z-index: 100; flex-direction: column; gap: 4px; transition: width 0.2s ease, padding 0.2s ease; } body[data-layout="sidebar"] .app-sidebar { display: flex; } /* Collapsed: schmale Icon-Rail (Prototyp-Spec) — Labels/Name/Claim/Meta aus, * Icons zentriert. Die Sidebar bleibt sichtbar, verschwindet NICHT. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar { padding: 20px 10px; overflow: visible; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand { justify-content: center; padding: 4px 0 18px; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand-name, body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-group-label { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link { justify-content: center; padding: 9px 0; gap: 0; position: relative; } /* Eingeklappt: die Nav darf nicht clippen, sonst wird der Icon-Tooltip abgeschnitten. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-nav { overflow: visible; } /* Label wird zum Tooltip: weisse Schrift auf schwarzem, abgerundetem "Button" rechts neben dem Icon. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-label { display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); flex: none; padding: 6px 11px; background: #1a1a22; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 300; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link:hover .app-sidebar-link-label { opacity: 1; visibility: visible; } /* Eingeklappt: Chevron der Submenue-Parents entfaellt (kein Platz in der Rail). */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-chevron { display: none; } /* Eingeklappt: Submenue-Liste ausblenden — die Rail zeigt nur die Modul-Icons. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-submenu { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user { justify-content: center; margin: 6px -10px 0; padding: 12px 0 2px; gap: 0; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user-meta { display: none; } /* Brand nach Prototyp-Spec: Mark + Name/Claim + Collapse-Pfeil, keine Trennlinie. */ .app-sidebar-brand { padding: 4px 10px 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Logo-Darstellung: ENTWEDER neben dem Schriftzug (--mark, Default) ODER ueber die volle Breite mit Titel darunter (--full). Das Logo kann optional eine eigene Hintergrundfarbe bekommen (ci_logo_bg = "Marke"), unabhaengig von der Sidebar- Farbe — z. B. ein schwarzes Logo auf gelbem Grund. */ .app-sidebar-brand-logo-link { display: inline-flex; text-decoration: none; min-width: 0; } .app-sidebar-brand-box { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .app-sidebar-brand-box--bg { padding: 5px 7px; border-radius: 8px; } .app-sidebar-brand-img { display: block; max-width: 100%; height: auto; } /* Modus "neben dem Schriftzug": kompaktes Logo in Zeilenhoehe, Titel daneben. */ .app-sidebar-brand--mark .app-sidebar-brand-box { height: 30px; } .app-sidebar-brand--mark .app-sidebar-brand-box--bg { height: 36px; } .app-sidebar-brand--mark .app-sidebar-brand-img { height: 100%; width: auto; max-width: 140px; } /* Modus "volle Breite": Logo oben, Titel darunter. Die Breite (ci_logo_width) steht als Inline-Style am Link; Box und Bild fuellen sie. */ .app-sidebar-brand--full { flex-direction: column; align-items: stretch; gap: 12px; position: relative; } .app-sidebar-brand--full .app-sidebar-brand-logo-link { align-self: center; max-width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-box { width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-img { width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-name { flex: none; text-align: center; align-self: center; max-width: 100%; } /* Einklapp-Pfeil oben rechts statt in einer eigenen Zeile: spart Hoehe. */ .app-sidebar-brand--full .app-sidebar-collapse-btn { position: absolute; top: 0; right: 0; } /* Eingeklappte Icon-Rail (66px): kein Platz fuers Logo — ausblenden, die Rail zeigt nur den Aufklapp-Button (siehe unten). */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand-logo-link { display: none; } .app-sidebar-brand-name { font-weight: 700; font-size: 15px; color: var(--sidebar-ink-strong, var(--color-text)); text-decoration: none; letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Claim unter dem App-Namen (CI-Feld ci_claim, z.B. "CRM & Projekte") */ .app-sidebar-brand-claim { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sidebar-ink, var(--color-text-muted)); opacity: 0.75; margin-top: -2px; } /* ---- Bereichs-Switcher (docs/frontend.md "Bereiche") ---------------------- * 2 Bereiche: Segmented-Pill ueber dem Dashboard-Link. 3+: Combobox-Button * mit Popover. Eingeklappte Rail zeigt nur die Initialen (Regeln unten). */ .app-sidebar-areas { margin: 0 0 14px; flex-shrink: 0; position: relative; } .app-sidebar-areas--pill { display: flex; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); gap: 2px; } /* Textfarben theme-basiert (nicht --sidebar-ink): der Pill-Hintergrund ist * --color-bg, nicht die CI-Sidebar-Farbe — sidebar-ink waere darauf unlesbar. */ .app-sidebar-area-seg { flex: 1; text-align: center; padding: 5px 8px; border-radius: calc(var(--radius) - 3px); font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar-area-seg:hover { color: var(--color-primary); } .app-sidebar-area-seg--active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow); } .app-sidebar-area-seg--active:hover { color: var(--color-text); } .app-sidebar-area-seg-initial { display: none; } /* Combobox (3+ Bereiche): Button mit aktuellem Label + Chevron, Popover-Liste. */ .app-sidebar-area-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer; } .app-sidebar-area-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); } .app-sidebar-area-btn-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-sidebar-area-btn-initial { display: none; } .app-sidebar-area-chevron { flex: 0 0 auto; opacity: 0.6; } .app-sidebar-area-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); padding: 4px; z-index: 300; } .app-sidebar-area-item { display: block; padding: 7px 10px; border-radius: calc(var(--radius) - 4px); font-size: 13px; font-weight: 500; color: var(--color-text); text-decoration: none; } .app-sidebar-area-item:hover { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); } .app-sidebar-area-item--active { color: var(--color-primary); font-weight: 600; } /* Eingeklappte Icon-Rail: Pill wird zur Initial-Spalte, Combobox zum Initial-Button. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-areas--pill { flex-direction: column; border-radius: calc(var(--radius) - 3px); padding: 3px; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg { padding: 6px 0; border-radius: calc(var(--radius) - 3px); } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-label { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-initial { display: inline; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn { justify-content: center; padding: 7px 0; gap: 0; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-label, body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-chevron { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-initial { display: inline; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-menu { left: calc(100% + 8px); right: auto; top: 0; min-width: 180px; } .app-sidebar-nav { flex: 1; min-height: 0; } .app-sidebar-module { display: block; line-height: 1.4; } /* Gruppen-Ueberschrift in der Nav (manifest.nav_group + config app.nav_groups). Standardmaessig NICHT eingerueckt: linksbuendig mit der linken Kante der Link-Pills (padding-left 0), einheitlich ueber alle Projekte. */ .app-sidebar-group-label { padding: 1.5rem 0.5rem 0.35rem 0; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-ink, var(--color-text-light)); opacity: 0.75; } .app-sidebar-group-label:first-child { padding-top: 0.35rem; } /* Nav-Reiter als abgerundete Pills (CI-Default aus CRM): kein Border-Left, keine eckige Voll-Breite — Hover/Active liegen als abgerundete Flaeche inset in der 12px-Sidebar-Polsterung. Hover = zarter Ink-Wash, Active = Primaerfarbe dezent auf Surface. */ .app-sidebar-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: calc(var(--radius) - 3px); color: var(--sidebar-ink, var(--color-text-muted)); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; } .app-sidebar-link:hover { background: color-mix(in srgb, var(--sidebar-ink, var(--color-text-muted)) 9%, transparent); color: var(--sidebar-ink-strong, var(--color-text)); } .app-sidebar-link--active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-weight: 600; } .app-sidebar-link-icon { display: flex; align-items: center; flex: 0 0 auto; opacity: 0.75; } .app-sidebar-link--active .app-sidebar-link-icon { opacity: 1; } .app-sidebar-link-label { flex: 1; } /* Nav-Badge (manifest.nav_badge, z.B. faellige Wiedervorlagen): Pille am rechten Rand. */ .app-sidebar-link-badge { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-warning); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; } /* Eingeklappt: Badge schrumpft zum Punkt oben rechts am Icon — Zahl entfaellt, das "hier ist was offen"-Signal bleibt sichtbar. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-badge { position: absolute; top: 5px; right: 8px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; } .app-sidebar-link-chevron { transition: transform 0.15s; opacity: 0.6; font-size: 0.7rem; } .app-sidebar-module--expanded > .app-sidebar-link .app-sidebar-link-chevron { transform: rotate(90deg); } /* Submenue eines Moduls (manifest.sidebar): eingerueckte Pills im GLEICHEN Stil wie die Modul-Links — kein Border-Left, kein Fremd-Hintergrund (der frueher die dunkle Sidebar als weisse Box durchbrach), abgerundet. Hover = zarter Ink-Wash, Active = Primaerfarbe dezent auf Surface. */ .app-sidebar-submenu { display: none; margin: 2px 0 4px; padding-left: 20px; } .app-sidebar-module--expanded .app-sidebar-submenu { display: block; } .app-sidebar-subitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: calc(var(--radius) - 3px); color: var(--sidebar-ink, var(--color-text-muted)); text-decoration: none; font-size: 12.5px; font-weight: 500; white-space: nowrap; } .app-sidebar-subitem:hover { background: color-mix(in srgb, var(--sidebar-ink, var(--color-text-muted)) 9%, transparent); color: var(--sidebar-ink-strong, var(--color-text)); } .app-sidebar-subitem--active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-weight: 600; } .app-sidebar-footer { margin-top: auto; border-top: 1px solid var(--color-border); padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .app-sidebar-footer-btn { background: none; border: none; padding: 0.4rem; border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; } .app-sidebar-footer-btn:hover { background: var(--color-bg); color: var(--color-text); } .app-sidebar-footer-profile { margin-left: auto; } /* Klickbarer User-Chip unten: oeffnet das Settings-Modal (Button-Reset noetig, * da im Core ein