/* ============================================================ Design Tokens (Shadcn-kompatibel — werden per Inline-Style auf überschrieben für Schul-Branding) ============================================================ */ :root { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-sidebar-bg: #ffffff; --color-sidebar-active: #f1f5f9; --color-sidebar-border: #e5e7eb; /* Shadcn-kompatible Tokens */ --radius: 0.5rem; } /* ============================================================ Basis ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: #111827; background: #f8fafc; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } input, button, select, textarea { font-family: inherit; } button { cursor: pointer; } /* ============================================================ Login-Layout (Tailwind-Utility-Klassen als echte Klassen, damit die Login-Template ohne Änderung funktioniert) ============================================================ */ .bg-gray-50 { background-color: #f9fafb; } .bg-white { background-color: #ffffff; } .min-h-screen { min-height: 100vh; } .flex { display: flex; } .items-center { align-items: center; } .justify-center { justify-content: center; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .w-full { width: 100%; } .max-w-md { max-width: 28rem; } .rounded-2xl { border-radius: 1rem; } .shadow-lg { box-shadow: 0 10px 25px -5px rgba(0,0,0,.12), 0 4px 10px -4px rgba(0,0,0,.07); } .p-8 { padding: 2rem; } .mb-8 { margin-bottom: 2rem; } .text-center { text-align: center; } .text-2xl { font-size: 1.5rem; } .font-bold { font-weight: 700; } .text-gray-900 { color: #111827; } .mt-1 { margin-top: 0.25rem; } .text-sm { font-size: 0.875rem; } .text-gray-500 { color: #6b7280; } .mb-4 { margin-bottom: 1rem; } .rounded-lg { border-radius: 0.5rem; } .bg-red-50 { background-color: #fef2f2; } .text-red-700 { color: #b91c1c; } .space-y-5 > * + * { margin-top: 1.25rem; } .block { display: block; } .font-medium { font-weight: 500; } .text-gray-700 { color: #374151; } .mb-1 { margin-bottom: 0.25rem; } .border { border-width: 1px; } .border-gray-300 { border-color: #d1d5db; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .bg-blue-600 { background-color: #2563eb; } .text-white { color: #ffffff; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .font-semibold { font-weight: 600; } .hover\:bg-blue-700:hover { background-color: #1d4ed8; } input:focus, button:focus { outline: none; } /* ============================================================ App-Layout ============================================================ */ .app-layout { display: flex; min-height: 100vh; background: #f8fafc; } /* ============================================================ Sidebar ============================================================ */ .sidebar { width: 240px; min-height: 100vh; background: var(--color-sidebar-bg); border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; transition: width 0.2s ease; overflow-x: hidden; } .sidebar-header { height: 56px; padding: 0 1rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sidebar-logo { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 1; } .logo-mark { width: 2rem; height: 2rem; border-radius: 0.5rem; background: #09090b; color: #fff; font-weight: 700; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.02em; } .sidebar-school-logo { width: 2rem; height: 2rem; border-radius: 0.5rem; object-fit: contain; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo-name { font-size: 0.875rem; font-weight: 700; color: #111827; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logo-sub { font-size: 0.65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; } .sidebar-menu { list-style: none; margin: 0; padding: 0.75rem 0.625rem; flex: 1; } .sidebar-section { padding: 1rem 0.75rem 0.35rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #9ca3af; } .sidebar-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; color: #6b7280; font-size: 0.8125rem; font-weight: 500; border-radius: 0.5rem; transition: background 0.12s, color 0.12s; white-space: nowrap; } .sidebar-link:hover { background: #f4f4f5; color: #18181b; } .sidebar-link.active { background: var(--color-primary); color: #ffffff; font-weight: 600; } .sidebar-link.active:hover { background: var(--color-primary-hover); color: #ffffff; } .nav-icon { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; display: flex; } .nav-icon svg { width: 100%; height: 100%; } .sidebar-footer { padding: 0.875rem 1rem; border-top: 1px solid #e5e7eb; flex-shrink: 0; } .sidebar-user-info { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .sidebar-avatar { width: 1.875rem; height: 1.875rem; border-radius: 9999px; background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.02em; } .sidebar-user { font-size: 0.8125rem; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sidebar — Collapse */ .sidebar-collapsed .sidebar { width: 64px; } .sidebar-collapsed .app-main { margin-left: 64px; } .sidebar-collapsed .logo-text, .sidebar-collapsed .sidebar-section, .sidebar-collapsed .sidebar-link > span:last-child, .sidebar-collapsed .sidebar-user { display: none; } .sidebar-collapsed .sidebar-link { justify-content: center; padding: 0.5rem; } .sidebar-collapsed .sidebar-logo { justify-content: center; flex: unset; } .sidebar-collapsed .nav-icon { width: 1.25rem; height: 1.25rem; } .sidebar-collapsed .sidebar-user-info { justify-content: center; } .sidebar-collapsed .sidebar-avatar { margin: 0 auto; } .sidebar-collapsed .sidebar-header { justify-content: center; } /* Sidebar — Mobiles Overlay */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; display: none; } @media (max-width: 767px) { .sidebar-overlay { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 240px !important; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.12); } body:not(.sidebar-collapsed) .sidebar { transform: translateX(0); } .app-main { margin-left: 0 !important; } .topbar-search { width: 160px; } } @media (min-width: 768px) and (max-width: 1023px) { .sidebar { width: 64px; } .app-main { margin-left: 64px; } } /* ============================================================ App-Main ============================================================ */ .app-main { margin-left: 240px; flex: 1; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.2s ease; background: var(--color-content-bg, #f8fafc); } .app-content { padding: 1.75rem 2rem; max-width: 1280px; flex: 1; } /* ============================================================ Topbar ============================================================ */ .topbar { height: 56px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; position: sticky; top: 0; z-index: 10; } .topbar-left { display: flex; align-items: center; gap: 0.5rem; } .topbar-right { display: flex; align-items: center; gap: 0.25rem; } .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: #6b7280; background: none; border: none; cursor: pointer; transition: background 0.12s, color 0.12s; flex-shrink: 0; text-decoration: none; } .topbar-icon-btn svg { width: 1.125rem; height: 1.125rem; } .topbar-icon-btn:hover { background: #f1f5f9; color: #111827; } .topbar-avatar { width: 1.875rem; height: 1.875rem; border-radius: 9999px; background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; cursor: default; user-select: none; flex-shrink: 0; } .topbar-search-wrap { position: relative; } .topbar-search { display: flex; align-items: center; gap: 0.5rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.4rem 0.75rem; width: 260px; transition: border-color 0.12s, box-shadow 0.12s; } .topbar-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.08); background: #fff; } .search-icon { width: 0.9375rem; height: 0.9375rem; color: #9ca3af; flex-shrink: 0; } .search-input { border: none; background: transparent; outline: none; font-size: 0.875rem; color: #374151; width: 100%; } .search-input::placeholder { color: #9ca3af; } .search-kbd { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; border: 1px solid #e5e7eb; border-radius: 0.3rem; font-size: 0.6875rem; color: #9ca3af; font-family: inherit; background: #f9fafb; white-space: nowrap; flex-shrink: 0; pointer-events: none; } .search-dropdown { position: absolute; top: calc(100% + 0.375rem); left: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.625rem; box-shadow: 0 8px 30px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06); width: 340px; z-index: 50; max-height: 320px; overflow-y: auto; } .search-dropdown:empty { display: none; } .search-result-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.625rem 1rem; border-bottom: 1px solid #f1f5f9; transition: background 0.1s; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: #f8fafc; } .search-result-name { font-size: 0.875rem; font-weight: 500; color: #111827; } .search-result-sub { font-size: 0.75rem; color: #6b7280; } .search-result-empty { padding: 0.875rem 1rem; font-size: 0.875rem; color: #9ca3af; margin: 0; } /* Impersonation-Banner */ .impersonate-banner { background: #fffbeb; border-bottom: 1px solid #fde68a; padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; color: #92400e; font-weight: 500; } /* ============================================================ Seiten-Header ============================================================ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; } .page-header-group { display: flex; flex-direction: column; gap: 0.125rem; } .page-title { font-size: 1.5rem; font-weight: 700; color: #09090b; margin: 0; line-height: 1.25; letter-spacing: -0.025em; } .page-subtitle { font-size: 0.875rem; color: #71717a; margin: 0; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #71717a; margin-bottom: 0.375rem; } .breadcrumb a { color: #71717a; transition: color 0.1s; } .breadcrumb a:hover { color: #09090b; } .breadcrumb-sep { color: #d4d4d8; } /* ============================================================ Cards ============================================================ */ .card { background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04); border: 1px solid #f1f5f9; padding: 1.5rem; margin-bottom: 1.5rem; } .card-section-title { font-size: 0.9375rem; font-weight: 600; color: #111827; margin: 0 0 1.25rem; padding-bottom: 0.875rem; border-bottom: 1px solid #f1f5f9; } /* Karte mit eingebetteter Tabelle: kein Padding, Overflow hidden */ .card:has(.dataTables_wrapper), .card:has(table.datatable) { padding: 0; overflow: hidden; } /* Titel in Cards mit DataTable bekommt eigenes Padding */ .card:has(.dataTables_wrapper) .card-section-title, .card:has(table.datatable) .card-section-title { padding: 1.25rem 1.5rem 0.875rem; margin-bottom: 0; } /* ============================================================ Stat-Cards (KPI) ============================================================ */ .stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: #fff; border-radius: 0.75rem; padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04); border: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 0.25rem; } .stat-card-icon { width: 2.375rem; height: 2.375rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 0.375rem; } .stat-icon-blue { background: #eff6ff; color: #2563eb; } .stat-icon-red { background: #fef2f2; color: #dc2626; } .stat-icon-orange { background: #fff7ed; color: #ea580c; } .stat-icon-green { background: #f0fdf4; color: #16a34a; } .stat-card-label { font-size: 0.6875rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .stat-card-value { font-size: 1.75rem; font-weight: 700; color: #111827; line-height: 1.15; letter-spacing: -0.02em; } .stat-card-sub { font-size: 0.75rem; color: #9ca3af; margin-top: 0.125rem; } @media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 1rem; height: 2.25rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.12s, box-shadow 0.12s; white-space: nowrap; text-decoration: none; line-height: 1; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.25); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 2px 6px rgba(37,99,235,.3); } .btn-secondary { background: #f1f5f9; color: #374151; border: 1px solid #e5e7eb; } .btn-secondary:hover { background: #e2e8f0; border-color: #d1d5db; } .btn-danger { background: #dc2626; color: #fff; box-shadow: 0 1px 2px rgba(220,38,38,.2); } .btn-danger:hover { background: #b91c1c; } .btn-sm { height: 1.875rem; padding: 0 0.625rem; font-size: 0.75rem; border-radius: 0.375rem; } .btn-outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-outline:hover { background: #eff6ff; } /* ============================================================ Schnellfilter (Tab-Leiste, Zenith-Stil) ============================================================ */ .filter-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .filter-group { display: inline-flex; align-items: center; gap: 0.25rem; background: #e9ecef; border-radius: 0.5rem; padding: 0.25rem; } .filter-pill { padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; background: transparent; border: none; border-radius: 0.375rem; cursor: pointer; color: #6b7280; line-height: 1.25; transition: color 0.15s; } .filter-pill.active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .filter-pill:hover:not(.active) { color: #111827; } /* ============================================================ Initialen-Avatar (Lehrer-Tabelle, Zenith-Stil) ============================================================ */ .avatar-cell { display: flex; align-items: center; gap: 0.75rem; } .user-avatar { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #fff; flex-shrink: 0; } .avatar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .avatar-name { font-weight: 500; font-size: 0.875rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avatar-sub { font-size: 0.75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mehrfach-Lehrer: vorangehende Avatare mit Hover-Tooltip, letzter zeigt Name+Email inline */ .teacher-avatar-wrap { position: relative; display: inline-flex; } .teacher-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #f9fafb; border-radius: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.75rem; white-space: nowrap; z-index: 50; pointer-events: none; flex-direction: column; gap: 0.125rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .teacher-avatar-wrap:hover .teacher-tooltip { display: flex; } /* ============================================================ Icon-Buttons (Aktionsbuttons in Tabellen) ============================================================ */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 0.375rem; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; padding: 0; transition: background 0.12s, border-color 0.12s, color 0.12s; text-decoration: none; vertical-align: middle; flex-shrink: 0; } .btn-icon:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; } .btn-icon-danger { color: #dc2626; } .btn-icon-danger:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; } .actions-cell { white-space: nowrap; } .actions-cell .btn-icon, .actions-cell .btn, .actions-cell form { margin-right: 0.25rem; } /* ============================================================ Formulare ============================================================ */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; color: #111827; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; line-height: 1.5; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); outline: none; } .form-textarea { min-height: 130px; resize: vertical; line-height: 1.6; } /* Select: nativen Pfeil entfernen, einheitliche Hoehe mit Inputs */ select.form-input, .form-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.1rem; padding-right: 2rem; cursor: pointer; } .form-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .form-check input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--color-primary); } .form-hint { font-size: 0.75rem; color: #9ca3af; margin-top: 0.3rem; } .form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; } /* ============================================================ Alerts ============================================================ */ .alert { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .alert-error { background: color-mix(in srgb, var(--color-error, #f87171) 12%, white); color: color-mix(in srgb, var(--color-error, #f87171) 55%, black); border: 1px solid color-mix(in srgb, var(--color-error, #f87171) 30%, white); } .alert-success { background: color-mix(in srgb, var(--color-success, #4ade80) 12%, white); color: color-mix(in srgb, var(--color-success, #4ade80) 55%, black); border: 1px solid color-mix(in srgb, var(--color-success, #4ade80) 30%, white); } .alert-info { background: color-mix(in srgb, var(--color-info, #60a5fa) 12%, white); color: color-mix(in srgb, var(--color-info, #60a5fa) 55%, black); border: 1px solid color-mix(in srgb, var(--color-info, #60a5fa) 30%, white); } /* ============================================================ Badges ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .badge-blue { background: color-mix(in srgb, var(--color-info, #60a5fa) 18%, white); color: color-mix(in srgb, var(--color-info, #60a5fa) 55%, black); } .badge-green { background: color-mix(in srgb, var(--color-success, #4ade80) 18%, white); color: color-mix(in srgb, var(--color-success, #4ade80) 55%, black); } .badge-gray { background: #f1f5f9; color: #64748b; } .badge-red { background: color-mix(in srgb, var(--color-error, #f87171) 18%, white); color: color-mix(in srgb, var(--color-error, #f87171) 55%, black); } .badge-yellow { background: #fefce8; color: #a16207; } /* Vortext-Vorschau-Karte in der Noteneingabe */ .vortext-preview-card { background: color-mix(in srgb, var(--color-info, #60a5fa) 8%, white); border: 1px solid color-mix(in srgb, var(--color-info, #60a5fa) 25%, white); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; } /* ============================================================ Formulare — Radio-Gruppe ============================================================ */ .radio-group { display: flex; flex-wrap: wrap; gap: 1rem; } .radio-option { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.875rem; } .radio-option input[type=radio] { cursor: pointer; accent-color: var(--color-primary); } /* ============================================================ Plain-Table (einfache Tabellen ohne DataTable-Initialisierung) ============================================================ */ table.plain-table { border-collapse: collapse; width: 100%; border: none; } table.plain-table thead th { font-size: 0.8125rem; font-weight: 500; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #f1f5f9; padding: 0.75rem 1rem; text-align: left; white-space: nowrap; } table.plain-table tbody tr { border-bottom: 1px solid #f9fafb; } table.plain-table tbody tr:last-child { border-bottom: none; } table.plain-table tbody td { padding: 0.75rem 1rem; font-size: 0.875rem; color: #374151; background: #fff; vertical-align: middle; } table.plain-table tbody tr:hover td { background: #fafafa; } /* Missing-Cell: klickbare Zelle für fehlende Texte/Noten */ .missing-cell { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; color: inherit; } .missing-cell:hover .badge { opacity: 0.85; } /* HTMX Loading Indicator */ .htmx-indicator { opacity: 0; transition: opacity 0.15s; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /* ============================================================ DataTables — Zenith-Stil ============================================================ */ .dataTables_wrapper { position: relative; } .dataTables_wrapper table.dataTable, table.datatable { border-collapse: collapse; width: 100% !important; margin: 0 !important; border: none; } /* Header */ table.dataTable thead th, table.datatable thead th { font-size: 0.8125rem; font-weight: 500; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #f1f5f9 !important; border-top: none !important; padding: 0.75rem 1rem; white-space: nowrap; cursor: pointer; user-select: none; text-align: left; } table.dataTable thead th.sorting::after { content: " ↕"; font-size: 0.6rem; opacity: 0.35; } table.dataTable thead th.sorting_asc::after { content: " ↑"; font-size: 0.6rem; opacity: 1; } table.dataTable thead th.sorting_desc::after { content: " ↓"; font-size: 0.6rem; opacity: 1; } table.dataTable thead th.sorting_disabled { cursor: default; } /* Body */ table.dataTable tbody tr, table.datatable tbody tr { border-bottom: 1px solid #f9fafb; } table.dataTable tbody tr:last-child, table.datatable tbody tr:last-child { border-bottom: none; } table.dataTable tbody td, table.datatable tbody td { padding: 0.75rem 1rem; border: none; font-size: 0.875rem; color: #374151; background: #fff; vertical-align: middle; } table.dataTable tbody tr:hover td, table.datatable tbody tr:hover td { background: #fafafa !important; } /* DataTables DOM-Layout */ .dt-top { padding: 1rem 1rem 0.625rem; display: flex; align-items: center; justify-content: space-between; } .dt-top .dataTables_filter { float: none; } .dt-top .dataTables_filter label { display: inline-flex; align-items: center; } .dt-top .dataTables_filter input { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 2rem; font-size: 0.875rem; color: #374151; background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E") no-repeat 0.625rem center / 0.9375rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; width: 220px; } .dt-top .dataTables_filter input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.08); background-color: #fff; } .dt-top .dataTables_filter input::placeholder { color: #9ca3af; } .dt-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #f1f5f9; background: #f9fafb; } .dt-bottom .dataTables_length { order: 1; margin: 0; font-size: 0.8rem; color: #9ca3af; } .dt-bottom .dataTables_length label { display: inline-flex; align-items: center; gap: 0.375rem; } .dt-bottom .dataTables_length select { border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.2rem 0.4rem; font-size: 0.8rem; color: #374151; background: #fff; outline: none; } .dt-bottom .dataTables_info { order: 2; font-size: 0.8rem; color: #9ca3af; flex: 1; margin: 0; } .dt-bottom .dataTables_paginate { order: 3; } .dt-bottom .dataTables_paginate { display: flex; align-items: center; gap: 0.2rem; margin: 0; } /* Pagination */ .dataTables_wrapper .dataTables_paginate .paginate_button { display: inline-flex; align-items: center; justify-content: center; min-width: 1.875rem; height: 1.875rem; padding: 0 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.775rem; color: #374151 !important; background: #fff; cursor: pointer; transition: background 0.12s; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f1f5f9 !important; color: #111827 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary); } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { opacity: 0.35; cursor: default; background: #fff !important; } .dataTables_wrapper::after { content: ''; display: table; clear: both; } /* Export-Buttons (DataTables Buttons Extension) */ button.dt-button.dt-export-btn, a.dt-button.dt-export-btn { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.5rem !important; border: 1px solid #e5e7eb !important; background: #f1f5f9 !important; color: #374151 !important; cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s; font-family: inherit; white-space: nowrap; line-height: 1; box-shadow: none !important; text-shadow: none !important; } button.dt-button.dt-export-btn:hover, a.dt-button.dt-export-btn:hover { background: #e2e8f0 !important; border-color: #d1d5db !important; } div.dt-buttons { display: flex; gap: 0.375rem; } /* Gelöschte Zeilen */ .row-deleted { opacity: 0.5; } .row-deleted td:not(:last-child) { text-decoration: line-through; } /* ============================================================ Pivot-Tabelle (Dashboard Gesamtübersicht) ============================================================ */ .pivot-table { border-collapse: collapse; font-size: 0.8rem; width: 100%; } .pivot-table th, .pivot-table td { border: 1px solid #f1f5f9; padding: 0.625rem 0.75rem; text-align: center; white-space: nowrap; } .pivot-table th:first-child, .pivot-table td:first-child { text-align: left; min-width: 90px; font-weight: 600; position: sticky; left: 0; z-index: 2; } .pivot-table thead th:first-child { background: #f9fafb; z-index: 3; } .pivot-table tbody td:first-child { background: #ffffff; } .pivot-table thead th { background: #f9fafb; font-weight: 600; color: #374151; font-size: 0.75rem; } /* ============================================================ Notenstatistik (Admin) ============================================================ */ .stats-sticky-th { background: #ffffff; z-index: 2; } .stats-sticky-td { background: #ffffff; z-index: 1; } .stats-row-alt { background: #fafafa; } .stats-row-alt .stats-sticky-td { background: #fafafa; } .stats-cell-green { background: #dcfce7; color: #166534; font-weight: 600; text-align: center; padding: 0.5rem 0.625rem; } .stats-cell-yellow { background: #fef9c3; color: #854d0e; font-weight: 600; text-align: center; padding: 0.5rem 0.625rem; } .stats-cell-red { background: #fee2e2; color: #991b1b; font-weight: 600; text-align: center; padding: 0.5rem 0.625rem; } [data-theme="dark"] .stats-sticky-th { background: #1e293b; } [data-theme="dark"] .stats-sticky-td { background: #1e293b; } [data-theme="dark"] .stats-row-alt { background: #162033; } [data-theme="dark"] .stats-row-alt .stats-sticky-td { background: #162033; } [data-theme="dark"] .stats-cell-green { background: #14532d; color: #86efac; } [data-theme="dark"] .stats-cell-yellow { background: #713f12; color: #fde68a; } [data-theme="dark"] .stats-cell-red { background: #450a0a; color: #fca5a5; } .pivot-ok { color: #16a34a; font-weight: 600; font-size: 0.875rem; } .pivot-empty { color: #d1d5db; } .pivot-badges { display: flex; gap: 0.25rem; justify-content: center; } .pivot-missing { background: #fef2f2; color: #dc2626; border-radius: 9999px; padding: 0.1rem 0.45rem; font-weight: 700; font-size: 0.75rem; text-decoration: none; cursor: pointer; transition: background 0.1s; } .pivot-missing:hover { background: #fecaca; } .pivot-grade { background: #fff7ed; color: #c2410c; border-radius: 9999px; padding: 0.1rem 0.45rem; font-weight: 700; font-size: 0.75rem; text-decoration: none; cursor: pointer; transition: background 0.1s; } .pivot-grade:hover { background: #fed7aa; } /* ============================================================ Schriftgröße & Zeilenabstand (Benutzereinstellungen) ============================================================ */ [data-font="small"] body { font-size: 0.775rem; } [data-font="medium"] body { font-size: 0.875rem; } [data-font="large"] body { font-size: 1rem; } [data-font="small"] { font-size: 0.775rem; } [data-font="large"] { font-size: 1rem; } [data-spacing="compact"] table.datatable td, [data-spacing="compact"] table.datatable th { padding-top: 0.35rem; padding-bottom: 0.35rem; } [data-spacing="comfortable"] table.datatable td, [data-spacing="comfortable"] table.datatable th { padding-top: 1rem; padding-bottom: 1rem; } [data-spacing="comfortable"] .form-group { margin-bottom: 1.75rem; } [data-spacing="compact"] .form-group { margin-bottom: 0.75rem; } /* ============================================================ Accordion (Noteneingabe) ============================================================ */ [x-cloak] { display: none !important; } .grade-accordion + .grade-accordion { margin-top: 0.25rem; } /* ============================================================ Beurteilungs-Progress-Bars (Dashboard) ============================================================ */ .progress-bar-track { background: #f1f5f9; border-radius: 9999px; height: 0.5rem; flex: 1; } .progress-bar-fill { height: 100%; border-radius: 9999px; background: var(--color-primary); transition: width 0.3s; } /* ============================================================ Dark Mode ============================================================ */ [data-theme="dark"] body { background: #0f172a; color: #f1f5f9; } [data-theme="dark"] .app-layout { background: #0f172a; } [data-theme="dark"] .app-main { background: #0f172a; } [data-theme="dark"] .topbar { background: #1e293b; border-bottom-color: #334155; } [data-theme="dark"] .topbar-search { background: #334155; border-color: #475569; } [data-theme="dark"] .search-input { color: #f1f5f9; } [data-theme="dark"] .topbar-icon-btn { color: #94a3b8; } [data-theme="dark"] .topbar-icon-btn:hover { background: #334155; color: #f1f5f9; } [data-theme="dark"] .search-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 8px 30px rgba(0,0,0,.4); } [data-theme="dark"] .search-result-item { border-bottom-color: #334155; } [data-theme="dark"] .search-result-item:hover { background: #334155; } [data-theme="dark"] .search-result-name { color: #f1f5f9; } [data-theme="dark"] .impersonate-banner { background: #451a03; border-color: #92400e; color: #fde68a; } [data-theme="dark"] .sidebar { background: #1e293b; border-right-color: #334155; } [data-theme="dark"] .sidebar-header { border-bottom-color: #334155; } [data-theme="dark"] .logo-name { color: #f1f5f9; } [data-theme="dark"] .logo-sub { color: #64748b; } [data-theme="dark"] .sidebar-section { color: #64748b; } [data-theme="dark"] .sidebar-link { color: #94a3b8; } [data-theme="dark"] .sidebar-link:hover { background: #27272a; color: #f4f4f5; } [data-theme="dark"] .sidebar-link.active { background: var(--color-primary); color: #ffffff; font-weight: 600; } [data-theme="dark"] .sidebar-link.active:hover { background: var(--color-primary-hover); color: #ffffff; } [data-theme="dark"] .sidebar-footer { border-top-color: #334155; } [data-theme="dark"] .sidebar-user { color: #cbd5e1; } [data-theme="dark"] .page-title { color: #f1f5f9; } [data-theme="dark"] .card { background: #1e293b; border-color: #334155; box-shadow: none; } [data-theme="dark"] .card-section-title { color: #e2e8f0; border-bottom-color: #334155; } [data-theme="dark"] .stat-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .stat-card-value { color: #f1f5f9; } [data-theme="dark"] .stat-card-label { color: #94a3b8; } [data-theme="dark"] .stat-card-sub { color: #64748b; } [data-theme="dark"] .stat-icon-blue { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .stat-icon-red { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .stat-icon-orange { background: #431407; color: #fdba74; } [data-theme="dark"] .stat-icon-green { background: #14532d; color: #86efac; } [data-theme="dark"] .btn-secondary { background: #334155; color: #cbd5e1; border-color: #475569; } [data-theme="dark"] .btn-secondary:hover { background: #475569; } [data-theme="dark"] .btn-icon { background: #1e293b; border-color: #475569; color: #94a3b8; } [data-theme="dark"] .btn-icon:hover { background: #334155; color: #f1f5f9; } [data-theme="dark"] .filter-group { background: #1e293b; } [data-theme="dark"] .filter-pill { color: #94a3b8; } [data-theme="dark"] .filter-pill.active { background: #334155; color: #f1f5f9; box-shadow: 0 1px 2px rgba(0,0,0,.2); } [data-theme="dark"] .filter-pill:hover:not(.active) { color: #f1f5f9; } [data-theme="dark"] .avatar-name { color: #f1f5f9; } [data-theme="dark"] .avatar-sub { color: #94a3b8; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background-color: #334155; border-color: #475569; color: #f1f5f9; } [data-theme="dark"] select.form-input, [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); } [data-theme="dark"] .form-label { color: #cbd5e1; } [data-theme="dark"] .form-hint { color: #64748b; } [data-theme="dark"] .form-actions { border-top-color: #334155; } [data-theme="dark"] .alert-info { background: color-mix(in srgb, var(--color-info, #60a5fa) 18%, #0f172a); color: color-mix(in srgb, var(--color-info, #60a5fa) 80%, white); border-color: color-mix(in srgb, var(--color-info, #60a5fa) 40%, #0f172a); } [data-theme="dark"] .alert-success { background: color-mix(in srgb, var(--color-success, #4ade80) 18%, #0f172a); color: color-mix(in srgb, var(--color-success, #4ade80) 80%, white); border-color: color-mix(in srgb, var(--color-success, #4ade80) 40%, #0f172a); } [data-theme="dark"] .alert-error { background: color-mix(in srgb, var(--color-error, #f87171) 18%, #0f172a); color: color-mix(in srgb, var(--color-error, #f87171) 80%, white); border-color: color-mix(in srgb, var(--color-error, #f87171) 40%, #0f172a); } [data-theme="dark"] .badge-green { background: color-mix(in srgb, var(--color-success, #4ade80) 20%, #1e293b); color: color-mix(in srgb, var(--color-success, #4ade80) 80%, white); } [data-theme="dark"] .badge-red { background: color-mix(in srgb, var(--color-error, #f87171) 20%, #1e293b); color: color-mix(in srgb, var(--color-error, #f87171) 80%, white); } [data-theme="dark"] .badge-blue { background: color-mix(in srgb, var(--color-info, #60a5fa) 20%, #1e293b); color: color-mix(in srgb, var(--color-info, #60a5fa) 80%, white); } [data-theme="dark"] .badge-gray { background: #334155; color: #94a3b8; } [data-theme="dark"] .vortext-preview-card { background: color-mix(in srgb, var(--color-info, #60a5fa) 10%, #1e293b); border-color: color-mix(in srgb, var(--color-info, #60a5fa) 25%, #1e293b); } [data-theme="dark"] table.dataTable tbody td, [data-theme="dark"] table.datatable tbody td { background: #1e293b; color: #cbd5e1; } [data-theme="dark"] table.dataTable tbody tr:hover td, [data-theme="dark"] table.datatable tbody tr:hover td { background: #263548 !important; } [data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.datatable thead th { background: #263548; color: #94a3b8; border-color: #334155 !important; } [data-theme="dark"] table.dataTable tbody tr, [data-theme="dark"] table.datatable tbody tr { border-bottom-color: #263548; } [data-theme="dark"] table.plain-table thead th { background: #263548; color: #94a3b8; border-bottom-color: #334155; } [data-theme="dark"] table.plain-table tbody td { background: #1e293b; color: #cbd5e1; } [data-theme="dark"] table.plain-table tbody tr { border-bottom-color: #334155; } [data-theme="dark"] table.plain-table tbody tr:hover td { background: #263548; } [data-theme="dark"] .dt-bottom { background: #1a2638; border-top-color: #334155; } [data-theme="dark"] .dt-bottom .dataTables_length select { background: #334155; color: #f1f5f9; border-color: #475569; } [data-theme="dark"] .dt-top .dataTables_filter input { background: #334155; color: #f1f5f9; border-color: #475569; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: #1e293b !important; border-color: #334155; color: #cbd5e1 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #334155 !important; color: #f1f5f9 !important; } [data-theme="dark"] button.dt-button.dt-export-btn, [data-theme="dark"] a.dt-button.dt-export-btn { background: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important; } [data-theme="dark"] button.dt-button.dt-export-btn:hover, [data-theme="dark"] a.dt-button.dt-export-btn:hover { background: #475569 !important; } [data-theme="dark"] .pivot-table th, [data-theme="dark"] .pivot-table td { border-color: #334155; } [data-theme="dark"] .pivot-table thead th { background: #263548; color: #cbd5e1; } [data-theme="dark"] .pivot-table thead th:first-child { background: #263548; } [data-theme="dark"] .pivot-table tbody td:first-child { background: #1e293b; color: #f1f5f9; } [data-theme="dark"] .pivot-empty { color: #475569; } [data-theme="dark"] .pivot-missing { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .pivot-missing:hover { background: #7f1d1d; } [data-theme="dark"] .pivot-grade { background: #431407; color: #fdba74; } [data-theme="dark"] .pivot-grade:hover { background: #7c2d12; } /* Login-Logo */ .login-logo { max-width: 220px; max-height: 120px; margin: 0 auto 1.5rem; display: block; object-fit: contain; } /* Settings Karten-Auswahl */ .settings-cards { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; } .settings-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 1.25rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; cursor: pointer; min-width: 90px; transition: border-color 0.15s, background 0.15s; background: #fff; user-select: none; } .settings-card:hover { border-color: #9ca3af; } .settings-card.selected { border-color: var(--color-primary); background: #eff6ff; } .settings-card-icon { font-size: 1.5rem; line-height: 1; } .settings-card-label { font-size: 0.8rem; font-weight: 500; color: #374151; } [data-theme="dark"] .settings-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .settings-card:hover { border-color: #64748b; } [data-theme="dark"] .settings-card.selected { border-color: var(--color-primary); background: #1e3a5f; } [data-theme="dark"] .settings-card-label { color: #cbd5e1; } /* Hilfe-Panel Tabs */ .tab-btn { padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: #6b7280; background: none; border: none; border-radius: 0.375rem; cursor: pointer; transition: color 0.1s, background 0.1s; } .tab-btn:hover { color: #374151; background: #f3f4f6; } .tab-btn.active { color: var(--color-primary, #2563eb); background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent); font-weight: 600; } .help-content { font-size: 0.875rem; line-height: 1.6; color: #374151; } .help-content h3 { font-weight: 600; font-size: 0.9375rem; margin: 0.75rem 0 0.25rem; } .help-content p { margin: 0.25rem 0 0.5rem; } .help-content ul, .help-content ol { padding-left: 1.25rem; margin: 0.25rem 0 0.5rem; } .help-content li { margin-bottom: 0.2rem; } .help-content strong { font-weight: 600; } .help-content a { color: #2563eb; text-decoration: underline; } /* Hilfe-Drawer */ .help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; background: #ffffff; color: #1f2937; box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 200; display: flex; flex-direction: column; overflow: hidden; } .help-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; } [data-theme="dark"] .help-drawer { background: #1e293b; color: #f1f5f9; box-shadow: -4px 0 24px rgba(0,0,0,0.4); } [data-theme="dark"] .help-drawer-header { border-bottom-color: #334155; } [data-theme="dark"] #help-panel-content .help-content a { color: #93c5fd; } /* Kompaktere Darstellung im Drawer-Panel */ #help-panel-content .help-content { font-size: 0.8125rem; line-height: 1.5; } #help-panel-content .help-content h3 { font-size: 0.875rem; margin: 0.5rem 0 0.15rem; } #help-panel-content .help-content p { margin: 0.1rem 0 0.3rem; } #help-panel-content .help-content ul, #help-panel-content .help-content ol { margin: 0.1rem 0 0.3rem; } #help-panel-content .help-content li { margin-bottom: 0.1rem; } /* details/summary – einklappbare Abschnitte im Hilfe-Editor */ .help-content details { border-bottom: 1px solid #f3f4f6; margin-bottom: 0.25rem; } .help-content summary { font-weight: 600; font-size: 0.875rem; padding: 0.4rem 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; } .help-content summary::before { content: "▶"; font-size: 0.6rem; color: #9ca3af; transition: transform 0.15s; flex-shrink: 0; } .help-content details[open] summary::before { transform: rotate(90deg); } .help-content details > :not(summary) { padding-bottom: 0.5rem; } /* Pell Rich-Text-Editor */ .pell-editor { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; } .pell-actionbar { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 0.375rem 0.5rem; display: flex; gap: 0.25rem; flex-wrap: wrap; } .pell-button { background: none; border: 1px solid #e5e7eb; border-radius: 0.25rem; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.875rem; color: #374151; min-width: 1.75rem; } .pell-button:hover { background: #e5e7eb; } .pell-content { padding: 0.75rem 1rem; min-height: 150px; outline: none; font-size: 0.875rem; line-height: 1.6; } [data-theme="dark"] .help-content { color: #cbd5e1; } [data-theme="dark"] .help-content a { color: #93c5fd; } [data-theme="dark"] .pell-editor { border-color: #334155; } [data-theme="dark"] .pell-actionbar { background: #1e293b; border-bottom-color: #334155; } [data-theme="dark"] .pell-button { border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .pell-content { color: #e2e8f0; background: #0f172a; } [data-theme="dark"] .tab-btn { color: #94a3b8; } [data-theme="dark"] .tab-btn:hover { color: #cbd5e1; background: #1e293b; } [data-theme="dark"] .tab-btn.active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 15%, transparent); } /* Drag-Handle fuer Faecher-Tabelle */ .drag-handle { cursor: grab; text-align: center; color: #9ca3af; user-select: none; width: 2rem; } .drag-handle:active { cursor: grabbing; } /* Quick-Buttons im Accordion-Header der Noteneingabe */ .btn-group-quick { display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 0.375rem; overflow: hidden; flex-shrink: 0; } .btn-quick { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: none; background: transparent; color: #64748b; cursor: pointer; line-height: 1.4; white-space: nowrap; transition: background 0.12s, color 0.12s; } .btn-quick + .btn-quick { border-left: 1px solid #e5e7eb; } .btn-quick:hover { background: #f3f4f6; color: #374151; } .btn-quick-yes { background: color-mix(in srgb, var(--color-success, #4ade80) 22%, white); color: color-mix(in srgb, var(--color-success, #4ade80) 60%, black); font-weight: 600; } .btn-quick-yes:hover { background: color-mix(in srgb, var(--color-success, #4ade80) 35%, white); } .btn-quick-no { background: color-mix(in srgb, var(--color-error, #f87171) 22%, white); color: color-mix(in srgb, var(--color-error, #f87171) 60%, black); font-weight: 600; } .btn-quick-no:hover { background: color-mix(in srgb, var(--color-error, #f87171) 35%, white); } .btn-quick-neutral { background: #e5e7eb; color: #374151; font-weight: 500; } .btn-quick-neutral:hover { background: #d1d5db; color: #111827; } .btn-quick-outline { border: 1px solid #d1d5db; border-radius: 0.25rem; color: #4b5563; flex-shrink: 0; } .btn-quick-outline:hover { background: #f3f4f6; color: #374151; } .btn-quick-published { background: var(--color-primary, #2563eb); color: #fff; font-weight: 600; border-radius: 0.25rem; border: none; flex-shrink: 0; } .btn-quick-published:hover { background: color-mix(in srgb, var(--color-primary, #2563eb) 82%, black); color: #fff; } /* Teilnahme-Indikator: farbiger linker Streifen auf der Karte */ .grade-accordion[data-joined="yes"] { box-shadow: inset 4px 0 0 #22c55e, 0 1px 3px rgba(0,0,0,0.08); } .grade-accordion[data-joined="no"] { box-shadow: inset 4px 0 0 #ef4444, 0 1px 3px rgba(0,0,0,0.08); } /* Accordion-Elemente: Kontrast fuer Hell- und Dark-Mode */ .acc-nickname { color: #4b5563; margin-left: 0.5rem; } .acc-counter { font-size: 0.75rem; color: #64748b; } .acc-saving { color: #4b5563; font-size: 0.8rem; } .acc-chevron { width: 1rem; height: 1rem; color: #6b7280; flex-shrink: 0; transition: transform 0.2s; } .acc-divider { border-top: 1px solid #e2e8f0; margin-top: 0.75rem; padding-top: 0.75rem; } /* Dark Mode */ [data-theme="dark"] .btn-group-quick { border-color: #334155; } [data-theme="dark"] .btn-quick { color: #94a3b8; } [data-theme="dark"] .btn-quick + .btn-quick { border-left-color: #334155; } [data-theme="dark"] .btn-quick:hover { background: #1e293b; color: #cbd5e1; } [data-theme="dark"] .btn-quick-neutral { background: #334155; color: #cbd5e1; } [data-theme="dark"] .btn-quick-neutral:hover { background: #3f4f63; color: #f1f5f9; } [data-theme="dark"] .btn-quick-outline { border-color: #334155; color: #94a3b8; } [data-theme="dark"] .btn-quick-outline:hover { background: #1e293b; color: #cbd5e1; } [data-theme="dark"] .btn-quick-yes { background: color-mix(in srgb, var(--color-success, #4ade80) 22%, #1e293b); color: color-mix(in srgb, var(--color-success, #4ade80) 80%, white); } [data-theme="dark"] .btn-quick-yes:hover { background: color-mix(in srgb, var(--color-success, #4ade80) 32%, #1e293b); } [data-theme="dark"] .btn-quick-no { background: color-mix(in srgb, var(--color-error, #f87171) 22%, #1e293b); color: color-mix(in srgb, var(--color-error, #f87171) 80%, white); } [data-theme="dark"] .btn-quick-no:hover { background: color-mix(in srgb, var(--color-error, #f87171) 32%, #1e293b); } [data-theme="dark"] .grade-accordion[data-joined="yes"] { box-shadow: inset 4px 0 0 #22c55e, 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .grade-accordion[data-joined="no"] { box-shadow: inset 4px 0 0 #ef4444, 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .acc-nickname { color: #94a3b8; } [data-theme="dark"] .acc-counter { color: #94a3b8; } [data-theme="dark"] .acc-saving { color: #94a3b8; } [data-theme="dark"] .acc-chevron { color: #94a3b8; } [data-theme="dark"] .acc-divider { border-top-color: #334155; } /* Fehltage gespeichert: kurzes gruenes Aufleuchten der Tabellenzeile */ @keyframes absent-saved { 0%, 60% { background: #f0fdf4; } 100% { background: transparent; } } @keyframes absent-saved-dark { 0%, 60% { background: rgba(20,83,45,0.35); } 100% { background: transparent; } } .absent-row-saved { animation: absent-saved 2.5s ease forwards; } [data-theme="dark"] .absent-row-saved { animation: absent-saved-dark 2.5s ease forwards; }