/* * t-shirtbox.de Auftragsverwaltung – Design-System (Refresh 2026) * „Dezent & seriös": neutrale Flächen, Rot nur als Akzent, gedämpfte * Statusfarben als Chip, flache 1px-Rahmen statt Schatten, hell + dunkel. * Dark-Mode läuft über Bootstraps data-bs-theme (auf ). */ /* ============================================================================ Design-Tokens ============================================================================ */ :root, :root[data-bs-theme="light"] { --primary:#d62839; --primary-dark:#b21f2b; --primary-ink:#ffffff; --primary-weak:#fcebed; --primary-line:#f2c7cc; --ground:#f4f4f6; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f1f1f4; --border:#e6e5e9; --border-strong:#d9d8dd; --text:#1b1c21; --muted:#6c6e78; --faint:#9a9ca5; --bar:#22232b; --bar-ink:#e9eaee; --bar-muted:#a6a8b2; --radius:8px; --radius-sm:6px; --navbar-height:52px; --shadow-sm:0 1px 2px rgba(20,20,30,.05); --shadow-md:0 4px 14px rgba(20,20,30,.10); --shadow-lg:0 10px 30px rgba(20,20,30,.14); --mono: ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace; /* Bootstrap 5.3 an die Palette angleichen */ --bs-body-bg: var(--ground); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: 214,40,57; --bs-link-color: var(--primary); --bs-link-color-rgb: 214,40,57; --bs-link-hover-color: var(--primary-dark); --bs-focus-ring-color: rgba(214,40,57,.20); } :root[data-bs-theme="dark"] { --primary:#ff5c68; --primary-dark:#ff828c; --primary-ink:#1a0e10; --primary-weak:rgba(255,92,104,.13); --primary-line:rgba(255,92,104,.32); --ground:#16171b; --surface:#1e1f26; --surface-2:#23242c; --surface-3:#262832; --border:#2e303a; --border-strong:#3a3c47; --text:#e7e8ec; --muted:#9a9ca6; --faint:#71737d; --bar:#111217; --bar-ink:#e9eaee; --bar-muted:#8a8c96; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 12px 34px rgba(0,0,0,.55); --bs-primary: var(--primary); --bs-primary-rgb: 255,92,104; --bs-link-color: var(--primary); --bs-link-color-rgb: 255,92,104; --bs-link-hover-color: var(--primary-dark); --bs-focus-ring-color: rgba(255,92,104,.28); } /* Fallback, falls JS die Theme-Wahl nicht setzt: OS-Präferenz */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { --primary:#ff5c68; --primary-dark:#ff828c; --primary-ink:#1a0e10; --primary-weak:rgba(255,92,104,.13); --primary-line:rgba(255,92,104,.32); --ground:#16171b; --surface:#1e1f26; --surface-2:#23242c; --surface-3:#262832; --border:#2e303a; --border-strong:#3a3c47; --text:#e7e8ec; --muted:#9a9ca6; --faint:#71737d; --bar:#111217; --bar-ink:#e9eaee; --bar-muted:#8a8c96; } } /* ============================================================================ Grundlagen ============================================================================ */ body { font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background-color: var(--ground); color: var(--text); padding-top: var(--navbar-height); font-size: 0.925rem; } .mono, .tb-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); text-decoration: underline; } .card a:hover, a.btn:hover, .list-group-item a:hover { text-decoration: none; } /* ============================================================================ Navbar / Footer ============================================================================ */ .navbar { background-color: var(--bar) !important; box-shadow: none; border-bottom: 1px solid rgba(0,0,0,.28); min-height: var(--navbar-height); z-index: 1030; } .brand-logo { font-weight: 700; font-size: 1.2rem; color: var(--primary) !important; letter-spacing: -0.02em; } .brand-subtitle { font-size: 0.78rem; color: var(--bar-muted); font-weight: 500; } .navbar .navbar-nav .nav-link { color: var(--bar-muted); transition: color .15s, background-color .15s; font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: 6px; } .navbar .navbar-nav .nav-link:hover { color: var(--bar-ink); background: rgba(255,255,255,.05); } .navbar .navbar-nav .nav-link.active { color: var(--bar-ink); box-shadow: inset 0 -2px 0 var(--primary); } .navbar .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .navbar .btn-primary:hover { filter: brightness(.94); } .footer { background-color: var(--bar) !important; border-top: 1px solid rgba(0,0,0,.28); } .footer .text-muted { color: var(--bar-muted) !important; } /* Theme-Umschalter */ #themeToggle .bi-sun, #themeToggle .bi-moon-stars { pointer-events:none; } /* ============================================================================ Hauptinhalt ============================================================================ */ .main-content { min-height: calc(100vh - var(--navbar-height) - 70px); padding-bottom: 2rem; } /* ============================================================================ Karten ============================================================================ */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; } .card-header { background-color: transparent; border-bottom: 1px solid var(--border); padding: 0.8rem 1rem; } .card-header .card-title { color: var(--muted); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; } /* KPI-Icons entsättigen (monochrom, ruhig) – falls noch genutzt */ .kpi-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; background: var(--surface-3) !important; color: var(--muted) !important; } /* KPI-Kacheln (Dashboard) – ruhig: Label, große monospaced Zahl, Kontextzeile */ .kpi-card .kpi-lab { font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .kpi-card .kpi-val { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.9rem; font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-top:.35rem; } .kpi-card .kpi-meta { margin-top:.5rem; font-size:.78rem; color:var(--faint); } /* Status-Reihe (Dashboard) – Zähler mit Farbpunkt statt farbigem Rand */ .statrow { display:flex; flex-wrap:wrap; gap:.5rem; } .stat { flex:1 1 150px; display:flex; align-items:center; gap:.6rem; padding:.7rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); } .stat .sdot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .stat .sn { font-family:var(--mono); font-weight:600; font-size:1.15rem; } .stat .sl { font-size:.8rem; color:var(--muted); } /* Schnellzugriff – ruhige, bordierte Zeilen (erste als Akzent) */ .qa { display:flex; flex-direction:column; gap:.5rem; } .qa a { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text); font-weight:550; font-size:.9rem; } .qa a:hover { border-color:var(--faint); background:var(--surface-2); text-decoration:none; } .qa a .k { margin-left:auto; color:var(--faint); font-size:.78rem; } .qa a.lead { border-color:var(--primary-line); background:var(--primary-weak); color:var(--primary); } /* Status-Karten (Dashboard, Alt-Markup) */ .status-card { background-color: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); transition: background-color .15s; } .status-card:hover { background-color: var(--surface-3); } /* ============================================================================ Tabellen ============================================================================ */ .table { font-size: 0.9rem; --bs-table-bg: transparent; color: var(--text); border-color: var(--border); } .table thead th { background-color: transparent; color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); padding: 0.7rem 0.85rem; white-space: nowrap; } .table td { vertical-align: middle; padding: 0.6rem 0.85rem; border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent; } .table-hover tbody tr:hover td { background-color: var(--surface-2); } /* ============================================================================ Buttons – klare Hierarchie ============================================================================ */ .btn { border-radius: 7px; font-weight: 600; font-size: 0.875rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-ink); } .btn-primary:focus-visible { box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); } /* Outline-Primär bewusst ruhiger (neutraler Rahmen, roter Text) */ .btn-outline-primary { color: var(--primary); border-color: var(--border-strong); background: var(--surface); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); background: transparent; } .btn-outline-secondary:hover { background-color: var(--surface-3); border-color: var(--border-strong); color: var(--text); } /* Ghost-/Quiet-Button (optional per Klasse) */ .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); } .btn-quiet:hover { background: var(--surface-3); color: var(--text); } /* ============================================================================ Formulare ============================================================================ */ .form-control, .form-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); background-color: var(--surface); } .form-control::placeholder { color: var(--faint); } .form-label { font-weight: 550; font-size: 0.82rem; color: var(--muted); } .form-text { color: var(--faint); } /* ============================================================================ Status-Chips (statusBadge) + Typ-Tags + Badges ============================================================================ */ .tb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.7; white-space: nowrap; --_c: var(--c, #6c757d); color: color-mix(in srgb, var(--_c) 80%, var(--text)); background: color-mix(in srgb, var(--_c) 15%, var(--surface)); } .tb-chip::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--_c); opacity:.95; flex:0 0 auto; } /* Fallback ohne color-mix: klassischer Vollfarb-Badge */ @supports not (color: color-mix(in srgb, red, blue)) { .tb-chip { background: var(--_c); color:#fff; } .tb-chip::before { background:#fff; } } .badge { font-weight: 600; font-size: 0.72rem; padding: 0.32em 0.6em; border-radius: 0.35rem; } /* Typ-Badges dezent als „Tag" (neutraler Rahmen) */ .badge-allgemein, .badge-stick, .badge-druck { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--border-strong); font-weight: 600; } /* ============================================================================ Alerts / Links / Listen ============================================================================ */ .alert { border-radius: var(--radius); border: 1px solid var(--border); font-size: 0.9rem; } .list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text); } /* Dropdown im dunklen Stil (Admin/Neu) – an Navbar-Farbe koppeln */ .dropdown-menu-dark { background-color: var(--bar); border-color: rgba(0,0,0,.3); } .dropdown-menu-dark .dropdown-item { color: var(--bar-muted); } .dropdown-menu-dark .dropdown-item:hover { background-color: var(--primary); color: var(--primary-ink); } /* Seitenüberschrift (falls genutzt) */ .page-header { background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0; letter-spacing:-0.01em; } /* ============================================================================ Scrollbar ============================================================================ */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } /* ============================================================================ Utilities ============================================================================ */ .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } .cursor-pointer { cursor: pointer; } .min-w-0 { min-width: 0; } /* Auftragsnummern/Codes/Beträge einheitlich als Monospace ausrichten */ .tbl .onr, a.onr { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ============================================================================ Kontaktblock im Auftrag (Ansprechpartner: Telefon + E-Mail dominant) ============================================================================ */ .tb-kontakt-card { border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); } .tb-kontakt-lab { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .tb-kontakt-name { font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .tb-kontakt-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 1.05rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .tb-kontakt-link:hover { border-color: var(--primary); color: var(--primary); } .tb-kontakt-link i { color: var(--primary); } @media (max-width: 576px) { .tb-kontakt-link { width: 100%; justify-content: center; font-size: 1rem; } } /* ============================================================================ Werkhallen-Dashboard ============================================================================ */ .status-card-werkhalle { transition: border-color .15s, box-shadow .15s; cursor: pointer; } .status-card-werkhalle:hover { box-shadow: var(--shadow-sm); } .status-card-werkhalle.active { box-shadow: 0 0 0 2px var(--primary); } .werkhalle-kachel { transition: box-shadow .15s; height: 100%; } .werkhalle-kachel:hover { box-shadow: var(--shadow-md); } /* Kurzbeschreibung: sprechende Kennung unter dem Kundennamen (max. 2 Zeilen) */ .werkhalle-kurzbeschreibung { font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .werkhalle-ueberfaellig { border-left: 3px solid var(--primary) !important; } .werkhalle-dringend { border-left: 3px solid #b8860b !important; } /* dezente Tönung statt greller Vollfläche */ .werkhalle-ueberfaellig { background-color: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important; animation: pulse-danger 2.4s infinite; } .werkhalle-dringend { background-color: color-mix(in srgb, #d0a020 8%, var(--surface)) !important; } @keyframes pulse-danger { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); } } @media (prefers-reduced-motion: reduce) { .werkhalle-ueberfaellig { animation: none; } } /* Benachrichtigungen: ungelesen */ .list-group-item-light { background-color: var(--surface-2) !important; border-left: 3px solid var(--primary); } /* Datei-Upload */ #dateien-widget .list-group-item { transition: background-color .15s; } #dateien-widget .list-group-item:hover { background-color: var(--surface-2); } /* Admin */ .color-swatch { display:inline-block; width:22px; height:22px; border-radius:4px; border:1px solid var(--border-strong); vertical-align:middle; } .edit-form { display:none; } .admin-color-picker { width:42px; height:38px; padding:2px; cursor:pointer; } .admin-color-text { max-width:100px; font-family:var(--mono); } /* Setup */ .setup-container { max-width:700px; margin:2rem auto; } .setup-header { text-align:center; padding:2rem 0; } .setup-header h1 { color:var(--primary); font-weight:700; } .setup-step { display:flex; align-items:flex-start; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--border); } .setup-step:last-child { border-bottom:none; } .setup-step .step-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; } .step-success .step-icon { background:#d1e7dd; color:#198754; } .step-error .step-icon { background:#f8d7da; color:#dc3545; } .step-pending .step-icon { background:var(--surface-3); color:var(--muted); } /* ============================================================================ Dark-Mode: fest kodierte Bootstrap-Utilities in Templates angleichen (bg-light / bg-white / text-dark tauchen im Code vielfach auf) ============================================================================ */ [data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text) !important; } [data-bs-theme="dark"] .badge.bg-light { color: var(--text) !important; } [data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(255,92,104,.12); --bs-table-color: var(--text); } [data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(210,160,60,.14); --bs-table-color: var(--text); } [data-bs-theme="dark"] .table-active { --bs-table-bg: var(--surface-3); --bs-table-color: var(--text); } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 991.98px) { /* Werkhallen-Statusleiste horizontal wischen */ .werkhalle-status-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 0.35rem; } .werkhalle-status-row > .col { flex: 0 0 auto; width: 9.5rem; scroll-snap-align: start; } } @media (max-width: 768px) { .card-body { padding: 0.85rem; } .kpi-icon { width: 38px; height: 38px; font-size: 1.1rem; } .table { font-size: 0.82rem; } .table thead th { font-size: 0.66rem; padding: 0.5rem; } .table td { padding: 0.45rem 0.5rem; } h1.h3, .h3 { font-size: 1.2rem; } .btn { padding-top: 0.5rem; padding-bottom: 0.5rem; } .btn-sm { padding-top: 0.4rem; padding-bottom: 0.4rem; } .werkhalle-kachel .btn { min-height: 44px; } .dropdown-menu { max-width: 92vw; } } @media (max-width: 576px) { .container-fluid { padding-left: 12px; padding-right: 12px; } .navbar-brand .brand-subtitle { display: none; } /* iOS: >=16px verhindert Auto-Zoom beim Fokus */ .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; } h1, .h1 { font-size: 1.5rem; } .main-content .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: 0.5rem; } #mainNav > .d-flex { flex-wrap: wrap; margin-top: 0.5rem; } #mainNav form[role="search"] { width: 100%; } .modal-dialog { margin: 0.5rem; } } .table-responsive { -webkit-overflow-scrolling: touch; }