/* ============================================================ DESIGN "MODERN" (intern historisch: apple-theme / apple_design) ------------------------------------------------------------ Globaler Design-Layer NACH app.css: übersetzt die Apple- Design-Sprache (System-Typografie, translucente Materialien, Tiefe statt harter Kanten, Tinted Buttons, Press-Feedback) auf das bestehende Bootstrap-5-UI. Rein additiv — Datei + zwei -Zeilen entfernen = altes Design. Farbsemantik bleibt: Blau=Speichern, Rot=Löschen, Gelb/Orange=Verwerfen, Grau=Sekundär, gelbe Admin-Markierung. ============================================================ */ :root { /* Apple-Systemfarben (Light, "accessible"-Varianten für Text auf Weiß) */ --apple-blue: #0071e3; --apple-blue-deep: #0060c9; --apple-green: #248a3d; --apple-green-vivid: #34c759; --apple-red: #e0301e; --apple-red-deep: #c62b1a; --apple-orange: #c93400; --apple-orange-soft: #ff9500; --apple-teal: #0071a4; --apple-ink: #1d1d1f; /* Primärtext */ --apple-ink-2: #494949; /* Sekundärtext kräftig */ --apple-gray: #6e6e73; /* Sekundärtext */ --apple-hairline: rgba(0, 0, 0, .10); --apple-separator: #e8e8ed; --apple-bg: #f5f5f7; /* Seitengrund */ --apple-surface: #ffffff; /* Karten */ --apple-material: rgba(251, 251, 253, .80); /* translucente Chrome-Leisten */ /* Tiefe: kleine Chips flach, große Flächen "dicker" (Skill §12) */ --apple-shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05); --apple-shadow-hover: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .10); --apple-shadow-float: 0 10px 40px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .08); /* Apple-typische Ease-Kurve (schnell raus, weich rein) */ --apple-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Bootstrap-Grundwerte umlenken */ --bs-border-radius: 12px; --bs-border-radius-sm: 9px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 20px; --bs-body-color: var(--apple-ink); --bs-body-bg: var(--apple-bg); --bs-primary: var(--apple-blue); --bs-primary-rgb: 0, 113, 227; --bs-success: var(--apple-green); --bs-success-rgb: 36, 138, 61; --bs-danger: var(--apple-red); --bs-danger-rgb: 224, 48, 30; --bs-link-color: #0066cc; --bs-link-color-rgb: 0, 102, 204; --bs-link-hover-color: var(--apple-blue-deep); --bs-secondary-color: var(--apple-gray); } /* ============================================================ 1. Typografie — Systemschrift, optisches Tracking (Skill §15) ============================================================ */ /* Schrift-Setup bewusst konservativ für Windows-Schärfe: - Nur echte installierte Schnitte (Segoe UI hat 400/600/700 — synthetische Zwischengewichte wie 650 rendern matschig). - Kein font-smoothing/text-rendering-Override (kostet ClearType). - Negatives Tracking nur auf großen Titeln, mild. */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--apple-ink); background: var(--apple-bg) !important; /* schlägt .bg-light auf */ } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; color: var(--apple-ink); } /* Großer Text: leicht enger. Ab h3 neutral — kleine Größen vertragen bei Segoe UI kein negatives Tracking (wirkt unscharf). */ h1, .h1 { letter-spacing: -0.01em; line-height: 1.1; } h2, .h2 { letter-spacing: -0.008em; line-height: 1.12; } .text-muted { color: var(--apple-gray) !important; } /* ============================================================ 2. Navbar — translucentes Material, Inhalt scrollt darunter (Skill §12: Chrome als schwebende Funktionsschicht) ============================================================ */ .navbar.bg-dark { /* bg-dark neutralisieren, ohne gegen !important zu kämpfen. Opazität bewusst hoch: je deckender die Leiste, desto schärfer bleibt ihr Text (Windows-ClearType mag keine Transparenz). */ --bs-dark-rgb: 251, 251, 253; --bs-bg-opacity: .90; border-bottom: 1px solid var(--apple-hairline); box-shadow: none; } /* Blur auf einem Pseudo-Element HINTER dem Navbar-Inhalt: backdrop-filter direkt auf der sticky Navbar glitcht in Chromium (Compositing mit den ebenfalls geblurrten Dropdowns darin). */ .navbar.bg-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } @supports not (backdrop-filter: blur(1px)) { .navbar.bg-dark { --bs-bg-opacity: .97; } } /* navbar-dark-Textfarben auf dunkel drehen */ .navbar.navbar-dark { --bs-navbar-color: rgba(29, 29, 31, .72); --bs-navbar-hover-color: rgba(29, 29, 31, .95); --bs-navbar-active-color: #1d1d1f; --bs-navbar-brand-color: #1d1d1f; --bs-navbar-brand-hover-color: #000; --bs-navbar-disabled-color: rgba(29, 29, 31, .35); --bs-navbar-toggler-border-color: rgba(29, 29, 31, .15); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829,29,31,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar .nav-link { font-weight: 500; border-radius: 8px; transition: color .15s ease, background-color .15s ease; } .navbar .nav-link:hover { background: rgba(0, 0, 0, .045); } /* Aktiver Menuepunkt: kraeftigere Pille als der Hover (macOS-Stil). .bg-dark im Selektor noetig: der Layout-Style-Block (im , nach diesem Stylesheet) definiert die weisse Pille des klassischen Designs mit gleicher Spezifitaet - hier gewinnt sonst die falsche Farbe. */ .navbar.bg-dark .nav-link.active { color: var(--bs-navbar-active-color); background: rgba(0, 0, 0, .07); font-weight: 600; } .navbar .navbar-text { color: rgba(29, 29, 31, .65); } .navbar .badge.bg-secondary, .navbar .badge.bg-light { background: rgba(0, 0, 0, .07) !important; color: var(--apple-ink-2) !important; } /* Dunkle Buttons/Umrisse in der hellen Leiste umfärben */ .navbar .btn-outline-light { --bs-btn-color: var(--apple-ink-2); --bs-btn-border-color: rgba(0, 0, 0, .18); --bs-btn-hover-bg: rgba(0, 0, 0, .06); --bs-btn-hover-color: var(--apple-ink); --bs-btn-hover-border-color: rgba(0, 0, 0, .25); --bs-btn-active-bg: rgba(0, 0, 0, .09); --bs-btn-active-color: var(--apple-ink); } /* ============================================================ 3. Dropdown-Menüs — Material, das am Auslöser entsteht (Skill §7: transform-origin am Trigger, §12: materialize) ============================================================ */ .dropdown-menu { --bs-dropdown-border-radius: 14px; --bs-dropdown-border-color: rgba(0, 0, 0, .06); --bs-dropdown-link-hover-bg: rgba(0, 0, 0, .05); --bs-dropdown-link-active-bg: var(--apple-blue); /* VOLL deckend. KEIN backdrop-filter: der glitcht in Chromium, wenn das Menü in der geblurrten Sticky-Navbar animiert. Und keine Rest-Transparenz (frueher .97): dann scheinen kraeftige Elemente der Seite als graue Flaeche durch - z.B. der gruene Start-Button der Zeiterfassungs-Kachel genau hinter "Admin > Lieferanten". */ background: rgb(252, 252, 253); box-shadow: var(--apple-shadow-float); padding: 6px; } .dropdown-menu .dropdown-item { border-radius: 9px; padding: .45rem .8rem; font-weight: 450; transition: background-color .12s ease; } .dropdown-menu .dropdown-divider { border-color: var(--apple-hairline); opacity: 1; } .dropdown-menu.show { animation: appleMenuIn .22s var(--apple-ease); transform-origin: top center; } @keyframes appleMenuIn { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ============================================================ 4. Buttons — Filled + Tinted statt Outline-Geometrie (Skill §1: Feedback beim Drücken, sofort) ============================================================ */ .btn { --bs-btn-border-radius: 10px; font-weight: 500; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease-out; } .btn:active { transform: scale(.97); } .btn-sm { --bs-btn-border-radius: 8.5px; } .btn-lg { --bs-btn-border-radius: 13px; } /* Gefüllte Buttons: Apple-Farben, keine Border */ .btn-primary { --bs-btn-bg: var(--apple-blue); --bs-btn-border-color: var(--apple-blue); --bs-btn-hover-bg: var(--apple-blue-deep); --bs-btn-hover-border-color: var(--apple-blue-deep); --bs-btn-active-bg: #0055b3; --bs-btn-active-border-color: #0055b3; --bs-btn-disabled-bg: #9ec8f2; --bs-btn-disabled-border-color: #9ec8f2; } .btn-success { --bs-btn-bg: var(--apple-green); --bs-btn-border-color: var(--apple-green); --bs-btn-hover-bg: #1d7433; --bs-btn-hover-border-color: #1d7433; --bs-btn-active-bg: #196529; --bs-btn-active-border-color: #196529; } .btn-danger { --bs-btn-bg: var(--apple-red); --bs-btn-border-color: var(--apple-red); --bs-btn-hover-bg: var(--apple-red-deep); --bs-btn-hover-border-color: var(--apple-red-deep); --bs-btn-active-bg: #b02616; --bs-btn-active-border-color: #b02616; } /* Outline-Buttons -> Apple "tinted": zarter Farbgrund, kein Rahmen. Semantik (blau/rot/orange/grau) bleibt exakt erhalten. */ .btn-outline-primary { --bs-btn-color: var(--apple-blue); --bs-btn-bg: rgba(0, 113, 227, .10); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(0, 113, 227, .16); --bs-btn-hover-color: var(--apple-blue-deep); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--apple-blue); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; } .btn-outline-secondary { --bs-btn-color: var(--apple-ink-2); --bs-btn-bg: rgba(120, 120, 128, .12); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(120, 120, 128, .20); --bs-btn-hover-color: var(--apple-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: rgba(120, 120, 128, .28); --bs-btn-active-color: var(--apple-ink); --bs-btn-active-border-color: transparent; } .btn-outline-success { --bs-btn-color: var(--apple-green); --bs-btn-bg: rgba(52, 199, 89, .12); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(52, 199, 89, .20); --bs-btn-hover-color: #1d7433; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--apple-green); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; } .btn-outline-danger { --bs-btn-color: var(--apple-red); --bs-btn-bg: rgba(255, 59, 48, .10); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255, 59, 48, .17); --bs-btn-hover-color: var(--apple-red-deep); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--apple-red); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; } .btn-outline-warning { --bs-btn-color: var(--apple-orange); --bs-btn-bg: rgba(255, 149, 0, .13); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255, 149, 0, .22); --bs-btn-hover-color: #a12a00; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--apple-orange-soft); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; } .btn-outline-info { --bs-btn-color: var(--apple-teal); --bs-btn-bg: rgba(0, 113, 164, .10); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(0, 113, 164, .17); --bs-btn-hover-color: #005a83; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--apple-teal); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; } .btn-outline-dark { --bs-btn-color: var(--apple-ink); --bs-btn-bg: rgba(0, 0, 0, .06); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(0, 0, 0, .12); --bs-btn-hover-color: var(--apple-ink); --bs-btn-hover-border-color: transparent; } /* Gewählte Toggle-Buttons (btn-check) füllen sich wie zuvor */ .btn-check:checked + .btn-outline-primary { background: var(--apple-blue); color: #fff; border-color: transparent; } .btn-check:checked + .btn-outline-secondary { background: #6e6e73; color: #fff; border-color: transparent; } .btn-check:checked + .btn-outline-success { background: var(--apple-green); color: #fff; border-color: transparent; } .btn-check:checked + .btn-outline-danger { background: var(--apple-red); color: #fff; border-color: transparent; } .btn-check:checked + .btn-outline-warning { background: var(--apple-orange-soft); color: #fff; border-color: transparent; } /* Button-Gruppen: Tinted-Segmente mit Hairline-Trennern (Segmented Control) */ .btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child, .btn-group > :first-child .btn { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .btn-group > .btn:last-child, .btn-group > :last-child .btn { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .btn-group > .btn + .btn { border-left: 1px solid rgba(0, 0, 0, .08); } /* Schwebende Buttons auf Bild-Kacheln (Artikel-Bilder: Stern + Löschen, Detail-Ansicht .show-img-wrap und Bearbeiten-Maske .article-file-card): die tinted-transparenten Outline-Buttons sind auf Fotos praktisch unsichtbar → deckende Fläche mit Schatten, Löschen in Vollrot. */ .show-img-wrap .show-img-delete .btn, .show-img-wrap .show-img-star .btn, .article-file-card .article-file-delete .btn, .article-file-card .article-file-star .btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } .show-img-wrap .show-img-delete .btn-outline-danger, .article-file-card .article-file-delete .btn-outline-danger { --bs-btn-bg: var(--apple-red); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--apple-red-deep); --bs-btn-hover-color: #fff; } .show-img-wrap .show-img-star .btn-outline-secondary, .article-file-card .article-file-star .btn-outline-secondary { --bs-btn-bg: #fff; --bs-btn-color: var(--apple-ink); --bs-btn-hover-bg: #f2f2f7; --bs-btn-hover-color: var(--apple-ink); } /* ============================================================ 5. Karten & Flächen — Tiefe statt Rahmen ============================================================ */ .card { --bs-card-border-radius: 16px; --bs-card-inner-border-radius: 15px; --bs-card-border-color: rgba(0, 0, 0, .05); background: var(--apple-surface); box-shadow: var(--apple-shadow-card); } .card.border-0 { border-color: rgba(0, 0, 0, .05) !important; } .card.shadow-sm { box-shadow: var(--apple-shadow-card) !important; } .card > .card-header { background: transparent; border-bottom: 1px solid var(--apple-separator); font-weight: 600; padding-top: .9rem; padding-bottom: .9rem; } .card > .card-footer { background: transparent; border-top: 1px solid var(--apple-separator); } /* Dashboard-Kacheln: sanftes Anheben. Nur ganzzahliges translateY, KEIN scale — fraktionale Skalierung macht Text auf Windows unscharf. */ a.text-decoration-none .card, .split-tile { transition: transform .25s var(--apple-ease), box-shadow .25s var(--apple-ease); } a.text-decoration-none:hover .card, .split-tile:hover { transform: translateY(-2px); box-shadow: var(--apple-shadow-hover) !important; } a.text-decoration-none:active .card { transform: translateY(0); } /* Card-Header mit eigenem Hintergrund, deren Body zugeklappt ist (Bootstrap-.collapse ODER per JS display:none, z.B. Schaltplan-Gruppen): unten mitrunden, sonst ragen die eckigen Header-Ecken sichtbar über die große Card-Rundung (Urlaubs-Übersicht, Schaltplan-Gruppen). border-bottom nur transparent statt 0, damit die Höhe beim Auf-/Zuklappen stabil bleibt. */ .card > .card-header:last-child, .card > .card-header:has(+ .collapse:not(.show)), .card > .card-header:has(+ [style*="display: none"]) { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); border-bottom-color: transparent; } /* ============================================================ 6. Formulare — ruhige Felder, klarer Fokus ============================================================ */ .form-control, .form-select { border-radius: 10px; border-color: #d2d2d7; color: var(--apple-ink); transition: border-color .15s ease, box-shadow .15s ease; /* Bootstrap nimmt --bs-body-bg als Feld-Hintergrund — im Apple-Theme ist das der graue Seitengrund (#f5f5f7); Felder wirkten dadurch wie gesperrt. Editierbare Felder sind weiß. */ background-color: #fff; } /* Gesperrte Felder bewusst grau — der Unterschied bleibt sichtbar. */ .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--apple-bg); } .form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: #b8b8bf; } .form-control:focus, .form-select:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); /* Bootstrap setzt im :focus-Zustand background-color: var(--bs-body-bg) (spezifischer als .form-control oben) — ohne diese Zeile wird das AKTIVE Feld im Apple-Theme grau. Gilt global fuer alle Formulare. */ background-color: #fff; } .form-label { font-weight: 600; font-size: .875rem; color: var(--apple-ink-2); margin-bottom: .35rem; } .form-check-input:checked { background-color: var(--apple-blue); border-color: var(--apple-blue); } .form-check-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); } /* Switches im iOS-Look: Grün, satt gerundet */ .form-switch .form-check-input { height: 1.35em; width: 2.4em; } .form-switch .form-check-input:checked { background-color: var(--apple-green-vivid); border-color: var(--apple-green-vivid); } .input-group-text { border-radius: 10px; border-color: #d2d2d7; background: rgba(120, 120, 128, .08); color: var(--apple-gray); } /* ============================================================ 7. Tabellen — Hairline-Trenner, ruhiger Kopf ============================================================ */ .table { --bs-table-border-color: var(--apple-separator); --bs-table-striped-bg: rgba(0, 0, 0, .015); --bs-table-hover-bg: rgba(0, 113, 227, .045); } .table > thead th, .table > thead td { font-size: .8rem; font-weight: 600; color: var(--apple-gray); letter-spacing: .01em; border-bottom-width: 1px; } .table-light, thead.table-light tr, .table > thead.table-light th { --bs-table-bg: transparent; background-color: transparent !important; color: var(--apple-gray) !important; } .table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; } /* ============================================================ 8. Modals — dickes Material, Blur-Scrim, Materialize-Motion (Skill §12: dim to focus; enter = Scale+Fade statt Slide) ============================================================ */ .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .10); } .modal-header { border-bottom: 1px solid var(--apple-separator); } .modal-footer { border-top: 1px solid var(--apple-separator); } .modal-header .modal-title { font-weight: 650; letter-spacing: -0.01em; } .modal-backdrop { --bs-backdrop-bg: #2c2c2e; --bs-backdrop-opacity: .35; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); } /* Bootstrap-Slide (-50px) durch Apple-Scale ersetzen */ .modal.fade .modal-dialog { transform: scale(.96) translateY(8px); transition: transform .3s var(--apple-ease); } .modal.show .modal-dialog { transform: scale(1) translateY(0); } /* ============================================================ 9. Toasts, Alerts, Badges, Pagination ============================================================ */ .toast { border: 0; border-radius: 14px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--apple-shadow-float); color: var(--apple-ink); } .toast .toast-body { font-weight: 500; } .alert { border-radius: 14px; border-width: 0; } .alert-success { background: rgba(52, 199, 89, .14); color: #1d7433; } .alert-danger { background: rgba(255, 59, 48, .12); color: var(--apple-red-deep); } .alert-warning { background: rgba(255, 149, 0, .14); color: #8a4a00; } .alert-info { background: rgba(0, 113, 227, .10); color: var(--apple-blue-deep); } .badge { font-weight: 600; letter-spacing: .01em; border-radius: 7px; } .badge.rounded-pill { border-radius: 980px; } .pagination { --bs-pagination-border-radius: 10px; --bs-pagination-border-color: transparent; --bs-pagination-bg: rgba(120, 120, 128, .08); --bs-pagination-color: var(--apple-ink-2); --bs-pagination-hover-bg: rgba(120, 120, 128, .16); --bs-pagination-hover-border-color: transparent; --bs-pagination-hover-color: var(--apple-ink); --bs-pagination-focus-bg: rgba(120, 120, 128, .16); --bs-pagination-focus-color: var(--apple-ink); --bs-pagination-active-bg: var(--apple-blue); --bs-pagination-active-border-color: var(--apple-blue); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent; gap: 4px; } .pagination .page-link { border-radius: 9px; font-weight: 500; } /* Nav-Tabs als Segmented-Look */ .nav-tabs { --bs-nav-tabs-border-width: 0; --bs-nav-tabs-link-active-bg: #fff; background: rgba(120, 120, 128, .10); border-radius: 12px; padding: 3px; gap: 2px; } .nav-tabs .nav-link { border-radius: 9px; border: 0; color: var(--apple-ink-2); font-weight: 500; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .nav-tabs .nav-link:hover { color: var(--apple-ink); } .nav-tabs .nav-link.active { color: var(--apple-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .nav-pills { --bs-nav-pills-border-radius: 980px; --bs-nav-pills-link-active-bg: var(--apple-blue); } /* ============================================================ 10. Bestands-Komponenten der App im Apple-Look ============================================================ */ /* Auftrags-Karten in Listen */ .order-list-item { border-radius: 14px; border-color: rgba(0, 0, 0, .05); box-shadow: var(--apple-shadow-card); transition: box-shadow .25s var(--apple-ease), transform .12s ease-out; } .order-list-item:hover { box-shadow: var(--apple-shadow-hover); } .order-list-item:active { transform: scale(.995); } .order-list-item .description-preview { border: 0; border-radius: 10px; background: rgba(120, 120, 128, .07); box-shadow: none; color: var(--apple-ink); } .order-list-item .appointment-block { border-radius: 8px; } .order-list { gap: 8px; } .dashboard-group-header { border: 0; border-radius: 10px; font-weight: 600; letter-spacing: -0.005em; } /* Priority-Balken: als weiche eingefärbte Kante statt hartem Strich */ .order-list-item.priority-bar { border-left-width: 4px; } /* Admin-Markierung: bleibt gelb, aber als weicher Ring statt harter Kante */ .admin-marked { border: 1px solid rgba(255, 149, 0, .65) !important; box-shadow: 0 0 0 3px rgba(255, 193, 7, .12); } /* Listen-Gruppen */ .list-group { --bs-list-group-border-color: var(--apple-separator); --bs-list-group-border-radius: 14px; } /* Auftrags-Quick-Edit: Kategorie-/Prioritäts-Raster (option-grid in orders/show.php definiert eigene Styles im — deshalb hier mit body-Präfix übersteuern). Checked = Apple-tinted statt Bootstrap-Blau. */ body .quick-edit .option-grid label { border: 1px solid #d2d2d7; border-radius: 10px; } body .quick-edit .option-grid label:hover { border-color: var(--apple-blue); background: rgba(0, 113, 227, .05); } body .quick-edit .option-grid input[type="radio"]:checked + label { border-color: var(--apple-blue); background: rgba(0, 113, 227, .10); color: var(--apple-blue-deep); box-shadow: 0 0 0 1px var(--apple-blue) inset; } /* Footer dezent */ footer { color: var(--apple-gray); } /* ============================================================ 11. Feinschliff — Scrollbars, Fokus, Selektion ============================================================ */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 980px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .35); background-clip: padding-box; } :focus-visible { outline: 3px solid rgba(0, 113, 227, .5); outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(0, 113, 227, .22); } /* ============================================================ 12. Rücksichtnahme (Skill §14) — Reduced Motion/Transparency ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .modal.fade .modal-dialog { transform: none; } a.text-decoration-none:hover .card, .split-tile:hover { transform: none; } } @media (prefers-reduced-transparency: reduce) { .navbar.bg-dark { --bs-bg-opacity: 1; } .navbar.bg-dark::before { backdrop-filter: none; -webkit-backdrop-filter: none; } .dropdown-menu, .toast { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ============================================================ 13. Hoher Kontrast (body.high-contrast) Der Kontrast-Modus aus app.css erzwingt WEISSE Navbar-Texte (gedacht für die frühere dunkle Leiste) — auf der hellen Apple-Leiste wären sie unsichtbar. Hier: volle Deckung statt Translucency und dunkle Texte, Rest regelt app.css. ============================================================ */ body.high-contrast .navbar.bg-dark { --bs-bg-opacity: 1; border-bottom: 2px solid #1a1a1a; } body.high-contrast .navbar.bg-dark::before { backdrop-filter: none; -webkit-backdrop-filter: none; } body.high-contrast .navbar.bg-dark .nav-link, body.high-contrast .navbar.bg-dark .navbar-brand, body.high-contrast .navbar.bg-dark .navbar-text { color: #1a1a1a !important; } body.high-contrast .navbar.bg-dark .nav-link:hover { background: rgba(0, 0, 0, .08); } body.high-contrast .dropdown-menu { background: #fff; border: 1px solid #444; } body.high-contrast .toast { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #444; } body.high-contrast .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; --bs-backdrop-opacity: .5; } /* app.css gibt card-headern im Kontrast-Modus einen !important-Trenner — für zugeklappte Header muss er transparent bleiben (Ecken-Fix oben). */ body.high-contrast .card > .card-header:last-child, body.high-contrast .card > .card-header:has(+ .collapse:not(.show)), body.high-contrast .card > .card-header:has(+ [style*="display: none"]) { border-bottom-color: transparent !important; }